@hmcts/rpx-xui-common-lib 1.7.47 → 1.7.48-filter-skill-by-service

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

@@ -709,10 +709,10 @@
                     return this.filterSettings[id];
                 }
                 if (sessionStorage.getItem(id)) {
-                    return JSON.parse(window.sessionStorage.getItem(id));
+                    return JSON.parse(sessionStorage.getItem(id));
                 }
                 if (localStorage.getItem(id)) {
-                    return JSON.parse(window.localStorage.getItem(id));
+                    return JSON.parse(localStorage.getItem(id));
                 }
                 return null;
             };
@@ -730,6 +730,24 @@
                 }
                 return this.streams[id].asObservable();
             };
+        /**
+         * @param {?} id
+         * @return {?}
+         */
+        FilterService.prototype.clearSessionAndLocalPersistance = /**
+         * @param {?} id
+         * @return {?}
+         */
+            function (id) {
+                sessionStorage.removeItem(id);
+                localStorage.removeItem(id);
+                if (this.filterSettings[id] !== undefined) {
+                    this.filterSettings[id] = null;
+                }
+                if (this.streams[id] !== undefined) {
+                    this.streams[id].next(null);
+                }
+            };
         /**
          * @private
          * @param {?} setting
@@ -741,7 +759,7 @@
          * @return {?}
          */
             function (setting) {
-                window.localStorage.setItem(setting.id, JSON.stringify(setting));
+                localStorage.setItem(setting.id, JSON.stringify(setting));
             };
         /**
          * @private
@@ -754,7 +772,7 @@
          * @return {?}
          */
             function (setting) {
-                window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
+                sessionStorage.setItem(setting.id, JSON.stringify(setting));
             };
         /**
          * @private
@@ -863,6 +881,7 @@
             this.filterService = filterService;
             this.fb = fb;
             this.submitted = false;
+            this.previousSelectedNestedCheckbox = [];
         }
         Object.defineProperty(GenericFilterComponent.prototype, "config", {
             get: /**
@@ -917,10 +936,10 @@
             function (field) {
                 /** @type {?} */
                 var validators = [];
