@hmcts/rpx-xui-common-lib 1.8.5-angular-upgrade-r4 → 1.8.7-fix-wrong-services

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/material'), require('@angular/material/autocomplete'), require('ngx-pagination'), require('@angular/common/http'), require('@angular/forms'), require('launchdarkly-js-client-sdk'), require('@angular/common'), require('@angular/platform-browser'), require('@ng-idle/core'), require('@ng-idle/keepalive'), require('@angular/router'), require('@angular/core'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@hmcts/rpx-xui-common-lib', ['exports', '@angular/material', '@angular/material/autocomplete', 'ngx-pagination', '@angular/common/http', '@angular/forms', 'launchdarkly-js-client-sdk', '@angular/common', '@angular/platform-browser', '@ng-idle/core', '@ng-idle/keepalive', '@angular/router', '@angular/core', 'rxjs', 'rxjs/operators'], factory) :
-    (factory((global.hmcts = global.hmcts || {}, global.hmcts['rpx-xui-common-lib'] = {}),global.ng.material,global.ng.material.autocomplete,global.ngxPagination,global.ng.common.http,global.ng.forms,global.LDClient,global.ng.common,global.ng.platformBrowser,global.i1$1,global.i2$1,global.ng.router,global.ng.core,global.rxjs,global.rxjs.operators));
-}(this, (function (exports,material,autocomplete,ngxPagination,i1,forms,LDClient,i4,i2,i1$1,i2$1,i2$2,i0,rxjs,operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/tabs'), require('ngx-pagination'), require('@angular/common/http'), require('@angular/forms'), require('launchdarkly-js-client-sdk'), require('@angular/common'), require('@angular/platform-browser'), require('@ng-idle/core'), require('@ng-idle/keepalive'), require('@angular/router'), require('@angular/core'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@hmcts/rpx-xui-common-lib', ['exports', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/tabs', 'ngx-pagination', '@angular/common/http', '@angular/forms', 'launchdarkly-js-client-sdk', '@angular/common', '@angular/platform-browser', '@ng-idle/core', '@ng-idle/keepalive', '@angular/router', '@angular/core', 'rxjs', 'rxjs/operators'], factory) :
+    (factory((global.hmcts = global.hmcts || {}, global.hmcts['rpx-xui-common-lib'] = {}),global.ng.material.autocomplete,global.ng.material.input,global.ng.material.tabs,global.ngxPagination,global.ng.common.http,global.ng.forms,global.LDClient,global.ng.common,global.ng.platformBrowser,global.i1$1,global.i2$1,global.ng.router,global.ng.core,global.rxjs,global.rxjs.operators));
+}(this, (function (exports,autocomplete,input,tabs,ngxPagination,i1,forms,LDClient,i4,i2,i1$1,i2$1,i2$2,i0,rxjs,operators) { 'use strict';
 
     /**
      * @fileoverview added by tsickle
@@ -709,7 +709,7 @@
                     return this.filterSettings[id];
                 }
                 if (sessionStorage.getItem(id)) {
-                    return JSON.parse(sessionStorage.getItem(id));
+                    return JSON.parse(window.sessionStorage.getItem(id));
                 }
                 if (localStorage.getItem(id)) {
                     if (this.isSameUser(id)) {
@@ -748,24 +748,6 @@
                 }
                 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
@@ -791,7 +773,7 @@
          * @return {?}
          */
             function (setting) {
-                sessionStorage.setItem(setting.id, JSON.stringify(setting));
+                window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
             };
         /**
          * @private
@@ -868,7 +850,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 };
         });
     }
     /**
@@ -918,7 +900,6 @@
             this.filterService = filterService;
             this.fb = fb;
             this.submitted = false;
-            this.previousSelectedNestedCheckbox = [];
         }
         Object.defineProperty(GenericFilterComponent.prototype, "config", {
             get: /**
@@ -973,10 +954,10 @@
             function (field) {
                 /** @type {?} */
                 var validators = [];
-                if (field && field.minSelected > 0) {
+                if (field && field.minSelected) {
                     validators.push(minSelectedValidator(field.minSelected));
                 }
-                if (field && field.maxSelected > 0) {
+                if (field && field.maxSelected) {
                     validators.push(maxSelectedValidator(field.maxSelected));
                 }
                 return validators;
@@ -997,16 +978,6 @@
                 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 {?}
@@ -1187,11 +1158,6 @@
              * @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);
@@ -1213,9 +1179,6 @@
                 this.filterService.persist(settings, this.config.persistence);
                 this.filterService.givenErrors.next(null);
                 this.submitted = false;
-                if (this.config.cancelButtonCallback) {
-                    this.config.cancelButtonCallback();
-                }
             };
         /**
          * @param {?} values
@@ -1261,32 +1224,6 @@
                     }
                 }
             };
-        /**
-         * @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
@@ -1388,56 +1325,6 @@
                         }
                     }
                 }
-                if (field.name === 'user-services') {
-                    this.startFilterSkillsByServices(form, field);
-                }
-                else if (field.name === 'user-skills') {
-                    if (isChecked) {
-                        /** @type {?} */
-                        var selectedIndex = field.options.findIndex(( /**
-                         * @param {?} option
-                         * @return {?}
-                         */function (option) { return Number(option.key) === Number(event.target.value); }));
-                        /** @type {?} */
-                        var selectedCheckbox = this.form.get('user-skills').value;
-                        selectedCheckbox[selectedIndex] = true;
-                        this.form.get('user-skills').setValue(selectedCheckbox);
-                        this.previousSelectedNestedCheckbox.push(event.target.value);
-                    }
-                    else {
-                        /** @type {?} */
-                        var index = this.previousSelectedNestedCheckbox.indexOf(event.target.value);
-                        if (index !== -1) {
-                            this.previousSelectedNestedCheckbox.splice(index, 1);
-                        }
-                    }
-                }
-            };
-        /**
-         * @private
-         * @param {?} form
-         * @param {?} field
-         * @return {?}
-         */
-        GenericFilterComponent.prototype.startFilterSkillsByServices = /**
-         * @private
-         * @param {?} form
-         * @param {?} field
-         * @return {?}
-         */
-            function (form, field) {
-                /** @type {?} */
-                var servicesArray = [];
-                form.value[field.name].map(( /**
-                 * @param {?} service
-                 * @param {?} index
-                 * @return {?}
-                 */function (service, index) {
-                    if (service) {
-                        servicesArray.push(field.options[index].key);
-                    }
-                }));
-                this.filterSkillsByServices(servicesArray, this.config);
             };
         /**
          * @private
@@ -1550,14 +1437,14 @@
                     this.form.addControl('findPersonControl', findPersonControl);
                 }
                 var _loop_1 = function (field) {
-                    if (field.type === 'checkbox' || field.type === 'checkbox-large' || field.type === 'nested-checkbox') {
+                    if (field.type === 'checkbox' || field.type === 'checkbox-large') {
                         /** @type {?} */
                         var formArray = this_1.buildCheckBoxFormArray(field, settings);
                         this_1.form.addControl(field.name, formArray);
                     }
-                    else if (field.type === 'find-location' || field.type === 'find-service') {
+                    else if (field.type === 'find-location') {
                         /** @type {?} */
-                        var formArray = this_1.buildFormArray(field, settings);
+                        var formArray = this_1.buildFindLocationFormArray(field, settings);
                         this_1.form.addControl(field.name, formArray);
                     }
                     else {
@@ -1565,12 +1452,6 @@
                         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;
@@ -1602,7 +1483,7 @@
                             });
                             this_1.form.addControl(field.name, formGroup);
                         }
-                        else if (field.type !== 'group-title') {
+                        else {
                             /** @type {?} */
                             var control = new forms.FormControl(defaultValue, validators);
                             this_1.form.addControl(field.name, control);
@@ -1698,7 +1579,7 @@
          * @param {?} settings
          * @return {?}
          */
-        GenericFilterComponent.prototype.buildFormArray = /**
+        GenericFilterComponent.prototype.buildFindLocationFormArray = /**
          * @private
          * @param {?} field
          * @param {?} settings
@@ -1766,7 +1647,7 @@
                          * @param {?} f
                          * @return {?}
                          */function (f) { return f.name === name; }));
-                        if (field.type === 'find-location' || field.type === 'find-service') {
+                        if (field.type === 'find-location') {
                             return { value: values, name: name };
                         }
                         else {
@@ -1797,11 +1678,11 @@
                         var field = _c.value;
                         /** @type {?} */
                         var formGroup = form.get(field.name);
-                        if (formGroup && formGroup.errors && (formGroup.errors.minlength || formGroup.errors.required)) {
+                        if (formGroup && formGroup.errors && formGroup.errors.minLength) {
                             errors.push({ name: field.name, error: field.minSelectedError });
                         }
-                        if (formGroup && formGroup.errors && formGroup.errors.maxlength) {
-                            errors.push({ name: field.name, error: field.maxSelectedError });
+                        if (formGroup && formGroup.errors && formGroup.errors.maxLength) {
+                            errors.push({ name: field.name, error: field.minSelectedError });
                         }
                     }
                 }
@@ -1818,267 +1699,17 @@
                             throw e_8.error;
                     }
                 }
-                // remove duplicates
-                errors = errors.filter(( /**
-                 * @param {?} filterError
-                 * @param {?} i
-                 * @param {?} arr
-                 * @return {?}
-                 */function (filterError, i, arr) {
-                    return errors.indexOf(arr.find(( /**
-                     * @param {?} item
-                     * @return {?}
-                     */function (item) { return item.name === filterError.name; }))) === i;
-                }));
                 if (errors.length) {
                     this.filterService.givenErrors.next(errors);
                 }
             };
