@hmcts/rpx-xui-common-lib 1.8.7-fix-supported-services → 1.8.8-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                              [services]=\"field.services\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"                                \n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [field]=\"field\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [field]=\"field\"\n                                [selectedServices]=\"form.get(field.name)?.value\"                                \n          ></xuilib-find-service>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
+                        template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <ng-container [ngSwitch]=\"field.type\">\n      <ng-container *ngSwitchCase=\"'group-title'\">\n        <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n          {{ field.name | capitalize }}\n        </div>\n    </ng-container>\n      <ng-container *ngSwitchDefault>\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n         <div *ngIf=\"field.title\" class=\"xui-generic-filter__field-title\">\n          <h3 [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n            {{field.title | capitalize}}\n          </h3>\n          <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n            {{ field.titleHint }}\n          </div>\n        </div>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n        *ngIf=\"field.emailError && submitted && form.get(field.name).errors?.email\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.emailError}}\n      </span>\n        <div class=\"govuk-body\"  [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option *ngIf=\"field.defaultOption\" [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'group-select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option *ngIf=\"field.defaultOption\" selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <optgroup *ngFor = 'let grp of filteredSkillsByServices' label=\"{{grp.group | titlecase}}\">\n              <option *ngFor = 'let item of grp.options' [value]=\"item.key\">{{item.label}}</option>\n            </optgroup>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + 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                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedServices]=\"form.get(field.name)?.value\"\n                                [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 govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
-                        styles: [".contain-classes .elevated-break{position:relative;top:-10px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}"]
+                        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 */
@@ -4053,6 +4422,17 @@
         return LoggedInFeatureUser;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/models/filter.model.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var RadioFilterFieldConfig = /** @class */ (function () {
+        function RadioFilterFieldConfig() {
+        }
+        return RadioFilterFieldConfig;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/models/location.model.ts
@@ -4075,7 +4455,7 @@
         JUDICIAL: "Judicial",
         CASEWORKER: "Legal Ops",
         ADMIN: "Admin",
-        CTSC: "CTSC",
+        CTSC: "CTSC User",
         ALL: "All",
     };
     /** @enum {string} */
@@ -4087,17 +4467,6 @@
         ALL: "ALL",
     };
 
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/models/filter.model.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var RadioFilterFieldConfig = /** @class */ (function () {
-        function RadioFilterFieldConfig() {
-        }
-        return RadioFilterFieldConfig;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/models/index.ts
@@ -4182,7 +4551,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 () {
@@ -4490,7 +4859,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 */
@@ -4577,7 +4946,11 @@
                 var field = this.fields.find(( /**
                  * @param {?} f
                  * @return {?}
-                 */function (f) { return f.name === _this.field.findLocationField; }));
+                 */function (f) {
+                    if (_this.field) {
+                        return f.name === _this.field.findLocationField;
+                    }
+                }));
                 if (field) {
                     if (typeof value === 'string') {
                         this.serviceIds = value;
@@ -4747,8 +5120,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 = {
@@ -5483,7 +5856,7 @@
         FindServiceComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-find-service',
-                        template: "<div class=\"service-picker-custom\">\n    <div class=\"search-service\">\n      <div>\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <exui-search-service class=\"search-service\"\n                            [services]=\"services\"\n                            [selectedServices]=\"selectedServices\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"></exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" \n        data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n    <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n      <li class=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\n        </a>\n      </li>\n    </ul>\n  </div>",
+                        template: "<div class=\"service-picker-custom\">\n    <div class=\"search-service\">\n      <div>\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <exui-search-service class=\"search-service\"\n                            [services]=\"services\"\n                            [selectedServices]=\"selectedServices\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"></exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n    <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n      <li class=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\n        </a>\n      </li>\n    </ul>\n  </div>\n",
                         styles: ["#add-service{background-color:#ddd}"]
                     }] }
         ];