-                if (field && field.minSelected) {
+                if (field && field.minSelected > 0) {
                     validators.push(minSelectedValidator(field.minSelected));
                 }
-                if (field && field.maxSelected) {
+                if (field && field.maxSelected > 0) {
                     validators.push(maxSelectedValidator(field.maxSelected));
                 }
                 return validators;
@@ -941,6 +960,15 @@
                 this.formSub = this.form.valueChanges.subscribe(( /**
                  * @return {?}
                  */function () { return _this.submitted = false; }));
+                this.filterSkillsByServices(null, this.config);
+                /** @type {?} */
+                var services = this.config.fields.find(( /**
+                 * @param {?} field
+                 * @return {?}
+                 */function (field) { return field.name === 'user-services'; }));
+                if (services) {
+                    this.startFilterSkillsByServices(this.form, services);
+                }
             };
         /**
          * @return {?}
@@ -1120,6 +1148,11 @@
              * @return {?}
              */
             function (field) {
+                if (field.name === 'user-services') {
+                    /** @type {?} */
+                    var selectedServices = this.getSelectedValuesForFields(this.form.controls, field);
+                    this.filterSkillsByServices(selectedServices, this.config);
+                }
                 if (field.radioSelectionChange && typeof field.radioSelectionChange === 'string') {
                     var _a = __read(field.enableCondition.split('='), 2), name_3 = _a[0], value = _a[1];
                     this.form.get(name_3).patchValue(value);
@@ -1141,6 +1174,9 @@
                 this.filterService.persist(settings, this.config.persistence);
                 this.filterService.givenErrors.next(null);
                 this.submitted = false;
+                if (this.config.cancelButtonCallback) {
+                    this.config.cancelButtonCallback();
+                }
             };
         /**
          * @param {?} values
@@ -1186,6 +1222,19 @@
                     }
                 }
             };
+        /**
+         * @param {?} field
+         * @param {?} i
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.checkBoxChecked = /**
+         * @param {?} field
+         * @param {?} i
+         * @return {?}
+         */
+            function (field, i) {
+                return (( /** @type {?} */(this.form.get(field.name))))['controls'][i]['value'];
+            };
         /**
          * @param {?} event
          * @param {?} form
@@ -1287,6 +1336,56 @@
                         }
                     }
                 }
+                if (field.name === 'user-services') {
+                    this.startFilterSkillsByServices(form, field);
+                }
+                else if (field.name === 'user-skills') {
+                    if (isChecked) {
+                        /** @type {?} */
+                        var selectedIndex = field.options.findIndex(( /**
+                         * @param {?} option
+                         * @return {?}
+                         */function (option) { return option.key === event.target.value; }));
+                        /** @type {?} */
+                        var selectedCheckbox = this.form.get('user-skills').value;
+                        selectedCheckbox[selectedIndex] = true;
+                        this.form.get('user-skills').setValue(selectedCheckbox);
+                        this.previousSelectedNestedCheckbox.push(event.target.value);
+                    }
+                    else {
+                        /** @type {?} */
+                        var index = this.previousSelectedNestedCheckbox.indexOf(event.target.value);
+                        if (index !== -1) {
+                            this.previousSelectedNestedCheckbox.splice(index, 1);
+                        }
+                    }
+                }
+            };
+        /**
+         * @private
+         * @param {?} form
+         * @param {?} field
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.startFilterSkillsByServices = /**
+         * @private
+         * @param {?} form
+         * @param {?} field
+         * @return {?}
+         */
+            function (form, field) {
+                /** @type {?} */
+                var servicesArray = [];
+                form.value[field.name].map(( /**
+                 * @param {?} service
+                 * @param {?} index
+                 * @return {?}
+                 */function (service, index) {
+                    if (service) {
+                        servicesArray.push(field.options[index].key);
+                    }
+                }));
+                this.filterSkillsByServices(servicesArray, this.config);
             };
         /**
          * @private
@@ -1399,14 +1498,14 @@
                     this.form.addControl('findPersonControl', findPersonControl);
                 }
                 var _loop_1 = function (field) {
-                    if (field.type === 'checkbox' || field.type === 'checkbox-large') {
+                    if (field.type === 'checkbox' || field.type === 'checkbox-large' || field.type === 'nested-checkbox') {
                         /** @type {?} */
                         var formArray = this_1.buildCheckBoxFormArray(field, settings);
                         this_1.form.addControl(field.name, formArray);
                     }
-                    else if (field.type === 'find-location') {
+                    else if (field.type === 'find-location' || field.type === 'find-service') {
                         /** @type {?} */
-                        var formArray = this_1.buildFindLocationFormArray(field, settings);
+                        var formArray = this_1.buildFormArray(field, settings);
                         this_1.form.addControl(field.name, formArray);
                     }
                     else {
@@ -1417,6 +1516,9 @@
                             if (field.type === 'text-input') {
                                 validators.push(forms.Validators.minLength(field.minSelected));
                             }
+                            if (field.type === 'email-input') {
+                                validators.push(forms.Validators.email);
+                            }
                         }
                         /** @type {?} */
                         var defaultValue = null;
@@ -1448,7 +1550,7 @@
                             });
                             this_1.form.addControl(field.name, formGroup);
                         }
