@hmcts/rpx-xui-common-lib 1.8.4-rc1 → 1.8.5-angular-upgrade-r4

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

@@ -709,10 +709,15 @@
                     return this.filterSettings[id];
                 }
                 if (sessionStorage.getItem(id)) {
-                    return JSON.parse(window.sessionStorage.getItem(id));
+                    return JSON.parse(sessionStorage.getItem(id));
                 }
                 if (localStorage.getItem(id)) {
-                    return JSON.parse(window.localStorage.getItem(id));
+                    if (this.isSameUser(id)) {
+                        return JSON.parse(window.localStorage.getItem(id));
+                    }
+                    else {
+                        return null;
+                    }
                 }
                 return null;
             };
@@ -720,6 +725,19 @@
          * @param {?} id
          * @return {?}
          */
+        FilterService.prototype.isSameUser = /**
+         * @param {?} id
+         * @return {?}
+         */
+            function (id) {
+                /** @type {?} */
+                var filterSetting = JSON.parse(window.localStorage.getItem(id));
+                return !!filterSetting.idamId && filterSetting.idamId === this.getUserId();
+            };
+        /**
+         * @param {?} id
+         * @return {?}
+         */
         FilterService.prototype.getStream = /**
          * @param {?} id
          * @return {?}
@@ -730,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
@@ -741,6 +777,7 @@
          * @return {?}
          */
             function (setting) {
+                setting.idamId = this.getUserId();
                 window.localStorage.setItem(setting.id, JSON.stringify(setting));
             };
         /**
@@ -754,7 +791,7 @@
          * @return {?}
          */
             function (setting) {
-                window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
+                sessionStorage.setItem(setting.id, JSON.stringify(setting));
             };
         /**
          * @private
@@ -784,6 +821,24 @@
                     this.streams[setting.id].next(setting);
                 }
             };
+        /**
+         * @return {?}
+         */
+        FilterService.prototype.getUserId = /**
+         * @return {?}
+         */
+            function () {
+                /** @type {?} */
+                var userInfoStr = window.sessionStorage.getItem('userDetails');
+                /** @type {?} */
+                var userId;
+                if (userInfoStr) {
+                    /** @type {?} */
+                    var userInfo = JSON.parse(userInfoStr);
+                    userId = userInfo.id ? userInfo.id : userInfo.uid;
+                }
+                return userId;
+            };
         FilterService.decorators = [
             { type: i0.Injectable, args: [{
                         providedIn: 'root'
@@ -813,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 };
         });
     }
     /**
@@ -863,6 +918,7 @@
             this.filterService = filterService;
             this.fb = fb;
             this.submitted = false;
+            this.previousSelectedNestedCheckbox = [];
         }
         Object.defineProperty(GenericFilterComponent.prototype, "config", {
             get: /**
@@ -917,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;
@@ -941,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 {?}
@@ -1057,6 +1123,7 @@
                 if (form.valid) {
                     this._settings = {
                         id: this.config.id,
+                        idamId: this.filterService.getUserId(),
                         fields: this.getSelectedValues(form.value, this.config)
                     };
                     this.filterService.givenErrors.next(null);
@@ -1120,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);
@@ -1141,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
@@ -1186,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
@@ -1201,6 +1302,7 @@
          * @return {?}
          */
             function (event, form, item, field) {
+                var e_3, _a;
                 /** @type {?} */
                 var isChecked = event.target.checked;
                 /** @type {?} */
@@ -1251,19 +1353,91 @@
                     else if (hasSelectAllOption && !allChecked && isChecked && isAllCheckedExcludingTheSelectAllOption) {
                         formArray.controls[index_1].patchValue(true);
                     }
-                    return;
                 }
