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

package/fesm5/hmcts-rpx-xui-common-lib.js

@@ -1,5 +1,6 @@
-import { MatInputModule, MatTabsModule } from '@angular/material';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatTabsModule } from '@angular/material/tabs';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
 import { HttpClient } from '@angular/common/http';
 import { FormArray, FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -9,10 +10,10 @@ import { formatDate, DOCUMENT, CommonModule } from '@angular/common';
 import { Title } from '@angular/platform-browser';
 import { DocumentInterruptSource, Idle } from '@ng-idle/core';
 import { Keepalive } from '@ng-idle/keepalive';
-import { RouterModule, Router, NavigationEnd } from '@angular/router';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Pipe, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ChangeDetectorRef, ViewChild, InjectionToken, defineInjectable, inject, NgModule, ChangeDetectionStrategy } from '@angular/core';
+import { Router, RouterModule, NavigationEnd } from '@angular/router';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ViewChild, ChangeDetectorRef, InjectionToken, defineInjectable, inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { BehaviorSubject, of, zip, Subject, combineLatest } from 'rxjs';
-import { distinctUntilChanged, map, debounceTime, filter, mergeMap, tap, catchError, switchMap, delay, skipWhile } from 'rxjs/operators';
+import { distinctUntilChanged, map, tap, debounceTime, filter, mergeMap, catchError, switchMap, delay } from 'rxjs/operators';
 
 /**
  * @fileoverview added by tsickle
@@ -662,7 +663,7 @@ var FilterService = /** @class */ (function () {
             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)) {
@@ -701,24 +702,6 @@ var FilterService = /** @class */ (function () {
         }
         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
@@ -744,7 +727,7 @@ var FilterService = /** @class */ (function () {
      * @return {?}
      */
     function (setting) {
-        sessionStorage.setItem(setting.id, JSON.stringify(setting));
+        window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
     };
     /**
      * @private
@@ -823,7 +806,7 @@ function minSelectedValidator(min) {
          * @param {?} value
          * @return {?}
          */
-        function (value) { return value; })).length >= min ? null : { minlength: true };
+        function (value) { return value; })).length >= min ? null : { minLength: true };
     });
 }
 /**
@@ -876,7 +859,6 @@ var GenericFilterComponent = /** @class */ (function () {
         this.filterService = filterService;
         this.fb = fb;
         this.submitted = false;
-        this.previousSelectedNestedCheckbox = [];
     }
     Object.defineProperty(GenericFilterComponent.prototype, "config", {
         get: /**
@@ -936,10 +918,10 @@ var GenericFilterComponent = /** @class */ (function () {
     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;
@@ -961,17 +943,6 @@ var GenericFilterComponent = /** @class */ (function () {
          * @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 {?}
@@ -1146,11 +1117,6 @@ var GenericFilterComponent = /** @class */ (function () {
      * @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);
@@ -1172,9 +1138,6 @@ var GenericFilterComponent = /** @class */ (function () {
         this.filterService.persist(settings, this.config.persistence);
         this.filterService.givenErrors.next(null);
         this.submitted = false;
-        if (this.config.cancelButtonCallback) {
-            this.config.cancelButtonCallback();
-        }
     };
     /**
      * @param {?} values
@@ -1214,32 +1177,6 @@ var GenericFilterComponent = /** @class */ (function () {
             finally { if (e_2) throw e_2.error; }
         }
     };
-    /**
-     * @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
@@ -1341,58 +1278,6 @@ var GenericFilterComponent = /** @class */ (function () {
                 finally { if (e_3) throw e_3.error; }
             }
         }
-        if (field.name === 'user-services') {
-            this.startFilterSkillsByServices(form, field);
-        }
-        else if (field.name === 'user-skills') {
-            if (isChecked) {
-                /** @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
@@ -1500,14 +1385,14 @@ var GenericFilterComponent = /** @class */ (function () {
             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 {
@@ -1515,12 +1400,6 @@ var GenericFilterComponent = /** @class */ (function () {
                 var validators = [];
                 if (field.minSelected && field.minSelected > 0) {
                     validators.push(Validators.required);
-                    if (field.type === 'text-input') {
-                        validators.push(Validators.minLength(field.minSelected));
-                    }
-                    if (field.type === 'email-input') {
-                        validators.push(Validators.email);
-                    }
                 }
                 /** @type {?} */
                 var defaultValue = null;
@@ -1554,7 +1433,7 @@ var GenericFilterComponent = /** @class */ (function () {
                     });
                     this_1.form.addControl(field.name, formGroup);
                 }
-                else if (field.type !== 'group-title') {
+                else {
                     /** @type {?} */
                     var control = new FormControl(defaultValue, validators);
                     this_1.form.addControl(field.name, control);
@@ -1640,7 +1519,7 @@ var GenericFilterComponent = /** @class */ (function () {
      * @param {?} settings
      * @return {?}
      */
-    GenericFilterComponent.prototype.buildFormArray = /**
+    GenericFilterComponent.prototype.buildFindLocationFormArray = /**
      * @private
      * @param {?} field
      * @param {?} settings
@@ -1705,7 +1584,7 @@ var GenericFilterComponent = /** @class */ (function () {
                  * @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 {
@@ -1736,11 +1615,11 @@ var GenericFilterComponent = /** @class */ (function () {
                 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 });
                 }
             }
         }
@@ -1751,290 +1630,17 @@ var GenericFilterComponent = /** @class */ (function () {
             }
             finally { if (e_8) throw e_8.error; }
         }
-        // remove duplicates
-        errors = errors.filter((/**
-         * @param {?} filterError
-         * @param {?} i
-         * @param {?} arr
-         * @return {?}
-         */
-        function (filterError, i, arr) {
-            return errors.indexOf(arr.find((/**
-             * @param {?} item
-             * @return {?}
-             */
-            function (item) { return item.name === filterError.name; }))) === i;
-        }));
         if (errors.length) {
             this.filterService.givenErrors.next(errors);
         }
     };
-    /**
-     * @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 FormArray([]));
-                this.filteredSkillsByServicesCheckbox.forEach((/**
-                 * @return {?}
-                 */
-                function () {
-                    ((/** @type {?} */ (_this.form.get('user-skills')))).push(new 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: 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: ChangeDetectionStrategy.OnPush,
                     encapsulation: 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 */
@@ -2293,29 +1899,52 @@ var CaseSharingStateService = /** @class */ (function () {
         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 {?}
@@ -2324,11 +1953,10 @@ var CaseSharingStateService = /** @class */ (function () {
                             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 {
@@ -2344,7 +1972,7 @@ var CaseSharingStateService = /** @class */ (function () {
             finally { if (e_2) throw e_2.error; }
         }
         this.subject.next(newSharedCases);
-        return;
+        return newSharedCases;
     };
     /**
      * @param {?} caseId
@@ -2414,11 +2042,13 @@ var CaseSharingStateService = /** @class */ (function () {
      * @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;
+                }
             }
         }
     };
@@ -2505,7 +2135,7 @@ var SelectedCaseConfirmComponent = /** @class */ (function () {
     SelectedCaseConfirmComponent.decorators = [
         { type: 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%}"]
                 }] }
     ];
@@ -2652,15 +2282,6 @@ var SelectedCaseComponent = /** @class */ (function () {
             this.combinedSortedShares = this.combineAndSortShares(sharedWith, pendingShares);
         }
     };
-    /**
-     * @return {?}
-     */
-    SelectedCaseComponent.prototype.onUnselect = /**
-     * @return {?}
-     */
-    function () {
-        this.unselect.emit(this.sharedCase);
-    };
     /**
      * @param {?} c
      * @return {?}
@@ -2869,7 +2490,7 @@ var SelectedCaseComponent = /** @class */ (function () {
      * @return {?}
      */
     function (user, sharedCase) {
-        this.stateService.requestUnshare(sharedCase.caseId, user);
+        this.stateService.requestUnshare(user, sharedCase.caseId);
         this.synchronizeStore.emit(this.shareCases);
     };
     /**
@@ -2989,8 +2610,8 @@ var SelectedCaseComponent = /** @class */ (function () {
     SelectedCaseComponent.decorators = [
         { type: 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 */
@@ -3279,6 +2900,18 @@ var ShareCaseConfirmComponent = /** @class */ (function () {
     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
@@ -3402,17 +3035,23 @@ var UserSelectComponent = /** @class */ (function () {
  * @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 EventEmitter();
         this.synchronizeStore = new EventEmitter();
+        this.validationErrors = [];
     }
     /**
      * @return {?}
@@ -3422,15 +3061,36 @@ var ShareCaseComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this.shareCases$.subscribe((/**
+        this.shareCases$
+            .pipe(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
@@ -3441,8 +3101,16 @@ var ShareCaseComponent = /** @class */ (function () {
      * @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
@@ -3480,6 +3148,21 @@ var ShareCaseComponent = /** @class */ (function () {
             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 {?}
@@ -3491,14 +3174,25 @@ var ShareCaseComponent = /** @class */ (function () {
         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 {?}
@@ -3509,11 +3203,11 @@ var ShareCaseComponent = /** @class */ (function () {
                 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;
                     }
                 }
@@ -3526,7 +3220,6 @@ var ShareCaseComponent = /** @class */ (function () {
                 finally { if (e_1) throw e_1.error; }
             }
         }));
-        return isDisabled;
     };
     /**
      * @param {?} sharedCase
@@ -3560,24 +3253,143 @@ var ShareCaseComponent = /** @class */ (function () {
         }
         this.stateService.setCases(this.shareCases);
     };
+    /**
+     * @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: 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",
+                    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: CaseSharingStateService },
+        { type: Router }
     ]; };
     ShareCaseComponent.propDecorators = {
         removeUserFromCaseToggleOn: [{ type: Input }],
         shareCases$: [{ type: Input }],
         users: [{ type: Input }],
         confirmLink: [{ type: Input }],
+        cancelLink: [{ type: Input }],
         addUserLabel: [{ type: Input }],
         showRemoveUsers: [{ type: Input }],
+        fnTitle: [{ type: Input }],
+        title: [{ type: Input }],
         unselect: [{ type: Output }],
         synchronizeStore: [{ type: Output }],
         userSelect: [{ type: ViewChild, args: [UserSelectComponent,] }]
@@ -4111,12 +3923,6 @@ var CookieBannerComponent = /** @class */ (function () {
     return CookieBannerComponent;
 }());
 
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/models/case-share.model.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/models/contact-details.model.ts
@@ -4179,7 +3985,7 @@ var PersonRole = {
     JUDICIAL: "Judicial",
     CASEWORKER: "Legal Ops",
     ADMIN: "Admin",
-    CTSC: "CTSC User",
+    CTSC: "CTSC",
     ALL: "All",
 };
 /** @enum {string} */
@@ -4320,7 +4126,7 @@ var LocationService = /** @class */ (function () {
 
 /**
  * @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 () {
@@ -4638,7 +4444,7 @@ var SearchLocationComponent = /** @class */ (function () {
         { type: 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 */
@@ -4897,8 +4703,8 @@ var FindLocationComponent = /** @class */ (function () {
     FindLocationComponent.decorators = [
         { type: 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 = {
@@ -5635,408 +5441,38 @@ var FindPersonComponent = /** @class */ (function () {
  */
 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 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 {?}
      */
     FindServiceComponent.prototype.addService = /**
-     * @return {?}
-     */
-    function () {
-        var _this = this;
-        if (this.tempSelectedService === null) {
-            return;
-        }
-        this.selectedServices = __spread(this.selectedServices, [this.tempSelectedService]);
-        this.addSelectedServicesToForm([this.tempSelectedService]);
-        this.services = this.services.filter((/**
-         * @param {?} s
-         * @return {?}
-         */
-        function (s) { return s.key !== _this.tempSelectedService.key; }));
-        this.tempSelectedService = null;
-        this.serviceFieldChanged.emit();
-    };
-    /**
-     * @param {?} service
-     * @return {?}
-     */
-    FindServiceComponent.prototype.removeService = /**
-     * @param {?} service
-     * @return {?}
-     */
-    function (service) {
-        if (service.key) {
-            this.selectedServices = this.selectedServices !== null ? this.selectedServices.filter((/**
-             * @param {?} selectedService
-             * @return {?}
-             */
-            function (selectedService) { return selectedService.key !== service.key; })) : [];
-            /** @type {?} */
-            var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
-            /** @type {?} */
-            var index = (formArray.value).findIndex((/**
-             * @param {?} selectedService
-             * @return {?}
-             */
-            function (selectedService) { return selectedService.key === service.key; }));
-            if (index > -1) {
-                formArray.removeAt(index);
-                this.services.splice(index, 0, service);
-                this.SortAnOptions();
-            }
-            this.serviceFieldChanged.emit();
-        }
-    };
-    /**
-     * @param {?} service
-     * @return {?}
-     */
-    FindServiceComponent.prototype.onServiceSelected = /**
-     * @param {?} service
-     * @return {?}
-     */
-    function (service) {
-        if (!service) {
-            this.tempSelectedService = null;
-            return;
-        }
-        if (this.field.maxSelected === 1) {
-            this.removeSelectedValues();
-            this.addSelectedServicesToForm([service]);
-        }
-        else {
-            if (!this.selectedServices.find((/**
-             * @param {?} s
-             * @return {?}
-             */
-            function (s) { return s.key === service.key; }))) {
-                if (service.key) {
-                    this.tempSelectedService = service;
-                }
-            }
-        }
-    };
-    /**
-     * @private
-     * @return {?}
-     */
-    FindServiceComponent.prototype.removeSelectedValues = /**
-     * @private
-     * @return {?}
-     */
-    function () {
-        /** @type {?} */
-        var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
-        for (var i = 0; i < formArray.length; i++) {
-            formArray.removeAt(i);
-        }
-        this.selectedServices = [];
-    };
-    /**
-     * @private
-     * @param {?} services
-     * @return {?}
-     */
-    FindServiceComponent.prototype.addSelectedServicesToForm = /**
-     * @private
-     * @param {?} services
-     * @return {?}
-     */
-    function (services) {
-        var e_1, _a;
-        /** @type {?} */
-        var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
-        try {
-            for (var services_1 = __values(services), services_1_1 = services_1.next(); !services_1_1.done; services_1_1 = services_1.next()) {
-                var service = services_1_1.value;
-                formArray.push(new FormControl(service));
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (services_1_1 && !services_1_1.done && (_a = services_1.return)) _a.call(services_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-    };
-    /**
-     * @private
-     * @return {?}
-     */
-    FindServiceComponent.prototype.SortAnOptions = /**
-     * @private
-     * @return {?}
-     */
-    function () {
-        return this.services.sort((/**
-         * @param {?} a
-         * @param {?} b
-         * @return {?}
-         */
-        function (a, b) {
-            return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : (b.label.toLowerCase() > a.label.toLowerCase() ? -1 : 0);
-        }));
-    };
-    FindServiceComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'xuilib-find-service',
-                    template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\" [services]=\"services\"\n        (serviceChanged)=\"onServiceSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeService(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label }}\n      </a>\n    </li>\n  </ul>\n</div>",
-                    styles: ["#add-service{background-color:#ddd}.search-service__input-container{display:flex}.search-service__input{flex:1 0 auto}"]
-                }] }
-    ];
-    FindServiceComponent.propDecorators = {
-        field: [{ type: Input }],
-        fields: [{ type: Input }],
-        serviceTitle: [{ type: Input }],
-        form: [{ type: Input }],
-        services: [{ type: Input }],
-        selectedServices: [{ type: Input }],
-        enableAddServiceButton: [{ type: Input }],
-        disabled: [{ type: Input }],
-        serviceFieldChanged: [{ type: Output }]
-    };
-    return FindServiceComponent;
-}());
-
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/services/task-name/task-name.service.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var TaskNameService = /** @class */ (function () {
-    function TaskNameService(http, sessionStorageService) {
-        this.http = http;
-        this.sessionStorageService = sessionStorageService;
-    }
-    /**
-     * @return Observable<any[]>: Array of taskName in Observable
-     */
-    /**
-     * @return {?} Observable<any[]>: Array of taskName in Observable
-     */
-    TaskNameService.prototype.getTaskName = /**
-     * @return {?} Observable<any[]>: Array of taskName in Observable
-     */
-    function () {
-        var _this = this;
-        if (this.sessionStorageService.getItem(TaskNameService.taskNamesKey)) {
-            /** @type {?} */
-            var taskNames = JSON.parse(this.sessionStorageService.getItem(TaskNameService.taskNamesKey));
-            return of((/** @type {?} */ (taskNames)));
-        }
-        return this.http.get("/workallocation/taskNames").pipe(tap((/**
-         * @param {?} taskNames
-         * @return {?}
-         */
-        function (taskNames) { return _this.sessionStorageService.setItem(TaskNameService.taskNamesKey, JSON.stringify(taskNames)); })));
-    };
-    TaskNameService.taskNamesKey = 'taskNames';
-    TaskNameService.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    TaskNameService.ctorParameters = function () { return [
-        { type: HttpClient },
-        { type: SessionStorageService }
-    ]; };
-    /** @nocollapse */ TaskNameService.ngInjectableDef = defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(inject(HttpClient), 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 EventEmitter();
-        this.taskNameFieldChanged = new 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 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 FormControl(this.selectedTaskName);
-        this.findTaskNameGroup.addControl('findTaskNameControl', this.findTaskNameControl);
-        this.sub = this.findTaskNameControl.valueChanges
-            .pipe(tap((/**
-         * @return {?}
-         */
-        function () { return _this.showAutocomplete = false; })), tap((/**
-         * @return {?}
-         */
-        function () { return _this.filteredOptions = []; })), tap((/**
-         * @param {?} term
-         * @return {?}
-         */
-        function (term) { return _this.searchTerm = term; })), debounceTime(300), tap((/**
-         * @param {?} searchTerm
-         * @return {?}
-         */
-        function (searchTerm) {
-            if (!searchTerm) {
-                _this.taskNameSelected.emit('');
-            }
-            return searchTerm;
-        })), 
-        // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit('null') : void 0),
-        filter((/**
-         * @param {?} searchTerm
-         * @return {?}
-         */
-        function (searchTerm) { return searchTerm && searchTerm.length >= _this.minSearchCharacters; })), 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: 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: ChangeDetectorRef },
-        { type: TaskNameService }
-    ]; };
-    FindTaskNameComponent.propDecorators = {
-        taskNameSelected: [{ type: Output }],
-        taskNameFieldChanged: [{ type: Output }],
-        title: [{ type: Input }],
-        boldTitle: [{ type: Input }],
-        subTitle: [{ type: Input }],
-        domain: [{ type: Input }],
-        findTaskNameGroup: [{ type: Input }],
-        selectedTaskName: [{ type: Input }],
-        submitted: [{ type: Input }],
-        userIncluded: [{ type: Input }],
-        assignedUser: [{ type: Input }],
-        placeholderContent: [{ type: Input }],
-        isNoResultsShown: [{ type: Input }],
-        showUpdatedColor: [{ type: Input }],
-        selectedTaskNames: [{ type: Input }],
-        errorMessage: [{ type: Input }],
-        idValue: [{ type: Input }],
+     * @return {?}
+     */
+    function () {
+        // Todo
+    };
+    FindServiceComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'xuilib-find-service',
+                    template: "<div class=\"service-picker-custom\">\n    <div class=\"search-service\">\n      <div>\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <exui-search-service class=\"search-service\"\n                            [services]=\"services\"\n                            [selectedServices]=\"selectedServices\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"></exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" \n        data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n    <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n      <li class=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\n        </a>\n      </li>\n    </ul>\n  </div>",
+                    styles: ["#add-service{background-color:#ddd}"]
+                }] }
+    ];
+    FindServiceComponent.propDecorators = {
+        field: [{ type: Input }],
+        fields: [{ type: Input }],
+        serviceTitle: [{ type: Input }],
+        form: [{ type: Input }],
         services: [{ type: Input }],
-        disabled: [{ type: Input }]
+        selectedServices: [{ type: Input }],
+        disabled: [{ type: Input }],
+        enableAddServiceButton: [{ type: Input }],
+        disableInputField: [{ type: Input }]
     };
-    return FindTaskNameComponent;
+    return FindServiceComponent;
 }());
 
 /**
@@ -6287,36 +5723,42 @@ var SearchJudicialsComponent = /** @class */ (function () {
  */
 var SearchServiceComponent = /** @class */ (function () {
     function SearchServiceComponent() {
-        this.services = [];
-        this.serviceChanged = new 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: 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: Input }],
-        serviceChanged: [{ type: Output }]
+        selectedServices: [{ type: Input }],
+        disabled: [{ type: Input }],
+        delay: [{ type: Input }],
+        form: [{ type: Input }],
+        showAutocomplete: [{ type: Input }]
     };
     return SearchServiceComponent;
 }());
@@ -6606,58 +6048,6 @@ var GovUkCheckboxComponent = /** @class */ (function () {
     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
@@ -6673,100 +6063,15 @@ HtmlTemplatesHelper = /** @class */ (function () {
 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: 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: Input }],
-        config: [{ type: Input }],
-        items: [{ type: Input }],
-        errorMessage: [{ type: Input }]
+        options: [{ type: Input }],
+        errors: [{ type: Input }]
     };
     return GovUkCheckboxesComponent;
 }());
@@ -6917,6 +6222,58 @@ var GovUkErrorMessageComponent = /** @class */ (function () {
     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
@@ -7064,7 +6421,7 @@ var GovUkInputComponent = /** @class */ (function () {
      * @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 {?}
@@ -7078,7 +6435,7 @@ var GovUkInputComponent = /** @class */ (function () {
     GovUkInputComponent.decorators = [
         { type: 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}"]
                 }] }
     ];
@@ -7109,8 +6466,7 @@ var GovUkLabelComponent = /** @class */ (function () {
     GovUkLabelComponent.decorators = [
         { type: 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 */
@@ -7229,7 +6585,7 @@ var GovUkSelectComponent = /** @class */ (function () {
     GovUkSelectComponent.decorators = [
         { type: 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 */
@@ -7331,25 +6687,27 @@ var GovUkTextareaComponent = /** @class */ (function () {
  * 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: 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: Input }],
         type: [{ type: Input }],
-        title: [{ type: Input }],
-        showMessageIcon: [{ type: Input }],
-        messageBoldText: [{ type: Input }]
+        message: [{ type: Input }]
     };
     return HmctsBannerComponent;
 }());
@@ -7530,7 +6888,7 @@ var HmctsMainWrapperComponent = /** @class */ (function () {
     HmctsMainWrapperComponent.decorators = [
         { type: 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 */
@@ -7682,33 +7040,6 @@ var RemoveHostDirective = /** @class */ (function () {
     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: Pipe, args: [{ name: 'capitalize' },] }
-    ];
-    return CapitalizePipe;
-}());
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/exui-common-lib.module.ts
@@ -7747,7 +7078,6 @@ var COMMON_COMPONENTS = [
     FindPersonComponent,
     SearchJudicialsComponent,
     FindLocationComponent,
-    FindTaskNameComponent,
     SearchLocationComponent,
     FindServiceComponent,
     SearchServiceComponent,
@@ -7779,17 +7109,13 @@ var GOV_UI_COMPONENTS = [
     GovUkFileUploadComponent,
     RemoveHostDirective
 ];
-/** @type {?} */
-var pipes = [
-    CapitalizePipe
-];
 var ɵ0 = windowProvider;
 var ExuiCommonLibModule = /** @class */ (function () {
     function ExuiCommonLibModule() {
     }
     ExuiCommonLibModule.decorators = [
         { type: NgModule, args: [{
-                    declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, pipes),
+                    declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS),
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -7805,7 +7131,7 @@ var ExuiCommonLibModule = /** @class */ (function () {
                     ],
                     exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, [
                         PaginatePipe
-                    ], pipes)
+                    ])
                 },] }
     ];
     return ExuiCommonLibModule;
@@ -8625,20 +7951,21 @@ var TimeoutNotificationsService = /** @class */ (function () {
  */
 var RoleService = /** @class */ (function () {
     function RoleService() {
-        this.pRoles = new BehaviorSubject(null);
-        this.roles$ = this.pRoles.asObservable().pipe(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
@@ -8679,31 +8006,25 @@ var RoleGuard = /** @class */ (function () {
      */
     function (route) {
         var _this = this;
-        return this.roleService.roles$.pipe(map((/**
-         * @param {?} roles
+        /** @type {?} */
+        var roles = ((/** @type {?} */ (route.data.needsRole)));
+        /** @type {?} */
+        var check = (/**
+         * @param {?} roleRegEx
          * @return {?}
          */
-        function (roles) {
-            /** @type {?} */
-            var canActivateRoles = ((/** @type {?} */ (route.data.needsRole)));
+        function (roleRegEx) {
             /** @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: Injectable, args: [{
@@ -8831,6 +8152,6 @@ var LoadingService = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AccessibilityComponent, CheckboxListComponent, ContactDetailsComponent, DueDateComponent, GenericFilterComponent, HmctsSessionDialogComponent, InviteUserFormComponent, InviteUserPermissionComponent, LoadingSpinnerComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, SelectedCaseComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseConfirmComponent, ShareCaseComponent, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, UserDetailsComponent, UserListComponent, CookieBannerComponent, FindLocationComponent, SearchLocationComponent, PaginationComponent, FeatureToggleDirective, LetContext, LetDirective, COMMON_COMPONENTS, GOV_UI_COMPONENTS, ExuiCommonLibModule, GovUiService, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, HmctsSubNavigationComponent, HmctsBannerComponent, BadgeColour, DateBadgeColour, SECONDS_IN_A_DAY, AnonymousFeatureUser, LoggedInFeatureUser, BookingCheckType, PersonRole, RoleCategory, RadioFilterFieldConfig, FeatureToggleGuard, FeatureToggleService, LaunchDarklyService, GoogleAnalyticsService, GoogleTagManagerService, ManageSessionServices, TimeoutNotificationsService, RoleMatching, RoleGuard, RoleService, CookieService, HasLoadingState, LoadingService, FilterService, windowProvider, windowToken, AccessibilityComponent as ɵx, CheckboxListComponent as ɵz, ContactDetailsComponent as ɵf, CookieBannerComponent as ɵbf, DueDateComponent as ɵy, ExuiPageWrapperComponent as ɵa, FindLocationComponent as ɵbl, FindPersonComponent as ɵbh, FindServiceComponent as ɵbq, FindTaskNameComponent as ɵbo, GenericFilterComponent as ɵbd, HmctsSessionDialogComponent as ɵk, InviteUserFormComponent as ɵo, InviteUserPermissionComponent as ɵn, LoadingSpinnerComponent as ɵbc, PaginationComponent as ɵbt, SearchJudicialsComponent as ɵbk, SearchLocationComponent as ɵbm, SearchServiceComponent as ɵbr, SearchVenueComponent as ɵbs, SelectedCaseConfirmComponent as ɵv, SelectedCaseListComponent as ɵt, SelectedCaseComponent as ɵu, ServiceMessageComponent as ɵba, ServiceMessagesComponent as ɵbb, ShareCaseConfirmComponent as ɵs, ShareCaseComponent as ɵp, TabComponent as ɵw, TcConfirmComponent as ɵe, TcDisplayHtmlComponent as ɵc, TcDisplayPlainComponent as ɵd, TermsAndConditionsComponent as ɵb, UserDetailsComponent as ɵm, UserListComponent as ɵl, UserSelectComponent as ɵq, FeatureToggleDirective as ɵg, LetContext as ɵi, LetDirective as ɵj, GovUkCheckboxComponent as ɵcd, GovUkCheckboxesComponent as ɵcj, GovUkDateComponent as ɵci, GovUkErrorMessageComponent as ɵcg, GovUkFieldsetComponent as ɵch, GovUkFileUploadComponent as ɵco, GovUkFormGroupWrapperComponent as ɵce, GovUkInputComponent as ɵcc, GovUkLabelComponent as ɵcf, GovUkRadioComponent as ɵck, GovUkRadiosComponent as ɵcl, GovUkSelectComponent as ɵcm, GovukTableComponent as ɵcb, GovUkTextareaComponent as ɵcn, HmctsBannerComponent as ɵca, HmctsErrorSummaryComponent as ɵby, HmctsIdentityBarComponent as ɵbu, HmctsMainWrapperComponent as ɵbz, HmctsPaginationComponent as ɵbv, HmctsPrimaryNavigationComponent as ɵbx, HmctsSubNavigationComponent as ɵbw, RemoveHostDirective as ɵcp, CapitalizePipe as ɵcq, CaseSharingStateService as ɵr, CookieService as ɵbg, FeatureToggleService as ɵh, FilterService as ɵbe, FindAPersonService as ɵbi, LocationService as ɵbn, SessionStorageService as ɵbj, TaskNameService as ɵbp };
+export { AccessibilityComponent, CheckboxListComponent, ContactDetailsComponent, DueDateComponent, GenericFilterComponent, HmctsSessionDialogComponent, InviteUserFormComponent, InviteUserPermissionComponent, LoadingSpinnerComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, SelectedCaseComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseConfirmComponent, ShareCaseComponent, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, UserDetailsComponent, UserListComponent, CookieBannerComponent, FindLocationComponent, SearchLocationComponent, PaginationComponent, FeatureToggleDirective, LetContext, LetDirective, COMMON_COMPONENTS, GOV_UI_COMPONENTS, ExuiCommonLibModule, GovUiService, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, HmctsSubNavigationComponent, SharedCaseErrorMessages, BadgeColour, DateBadgeColour, SECONDS_IN_A_DAY, AnonymousFeatureUser, LoggedInFeatureUser, BookingCheckType, PersonRole, RoleCategory, RadioFilterFieldConfig, FeatureToggleGuard, FeatureToggleService, LaunchDarklyService, GoogleAnalyticsService, GoogleTagManagerService, ManageSessionServices, TimeoutNotificationsService, RoleMatching, RoleGuard, RoleService, CookieService, HasLoadingState, LoadingService, FilterService, windowProvider, windowToken, AccessibilityComponent as ɵx, CheckboxListComponent as ɵz, ContactDetailsComponent as ɵf, CookieBannerComponent as ɵbf, DueDateComponent as ɵy, ExuiPageWrapperComponent as ɵa, FindLocationComponent as ɵbl, FindPersonComponent as ɵbh, FindServiceComponent as ɵbo, GenericFilterComponent as ɵbd, HmctsSessionDialogComponent as ɵk, InviteUserFormComponent as ɵo, InviteUserPermissionComponent as ɵn, LoadingSpinnerComponent as ɵbc, PaginationComponent as ɵbr, SearchJudicialsComponent as ɵbk, SearchLocationComponent as ɵbm, SearchServiceComponent as ɵbp, SearchVenueComponent as ɵbq, SelectedCaseConfirmComponent as ɵv, SelectedCaseListComponent as ɵt, SelectedCaseComponent as ɵu, ServiceMessageComponent as ɵba, ServiceMessagesComponent as ɵbb, ShareCaseConfirmComponent as ɵs, ShareCaseComponent as ɵp, TabComponent as ɵw, TcConfirmComponent as ɵe, TcDisplayHtmlComponent as ɵc, TcDisplayPlainComponent as ɵd, TermsAndConditionsComponent as ɵb, UserDetailsComponent as ɵm, UserListComponent as ɵl, UserSelectComponent as ɵq, FeatureToggleDirective as ɵg, LetContext as ɵi, LetDirective as ɵj, GovUkCheckboxComponent as ɵcb, GovUkCheckboxesComponent as ɵch, GovUkDateComponent as ɵcg, GovUkErrorMessageComponent as ɵce, GovUkFieldsetComponent as ɵcf, GovUkFileUploadComponent as ɵcm, GovUkFormGroupWrapperComponent as ɵcc, GovUkInputComponent as ɵca, GovUkLabelComponent as ɵcd, GovUkRadioComponent as ɵci, GovUkRadiosComponent as ɵcj, GovUkSelectComponent as ɵck, GovukTableComponent as ɵbz, GovUkTextareaComponent as ɵcl, HmctsBannerComponent as ɵby, HmctsErrorSummaryComponent as ɵbw, HmctsIdentityBarComponent as ɵbs, HmctsMainWrapperComponent as ɵbx, HmctsPaginationComponent as ɵbt, HmctsPrimaryNavigationComponent as ɵbv, HmctsSubNavigationComponent as ɵbu, RemoveHostDirective as ɵcn, CaseSharingStateService as ɵr, CookieService as ɵbg, FeatureToggleService as ɵh, FilterService as ɵbe, FindAPersonService as ɵbi, LocationService as ɵbn, SessionStorageService as ɵbj };
 
 //# sourceMappingURL=hmcts-rpx-xui-common-lib.js.map