-                        else {
+                        else if (field.type !== 'group-title') {
                             /** @type {?} */
                             var control = new forms.FormControl(defaultValue, validators);
                             this_1.form.addControl(field.name, control);
@@ -1544,7 +1646,7 @@
          * @param {?} settings
          * @return {?}
          */
-        GenericFilterComponent.prototype.buildFindLocationFormArray = /**
+        GenericFilterComponent.prototype.buildFormArray = /**
          * @private
          * @param {?} field
          * @param {?} settings
@@ -1646,8 +1748,8 @@
                         if (formGroup && formGroup.errors && (formGroup.errors.minlength || formGroup.errors.required)) {
                             errors.push({ name: field.name, error: field.minSelectedError });
                         }
-                        if (formGroup && formGroup.errors && formGroup.errors.maxLength) {
-                            errors.push({ name: field.name, error: field.minSelectedError });
+                        if (formGroup && formGroup.errors && formGroup.errors.maxlength) {
+                            errors.push({ name: field.name, error: field.maxSelectedError });
                         }
                     }
                 }
@@ -1664,17 +1766,200 @@
                             throw e_8.error;
                     }
                 }
+                // remove duplicates
+                errors = errors.filter(( /**
+                 * @param {?} filterError
+                 * @param {?} i
+                 * @param {?} arr
+                 * @return {?}
+                 */function (filterError, i, arr) {
+                    return errors.indexOf(arr.find(( /**
+                     * @param {?} item
+                     * @return {?}
+                     */function (item) { return item.name === filterError.name; }))) === i;
+                }));
                 if (errors.length) {
                     this.filterService.givenErrors.next(errors);
                 }
             };
+        /**
+         * @param {?} services
+         * @param {?} config
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.filterSkillsByServices = /**
+         * @param {?} services
+         * @param {?} config
+         * @return {?}
+         */
+            function (services, config) {
+                var _this = this;
+                this.filteredSkillsByServices = [];
+                this.filteredSkillsByServicesCheckbox = [];
+                /** @type {?} */
+                var userSkillsSelectField = config.fields.find(( /**
+                 * @param {?} f
+                 * @return {?}
+                 */function (f) { return f.name === 'user-skills' && f.type === 'group-select'; }));
+                /** @type {?} */
+                var userSkillsCheckboxField = config.fields.find(( /**
+                 * @param {?} f
+                 * @return {?}
+                 */function (f) { return f.name === 'user-skills' && f.type === 'nested-checkbox'; }));
+                if (userSkillsSelectField) {
+                    /** @type {?} */
+                    var userSkills_1 = userSkillsSelectField.groupOptions;
+                    if (!services || services.length === 0) {
+                        this.filteredSkillsByServices = userSkills_1;
+                    }
+                    else {
+                        services.forEach(( /**
+                         * @param {?} s
+                         * @return {?}
+                         */function (s) {
+                            /** @type {?} */
+                            var groupOption = userSkills_1.find(( /**
+                             * @param {?} u
+                             * @return {?}
+                             */function (u) { return u.group.toLowerCase() === s.toLowerCase(); }));
+                            if (groupOption) {
+                                _this.filteredSkillsByServices.push(groupOption);
+                            }
+                        }));
+                    }
+                }
+                else if (userSkillsCheckboxField) {
+                    /** @type {?} */
+                    var userSkills_2 = userSkillsCheckboxField.groupOptions;
+                    if (!services || services.length === 0) {
+                        this.filteredSkillsByServices = userSkills_2;
+                    }
+                    else {
+                        services.forEach(( /**
+                         * @param {?} s
+                         * @return {?}
+                         */function (s) {
+                            /** @type {?} */
+                            var groupOption = userSkills_2.find(( /**
+                             * @param {?} u
+                             * @return {?}
+                             */function (u) { return u.group.toLowerCase() === s.toLowerCase(); }));
+                            if (groupOption) {
+                                _this.filteredSkillsByServices.push(groupOption);
+                            }
+                        }));
+                        this.filteredSkillsByServicesCheckbox = this.filteredSkillsByServices.map(( /**
+                         * @param {?} skill
+                         * @return {?}
+                         */function (skill) {
+                            return skill.options;
+                        })).reduce(( /**
+                         * @param {?} a
+                         * @param {?} b
+                         * @return {?}
+                         */function (a, b) {
+                            return a.concat(b);
+                        }), []);
+                        userSkillsCheckboxField.options = [];
+                        userSkillsCheckboxField.options = this.filteredSkillsByServicesCheckbox;
+                        (( /** @type {?} */(this.form.get('user-skills'))))['controls'] = this.filteredSkillsByServicesCheckbox.map(( /**
+                         * @return {?}
+                         */function () { return new forms.FormControl(); }));
+                        this.form.get('user-skills').setValue(this.filteredSkillsByServicesCheckbox.map(( /**
+                         * @param {?} skill
+                         * @return {?}
+                         */function (skill) {
+                            return _this.previousSelectedNestedCheckbox.includes(skill.key);
+                        })));
+                        return this.filteredSkillsByServicesCheckbox;
+                    }
+                }
+                this.filteredSkillsByServices = this.sortGroupOptions(this.filteredSkillsByServices);
+                return this.filteredSkillsByServices;
+            };
+        /**
+         * @private
+         * @param {?} formValues
+         * @param {?} field
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.getSelectedValuesForFields = /**
+         * @private
+         * @param {?} formValues
+         * @param {?} field
+         * @return {?}
+         */
+            function (formValues, field) {
+                /** @type {?} */
+                var selectedValues = [];
+                Object.keys(formValues).map(( /**
+                 * @param {?} name
+                 * @return {?}
+                 */function (name) {
+                    /** @type {?} */
+                    var values = formValues[name].value;
+                    if (name === field.name) {
+                        values.forEach(( /**
+                         * @param {?} v
+                         * @return {?}
+                         */function (v) {
+                            selectedValues.push(v.key);
+                        }));
+                    }
+                }));
+                return selectedValues;
+            };
+        /**
+         * @private
+         * @param {?} groupOptions
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.sortGroupOptions = /**
+         * @private
+         * @param {?} groupOptions
+         * @return {?}
+         */
+            function (groupOptions) {
+                /** @type {?} */
+                var sortedResults = [];
+                /** @type {?} */
+                var groups = groupOptions.map(( /**
+                 * @param {?} go
+                 * @return {?}
+                 */function (go) { return go.group; }));
+                groups.sort().forEach(( /**
+                 * @param {?} g
+                 * @return {?}
+                 */function (g) {
+                    /** @type {?} */
+                    var options = groupOptions.find(( /**
+                     * @param {?} go
+                     * @return {?}
+                     */function (go) { return go.group === g; })).options;
+                    /** @type {?} */
+                    var sortedOptions = options.sort(( /**
+                     * @param {?} a
+                     * @param {?} b
+                     * @return {?}
+                     */function (a, b) {
+                        return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : (b.label.toLowerCase() > a.label.toLowerCase() ? -1 : 0);
+                    }));
+                    /** @type {?} */
+                    var result = {
+                        group: g,
+                        options: sortedOptions
+                    };
+                    sortedResults.push(result);
+                }));
+                return sortedResults;
+            };
         GenericFilterComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-generic-filter',
