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

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

@@ -10,9 +10,9 @@ import { Title } from '@angular/platform-browser';
 import { DocumentInterruptSource, Idle } from '@ng-idle/core';
 import { Keepalive } from '@ng-idle/keepalive';
 import { Router, RouterModule, NavigationEnd } from '@angular/router';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ViewChild, ChangeDetectorRef, InjectionToken, ChangeDetectionStrategy, defineInjectable, inject, NgModule } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Pipe, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ViewChild, ChangeDetectorRef, InjectionToken, ChangeDetectionStrategy, defineInjectable, inject, NgModule } from '@angular/core';
 import { BehaviorSubject, of, zip, Subject, combineLatest } from 'rxjs';
-import { distinctUntilChanged, map, tap, debounceTime, filter, mergeMap, catchError, switchMap, delay } from 'rxjs/operators';
+import { distinctUntilChanged, map, tap, debounceTime, filter, mergeMap, catchError, switchMap, delay, skipWhile } from 'rxjs/operators';
 
 /**
  * @fileoverview added by tsickle
@@ -494,7 +494,7 @@ class FilterService {
             return this.filterSettings[id];
         }
         if (sessionStorage.getItem(id)) {
-            return JSON.parse(window.sessionStorage.getItem(id));
+            return JSON.parse(sessionStorage.getItem(id));
         }
         if (localStorage.getItem(id)) {
             if (this.isSameUser(id)) {
@@ -525,6 +525,20 @@ class FilterService {
         }
         return this.streams[id].asObservable();
     }
+    /**
+     * @param {?} id
+     * @return {?}
+     */
+    clearSessionAndLocalPersistance(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
@@ -540,7 +554,7 @@ class FilterService {
      * @return {?}
      */
     persistSession(setting) {
-        window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
+        sessionStorage.setItem(setting.id, JSON.stringify(setting));
     }
     /**
      * @private
@@ -605,7 +619,7 @@ function minSelectedValidator(min) {
          * @param {?} value
          * @return {?}
          */
-        value => value)).length >= min ? null : { minLength: true };
+        value => value)).length >= min ? null : { minlength: true };
     });
 }
 /**
@@ -662,6 +676,7 @@ class GenericFilterComponent {
         this.filterService = filterService;
         this.fb = fb;
         this.submitted = false;
+        this.previousSelectedNestedCheckbox = [];
     }
     /**
      * @return {?}
@@ -708,10 +723,10 @@ class GenericFilterComponent {
     static addFormValidators(field) {
         /** @type {?} */
         const validators = [];
-        if (field && field.minSelected) {
+        if (field && field.minSelected > 0) {
             validators.push(minSelectedValidator(field.minSelected));
         }
-        if (field && field.maxSelected) {
+        if (field && field.maxSelected > 0) {
             validators.push(maxSelectedValidator(field.maxSelected));
         }
         return validators;
@@ -729,6 +744,17 @@ class GenericFilterComponent {
          * @return {?}
          */
         () => this.submitted = false));
+        this.filterSkillsByServices(null, this.config);
+        /** @type {?} */
+        const services = this.config.fields.find((/**
+         * @param {?} field
+         * @return {?}
+         */
+        field => field.name === 'user-services'));
+        if (services) {
+            this.startFilterSkillsByServices(this.form, services);
+            this.initValuesFromCacheForSkillsByServices();
+        }
     }
     /**
      * @return {?}
@@ -860,6 +886,11 @@ class GenericFilterComponent {
      * @return {?}
      */
     inputChanged(field) {
+        if (field.name === 'user-services') {
+            /** @type {?} */
+            const selectedServices = this.getSelectedValuesForFields(this.form.controls, field);
+            this.filterSkillsByServices(selectedServices, this.config);
+        }
         if (field.radioSelectionChange && typeof field.radioSelectionChange === 'string') {
             const [name, value] = field.enableCondition.split('=');
             this.form.get(name).patchValue(value);
@@ -878,6 +909,9 @@ class GenericFilterComponent {
         this.filterService.persist(settings, this.config.persistence);
         this.filterService.givenErrors.next(null);
         this.submitted = false;
+        if (this.config.cancelButtonCallback) {
+            this.config.cancelButtonCallback();
+        }
     }
     /**
      * @param {?} values
@@ -901,6 +935,22 @@ class GenericFilterComponent {
             }
         }
     }
+    /**
+     * @param {?} field
+     * @param {?} i
+     * @return {?}
+     */
+    checkBoxChecked(field, i) {
+        return ((/** @type {?} */ (this.form.get(field.name))))['controls'][i]['value'];
+    }
+    /**
+     * @param {?} values
+     * @param {?} field
+     * @return {?}
+     */
+    updateTaskNameControls(values, field) {
+        this.form.get(field.name).patchValue(values);
+    }
     /**
      * @param {?} event
      * @param {?} form
@@ -984,6 +1034,52 @@ class GenericFilterComponent {
                 this.resetField(resetField, form);
             }
         }
+        if (field.name === 'user-services') {
+            this.startFilterSkillsByServices(form, field);
+        }
+        else if (field.name === 'user-skills') {
+            if (isChecked) {
+                /** @type {?} */
+                const selectedIndex = field.options.findIndex((/**
+                 * @param {?} option
+                 * @return {?}
+                 */
+                option => Number(option.key) === Number(event.target.value)));
+                /** @type {?} */
+                const 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 {?} */
+                const index = this.previousSelectedNestedCheckbox.indexOf(event.target.value);
+                if (index !== -1) {
+                    this.previousSelectedNestedCheckbox.splice(index, 1);
+                }
+            }
+        }
+    }
+    /**
+     * @private
+     * @param {?} form
+     * @param {?} field
+     * @return {?}
+     */
+    startFilterSkillsByServices(form, field) {
+        /** @type {?} */
+        const servicesArray = [];
+        form.value[field.name].map((/**
+         * @param {?} service
+         * @param {?} index
+         * @return {?}
+         */
+        (service, index) => {
+            if (service) {
+                servicesArray.push(field.options[index].key);
+            }
+        }));
+        this.filterSkillsByServices(servicesArray, this.config);
     }
     /**
      * @private
@@ -1057,14 +1153,14 @@ class GenericFilterComponent {
             this.form.addControl('findPersonControl', findPersonControl);
         }
         for (const field of config.fields) {
-            if (field.type === 'checkbox' || field.type === 'checkbox-large') {
+            if (field.type === 'checkbox' || field.type === 'checkbox-large' || field.type === 'nested-checkbox') {
                 /** @type {?} */
                 const formArray = this.buildCheckBoxFormArray(field, settings);
                 this.form.addControl(field.name, formArray);
             }
