@hmcts/rpx-xui-common-lib 1.8.5-angular-upgrade-r3.5 → 1.8.5-angular-upgrade-r4

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

@@ -709,7 +709,7 @@
                     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)) {
                     if (this.isSameUser(id)) {
@@ -748,6 +748,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
@@ -773,7 +791,7 @@
          * @return {?}
          */
             function (setting) {
-                window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
+                sessionStorage.setItem(setting.id, JSON.stringify(setting));
             };
         /**
          * @private
@@ -850,7 +868,7 @@
             return values.length && values.filter(( /**
              * @param {?} value
              * @return {?}
-             */function (value) { return value; })).length >= min ? null : { minLength: true };
+             */function (value) { return value; })).length >= min ? null : { minlength: true };
         });
     }
     /**
@@ -900,6 +918,7 @@
             this.filterService = filterService;
             this.fb = fb;
             this.submitted = false;
+            this.previousSelectedNestedCheckbox = [];
         }
         Object.defineProperty(GenericFilterComponent.prototype, "config", {
             get: /**
@@ -954,10 +973,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;
@@ -978,6 +997,16 @@
                 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);
+                    this.initValuesFromCacheForSkillsByServices();
+                }
             };
         /**
          * @return {?}
@@ -1158,6 +1187,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);
@@ -1179,6 +1213,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
@@ -1224,6 +1261,32 @@
                     }
                 }
             };
+        /**
+         * @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 {?} values
+         * @param {?} field
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.updateTaskNameControls = /**
+         * @param {?} values
+         * @param {?} field
+         * @return {?}
+         */
+            function (values, field) {
+                this.form.get(field.name).patchValue(values);
+            };
         /**
          * @param {?} event
          * @param {?} form
@@ -1325,6 +1388,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 Number(option.key) === Number(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
@@ -1437,14 +1550,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 {
@@ -1452,6 +1565,12 @@
                         var validators = [];
                         if (field.minSelected && field.minSelected > 0) {
                             validators.push(forms.Validators.required);
+                            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;
@@ -1483,7 +1602,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);
@@ -1579,7 +1698,7 @@
          * @param {?} settings
          * @return {?}
          */
-        GenericFilterComponent.prototype.buildFindLocationFormArray = /**
+        GenericFilterComponent.prototype.buildFormArray = /**
          * @private
          * @param {?} field
          * @param {?} settings
@@ -1647,7 +1766,7 @@
                          * @param {?} f
                          * @return {?}
                          */function (f) { return f.name === name; }));
-                        if (field.type === 'find-location') {
+                        if (field.type === 'find-location' || field.type === 'find-service') {
                             return { value: values, name: name };
                         }
                         else {
@@ -1678,11 +1797,11 @@
                         var field = _c.value;
                         /** @type {?} */
                         var formGroup = form.get(field.name);
-                        if (formGroup && formGroup.errors && formGroup.errors.minLength) {
+                        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 });
                         }
                     }
                 }
@@ -1699,17 +1818,267 @@
                             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);
                 }
             };
+        /**
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.initValuesFromCacheForSkillsByServices = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                /** @type {?} */
+                var cachedValues = this.filteredSkillsByServicesCheckbox.map(( /**
+                 * @param {?} skill
+                 * @return {?}
+                 */function (skill) {
+                    /** @type {?} */
+                    var selected = false;
+                    if (_this.settings && _this.settings.fields) {
+                        /** @type {?} */
+                        var isSelectedUserSkill = void 0;
+                        /** @type {?} */
+                        var selectedUserSkills = _this.settings.fields.find(( /**
+                         * @param {?} setting
+                         * @return {?}
+                         */function (setting) { return setting.name === 'user-skills'; }));
+                        if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
+                            isSelectedUserSkill = selectedUserSkills.value.findIndex(( /**
+                             * @param {?} val
+                             * @return {?}
+                             */function (val) {
+                                return String(val) === String(skill.key);
+                            }));
+                            selected = isSelectedUserSkill !== -1;
+                        }
+                    }
+                    return selected;
+                }));
+                this.form.get('user-skills').setValue(cachedValues);
+            };
+        /**
+         * @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;
+                        this.form.setControl('user-skills', new forms.FormArray([]));
+                        this.filteredSkillsByServicesCheckbox.forEach(( /**
+                         * @return {?}
+                         */function () {
+                            (( /** @type {?} */(_this.form.get('user-skills')))).push(new forms.FormControl(false));
+                        }));
+                        /** @type {?} */
+                        var prevValues = this.filteredSkillsByServicesCheckbox.map(( /**
+                         * @param {?} skill
+                         * @return {?}
+                         */function (skill) {
+                            /** @type {?} */
+                            var selected = false;
+                            if (_this.settings && _this.settings.fields) {
+                                if (_this.previousSelectedNestedCheckbox.length > 0) {
+                                    selected = _this.previousSelectedNestedCheckbox.includes(skill.key);
+                                }
+                                /** @type {?} */
+                                var isSelectedUserSkill = void 0;
+                                /** @type {?} */
+                                var selectedUserSkills = _this.settings.fields.find(( /**
+                                 * @param {?} setting
+                                 * @return {?}
+                                 */function (setting) { return setting.name === 'user-skills'; }));
+                                if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
+                                    isSelectedUserSkill = selectedUserSkills.value.findIndex(( /**
+                                     * @param {?} val
+                                     * @return {?}
+                                     */function (val) { return Number(val) === Number(skill.key); }));
+                                    selected = isSelectedUserSkill !== -1;
+                                }
+                                if (_this.previousSelectedNestedCheckbox.length > 0) {
+                                    // Pick up from previous selected
+                                    selected = _this.previousSelectedNestedCheckbox.includes(String(skill.key));
+                                }
+                            }
+                            return selected;
+                        }));
+                        this.form.get('user-skills').setValue(prevValues);
+                        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?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (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          ></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.enableAddLocationButton\"\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      </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      <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          <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\"\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          <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          <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_' + 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                         (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                                  [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\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-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)=\"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  </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{position:relative;top:-10px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}"]
+                        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 */
@@ -3114,6 +3483,7 @@
             this.users = []; // users of this organisation the cases can be shared with
             // users of this organisation the cases can be shared with
             this.confirmLink = '';