-                        template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && ((form.get(field.name).errors?.minlength || form.get(field.name).errors?.required) || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && (form.get(field.name).errors?.minlength || form.get(field.name).errors?.required)\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (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          ></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                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [field]=\"field\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedServices]=\"form.get(field.name)?.value\"\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          />\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
+                        template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break 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\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?.required) || form.get(field.name).errors?.maxlength || form.get(field.name).errors?.email)}\">\n\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\n            <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n              {{ field.titleHint }}\n            </div>\n          </div>\n\n          <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n\n          <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n            *ngIf=\"field.displayMinSelectedError && submitted && (form.get(field.name).errors?.minlength || form.get(field.name).errors?.required)\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n          </span>\n\n          <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n            *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxlength\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n          </span>\n\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\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 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 selected value=\"\">{{field.disabledText}}</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_' + item.key\"\n                         [name]=\"'checkbox_' + item.key\"\n                  />\n                  <label\n                    [for]=\"'checkbox_' + item.key\"\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n                  >{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'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                         [checked]=\"checkBoxChecked(field, i)\"\n                         (change)=\"toggleSelectAll($event, form, item, field)\"\n                         [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                         [name]=\"'checkbox_' + item.key\"\n                  />\n                  <label\n                    [for]=\"'checkbox_' + item.key\"\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n                  >{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkbox-large'\">\n              <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n                <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n                  <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                         [attr.disabled]=\"disabled(field, form)\"\n                         [formControlName]=\"i\"\n                         (change)=\"toggleSelectAll($event, form, item, field)\"\n                         [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                         [name]=\"'checkbox_' + item.key\"\n                  />\n                  <label\n                    [for]=\"'checkbox_' + item.key\"\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n                  >{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'radio'\">\n              <div class=\"govuk-radios\">\n                <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n                  <input type=\"radio\"\n                         [formControlName]=\"field.name\"\n                         [id]=\"'radio_' + item.key\"\n                         [attr.disabled]=\"disabled(field, form)\"\n                         [checked]=\"item.key === form.get(field.name).value\"\n                         class=\"govuk-radios__input\"\n                         [value]=\"item.key\"\n                         (change)=\"fieldChanged(field, form)\"\n                  />\n                  <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'find-person'\">\n              <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                                  (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              ></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                                    [services]=\"form.get(field.findLocationField)?.value\"\n                                    [field]=\"field\"\n              ></xuilib-find-location>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'find-service'\">\n              <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                    [form]=\"form\"\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              />\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              />\n            </ng-container>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m\"/>\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 .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 .govuk-select{width:100%}"]
+                        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%}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3940,7 +4225,7 @@
 
     /**
      * @fileoverview added by tsickle
-     * Generated from: lib/services/session-storage/session-storage.service.ts
+     * Generated from: lib/services/storage/session-storage/session-storage.service.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var SessionStorageService = /** @class */ (function () {
@@ -4506,7 +4791,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\n    <div class=\"search-location__input-container\">\n      <exui-search-location class=\"search-location__input\"\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 govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\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 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\n    <div class=\"search-location__input-container\">\n      <exui-search-location class=\"search-location__input\"\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()\"\n         class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n         *ngIf=\"enableAddLocationButton\">\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 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}"]
                     }] }
         ];