@@ -5503,59 +5876,271 @@
 
     /**
      * @fileoverview added by tsickle
-     * Generated from: lib/components/search-judicials/search-judicials.component.ts
+     * Generated from: lib/services/task-name/task-name.service.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 TaskNameService = /** @class */ (function () {
+        function TaskNameService(http, sessionStorageService) {
+            this.http = http;
+            this.sessionStorageService = sessionStorageService;
         }
         /**
-         * @return {?}
+         * @return Observable<any[]>: Array of taskName in Observable
          */
-        SearchJudicialsComponent.prototype.ngOnInit = /**
-         * @return {?}
+        /**
+         * @return {?} Observable<any[]>: Array of taskName in Observable
+         */
+        TaskNameService.prototype.getTaskName = /**
+         * @return {?} Observable<any[]>: Array of taskName in Observable
          */
             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.sessionStorageService.getItem(TaskNameService.taskNamesKey)) {
+                    /** @type {?} */
+                    var taskNames = JSON.parse(this.sessionStorageService.getItem(TaskNameService.taskNamesKey));
+                    return rxjs.of(( /** @type {?} */(taskNames)));
                 }
-                this.keyUpSubject$.pipe(operators.debounceTime(500)).subscribe(( /**
-                 * @param {?} searchValue
+                return this.http.get("/workallocation/taskNames").pipe(operators.tap(( /**
+                 * @param {?} taskNames
                  * @return {?}
-                 */function (searchValue) { return _this.search(( /** @type {?} */(searchValue))); }));
-            };
-        /**
-         * @return {?}
-         */
-        SearchJudicialsComponent.prototype.onKeyDown = /**
-         * @return {?}
-         */
-            function () {
-                this.judicialChanged.emit();
+                 */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 {?}
          */
@@ -5747,7 +6332,9 @@
      */
     var SearchServiceComponent = /** @class */ (function () {
         function SearchServiceComponent() {
+            this.services = [];
             this.showAutocomplete = false;
+            this.serviceChanged = new i0.EventEmitter();
             this.minSearchCharacters = 3;
             this.term = '';
         }
@@ -5761,18 +6348,25 @@
                 // Todo
             };
         /**
+         * @param {?} key
          * @return {?}
          */
-        SearchServiceComponent.prototype.onSelectionChange = /**
+        SearchServiceComponent.prototype.onSelectionChanged = /**
+         * @param {?} key
          * @return {?}
          */
-            function () {
-                // Todo
+            function (key) {
+                /** @type {?} */
+                var selectedService = this.services.find(( /**
+                 * @param {?} s
+                 * @return {?}
+                 */function (s) { return s.key === key; }));
+                this.serviceChanged.emit(selectedService);
             };
         SearchServiceComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'exui-search-service',
-                        template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChange()\">\n      {{ service.name }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
+                        template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\"\n    (change)=\"onSelectionChanged($event.target.value)\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChanged($event.target.value)\">\n      {{ service.name }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
                         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:250px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
                     }] }
         ];
@@ -5782,7 +6376,8 @@
             disabled: [{ type: i0.Input }],
             delay: [{ type: i0.Input }],
             form: [{ type: i0.Input }],
-            showAutocomplete: [{ type: i0.Input }]
+            showAutocomplete: [{ type: i0.Input }],
+            serviceChanged: [{ type: i0.Output }]
         };
         return SearchServiceComponent;
     }());
@@ -6070,6 +6665,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
@@ -6085,15 +6731,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;
     }());
@@ -6243,57 +6973,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
@@ -6441,7 +7120,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 {?}
@@ -6455,7 +7134,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}"]
                     }] }
         ];
@@ -6486,7 +7165,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 */
@@ -6605,7 +7285,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 */
@@ -6707,27 +7387,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;
     }());
@@ -6907,7 +7585,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 */
@@ -7060,6 +7738,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
@@ -7098,6 +7803,7 @@
         FindPersonComponent,
         SearchJudicialsComponent,
         FindLocationComponent,
+        FindTaskNameComponent,
         SearchLocationComponent,
         FindServiceComponent,
         SearchServiceComponent,
@@ -7129,13 +7835,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,
@@ -7151,7 +7861,7 @@
                         ],
                         exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, [
                             ngxPagination.PaginatePipe
-                        ])
+                        ], pipes)
                     },] }
         ];
         return ExuiCommonLibModule;