+            this.showRemoveUsers = false;
             this.unselect = new i0.EventEmitter();
             this.synchronizeStore = new i0.EventEmitter();
         }
@@ -3276,8 +3646,8 @@
         ShareCaseComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-share-case',
-                        template: "<div id=\"add-user\">\n  <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">Enter email address</label>\n  <span id=\"add-user-hint\" class=\"govuk-hint\">\n    Search by name or email address. You can only add people from your organisation individually - but you can add as many as you like.\n  </span>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <xuilib-user-select\n        id=\"add-user-input\"\n        aria-describedby=\"add-user-hint\"\n        [users]=\"users\"\n        (selected)=\"onSelectedUser($event)\">\n      </xuilib-user-select>\n    </div>\n    <div class=\"govuk-grid-column-one-thirds\">\n      <button id=\"btn-add-user\" (click)=\"addUser()\" class=\"govuk-button\" [disabled]=\"isDisabledAdd()\" title=\"Add user to the case\">Add</button>\n    </div>\n  </div>\n  <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n    <summary class=\"govuk-details__summary\">\n    <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n      Can\u2019t find an email address?\n    </span>\n    </summary>\n    <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n      If you can\u2019t find your colleague\u2019s email address, they will need to complete their registration. Contact your\n      administrator for help.\n    </div>\n  </details>\n</div>\n\n<div id=\"cases\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n  <div *ngIf=\"shareCases && shareCases.length > 0\"  class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\">\n    No cases to display.\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\">\n  <button class=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n</div>\n",
-                        styles: [""]
+                        template: "<div id=\"add-user\">\n  <div class=\"govuk-form-group\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">{{addUserLabel}}</label>\n    <span id=\"add-user-hint\" class=\"govuk-hint\">\n      Search by name or email address. You can share access with as many people as you need.\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <xuilib-user-select\n          id=\"add-user-input\"\n          aria-describedby=\"add-user-hint\"\n          [users]=\"users\"\n          (selected)=\"onSelectedUser($event)\">\n        </xuilib-user-select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-add-user\" (click)=\"addUser()\" class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\" title=\"Add user to selected cases\">Add</button>\n      </div>\n    </div>\n    <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n      <summary class=\"govuk-details__summary\">\n      <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n        Can't find an email address?\n      </span>\n      </summary>\n      <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n        If you can't find your colleague's email address, they will need to complete their registration. Contact your\n        administrator for help.\n      </div>\n    </details>\n  </div>\n  <div class=\"govuk-form-group\" *ngIf=\"showRemoveUsers\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"remove-user-input\">Remove a person from all cases</label>\n    <span id=\"remove-user-hint\" class=\"govuk-hint\">\n      Select a person to remove them from all selected cases.\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <select class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option value=\"{{user}}\" *ngFor=\"let user of users\">{{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" class=\"govuk-button govuk-button--secondary\" title=\"Remove user from selected cases\">Remove</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"cases\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n  <div *ngIf=\"shareCases && shareCases.length > 0\"  class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\">\n    No cases to display.\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n  <button class=\"govuk-button\" data-module=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n  <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"Cancel\">Cancel</button>\n</div>\n",
+                        styles: ["select{width:100%}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3291,6 +3661,8 @@
             shareCases$: [{ type: i0.Input }],
             users: [{ type: i0.Input }],
             confirmLink: [{ type: i0.Input }],
+            addUserLabel: [{ type: i0.Input }],
+            showRemoveUsers: [{ type: i0.Input }],
             unselect: [{ type: i0.Output }],
             synchronizeStore: [{ type: i0.Output }],
             userSelect: [{ type: i0.ViewChild, args: [UserSelectComponent,] }]
@@ -3876,7 +4248,7 @@
         JUDICIAL: "Judicial",
         CASEWORKER: "Legal Ops",
         ADMIN: "Admin",
-        CTSC: "CTSC",
+        CTSC: "CTSC User",
         ALL: "All",
     };
     /** @enum {string} */