@@ -5216,15 +5501,27 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var FindServiceComponent = /** @class */ (function () {
-        function FindServiceComponent(fb) {
-            this.fb = fb;
-            this.serviceTitle = 'Search for a service by name';
+        function FindServiceComponent() {
+            this.services = [];
+            this.selectedServices = [];
             this.enableAddServiceButton = true;
-            this.disableInputField = false;
-            this.form = this.fb.group({
-                searchTerm: ['']
-            });
+            this.disabled = false;
+            this.serviceFieldChanged = new i0.EventEmitter();
+            this.tempSelectedService = null;
         }
+        /**
+         * @return {?}
+         */
+        FindServiceComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                this.selectedServices = this.selectedServices !== null ? this.selectedServices.filter(( /**
+                 * @param {?} service
+                 * @return {?}
+                 */function (service) { return service.key; })) : [];
+                this.SortAnOptions();
+            };
         /**
          * @return {?}
          */
@@ -5232,21 +5529,150 @@
          * @return {?}
          */
             function () {
-                // Todo
+                var _this = this;
+                if (this.tempSelectedService === null) {
+                    return;
+                }
+                this.selectedServices = __spread(this.selectedServices, [this.tempSelectedService]);
+                this.addSelectedServicesToForm([this.tempSelectedService]);
+                this.services = this.services.filter(( /**
+                 * @param {?} s
+                 * @return {?}
+                 */function (s) { return s.key !== _this.tempSelectedService.key; }));
+                this.tempSelectedService = null;
+                this.serviceFieldChanged.emit();
+            };
+        /**
+         * @param {?} service
+         * @return {?}
+         */
+        FindServiceComponent.prototype.removeService = /**
+         * @param {?} service
+         * @return {?}
+         */
+            function (service) {
+                if (service.key) {
+                    this.selectedServices = this.selectedServices !== null ? this.selectedServices.filter(( /**
+                     * @param {?} selectedService
+                     * @return {?}
+                     */function (selectedService) { return selectedService.key !== service.key; })) : [];
+                    /** @type {?} */
+                    var formArray = ( /** @type {?} */(this.form.get(this.field.name)));
+                    /** @type {?} */
+                    var index = (formArray.value).findIndex(( /**
+                     * @param {?} selectedService
+                     * @return {?}
+                     */function (selectedService) { return selectedService.key === service.key; }));
+                    if (index > -1) {
+                        formArray.removeAt(index);
+                        this.services.splice(index, 0, service);
+                        this.SortAnOptions();
+                    }
+                    this.serviceFieldChanged.emit();
+                }
+            };
+        /**
+         * @param {?} service
+         * @return {?}
+         */
+        FindServiceComponent.prototype.onServiceSelected = /**
+         * @param {?} service
+         * @return {?}
+         */
+            function (service) {
+                if (!service) {
+                    this.tempSelectedService = null;
+                    return;
+                }
+                if (this.field.maxSelected === 1) {
+                    this.removeSelectedValues();
+                    this.addSelectedServicesToForm([service]);
+                }
+                else {
+                    if (!this.selectedServices.find(( /**
+                     * @param {?} s
+                     * @return {?}
+                     */function (s) { return s.key === service.key; }))) {
+                        if (service.key) {
+                            this.tempSelectedService = service;
+                        }
+                    }
+                }
+            };
+        /**
+         * @private
+         * @return {?}
+         */
+        FindServiceComponent.prototype.removeSelectedValues = /**
+         * @private
+         * @return {?}
+         */
+            function () {
+                /** @type {?} */
+                var formArray = ( /** @type {?} */(this.form.get(this.field.name)));
+                for (var i = 0; i < formArray.length; i++) {
+                    formArray.removeAt(i);
+                }
+                this.selectedServices = [];
+            };
+        /**
+         * @private
+         * @param {?} services
+         * @return {?}
+         */
+        FindServiceComponent.prototype.addSelectedServicesToForm = /**
+         * @private
+         * @param {?} services
+         * @return {?}
+         */
+            function (services) {
+                var e_1, _a;
+                /** @type {?} */
+                var formArray = ( /** @type {?} */(this.form.get(this.field.name)));
+                try {
+                    for (var services_1 = __values(services), services_1_1 = services_1.next(); !services_1_1.done; services_1_1 = services_1.next()) {
+                        var service = services_1_1.value;
+                        formArray.push(new forms.FormControl(service));
+                    }
+                }
+                catch (e_1_1) {
+                    e_1 = { error: e_1_1 };
+                }
+                finally {
+                    try {
+                        if (services_1_1 && !services_1_1.done && (_a = services_1.return))
+                            _a.call(services_1);
+                    }
+                    finally {
+                        if (e_1)
+                            throw e_1.error;
+                    }
+                }
+            };
+        /**
+         * @private
+         * @return {?}
+         */
+        FindServiceComponent.prototype.SortAnOptions = /**
+         * @private
+         * @return {?}
+         */
+            function () {
+                return this.services.sort(( /**
+                 * @param {?} a
+                 * @param {?} b
+                 * @return {?}
+                 */function (a, b) {
+                    return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : (b.label.toLowerCase() > a.label.toLowerCase() ? -1 : 0);
+                }));
             };
         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=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</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\"></exui-search-service>\n        <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n           data-module=\"govuk-button\" *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=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\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\" [services]=\"services\"\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 class=\"hmcts-filter__tag\" (click)=\"removeService(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label }}\n      </a>\n    </li>\n  </ul>\n</div>",
                         styles: ["#add-service{background-color:#ddd}.search-service__input-container{display:flex}.search-service__input{flex:1 0 auto}"]
                     }] }
         ];