-                formArray.controls.forEach(( /**
-                 * @param {?} control
-                 * @return {?}
-                 */function (control) {
+                else {
+                    formArray.controls.forEach(( /**
+                     * @param {?} control
+                     * @return {?}
+                     */function (control) {
+                        if (isChecked) {
+                            control.patchValue(true);
+                        }
+                        else {
+                            control.patchValue(false);
+                        }
+                    }));
+                }
+                if (field.changeResetFields && field.changeResetFields.length) {
+                    try {
+                        for (var _b = __values(field.changeResetFields), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var resetField = _c.value;
+                            this.resetField(resetField, form);
+                        }
+                    }
+                    catch (e_3_1) {
+                        e_3 = { error: e_3_1 };
+                    }
+                    finally {
+                        try {
+                            if (_c && !_c.done && (_a = _b.return))
+                                _a.call(_b);
+                        }
+                        finally {
+                            if (e_3)
+                                throw e_3.error;
+                        }
+                    }
+                }
+                if (field.name === 'user-services') {
+                    this.startFilterSkillsByServices(form, field);
+                }
+                else if (field.name === 'user-skills') {
                     if (isChecked) {
-                        control.patchValue(true);
+                        /** @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 {
-                        control.patchValue(false);
+                        /** @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
@@ -1278,7 +1452,7 @@
          * @return {?}
          */
             function (resetField, form) {
-                var e_3, _a;
+                var e_4, _a;
                 /** @type {?} */
                 var control = form.get(resetField);
                 /** @type {?} */
@@ -1300,8 +1474,8 @@
                             this.resetField(key, control);
                         }
                     }
-                    catch (e_3_1) {
-                        e_3 = { error: e_3_1 };
+                    catch (e_4_1) {
+                        e_4 = { error: e_4_1 };
                     }
                     finally {
                         try {
@@ -1309,8 +1483,8 @@
                                 _a.call(keys_2);
                         }
                         finally {
-                            if (e_3)
-                                throw e_3.error;
+                            if (e_4)
+                                throw e_4.error;
                         }
                     }
                 }
@@ -1367,7 +1541,7 @@
          * @return {?}
          */
             function (config, settings, reset) {
-                var e_4, _a;
+                var e_5, _a;
                 /** @type {?} */
                 var findPersonControl = this.form ? this.form.get('findPersonControl') : null;
                 this.form = this.fb.group({});
@@ -1376,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 {
@@ -1391,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;
@@ -1414,15 +1594,15 @@
                         if (field.type === 'find-person') {
                             /** @type {?} */
                             var formGroup = new forms.FormGroup({
-                                domain: new forms.FormControl(''),
+                                domain: new forms.FormControl(defaultValue && defaultValue.hasOwnProperty('domain') ? defaultValue.domain : ''),
                                 email: new forms.FormControl(defaultValue && defaultValue.hasOwnProperty('email') ? defaultValue.email : '', validators),
-                                id: new forms.FormControl(''),
-                                name: new forms.FormControl(''),
-                                knownAs: new forms.FormControl(''),
+                                id: new forms.FormControl(defaultValue && defaultValue.hasOwnProperty('id') ? defaultValue.id : ''),
+                                name: new forms.FormControl(defaultValue && defaultValue.hasOwnProperty('name') ? defaultValue.name : ''),
+                                knownAs: new forms.FormControl(defaultValue && defaultValue.hasOwnProperty('knownAs') ? defaultValue.knownAs : ''),
                             });
                             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);
@@ -1440,8 +1620,8 @@
                         _loop_1(field);
                     }
                 }
-                catch (e_4_1) {
-                    e_4 = { error: e_4_1 };
+                catch (e_5_1) {
+                    e_5 = { error: e_5_1 };
                 }
                 finally {
                     try {
@@ -1449,8 +1629,8 @@
                             _a.call(_b);
                     }
                     finally {
-                        if (e_4)
-                            throw e_4.error;
+                        if (e_5)
+                            throw e_5.error;
                     }
                 }
             };
@@ -1467,7 +1647,7 @@
          * @return {?}
          */
             function (field, settings) {
-                var e_5, _a;
+                var e_6, _a;
                 /** @type {?} */
                 var validators = GenericFilterComponent.addFormValidators(field);
                 /** @type {?} */
@@ -1497,8 +1677,8 @@
                         _loop_2(option);
                     }
                 }
-                catch (e_5_1) {
-                    e_5 = { error: e_5_1 };
+                catch (e_6_1) {
+                    e_6 = { error: e_6_1 };
                 }
                 finally {
                     try {
@@ -1506,8 +1686,8 @@
                             _a.call(_b);
                     }
                     finally {
-                        if (e_5)
-                            throw e_5.error;
+                        if (e_6)
+                            throw e_6.error;
                     }
                 }
                 return formArray;
@@ -1518,14 +1698,14 @@
          * @param {?} settings
          * @return {?}
          */
-        GenericFilterComponent.prototype.buildFindLocationFormArray = /**
+        GenericFilterComponent.prototype.buildFormArray = /**
          * @private
          * @param {?} field
          * @param {?} settings
          * @return {?}
          */
             function (field, settings) {
-                var e_6, _a;
+                var e_7, _a;
                 /** @type {?} */
                 var validators = GenericFilterComponent.addFormValidators(field);
                 /** @type {?} */
@@ -1544,8 +1724,8 @@
                                 formArray.push(new forms.FormControl(defaultValue));
                             }
                         }
-                        catch (e_6_1) {
-                            e_6 = { error: e_6_1 };
+                        catch (e_7_1) {
+                            e_7 = { error: e_7_1 };
                         }
                         finally {
                             try {
@@ -1553,8 +1733,8 @@
                                     _a.call(_b);
                             }
                             finally {
-                                if (e_6)
-                                    throw e_6.error;
+                                if (e_7)
+                                    throw e_7.error;
                             }
                         }
                     }
@@ -1586,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 {
@@ -1609,7 +1789,7 @@
          * @return {?}
          */
             function (form) {
-                var e_7, _a;
+                var e_8, _a;
                 /** @type {?} */
                 var errors = [];
                 try {
@@ -1617,16 +1797,16 @@
                         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 });
                         }
                     }
                 }
-                catch (e_7_1) {
-                    e_7 = { error: e_7_1 };
+                catch (e_8_1) {
+                    e_8 = { error: e_8_1 };
                 }
                 finally {
                     try {
@@ -1634,120 +1814,370 @@
                             _a.call(_b);
                     }
                     finally {
-                        if (e_7)
-                            throw e_7.error;
+                        if (e_8)
+                            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);
                 }
             };
-        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          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddLocationButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [field]=\"field\"\n          ></xuilib-find-location>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
-                        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}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        GenericFilterComponent.ctorParameters = function () {
-            return [
-                { type: FilterService },
-                { type: forms.FormBuilder }
-            ];
-        };
-        GenericFilterComponent.propDecorators = {
-            config: [{ type: i0.Input }],
-            settings: [{ type: i0.Input }]
-        };
-        return GenericFilterComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/components/hmcts-session-dialog/hmcts-session-dialog.component.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /*
-    * Gov UK Dialog Component
-    * Responsible for displaying dialog layout
-    * using ng-content to display content from parent
-    * */
-    var HmctsSessionDialogComponent = /** @class */ (function () {
-        function HmctsSessionDialogComponent() {
-            this.close = new i0.EventEmitter();
-        }
         /**
          * @return {?}
          */
-        HmctsSessionDialogComponent.prototype.onClose = /**
+        GenericFilterComponent.prototype.initValuesFromCacheForSkillsByServices = /**
          * @return {?}
          */
             function () {
-                this.close.emit();
+                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);
             };
-        HmctsSessionDialogComponent.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'xuilib-session-dialog',
-                        template: "<div class=\"gem-c-modal-dialogue\" data-module=\"modal-dialogue\" id=\"modal-default\" style=\"display: block;\">\n  <div class=\"gem-c-modal-dialogue__overlay\"></div>\n  <dialog class=\"gem-c-modal-dialogue__box\" aria-modal=\"true\" role=\"dialog\" tabindex=\"0\" [ngStyle]=\"{'margin-top': positionTop}\">\n    <div class=\"gem-c-modal-dialogue__header\">\n      <svg role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 38 38\" height=\"33\" width=\"33\">\n        <style type=\"text/css\">\n          .st0{fill:#FFFFFF;}\n        </style>\n        <g id=\"_4_-_granular_components_warning_icon\" transform=\"translate(0.5 0.5)\">\n          <g id=\"Warning_icon\" transform=\"translate(0)\">\n            <path id=\"Exclusion_1\" class=\"st0\" d=\"M18.5,37.5c-5.04,0.01-9.88-1.99-13.44-5.57C1.49,28.38-0.51,23.54-0.5,18.5\n              c-0.01-5.04,1.99-9.88,5.56-13.43C8.62,1.49,13.46-0.51,18.5-0.5c5.04-0.01,9.88,1.99,13.44,5.56c3.57,3.56,5.58,8.39,5.56,13.44\n              c0.01,5.04-1.99,9.88-5.56,13.44C28.38,35.51,23.54,37.51,18.5,37.5z M18.52,24.29c-0.4,0-0.8,0.08-1.17,0.23\n              c-0.36,0.15-0.69,0.37-0.97,0.64c-0.28,0.27-0.5,0.59-0.65,0.95c-0.16,0.36-0.24,0.76-0.23,1.15c0,0.4,0.08,0.8,0.23,1.17\n              c0.15,0.36,0.37,0.68,0.65,0.96c0.28,0.27,0.61,0.49,0.97,0.64c0.37,0.16,0.77,0.24,1.17,0.24c0.4,0,0.79-0.08,1.15-0.24\n              c0.35-0.15,0.67-0.37,0.95-0.64c0.27-0.27,0.49-0.6,0.64-0.96c0.16-0.37,0.24-0.77,0.23-1.17c0-0.4-0.08-0.79-0.23-1.15\n              c-0.15-0.35-0.37-0.67-0.64-0.95c-0.27-0.27-0.6-0.49-0.95-0.64C19.31,24.37,18.92,24.29,18.52,24.29L18.52,24.29z M16.11,7.5\n              l0.42,14.87h3.91L20.86,7.5H16.11z\"/>\n          </g>\n        </g>\n      </svg>\n      <div class=\"gem-c-modal-dialogue__title\">We are about to sign you out</div>\n    </div>\n    <div class=\"gem-c-modal-dialogue__content\">\n      <ng-content></ng-content>\n    </div>\n  </dialog>\n</div>\n",
-                        styles: [".gem-c-modal-dialogue{display:none;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:scroll;outline:0}.gem-c-modal-dialogue__box{display:block;position:fixed;background:#fff;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow-y:auto;border:0;font-family:\"GDS Transport\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1rem;line-height:1.25;color:#0b0c0c}.gem-c-modal-dialogue__box:focus{outline:#fd0 solid 3px}@media (min-width:40.0625em){.gem-c-modal-dialogue__box{font-size:1.1875rem;line-height:1.3157894737;position:relative;top:inherit;right:inherit;bottom:inherit;left:inherit;width:auto;max-width:640px;height:auto;margin:30px auto;border:2px solid #0b0c0c}}@media print{.gem-c-modal-dialogue__box{font-family:sans-serif;font-size:14pt;line-height:1.15;color:#000}}@media (min-width:40.0625em) and (max-width:64em){.gem-c-modal-dialogue__box--wide{margin:30px}}.gem-c-modal-dialogue__overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:.8;background:#0b0c0c;pointer-events:none;touch-action:none}@media screen{.gem-o-template--modal{overflow-y:inherit}}.gem-o-template__body--modal{overflow:hidden}.gem-o-template__body--blur .govuk-footer,.gem-o-template__body--blur .govuk-header,.gem-o-template__body--blur .govuk-main-wrapper,.gem-o-template__body--blur .govuk-phase-banner,.gem-o-template__body--blur .govuk-skip-link,.gem-o-template__body--blur .govuk-width-container .govuk-back-link{filter:blur(2px)}.govuk-warning-text__icon{margin:0 0 0 12px}.gem-c-modal-dialogue__header{padding:9px 15px 10px;color:#fff;background:#d4351d;display:flex}.gem-c-modal-dialogue__title{margin:5px 0 4px 12px}.gem-c-modal-dialogue__logotype-crown{fill:currentColor;vertical-align:middle}.gem-c-modal-dialogue__logotype-crown-fallback-image{width:30px;height:26px;border:0;vertical-align:middle}.gem-c-modal-dialogue__content{padding:15px;background:#fff}.gem-c-modal-dialogue__close-button{position:absolute;top:0;right:0;width:44px;height:44px;border:0;color:#fff;background:0 0;cursor:pointer;font-family:\"GDS Transport\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;font-size:1.5rem;line-height:1.3}@media (min-width:40.0625em){.gem-c-modal-dialogue__box--wide{max-width:960px}.gem-c-modal-dialogue__close-button{font-size:2.25rem;line-height:1.3}}@media print{.gem-c-modal-dialogue__close-button{font-family:sans-serif;font-size:24pt;line-height:1.3}}@media (max-width:40.0525em){.gem-c-modal-dialogue__close-button{font-size:36px;line-height:1.3}}.gem-c-modal-dialogue__close-button:focus,.gem-c-modal-dialogue__close-button:hover{color:#0b0c0c;box-shadow:0 -2px #fd0,0 4px #0b0c0c;text-decoration:none;outline:0;background:#fd0}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        HmctsSessionDialogComponent.ctorParameters = function () { return []; };
-        HmctsSessionDialogComponent.propDecorators = {
-            positionTop: [{ type: i0.Input }],
-            close: [{ type: i0.Output }]
-        };
-        return HmctsSessionDialogComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/components/invite-user-form/invite-user-form.component.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var InviteUserFormComponent = /** @class */ (function () {
-        function InviteUserFormComponent() {
-            this.submitForm = new i0.EventEmitter();
-        }
-        Object.defineProperty(InviteUserFormComponent.prototype, "errorMessages", {
-            set: /**
-             * @param {?} value
-             * @return {?}
-             */ function (value) {
-                this.isInvalid = value || {};
-            },
-            enumerable: true,
-            configurable: true
-        });
         /**
+         * @param {?} services
+         * @param {?} config
          * @return {?}
          */
-        InviteUserFormComponent.prototype.onSubmit = /**
+        GenericFilterComponent.prototype.filterSkillsByServices = /**
+         * @param {?} services
+         * @param {?} config
          * @return {?}
          */
-            function () {
-                this.submitForm.emit();
-            };
-        InviteUserFormComponent.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'xuilib-invite-user-form',
-                        template: "\n<form [formGroup]=\"inviteUserForm\" (ngSubmit)=\"onSubmit()\" >\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'First name', hint: 'Include all middle names.', name: 'firstName', id: 'firstName', type: 'text', classes: 'testClass'}\"\n    [errorMessage]=\"isInvalid.firstName\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'Last name', name: 'lastName', id: 'lastName', type: 'text'}\"\n    [errorMessage]=\"isInvalid.lastName\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'Email address', name: 'email', id: 'email', type: 'email'}\"\n    [errorMessage]=\"isInvalid.email\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-invite-permission-form [inviteUserForm]=\"inviteUserForm\" [errorMessages]=\"isInvalid.roles\">\n  </xuilib-invite-permission-form>\n\n  <button type=\"submit\" class=\"govuk-button\">\n    Send invitation\n  </button>\n</form>\n"
-                    }] }
-        ];
-        InviteUserFormComponent.propDecorators = {
-            submitForm: [{ type: i0.Output }],
-            inviteUserForm: [{ type: i0.Input }],
-            errorMessages: [{ type: i0.Input }]
-        };
-        return InviteUserFormComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
+            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 elevated-break\">\n    <ng-container [ngSwitch]=\"field.type\">\n      <ng-container *ngSwitchCase=\"'group-title'\">\n        <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n          {{ field.name | capitalize }}\n        </div>\n    </ng-container>\n      <ng-container *ngSwitchDefault>\n        <div class=\"govuk-form-group xui-generic-filter\"\n             [hidden]=\"hidden(field, form)\"\n             [id]=\"field.name\"\n             [ngClass]=\"{'form-group-error': submitted && ((form.get(field.name).errors?.minlength || form.get(field.name).errors?.required) || form.get(field.name).errors?.maxlength || form.get(field.name).errors?.email)}\">\n          <div *ngIf=\"field.title\" class=\"xui-generic-filter__field-title\">\n            <h3 [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n              {{field.title | capitalize}}\n            </h3>\n            <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n              {{ field.titleHint }}\n            </div>\n          </div>\n          <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n          <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n            *ngIf=\"field.displayMinSelectedError && submitted && (form.get(field.name).errors?.minlength || form.get(field.name).errors?.required)\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n          </span>\n          <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n            *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxlength\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n          </span>\n          <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n                *ngIf=\"field.emailError && submitted && form.get(field.name).errors?.email\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{field.emailError}}\n          </span>\n          <div class=\"govuk-body\"  [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\" [ngSwitch]=\"field.type\">\n            <ng-container *ngSwitchCase=\"'select'\">\n              <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n                <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n                <option *ngIf=\"field.defaultOption\" [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n                <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n              </select>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'group-select'\">\n              <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n                <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n                <option *ngIf=\"field.defaultOption\" selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n                <optgroup *ngFor = 'let grp of filteredSkillsByServices' label=\"{{grp.group | titlecase}}\">\n                  <option *ngFor = 'let item of grp.options' [value]=\"item.key\">{{item.label}}</option>\n                </optgroup>\n              </select>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n                <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n                  <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                         [attr.disabled]=\"disabled(field, form)\"\n                         [formControlName]=\"i\"\n                         (change)=\"toggleSelectAll($event, form, item, field)\"\n                         [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                         [name]=\"'checkbox_' + item.key\"\n                  />\n                  <label\n                    [for]=\"'checkbox_' + item.key\"\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n                  >{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'nested-checkbox'\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n                <div *ngFor=\"let item of filteredSkillsByServicesCheckbox; let i = index\" class=\"govuk-checkboxes__item\">\n                  <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                         [attr.disabled]=\"disabled(field, form)\"\n                         [formControlName]=\"i\"\n                         (change)=\"toggleSelectAll($event, form, item, field)\"\n                         [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                         [name]=\"'checkbox_' + item.key\"\n                  />\n                  <label\n                    [for]=\"'checkbox_' + item.key\"\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n                  >{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkbox-large'\">\n              <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n                <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n                  <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                         [attr.disabled]=\"disabled(field, form)\"\n                         [formControlName]=\"i\"\n                         (change)=\"toggleSelectAll($event, form, item, field)\"\n                         [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                         [name]=\"'checkbox_' + item.key\"\n                  />\n                  <label\n                    [for]=\"'checkbox_' + item.key\"\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n                  >{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'radio'\">\n              <div class=\"govuk-radios\">\n                <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n                  <input type=\"radio\"\n                         [formControlName]=\"field.name\"\n                         [id]=\"'radio_' + item.key\"\n                         [attr.disabled]=\"disabled(field, form)\"\n                         [checked]=\"item.key === form.get(field.name).value\"\n                         class=\"govuk-radios__input\"\n                         [value]=\"item.key\"\n                         (change)=\"fieldChanged(field, form)\"\n                  />\n                  <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'find-person'\">\n              <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                                  (personFieldChanged)=\"inputChanged(field)\"\n                                  [submitted]=\"submitted\"\n                                  [disabled]=\"disabled(field, form)\"\n                                  [domain]=\"form.get(field.domainField)?.value\"\n                                  [findPersonGroup]=\"form\"\n                                  [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                                  [userIncluded]=\"false\"\n                                  [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n              ></xuilib-find-person>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'find-location'\">\n              <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                    [form]=\"form\"\n                                    [fields]=\"config.fields\"\n                                    [locationTitle]=\"field.locationTitle\"\n                                    [enableAddLocationButton]=\"field.enableAddButton\"\n                                    [disabled]=\"disabled(field, form)\"\n                                    [disableInputField]=\"field.disable\"\n                                    [selectedLocations]=\"form.get(field.name)?.value\"\n                                    [submitted]=\"submitted\"\n                                    [services]=\"form.get(field.findLocationField)?.value\"\n                                    [field]=\"field\"\n              ></xuilib-find-location>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'find-task-name'\">\n              <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n                                  (taskNameFieldChanged)=\"inputChanged(field)\"\n                                  [submitted]=\"submitted\"\n                                  [disabled]=\"disabled(field, form)\"\n                                  [domain]=\"form.get(field.domainField)?.value\"\n                                  [findTaskNameGroup]=\"form\"\n                                  [selectedTaskName]=\"form.get(field.name).value.taskName\"\n                                  [userIncluded]=\"false\"\n              ></xuilib-find-task-name>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'find-service'\">\n              <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                    [form]=\"form\"\n                                    [enableAddServiceButton]=\"field.enableAddButton\"\n                                    [disabled]=\"disabled(field, form)\"\n                                    [selectedServices]=\"form.get(field.name)?.value\"\n                                    [services]=\"field.options\"\n                                    [field]=\"field\"\n              ></xuilib-find-service>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'text-input'\">\n              <input class=\"govuk-input\" type=\"text\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"field.name\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     (change)=\"fieldChanged(field, form)\"\n                     [attr.maxlength]=\"field.maxlength ? field.maxlength : null\"\n              />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'email-input'\">\n              <input class=\"govuk-input\" type=\"email\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"field.name\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n            </ng-container>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                        styles: [".contain-classes .elevated-break{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 */
+        GenericFilterComponent.ctorParameters = function () {
+            return [
+                { type: FilterService },
+                { type: forms.FormBuilder }
+            ];
+        };
+        GenericFilterComponent.propDecorators = {
+            config: [{ type: i0.Input }],
+            settings: [{ type: i0.Input }]
+        };
+        return GenericFilterComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/hmcts-session-dialog/hmcts-session-dialog.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /*
+    * Gov UK Dialog Component
+    * Responsible for displaying dialog layout
+    * using ng-content to display content from parent
+    * */
+    var HmctsSessionDialogComponent = /** @class */ (function () {
+        function HmctsSessionDialogComponent() {
+            this.close = new i0.EventEmitter();
+        }
+        /**
+         * @return {?}
+         */
+        HmctsSessionDialogComponent.prototype.onClose = /**
+         * @return {?}
+         */
+            function () {
+                this.close.emit();
+            };
+        HmctsSessionDialogComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-session-dialog',
+                        template: "<div class=\"gem-c-modal-dialogue\" data-module=\"modal-dialogue\" id=\"modal-default\" style=\"display: block;\">\n  <div class=\"gem-c-modal-dialogue__overlay\"></div>\n  <dialog class=\"gem-c-modal-dialogue__box\" aria-modal=\"true\" role=\"dialog\" tabindex=\"0\" [ngStyle]=\"{'margin-top': positionTop}\">\n    <div class=\"gem-c-modal-dialogue__header\">\n      <svg role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 38 38\" height=\"33\" width=\"33\">\n        <style type=\"text/css\">\n          .st0{fill:#FFFFFF;}\n        </style>\n        <g id=\"_4_-_granular_components_warning_icon\" transform=\"translate(0.5 0.5)\">\n          <g id=\"Warning_icon\" transform=\"translate(0)\">\n            <path id=\"Exclusion_1\" class=\"st0\" d=\"M18.5,37.5c-5.04,0.01-9.88-1.99-13.44-5.57C1.49,28.38-0.51,23.54-0.5,18.5\n              c-0.01-5.04,1.99-9.88,5.56-13.43C8.62,1.49,13.46-0.51,18.5-0.5c5.04-0.01,9.88,1.99,13.44,5.56c3.57,3.56,5.58,8.39,5.56,13.44\n              c0.01,5.04-1.99,9.88-5.56,13.44C28.38,35.51,23.54,37.51,18.5,37.5z M18.52,24.29c-0.4,0-0.8,0.08-1.17,0.23\n              c-0.36,0.15-0.69,0.37-0.97,0.64c-0.28,0.27-0.5,0.59-0.65,0.95c-0.16,0.36-0.24,0.76-0.23,1.15c0,0.4,0.08,0.8,0.23,1.17\n              c0.15,0.36,0.37,0.68,0.65,0.96c0.28,0.27,0.61,0.49,0.97,0.64c0.37,0.16,0.77,0.24,1.17,0.24c0.4,0,0.79-0.08,1.15-0.24\n              c0.35-0.15,0.67-0.37,0.95-0.64c0.27-0.27,0.49-0.6,0.64-0.96c0.16-0.37,0.24-0.77,0.23-1.17c0-0.4-0.08-0.79-0.23-1.15\n              c-0.15-0.35-0.37-0.67-0.64-0.95c-0.27-0.27-0.6-0.49-0.95-0.64C19.31,24.37,18.92,24.29,18.52,24.29L18.52,24.29z M16.11,7.5\n              l0.42,14.87h3.91L20.86,7.5H16.11z\"/>\n          </g>\n        </g>\n      </svg>\n      <div class=\"gem-c-modal-dialogue__title\">We are about to sign you out</div>\n    </div>\n    <div class=\"gem-c-modal-dialogue__content\">\n      <ng-content></ng-content>\n    </div>\n  </dialog>\n</div>\n",
+                        styles: [".gem-c-modal-dialogue{display:none;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:scroll;outline:0}.gem-c-modal-dialogue__box{display:block;position:fixed;background:#fff;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow-y:auto;border:0;font-family:\"GDS Transport\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1rem;line-height:1.25;color:#0b0c0c}.gem-c-modal-dialogue__box:focus{outline:#fd0 solid 3px}@media (min-width:40.0625em){.gem-c-modal-dialogue__box{font-size:1.1875rem;line-height:1.3157894737;position:relative;top:inherit;right:inherit;bottom:inherit;left:inherit;width:auto;max-width:640px;height:auto;margin:30px auto;border:2px solid #0b0c0c}}@media print{.gem-c-modal-dialogue__box{font-family:sans-serif;font-size:14pt;line-height:1.15;color:#000}}@media (min-width:40.0625em) and (max-width:64em){.gem-c-modal-dialogue__box--wide{margin:30px}}.gem-c-modal-dialogue__overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:.8;background:#0b0c0c;pointer-events:none;touch-action:none}@media screen{.gem-o-template--modal{overflow-y:inherit}}.gem-o-template__body--modal{overflow:hidden}.gem-o-template__body--blur .govuk-footer,.gem-o-template__body--blur .govuk-header,.gem-o-template__body--blur .govuk-main-wrapper,.gem-o-template__body--blur .govuk-phase-banner,.gem-o-template__body--blur .govuk-skip-link,.gem-o-template__body--blur .govuk-width-container .govuk-back-link{filter:blur(2px)}.govuk-warning-text__icon{margin:0 0 0 12px}.gem-c-modal-dialogue__header{padding:9px 15px 10px;color:#fff;background:#d4351d;display:flex}.gem-c-modal-dialogue__title{margin:5px 0 4px 12px}.gem-c-modal-dialogue__logotype-crown{fill:currentColor;vertical-align:middle}.gem-c-modal-dialogue__logotype-crown-fallback-image{width:30px;height:26px;border:0;vertical-align:middle}.gem-c-modal-dialogue__content{padding:15px;background:#fff}.gem-c-modal-dialogue__close-button{position:absolute;top:0;right:0;width:44px;height:44px;border:0;color:#fff;background:0 0;cursor:pointer;font-family:\"GDS Transport\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;font-size:1.5rem;line-height:1.3}@media (min-width:40.0625em){.gem-c-modal-dialogue__box--wide{max-width:960px}.gem-c-modal-dialogue__close-button{font-size:2.25rem;line-height:1.3}}@media print{.gem-c-modal-dialogue__close-button{font-family:sans-serif;font-size:24pt;line-height:1.3}}@media (max-width:40.0525em){.gem-c-modal-dialogue__close-button{font-size:36px;line-height:1.3}}.gem-c-modal-dialogue__close-button:focus,.gem-c-modal-dialogue__close-button:hover{color:#0b0c0c;box-shadow:0 -2px #fd0,0 4px #0b0c0c;text-decoration:none;outline:0;background:#fd0}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        HmctsSessionDialogComponent.ctorParameters = function () { return []; };
+        HmctsSessionDialogComponent.propDecorators = {
+            positionTop: [{ type: i0.Input }],
+            close: [{ type: i0.Output }]
+        };
+        return HmctsSessionDialogComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/invite-user-form/invite-user-form.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var InviteUserFormComponent = /** @class */ (function () {
+        function InviteUserFormComponent() {
+            this.submitForm = new i0.EventEmitter();
+        }
+        Object.defineProperty(InviteUserFormComponent.prototype, "errorMessages", {
+            set: /**
+             * @param {?} value
+             * @return {?}
+             */ function (value) {
+                this.isInvalid = value || {};
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @return {?}
+         */
+        InviteUserFormComponent.prototype.onSubmit = /**
+         * @return {?}
+         */
+            function () {
+                this.submitForm.emit();
+            };
+        InviteUserFormComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-invite-user-form',
+                        template: "\n<form [formGroup]=\"inviteUserForm\" (ngSubmit)=\"onSubmit()\" >\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'First name', hint: 'Include all middle names.', name: 'firstName', id: 'firstName', type: 'text', classes: 'testClass'}\"\n    [errorMessage]=\"isInvalid.firstName\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'Last name', name: 'lastName', id: 'lastName', type: 'text'}\"\n    [errorMessage]=\"isInvalid.lastName\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'Email address', name: 'email', id: 'email', type: 'email'}\"\n    [errorMessage]=\"isInvalid.email\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-invite-permission-form [inviteUserForm]=\"inviteUserForm\" [errorMessages]=\"isInvalid.roles\">\n  </xuilib-invite-permission-form>\n\n  <button type=\"submit\" class=\"govuk-button\">\n    Send invitation\n  </button>\n</form>\n"
+                    }] }
+        ];
+        InviteUserFormComponent.propDecorators = {
+            submitForm: [{ type: i0.Output }],
+            inviteUserForm: [{ type: i0.Input }],
+            errorMessages: [{ type: i0.Input }]
+        };
+        return InviteUserFormComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
      * Generated from: lib/components/invite-user-permissions/invite-user-permission.component.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
@@ -3053,6 +3483,7 @@
             this.users = []; // users of this organisation the cases can be shared with
             // users of this organisation the cases can be shared with
             this.confirmLink = '';
+            this.showRemoveUsers = false;
             this.unselect = new i0.EventEmitter();
             this.synchronizeStore = new i0.EventEmitter();
         }
@@ -3215,8 +3646,8 @@
         ShareCaseComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-share-case',
-                        template: "<div id=\"add-user\">\n  <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">Enter email address</label>\n  <span id=\"add-user-hint\" class=\"govuk-hint\">\n    Search by name or email address. You can only add people from your organisation individually - but you can add as many as you like.\n  </span>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <xuilib-user-select\n        id=\"add-user-input\"\n        aria-describedby=\"add-user-hint\"\n        [users]=\"users\"\n        (selected)=\"onSelectedUser($event)\">\n      </xuilib-user-select>\n    </div>\n    <div class=\"govuk-grid-column-one-thirds\">\n      <button id=\"btn-add-user\" (click)=\"addUser()\" class=\"govuk-button\" [disabled]=\"isDisabledAdd()\" title=\"Add user to the case\">Add</button>\n    </div>\n  </div>\n  <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n    <summary class=\"govuk-details__summary\">\n    <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n      Can\u2019t find an email address?\n    </span>\n    </summary>\n    <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n      If you can\u2019t find your colleague\u2019s email address, they will need to complete their registration. Contact your\n      administrator for help.\n    </div>\n  </details>\n</div>\n\n<div id=\"cases\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n  <div *ngIf=\"shareCases && shareCases.length > 0\"  class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\">\n    No cases to display.\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\">\n  <button class=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n</div>\n",
-                        styles: [""]
+                        template: "<div id=\"add-user\">\n  <div class=\"govuk-form-group\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">{{addUserLabel}}</label>\n    <span id=\"add-user-hint\" class=\"govuk-hint\">\n      Search by name or email address. You can share access with as many people as you need.\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <xuilib-user-select\n          id=\"add-user-input\"\n          aria-describedby=\"add-user-hint\"\n          [users]=\"users\"\n          (selected)=\"onSelectedUser($event)\">\n        </xuilib-user-select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-add-user\" (click)=\"addUser()\" class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\" title=\"Add user to selected cases\">Add</button>\n      </div>\n    </div>\n    <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n      <summary class=\"govuk-details__summary\">\n      <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n        Can't find an email address?\n      </span>\n      </summary>\n      <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n        If you can't find your colleague's email address, they will need to complete their registration. Contact your\n        administrator for help.\n      </div>\n    </details>\n  </div>\n  <div class=\"govuk-form-group\" *ngIf=\"showRemoveUsers\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"remove-user-input\">Remove a person from all cases</label>\n    <span id=\"remove-user-hint\" class=\"govuk-hint\">\n      Select a person to remove them from all selected cases.\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <select class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option value=\"{{user}}\" *ngFor=\"let user of users\">{{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" class=\"govuk-button govuk-button--secondary\" title=\"Remove user from selected cases\">Remove</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"cases\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n  <div *ngIf=\"shareCases && shareCases.length > 0\"  class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\">\n    No cases to display.\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n  <button class=\"govuk-button\" data-module=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n  <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"Cancel\">Cancel</button>\n</div>\n",
+                        styles: ["select{width:100%}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3230,6 +3661,8 @@
             shareCases$: [{ type: i0.Input }],
             users: [{ type: i0.Input }],
             confirmLink: [{ type: i0.Input }],
+            addUserLabel: [{ type: i0.Input }],
+            showRemoveUsers: [{ type: i0.Input }],
             unselect: [{ type: i0.Output }],
             synchronizeStore: [{ type: i0.Output }],
             userSelect: [{ type: i0.ViewChild, args: [UserSelectComponent,] }]
@@ -3767,59 +4200,136 @@
 
     /**
      * @fileoverview added by tsickle
-     * Generated from: lib/services/locations/location.service.ts
+     * Generated from: lib/models/contact-details.model.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var LocationService = /** @class */ (function () {
-        function LocationService(http) {
-            this.http = http;
+    /** @enum {string} */
+    var BadgeColour = {
+        BADGE_RED: "hmcts-badge--red",
+        BADGE_BLUE: "hmcts-badge--blue",
+        BADGE_GREEN: "hmcts-badge--green",
+    };
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/models/feature-user.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var AnonymousFeatureUser = /** @class */ (function () {
+        function AnonymousFeatureUser() {
         }
-        /**
-         * @description getAllLocations from service Ids/location type/search term
-         * @param serviceIds: SSCS | SSCS,IA split with ','
-         * @param locationType: optional | hearing | case_management
-         * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
-         * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
-         */
-        /**
-         * \@description getAllLocations from service Ids/location type/search term
-         * @param {?} serviceIds
-         * @param {?} locationType
-         * @param {?} searchTerm
-         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
-         */
-        LocationService.prototype.getAllLocations = /**
-         * \@description getAllLocations from service Ids/location type/search term
-         * @param {?} serviceIds
-         * @param {?} locationType
-         * @param {?} searchTerm
-         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
-         */
-            function (serviceIds, locationType, searchTerm) {
-                return this.http.get("api/locations/getLocations?serviceIds=" + serviceIds + "&locationType=" + locationType + "&searchTerm=" + searchTerm);
-            };
-        /**
-         * @description searchLocations from service Ids/location type/search term
-         * @param serviceIds: BBA3 | BBA3,BFA1 split with ','
-         * @param locationType: optional | hearing | case_management
-         * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
-         * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
-         */
-        /**
-         * \@description searchLocations from service Ids/location type/search term
-         * @param {?} serviceIds
-         * @param {?} locationType
-         * @param {?} searchTerm
-         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
-         */
-        LocationService.prototype.searchLocations = /**
-         * \@description searchLocations from service Ids/location type/search term
-         * @param {?} serviceIds
-         * @param {?} locationType
-         * @param {?} searchTerm
-         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
-         */
-            function (serviceIds, locationType, searchTerm) {
+        return AnonymousFeatureUser;
+    }());
+    var LoggedInFeatureUser = /** @class */ (function () {
+        function LoggedInFeatureUser() {
+        }
+        return LoggedInFeatureUser;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/models/location.model.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @enum {string} */
+    var BookingCheckType = {
+        NO_CHECK: "NO_CHECK",
+        BOOKINGS_AND_BASE: "BOOKINGS_AND_BASE",
+        POSSIBLE_BOOKINGS: "POSSIBLE_BOOKINGS",
+    };
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/models/person.model.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @enum {string} */
+    var PersonRole = {
+        JUDICIAL: "Judicial",
+        CASEWORKER: "Legal Ops",
+        ADMIN: "Admin",
+        CTSC: "CTSC User",
+        ALL: "All",
+    };
+    /** @enum {string} */
+    var RoleCategory = {
+        JUDICIAL: "JUDICIAL",
+        CASEWORKER: "LEGAL_OPERATIONS",
+        ADMIN: "ADMIN",
+        CTSC: "CTSC",
+        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/services/locations/location.service.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var LocationService = /** @class */ (function () {
+        function LocationService(http) {
+            this.http = http;
+        }
+        /**
+         * @description getAllLocations from service Ids/location type/search term
+         * @param serviceIds: SSCS | SSCS,IA split with ','
+         * @param locationType: optional | hearing | case_management
+         * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
+         * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+        /**
+         * \@description getAllLocations from service Ids/location type/search term
+         * @param {?} serviceIds
+         * @param {?} locationType
+         * @param {?} searchTerm
+         * @param {?} userLocations
+         * @param {?} bookingLocations
+         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+        LocationService.prototype.getAllLocations = /**
+         * \@description getAllLocations from service Ids/location type/search term
+         * @param {?} serviceIds
+         * @param {?} locationType
+         * @param {?} searchTerm
+         * @param {?} userLocations
+         * @param {?} bookingLocations
+         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+            function (serviceIds, locationType, searchTerm, userLocations, bookingLocations) {
+                return this.http.post("api/locations/getLocations", { serviceIds: serviceIds, locationType: locationType, searchTerm: searchTerm, userLocations: userLocations, bookingLocations: bookingLocations });
+            };
+        /**
+         * @description searchLocations from service Ids/location type/search term
+         * @param serviceIds: BBA3 | BBA3,BFA1 split with ','
+         * @param locationType: optional | hearing | case_management
+         * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
+         * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+        /**
+         * \@description searchLocations from service Ids/location type/search term
+         * @param {?} serviceIds
+         * @param {?} locationType
+         * @param {?} searchTerm
+         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+        LocationService.prototype.searchLocations = /**
+         * \@description searchLocations from service Ids/location type/search term
+         * @param {?} serviceIds
+         * @param {?} locationType
+         * @param {?} searchTerm
+         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+            function (serviceIds, locationType, searchTerm) {
                 return this.http.get("api/prd/location/getLocations?serviceIds=" + serviceIds + "&locationType=" + locationType + "&searchTerm=" + searchTerm);
             };
         LocationService.decorators = [
@@ -3837,14 +4347,110 @@
         return LocationService;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * 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 () {
+        function SessionStorageService() {
+        }
+        /**
+         * Get an item from the session storage.
+         * If remove is true, the item will be removed once read
+         * @param removeAfterRead removed the key once it has been read
+         */
+        /**
+         * Get an item from the session storage.
+         * If remove is true, the item will be removed once read
+         * @param {?} key
+         * @param {?=} removeAfterRead removed the key once it has been read
+         * @return {?}
+         */
+        SessionStorageService.prototype.getItem = /**
+         * Get an item from the session storage.
+         * If remove is true, the item will be removed once read
+         * @param {?} key
+         * @param {?=} removeAfterRead removed the key once it has been read
+         * @return {?}
+         */
+            function (key, removeAfterRead) {
+                if (removeAfterRead === void 0) {
+                    removeAfterRead = false;
+                }
+                /** @type {?} */
+                var item = sessionStorage.getItem(key);
+                if (removeAfterRead) {
+                    this.removeItem(key);
+                }
+                return item;
+            };
+        /**
+         * Set an item in the session storage.
+         */
+        /**
+         * Set an item in the session storage.
+         * @param {?} key
+         * @param {?} value
+         * @return {?}
+         */
+        SessionStorageService.prototype.setItem = /**
+         * Set an item in the session storage.
+         * @param {?} key
+         * @param {?} value
+         * @return {?}
+         */
+            function (key, value) {
+                sessionStorage.setItem(key, value);
+            };
+        /**
+         * Remove an item in the session storage.
+         */
+        /**
+         * Remove an item in the session storage.
+         * @param {?} key
+         * @return {?}
+         */
+        SessionStorageService.prototype.removeItem = /**
+         * Remove an item in the session storage.
+         * @param {?} key
+         * @return {?}
+         */
+            function (key) {
+                sessionStorage.removeItem(key);
+            };
+        /**
+         * Clear all the items held in session storage.
+         */
+        /**
+         * Clear all the items held in session storage.
+         * @return {?}
+         */
+        SessionStorageService.prototype.clear = /**
+         * Clear all the items held in session storage.
+         * @return {?}
+         */
+            function () {
+                sessionStorage.clear();
+            };
+        SessionStorageService.decorators = [
+            { type: i0.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */ SessionStorageService.ngInjectableDef = i0.defineInjectable({ factory: function SessionStorageService_Factory() { return new SessionStorageService(); }, token: SessionStorageService, providedIn: "root" });
+        return SessionStorageService;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/search-location/search-location.component.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var SearchLocationComponent = /** @class */ (function () {
-        function SearchLocationComponent(locationService, fb, cd) {
+        function SearchLocationComponent(locationService, sessionStorageService, fb, cd) {
             this.locationService = locationService;
+            this.sessionStorageService = sessionStorageService;
             this.fb = fb;
             this.cd = cd;
             this.disabled = null;
@@ -3996,7 +4602,22 @@
          * @return {?}
          */
             function (term) {
-                return this.locationService.getAllLocations(this.serviceIds, this.locationType, term);
+                /** @type {?} */
+                var userLocations;
+                /** @type {?} */
+                var bookingLocations;
+                // Booking type info - can create more
+                // NO_CHECK - All work - Do not filter out locations - Default assumption
+                // ONLY_BOOKINGS - My work - Try to only show base locations/booking locations
+                // POSSIBLE_BOOKINGS - Create booking screen - Show only potential bookings
+                if (this.bookingCheck === BookingCheckType.BOOKINGS_AND_BASE) {
+                    userLocations = JSON.parse(this.sessionStorageService.getItem('userLocations'));
+                    bookingLocations = JSON.parse(this.sessionStorageService.getItem('bookingLocations'));
+                }
+                else if (this.bookingCheck === BookingCheckType.POSSIBLE_BOOKINGS) {
+                    this.serviceIds = this.serviceIds && this.serviceIds.length ? this.serviceIds : JSON.parse(this.sessionStorageService.getItem('bookableServices'));
+                }
+                return this.locationService.getAllLocations(this.serviceIds, this.locationType, term, userLocations, bookingLocations);
             };
         /**
          * @return {?}
@@ -4036,13 +4657,14 @@
             { 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 */
         SearchLocationComponent.ctorParameters = function () {
             return [
                 { type: LocationService },
+                { type: SessionStorageService },
                 { type: forms.FormBuilder },
                 { type: i0.ChangeDetectorRef }
             ];
@@ -4058,6 +4680,7 @@
             form: [{ type: i0.Input }],
             showAutocomplete: [{ type: i0.Input }],
             locations: [{ type: i0.Input }],
+            bookingCheck: [{ type: i0.Input }],
             locationSelected: [{ type: i0.Output }],
             locationInputChanged: [{ type: i0.Output }],
             searchLocationChanged: [{ type: i0.Output }],
@@ -4137,6 +4760,19 @@
             enumerable: true,
             configurable: true
         });
+        /**
+         * @return {?}
+         */
+        FindLocationComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                // implemented to get rid of undefined values
+                this.selectedLocations = this.selectedLocations.filter(( /**
+                 * @param {?} location
+                 * @return {?}
+                 */function (location) { return location.epimms_id; }));
+            };
         /**
          * @return {?}
          */
@@ -4278,8 +4914,8 @@
         FindLocationComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-find-location',
-                        template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [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 = {
@@ -4534,200 +5170,46 @@
 
     /**
      * @fileoverview added by tsickle
-     * Generated from: lib/models/contact-details.model.ts
+     * Generated from: lib/gov-ui/util/session-storage/session-storage-utils.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /** @enum {string} */
-    var BadgeColour = {
-        BADGE_RED: "hmcts-badge--red",
-        BADGE_BLUE: "hmcts-badge--blue",
-        BADGE_GREEN: "hmcts-badge--green",
-    };
+    /** @type {?} */
+    var getAllCaseworkersFromServices = ( /**
+     * @param {?} caseworkersByService
+     * @return {?}
+     */function (caseworkersByService) {
+        /** @type {?} */
+        var allCaseworkers = [];
+        caseworkersByService.forEach(( /**
+         * @param {?} caseworkerListByService
+         * @return {?}
+         */function (caseworkerListByService) {
+            allCaseworkers = allCaseworkers.concat(caseworkerListByService.caseworkers);
+        }));
+        return allCaseworkers;
+    });
+    /** @type {?} */
+    var getSessionStorageKeyForServiceId = ( /**
+     * @param {?} serviceId
+     * @return {?}
+     */function (serviceId) {
+        return serviceId + "-caseworkers";
+    });
+    /** @type {?} */
+    var setCaseworkers = ( /**
+     * @param {?} serviceId
+     * @param {?} caseworkers
+     * @param {?} sessionStorageService
+     * @return {?}
+     */function (serviceId, caseworkers, sessionStorageService) {
+        /** @type {?} */
+        var sessionKey = getSessionStorageKeyForServiceId(serviceId);
+        sessionStorageService.setItem(sessionKey, JSON.stringify(caseworkers));
+    });
 
     /**
      * @fileoverview added by tsickle
-     * Generated from: lib/models/feature-user.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var AnonymousFeatureUser = /** @class */ (function () {
-        function AnonymousFeatureUser() {
-        }
-        return AnonymousFeatureUser;
-    }());
-    var LoggedInFeatureUser = /** @class */ (function () {
-        function LoggedInFeatureUser() {
-        }
-        return LoggedInFeatureUser;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/models/person.model.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /** @enum {string} */
-    var PersonRole = {
-        JUDICIAL: "Judicial",
-        CASEWORKER: "Legal Ops",
-        ADMIN: "Admin",
-        ALL: "All",
-    };
-    /** @enum {string} */
-    var RoleCategory = {
-        JUDICIAL: "JUDICIAL",
-        CASEWORKER: "LEGAL_OPERATIONS",
-        ADMIN: "ADMIN",
-        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/gov-ui/util/session-storage/session-storage-utils.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /** @type {?} */
-    var getAllCaseworkersFromServices = ( /**
-     * @param {?} caseworkersByService
-     * @return {?}
-     */function (caseworkersByService) {
-        /** @type {?} */
-        var allCaseworkers = [];
-        caseworkersByService.forEach(( /**
-         * @param {?} caseworkerListByService
-         * @return {?}
-         */function (caseworkerListByService) {
-            allCaseworkers = allCaseworkers.concat(caseworkerListByService.caseworkers);
-        }));
-        return allCaseworkers;
-    });
-    /** @type {?} */
-    var getSessionStorageKeyForServiceId = ( /**
-     * @param {?} serviceId
-     * @return {?}
-     */function (serviceId) {
-        return serviceId + "-caseworkers";
-    });
-    /** @type {?} */
-    var setCaseworkers = ( /**
-     * @param {?} serviceId
-     * @param {?} caseworkers
-     * @param {?} sessionStorageService
-     * @return {?}
-     */function (serviceId, caseworkers, sessionStorageService) {
-        /** @type {?} */
-        var sessionKey = getSessionStorageKeyForServiceId(serviceId);
-        sessionStorageService.setItem(sessionKey, JSON.stringify(caseworkers));
-    });
-
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/services/session-storage/session-storage.service.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var SessionStorageService = /** @class */ (function () {
-        function SessionStorageService() {
-        }
-        /**
-         * Get an item from the session storage.
-         * If remove is true, the item will be removed once read
-         * @param removeAfterRead removed the key once it has been read
-         */
-        /**
-         * Get an item from the session storage.
-         * If remove is true, the item will be removed once read
-         * @param {?} key
-         * @param {?=} removeAfterRead removed the key once it has been read
-         * @return {?}
-         */
-        SessionStorageService.prototype.getItem = /**
-         * Get an item from the session storage.
-         * If remove is true, the item will be removed once read
-         * @param {?} key
-         * @param {?=} removeAfterRead removed the key once it has been read
-         * @return {?}
-         */
-            function (key, removeAfterRead) {
-                if (removeAfterRead === void 0) {
-                    removeAfterRead = false;
-                }
-                /** @type {?} */
-                var item = sessionStorage.getItem(key);
-                if (removeAfterRead) {
-                    this.removeItem(key);
-                }
-                return item;
-            };
-        /**
-         * Set an item in the session storage.
-         */
-        /**
-         * Set an item in the session storage.
-         * @param {?} key
-         * @param {?} value
-         * @return {?}
-         */
-        SessionStorageService.prototype.setItem = /**
-         * Set an item in the session storage.
-         * @param {?} key
-         * @param {?} value
-         * @return {?}
-         */
-            function (key, value) {
-                sessionStorage.setItem(key, value);
-            };
-        /**
-         * Remove an item in the session storage.
-         */
-        /**
-         * Remove an item in the session storage.
-         * @param {?} key
-         * @return {?}
-         */
-        SessionStorageService.prototype.removeItem = /**
-         * Remove an item in the session storage.
-         * @param {?} key
-         * @return {?}
-         */
-            function (key) {
-                sessionStorage.removeItem(key);
-            };
-        /**
-         * Clear all the items held in session storage.
-         */
-        /**
-         * Clear all the items held in session storage.
-         * @return {?}
-         */
-        SessionStorageService.prototype.clear = /**
-         * Clear all the items held in session storage.
-         * @return {?}
-         */
-            function () {
-                sessionStorage.clear();
-            };
-        SessionStorageService.decorators = [
-            { type: i0.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */ SessionStorageService.ngInjectableDef = i0.defineInjectable({ factory: function SessionStorageService_Factory() { return new SessionStorageService(); }, token: SessionStorageService, providedIn: "root" });
-        return SessionStorageService;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/services/find-person/find-person.service.ts
+     * Generated from: lib/services/find-person/find-person.service.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var FindAPersonService = /** @class */ (function () {
@@ -4753,7 +5235,7 @@
                     this.userId = userInfo.id ? userInfo.id : userInfo.uid;
                 }
                 this.assignedUser = searchOptions.assignedUser ? searchOptions.assignedUser : null;
-                return this.http.post('/workallocation2/findPerson', { searchOptions: searchOptions })
+                return this.http.post('/workallocation/findPerson', { searchOptions: searchOptions })
                     .pipe(operators.map(( /**
              * @param {?} judiciary
              * @return {?}
@@ -4811,7 +5293,7 @@
                     return rxjs.of(this.searchInCaseworkers(storedCaseworkers, searchOptions));
                 }
                 // all serviceIds passed in as node layer getting used anyway and caseworkers also stored there
-                return this.http.post('/workallocation2/retrieveCaseWorkersForServices', { fullServices: fullServices }).pipe(operators.tap(( /**
+                return this.http.post('/workallocation/retrieveCaseWorkersForServices', { fullServices: fullServices }).pipe(operators.tap(( /**
                  * @param {?} caseworkersByService
                  * @return {?}
                  */function (caseworkersByService) {
@@ -4878,7 +5360,15 @@
                 /** @type {?} */
                 var roleCategory = RoleCategory.ALL;
                 if (!(searchOptions.userRole === PersonRole.ALL)) {
-                    roleCategory = searchOptions.userRole === PersonRole.CASEWORKER ? RoleCategory.CASEWORKER : RoleCategory.ADMIN;
+                    if (searchOptions.userRole === PersonRole.CASEWORKER) {
+                        roleCategory = RoleCategory.CASEWORKER;
+                    }
+                    else if (searchOptions.userRole === PersonRole.ADMIN) {
+                        roleCategory = RoleCategory.ADMIN;
+                    }
+                    else if (searchOptions.userRole === PersonRole.CTSC) {
+                        roleCategory = RoleCategory.CTSC;
+                    }
                 }
                 /** @type {?} */
                 var searchTerm = searchOptions && searchOptions.searchTerm ? searchOptions.searchTerm.toLowerCase() : '';
@@ -5016,13 +5506,13 @@
             function (searchTerm) {
                 var _this = this;
                 /** @type {?} */
-                var findJudicialPeople = this.findPersonService.find({ searchTerm: searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser });
+                var findJudicialOrCTSCPeople = this.findPersonService.find({ searchTerm: searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser });
                 /** @type {?} */
-                var findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({ searchTerm: searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser });
+                var findCaseworkersOrAdminsOrCtsc = this.findPersonService.findCaseworkers({ searchTerm: searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser });
                 if (searchTerm && searchTerm.length > this.minSearchCharacters) {
                     switch (this.domain) {
                         case PersonRole.JUDICIAL: {
-                            return findJudicialPeople.pipe(operators.map(( /**
+                            return findJudicialOrCTSCPeople.pipe(operators.map(( /**
                              * @param {?} persons
                              * @return {?}
                              */function (persons) {
@@ -5044,14 +5534,15 @@
                             })));
                         }
                         case PersonRole.ALL: {
-                            return rxjs.zip(findJudicialPeople, findCaseworkersOrAdmins).pipe(operators.map(( /**
+                            return rxjs.zip(findJudicialOrCTSCPeople, findCaseworkersOrAdminsOrCtsc).pipe(operators.map(( /**
                              * @param {?} separatePeople
                              * @return {?}
                              */function (separatePeople) { return separatePeople[0].concat(separatePeople[1]); })));
                         }
+                        case PersonRole.CTSC:
                         case PersonRole.CASEWORKER:
                         case PersonRole.ADMIN: {
-                            return findCaseworkersOrAdmins;
+                            return findCaseworkersOrAdminsOrCtsc;
                         }
                         default: {
                             return rxjs.of([]);
@@ -5073,67 +5564,471 @@
                 this.findPersonControl.setValue(this.getDisplayName(selectedPerson), { emitEvent: false, onlySelf: true });
             };
         /**
-         * @param {?} selectedPerson
+         * @param {?} selectedPerson
+         * @return {?}
+         */
+        FindPersonComponent.prototype.getDisplayName = /**
+         * @param {?} selectedPerson
+         * @return {?}
+         */
+            function (selectedPerson) {
+                if (!selectedPerson) {
+                    return '';
+                }
+                if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.fullName) {
+                    return selectedPerson.fullName + " (" + selectedPerson.email + ")";
+                }
+                return selectedPerson.email ? selectedPerson.name + " (" + selectedPerson.email + ")" : selectedPerson.name;
+            };
+        /**
+         * @return {?}
+         */
+        FindPersonComponent.prototype.onInput = /**
+         * @return {?}
+         */
+            function () {
+                this.personFieldChanged.emit();
+            };
+        FindPersonComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-find-person',
+                        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]=\"findPersonGroup\"\n     [ngClass]=\"{'form-group-error': findPersonGroup.get('findPersonControl').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=\"findPersonGroup && findPersonGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findPersonGroup.errors.error ? findPersonGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectPerson{{idValue}}\" type=\"text\" aria-label=\"select a person\"\n           formControlName=\"findPersonControl\"\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        {{getDisplayName(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: [".mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}.hide-autocomplete{display:none}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        FindPersonComponent.ctorParameters = function () {
+            return [
+                { type: FindAPersonService },
+                { type: i0.ChangeDetectorRef }
+            ];
+        };
+        FindPersonComponent.propDecorators = {
+            personSelected: [{ type: i0.Output }],
+            personFieldChanged: [{ type: i0.Output }],
+            title: [{ type: i0.Input }],
+            boldTitle: [{ type: i0.Input }],
+            subTitle: [{ type: i0.Input }],
+            domain: [{ type: i0.Input }],
+            findPersonGroup: [{ type: i0.Input }],
+            selectedPerson: [{ 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 }],
+            selectedPersons: [{ type: i0.Input }],
+            errorMessage: [{ type: i0.Input }],
+            idValue: [{ type: i0.Input }],
+            services: [{ type: i0.Input }],
+            disabled: [{ type: i0.Input }]
+        };
+        return FindPersonComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/find-service/find-service.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var FindServiceComponent = /** @class */ (function () {
+        function FindServiceComponent() {
+            this.services = [];
+            this.selectedServices = [];
+            this.enableAddServiceButton = true;
+            this.disabled = false;
+            this.serviceFieldChanged = new i0.EventEmitter();
+            this.tempSelectedService = null;
+        }
+        /**
+         * @return {?}
+         */
+        FindServiceComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                this.selectedServices = this.selectedServices !== null ? this.selectedServices.filter(( /**
+                 * @param {?} service
+                 * @return {?}
+                 */function (service) { return service.key; })) : [];
+                this.SortAnOptions();
+            };
+        /**
+         * @return {?}
+         */
+        FindServiceComponent.prototype.addService = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                if (this.tempSelectedService === null) {
+                    return;
+                }
+                this.selectedServices = __spread(this.selectedServices, [this.tempSelectedService]);
+                this.addSelectedServicesToForm([this.tempSelectedService]);
+                this.services = this.services.filter(( /**
+                 * @param {?} s
+                 * @return {?}
+                 */function (s) { return s.key !== _this.tempSelectedService.key; }));
+                this.tempSelectedService = null;
+                this.serviceFieldChanged.emit();
+            };
+        /**
+         * @param {?} service
+         * @return {?}
+         */
+        FindServiceComponent.prototype.removeService = /**
+         * @param {?} service
+         * @return {?}
+         */
+            function (service) {
+                if (service.key) {
+                    this.selectedServices = this.selectedServices !== null ? this.selectedServices.filter(( /**
+                     * @param {?} selectedService
+                     * @return {?}
+                     */function (selectedService) { return selectedService.key !== service.key; })) : [];
+                    /** @type {?} */
+                    var formArray = ( /** @type {?} */(this.form.get(this.field.name)));
+                    /** @type {?} */
+                    var index = (formArray.value).findIndex(( /**
+                     * @param {?} selectedService
+                     * @return {?}
+                     */function (selectedService) { return selectedService.key === service.key; }));
+                    if (index > -1) {
+                        formArray.removeAt(index);
+                        this.services.splice(index, 0, service);
+                        this.SortAnOptions();
+                    }
+                    this.serviceFieldChanged.emit();
+                }
+            };
+        /**
+         * @param {?} service
+         * @return {?}
+         */
+        FindServiceComponent.prototype.onServiceSelected = /**
+         * @param {?} service
+         * @return {?}
+         */
+            function (service) {
+                if (!service) {
+                    this.tempSelectedService = null;
+                    return;
+                }
+                if (this.field.maxSelected === 1) {
+                    this.removeSelectedValues();
+                    this.addSelectedServicesToForm([service]);
+                }
+                else {
+                    if (!this.selectedServices.find(( /**
+                     * @param {?} s
+                     * @return {?}
+                     */function (s) { return s.key === service.key; }))) {
+                        if (service.key) {
+                            this.tempSelectedService = service;
+                        }
+                    }
+                }
+            };
+        /**
+         * @private
+         * @return {?}
+         */
+        FindServiceComponent.prototype.removeSelectedValues = /**
+         * @private
+         * @return {?}
+         */
+            function () {
+                /** @type {?} */
+                var formArray = ( /** @type {?} */(this.form.get(this.field.name)));
+                for (var i = 0; i < formArray.length; i++) {
+                    formArray.removeAt(i);
+                }
+                this.selectedServices = [];
+            };
+        /**
+         * @private
+         * @param {?} services
+         * @return {?}
+         */
+        FindServiceComponent.prototype.addSelectedServicesToForm = /**
+         * @private
+         * @param {?} services
+         * @return {?}
+         */
+            function (services) {
+                var e_1, _a;
+                /** @type {?} */
+                var formArray = ( /** @type {?} */(this.form.get(this.field.name)));
+                try {
+                    for (var services_1 = __values(services), services_1_1 = services_1.next(); !services_1_1.done; services_1_1 = services_1.next()) {
+                        var service = services_1_1.value;
+                        formArray.push(new forms.FormControl(service));
+                    }
+                }
+                catch (e_1_1) {
+                    e_1 = { error: e_1_1 };
+                }
+                finally {
+                    try {
+                        if (services_1_1 && !services_1_1.done && (_a = services_1.return))
+                            _a.call(services_1);
+                    }
+                    finally {
+                        if (e_1)
+                            throw e_1.error;
+                    }
+                }
+            };
+        /**
+         * @private
+         * @return {?}
+         */
+        FindServiceComponent.prototype.SortAnOptions = /**
+         * @private
+         * @return {?}
+         */
+            function () {
+                return this.services.sort(( /**
+                 * @param {?} a
+                 * @param {?} b
+                 * @return {?}
+                 */function (a, b) {
+                    return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : (b.label.toLowerCase() > a.label.toLowerCase() ? -1 : 0);
+                }));
+            };
+        FindServiceComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-find-service',
+                        template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\" [services]=\"services\"\n        (serviceChanged)=\"onServiceSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeService(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label }}\n      </a>\n    </li>\n  </ul>\n</div>",
+                        styles: ["#add-service{background-color:#ddd}.search-service__input-container{display:flex}.search-service__input{flex:1 0 auto}"]
+                    }] }
+        ];
+        FindServiceComponent.propDecorators = {
+            field: [{ type: i0.Input }],
+            fields: [{ type: i0.Input }],
+            serviceTitle: [{ type: i0.Input }],
+            form: [{ type: i0.Input }],
+            services: [{ type: i0.Input }],
+            selectedServices: [{ type: i0.Input }],
+            enableAddServiceButton: [{ type: i0.Input }],
+            disabled: [{ type: i0.Input }],
+            serviceFieldChanged: [{ type: i0.Output }]
+        };
+        return FindServiceComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/services/task-name/task-name.service.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var TaskNameService = /** @class */ (function () {
+        function TaskNameService(http, sessionStorageService) {
+            this.http = http;
+            this.sessionStorageService = sessionStorageService;
+        }
+        /**
+         * @return Observable<any[]>: Array of taskName in Observable
+         */
+        /**
+         * @return {?} Observable<any[]>: Array of taskName in Observable
+         */
+        TaskNameService.prototype.getTaskName = /**
+         * @return {?} Observable<any[]>: Array of taskName in Observable
+         */
+            function () {
+                var _this = this;
+                if (this.sessionStorageService.getItem(TaskNameService.taskNamesKey)) {
+                    /** @type {?} */
+                    var taskNames = JSON.parse(this.sessionStorageService.getItem(TaskNameService.taskNamesKey));
+                    return rxjs.of(( /** @type {?} */(taskNames)));
+                }
+                return this.http.get("/workallocation/taskNames").pipe(operators.tap(( /**
+                 * @param {?} taskNames
+                 * @return {?}
+                 */function (taskNames) { return _this.sessionStorageService.setItem(TaskNameService.taskNamesKey, JSON.stringify(taskNames)); })));
+            };
+        TaskNameService.taskNamesKey = 'taskNames';
+        TaskNameService.decorators = [
+            { type: i0.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        TaskNameService.ctorParameters = function () {
+            return [
+                { type: i1.HttpClient },
+                { type: SessionStorageService }
+            ];
+        };
+        /** @nocollapse */ TaskNameService.ngInjectableDef = i0.defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(i0.inject(i1.HttpClient), i0.inject(SessionStorageService)); }, token: TaskNameService, providedIn: "root" });
+        return TaskNameService;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/find-task-name/find-task-name.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var FindTaskNameComponent = /** @class */ (function () {
+        function FindTaskNameComponent(cd, taskService) {
+            this.cd = cd;
+            this.taskService = taskService;
+            this.taskNameSelected = new i0.EventEmitter();
+            this.taskNameFieldChanged = new i0.EventEmitter();
+            this.boldTitle = 'Find the task name';
+            this.subTitle = 'Type the name of the task name and select them.';
+            this.domain = PersonRole.ALL;
+            this.findTaskNameGroup = new forms.FormGroup({});
+            this.submitted = true;
+            this.userIncluded = false;
+            this.placeholderContent = '';
+            this.isNoResultsShown = true;
+            this.showUpdatedColor = false;
+            this.selectedTaskNames = [];
+            this.errorMessage = 'You must select a name';
+            this.idValue = '';
+            this.services = ['IA'];
+            this.disabled = null;
+            this.showAutocomplete = false;
+            this.filteredOptions = [];
+            this.minSearchCharacters = 1;
+            this.searchTerm = '';
+        }
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.ngOnDestroy = /**
+         * @return {?}
+         */
+            function () {
+                if (this.sub) {
+                    this.sub.unsubscribe();
+                }
+            };
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.ngOnChanges = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                this.findTaskNameControl = new forms.FormControl(this.selectedTaskName);
+                this.findTaskNameGroup.addControl('findTaskNameControl', this.findTaskNameControl);
+                this.sub = this.findTaskNameControl.valueChanges
+                    .pipe(operators.tap(( /**
+             * @return {?}
+             */function () { return _this.showAutocomplete = false; })), operators.tap(( /**
+                 * @return {?}
+                 */function () { return _this.filteredOptions = []; })), operators.tap(( /**
+                 * @param {?} term
+                 * @return {?}
+                 */function (term) { return _this.searchTerm = term; })), operators.debounceTime(300), operators.tap(( /**
+                 * @param {?} searchTerm
+                 * @return {?}
+                 */function (searchTerm) {
+                    if (!searchTerm) {
+                        _this.taskNameSelected.emit('');
+                    }
+                    return searchTerm;
+                })), 
+                // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit('null') : void 0),
+                operators.filter(( /**
+                 * @param {?} searchTerm
+                 * @return {?}
+                 */function (searchTerm) { return searchTerm && searchTerm.length >= _this.minSearchCharacters; })), operators.mergeMap(( /**
+                 * @return {?}
+                 */function () { return _this.getTaskName(); }))).subscribe(( /**
+                 * @param {?} taskNameModel
+                 * @return {?}
+                 */function (taskNameModel) {
+                    _this.filteredOptions = taskNameModel.map(( /**
+                     * @param {?} task
+                     * @return {?}
+                     */function (task) { return task.taskName; }));
+                    if (_this.searchTerm) {
+                        _this.filteredOptions = _this.filteredOptions.filter(( /**
+                         * @param {?} taskName
+                         * @return {?}
+                         */function (taskName) { return taskName.toLocaleLowerCase().includes(_this.searchTerm.toLocaleLowerCase()); })).map(( /**
+                         * @param {?} taskName
+                         * @return {?}
+                         */function (taskName) { return taskName; }));
+                    }
+                    _this.cd.detectChanges();
+                }));
+            };
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.getTaskName = /**
+         * @return {?}
+         */
+            function () {
+                return this.taskService.getTaskName();
+            };
+        /**
+         * @param {?} selectedTaskName
          * @return {?}
          */
-        FindPersonComponent.prototype.getDisplayName = /**
-         * @param {?} selectedPerson
+        FindTaskNameComponent.prototype.onSelectionChange = /**
+         * @param {?} selectedTaskName
          * @return {?}
          */
-            function (selectedPerson) {
-                if (!selectedPerson) {
-                    return '';
-                }
-                if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.fullName) {
-                    return selectedPerson.fullName + " (" + selectedPerson.email + ")";
+            function (selectedTaskName) {
+                if (selectedTaskName) {
+                    this.taskNameSelected.emit(selectedTaskName);
+                    this.findTaskNameControl.setValue(selectedTaskName);
                 }
-                return selectedPerson.email ? selectedPerson.name + " (" + selectedPerson.email + ")" : selectedPerson.name;
             };
         /**
          * @return {?}
          */
-        FindPersonComponent.prototype.onInput = /**
+        FindTaskNameComponent.prototype.onInput = /**
          * @return {?}
          */
             function () {
-                this.personFieldChanged.emit();
+                this.taskNameFieldChanged.emit();
             };
-        FindPersonComponent.decorators = [
+        FindTaskNameComponent.decorators = [
             { type: i0.Component, args: [{
-                        selector: 'xuilib-find-person',
-                        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]=\"findPersonGroup\"\n     [ngClass]=\"{'form-group-error': findPersonGroup.get('findPersonControl').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=\"findPersonGroup && findPersonGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findPersonGroup.errors.error ? findPersonGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectPerson{{idValue}}\" type=\"text\" aria-label=\"select a person\"\n           formControlName=\"findPersonControl\"\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        {{getDisplayName(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: [".mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}.hide-autocomplete{display:none}"]
+                        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 */
-        FindPersonComponent.ctorParameters = function () {
+        FindTaskNameComponent.ctorParameters = function () {
             return [
-                { type: FindAPersonService },
-                { type: i0.ChangeDetectorRef }
+                { type: i0.ChangeDetectorRef },
+                { type: TaskNameService }
             ];
         };
-        FindPersonComponent.propDecorators = {
-            personSelected: [{ type: i0.Output }],
-            personFieldChanged: [{ type: i0.Output }],
+        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 }],
-            findPersonGroup: [{ type: i0.Input }],
-            selectedPerson: [{ 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 }],
-            selectedPersons: [{ type: i0.Input }],
+            selectedTaskNames: [{ type: i0.Input }],
             errorMessage: [{ type: i0.Input }],
             idValue: [{ type: i0.Input }],
             services: [{ type: i0.Input }],
             disabled: [{ type: i0.Input }]
         };
-        return FindPersonComponent;
+        return FindTaskNameComponent;
     }());
 
     /**
@@ -5375,6 +6270,46 @@
         return SearchJudicialsComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/search-service/search-service.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var SearchServiceComponent = /** @class */ (function () {
+        function SearchServiceComponent() {
+            this.services = [];
+            this.serviceChanged = new i0.EventEmitter();
+        }
+        /**
+         * @param {?} key
+         * @return {?}
+         */
+        SearchServiceComponent.prototype.onSelectionChanged = /**
+         * @param {?} key
+         * @return {?}
+         */
+            function (key) {
+                /** @type {?} */
+                var selectedService = this.services.find(( /**
+                 * @param {?} s
+                 * @return {?}
+                 */function (s) { return s.key === key; }));
+                this.serviceChanged.emit(selectedService);
+            };
+        SearchServiceComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'exui-search-service',
+                        template: "<div class=\"govuk-form-group\">\n  <select id=\"serviceSearch__select\" class=\"govuk-select\" name=\"serviceSearch__select\"\n    (change)=\"onSelectionChanged($event.target.value)\">\n    <option [value]=\"null\">All</option>\n    <option *ngFor=\"let service of services\" [value]=\"service.key\">\n      {{ service.label }}\n    </option>\n  </select>\n</div>",
+                        styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{width:calc(100% - 4px);display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+                    }] }
+        ];
+        SearchServiceComponent.propDecorators = {
+            services: [{ type: i0.Input }],
+            serviceChanged: [{ type: i0.Output }]
+        };
+        return SearchServiceComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/search-venue/search-venue.component.ts
@@ -5658,6 +6593,57 @@
         return GovUkCheckboxComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/gov-ui/util/helpers/html-templates.helper.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /*
+     * Helper Class
+     * Used for dynamic templates manipulation
+     * */
+    var /*
+     * Helper Class
+     * Used for dynamic templates manipulation
+     * */ HtmlTemplatesHelper = /** @class */ (function () {
+        function HtmlTemplatesHelper() {
+        }
+        /*
+        * Sets described by string depending if
+        * there is an error, error and hit or nothing
+        * */
+        /*
+          * Sets described by string depending if
+          * there is an error, error and hit or nothing
+          * */
+        /**
+         * @param {?} errorMessage
+         * @param {?} config
+         * @return {?}
+         */
+        HtmlTemplatesHelper.setDescribedBy = /*
+          * Sets described by string depending if
+          * there is an error, error and hit or nothing
+          * */
+            /**
+             * @param {?} errorMessage
+             * @param {?} config
+             * @return {?}
+             */
+            function (errorMessage, config) {
+                if (!errorMessage) {
+                    return config.hint ? config.id + "-hint" : null;
+                }
+                else if (errorMessage && errorMessage.isInvalid) {
+                    return config.hint ? config.id + "-hint " + config.id + "-error" : config.id + "-error";
+                }
+                else {
+                    return config.hint ? config.id + "-hint" : null;
+                }
+            };
+        return HtmlTemplatesHelper;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/gov-ui/components/gov-uk-checkboxes/gov-uk-checkboxes.component.ts
@@ -5673,15 +6659,99 @@
     var GovUkCheckboxesComponent = /** @class */ (function () {
         function GovUkCheckboxesComponent() {
         }
+        /**
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                this.columns = this.setColumns();
+            };
+        /**
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.setDescribedBy = /**
+         * @return {?}
+         */
+            function () {
+                return HtmlTemplatesHelper.setDescribedBy(this.errorMessage, this.config);
+            };
+        /**
+         * @param {?} checked
+         * @param {?} value
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.onChecked = /**
+         * @param {?} checked
+         * @param {?} value
+         * @return {?}
+         */
+            function (checked, value) {
+                /** @type {?} */
+                var formControl = this.group.get(this.config.name);
+                /** @type {?} */
+                var array = formControl.value ? formControl.value : [];
+                if (!checked) {
+                    /** @type {?} */
+                    var modifiedArray = array.filter(( /**
+                     * @param {?} item
+                     * @return {?}
+                     */function (item) { return item !== value; }));
+                    formControl.setValue(modifiedArray);
+                }
+                else {
+                    formControl.setValue(__spread(array, [value]));
+                }
+            };
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.isChecked = /**
+         * @param {?} value
+         * @return {?}
+         */
+            function (value) {
+                /** @type {?} */
+                var formControl = this.group.get(this.config.name);
+                return formControl.value && formControl.value.includes(value);
+            };
+        /**
+         * @private
+         * @return {?}
+         */
+        GovUkCheckboxesComponent.prototype.setColumns = /**
+         * @private
+         * @return {?}
+         */
+            function () {
+                if (this.config.rows && this.config.rows > 1) {
+                    /** @type {?} */
+                    var array = [];
+                    for (var i = 0; i < this.items.length; i += this.config.rows) {
+                        /** @type {?} */
+                        var arrayChunk = this.items.slice(i, i + this.config.rows);
+                        array.push(arrayChunk);
+                    }
+                    return array;
+                }
+                else {
+                    return [this.items];
+                }
+            };
         GovUkCheckboxesComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-uk-checkboxes',
-                        template: "<xuilib-gov-uk-form-group-wrapper\n[error]=\"errors\"\n[config]=\"options.config\"\n[group]=\"options.key\">\n<div class=\"govuk-checkboxes\">\n  <xuilib-gov-checkbox *ngFor=\"let item of options.items\"\n    [group]=\"item.group\"\n    [config]=\"item.config\">\n  </xuilib-gov-checkbox>\n</div>\n</xuilib-gov-uk-form-group-wrapper>"
+                        template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n     [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n  <xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n  <span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n    {{config.hint}}\n  </span>\n\n  <xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n  <div class=\"govuk-checkboxes govuk-checkboxes--small govuk-checkboxes-multi-column\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes-multi-column__single\" *ngFor=\"let columnItems of columns\">\n      <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of columnItems\">\n        <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n               [id]=\"item.id\" [name]=\"item.id\" [checked]=\"isChecked(item.value)\" [value]=\"item.value\"\n               [attr.aria-describedby]=\"setDescribedBy()\"\n               (change)=\"onChecked($event.target.checked, item.value)\"\n        >\n        <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.id\">\n          {{ item.label }}\n        </label>\n        <div *ngIf=\"item.hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n          {{ item.hint }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                        styles: [".govuk-checkboxes-multi-column{display:flex;flex-wrap:wrap;margin-left:-20px;margin-right:-20px}.govuk-checkboxes-multi-column__single{padding-left:20px;padding-right:20px}"]
                     }] }
         ];
         GovUkCheckboxesComponent.propDecorators = {
-            options: [{ type: i0.Input }],
-            errors: [{ type: i0.Input }]
+            group: [{ type: i0.Input }],
+            config: [{ type: i0.Input }],
+            items: [{ type: i0.Input }],
+            errorMessage: [{ type: i0.Input }]
         };
         return GovUkCheckboxesComponent;
     }());
@@ -5831,57 +6901,6 @@
         return GovUkErrorMessageComponent;
     }());
 
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/gov-ui/util/helpers/html-templates.helper.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /*
-     * Helper Class
-     * Used for dynamic templates manipulation
-     * */
-    var /*
-     * Helper Class
-     * Used for dynamic templates manipulation
-     * */ HtmlTemplatesHelper = /** @class */ (function () {
-        function HtmlTemplatesHelper() {
-        }
-        /*
-        * Sets described by string depending if
-        * there is an error, error and hit or nothing
-        * */
-        /*
-          * Sets described by string depending if
-          * there is an error, error and hit or nothing
-          * */
-        /**
-         * @param {?} errorMessage
-         * @param {?} config
-         * @return {?}
-         */
-        HtmlTemplatesHelper.setDescribedBy = /*
-          * Sets described by string depending if
-          * there is an error, error and hit or nothing
-          * */
-            /**
-             * @param {?} errorMessage
-             * @param {?} config
-             * @return {?}
-             */
-            function (errorMessage, config) {
-                if (!errorMessage) {
-                    return config.hint ? config.id + "-hint" : null;
-                }
-                else if (errorMessage && errorMessage.isInvalid) {
-                    return config.hint ? config.id + "-hint " + config.id + "-error" : config.id + "-error";
-                }
-                else {
-                    return config.hint ? config.id + "-hint" : null;
-                }
-            };
-        return HtmlTemplatesHelper;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/gov-ui/components/gov-uk-fieldset/gov-uk-fieldset.component.ts
@@ -6029,7 +7048,7 @@
              * @return {?}
              */
             function () {
-                this.config.classes = 'govuk-label--m';
+                this.config.classes = typeof (this.config.classes) === 'string' ? this.config.classes : 'govuk-label govuk-label--m';
             };
         /**
          * @return {?}
@@ -6043,7 +7062,7 @@
         GovUkInputComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-uk-input',
-                        template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n  {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n       [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n       [id]=\"config.id\"\n       [name]=\"config.name\"\n       [type]=\"config.type\"\n       [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n       [formControlName]=\"config.name\"\n       [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
+                        template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n  {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n       [class.govuk-!-width-full]=\"config.fullWidth\"\n       [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n       [id]=\"config.id\"\n       [name]=\"config.name\"\n       [type]=\"config.type\"\n       [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n       [formControlName]=\"config.name\"\n       [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
                         styles: [".gov-uk-input input:disabled{background:#b1b4b6}"]
                     }] }
         ];
@@ -6074,7 +7093,8 @@
         GovUkLabelComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-label',
-                        template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n  <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n         [for]=\"config.id\" [innerHTML]=\"config.label\">\n  </label>\n</h1>\n<ng-template #noHeading>\n  <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n         [for]=\"config.id\" [innerHTML]=\"config.label\">\n  </label>\n</ng-template>"
+                        template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n  <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n    <span>{{ config.label }}</span>\n    <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n  </label>\n</h1>\n<ng-template #noHeading>\n  <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n    <span>{{ config.label }}</span>\n    <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n  </label>\n</ng-template>\n",
+                        styles: [".govuk-label{display:flex;align-items:center;flex-wrap:wrap}.govuk-label__optional{font-weight:400;font-size:16px;display:inline-block;margin-left:.75rem}"]
                     }] }
         ];
         /** @nocollapse */
@@ -6193,7 +7213,7 @@
         GovUkSelectComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-select',
-                        template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\" [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n<option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>"
+                        template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\"\n        [class.govuk-!-width-full]=\"config.fullWidth\"\n        [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n  <option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -6295,27 +7315,25 @@
      * Generated from: lib/gov-ui/components/hmcts-banner/hmcts-banner.component.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /*
-    * Hmcts Banner
-    * Responsible for displaying prominent message and related actions
-    * @prop message to display
-    * @prop type
-    * */
     var HmctsBannerComponent = /** @class */ (function () {
         function HmctsBannerComponent() {
+            this.title = '';
+            this.showMessageIcon = false;
+            this.messageBoldText = false;
         }
         HmctsBannerComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-hmcts-banner',
-                        template: "<div class=\"hmcts-banner hmcts-banner--{{type}}\">\n  <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n      <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" /></svg>\n  <div class=\"hmcts-banner__message\">\n      <span class=\"hmcts-banner__assistive\">{{type}}</span>\n      {{message}}\n  </div>\n</div>",
-                        styles: [":host{display:block;width:100%}"]
+                        template: "<ng-container *ngIf=\"message && type\">\n  <div *ngIf=\"title\"\n    class=\"hmcts-banner-title hmcts-banner-title--{{ type }}\">\n    {{ title }}\n  </div>\n  <div class=\"hmcts-banner hmcts-banner--{{ type }}\">\n    <ng-container *ngIf=\"showMessageIcon\">\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'warning'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--warning\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"></path>\n          </svg>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'success'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--success\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z\"></path>\n          </svg>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'information'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--information\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n  C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n          </svg>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"hmcts-banner__message\" [class.hmcts-banner__message--bold]=\"messageBoldText\">\n      <span class=\"hmcts-banner__assistive\">{{ type }}</span>\n      <span class=\"hmcts-banner__message-text govuk-!-font-weight-bold\">{{ message }}</span>\n    </div>\n  </div>\n</ng-container>\n",
+                        styles: [".hmcts-banner-title{color:#fff;background-color:#1d70b8;font-weight:700;padding:10px 15px 5px}.hmcts-banner-title--success{background-color:#00703c}.hmcts-banner-title--warning{background-color:#d4351c}.hmcts-banner__message--bold{font-weight:700}"]
                     }] }
         ];
-        /** @nocollapse */
-        HmctsBannerComponent.ctorParameters = function () { return []; };
         HmctsBannerComponent.propDecorators = {
+            message: [{ type: i0.Input }],
             type: [{ type: i0.Input }],
-            message: [{ type: i0.Input }]
+            title: [{ type: i0.Input }],
+            showMessageIcon: [{ type: i0.Input }],
+            messageBoldText: [{ type: i0.Input }]
         };
         return HmctsBannerComponent;
     }());
@@ -6495,7 +7513,7 @@
         HmctsMainWrapperComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-hmcts-main-wrapper',
-                        template: "<a *ngIf=\"hasBackLink\" [routerLink]=\"backLink\" (click)=\"onGoBack()\" class=\"govuk-back-link\">Back</a>\n<main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <xuilib-hmcts-error-summary\n        *ngIf=\"summaryErrors && !summaryErrors.isFromValid\"\n        [errorMessages]=\"summaryErrors.items\"\n        [header]=\"summaryErrors.header\"\n        [showWarningMessage]=\"showWarningMessage\">\n      </xuilib-hmcts-error-summary>\n      <xuilib-hmcts-banner *ngIf=\"bannerData\" [message]=\"bannerData.message\" [type]=\"bannerData.type\"></xuilib-hmcts-banner>\n      <h1 *ngIf=\"title\" class=\"govuk-heading-xl\">{{title}}</h1>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"govuk-grid-column-one-third\" *ngIf=\"actionButtons?.length > 0\">\n      <div class=\"hmcts-page-heading__actions-wrapper\">\n        <a\n          *ngFor=\"let actionButton of actionButtons\"\n          (click)=\"actionButton.action()\"\n          role=\"button\"\n          draggable=\"false\"\n          class=\"govuk-button {{ actionButton.class }}\"\n        >{{ actionButton.name }}</a>\n      </div>\n    </div>\n  </div>\n</main>\n"
+                        template: "<a *ngIf=\"hasBackLink\" [routerLink]=\"backLink\" (click)=\"onGoBack()\" class=\"govuk-back-link\">Back</a>\n<main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <xuilib-hmcts-error-summary\n        *ngIf=\"summaryErrors && !summaryErrors.isFromValid\"\n        [errorMessages]=\"summaryErrors.items\"\n        [header]=\"summaryErrors.header\"\n        [showWarningMessage]=\"showWarningMessage\">\n      </xuilib-hmcts-error-summary>\n      <xuilib-hmcts-banner *ngIf=\"bannerData\"\n                           [type]=\"bannerData.type\"\n                           [message]=\"bannerData.message\"\n      ></xuilib-hmcts-banner>\n      <h1 *ngIf=\"title\" class=\"govuk-heading-xl\">{{title}}</h1>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"govuk-grid-column-one-third\" *ngIf=\"actionButtons?.length > 0\">\n      <div class=\"hmcts-page-heading__actions-wrapper\">\n        <a\n          *ngFor=\"let actionButton of actionButtons\"\n          (click)=\"actionButton.action()\"\n          role=\"button\"\n          draggable=\"false\"\n          class=\"govuk-button {{ actionButton.class }}\"\n        >{{ actionButton.name }}</a>\n      </div>\n    </div>\n  </div>\n</main>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -6592,7 +7610,8 @@
         HmctsSubNavigationComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-hmcts-sub-navigation',
-                        template: "<nav class=\"hmcts-sub-navigation\" attr.aria-label=\"{{label}}\" role=\"navigation\" *ngIf=\"items\">\n    <ul class=\"hmcts-sub-navigation__list\">\n        <li class=\"hmcts-sub-navigation__item\" *ngFor=\"let item of items\">\n            <a data-selector=\"sub-nav-link\" class=\"hmcts-sub-navigation__link\" [routerLink]=\"item.href\"\n               [attr.aria-current]=\"item.active ? 'page' : null\">\n                {{item.text}}\n            </a>\n        </li>\n    </ul>\n</nav>\n"
+                        template: "<nav class=\"hmcts-sub-navigation\" attr.aria-label=\"{{label}}\" role=\"navigation\" *ngIf=\"items\">\n    <ul class=\"hmcts-sub-navigation__list\">\n        <li class=\"hmcts-sub-navigation__item\" *ngFor=\"let item of items\">\n            <a data-selector=\"sub-nav-link\" class=\"hmcts-sub-navigation__link\" [routerLink]=\"item.href\"\n               [attr.aria-current]=\"item.active ? 'page' : null\">\n                {{item.text}}\n\n                <span *ngIf=\"item.roundel && item.roundel > 0 \" class=\"xui-alert-link__number\"> {{item.roundel}} </span>\n            </a>\n        </li>\n    </ul>\n</nav>\n",
+                        styles: [".xui-alert-link__number{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:.875rem;line-height:1.78571;border-radius:50%;background-color:#1d70b8;color:#fff;font-weight:700;width:25px;height:25px;margin-left:5px;text-align:center;display:inline-block;text-decoration:none}"]
                     }] }
         ];
         HmctsSubNavigationComponent.propDecorators = {
@@ -6647,6 +7666,33 @@
         return RemoveHostDirective;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/pipes/capitalize.pipe.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CapitalizePipe = /** @class */ (function () {
+        function CapitalizePipe() {
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        CapitalizePipe.prototype.transform = /**
+         * @param {?} value
+         * @return {?}
+         */
+            function (value) {
+                /** @type {?} */
+                var lowerCaseString = value.toLowerCase();
+                return lowerCaseString.charAt(0).toUpperCase() + lowerCaseString.slice(1);
+            };
+        CapitalizePipe.decorators = [
+            { type: i0.Pipe, args: [{ name: 'capitalize' },] }
+        ];
+        return CapitalizePipe;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/exui-common-lib.module.ts
@@ -6685,7 +7731,10 @@
         FindPersonComponent,
         SearchJudicialsComponent,
         FindLocationComponent,
+        FindTaskNameComponent,
         SearchLocationComponent,
+        FindServiceComponent,
+        SearchServiceComponent,
         SearchVenueComponent,
         PaginationComponent
     ];
@@ -6714,13 +7763,17 @@
         GovUkFileUploadComponent,
         RemoveHostDirective
     ];
+    /** @type {?} */
+    var pipes = [
+        CapitalizePipe
+    ];
     var ɵ0 = windowProvider;
     var ExuiCommonLibModule = /** @class */ (function () {
         function ExuiCommonLibModule() {
         }
         ExuiCommonLibModule.decorators = [
             { type: i0.NgModule, args: [{
-                        declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS),
+                        declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, pipes),
                         imports: [
                             i4.CommonModule,
                             forms.FormsModule,
@@ -6736,7 +7789,7 @@
                         ],
                         exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, [
                             ngxPagination.PaginatePipe
-                        ])
+                        ], pipes)
                     },] }
         ];
         return ExuiCommonLibModule;
@@ -7544,19 +8597,18 @@
      */
     var RoleService = /** @class */ (function () {
         function RoleService() {
-            this.pRoles = [];
+            this.pRoles = new rxjs.BehaviorSubject(null);
+            this.roles$ = this.pRoles.asObservable().pipe(operators.skipWhile(( /**
+             * @param {?} item
+             * @return {?}
+             */function (item) { return item === null; })));
         }
         Object.defineProperty(RoleService.prototype, "roles", {
-            get: /**
-             * @return {?}
-             */ function () {
-                return this.pRoles;
-            },
             set: /**
              * @param {?} roles
              * @return {?}
              */ function (roles) {
-                this.pRoles = roles;
+                this.pRoles.next(roles);
             },
             enumerable: true,
             configurable: true
@@ -7597,23 +8649,28 @@
          */
             function (route) {
                 var _this = this;
-                /** @type {?} */
-                var roles = (( /** @type {?} */(route.data.needsRole)));
-                /** @type {?} */
-                var check = ( /**
-                 * @param {?} roleRegEx
+                return this.roleService.roles$.pipe(operators.map(( /**
+                 * @param {?} roles
                  * @return {?}
-                 */function (roleRegEx) {
+                 */function (roles) {
                     /** @type {?} */
-                    var regex = new RegExp(roleRegEx);
-                    return _this.roleService.roles.some(( /**
-                     * @param {?} role
+                    var canActivateRoles = (( /** @type {?} */(route.data.needsRole)));
+                    /** @type {?} */
+                    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: [{
@@ -7778,11 +8835,13 @@
     exports.dateValidator = dateValidator;
     exports.radioGroupValidator = radioGroupValidator;
     exports.HmctsSubNavigationComponent = HmctsSubNavigationComponent;
+    exports.HmctsBannerComponent = HmctsBannerComponent;
     exports.BadgeColour = BadgeColour;
     exports.DateBadgeColour = DateBadgeColour;
     exports.SECONDS_IN_A_DAY = SECONDS_IN_A_DAY;
     exports.AnonymousFeatureUser = AnonymousFeatureUser;
     exports.LoggedInFeatureUser = LoggedInFeatureUser;
+    exports.BookingCheckType = BookingCheckType;
     exports.PersonRole = PersonRole;
     exports.RoleCategory = RoleCategory;
     exports.RadioFilterFieldConfig = RadioFilterFieldConfig;
@@ -7810,15 +8869,18 @@
     exports.ɵa = ExuiPageWrapperComponent;
     exports.ɵbl = FindLocationComponent;
     exports.ɵbh = FindPersonComponent;
+    exports.ɵbq = FindServiceComponent;
+    exports.ɵbo = FindTaskNameComponent;
     exports.ɵbd = GenericFilterComponent;
     exports.ɵk = HmctsSessionDialogComponent;
     exports.ɵo = InviteUserFormComponent;
     exports.ɵn = InviteUserPermissionComponent;
     exports.ɵbc = LoadingSpinnerComponent;
-    exports.ɵbp = PaginationComponent;
+    exports.ɵbt = PaginationComponent;
     exports.ɵbk = SearchJudicialsComponent;
     exports.ɵbm = SearchLocationComponent;
-    exports.ɵbo = SearchVenueComponent;
+    exports.ɵbr = SearchServiceComponent;
+    exports.ɵbs = SearchVenueComponent;
     exports.ɵv = SelectedCaseConfirmComponent;
     exports.ɵt = SelectedCaseListComponent;
     exports.ɵu = SelectedCaseComponent;
@@ -7837,28 +8899,29 @@
     exports.ɵg = FeatureToggleDirective;
     exports.ɵi = LetContext;
     exports.ɵj = LetDirective;
-    exports.ɵbz = GovUkCheckboxComponent;
-    exports.ɵcf = GovUkCheckboxesComponent;
-    exports.ɵce = GovUkDateComponent;
-    exports.ɵcc = GovUkErrorMessageComponent;
-    exports.ɵcd = GovUkFieldsetComponent;
-    exports.ɵck = GovUkFileUploadComponent;
-    exports.ɵca = GovUkFormGroupWrapperComponent;
-    exports.ɵby = GovUkInputComponent;
-    exports.ɵcb = GovUkLabelComponent;
-    exports.ɵcg = GovUkRadioComponent;
-    exports.ɵch = GovUkRadiosComponent;
-    exports.ɵci = GovUkSelectComponent;
-    exports.ɵbx = GovukTableComponent;
-    exports.ɵcj = GovUkTextareaComponent;
-    exports.ɵbw = HmctsBannerComponent;
-    exports.ɵbu = HmctsErrorSummaryComponent;
-    exports.ɵbq = HmctsIdentityBarComponent;
-    exports.ɵbv = HmctsMainWrapperComponent;
-    exports.ɵbr = HmctsPaginationComponent;
-    exports.ɵbt = HmctsPrimaryNavigationComponent;
-    exports.ɵbs = HmctsSubNavigationComponent;
-    exports.ɵcl = RemoveHostDirective;
+    exports.ɵcd = GovUkCheckboxComponent;
+    exports.ɵcj = GovUkCheckboxesComponent;
+    exports.ɵci = GovUkDateComponent;
+    exports.ɵcg = GovUkErrorMessageComponent;
+    exports.ɵch = GovUkFieldsetComponent;
+    exports.ɵco = GovUkFileUploadComponent;
+    exports.ɵce = GovUkFormGroupWrapperComponent;
+    exports.ɵcc = GovUkInputComponent;
+    exports.ɵcf = GovUkLabelComponent;
+    exports.ɵck = GovUkRadioComponent;
+    exports.ɵcl = GovUkRadiosComponent;
+    exports.ɵcm = GovUkSelectComponent;
+    exports.ɵcb = GovukTableComponent;
+    exports.ɵcn = GovUkTextareaComponent;
+    exports.ɵca = HmctsBannerComponent;
+    exports.ɵby = HmctsErrorSummaryComponent;
+    exports.ɵbu = HmctsIdentityBarComponent;
+    exports.ɵbz = HmctsMainWrapperComponent;
+    exports.ɵbv = HmctsPaginationComponent;
+    exports.ɵbx = HmctsPrimaryNavigationComponent;
+    exports.ɵbw = HmctsSubNavigationComponent;
+    exports.ɵcp = RemoveHostDirective;
+    exports.ɵcq = CapitalizePipe;
     exports.ɵr = CaseSharingStateService;
     exports.ɵbg = CookieService;
     exports.ɵh = FeatureToggleService;
@@ -7866,6 +8929,7 @@
     exports.ɵbi = FindAPersonService;
     exports.ɵbn = LocationService;
     exports.ɵbj = SessionStorageService;
+    exports.ɵbp = TaskNameService;
 
     Object.defineProperty(exports, '__esModule', { value: true });