-        /**
-         * @return {?}
-         */
-        GenericFilterComponent.prototype.initValuesFromCacheForSkillsByServices = /**
-         * @return {?}
-         */
-            function () {
-                var _this = this;
-                /** @type {?} */
-                var cachedValues = this.filteredSkillsByServicesCheckbox.map(( /**
-                 * @param {?} skill
-                 * @return {?}
-                 */function (skill) {
-                    /** @type {?} */
-                    var selected = false;
-                    if (_this.settings && _this.settings.fields) {
-                        /** @type {?} */
-                        var isSelectedUserSkill = void 0;
-                        /** @type {?} */
-                        var selectedUserSkills = _this.settings.fields.find(( /**
-                         * @param {?} setting
-                         * @return {?}
-                         */function (setting) { return setting.name === 'user-skills'; }));
-                        if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
-                            isSelectedUserSkill = selectedUserSkills.value.findIndex(( /**
-                             * @param {?} val
-                             * @return {?}
-                             */function (val) {
-                                return String(val) === String(skill.key);
-                            }));
-                            selected = isSelectedUserSkill !== -1;
-                        }
-                    }
-                    return selected;
-                }));
-                this.form.get('user-skills').setValue(cachedValues);
-            };
-        /**
-         * @param {?} services
-         * @param {?} config
-         * @return {?}
-         */
-        GenericFilterComponent.prototype.filterSkillsByServices = /**
-         * @param {?} services
-         * @param {?} config
-         * @return {?}
-         */
-            function (services, config) {
-                var _this = this;
-                this.filteredSkillsByServices = [];
-                this.filteredSkillsByServicesCheckbox = [];
-                /** @type {?} */
-                var userSkillsSelectField = config.fields.find(( /**
-                 * @param {?} f
-                 * @return {?}
-                 */function (f) { return f.name === 'user-skills' && f.type === 'group-select'; }));
-                /** @type {?} */
-                var userSkillsCheckboxField = config.fields.find(( /**
-                 * @param {?} f
-                 * @return {?}
-                 */function (f) { return f.name === 'user-skills' && f.type === 'nested-checkbox'; }));
-                if (userSkillsSelectField) {
-                    /** @type {?} */
-                    var userSkills_1 = userSkillsSelectField.groupOptions;
-                    if (!services || services.length === 0) {
-                        this.filteredSkillsByServices = userSkills_1;
-                    }
-                    else {
-                        services.forEach(( /**
-                         * @param {?} s
-                         * @return {?}
-                         */function (s) {
-                            /** @type {?} */
-                            var groupOption = userSkills_1.find(( /**
-                             * @param {?} u
-                             * @return {?}
-                             */function (u) { return u.group.toLowerCase() === s.toLowerCase(); }));
-                            if (groupOption) {
-                                _this.filteredSkillsByServices.push(groupOption);
-                            }
-                        }));
-                    }
-                }
-                else if (userSkillsCheckboxField) {
-                    /** @type {?} */
-                    var userSkills_2 = userSkillsCheckboxField.groupOptions;
-                    if (!services || services.length === 0) {
-                        this.filteredSkillsByServices = userSkills_2;
-                    }
-                    else {
-                        services.forEach(( /**
-                         * @param {?} s
-                         * @return {?}
-                         */function (s) {
-                            /** @type {?} */
-                            var groupOption = userSkills_2.find(( /**
-                             * @param {?} u
-                             * @return {?}
-                             */function (u) { return u.group.toLowerCase() === s.toLowerCase(); }));
-                            if (groupOption) {
-                                _this.filteredSkillsByServices.push(groupOption);
-                            }
-                        }));
-                        this.filteredSkillsByServicesCheckbox = this.filteredSkillsByServices.map(( /**
-                         * @param {?} skill
-                         * @return {?}
-                         */function (skill) {
-                            return skill.options;
-                        })).reduce(( /**
-                         * @param {?} a
-                         * @param {?} b
-                         * @return {?}
-                         */function (a, b) {
-                            return a.concat(b);
-                        }), []);
-                        userSkillsCheckboxField.options = [];
-                        userSkillsCheckboxField.options = this.filteredSkillsByServicesCheckbox;
-                        this.form.setControl('user-skills', new forms.FormArray([]));
-                        this.filteredSkillsByServicesCheckbox.forEach(( /**
-                         * @return {?}
-                         */function () {
-                            (( /** @type {?} */(_this.form.get('user-skills')))).push(new forms.FormControl(false));
-                        }));
-                        /** @type {?} */
-                        var prevValues = this.filteredSkillsByServicesCheckbox.map(( /**
-                         * @param {?} skill
-                         * @return {?}
-                         */function (skill) {
-                            /** @type {?} */
-                            var selected = false;
-                            if (_this.settings && _this.settings.fields) {
-                                if (_this.previousSelectedNestedCheckbox.length > 0) {
-                                    selected = _this.previousSelectedNestedCheckbox.includes(skill.key);
-                                }
-                                /** @type {?} */
-                                var isSelectedUserSkill = void 0;
-                                /** @type {?} */
-                                var selectedUserSkills = _this.settings.fields.find(( /**
-                                 * @param {?} setting
-                                 * @return {?}
-                                 */function (setting) { return setting.name === 'user-skills'; }));
-                                if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
-                                    isSelectedUserSkill = selectedUserSkills.value.findIndex(( /**
-                                     * @param {?} val
-                                     * @return {?}
-                                     */function (val) { return Number(val) === Number(skill.key); }));
-                                    selected = isSelectedUserSkill !== -1;
-                                }
-                                if (_this.previousSelectedNestedCheckbox.length > 0) {
-                                    // Pick up from previous selected
-                                    selected = _this.previousSelectedNestedCheckbox.includes(String(skill.key));
-                                }
-                            }
-                            return selected;
-                        }));
-                        this.form.get('user-skills').setValue(prevValues);
-                        return this.filteredSkillsByServicesCheckbox;
-                    }
-                }
-                this.filteredSkillsByServices = this.sortGroupOptions(this.filteredSkillsByServices);
-                return this.filteredSkillsByServices;
-            };
-        /**
-         * @private
-         * @param {?} formValues
-         * @param {?} field
-         * @return {?}
-         */
-        GenericFilterComponent.prototype.getSelectedValuesForFields = /**
-         * @private
-         * @param {?} formValues
-         * @param {?} field
-         * @return {?}
-         */
-            function (formValues, field) {
-                /** @type {?} */
-                var selectedValues = [];
-                Object.keys(formValues).map(( /**
-                 * @param {?} name
-                 * @return {?}
-                 */function (name) {
-                    /** @type {?} */
-                    var values = formValues[name].value;
-                    if (name === field.name) {
-                        values.forEach(( /**
-                         * @param {?} v
-                         * @return {?}
-                         */function (v) {
-                            selectedValues.push(v.key);
-                        }));
-                    }
-                }));
-                return selectedValues;
-            };
-        /**
-         * @private
-         * @param {?} groupOptions
-         * @return {?}
-         */
-        GenericFilterComponent.prototype.sortGroupOptions = /**
-         * @private
-         * @param {?} groupOptions
-         * @return {?}
-         */
-            function (groupOptions) {
-                /** @type {?} */
-                var sortedResults = [];
-                /** @type {?} */
-                var groups = groupOptions.map(( /**
-                 * @param {?} go
-                 * @return {?}
-                 */function (go) { return go.group; }));
-                groups.sort().forEach(( /**
-                 * @param {?} g
-                 * @return {?}
-                 */function (g) {
-                    /** @type {?} */
-                    var options = groupOptions.find(( /**
-                     * @param {?} go
-                     * @return {?}
-                     */function (go) { return go.group === g; })).options;
-                    /** @type {?} */
-                    var sortedOptions = options.sort(( /**
-                     * @param {?} a
-                     * @param {?} b
-                     * @return {?}
-                     */function (a, b) {
-                        return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : (b.label.toLowerCase() > a.label.toLowerCase() ? -1 : 0);
-                    }));
-                    /** @type {?} */
-                    var result = {
-                        group: g,
-                        options: sortedOptions
-                    };
-                    sortedResults.push(result);
-                }));
-                return sortedResults;
-            };
         GenericFilterComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-generic-filter',