@@ -3977,7 +4349,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 () {
@@ -4285,7 +4657,7 @@
             { type: i0.Component, args: [{
                         selector: 'exui-search-location',
                         template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <mat-option *ngFor=\"let location of locations\"\n                (onSelectionChange)=\"onSelectionChange(location)\">\n      {{ location.site_name }}\n    </mat-option>\n    <mat-option *ngIf=\"!locations.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
-                        styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+                        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{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input{line-height:24px;font-size:19px}"]
                     }] }
         ];
         /** @nocollapse */
@@ -4542,8 +4914,8 @@
         FindLocationComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-find-location',
-                        template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [bookingCheck]=\"field.bookingCheckType\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
-                        styles: [""]
+                        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}"]
                     }] }
         ];
         FindLocationComponent.propDecorators = {
@@ -5257,78 +5629,482 @@
 
     /**
      * @fileoverview added by tsickle
-     * Generated from: lib/components/search-judicials/search-judicials.component.ts
+     * Generated from: lib/components/find-service/find-service.component.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var SearchJudicialsComponent = /** @class */ (function () {
-        function SearchJudicialsComponent(judicialService, fb) {
-            this.judicialService = judicialService;
-            this.disabled = null;
-            this.selectedJudicials = [];
-            this.submitted = true;
-            this.placeholderContent = '';
-            this.showAutocomplete = false;
-            this.judicialChanged = new i0.EventEmitter();
-            this.idValue = '';
-            this.errorMessage = 'You must select a name';
-            this.serviceId = '';
-            this.minSearchCharacters = 3;
-            this.keyUpSubject$ = new rxjs.Subject();
-            this.searchInProgress = false;
-            this.formGroup = fb.group({
-                formControl: [null],
-                selectedFormControl: [null]
-            });
+    var FindServiceComponent = /** @class */ (function () {
+        function FindServiceComponent() {
+            this.services = [];
+            this.selectedServices = [];
+            this.enableAddServiceButton = true;
+            this.disabled = false;
+            this.serviceFieldChanged = new i0.EventEmitter();
+            this.tempSelectedService = null;
         }
         /**
          * @return {?}
          */
-        SearchJudicialsComponent.prototype.ngOnInit = /**
+        FindServiceComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                this.selectedServices = this.selectedServices !== null ? this.selectedServices.filter(( /**
+                 * @param {?} service
+                 * @return {?}
+                 */function (service) { return service.key; })) : [];
+                this.SortAnOptions();
+            };
+        /**
+         * @return {?}
+         */
+        FindServiceComponent.prototype.addService = /**
          * @return {?}
          */
             function () {
                 var _this = this;
-                this.displayedJudicials = [];
-                if (this.control) {
-                    if (this.formGroup && this.formGroup.controls) {
-                        this.formGroup.controls.selectedFormControl = this.control;
-                        this.formGroup.controls.formControl.setValue(this.getControlValueDisplayText());
-                    }
+                if (this.tempSelectedService === null) {
+                    return;
                 }
-                this.keyUpSubject$.pipe(operators.debounceTime(500)).subscribe(( /**
-                 * @param {?} searchValue
+                this.selectedServices = __spread(this.selectedServices, [this.tempSelectedService]);
+                this.addSelectedServicesToForm([this.tempSelectedService]);
+                this.services = this.services.filter(( /**
+                 * @param {?} s
                  * @return {?}
-                 */function (searchValue) { return _this.search(( /** @type {?} */(searchValue))); }));
+                 */function (s) { return s.key !== _this.tempSelectedService.key; }));
+                this.tempSelectedService = null;
+                this.serviceFieldChanged.emit();
             };
         /**
+         * @param {?} service
          * @return {?}
          */
-        SearchJudicialsComponent.prototype.onKeyDown = /**
+        FindServiceComponent.prototype.removeService = /**
+         * @param {?} service
          * @return {?}
          */
-            function () {
-                this.judicialChanged.emit();
+            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 {?} event
+         * @param {?} service
          * @return {?}
          */
-        SearchJudicialsComponent.prototype.onKeyUp = /**
-         * @param {?} event
+        FindServiceComponent.prototype.onServiceSelected = /**
+         * @param {?} service
          * @return {?}
          */
-            function (event) {
-                this.showAutocomplete = false;
-                this.keyUpSubject$.next(event.target.value);
+            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 {?}
          */
-        SearchJudicialsComponent.prototype.onFocus = /**
+        FindServiceComponent.prototype.removeSelectedValues = /**
+         * @private
          * @return {?}
          */
             function () {
-                this.showAutocomplete = false;
+                /** @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=\"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}"]
+                    }] }
+        ];
+        FindServiceComponent.propDecorators = {
+            field: [{ type: i0.Input }],
+            fields: [{ type: i0.Input }],
+            serviceTitle: [{ type: i0.Input }],
+            form: [{ type: i0.Input }],
+            services: [{ type: i0.Input }],
+            selectedServices: [{ type: i0.Input }],
+            enableAddServiceButton: [{ type: i0.Input }],
+            disabled: [{ type: i0.Input }],
+            serviceFieldChanged: [{ type: i0.Output }]
+        };
+        return FindServiceComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/services/task-name/task-name.service.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var TaskNameService = /** @class */ (function () {
+        function TaskNameService(http, sessionStorageService) {
+            this.http = http;
+            this.sessionStorageService = sessionStorageService;
+        }
+        /**
+         * @return Observable<any[]>: Array of taskName in Observable
+         */
+        /**
+         * @return {?} Observable<any[]>: Array of taskName in Observable
+         */
+        TaskNameService.prototype.getTaskName = /**
+         * @return {?} Observable<any[]>: Array of taskName in Observable
+         */
+            function () {
+                var _this = this;
+                if (this.sessionStorageService.getItem(TaskNameService.taskNamesKey)) {
+                    /** @type {?} */
+                    var taskNames = JSON.parse(this.sessionStorageService.getItem(TaskNameService.taskNamesKey));
+                    return rxjs.of(( /** @type {?} */(taskNames)));
+                }
+                return this.http.get("/workallocation/taskNames").pipe(operators.tap(( /**
+                 * @param {?} taskNames
+                 * @return {?}
+                 */function (taskNames) { return _this.sessionStorageService.setItem(TaskNameService.taskNamesKey, JSON.stringify(taskNames)); })));
+            };
+        TaskNameService.taskNamesKey = 'taskNames';
+        TaskNameService.decorators = [
+            { type: i0.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        TaskNameService.ctorParameters = function () {
+            return [
+                { type: i1.HttpClient },
+                { type: SessionStorageService }
+            ];
+        };
+        /** @nocollapse */ TaskNameService.ngInjectableDef = i0.defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(i0.inject(i1.HttpClient), i0.inject(SessionStorageService)); }, token: TaskNameService, providedIn: "root" });
+        return TaskNameService;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/find-task-name/find-task-name.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var FindTaskNameComponent = /** @class */ (function () {
+        function FindTaskNameComponent(cd, taskService) {
+            this.cd = cd;
+            this.taskService = taskService;
+            this.taskNameSelected = new i0.EventEmitter();
+            this.taskNameFieldChanged = new i0.EventEmitter();
+            this.boldTitle = 'Find the task name';
+            this.subTitle = 'Type the name of the task name and select them.';
+            this.domain = PersonRole.ALL;
+            this.findTaskNameGroup = new forms.FormGroup({});
+            this.submitted = true;
+            this.userIncluded = false;
+            this.placeholderContent = '';
+            this.isNoResultsShown = true;
+            this.showUpdatedColor = false;
+            this.selectedTaskNames = [];
+            this.errorMessage = 'You must select a name';
+            this.idValue = '';
+            this.services = ['IA'];
+            this.disabled = null;
+            this.showAutocomplete = false;
+            this.filteredOptions = [];
+            this.minSearchCharacters = 1;
+            this.searchTerm = '';
+        }
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.ngOnDestroy = /**
+         * @return {?}
+         */
+            function () {
+                if (this.sub) {
+                    this.sub.unsubscribe();
+                }
+            };
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.ngOnChanges = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                this.findTaskNameControl = new forms.FormControl(this.selectedTaskName);
+                this.findTaskNameGroup.addControl('findTaskNameControl', this.findTaskNameControl);
+                this.sub = this.findTaskNameControl.valueChanges
+                    .pipe(operators.tap(( /**
+             * @return {?}
+             */function () { return _this.showAutocomplete = false; })), operators.tap(( /**
+                 * @return {?}
+                 */function () { return _this.filteredOptions = []; })), operators.tap(( /**
+                 * @param {?} term
+                 * @return {?}
+                 */function (term) { return _this.searchTerm = term; })), operators.debounceTime(300), operators.tap(( /**
+                 * @param {?} searchTerm
+                 * @return {?}
+                 */function (searchTerm) {
+                    if (!searchTerm) {
+                        _this.taskNameSelected.emit('');
+                    }
+                    return searchTerm;
+                })), 
+                // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit('null') : void 0),
+                operators.filter(( /**
+                 * @param {?} searchTerm
+                 * @return {?}
+                 */function (searchTerm) { return searchTerm && searchTerm.length >= _this.minSearchCharacters; })), operators.mergeMap(( /**
+                 * @return {?}
+                 */function () { return _this.getTaskName(); }))).subscribe(( /**
+                 * @param {?} taskNameModel
+                 * @return {?}
+                 */function (taskNameModel) {
+                    _this.filteredOptions = taskNameModel.map(( /**
+                     * @param {?} task
+                     * @return {?}
+                     */function (task) { return task.taskName; }));
+                    if (_this.searchTerm) {
+                        _this.filteredOptions = _this.filteredOptions.filter(( /**
+                         * @param {?} taskName
+                         * @return {?}
+                         */function (taskName) { return taskName.toLocaleLowerCase().includes(_this.searchTerm.toLocaleLowerCase()); })).map(( /**
+                         * @param {?} taskName
+                         * @return {?}
+                         */function (taskName) { return taskName; }));
+                    }
+                    _this.cd.detectChanges();
+                }));
+            };
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.getTaskName = /**
+         * @return {?}
+         */
+            function () {
+                return this.taskService.getTaskName();
+            };
+        /**
+         * @param {?} selectedTaskName
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.onSelectionChange = /**
+         * @param {?} selectedTaskName
+         * @return {?}
+         */
+            function (selectedTaskName) {
+                if (selectedTaskName) {
+                    this.taskNameSelected.emit(selectedTaskName);
+                    this.findTaskNameControl.setValue(selectedTaskName);
+                }
+            };
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.onInput = /**
+         * @return {?}
+         */
+            function () {
+                this.taskNameFieldChanged.emit();
+            };
+        FindTaskNameComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-find-task-name',
+                        template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findTaskNameGroup\"\n     [ngClass]=\"{'form-group-error': findTaskNameGroup.get('findTaskNameControl')?.invalid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findTaskNameGroup && findTaskNameGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findTaskNameGroup.errors.error ? findTaskNameGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectTaskName{{idValue}}\" type=\"text\" aria-label=\"select a task name\"\n           formControlName=\"findTaskNameControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           (input)=\"onInput()\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"onSelectionChange($event.option.value)\">\n      <mat-option *ngFor=\"let option of filteredOptions\"\n                  [value]=\"option\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n                  {{ option }}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && !filteredOptions.length && showAutocomplete\">No results found</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
+                        styles: [""]
+                    }] }
+        ];
+        /** @nocollapse */
+        FindTaskNameComponent.ctorParameters = function () {
+            return [
+                { type: i0.ChangeDetectorRef },
+                { type: TaskNameService }
+            ];
+        };
+        FindTaskNameComponent.propDecorators = {
+            taskNameSelected: [{ type: i0.Output }],
+            taskNameFieldChanged: [{ type: i0.Output }],
+            title: [{ type: i0.Input }],
+            boldTitle: [{ type: i0.Input }],
+            subTitle: [{ type: i0.Input }],
+            domain: [{ type: i0.Input }],
+            findTaskNameGroup: [{ type: i0.Input }],
+            selectedTaskName: [{ type: i0.Input }],
+            submitted: [{ type: i0.Input }],
+            userIncluded: [{ type: i0.Input }],
+            assignedUser: [{ type: i0.Input }],
+            placeholderContent: [{ type: i0.Input }],
+            isNoResultsShown: [{ type: i0.Input }],
+            showUpdatedColor: [{ type: i0.Input }],
+            selectedTaskNames: [{ type: i0.Input }],
+            errorMessage: [{ type: i0.Input }],
+            idValue: [{ type: i0.Input }],
+            services: [{ type: i0.Input }],
+            disabled: [{ type: i0.Input }]
+        };
+        return FindTaskNameComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/search-judicials/search-judicials.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var SearchJudicialsComponent = /** @class */ (function () {
+        function SearchJudicialsComponent(judicialService, fb) {
+            this.judicialService = judicialService;
+            this.disabled = null;
+            this.selectedJudicials = [];
+            this.submitted = true;
+            this.placeholderContent = '';
+            this.showAutocomplete = false;
+            this.judicialChanged = new i0.EventEmitter();
+            this.idValue = '';
+            this.errorMessage = 'You must select a name';
+            this.serviceId = '';
+            this.minSearchCharacters = 3;
+            this.keyUpSubject$ = new rxjs.Subject();
+            this.searchInProgress = false;
+            this.formGroup = fb.group({
+                formControl: [null],
+                selectedFormControl: [null]
+            });
+        }
+        /**
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                this.displayedJudicials = [];
+                if (this.control) {
+                    if (this.formGroup && this.formGroup.controls) {
+                        this.formGroup.controls.selectedFormControl = this.control;
+                        this.formGroup.controls.formControl.setValue(this.getControlValueDisplayText());
+                    }
+                }
+                this.keyUpSubject$.pipe(operators.debounceTime(500)).subscribe(( /**
+                 * @param {?} searchValue
+                 * @return {?}
+                 */function (searchValue) { return _this.search(( /** @type {?} */(searchValue))); }));
+            };
+        /**
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.onKeyDown = /**
+         * @return {?}
+         */
+            function () {
+                this.judicialChanged.emit();
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.onKeyUp = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                this.showAutocomplete = false;
+                this.keyUpSubject$.next(event.target.value);
+            };
+        /**
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.onFocus = /**
+         * @return {?}
+         */
+            function () {
+                this.showAutocomplete = false;
             };
         Object.defineProperty(SearchJudicialsComponent.prototype, "displayedJudicialsDuplicationFiltered", {
             get: /**
@@ -5494,6 +6270,46 @@
         return SearchJudicialsComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/search-service/search-service.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var SearchServiceComponent = /** @class */ (function () {
+        function SearchServiceComponent() {
+            this.services = [];
+            this.serviceChanged = new i0.EventEmitter();
+        }
+        /**
+         * @param {?} key
+         * @return {?}
+         */
+        SearchServiceComponent.prototype.onSelectionChanged = /**
+         * @param {?} key
+         * @return {?}
+         */
+            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=\"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 }],
+            serviceChanged: [{ type: i0.Output }]
+        };
+        return SearchServiceComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/search-venue/search-venue.component.ts
@@ -5777,6 +6593,57 @@
         return GovUkCheckboxComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/gov-ui/util/helpers/html-templates.helper.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /*
+     * Helper Class
+     * Used for dynamic templates manipulation
+     * */
+    var /*
+     * Helper Class
+     * Used for dynamic templates manipulation
+     * */ HtmlTemplatesHelper = /** @class */ (function () {
+        function HtmlTemplatesHelper() {
+        }
+        /*
+        * Sets described by string depending if
+        * there is an error, error and hit or nothing
+        * */
+        /*
+          * Sets described by string depending if
+          * there is an error, error and hit or nothing
+          * */
+        /**
+         * @param {?} errorMessage
+         * @param {?} config
+         * @return {?}
+         */
+        HtmlTemplatesHelper.setDescribedBy = /*
+          * Sets described by string depending if
+          * there is an error, error and hit or nothing
+          * */
+            /**
+             * @param {?} errorMessage
+             * @param {?} config
+             * @return {?}
+             */
+            function (errorMessage, config) {
+                if (!errorMessage) {
+                    return config.hint ? config.id + "-hint" : null;
+                }
+                else if (errorMessage && errorMessage.isInvalid) {
+                    return config.hint ? config.id + "-hint " + config.id + "-error" : config.id + "-error";
+                }
+                else {
+                    return config.hint ? config.id + "-hint" : null;
+                }
+            };
+        return HtmlTemplatesHelper;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/gov-ui/components/gov-uk-checkboxes/gov-uk-checkboxes.component.ts
@@ -5792,15 +6659,99 @@
     var GovUkCheckboxesComponent = /** @class */ (function () {
         function GovUkCheckboxesComponent() {
         }
+        /**
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                this.columns = this.setColumns();
+            };
+        /**
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.setDescribedBy = /**
+         * @return {?}
+         */
+            function () {
+                return HtmlTemplatesHelper.setDescribedBy(this.errorMessage, this.config);
+            };
+        /**
+         * @param {?} checked
+         * @param {?} value
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.onChecked = /**
+         * @param {?} checked
+         * @param {?} value
+         * @return {?}
+         */
+            function (checked, value) {
+                /** @type {?} */
+                var formControl = this.group.get(this.config.name);
+                /** @type {?} */
+                var array = formControl.value ? formControl.value : [];
+                if (!checked) {
+                    /** @type {?} */
+                    var modifiedArray = array.filter(( /**
+                     * @param {?} item
+                     * @return {?}
+                     */function (item) { return item !== value; }));
+                    formControl.setValue(modifiedArray);
+                }
+                else {
+                    formControl.setValue(__spread(array, [value]));
+                }
+            };
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.isChecked = /**
+         * @param {?} value
+         * @return {?}
+         */
+            function (value) {
+                /** @type {?} */
+                var formControl = this.group.get(this.config.name);
+                return formControl.value && formControl.value.includes(value);
+            };
+        /**
+         * @private
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.setColumns = /**
+         * @private
+         * @return {?}
+         */
+            function () {
+                if (this.config.rows && this.config.rows > 1) {
+                    /** @type {?} */
+                    var array = [];
+                    for (var i = 0; i < this.items.length; i += this.config.rows) {
+                        /** @type {?} */
+                        var arrayChunk = this.items.slice(i, i + this.config.rows);
+                        array.push(arrayChunk);
+                    }
+                    return array;
+                }
+                else {
+                    return [this.items];
+                }
+            };
         GovUkCheckboxesComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-uk-checkboxes',
-                        template: "<xuilib-gov-uk-form-group-wrapper\n[error]=\"errors\"\n[config]=\"options.config\"\n[group]=\"options.key\">\n<div class=\"govuk-checkboxes\">\n  <xuilib-gov-checkbox *ngFor=\"let item of options.items\"\n    [group]=\"item.group\"\n    [config]=\"item.config\">\n  </xuilib-gov-checkbox>\n</div>\n</xuilib-gov-uk-form-group-wrapper>"
+                        template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n     [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n  <xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n  <span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n    {{config.hint}}\n  </span>\n\n  <xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n  <div class=\"govuk-checkboxes govuk-checkboxes--small govuk-checkboxes-multi-column\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes-multi-column__single\" *ngFor=\"let columnItems of columns\">\n      <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of columnItems\">\n        <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n               [id]=\"item.id\" [name]=\"item.id\" [checked]=\"isChecked(item.value)\" [value]=\"item.value\"\n               [attr.aria-describedby]=\"setDescribedBy()\"\n               (change)=\"onChecked($event.target.checked, item.value)\"\n        >\n        <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.id\">\n          {{ item.label }}\n        </label>\n        <div *ngIf=\"item.hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n          {{ item.hint }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                        styles: [".govuk-checkboxes-multi-column{display:flex;flex-wrap:wrap;margin-left:-20px;margin-right:-20px}.govuk-checkboxes-multi-column__single{padding-left:20px;padding-right:20px}"]
                     }] }
         ];
         GovUkCheckboxesComponent.propDecorators = {
-            options: [{ type: i0.Input }],
-            errors: [{ type: i0.Input }]
+            group: [{ type: i0.Input }],
+            config: [{ type: i0.Input }],
+            items: [{ type: i0.Input }],
+            errorMessage: [{ type: i0.Input }]
         };
         return GovUkCheckboxesComponent;
     }());
@@ -5950,57 +6901,6 @@
         return GovUkErrorMessageComponent;
     }());
 
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/gov-ui/util/helpers/html-templates.helper.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /*
-     * Helper Class
-     * Used for dynamic templates manipulation
-     * */
-    var /*
-     * Helper Class
-     * Used for dynamic templates manipulation
-     * */ HtmlTemplatesHelper = /** @class */ (function () {
-        function HtmlTemplatesHelper() {
-        }
-        /*
-        * Sets described by string depending if
-        * there is an error, error and hit or nothing
-        * */
-        /*
-          * Sets described by string depending if
-          * there is an error, error and hit or nothing
-          * */
-        /**
-         * @param {?} errorMessage
-         * @param {?} config
-         * @return {?}
-         */
-        HtmlTemplatesHelper.setDescribedBy = /*
-          * Sets described by string depending if
-          * there is an error, error and hit or nothing
-          * */
-            /**
-             * @param {?} errorMessage
-             * @param {?} config
-             * @return {?}
-             */
-            function (errorMessage, config) {
-                if (!errorMessage) {
-                    return config.hint ? config.id + "-hint" : null;
-                }
-                else if (errorMessage && errorMessage.isInvalid) {
-                    return config.hint ? config.id + "-hint " + config.id + "-error" : config.id + "-error";
-                }
-                else {
-                    return config.hint ? config.id + "-hint" : null;
-                }
-            };
-        return HtmlTemplatesHelper;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/gov-ui/components/gov-uk-fieldset/gov-uk-fieldset.component.ts
@@ -6148,7 +7048,7 @@
              * @return {?}
              */
             function () {
-                this.config.classes = 'govuk-label--m';
+                this.config.classes = typeof (this.config.classes) === 'string' ? this.config.classes : 'govuk-label govuk-label--m';
             };
         /**
          * @return {?}
@@ -6162,7 +7062,7 @@
         GovUkInputComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-uk-input',
-                        template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n  {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n       [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n       [id]=\"config.id\"\n       [name]=\"config.name\"\n       [type]=\"config.type\"\n       [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n       [formControlName]=\"config.name\"\n       [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
+                        template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n  {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n       [class.govuk-!-width-full]=\"config.fullWidth\"\n       [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n       [id]=\"config.id\"\n       [name]=\"config.name\"\n       [type]=\"config.type\"\n       [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n       [formControlName]=\"config.name\"\n       [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
                         styles: [".gov-uk-input input:disabled{background:#b1b4b6}"]
                     }] }
         ];
@@ -6193,7 +7093,8 @@
         GovUkLabelComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-label',
-                        template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n  <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n         [for]=\"config.id\" [innerHTML]=\"config.label\">\n  </label>\n</h1>\n<ng-template #noHeading>\n  <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n         [for]=\"config.id\" [innerHTML]=\"config.label\">\n  </label>\n</ng-template>"
+                        template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n  <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n    <span>{{ config.label }}</span>\n    <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n  </label>\n</h1>\n<ng-template #noHeading>\n  <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n    <span>{{ config.label }}</span>\n    <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n  </label>\n</ng-template>\n",
+                        styles: [".govuk-label{display:flex;align-items:center;flex-wrap:wrap}.govuk-label__optional{font-weight:400;font-size:16px;display:inline-block;margin-left:.75rem}"]
                     }] }
         ];
         /** @nocollapse */
@@ -6312,7 +7213,7 @@
         GovUkSelectComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-select',
-                        template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\" [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n<option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>"
+                        template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\"\n        [class.govuk-!-width-full]=\"config.fullWidth\"\n        [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n  <option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -6414,27 +7315,25 @@
      * Generated from: lib/gov-ui/components/hmcts-banner/hmcts-banner.component.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /*
-    * Hmcts Banner
-    * Responsible for displaying prominent message and related actions
-    * @prop message to display
-    * @prop type
-    * */
     var HmctsBannerComponent = /** @class */ (function () {
         function HmctsBannerComponent() {
+            this.title = '';
+            this.showMessageIcon = false;
+            this.messageBoldText = false;
         }
         HmctsBannerComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-hmcts-banner',
-                        template: "<div class=\"hmcts-banner hmcts-banner--{{type}}\">\n  <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n      <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" /></svg>\n  <div class=\"hmcts-banner__message\">\n      <span class=\"hmcts-banner__assistive\">{{type}}</span>\n      {{message}}\n  </div>\n</div>",
-                        styles: [":host{display:block;width:100%}"]
+                        template: "<ng-container *ngIf=\"message && type\">\n  <div *ngIf=\"title\"\n    class=\"hmcts-banner-title hmcts-banner-title--{{ type }}\">\n    {{ title }}\n  </div>\n  <div class=\"hmcts-banner hmcts-banner--{{ type }}\">\n    <ng-container *ngIf=\"showMessageIcon\">\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'warning'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--warning\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"></path>\n          </svg>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'success'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--success\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z\"></path>\n          </svg>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'information'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--information\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n  C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n          </svg>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"hmcts-banner__message\" [class.hmcts-banner__message--bold]=\"messageBoldText\">\n      <span class=\"hmcts-banner__assistive\">{{ type }}</span>\n      <span class=\"hmcts-banner__message-text govuk-!-font-weight-bold\">{{ message }}</span>\n    </div>\n  </div>\n</ng-container>\n",
+                        styles: [".hmcts-banner-title{color:#fff;background-color:#1d70b8;font-weight:700;padding:10px 15px 5px}.hmcts-banner-title--success{background-color:#00703c}.hmcts-banner-title--warning{background-color:#d4351c}.hmcts-banner__message--bold{font-weight:700}"]
                     }] }
         ];
-        /** @nocollapse */
-        HmctsBannerComponent.ctorParameters = function () { return []; };
         HmctsBannerComponent.propDecorators = {
+            message: [{ type: i0.Input }],
             type: [{ type: i0.Input }],
-            message: [{ type: i0.Input }]
+            title: [{ type: i0.Input }],
+            showMessageIcon: [{ type: i0.Input }],
+            messageBoldText: [{ type: i0.Input }]
         };
         return HmctsBannerComponent;
     }());