@@ -7959,19 +8669,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
@@ -8012,23 +8721,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: [{
@@ -8193,16 +8907,17 @@
     exports.dateValidator = dateValidator;
     exports.radioGroupValidator = radioGroupValidator;
     exports.HmctsSubNavigationComponent = HmctsSubNavigationComponent;
+    exports.HmctsBannerComponent = HmctsBannerComponent;
     exports.SharedCaseErrorMessages = SharedCaseErrorMessages;
     exports.BadgeColour = BadgeColour;
     exports.DateBadgeColour = DateBadgeColour;
     exports.SECONDS_IN_A_DAY = SECONDS_IN_A_DAY;
     exports.AnonymousFeatureUser = AnonymousFeatureUser;
     exports.LoggedInFeatureUser = LoggedInFeatureUser;
+    exports.RadioFilterFieldConfig = RadioFilterFieldConfig;
     exports.BookingCheckType = BookingCheckType;
     exports.PersonRole = PersonRole;
     exports.RoleCategory = RoleCategory;
-    exports.RadioFilterFieldConfig = RadioFilterFieldConfig;
     exports.FeatureToggleGuard = FeatureToggleGuard;
     exports.FeatureToggleService = FeatureToggleService;
     exports.LaunchDarklyService = LaunchDarklyService;
@@ -8227,17 +8942,18 @@
     exports.ɵa = ExuiPageWrapperComponent;
     exports.ɵbl = FindLocationComponent;
     exports.ɵbh = FindPersonComponent;
-    exports.ɵbo = FindServiceComponent;
+    exports.ɵbq = FindServiceComponent;
+    exports.ɵbo = FindTaskNameComponent;
     exports.ɵbd = GenericFilterComponent;
     exports.ɵk = HmctsSessionDialogComponent;
     exports.ɵo = InviteUserFormComponent;
     exports.ɵn = InviteUserPermissionComponent;
     exports.ɵbc = LoadingSpinnerComponent;
-    exports.ɵbr = PaginationComponent;
+    exports.ɵbt = PaginationComponent;
     exports.ɵbk = SearchJudicialsComponent;
     exports.ɵbm = SearchLocationComponent;
-    exports.ɵbp = SearchServiceComponent;
-    exports.ɵbq = SearchVenueComponent;
+    exports.ɵbr = SearchServiceComponent;
+    exports.ɵbs = SearchVenueComponent;
     exports.ɵv = SelectedCaseConfirmComponent;
     exports.ɵt = SelectedCaseListComponent;
     exports.ɵu = SelectedCaseComponent;
@@ -8256,28 +8972,29 @@
     exports.ɵg = FeatureToggleDirective;
     exports.ɵi = LetContext;
     exports.ɵj = LetDirective;
-    exports.ɵcb = GovUkCheckboxComponent;
-    exports.ɵch = GovUkCheckboxesComponent;
-    exports.ɵcg = GovUkDateComponent;
-    exports.ɵce = GovUkErrorMessageComponent;
-    exports.ɵcf = GovUkFieldsetComponent;
-    exports.ɵcm = GovUkFileUploadComponent;
-    exports.ɵcc = GovUkFormGroupWrapperComponent;
-    exports.ɵca = GovUkInputComponent;
-    exports.ɵcd = GovUkLabelComponent;
-    exports.ɵci = GovUkRadioComponent;
-    exports.ɵcj = GovUkRadiosComponent;
-    exports.ɵck = GovUkSelectComponent;
-    exports.ɵbz = GovukTableComponent;
-    exports.ɵcl = GovUkTextareaComponent;
-    exports.ɵby = HmctsBannerComponent;
-    exports.ɵbw = HmctsErrorSummaryComponent;
-    exports.ɵbs = HmctsIdentityBarComponent;
-    exports.ɵbx = HmctsMainWrapperComponent;
-    exports.ɵbt = HmctsPaginationComponent;
-    exports.ɵbv = HmctsPrimaryNavigationComponent;
-    exports.ɵbu = HmctsSubNavigationComponent;
-    exports.ɵcn = 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;
@@ -8285,6 +9002,7 @@
     exports.ɵbi = FindAPersonService;
     exports.ɵbn = LocationService;
     exports.ɵbj = SessionStorageService;
+    exports.ɵbp = TaskNameService;
 
     Object.defineProperty(exports, '__esModule', { value: true });