-                        template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break 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",
+                        template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n                              [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [field]=\"field\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [field]=\"field\"\n                                [selectedServices]=\"form.get(field.name)?.value\"                                \n          ></xuilib-find-service>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
                         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%}"]
+                        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 */
@@ -2341,29 +1972,50 @@
                 return newSharedCases;
             };
         /**
-         * @param {?} caseId
          * @param {?} user
+         * @param {?=} caseId
          * @return {?}
          */
         CaseSharingStateService.prototype.requestUnshare = /**
-         * @param {?} caseId
          * @param {?} user
+         * @param {?=} caseId
          * @return {?}
          */
-            function (caseId, user) {
+            function (user, caseId) {
                 var e_2, _a;
                 /** @type {?} */
                 var newSharedCases = [];
                 try {
                     for (var _b = __values(this.caseState), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var sharedCase = _c.value;
-                        if (sharedCase.caseId === caseId) {
+                        // If no caseId, then request unshare from all shared cases
+                        if (caseId === undefined || sharedCase.caseId === caseId) {
                             if (!sharedCase.pendingUnshares) {
                                 sharedCase.pendingUnshares = [];
                             }
                             /** @type {?} */
                             var newPendingUnshares = sharedCase.pendingUnshares.slice();
-                            if (newPendingUnshares) {
+                            // If the user is pending shared access, just remove them from pendingShares
+                            /** @type {?} */
+                            var newPendingShares = void 0;
+                            /** @type {?} */
+                            var indexOfPreviouslyAddedUser = -1;
+                            if (sharedCase.pendingShares) {
+                                indexOfPreviouslyAddedUser = sharedCase.pendingShares.findIndex(( /**
+                                 * @param {?} u
+                                 * @return {?}
+                                 */function (u) { return u.idamId === user.idamId; }));
+                                if (indexOfPreviouslyAddedUser > -1) {
+                                    newPendingShares = sharedCase.pendingShares.slice();
+                                    newPendingShares.splice(indexOfPreviouslyAddedUser, 1);
+                                }
+                            }
+                            // If the user does not exist in pendingShares, and already has shared access (i.e. exists in sharedWith),
+                            // request removal of shared access
+                            if (indexOfPreviouslyAddedUser === -1 && sharedCase.sharedWith && sharedCase.sharedWith.findIndex(( /**
+                             * @param {?} u
+                             * @return {?}
+                             */function (u) { return u.idamId === user.idamId; })) > -1) {
                                 if (!newPendingUnshares.some(( /**
                                  * @param {?} u
                                  * @return {?}
@@ -2371,11 +2023,10 @@
                                     newPendingUnshares.push(user);
                                 }
                             }
-                            else {
-                                newPendingUnshares.push(user);
-                            }
                             /** @type {?} */
-                            var newSharedCase = __assign({}, sharedCase, { pendingUnshares: newPendingUnshares });
+                            var newSharedCase = __assign({}, sharedCase, { pendingUnshares: newPendingUnshares }, (newPendingShares && {
+                                pendingShares: newPendingShares
+                            }));
                             newSharedCases.push(newSharedCase);
                         }
                         else {
@@ -2397,7 +2048,7 @@
                     }
                 }
                 this.subject.next(newSharedCases);
-                return;
+                return newSharedCases;
             };
         /**
          * @param {?} caseId
@@ -2473,11 +2124,13 @@
          * @return {?}
          */
             function (caseId) {
-                for (var i = 0, l = this.caseState.length; i < l; i++) {
-                    if (this.caseState[i].caseId === caseId) {
-                        this.caseState.splice(i, 1);
-                        this.subject.next(this.caseState);
-                        return;
+                if (this.caseState.length > 1) {
+                    for (var i = 0, l = this.caseState.length; i < l; i++) {
+                        if (this.caseState[i].caseId === caseId) {
+                            this.caseState.splice(i, 1);
+                            this.subject.next(this.caseState);
+                            return;
+                        }
                     }
                 }
             };
@@ -2563,7 +2216,7 @@
         SelectedCaseConfirmComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-selected-case-confirm',
-                        template: "<div id=\"user-access-block-{{ sharedCase.caseId }}\" *ngIf=\"showUserAccessBlock()\">\n  <h2 class=\"govuk-heading-m case-share-confirm__title\">{{ sharedCase.caseTitle }}</h2>\n  <div class=\"case-share-confirm__caption-area\">\n    <div class=\"govuk-caption-m case-share-confirm__caption\">\n      {{ sharedCase.caseId }}\n    </div>\n    <a [routerLink]=\"changeLink\" class=\"case-share-confirm__change-link govuk-link govuk-!-font-size-19\">Change</a>\n  </div>\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Name</th>\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n      <th class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</th>\n    </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingShares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge\">To be added</span>\n      </td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingUnshares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge hmcts-badge--red\">to be removed</span>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</div>\n",
+                        template: "<div id=\"user-access-block-{{ sharedCase.caseId }}\" *ngIf=\"showUserAccessBlock()\">\n  <h2 class=\"govuk-heading-m case-share-confirm__title\">{{ sharedCase.caseTitle }}</h2>\n  <div class=\"case-share-confirm__caption-area\">\n    <div class=\"govuk-caption-m case-share-confirm__caption\">\n      {{ sharedCase.caseId }}\n    </div>\n    <a [routerLink]=\"changeLink\" class=\"case-share-confirm__change-link govuk-link govuk-!-font-size-19\">Change</a>\n  </div>\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Name</th>\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n      <th class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</th>\n    </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingShares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge\">To be added</span>\n      </td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingUnshares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge hmcts-badge--red\">To be removed</span>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</div>\n",
                         styles: [".case-share-confirm__title{margin-bottom:0}.case-share-confirm__caption-area{border-bottom:1px solid #b1b4b6;padding-bottom:10px;display:inline-block;width:100%;clear:both}.case-share-confirm__caption{float:left}.case-share-confirm__change-link{float:right}.govuk-table-column-header{width:45%}.govuk-table-column-actions{width:10%}"]
                     }] }
         ];
@@ -2712,15 +2365,6 @@
                     this.combinedSortedShares = this.combineAndSortShares(sharedWith, pendingShares);
                 }
             };
-        /**
-         * @return {?}
-         */
-        SelectedCaseComponent.prototype.onUnselect = /**
-         * @return {?}
-         */
-            function () {
-                this.unselect.emit(this.sharedCase);
-            };
         /**
          * @param {?} c
          * @return {?}
@@ -2943,7 +2587,7 @@
          * @return {?}
          */
             function (user, sharedCase) {
-                this.stateService.requestUnshare(sharedCase.caseId, user);
+                this.stateService.requestUnshare(user, sharedCase.caseId);
                 this.synchronizeStore.emit(this.shareCases);
             };
         /**
@@ -3062,8 +2706,8 @@
         SelectedCaseComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-selected-case',
-                        template: "<div id=\"{{buildElementId('govuk-accordion__section')}}\" class=\"govuk-accordion__section\">\n  <div class=\"govuk-grid-row govuk-case-header\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <h3 id=\"{{buildElementId('case-title')}}\" class=\"govuk-case-title\">{{ sharedCase.caseTitle }}</h3>\n      <h1 id=\"{{buildElementId('case-id')}}\" class=\"govuk-case-sub-title\">{{ sharedCase.caseId }}</h1>\n    </div>\n    <div class=\"govuk-grid-column-twenty-percent\">\n      <button *ngIf=\"caseCount > 1\"\n        id=\"{{buildElementId('btn-deselect-case')}}\" \n        class=\"govuk-button hmcts-button--secondary\" \n        (click)=\"onDeselect(sharedCase)\" \n        title=\"Deselect case\">Deselect case\n      </button>\n    </div>\n    <div class=\"govuk-accordion__section-header govuk-grid-column-five-percent\">\n      <div class=\"govuk-accordion__section-heading\">\n        <button type=\"button\" id=\"{{buildElementId('accordion-with-summary-sections-heading')}}\"\n              aria-controls=\"accordion-with-summary-sections-content-1\" class=\"govuk-accordion__section-button\"\n              aria-describedby=\"accordion-with-summary-sections-summary-1\" aria-expanded=\"false\" title=\"Expand or Collapse\">\n        <span class=\"govuk-accordion__icon\" aria-hidden=\"true\"></span></button>\n      </div>\n    </div>\n  </div>\n  <div id=\"{{buildElementId('accordion-with-summary-sections-content')}}\" class=\"govuk-accordion__section-content\"\n       aria-labelledby=\"buildElementId('accordion-with-summary-sections-heading')\" >\n    <div class=\"govuk-grid-row\" *ngIf=\"showNoUsersAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-no-user')}}\" class=\"govuk-div-align-left\">No users from your organisation currently have access to this case.</span>\n    </div>\n    <div class=\"govuk-grid-row\" *ngIf=\"showUserHasAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-has-users')}}\" class=\"govuk-div-align-left\">Users from your organisation with access to this case.</span>\n    </div>\n    <table class=\"govuk-table\" *ngIf=\"showUserAccessTable()\">\n      <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th id=\"{{buildElementId('name-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Name</th>\n        <th id=\"{{buildElementId('email-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n        <th id=\"{{buildElementId('action-heading')}}\" class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</th>\n        <th id=\"{{buildElementId('label-heading')}}\" class=\"govuk-table__header govuk-table-column-label\" scope=\"col\">&nbsp;&nbsp;</th>\n      </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let user of combinedSortedShares; index as idx; trackBy: trackByUserId\">\n          <td id=\"user-full-name-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n          <td id=\"user-email-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.email }}</td>\n          <td class=\"govuk-table__cell\">\n            <a *ngIf=\"canRemove(sharedCase.caseId, user) | async\" (click)=\"onRemove(user, sharedCase)\" href=\"javascript:void(0);\">Remove <span class=\"govuk-visually-hidden\">{{ user.firstName + ' ' + user.lastName }} from case</span></a>\n            <a *ngIf=\"canCancel(sharedCase.caseId, user) | async\" (click)=\"onCancel(user, sharedCase)\" href=\"javascript:void(0);\">Cancel <span class=\"govuk-visually-hidden\">adding {{ user.firstName + ' ' + user.lastName }} to case</span></a>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngIf=\"isToBeRemoved(sharedCase.caseId, user) | async\" class=\"hmcts-badge hmcts-badge--red\">To be removed</span>\n            <span *ngIf=\"isToBeAdded(sharedCase.caseId, user) | async\" class=\"hmcts-badge\">To be added</span>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n",
-                        styles: [".govuk-case-header{border-top:1px solid #bfc1c3}.govuk-case-title{font-family:nta,Arial,sans-serif;font-size:24px;color:#005ea5;font-weight:700;padding-left:0}.govuk-case-sub-title{font-family:nta,Arial,sans-serif;font-size:1rem!important;color:#6f777b;font-weight:400;padding-left:0}.govuk-grid-row{margin-left:0;margin-right:0}.govuk-grid-column-three-quarters{padding-top:5px;padding-left:0}.govuk-grid-column-twenty-percent{box-sizing:border-box;padding-top:10px;width:20%;float:left}.govuk-grid-column-five-percent{box-sizing:border-box;padding-top:15px;width:5%;float:left}.govuk-table-column-header{width:40%}.govuk-table-column-actions,.govuk-table-column-label{width:10%}.govuk-div-align-left{font-family:nta,Arial,sans-serif;font-size:1.1875rem!important;line-height:1.31579!important;text-align:left;margin-bottom:20px;padding-left:0;color:#0b0c0c}.govuk-accordion__section-header{border-top:0}.govuk-accordion__section-content{padding-top:0}"]
+                        template: "<div id=\"{{buildElementId('govuk-accordion__section')}}\" class=\"govuk-accordion__section\">\n  <div class=\"govuk-grid-row govuk-case-header\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <h3 id=\"{{buildElementId('case-title')}}\" class=\"govuk-case-title\">{{ sharedCase.caseTitle }}</h3>\n      <h1 id=\"{{buildElementId('case-id')}}\" class=\"govuk-case-sub-title\">{{ sharedCase.caseId }}</h1>\n    </div>\n    <div class=\"govuk-grid-column-twenty-percent\">\n      <button *ngIf=\"caseCount > 1\"\n        id=\"{{buildElementId('btn-deselect-case')}}\" \n        class=\"govuk-button hmcts-button--secondary\" \n        (click)=\"onDeselect(sharedCase)\" \n        title=\"Deselect case\">Deselect case\n      </button>\n    </div>\n    <div class=\"govuk-accordion__section-header govuk-grid-column-five-percent\">\n      <div class=\"govuk-accordion__section-heading\">\n        <button type=\"button\" id=\"{{buildElementId('accordion-with-summary-sections-heading')}}\"\n              aria-controls=\"accordion-with-summary-sections-content-1\" class=\"govuk-accordion__section-button\"\n              aria-describedby=\"accordion-with-summary-sections-summary-1\" aria-expanded=\"false\" title=\"Expand or Collapse\">\n        <span class=\"govuk-accordion__icon\" aria-hidden=\"true\"></span></button>\n      </div>\n    </div>\n  </div>\n  <div id=\"{{buildElementId('accordion-with-summary-sections-content')}}\" class=\"govuk-accordion__section-content\"\n       aria-labelledby=\"buildElementId('accordion-with-summary-sections-heading')\" >\n    <div class=\"govuk-grid-row\" *ngIf=\"showNoUsersAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-no-user')}}\" class=\"govuk-div-align-left\">No users from your organisation currently have access to this case.</span>\n    </div>\n    <div class=\"govuk-grid-row\" *ngIf=\"showUserHasAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-has-users')}}\" class=\"govuk-div-align-left\">Users from your organisation with access to this case.</span>\n    </div>\n    <table class=\"govuk-table\" *ngIf=\"showUserAccessTable()\">\n      <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th id=\"{{buildElementId('name-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Name</th>\n        <th id=\"{{buildElementId('email-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n        <th id=\"{{buildElementId('action-heading')}}\" class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</th>\n        <th id=\"{{buildElementId('label-heading')}}\" class=\"govuk-table__header govuk-table-column-label\" scope=\"col\">Status</th>\n      </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let user of combinedSortedShares; index as idx; trackBy: trackByUserId\">\n          <td id=\"user-full-name-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n          <td id=\"user-email-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.email }}</td>\n          <td class=\"govuk-table__cell\">\n            <a *ngIf=\"canRemove(sharedCase.caseId, user) | async\" (click)=\"onRemove(user, sharedCase)\" href=\"javascript:void(0);\">Remove <span class=\"govuk-visually-hidden\">{{ user.firstName + ' ' + user.lastName }} from case</span></a>\n            <a *ngIf=\"canCancel(sharedCase.caseId, user) | async\" (click)=\"onCancel(user, sharedCase)\" href=\"javascript:void(0);\">Cancel <span class=\"govuk-visually-hidden\">adding {{ user.firstName + ' ' + user.lastName }} to case</span></a>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngIf=\"isToBeRemoved(sharedCase.caseId, user) | async\" class=\"hmcts-badge hmcts-badge--red\">To be removed</span>\n            <span *ngIf=\"isToBeAdded(sharedCase.caseId, user) | async\" class=\"hmcts-badge\">To be added</span>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n",
+                        styles: [".govuk-case-header{border-top:1px solid #bfc1c3}.govuk-case-title{font-family:nta,Arial,sans-serif;font-size:24px;color:#005ea5;font-weight:700;padding-left:0}.govuk-case-sub-title{font-family:nta,Arial,sans-serif;font-size:1rem!important;color:#6f777b;font-weight:400;padding-left:0}.govuk-grid-row{margin-left:0;margin-right:0}.govuk-grid-column-three-quarters{padding-top:5px;padding-left:0}.govuk-grid-column-twenty-percent{box-sizing:border-box;padding-top:10px;width:20%;float:left}.govuk-grid-column-five-percent{box-sizing:border-box;padding-top:15px;width:5%;float:left}.govuk-table-column-header{width:38%}.govuk-table-column-actions,.govuk-table-column-label{width:12%}.govuk-div-align-left{font-family:nta,Arial,sans-serif;font-size:1.1875rem!important;line-height:1.31579!important;text-align:left;margin-bottom:20px;padding-left:0;color:#0b0c0c}.govuk-accordion__section-header{border-top:0}.govuk-accordion__section-content{padding-top:0}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3354,6 +2998,18 @@
         return ShareCaseConfirmComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/models/case-share.model.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @enum {string} */
+    var SharedCaseErrorMessages = {
+        OneCaseMustBeSelected: "At least one case must be selected",
+        NoChangesRequested: "You have not requested any changes to case sharing",
+        OnePersonMustBeAssigned: "At least one person must be assigned to each case",
+    };
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/user-select/user-select.component.ts
@@ -3475,17 +3131,23 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var ShareCaseComponent = /** @class */ (function () {
-        function ShareCaseComponent(stateService) {
+        function ShareCaseComponent(stateService, router) {
             this.stateService = stateService;
+            this.router = router;
             this.shareCases = []; // cases selected for sharing
-            // cases selected for sharing
+            this.continueAllowed = false;
+            this.selectedUserToRemove = null;
             this.removeUserFromCaseToggleOn = false;
             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.cancelLink = '';
             this.showRemoveUsers = false;
+            this.fnTitle = '';
+            this.title = '';
             this.unselect = new i0.EventEmitter();
             this.synchronizeStore = new i0.EventEmitter();
+            this.validationErrors = [];
         }
         /**
          * @return {?}
@@ -3495,14 +3157,33 @@
          */
             function () {
                 var _this = this;
-                this.shareCases$.subscribe(( /**
-                 * @param {?} shareCases
-                 * @return {?}
-                 */function (shareCases) {
+                this.shareCases$
+                    .pipe(operators.tap(( /**
+             * @param {?} sharedCases
+             * @return {?}
+             */function (sharedCases) {
+                    // Update the list of users assigned to at least one case
+                    _this.getAssignedUsers(sharedCases.filter(( /**
+                     * @param {?} sharedCase
+                     * @return {?}
+                     */function (sharedCase) { return sharedCase.sharedWith && sharedCase.sharedWith.length > 0; })));
+                })))
+                    .subscribe(( /**
+             * @param {?} shareCases
+             * @return {?}
+             */function (shareCases) {
                     _this.shareCases = shareCases;
                     _this.stateService.setCases(shareCases);
+                    // Set the config to be used by the xuilib-gov-uk-error-message component, in particular the element ID to
+                    // which the error message is associated
+                    if (shareCases) {
+                        _this.selectedCasesErrorMessageConfig = {
+                            id: shareCases.length > 0 ? 'cases' : 'noCaseDisplay'
+                        };
+                    }
                 }));
                 this.shareCases$ = this.stateService.state;
+                this.shareCaseErrorMessage = { isInvalid: false, messages: [] };
             };
         /**
          * @param {?} c
@@ -3513,8 +3194,16 @@
          * @return {?}
          */
             function (c) {
-                this.unselect.emit(c);
-                this.stateService.removeCase(c.caseId);
+                this.validationErrors = [];
+                if (this.stateService.getCases().length === 1) {
+                    this.validationErrors.push({ id: 'cases', message: SharedCaseErrorMessages.OneCaseMustBeSelected });
+                    this.shareCaseErrorMessage = { isInvalid: true, messages: [SharedCaseErrorMessages.OneCaseMustBeSelected] };
+                    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+                }
+                else {
+                    this.unselect.emit(c);
+                    this.stateService.removeCase(c.caseId);
+                }
             };
         /**
          * @param {?} event
@@ -3552,6 +3241,21 @@
                     this.userSelect.clear();
                 }
                 this.synchronizeStore.emit(newSharedCases);
+                // Update the list of assigned users (which includes pending users)
+                this.getAssignedUsers(newSharedCases);
+            };
+        /**
+         * @return {?}
+         */
+        ShareCaseComponent.prototype.removeUser = /**
+         * @return {?}
+         */
+            function () {
+                if (this.selectedUserToRemove) {
+                    /** @type {?} */
+                    var newSharedCases = this.stateService.requestUnshare(this.selectedUserToRemove);
+                    this.synchronizeStore.emit(newSharedCases);
+                }
             };
         /**
          * @return {?}
@@ -3563,14 +3267,25 @@
                 return this.selectedUser === null || this.shareCases.length === 0;
             };
         /**
+         * Function originally used to set disabled state of "Continue" button, now called by the button click handler to
+         * control whether navigation to the confirmation page is allowed. It is prevented if no changes have been made
+         */
+        /**
+         * Function originally used to set disabled state of "Continue" button, now called by the button click handler to
+         * control whether navigation to the confirmation page is allowed. It is prevented if no changes have been made
          * @return {?}
          */
-        ShareCaseComponent.prototype.isDisabledContinue = /**
+        ShareCaseComponent.prototype.setContinueAllowed = /**
+         * Function originally used to set disabled state of "Continue" button, now called by the button click handler to
+         * control whether navigation to the confirmation page is allowed. It is prevented if no changes have been made
          * @return {?}
          */
             function () {
-                /** @type {?} */
-                var isDisabled = true;
+                var _this = this;
+                // Always start with continueAllowed = false. This covers the scenario where a user might add someone for sharing
+                // a case (so, continueAllowed = true), then removes the same user before trying to continue. This would
+                // erroneously leave continueAllowed as true
+                this.continueAllowed = false;
                 this.shareCases$.subscribe(( /**
                  * @param {?} shareCases
                  * @return {?}
@@ -3580,11 +3295,11 @@
                         for (var shareCases_1 = __values(shareCases), shareCases_1_1 = shareCases_1.next(); !shareCases_1_1.done; shareCases_1_1 = shareCases_1.next()) {
                             var caseState = shareCases_1_1.value;
                             if (caseState.pendingShares && caseState.pendingShares.length > 0) {
-                                isDisabled = false;
+                                _this.continueAllowed = true;
                                 break;
                             }
                             if (caseState.pendingUnshares && caseState.pendingUnshares.length > 0) {
-                                isDisabled = false;
+                                _this.continueAllowed = true;
                                 break;
                             }
                         }
@@ -3603,7 +3318,6 @@
                         }
                     }
                 }));
-                return isDisabled;
             };
         /**
          * @param {?} sharedCase
@@ -3643,17 +3357,127 @@
                 }
                 this.stateService.setCases(this.shareCases);
             };
-        ShareCaseComponent.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'xuilib-share-case',
-                        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 */
-        ShareCaseComponent.ctorParameters = function () {
-            return [
-                { type: CaseSharingStateService }
+        /**
+         * @return {?}
+         */
+        ShareCaseComponent.prototype.onContinue = /**
+         * @return {?}
+         */
+            function () {
+                this.setContinueAllowed();
+                // If continuation is not allowed, set an error message
+                if (!this.continueAllowed) {
+                    this.validationErrors = [];
+                    this.validationErrors.push({ id: 'cases', message: SharedCaseErrorMessages.NoChangesRequested });
+                    this.shareCaseErrorMessage = { isInvalid: true, messages: [SharedCaseErrorMessages.NoChangesRequested] };
+                    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+                }
+                // Navigate to confirmation page only if allowed to continue
+                if (this.continueAllowed) {
+                    // Check that no case is left unassigned; a user can be removed only if there is another current user, or if at
+                    // least one user is to be added. Prevent navigation to confirmation page if there is at least one case left in
+                    // an unassigned state
+                    if (this.hasCasesLeftUnassigned(this.shareCases)) {
+                        this.validationErrors = [];
+                        this.validationErrors.push({ id: 'cases', message: SharedCaseErrorMessages.OnePersonMustBeAssigned });
+                        this.shareCaseErrorMessage = { isInvalid: true, messages: [SharedCaseErrorMessages.OnePersonMustBeAssigned] };
+                        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+                    }
+                    else {
+                        this.router.navigate([this.confirmLink]);
+                    }
+                }
+            };
+        /**
+         * Gets a unique list of all users that have been assigned, or are pending assigment to, at least one case
+         * @param sharedCases The list of shared cases from which to get users these are shared with, or are to be shared with
+         */
+        /**
+         * Gets a unique list of all users that have been assigned, or are pending assigment to, at least one case
+         * @param {?} sharedCases The list of shared cases from which to get users these are shared with, or are to be shared with
+         * @return {?}
+         */
+        ShareCaseComponent.prototype.getAssignedUsers = /**
+         * Gets a unique list of all users that have been assigned, or are pending assigment to, at least one case
+         * @param {?} sharedCases The list of shared cases from which to get users these are shared with, or are to be shared with
+         * @return {?}
+         */
+            function (sharedCases) {
+                /** @type {?} */
+                var users = [];
+                sharedCases.forEach(( /**
+                 * @param {?} sharedCase
+                 * @return {?}
+                 */function (sharedCase) {
+                    if (sharedCase.sharedWith) {
+                        sharedCase.sharedWith.forEach(( /**
+                         * @param {?} user
+                         * @return {?}
+                         */function (user) {
+                            if (!users.some(( /**
+                             * @param {?} existingUser
+                             * @return {?}
+                             */function (existingUser) { return user.idamId === existingUser.idamId; }))) {
+                                users.push(user);
+                            }
+                        }));
+                    }
+                    if (sharedCase.pendingShares) {
+                        sharedCase.pendingShares.forEach(( /**
+                         * @param {?} user
+                         * @return {?}
+                         */function (user) {
+                            if (!users.some(( /**
+                             * @param {?} existingUser
+                             * @return {?}
+                             */function (existingUser) { return user.idamId === existingUser.idamId; }))) {
+                                users.push(user);
+                            }
+                        }));
+                    }
+                }));
+                this.assignedUsers = users;
+            };
+        /**
+         * Checks if any shared cases have been left unassigned. This occurs if a shared case has a number of pending
+         * unshares equal to the number of current shares, and there are no pending shares.
+         * @param sharedCases The array of shared cases to check
+         * @returns `true` if at least one case has the condition described above; `false` otherwise
+         */
+        /**
+         * Checks if any shared cases have been left unassigned. This occurs if a shared case has a number of pending
+         * unshares equal to the number of current shares, and there are no pending shares.
+         * @param {?} sharedCases The array of shared cases to check
+         * @return {?} `true` if at least one case has the condition described above; `false` otherwise
+         */
+        ShareCaseComponent.prototype.hasCasesLeftUnassigned = /**
+         * Checks if any shared cases have been left unassigned. This occurs if a shared case has a number of pending
+         * unshares equal to the number of current shares, and there are no pending shares.
+         * @param {?} sharedCases The array of shared cases to check
+         * @return {?} `true` if at least one case has the condition described above; `false` otherwise
+         */
+            function (sharedCases) {
+                return sharedCases.some(( /**
+                 * @param {?} sharedCase
+                 * @return {?}
+                 */function (sharedCase) {
+                    return sharedCase.pendingUnshares && sharedCase.sharedWith &&
+                        sharedCase.pendingUnshares.length === sharedCase.sharedWith.length &&
+                        (!sharedCase.pendingShares || sharedCase.pendingShares.length === 0);
+                }));
+            };
+        ShareCaseComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-share-case',
+                        template: "<xuilib-hmcts-error-summary\n  [errorMessages]=\"validationErrors\"\n  [header]=\"'There is a problem'\"\n></xuilib-hmcts-error-summary>\n<h1 *ngIf=\"title\" class=\"govuk-heading-xl govuk-!-margin-top-2\">\n  <span *ngIf=\"fnTitle\" class=\"govuk-caption-xl\">{{fnTitle}}</span>\n  {{title}}\n</h1>\n<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 [(ngModel)]=\"selectedUserToRemove\" class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option [ngValue]=\"null\" selected>Select a person</option>\n          <option *ngFor=\"let user of assignedUsers\" [ngValue]=\"user\">{{user.firstName}} {{user.lastName}} - {{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" (click)=\"removeUser()\" 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\" [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n  <xuilib-gov-uk-error-message [config]=\"selectedCasesErrorMessageConfig\" [errorMessage]=\"shareCaseErrorMessage\"></xuilib-gov-uk-error-message>\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    [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n    No cases to display.\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n  <button id=\"btn-continue\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"onContinue()\" title=\"Continue\">Continue</button>\n  <button id=\"btn-cancel\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"Cancel\" [routerLink]=\"cancelLink\">Cancel</button>\n</div>\n",
+                        styles: ["select{width:100%}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        ShareCaseComponent.ctorParameters = function () {
+            return [
+                { type: CaseSharingStateService },
+                { type: i2$2.Router }
             ];
         };
         ShareCaseComponent.propDecorators = {
@@ -3661,8 +3485,11 @@
             shareCases$: [{ type: i0.Input }],
             users: [{ type: i0.Input }],
             confirmLink: [{ type: i0.Input }],
+            cancelLink: [{ type: i0.Input }],
             addUserLabel: [{ type: i0.Input }],
             showRemoveUsers: [{ type: i0.Input }],
+            fnTitle: [{ type: i0.Input }],
+            title: [{ type: i0.Input }],
             unselect: [{ type: i0.Output }],
             synchronizeStore: [{ type: i0.Output }],
             userSelect: [{ type: i0.ViewChild, args: [UserSelectComponent,] }]
@@ -4248,7 +4075,7 @@
         JUDICIAL: "Judicial",
         CASEWORKER: "Legal Ops",
         ADMIN: "Admin",
-        CTSC: "CTSC User",
+        CTSC: "CTSC",
         ALL: "All",
     };
     /** @enum {string} */
@@ -4271,6 +4098,12 @@
         return RadioFilterFieldConfig;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/models/index.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/services/locations/location.service.ts
@@ -4349,7 +4182,7 @@
 
     /**
      * @fileoverview added by tsickle
-     * Generated from: lib/services/storage/session-storage/session-storage.service.ts
+     * 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 () {
@@ -4657,7 +4490,7 @@
             { type: i0.Component, args: [{
                         selector: 'exui-search-location',
                         template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <mat-option *ngFor=\"let location of locations\"\n                (onSelectionChange)=\"onSelectionChange(location)\">\n      {{ location.site_name }}\n    </mat-option>\n    <mat-option *ngIf=\"!locations.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
-                        styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width: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}"]
+                        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}"]
                     }] }
         ];
         /** @nocollapse */
@@ -4914,8 +4747,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\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}"]
+                        template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [bookingCheck]=\"field.bookingCheckType\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                        styles: [""]
                     }] }
         ];
         FindLocationComponent.propDecorators = {
@@ -5634,26 +5467,10 @@
      */
     var FindServiceComponent = /** @class */ (function () {
         function FindServiceComponent() {
-            this.services = [];
-            this.selectedServices = [];
+            this.serviceTitle = 'Search for a service by name';
             this.enableAddServiceButton = true;
-            this.disabled = false;
-            this.serviceFieldChanged = new i0.EventEmitter();
-            this.tempSelectedService = null;
+            this.disableInputField = false;
         }
-        /**
-         * @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 {?}
          */
@@ -5661,148 +5478,13 @@
          * @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);
-                }));
+                // Todo
             };
         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}"]
+                        template: "<div class=\"service-picker-custom\">\n    <div class=\"search-service\">\n      <div>\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <exui-search-service class=\"search-service\"\n                            [services]=\"services\"\n                            [selectedServices]=\"selectedServices\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"></exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" \n        data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n    <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n      <li class=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\n        </a>\n      </li>\n    </ul>\n  </div>",
+                        styles: ["#add-service{background-color:#ddd}"]
                     }] }
         ];
         FindServiceComponent.propDecorators = {
@@ -5812,225 +5494,13 @@
             form: [{ type: i0.Input }],
             services: [{ type: i0.Input }],
             selectedServices: [{ type: i0.Input }],
-            enableAddServiceButton: [{ type: i0.Input }],
             disabled: [{ type: i0.Input }],
-            serviceFieldChanged: [{ type: i0.Output }]
+            enableAddServiceButton: [{ type: i0.Input }],
+            disableInputField: [{ type: i0.Input }]
         };
         return FindServiceComponent;
     }());
 
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/services/task-name/task-name.service.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var TaskNameService = /** @class */ (function () {
-        function TaskNameService(http, sessionStorageService) {
-            this.http = http;
-            this.sessionStorageService = sessionStorageService;
-        }
-        /**
-         * @return Observable<any[]>: Array of taskName in Observable
-         */
-        /**
-         * @return {?} Observable<any[]>: Array of taskName in Observable
-         */
-        TaskNameService.prototype.getTaskName = /**
-         * @return {?} Observable<any[]>: Array of taskName in Observable
-         */
-            function () {
-                var _this = this;
-                if (this.sessionStorageService.getItem(TaskNameService.taskNamesKey)) {
-                    /** @type {?} */
-                    var taskNames = JSON.parse(this.sessionStorageService.getItem(TaskNameService.taskNamesKey));
-                    return rxjs.of(( /** @type {?} */(taskNames)));
-                }
-                return this.http.get("/workallocation/taskNames").pipe(operators.tap(( /**
-                 * @param {?} taskNames
-                 * @return {?}
-                 */function (taskNames) { return _this.sessionStorageService.setItem(TaskNameService.taskNamesKey, JSON.stringify(taskNames)); })));
-            };
-        TaskNameService.taskNamesKey = 'taskNames';
-        TaskNameService.decorators = [
-            { type: i0.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        TaskNameService.ctorParameters = function () {
-            return [
-                { type: i1.HttpClient },
-                { type: SessionStorageService }
-            ];
-        };
-        /** @nocollapse */ TaskNameService.ngInjectableDef = i0.defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(i0.inject(i1.HttpClient), i0.inject(SessionStorageService)); }, token: TaskNameService, providedIn: "root" });
-        return TaskNameService;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/components/find-task-name/find-task-name.component.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var FindTaskNameComponent = /** @class */ (function () {
-        function FindTaskNameComponent(cd, taskService) {
-            this.cd = cd;
-            this.taskService = taskService;
-            this.taskNameSelected = new i0.EventEmitter();
-            this.taskNameFieldChanged = new i0.EventEmitter();
-            this.boldTitle = 'Find the task name';
-            this.subTitle = 'Type the name of the task name and select them.';
-            this.domain = PersonRole.ALL;
-            this.findTaskNameGroup = new forms.FormGroup({});
-            this.submitted = true;
-            this.userIncluded = false;
-            this.placeholderContent = '';
-            this.isNoResultsShown = true;
-            this.showUpdatedColor = false;
-            this.selectedTaskNames = [];
-            this.errorMessage = 'You must select a name';
-            this.idValue = '';
-            this.services = ['IA'];
-            this.disabled = null;
-            this.showAutocomplete = false;
-            this.filteredOptions = [];
-            this.minSearchCharacters = 1;
-            this.searchTerm = '';
-        }
-        /**
-         * @return {?}
-         */
-        FindTaskNameComponent.prototype.ngOnDestroy = /**
-         * @return {?}
-         */
-            function () {
-                if (this.sub) {
-                    this.sub.unsubscribe();
-                }
-            };
-        /**
-         * @return {?}
-         */
-        FindTaskNameComponent.prototype.ngOnChanges = /**
-         * @return {?}
-         */
-            function () {
-                var _this = this;
-                this.findTaskNameControl = new forms.FormControl(this.selectedTaskName);
-                this.findTaskNameGroup.addControl('findTaskNameControl', this.findTaskNameControl);
-                this.sub = this.findTaskNameControl.valueChanges
-                    .pipe(operators.tap(( /**
-             * @return {?}
-             */function () { return _this.showAutocomplete = false; })), operators.tap(( /**
-                 * @return {?}
-                 */function () { return _this.filteredOptions = []; })), operators.tap(( /**
-                 * @param {?} term
-                 * @return {?}
-                 */function (term) { return _this.searchTerm = term; })), operators.debounceTime(300), operators.tap(( /**
-                 * @param {?} searchTerm
-                 * @return {?}
-                 */function (searchTerm) {
-                    if (!searchTerm) {
-                        _this.taskNameSelected.emit('');
-                    }
-                    return searchTerm;
-                })), 
-                // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit('null') : void 0),
-                operators.filter(( /**
-                 * @param {?} searchTerm
-                 * @return {?}
-                 */function (searchTerm) { return searchTerm && searchTerm.length >= _this.minSearchCharacters; })), operators.mergeMap(( /**
-                 * @return {?}
-                 */function () { return _this.getTaskName(); }))).subscribe(( /**
-                 * @param {?} taskNameModel
-                 * @return {?}
-                 */function (taskNameModel) {
-                    _this.filteredOptions = taskNameModel.map(( /**
-                     * @param {?} task
-                     * @return {?}
-                     */function (task) { return task.taskName; }));
-                    if (_this.searchTerm) {
-                        _this.filteredOptions = _this.filteredOptions.filter(( /**
-                         * @param {?} taskName
-                         * @return {?}
-                         */function (taskName) { return taskName.toLocaleLowerCase().includes(_this.searchTerm.toLocaleLowerCase()); })).map(( /**
-                         * @param {?} taskName
-                         * @return {?}
-                         */function (taskName) { return taskName; }));
-                    }
-                    _this.cd.detectChanges();
-                }));
-            };
-        /**
-         * @return {?}
-         */
-        FindTaskNameComponent.prototype.getTaskName = /**
-         * @return {?}
-         */
-            function () {
-                return this.taskService.getTaskName();
-            };
-        /**
-         * @param {?} selectedTaskName
-         * @return {?}
-         */
-        FindTaskNameComponent.prototype.onSelectionChange = /**
-         * @param {?} selectedTaskName
-         * @return {?}
-         */
-            function (selectedTaskName) {
-                if (selectedTaskName) {
-                    this.taskNameSelected.emit(selectedTaskName);
-                    this.findTaskNameControl.setValue(selectedTaskName);
-                }
-            };
-        /**
-         * @return {?}
-         */
-        FindTaskNameComponent.prototype.onInput = /**
-         * @return {?}
-         */
-            function () {
-                this.taskNameFieldChanged.emit();
-            };
-        FindTaskNameComponent.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'xuilib-find-task-name',
-                        template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findTaskNameGroup\"\n     [ngClass]=\"{'form-group-error': findTaskNameGroup.get('findTaskNameControl')?.invalid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findTaskNameGroup && findTaskNameGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findTaskNameGroup.errors.error ? findTaskNameGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectTaskName{{idValue}}\" type=\"text\" aria-label=\"select a task name\"\n           formControlName=\"findTaskNameControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           (input)=\"onInput()\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"onSelectionChange($event.option.value)\">\n      <mat-option *ngFor=\"let option of filteredOptions\"\n                  [value]=\"option\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n                  {{ option }}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && !filteredOptions.length && showAutocomplete\">No results found</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
-                        styles: [""]
-                    }] }
-        ];
-        /** @nocollapse */
-        FindTaskNameComponent.ctorParameters = function () {
-            return [
-                { type: i0.ChangeDetectorRef },
-                { type: TaskNameService }
-            ];
-        };
-        FindTaskNameComponent.propDecorators = {
-            taskNameSelected: [{ type: i0.Output }],
-            taskNameFieldChanged: [{ type: i0.Output }],
-            title: [{ type: i0.Input }],
-            boldTitle: [{ type: i0.Input }],
-            subTitle: [{ type: i0.Input }],
-            domain: [{ type: i0.Input }],
-            findTaskNameGroup: [{ type: i0.Input }],
-            selectedTaskName: [{ type: i0.Input }],
-            submitted: [{ type: i0.Input }],
-            userIncluded: [{ type: i0.Input }],
-            assignedUser: [{ type: i0.Input }],
-            placeholderContent: [{ type: i0.Input }],
-            isNoResultsShown: [{ type: i0.Input }],
-            showUpdatedColor: [{ type: i0.Input }],
-            selectedTaskNames: [{ type: i0.Input }],
-            errorMessage: [{ type: i0.Input }],
-            idValue: [{ type: i0.Input }],
-            services: [{ type: i0.Input }],
-            disabled: [{ type: i0.Input }]
-        };
-        return FindTaskNameComponent;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/search-judicials/search-judicials.component.ts
@@ -6277,35 +5747,42 @@
      */
     var SearchServiceComponent = /** @class */ (function () {
         function SearchServiceComponent() {
-            this.services = [];
-            this.serviceChanged = new i0.EventEmitter();
+            this.showAutocomplete = false;
+            this.minSearchCharacters = 3;
+            this.term = '';
         }
         /**
-         * @param {?} key
          * @return {?}
          */
-        SearchServiceComponent.prototype.onSelectionChanged = /**
-         * @param {?} key
+        SearchServiceComponent.prototype.onInput = /**
          * @return {?}
          */
-            function (key) {
-                /** @type {?} */
-                var selectedService = this.services.find(( /**
-                 * @param {?} s
-                 * @return {?}
-                 */function (s) { return s.key === key; }));
-                this.serviceChanged.emit(selectedService);
+            function () {
+                // Todo
+            };
+        /**
+         * @return {?}
+         */
+        SearchServiceComponent.prototype.onSelectionChange = /**
+         * @return {?}
+         */
+            function () {
+                // Todo
             };
         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}"]
+                        template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChange()\">\n      {{ service.name }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
+                        styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:250px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
                     }] }
         ];
         SearchServiceComponent.propDecorators = {
             services: [{ type: i0.Input }],
-            serviceChanged: [{ type: i0.Output }]
+            selectedServices: [{ type: i0.Input }],
+            disabled: [{ type: i0.Input }],
+            delay: [{ type: i0.Input }],
+            form: [{ type: i0.Input }],
+            showAutocomplete: [{ type: i0.Input }]
         };
         return SearchServiceComponent;
     }());