@@ -6614,7 +7513,7 @@
         HmctsMainWrapperComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-hmcts-main-wrapper',
-                        template: "<a *ngIf=\"hasBackLink\" [routerLink]=\"backLink\" (click)=\"onGoBack()\" class=\"govuk-back-link\">Back</a>\n<main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <xuilib-hmcts-error-summary\n        *ngIf=\"summaryErrors && !summaryErrors.isFromValid\"\n        [errorMessages]=\"summaryErrors.items\"\n        [header]=\"summaryErrors.header\"\n        [showWarningMessage]=\"showWarningMessage\">\n      </xuilib-hmcts-error-summary>\n      <xuilib-hmcts-banner *ngIf=\"bannerData\" [message]=\"bannerData.message\" [type]=\"bannerData.type\"></xuilib-hmcts-banner>\n      <h1 *ngIf=\"title\" class=\"govuk-heading-xl\">{{title}}</h1>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"govuk-grid-column-one-third\" *ngIf=\"actionButtons?.length > 0\">\n      <div class=\"hmcts-page-heading__actions-wrapper\">\n        <a\n          *ngFor=\"let actionButton of actionButtons\"\n          (click)=\"actionButton.action()\"\n          role=\"button\"\n          draggable=\"false\"\n          class=\"govuk-button {{ actionButton.class }}\"\n        >{{ actionButton.name }}</a>\n      </div>\n    </div>\n  </div>\n</main>\n"
+                        template: "<a *ngIf=\"hasBackLink\" [routerLink]=\"backLink\" (click)=\"onGoBack()\" class=\"govuk-back-link\">Back</a>\n<main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <xuilib-hmcts-error-summary\n        *ngIf=\"summaryErrors && !summaryErrors.isFromValid\"\n        [errorMessages]=\"summaryErrors.items\"\n        [header]=\"summaryErrors.header\"\n        [showWarningMessage]=\"showWarningMessage\">\n      </xuilib-hmcts-error-summary>\n      <xuilib-hmcts-banner *ngIf=\"bannerData\"\n                           [type]=\"bannerData.type\"\n                           [message]=\"bannerData.message\"\n      ></xuilib-hmcts-banner>\n      <h1 *ngIf=\"title\" class=\"govuk-heading-xl\">{{title}}</h1>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"govuk-grid-column-one-third\" *ngIf=\"actionButtons?.length > 0\">\n      <div class=\"hmcts-page-heading__actions-wrapper\">\n        <a\n          *ngFor=\"let actionButton of actionButtons\"\n          (click)=\"actionButton.action()\"\n          role=\"button\"\n          draggable=\"false\"\n          class=\"govuk-button {{ actionButton.class }}\"\n        >{{ actionButton.name }}</a>\n      </div>\n    </div>\n  </div>\n</main>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -6767,6 +7666,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
@@ -6805,7 +7731,10 @@
         FindPersonComponent,
         SearchJudicialsComponent,
         FindLocationComponent,