-        /** @nocollapse */
-        FindServiceComponent.ctorParameters = function () {
-            return [
-                { type: forms.FormBuilder }
-            ];
-        };
         FindServiceComponent.propDecorators = {
             field: [{ type: i0.Input }],
             fields: [{ type: i0.Input }],
@@ -5254,9 +5680,9 @@
             form: [{ type: i0.Input }],
             services: [{ type: i0.Input }],
             selectedServices: [{ type: i0.Input }],
-            disabled: [{ type: i0.Input }],
             enableAddServiceButton: [{ type: i0.Input }],
-            disableInputField: [{ type: i0.Input }]
+            disabled: [{ type: i0.Input }],
+            serviceFieldChanged: [{ type: i0.Output }]
         };
         return FindServiceComponent;
     }());
@@ -5507,42 +5933,35 @@
      */
     var SearchServiceComponent = /** @class */ (function () {
         function SearchServiceComponent() {
-            this.showAutocomplete = false;
-            this.minSearchCharacters = 3;
-            this.term = '';
+            this.services = [];
+            this.serviceChanged = new i0.EventEmitter();
         }
         /**
+         * @param {?} key
          * @return {?}
          */
-        SearchServiceComponent.prototype.onInput = /**
-         * @return {?}
-         */
-            function () {
-                // Todo
-            };
-        /**
-         * @return {?}
-         */
-        SearchServiceComponent.prototype.onSelectionChange = /**
+        SearchServiceComponent.prototype.onSelectionChanged = /**
+         * @param {?} key
          * @return {?}
          */
-            function () {
-                // Todo
+            function (key) {
+                /** @type {?} */
+                var selectedService = this.services.find(( /**
+                 * @param {?} s
+                 * @return {?}
+                 */function (s) { return s.key === key; }));
+                this.serviceChanged.emit(selectedService);
             };
         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)=\"onSelectionChange()\">\n      {{ service.name }}\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",
+                        template: "<div class=\"govuk-form-group\">\n  <select id=\"serviceSearch__select\" class=\"govuk-select\" name=\"serviceSearch__select\"\n    (change)=\"onSelectionChanged($event.target.value)\">\n    <option [value]=\"null\">All</option>\n    <option *ngFor=\"let service of services\" [value]=\"service.key\">\n      {{ service.label }}\n    </option>\n  </select>\n</div>",
                         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:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{width:calc(100% - 4px);display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
                     }] }
         ];
         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 }]
         };
         return SearchServiceComponent;
     }());