@@ -6593,57 +6070,6 @@
         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
@@ -6659,99 +6085,15 @@
     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: "<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}"]
+                        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>"
                     }] }
         ];
         GovUkCheckboxesComponent.propDecorators = {
-            group: [{ type: i0.Input }],
-            config: [{ type: i0.Input }],
-            items: [{ type: i0.Input }],
-            errorMessage: [{ type: i0.Input }]
+            options: [{ type: i0.Input }],
+            errors: [{ type: i0.Input }]
         };
         return GovUkCheckboxesComponent;
     }());
@@ -6901,6 +6243,57 @@
         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
@@ -7048,7 +6441,7 @@
              * @return {?}
              */
             function () {
-                this.config.classes = typeof (this.config.classes) === 'string' ? this.config.classes : 'govuk-label govuk-label--m';
+                this.config.classes = 'govuk-label--m';
             };
         /**
          * @return {?}
@@ -7062,7 +6455,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       [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",
+                        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",
                         styles: [".gov-uk-input input:disabled{background:#b1b4b6}"]
                     }] }
         ];
@@ -7093,8 +6486,7 @@
         GovUkLabelComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-label',
-                        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}"]
+                        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>"
                     }] }
         ];
         /** @nocollapse */
@@ -7213,7 +6605,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\"\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"
+                        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>"
                     }] }
         ];
         /** @nocollapse */