-            else if (field.type === 'find-location') {
+            else if (field.type === 'find-location' || field.type === 'find-service') {
                 /** @type {?} */
-                const formArray = this.buildFindLocationFormArray(field, settings);
+                const formArray = this.buildFormArray(field, settings);
                 this.form.addControl(field.name, formArray);
             }
             else {
@@ -1072,6 +1168,12 @@ class GenericFilterComponent {
                 const 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 {?} */
                 let defaultValue = null;
@@ -1105,7 +1207,7 @@ class GenericFilterComponent {
                     });
                     this.form.addControl(field.name, formGroup);
                 }
-                else {
+                else if (field.type !== 'group-title') {
                     /** @type {?} */
                     const control = new FormControl(defaultValue, validators);
                     this.form.addControl(field.name, control);
@@ -1157,7 +1259,7 @@ class GenericFilterComponent {
      * @param {?} settings
      * @return {?}
      */
-    buildFindLocationFormArray(field, settings) {
+    buildFormArray(field, settings) {
         /** @type {?} */
         const validators = GenericFilterComponent.addFormValidators(field);
         /** @type {?} */
@@ -1199,7 +1301,7 @@ class GenericFilterComponent {
                  * @return {?}
                  */
                 f => f.name === name));
-                if (field.type === 'find-location') {
+                if (field.type === 'find-location' || field.type === 'find-service') {
                     return { value: values, name };
                 }
                 else {
@@ -1218,29 +1320,281 @@ class GenericFilterComponent {
      */
     emitFormErrors(form) {
         /** @type {?} */
-        const errors = [];
+        let errors = [];
         for (const field of this.config.fields) {
             /** @type {?} */
             const formGroup = form.get(field.name);
-            if (formGroup && formGroup.errors && formGroup.errors.minLength) {
+            if (formGroup && formGroup.errors && (formGroup.errors.minlength || formGroup.errors.required)) {
                 errors.push({ name: field.name, error: field.minSelectedError });
             }
-            if (formGroup && formGroup.errors && formGroup.errors.maxLength) {
-                errors.push({ name: field.name, error: field.minSelectedError });
+            if (formGroup && formGroup.errors && formGroup.errors.maxlength) {
+                errors.push({ name: field.name, error: field.maxSelectedError });
             }
         }
+        // remove duplicates
+        errors = errors.filter((/**
+         * @param {?} filterError
+         * @param {?} i
+         * @param {?} arr
+         * @return {?}
+         */
+        (filterError, i, arr) => {
+            return errors.indexOf(arr.find((/**
+             * @param {?} item
+             * @return {?}
+             */
+            item => item.name === filterError.name))) === i;
+        }));
         if (errors.length) {
             this.filterService.givenErrors.next(errors);
         }
     }
+    /**
+     * @return {?}
+     */
+    initValuesFromCacheForSkillsByServices() {
+        /** @type {?} */
+        const cachedValues = this.filteredSkillsByServicesCheckbox.map((/**
+         * @param {?} skill
+         * @return {?}
+         */
+        skill => {
+            /** @type {?} */
+            let selected = false;
+            if (this.settings && this.settings.fields) {
+                /** @type {?} */
+                let isSelectedUserSkill;
+                /** @type {?} */
+                const selectedUserSkills = this.settings.fields.find((/**
+                 * @param {?} setting
+                 * @return {?}
+                 */
+                setting => setting.name === 'user-skills'));
+                if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
+                    isSelectedUserSkill = selectedUserSkills.value.findIndex((/**
+                     * @param {?} val
+                     * @return {?}
+                     */
+                    val => {
+                        return String(val) === String(skill.key);
+                    }));
+                    selected = isSelectedUserSkill !== -1;
+                }
+            }
+            return selected;
+        }));
+        this.form.get('user-skills').setValue(cachedValues);
+    }
+    /**
+     * @param {?} services
+     * @param {?} config
+     * @return {?}
+     */
+    filterSkillsByServices(services, config) {
+        this.filteredSkillsByServices = [];
+        this.filteredSkillsByServicesCheckbox = [];
+        /** @type {?} */
+        const userSkillsSelectField = config.fields.find((/**
+         * @param {?} f
+         * @return {?}
+         */
+        f => f.name === 'user-skills' && f.type === 'group-select'));
+        /** @type {?} */
+        const userSkillsCheckboxField = config.fields.find((/**
+         * @param {?} f
+         * @return {?}
+         */
+        f => f.name === 'user-skills' && f.type === 'nested-checkbox'));
+        if (userSkillsSelectField) {
+            /** @type {?} */
+            const userSkills = userSkillsSelectField.groupOptions;
+            if (!services || services.length === 0) {
+                this.filteredSkillsByServices = userSkills;
+            }
+            else {
+                services.forEach((/**
+                 * @param {?} s
+                 * @return {?}
+                 */
+                s => {
+                    /** @type {?} */
+                    const groupOption = userSkills.find((/**
+                     * @param {?} u
+                     * @return {?}
+                     */
+                    u => u.group.toLowerCase() === s.toLowerCase()));
+                    if (groupOption) {
+                        this.filteredSkillsByServices.push(groupOption);
+                    }
+                }));
+            }
+        }
+        else if (userSkillsCheckboxField) {
+            /** @type {?} */
+            const userSkills = userSkillsCheckboxField.groupOptions;
+            if (!services || services.length === 0) {
+                this.filteredSkillsByServices = userSkills;
+            }
+            else {
+                services.forEach((/**
+                 * @param {?} s
+                 * @return {?}
+                 */
+                s => {
+                    /** @type {?} */
+                    const groupOption = userSkills.find((/**
+                     * @param {?} u
+                     * @return {?}
+                     */
+                    u => u.group.toLowerCase() === s.toLowerCase()));
+                    if (groupOption) {
+                        this.filteredSkillsByServices.push(groupOption);
+                    }
+                }));
+                this.filteredSkillsByServicesCheckbox = this.filteredSkillsByServices.map((/**
+                 * @param {?} skill
+                 * @return {?}
+                 */
+                skill => {
+                    return skill.options;
+                })).reduce((/**
+                 * @param {?} a
+                 * @param {?} b
+                 * @return {?}
+                 */
+                (a, b) => {
+                    return a.concat(b);
+                }), []);
+                userSkillsCheckboxField.options = [];
+                userSkillsCheckboxField.options = this.filteredSkillsByServicesCheckbox;
+                this.form.setControl('user-skills', new FormArray([]));
+                this.filteredSkillsByServicesCheckbox.forEach((/**
+                 * @return {?}
+                 */
+                () => {
+                    ((/** @type {?} */ (this.form.get('user-skills')))).push(new FormControl(false));
+                }));
+                /** @type {?} */
+                const prevValues = this.filteredSkillsByServicesCheckbox.map((/**
+                 * @param {?} skill
+                 * @return {?}
+                 */
+                skill => {
+                    /** @type {?} */
+                    let selected = false;
+                    if (this.settings && this.settings.fields) {
+                        if (this.previousSelectedNestedCheckbox.length > 0) {
+                            selected = this.previousSelectedNestedCheckbox.includes(skill.key);
+                        }
+                        /** @type {?} */
+                        let isSelectedUserSkill;
+                        /** @type {?} */
+                        const selectedUserSkills = this.settings.fields.find((/**
+                         * @param {?} setting
+                         * @return {?}
+                         */
+                        setting => setting.name === 'user-skills'));
+                        if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
+                            isSelectedUserSkill = selectedUserSkills.value.findIndex((/**
+                             * @param {?} val
+                             * @return {?}
+                             */
+                            val => 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 {?}
+     */
+    getSelectedValuesForFields(formValues, field) {
+        /** @type {?} */
+        const selectedValues = [];
+        Object.keys(formValues).map((/**
+         * @param {?} name
+         * @return {?}
+         */
+        (name) => {
+            /** @type {?} */
+            const values = formValues[name].value;
+            if (name === field.name) {
+                values.forEach((/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                (v) => {
+                    selectedValues.push(v.key);
+                }));
+            }
+        }));
+        return selectedValues;
+    }
+    /**
+     * @private
+     * @param {?} groupOptions
+     * @return {?}
+     */
+    sortGroupOptions(groupOptions) {
+        /** @type {?} */
+        const sortedResults = [];
+        /** @type {?} */
+        const groups = groupOptions.map((/**
+         * @param {?} go
+         * @return {?}
+         */
+        go => go.group));
+        groups.sort().forEach((/**
+         * @param {?} g
+         * @return {?}
+         */
+        g => {
+            /** @type {?} */
+            const options = groupOptions.find((/**
+             * @param {?} go
+             * @return {?}
+             */
+            (go) => go.group === g)).options;
+            /** @type {?} */
+            const sortedOptions = options.sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            (a, b) => {
+                return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : (b.label.toLowerCase() > a.label.toLowerCase() ? -1 : 0);
+            }));
+            /** @type {?} */
+            const 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 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",
+                template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <ng-container [ngSwitch]=\"field.type\">\n      <ng-container *ngSwitchCase=\"'group-title'\">\n        <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n          {{ field.name | capitalize }}\n        </div>\n    </ng-container>\n      <ng-container *ngSwitchDefault>\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n         <div *ngIf=\"field.title\" class=\"xui-generic-filter__field-title\">\n          <h3 [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n            {{field.title | capitalize}}\n          </h3>\n          <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n            {{ field.titleHint }}\n          </div>\n        </div>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n        *ngIf=\"field.emailError && submitted && form.get(field.name).errors?.email\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.emailError}}\n      </span>\n        <div class=\"govuk-body\"  [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option *ngIf=\"field.defaultOption\" [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'group-select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option *ngIf=\"field.defaultOption\" selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <optgroup *ngFor = 'let grp of filteredSkillsByServices' label=\"{{grp.group | titlecase}}\">\n              <option *ngFor = 'let item of grp.options' [value]=\"item.key\">{{item.label}}</option>\n            </optgroup>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'nested-checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of filteredSkillsByServicesCheckbox; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n                              [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [field]=\"field\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-task-name'\">\n          <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n                              (taskNameFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findTaskNameGroup]=\"form\"\n                              [selectedTaskName]=\"form.get(field.name).value.taskName\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-task-name>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedServices]=\"form.get(field.name)?.value\"\n                                [services]=\"field.options\"\n                                [field]=\"field\"\n          ></xuilib-find-service>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text-input'\">\n          <input class=\"govuk-input\" type=\"text\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [attr.maxlength]=\"field.maxlength ? field.maxlength : null\"\n          />\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email-input'\">\n          <input class=\"govuk-input\" type=\"email\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n          />\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                styles: [".contain-classes .elevated-break{position:relative;top:-10px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}"]
+                styles: [".contain-classes .elevated-break{margin-bottom:20px}@media (min-width:40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .govuk-body--maxWidth480px{max-width:480px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-direction:column;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}.contain-classes .xui-generic-filter__field-title{display:flex;align-items:center;margin-bottom:10px}.contain-classes .govuk-select{width:100%}"]
             }] }
 ];
 /** @nocollapse */
@@ -3074,6 +3428,14 @@ class AnonymousFeatureUser {
 class LoggedInFeatureUser {
 }
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/models/filter.model.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class RadioFilterFieldConfig {
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/models/idle-config.model.ts
@@ -3108,7 +3470,7 @@ const PersonRole = {
     JUDICIAL: "Judicial",
     CASEWORKER: "Legal Ops",
     ADMIN: "Admin",
-    CTSC: "CTSC",
+    CTSC: "CTSC User",
     ALL: "All",
 };
 /** @enum {string} */
@@ -3132,14 +3494,6 @@ const RoleCategory = {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/models/filter.model.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class RadioFilterFieldConfig {
-}
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/models/public_api.ts
@@ -3218,7 +3572,7 @@ LocationService.ctorParameters = () => [
 
 /**
  * @fileoverview added by tsickle
- * Generated from: lib/services/session-storage/session-storage.service.ts
+ * Generated from: lib/services/storage/session-storage/session-storage.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class SessionStorageService {
@@ -3463,7 +3817,7 @@ SearchLocationComponent.decorators = [
     { 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:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+                styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input{line-height:24px;font-size:19px}"]
             }] }
 ];
 /** @nocollapse */
@@ -3545,7 +3899,11 @@ class FindLocationComponent {
          * @param {?} f
          * @return {?}
          */
-        f => f.name === this.field.findLocationField));
+        f => {
+            if (this.field) {
+                return f.name === this.field.findLocationField;
+            }
+        }));
         if (field) {
             if (typeof value === 'string') {
                 this.serviceIds = value;
@@ -3671,8 +4029,8 @@ class FindLocationComponent {
 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    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [bookingCheck]=\"field.bookingCheckType\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
-                styles: [""]
+                template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n\n    <div class=\"search-location__input-container\">\n      <exui-search-location class=\"search-location__input\"\n                            [locations]=\"locations\"\n                            [selectedLocations]=\"selectedLocations\"\n                            [singleMode]=\"field.maxSelected === 1\"\n                            [bookingCheck]=\"field.bookingCheckType\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"\n                            [serviceIds]=\"serviceIds\"\n                            (locationInputChanged)=\"onInputChanged($event)\"\n                            (locationSelected)=\"onLocationSelected($event)\"\n                            (searchLocationChanged)=\"onSearchInputChanged()\"\n                            [locationType]=\"'case-management'\"></exui-search-location>\n      <a href=\"javascript:void(0)\" (click)=\"addLocation()\"\n         class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n         *ngIf=\"enableAddLocationButton\">\n        Add\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                styles: [".search-location__input-container{display:flex}.search-location .auto-complete-container{min-width:unset;width:calc(100% - 4px)}.search-location__input{flex:1 0 auto}.search-location .govuk-button--secondary{background-color:#ddd}"]
             }] }
 ];
 FindLocationComponent.propDecorators = {
@@ -4350,7 +4708,7 @@ class FindServiceComponent {
 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>",
+                template: "<div class=\"service-picker-custom\">\n    <div class=\"search-service\">\n      <div>\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <exui-search-service class=\"search-service\"\n                            [services]=\"services\"\n                            [selectedServices]=\"selectedServices\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"></exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n    <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n      <li class=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\n        </a>\n      </li>\n    </ul>\n  </div>\n",
                 styles: ["#add-service{background-color:#ddd}"]
             }] }
 ];
@@ -4366,6 +4724,207 @@ FindServiceComponent.propDecorators = {
     disableInputField: [{ type: Input }]
 };
 
+/**
+ * @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
+ */
+class TaskNameService {
+    /**
+     * @param {?} http
+     * @param {?} sessionStorageService
+     */
+    constructor(http, sessionStorageService) {
+        this.http = http;
+        this.sessionStorageService = sessionStorageService;
+    }
+    /**
+     * @return {?} Observable<any[]>: Array of taskName in Observable
+     */
+    getTaskName() {
+        if (this.sessionStorageService.getItem(TaskNameService.taskNamesKey)) {
+            /** @type {?} */
+            const taskNames = JSON.parse(this.sessionStorageService.getItem(TaskNameService.taskNamesKey));
+            return of((/** @type {?} */ (taskNames)));
+        }
+        return this.http.get(`/workallocation/taskNames`).pipe(tap((/**
+         * @param {?} taskNames
+         * @return {?}
+         */
+        taskNames => this.sessionStorageService.setItem(TaskNameService.taskNamesKey, JSON.stringify(taskNames)))));
+    }
+}
+TaskNameService.taskNamesKey = 'taskNames';
+TaskNameService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+TaskNameService.ctorParameters = () => [
+    { type: HttpClient },
+    { type: SessionStorageService }
+];
+/** @nocollapse */ TaskNameService.ngInjectableDef = defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(inject(HttpClient), inject(SessionStorageService)); }, token: TaskNameService, providedIn: "root" });
+
+/**
+ * @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
+ */
+class FindTaskNameComponent {
+    /**
+     * @param {?} cd
+     * @param {?} taskService
+     */
+    constructor(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 {?}
+     */
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngOnChanges() {
+        this.findTaskNameControl = new FormControl(this.selectedTaskName);
+        this.findTaskNameGroup.addControl('findTaskNameControl', this.findTaskNameControl);
+        this.sub = this.findTaskNameControl.valueChanges
+            .pipe(tap((/**
+         * @return {?}
+         */
+        () => this.showAutocomplete = false)), tap((/**
+         * @return {?}
+         */
+        () => this.filteredOptions = [])), tap((/**
+         * @param {?} term
+         * @return {?}
+         */
+        (term) => this.searchTerm = term)), debounceTime(300), tap((/**
+         * @param {?} searchTerm
+         * @return {?}
+         */
+        (searchTerm) => {
+            if (!searchTerm) {
+                this.taskNameSelected.emit('');
+            }
+            return searchTerm;
+        })), 
+        // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit('null') : void 0),
+        filter((/**
+         * @param {?} searchTerm
+         * @return {?}
+         */
+        (searchTerm) => searchTerm && searchTerm.length >= this.minSearchCharacters)), mergeMap((/**
+         * @return {?}
+         */
+        () => this.getTaskName()))).subscribe((/**
+         * @param {?} taskNameModel
+         * @return {?}
+         */
+        (taskNameModel) => {
+            this.filteredOptions = taskNameModel.map((/**
+             * @param {?} task
+             * @return {?}
+             */
+            task => task.taskName));
+            if (this.searchTerm) {
+                this.filteredOptions = this.filteredOptions.filter((/**
+                 * @param {?} taskName
+                 * @return {?}
+                 */
+                (taskName) => taskName.toLocaleLowerCase().includes(this.searchTerm.toLocaleLowerCase()))).map((/**
+                 * @param {?} taskName
+                 * @return {?}
+                 */
+                taskName => taskName));
+            }
+            this.cd.detectChanges();
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    getTaskName() {
+        return this.taskService.getTaskName();
+    }
+    /**
+     * @param {?} selectedTaskName
+     * @return {?}
+     */
+    onSelectionChange(selectedTaskName) {
+        if (selectedTaskName) {
+            this.taskNameSelected.emit(selectedTaskName);
+            this.findTaskNameControl.setValue(selectedTaskName);
+        }
+    }
+    /**
+     * @return {?}
+     */
+    onInput() {
+        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 = () => [
+    { 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 }],
+    services: [{ type: Input }],
+    disabled: [{ type: Input }]
+};
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/components/search-judicials/search-judicials.component.ts
@@ -4573,7 +5132,9 @@ SearchJudicialsComponent.propDecorators = {
  */
 class SearchServiceComponent {
     constructor() {
+        this.services = [];
         this.showAutocomplete = false;
+        this.serviceChanged = new EventEmitter();
         this.minSearchCharacters = 3;
         this.term = '';
     }
@@ -4584,16 +5145,23 @@ class SearchServiceComponent {
         // Todo
     }
     /**
+     * @param {?} key
      * @return {?}
      */
-    onSelectionChange() {
-        // Todo
+    onSelectionChanged(key) {
+        /** @type {?} */
+        const selectedService = this.services.find((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.key === key));
+        this.serviceChanged.emit(selectedService);
     }
 }
 SearchServiceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'exui-search-service',
-                template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChange()\">\n      {{ service.name }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
+                template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\"\n    (change)=\"onSelectionChanged($event.target.value)\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChanged($event.target.value)\">\n      {{ service.name }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
                 styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:250px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
             }] }
 ];
@@ -4603,7 +5171,8 @@ SearchServiceComponent.propDecorators = {
     disabled: [{ type: Input }],
     delay: [{ type: Input }],
     form: [{ type: Input }],
-    showAutocomplete: [{ type: Input }]
+    showAutocomplete: [{ type: Input }],
+    serviceChanged: [{ type: Output }]
 };
 
 /**
@@ -4844,6 +5413,38 @@ GovUkCheckboxComponent.propDecorators = {
     isChecked: [{ type: Input }]
 };
 
+/**
+ * @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
+ * */
+class HtmlTemplatesHelper {
+    /*
+      * Sets described by string depending if
+      * there is an error, error and hit or nothing
+      * */
+    /**
+     * @param {?} errorMessage
+     * @param {?} config
+     * @return {?}
+     */
+    static setDescribedBy(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;
+        }
+    }
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/gov-ui/components/gov-uk-checkboxes/gov-uk-checkboxes.component.ts
@@ -4857,16 +5458,82 @@ GovUkCheckboxComponent.propDecorators = {
 * @param: errors - array of error stings
 * */
 class GovUkCheckboxesComponent {
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.columns = this.setColumns();
+    }
+    /**
+     * @return {?}
+     */
+    setDescribedBy() {
+        return HtmlTemplatesHelper.setDescribedBy(this.errorMessage, this.config);
+    }
+    /**
+     * @param {?} checked
+     * @param {?} value
+     * @return {?}
+     */
+    onChecked(checked, value) {
+        /** @type {?} */
+        const formControl = this.group.get(this.config.name);
+        /** @type {?} */
+        const array = formControl.value ? formControl.value : [];
+        if (!checked) {
+            /** @type {?} */
+            const modifiedArray = array.filter((/**
+             * @param {?} item
+             * @return {?}
+             */
+            (item) => item !== value));
+            formControl.setValue(modifiedArray);
+        }
+        else {
+            formControl.setValue([...array, value]);
+        }
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    isChecked(value) {
+        /** @type {?} */
+        const formControl = this.group.get(this.config.name);
+        return formControl.value && formControl.value.includes(value);
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    setColumns() {
+        if (this.config.rows && this.config.rows > 1) {
+            /** @type {?} */
+            const array = [];
+            for (let i = 0; i < this.items.length; i += this.config.rows) {
+                /** @type {?} */
+                const 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: "<xuilib-gov-uk-form-group-wrapper\n[error]=\"errors\"\n[config]=\"options.config\"\n[group]=\"options.key\">\n<div class=\"govuk-checkboxes\">\n  <xuilib-gov-checkbox *ngFor=\"let item of options.items\"\n    [group]=\"item.group\"\n    [config]=\"item.config\">\n  </xuilib-gov-checkbox>\n</div>\n</xuilib-gov-uk-form-group-wrapper>"
+                template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n     [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n  <xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n  <span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n    {{config.hint}}\n  </span>\n\n  <xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n  <div class=\"govuk-checkboxes govuk-checkboxes--small govuk-checkboxes-multi-column\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes-multi-column__single\" *ngFor=\"let columnItems of columns\">\n      <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of columnItems\">\n        <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n               [id]=\"item.id\" [name]=\"item.id\" [checked]=\"isChecked(item.value)\" [value]=\"item.value\"\n               [attr.aria-describedby]=\"setDescribedBy()\"\n               (change)=\"onChecked($event.target.checked, item.value)\"\n        >\n        <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.id\">\n          {{ item.label }}\n        </label>\n        <div *ngIf=\"item.hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n          {{ item.hint }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                styles: [".govuk-checkboxes-multi-column{display:flex;flex-wrap:wrap;margin-left:-20px;margin-right:-20px}.govuk-checkboxes-multi-column__single{padding-left:20px;padding-right:20px}"]
             }] }
 ];
 GovUkCheckboxesComponent.propDecorators = {
-    options: [{ type: Input }],
-    errors: [{ type: Input }]
+    group: [{ type: Input }],
+    config: [{ type: Input }],
+    items: [{ type: Input }],
+    errorMessage: [{ type: Input }]
 };
 
 /**
@@ -4993,38 +5660,6 @@ GovUkErrorMessageComponent.propDecorators = {
     errorMessage: [{ type: Input }]
 };
 
-/**
- * @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
- * */
-class HtmlTemplatesHelper {
-    /*
-      * Sets described by string depending if
-      * there is an error, error and hit or nothing
-      * */
-    /**
-     * @param {?} errorMessage
-     * @param {?} config
-     * @return {?}
-     */
-    static setDescribedBy(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;
-        }
-    }
-}
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/gov-ui/components/gov-uk-fieldset/gov-uk-fieldset.component.ts
@@ -5151,7 +5786,7 @@ class GovUkInputComponent {
      * @return {?}
      */
     ngOnInit() {
-        this.config.classes = 'govuk-label--m';
+        this.config.classes = typeof (this.config.classes) === 'string' ? this.config.classes : 'govuk-label govuk-label--m';
     }
     /**
      * @return {?}
@@ -5163,7 +5798,7 @@ class GovUkInputComponent {
 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       [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n       [id]=\"config.id\"\n       [name]=\"config.name\"\n       [type]=\"config.type\"\n       [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n       [formControlName]=\"config.name\"\n       [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
+                template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n  {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n       [class.govuk-!-width-full]=\"config.fullWidth\"\n       [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n       [id]=\"config.id\"\n       [name]=\"config.name\"\n       [type]=\"config.type\"\n       [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n       [formControlName]=\"config.name\"\n       [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
                 styles: [".gov-uk-input input:disabled{background:#b1b4b6}"]
             }] }
 ];
@@ -5192,7 +5827,8 @@ class GovUkLabelComponent {
 GovUkLabelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-gov-label',
-                template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n  <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n         [for]=\"config.id\" [innerHTML]=\"config.label\">\n  </label>\n</h1>\n<ng-template #noHeading>\n  <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n         [for]=\"config.id\" [innerHTML]=\"config.label\">\n  </label>\n</ng-template>"
+                template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n  <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n    <span>{{ config.label }}</span>\n    <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n  </label>\n</h1>\n<ng-template #noHeading>\n  <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n    <span>{{ config.label }}</span>\n    <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n  </label>\n</ng-template>\n",
+                styles: [".govuk-label{display:flex;align-items:center;flex-wrap:wrap}.govuk-label__optional{font-weight:400;font-size:16px;display:inline-block;margin-left:.75rem}"]
             }] }
 ];
 /** @nocollapse */
@@ -5288,7 +5924,7 @@ class GovUkSelectComponent {
 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\" [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n<option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>"
+                template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\"\n        [class.govuk-!-width-full]=\"config.fullWidth\"\n        [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n  <option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>\n"
             }] }
 ];
 /** @nocollapse */
@@ -5377,27 +6013,26 @@ GovUkTextareaComponent.propDecorators = {
  * 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
-* */
 class HmctsBannerComponent {
-    constructor() { }
+    constructor() {
+        this.title = '';
+        this.showMessageIcon = false;
+        this.messageBoldText = false;
+    }
 }
 HmctsBannerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-hmcts-banner',
-                template: "<div class=\"hmcts-banner hmcts-banner--{{type}}\">\n  <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n      <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" /></svg>\n  <div class=\"hmcts-banner__message\">\n      <span class=\"hmcts-banner__assistive\">{{type}}</span>\n      {{message}}\n  </div>\n</div>",
-                styles: [":host{display:block;width:100%}"]
+                template: "<ng-container *ngIf=\"message && type\">\n  <div *ngIf=\"title\"\n    class=\"hmcts-banner-title hmcts-banner-title--{{ type }}\">\n    {{ title }}\n  </div>\n  <div class=\"hmcts-banner hmcts-banner--{{ type }}\">\n    <ng-container *ngIf=\"showMessageIcon\">\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"'warning'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--warning\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"></path>\n          </svg>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'success'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--success\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z\"></path>\n          </svg>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'information'\">\n          <svg class=\"hmcts-banner__icon hmcts-banner__icon--information\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n  C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n          </svg>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <div class=\"hmcts-banner__message\" [class.hmcts-banner__message--bold]=\"messageBoldText\">\n      <span class=\"hmcts-banner__assistive\">{{ type }}</span>\n      <span class=\"hmcts-banner__message-text govuk-!-font-weight-bold\">{{ message }}</span>\n    </div>\n  </div>\n</ng-container>\n",
+                styles: [".hmcts-banner-title{color:#fff;background-color:#1d70b8;font-weight:700;padding:10px 15px 5px}.hmcts-banner-title--success{background-color:#00703c}.hmcts-banner-title--warning{background-color:#d4351c}.hmcts-banner__message--bold{font-weight:700}"]
             }] }
 ];
-/** @nocollapse */
-HmctsBannerComponent.ctorParameters = () => [];
 HmctsBannerComponent.propDecorators = {
+    message: [{ type: Input }],
     type: [{ type: Input }],
-    message: [{ type: Input }]
+    title: [{ type: Input }],
+    showMessageIcon: [{ type: Input }],
+    messageBoldText: [{ type: Input }]
 };
 
 /**
@@ -5544,7 +6179,7 @@ class HmctsMainWrapperComponent {
 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\" [message]=\"bannerData.message\" [type]=\"bannerData.type\"></xuilib-hmcts-banner>\n      <h1 *ngIf=\"title\" class=\"govuk-heading-xl\">{{title}}</h1>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"govuk-grid-column-one-third\" *ngIf=\"actionButtons?.length > 0\">\n      <div class=\"hmcts-page-heading__actions-wrapper\">\n        <a\n          *ngFor=\"let actionButton of actionButtons\"\n          (click)=\"actionButton.action()\"\n          role=\"button\"\n          draggable=\"false\"\n          class=\"govuk-button {{ actionButton.class }}\"\n        >{{ actionButton.name }}</a>\n      </div>\n    </div>\n  </div>\n</main>\n"
+                template: "<a *ngIf=\"hasBackLink\" [routerLink]=\"backLink\" (click)=\"onGoBack()\" class=\"govuk-back-link\">Back</a>\n<main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <xuilib-hmcts-error-summary\n        *ngIf=\"summaryErrors && !summaryErrors.isFromValid\"\n        [errorMessages]=\"summaryErrors.items\"\n        [header]=\"summaryErrors.header\"\n        [showWarningMessage]=\"showWarningMessage\">\n      </xuilib-hmcts-error-summary>\n      <xuilib-hmcts-banner *ngIf=\"bannerData\"\n                           [type]=\"bannerData.type\"\n                           [message]=\"bannerData.message\"\n      ></xuilib-hmcts-banner>\n      <h1 *ngIf=\"title\" class=\"govuk-heading-xl\">{{title}}</h1>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"govuk-grid-column-one-third\" *ngIf=\"actionButtons?.length > 0\">\n      <div class=\"hmcts-page-heading__actions-wrapper\">\n        <a\n          *ngFor=\"let actionButton of actionButtons\"\n          (click)=\"actionButton.action()\"\n          role=\"button\"\n          draggable=\"false\"\n          class=\"govuk-button {{ actionButton.class }}\"\n        >{{ actionButton.name }}</a>\n      </div>\n    </div>\n  </div>\n</main>\n"
             }] }
 ];
 /** @nocollapse */
@@ -5684,6 +6319,26 @@ RemoveHostDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/pipes/capitalize.pipe.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CapitalizePipe {
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    transform(value) {
+        /** @type {?} */
+        const lowerCaseString = value.toLowerCase();
+        return lowerCaseString.charAt(0).toUpperCase() + lowerCaseString.slice(1);
+    }
+}
+CapitalizePipe.decorators = [
+    { type: Pipe, args: [{ name: 'capitalize' },] }
+];
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/exui-common-lib.module.ts
@@ -5722,6 +6377,7 @@ const COMMON_COMPONENTS = [
     FindPersonComponent,
     SearchJudicialsComponent,
     FindLocationComponent,
+    FindTaskNameComponent,
     SearchLocationComponent,
     FindServiceComponent,
     SearchServiceComponent,
@@ -5753,6 +6409,10 @@ const GOV_UI_COMPONENTS = [
     GovUkFileUploadComponent,
     RemoveHostDirective
 ];
+/** @type {?} */
+const pipes = [
+    CapitalizePipe
+];
 const ɵ0 = windowProvider;
 class ExuiCommonLibModule {
 }
@@ -5760,7 +6420,8 @@ ExuiCommonLibModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
                     ...COMMON_COMPONENTS,
-                    ...GOV_UI_COMPONENTS
+                    ...GOV_UI_COMPONENTS,
+                    ...pipes
                 ],
                 imports: [
                     CommonModule,
@@ -5778,7 +6439,8 @@ ExuiCommonLibModule.decorators = [
                 exports: [
                     ...COMMON_COMPONENTS,
                     ...GOV_UI_COMPONENTS,
-                    PaginatePipe
+                    PaginatePipe,
+                    ...pipes
                 ]
             },] }
 ];
@@ -6487,20 +7149,19 @@ TimeoutNotificationsService.ctorParameters = () => [
  */
 class RoleService {
     constructor() {
-        this.pRoles = [];
-    }
-    /**
-     * @return {?}
-     */
-    get roles() {
-        return this.pRoles;
+        this.pRoles = new BehaviorSubject(null);
+        this.roles$ = this.pRoles.asObservable().pipe(skipWhile((/**
+         * @param {?} item
+         * @return {?}
+         */
+        item => item === null)));
     }
     /**
      * @param {?} roles
      * @return {?}
      */
     set roles(roles) {
-        this.pRoles = roles;
+        this.pRoles.next(roles);
     }
 }
 RoleService.decorators = [
@@ -6536,25 +7197,31 @@ class RoleGuard {
      * @return {?}
      */
     canActivate(route) {
-        /** @type {?} */
-        const roles = ((/** @type {?} */ (route.data.needsRole)));
-        /** @type {?} */
-        const check = (/**
-         * @param {?} roleRegEx
+        return this.roleService.roles$.pipe(map((/**
+         * @param {?} roles
          * @return {?}
          */
-        (roleRegEx) => {
+        roles => {
             /** @type {?} */
-            const regex = new RegExp(roleRegEx);
-            return this.roleService.roles.some((/**
-             * @param {?} role
+            const canActivateRoles = ((/** @type {?} */ (route.data.needsRole)));
+            /** @type {?} */
+            const check = (/**
+             * @param {?} roleRegEx
              * @return {?}
              */
-            role => regex.test(role)));
-        });
-        /** @type {?} */
-        const match = route.data.roleMatching === RoleMatching.ALL ? roles.every(check) : roles.some(check);
-        return match || this.router.parseUrl((/** @type {?} */ (route.data.noRoleMatchRedirect)));
+            (roleRegEx) => {
+                /** @type {?} */
+                const regex = new RegExp(roleRegEx);
+                return roles.some((/**
+                 * @param {?} role
+                 * @return {?}
+                 */
+                role => regex.test(role)));
+            });
+            /** @type {?} */
+            const match = route.data.roleMatching === RoleMatching.ALL ? canActivateRoles.every(check) : canActivateRoles.some(check);
+            return match || this.router.parseUrl((/** @type {?} */ (route.data.noRoleMatchRedirect)));
+        })));
     }
 }
 RoleGuard.decorators = [
@@ -6655,6 +7322,6 @@ LoadingService.decorators = [
  * @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, 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 };
+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, SharedCaseErrorMessages, BadgeColour, DateBadgeColour, SECONDS_IN_A_DAY, AnonymousFeatureUser, LoggedInFeatureUser, RadioFilterFieldConfig, BookingCheckType, PersonRole, RoleCategory, 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 };
 
 //# sourceMappingURL=hmcts-rpx-xui-common-lib.js.map