+        FindTaskNameComponent,
         SearchLocationComponent,
+        FindServiceComponent,
+        SearchServiceComponent,
         SearchVenueComponent,
         PaginationComponent
     ];
@@ -6834,13 +7763,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,
@@ -6856,7 +7789,7 @@
                         ],
                         exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, [
                             ngxPagination.PaginatePipe
-                        ])
+                        ], pipes)
                     },] }
         ];
         return ExuiCommonLibModule;
@@ -7664,19 +8597,18 @@
      */
     var RoleService = /** @class */ (function () {
         function RoleService() {
-            this.pRoles = [];
+            this.pRoles = new rxjs.BehaviorSubject(null);
+            this.roles$ = this.pRoles.asObservable().pipe(operators.skipWhile(( /**
+             * @param {?} item
+             * @return {?}
+             */function (item) { return item === null; })));
         }
         Object.defineProperty(RoleService.prototype, "roles", {
-            get: /**
-             * @return {?}
-             */ function () {
-                return this.pRoles;
-            },
             set: /**
              * @param {?} roles
              * @return {?}
              */ function (roles) {
-                this.pRoles = roles;
+                this.pRoles.next(roles);
             },
             enumerable: true,
             configurable: true
@@ -7717,23 +8649,28 @@
          */
             function (route) {
                 var _this = this;
-                /** @type {?} */
-                var roles = (( /** @type {?} */(route.data.needsRole)));
-                /** @type {?} */
-                var check = ( /**
-                 * @param {?} roleRegEx
+                return this.roleService.roles$.pipe(operators.map(( /**
+                 * @param {?} roles
                  * @return {?}
-                 */function (roleRegEx) {
+                 */function (roles) {
+                    /** @type {?} */
+                    var canActivateRoles = (( /** @type {?} */(route.data.needsRole)));
                     /** @type {?} */
-                    var regex = new RegExp(roleRegEx);
-                    return _this.roleService.roles.some(( /**
-                     * @param {?} role
+                    var check = ( /**
+                     * @param {?} roleRegEx
                      * @return {?}
-                     */function (role) { return regex.test(role); }));
-                });
-                /** @type {?} */
-                var match = route.data.roleMatching === RoleMatching.ALL ? roles.every(check) : roles.some(check);
-                return match || this.router.parseUrl(( /** @type {?} */(route.data.noRoleMatchRedirect)));
+                     */function (roleRegEx) {
+                        /** @type {?} */
+                        var regex = new RegExp(roleRegEx);
+                        return roles.some(( /**
+                         * @param {?} role
+                         * @return {?}
+                         */function (role) { return regex.test(role); }));
+                    });
+                    /** @type {?} */
+                    var match = route.data.roleMatching === RoleMatching.ALL ? canActivateRoles.every(check) : canActivateRoles.some(check);
+                    return match || _this.router.parseUrl(( /** @type {?} */(route.data.noRoleMatchRedirect)));
+                })));
             };
         RoleGuard.decorators = [
             { type: i0.Injectable, args: [{
@@ -7898,6 +8835,7 @@
     exports.dateValidator = dateValidator;
     exports.radioGroupValidator = radioGroupValidator;
     exports.HmctsSubNavigationComponent = HmctsSubNavigationComponent;
+    exports.HmctsBannerComponent = HmctsBannerComponent;
     exports.BadgeColour = BadgeColour;
     exports.DateBadgeColour = DateBadgeColour;
     exports.SECONDS_IN_A_DAY = SECONDS_IN_A_DAY;
@@ -7931,15 +8869,18 @@
     exports.ɵa = ExuiPageWrapperComponent;
     exports.ɵbl = FindLocationComponent;
     exports.ɵbh = FindPersonComponent;
+    exports.ɵbq = FindServiceComponent;
+    exports.ɵbo = FindTaskNameComponent;
     exports.ɵbd = GenericFilterComponent;
     exports.ɵk = HmctsSessionDialogComponent;
     exports.ɵo = InviteUserFormComponent;
     exports.ɵn = InviteUserPermissionComponent;
     exports.ɵbc = LoadingSpinnerComponent;
-    exports.ɵbp = PaginationComponent;
+    exports.ɵbt = PaginationComponent;
     exports.ɵbk = SearchJudicialsComponent;
     exports.ɵbm = SearchLocationComponent;
-    exports.ɵbo = SearchVenueComponent;
+    exports.ɵbr = SearchServiceComponent;
+    exports.ɵbs = SearchVenueComponent;
     exports.ɵv = SelectedCaseConfirmComponent;
     exports.ɵt = SelectedCaseListComponent;
     exports.ɵu = SelectedCaseComponent;
@@ -7958,28 +8899,29 @@
     exports.ɵg = FeatureToggleDirective;
     exports.ɵi = LetContext;
     exports.ɵj = LetDirective;
-    exports.ɵbz = GovUkCheckboxComponent;
-    exports.ɵcf = GovUkCheckboxesComponent;
-    exports.ɵce = GovUkDateComponent;
-    exports.ɵcc = GovUkErrorMessageComponent;
-    exports.ɵcd = GovUkFieldsetComponent;
-    exports.ɵck = GovUkFileUploadComponent;
-    exports.ɵca = GovUkFormGroupWrapperComponent;
-    exports.ɵby = GovUkInputComponent;
-    exports.ɵcb = GovUkLabelComponent;
-    exports.ɵcg = GovUkRadioComponent;
-    exports.ɵch = GovUkRadiosComponent;
-    exports.ɵci = GovUkSelectComponent;
-    exports.ɵbx = GovukTableComponent;
-    exports.ɵcj = GovUkTextareaComponent;
-    exports.ɵbw = HmctsBannerComponent;
-    exports.ɵbu = HmctsErrorSummaryComponent;
-    exports.ɵbq = HmctsIdentityBarComponent;
-    exports.ɵbv = HmctsMainWrapperComponent;
-    exports.ɵbr = HmctsPaginationComponent;
-    exports.ɵbt = HmctsPrimaryNavigationComponent;
-    exports.ɵbs = HmctsSubNavigationComponent;
-    exports.ɵcl = RemoveHostDirective;
+    exports.ɵcd = GovUkCheckboxComponent;
+    exports.ɵcj = GovUkCheckboxesComponent;
+    exports.ɵci = GovUkDateComponent;
+    exports.ɵcg = GovUkErrorMessageComponent;
+    exports.ɵch = GovUkFieldsetComponent;
+    exports.ɵco = GovUkFileUploadComponent;
+    exports.ɵce = GovUkFormGroupWrapperComponent;
+    exports.ɵcc = GovUkInputComponent;
+    exports.ɵcf = GovUkLabelComponent;
+    exports.ɵck = GovUkRadioComponent;
+    exports.ɵcl = GovUkRadiosComponent;
+    exports.ɵcm = GovUkSelectComponent;
+    exports.ɵcb = GovukTableComponent;
+    exports.ɵcn = GovUkTextareaComponent;
+    exports.ɵca = HmctsBannerComponent;
+    exports.ɵby = HmctsErrorSummaryComponent;
+    exports.ɵbu = HmctsIdentityBarComponent;
+    exports.ɵbz = HmctsMainWrapperComponent;
+    exports.ɵbv = HmctsPaginationComponent;
+    exports.ɵbx = HmctsPrimaryNavigationComponent;
+    exports.ɵbw = HmctsSubNavigationComponent;
+    exports.ɵcp = RemoveHostDirective;
+    exports.ɵcq = CapitalizePipe;
     exports.ɵr = CaseSharingStateService;
     exports.ɵbg = CookieService;
     exports.ɵh = FeatureToggleService;
@@ -7987,6 +8929,7 @@
     exports.ɵbi = FindAPersonService;
     exports.ɵbn = LocationService;
     exports.ɵbj = SessionStorageService;
+    exports.ɵbp = TaskNameService;
 
     Object.defineProperty(exports, '__esModule', { value: true });