@@ -7315,25 +6707,27 @@
      * 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: "<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}"]
+                        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%}"]
                     }] }
         ];
+        /** @nocollapse */
+        HmctsBannerComponent.ctorParameters = function () { return []; };
         HmctsBannerComponent.propDecorators = {
-            message: [{ type: i0.Input }],
             type: [{ type: i0.Input }],
-            title: [{ type: i0.Input }],
-            showMessageIcon: [{ type: i0.Input }],
-            messageBoldText: [{ type: i0.Input }]
+            message: [{ type: i0.Input }]
         };
         return HmctsBannerComponent;
     }());
@@ -7513,7 +6907,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\"\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"
+                        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"
                     }] }
         ];
         /** @nocollapse */
@@ -7666,33 +7060,6 @@
         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
@@ -7731,7 +7098,6 @@
         FindPersonComponent,
         SearchJudicialsComponent,
         FindLocationComponent,
-        FindTaskNameComponent,
         SearchLocationComponent,
         FindServiceComponent,
         SearchServiceComponent,
@@ -7763,25 +7129,21 @@
         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, pipes),
+                        declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS),
                         imports: [
                             i4.CommonModule,
                             forms.FormsModule,
                             forms.ReactiveFormsModule,
                             i2$2.RouterModule.forChild([]),
                             autocomplete.MatAutocompleteModule,
-                            material.MatTabsModule,
-                            material.MatInputModule,
+                            tabs.MatTabsModule,
+                            input.MatInputModule,
                             ngxPagination.NgxPaginationModule
                         ],
                         providers: [
@@ -7789,7 +7151,7 @@
                         ],
                         exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, [
                             ngxPagination.PaginatePipe
-                        ], pipes)
+                        ])
                     },] }
         ];
         return ExuiCommonLibModule;