@@ -6905,6 +7324,33 @@
         return RemoveHostDirective;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/pipes/capitalize.pipe.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CapitalizePipe = /** @class */ (function () {
+        function CapitalizePipe() {
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        CapitalizePipe.prototype.transform = /**
+         * @param {?} value
+         * @return {?}
+         */
+            function (value) {
+                /** @type {?} */
+                var lowerCaseString = value.toLowerCase();
+                return lowerCaseString.charAt(0).toUpperCase() + lowerCaseString.slice(1);
+            };
+        CapitalizePipe.decorators = [
+            { type: i0.Pipe, args: [{ name: 'capitalize' },] }
+        ];
+        return CapitalizePipe;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/exui-common-lib.module.ts
@@ -6974,13 +7420,17 @@
         GovUkFileUploadComponent,
         RemoveHostDirective
     ];
+    /** @type {?} */
+    var pipes = [
+        CapitalizePipe
+    ];
     var ɵ0 = windowProvider;
     var ExuiCommonLibModule = /** @class */ (function () {
         function ExuiCommonLibModule() {
         }
         ExuiCommonLibModule.decorators = [
             { type: i0.NgModule, args: [{
-                        declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS),
+                        declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, pipes),
                         imports: [
                             i4.CommonModule,
                             forms.FormsModule,
@@ -6996,7 +7446,7 @@
                         ],
                         exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, [
                             ngxPagination.PaginatePipe
-                        ])
+                        ], pipes)
                     },] }
         ];
         return ExuiCommonLibModule;
@@ -8126,6 +8576,7 @@
     exports.ɵbv = HmctsPrimaryNavigationComponent;
     exports.ɵbu = HmctsSubNavigationComponent;
     exports.ɵcn = RemoveHostDirective;
+    exports.ɵco = CapitalizePipe;
     exports.ɵr = CaseSharingStateService;
     exports.ɵbg = CookieService;
     exports.ɵh = FeatureToggleService;