@@ -8597,18 +7959,19 @@
      */
     var RoleService = /** @class */ (function () {
         function RoleService() {
-            this.pRoles = new rxjs.BehaviorSubject(null);
-            this.roles$ = this.pRoles.asObservable().pipe(operators.skipWhile(( /**
-             * @param {?} item
-             * @return {?}
-             */function (item) { return item === null; })));
+            this.pRoles = [];
         }
         Object.defineProperty(RoleService.prototype, "roles", {
+            get: /**
+             * @return {?}
+             */ function () {
+                return this.pRoles;
+            },
             set: /**
              * @param {?} roles
              * @return {?}
              */ function (roles) {
-                this.pRoles.next(roles);
+                this.pRoles = roles;
             },
             enumerable: true,
             configurable: true
@@ -8649,28 +8012,23 @@
          */
             function (route) {
                 var _this = this;
-                return this.roleService.roles$.pipe(operators.map(( /**
-                 * @param {?} roles
+                /** @type {?} */
+                var roles = (( /** @type {?} */(route.data.needsRole)));
+                /** @type {?} */
+                var check = ( /**
+                 * @param {?} roleRegEx
                  * @return {?}
-                 */function (roles) {
+                 */function (roleRegEx) {
                     /** @type {?} */
-                    var canActivateRoles = (( /** @type {?} */(route.data.needsRole)));
-                    /** @type {?} */
-                    var check = ( /**
-                     * @param {?} roleRegEx
+                    var regex = new RegExp(roleRegEx);
+                    return _this.roleService.roles.some(( /**
+                     * @param {?} role
                      * @return {?}
-                     */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)));
-                })));
+                     */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)));
             };
         RoleGuard.decorators = [
             { type: i0.Injectable, args: [{
@@ -8835,7 +8193,7 @@
     exports.dateValidator = dateValidator;
     exports.radioGroupValidator = radioGroupValidator;
     exports.HmctsSubNavigationComponent = HmctsSubNavigationComponent;
-    exports.HmctsBannerComponent = HmctsBannerComponent;
+    exports.SharedCaseErrorMessages = SharedCaseErrorMessages;
     exports.BadgeColour = BadgeColour;
     exports.DateBadgeColour = DateBadgeColour;
     exports.SECONDS_IN_A_DAY = SECONDS_IN_A_DAY;
@@ -8869,18 +8227,17 @@
     exports.ɵa = ExuiPageWrapperComponent;
     exports.ɵbl = FindLocationComponent;
     exports.ɵbh = FindPersonComponent;
-    exports.ɵbq = FindServiceComponent;
-    exports.ɵbo = FindTaskNameComponent;
+    exports.ɵbo = FindServiceComponent;
     exports.ɵbd = GenericFilterComponent;
     exports.ɵk = HmctsSessionDialogComponent;
     exports.ɵo = InviteUserFormComponent;
     exports.ɵn = InviteUserPermissionComponent;
     exports.ɵbc = LoadingSpinnerComponent;
-    exports.ɵbt = PaginationComponent;
+    exports.ɵbr = PaginationComponent;
     exports.ɵbk = SearchJudicialsComponent;
     exports.ɵbm = SearchLocationComponent;
-    exports.ɵbr = SearchServiceComponent;
-    exports.ɵbs = SearchVenueComponent;
+    exports.ɵbp = SearchServiceComponent;
+    exports.ɵbq = SearchVenueComponent;
     exports.ɵv = SelectedCaseConfirmComponent;
     exports.ɵt = SelectedCaseListComponent;
     exports.ɵu = SelectedCaseComponent;
@@ -8899,29 +8256,28 @@
     exports.ɵg = FeatureToggleDirective;
     exports.ɵi = LetContext;
     exports.ɵj = LetDirective;
-    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.ɵcb = GovUkCheckboxComponent;
+    exports.ɵch = GovUkCheckboxesComponent;
+    exports.ɵcg = GovUkDateComponent;
+    exports.ɵce = GovUkErrorMessageComponent;
+    exports.ɵcf = GovUkFieldsetComponent;
+    exports.ɵcm = GovUkFileUploadComponent;
+    exports.ɵcc = GovUkFormGroupWrapperComponent;
+    exports.ɵca = GovUkInputComponent;
+    exports.ɵcd = GovUkLabelComponent;
+    exports.ɵci = GovUkRadioComponent;
+    exports.ɵcj = GovUkRadiosComponent;
+    exports.ɵck = GovUkSelectComponent;
+    exports.ɵbz = GovukTableComponent;
+    exports.ɵcl = GovUkTextareaComponent;
+    exports.ɵby = HmctsBannerComponent;
+    exports.ɵbw = HmctsErrorSummaryComponent;
+    exports.ɵbs = HmctsIdentityBarComponent;
+    exports.ɵbx = HmctsMainWrapperComponent;
+    exports.ɵbt = HmctsPaginationComponent;
+    exports.ɵbv = HmctsPrimaryNavigationComponent;
+    exports.ɵbu = HmctsSubNavigationComponent;
+    exports.ɵcn = RemoveHostDirective;
     exports.ɵr = CaseSharingStateService;
     exports.ɵbg = CookieService;
     exports.ɵh = FeatureToggleService;
@@ -8929,7 +8285,6 @@
     exports.ɵbi = FindAPersonService;
     exports.ɵbn = LocationService;
     exports.ɵbj = SessionStorageService;
-    exports.ɵbp = TaskNameService;
 
     Object.defineProperty(exports, '__esModule', { value: true });