@hmcts/rpx-xui-common-lib 1.7.45 → 1.7.47-clear-stream-data-v2

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

@@ -10,7 +10,7 @@ import { Title } from '@angular/platform-browser';
 import { DocumentInterruptSource, Idle } from '@ng-idle/core';
 import { Keepalive } from '@ng-idle/keepalive';
 import { RouterModule, Router, NavigationEnd } from '@angular/router';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ViewChild, ChangeDetectorRef, InjectionToken, defineInjectable, inject, NgModule, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Pipe, Inject, ViewChild, ChangeDetectorRef, InjectionToken, defineInjectable, inject, NgModule, ChangeDetectionStrategy } from '@angular/core';
 import { BehaviorSubject, of, zip, Subject, combineLatest } from 'rxjs';
 import { distinctUntilChanged, map, debounceTime, filter, mergeMap, tap, catchError, switchMap, delay, skipWhile } from 'rxjs/operators';
 
@@ -662,10 +662,10 @@ var FilterService = /** @class */ (function () {
             return this.filterSettings[id];
         }
         if (sessionStorage.getItem(id)) {
-            return JSON.parse(window.sessionStorage.getItem(id));
+            return JSON.parse(sessionStorage.getItem(id));
         }
         if (localStorage.getItem(id)) {
-            return JSON.parse(window.localStorage.getItem(id));
+            return JSON.parse(localStorage.getItem(id));
         }
         return null;
     };
@@ -683,6 +683,24 @@ var FilterService = /** @class */ (function () {
         }
         return this.streams[id].asObservable();
     };
+    /**
+     * @param {?} id
+     * @return {?}
+     */
+    FilterService.prototype.clearSessionAndLocalPersistance = /**
+     * @param {?} id
+     * @return {?}
+     */
+    function (id) {
+        sessionStorage.removeItem(id);
+        localStorage.removeItem(id);
+        if (this.filterSettings[id] !== undefined) {
+            this.filterSettings[id] = null;
+        }
+        if (this.streams[id] !== undefined) {
+            this.streams[id].next(null);
+        }
+    };
     /**
      * @private
      * @param {?} setting
@@ -694,7 +712,7 @@ var FilterService = /** @class */ (function () {
      * @return {?}
      */
     function (setting) {
-        window.localStorage.setItem(setting.id, JSON.stringify(setting));
+        localStorage.setItem(setting.id, JSON.stringify(setting));
     };
     /**
      * @private
@@ -707,7 +725,7 @@ var FilterService = /** @class */ (function () {
      * @return {?}
      */
     function (setting) {
-        window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
+        sessionStorage.setItem(setting.id, JSON.stringify(setting));
     };
     /**
      * @private
@@ -880,10 +898,10 @@ var GenericFilterComponent = /** @class */ (function () {
     function (field) {
         /** @type {?} */
         var validators = [];
-        if (field && field.minSelected) {
+        if (field && field.minSelected > 0) {
             validators.push(minSelectedValidator(field.minSelected));
         }
-        if (field && field.maxSelected) {
+        if (field && field.maxSelected > 0) {
             validators.push(maxSelectedValidator(field.maxSelected));
         }
         return validators;
@@ -905,6 +923,7 @@ var GenericFilterComponent = /** @class */ (function () {
          * @return {?}
          */
         function () { return _this.submitted = false; }));
+        this.filterSkillsByServices(null, this.config);
     };
     /**
      * @return {?}
@@ -1078,6 +1097,11 @@ var GenericFilterComponent = /** @class */ (function () {
      * @return {?}
      */
     function (field) {
+        if (field.name === 'user-services') {
+            /** @type {?} */
+            var selectedServices = this.getSelectedValuesForFields(this.form.controls, field);
+            this.filterSkillsByServices(selectedServices, this.config);
+        }
         if (field.radioSelectionChange && typeof field.radioSelectionChange === 'string') {
             var _a = __read(field.enableCondition.split('='), 2), name_3 = _a[0], value = _a[1];
             this.form.get(name_3).patchValue(value);
@@ -1099,6 +1123,9 @@ var GenericFilterComponent = /** @class */ (function () {
         this.filterService.persist(settings, this.config.persistence);
         this.filterService.givenErrors.next(null);
         this.submitted = false;
+        if (this.config.cancelButtonCallback) {
+            this.config.cancelButtonCallback();
+        }
     };
     /**
      * @param {?} values
@@ -1351,9 +1378,9 @@ var GenericFilterComponent = /** @class */ (function () {
                 var formArray = this_1.buildCheckBoxFormArray(field, settings);
                 this_1.form.addControl(field.name, formArray);
             }
-            else if (field.type === 'find-location') {
+            else if (field.type === 'find-location' || field.type === 'find-service') {
                 /** @type {?} */
-                var formArray = this_1.buildFindLocationFormArray(field, settings);
+                var formArray = this_1.buildFormArray(field, settings);
                 this_1.form.addControl(field.name, formArray);
             }
             else {
@@ -1364,6 +1391,9 @@ var GenericFilterComponent = /** @class */ (function () {
                     if (field.type === 'text-input') {
                         validators.push(Validators.minLength(field.minSelected));
                     }
+                    if (field.type === 'email-input') {
+                        validators.push(Validators.email);
+                    }
                 }
                 /** @type {?} */
                 var defaultValue = null;
@@ -1397,7 +1427,7 @@ var GenericFilterComponent = /** @class */ (function () {
                     });
                     this_1.form.addControl(field.name, formGroup);
                 }
-                else {
+                else if (field.type !== 'group-title') {
                     /** @type {?} */
                     var control = new FormControl(defaultValue, validators);
                     this_1.form.addControl(field.name, control);
@@ -1483,7 +1513,7 @@ var GenericFilterComponent = /** @class */ (function () {
      * @param {?} settings
      * @return {?}
      */
-    GenericFilterComponent.prototype.buildFindLocationFormArray = /**
+    GenericFilterComponent.prototype.buildFormArray = /**
      * @private
      * @param {?} field
      * @param {?} settings
@@ -1579,7 +1609,7 @@ var GenericFilterComponent = /** @class */ (function () {
                 var field = _c.value;
                 /** @type {?} */
                 var formGroup = form.get(field.name);
-                if (formGroup && formGroup.errors && formGroup.errors.minlength) {
+                if (formGroup && formGroup.errors && (formGroup.errors.minlength || formGroup.errors.required)) {
                     errors.push({ name: field.name, error: field.minSelectedError });
                 }
                 if (formGroup && formGroup.errors && formGroup.errors.maxLength) {
@@ -1594,17 +1624,159 @@ var GenericFilterComponent = /** @class */ (function () {
             }
             finally { if (e_8) throw e_8.error; }
         }
+        // remove duplicates
+        errors = errors.filter((/**
+         * @param {?} filterError
+         * @param {?} i
+         * @param {?} arr
+         * @return {?}
+         */
+        function (filterError, i, arr) {
+            return errors.indexOf(arr.find((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) { return item.name === filterError.name; }))) === i;
+        }));
         if (errors.length) {
             this.filterService.givenErrors.next(errors);
         }
     };
+    /**
+     * @param {?} services
+     * @param {?} config
+     * @return {?}
+     */
+    GenericFilterComponent.prototype.filterSkillsByServices = /**
+     * @param {?} services
+     * @param {?} config
+     * @return {?}
+     */
+    function (services, config) {
+        var _this = this;
+        this.filteredSkillsByServices = [];
+        /** @type {?} */
+        var userSkillsField = config.fields.find((/**
+         * @param {?} f
+         * @return {?}
+         */
+        function (f) { return f.name === 'user-skills'; }));
+        if (userSkillsField) {
+            /** @type {?} */
+            var userSkills_1 = userSkillsField.groupOptions;
+            if (!services || services.length === 0) {
+                this.filteredSkillsByServices = userSkills_1;
+            }
+            else {
+                services.forEach((/**
+                 * @param {?} s
+                 * @return {?}
+                 */
+                function (s) {
+                    /** @type {?} */
+                    var groupOption = userSkills_1.find((/**
+                     * @param {?} u
+                     * @return {?}
+                     */
+                    function (u) { return u.group === s; }));
+                    if (groupOption) {
+                        _this.filteredSkillsByServices.push(groupOption);
+                    }
+                }));
+            }
+        }
+        this.filteredSkillsByServices = this.sortGroupOptions(this.filteredSkillsByServices);
+        return this.filteredSkillsByServices;
+    };
+    /**
+     * @private
+     * @param {?} formValues
+     * @param {?} field
+     * @return {?}
+     */
+    GenericFilterComponent.prototype.getSelectedValuesForFields = /**
+     * @private
+     * @param {?} formValues
+     * @param {?} field
+     * @return {?}
+     */
+    function (formValues, field) {
+        /** @type {?} */
+        var selectedValues = [];
+        Object.keys(formValues).map((/**
+         * @param {?} name
+         * @return {?}
+         */
+        function (name) {
+            /** @type {?} */
+            var values = formValues[name].value;
+            if (name === field.name) {
+                values.forEach((/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                function (v) {
+                    selectedValues.push(v.key);
+                }));
+            }
+        }));
+        return selectedValues;
+    };
+    /**
+     * @private
+     * @param {?} groupOptions
+     * @return {?}
+     */
+    GenericFilterComponent.prototype.sortGroupOptions = /**
+     * @private
+     * @param {?} groupOptions
+     * @return {?}
+     */
+    function (groupOptions) {
+        /** @type {?} */
+        var sortedResults = [];
+        /** @type {?} */
+        var groups = groupOptions.map((/**
+         * @param {?} go
+         * @return {?}
+         */
+        function (go) { return go.group; }));
+        groups.sort().forEach((/**
+         * @param {?} g
+         * @return {?}
+         */
+        function (g) {
+            /** @type {?} */
+            var options = groupOptions.find((/**
+             * @param {?} go
+             * @return {?}
+             */
+            function (go) { return go.group === g; })).options;
+            /** @type {?} */
+            var sortedOptions = options.sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) {
+                return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : (b.label.toLowerCase() > a.label.toLowerCase() ? -1 : 0);
+            }));
+            /** @type {?} */
+            var result = {
+                group: g,
+                options: sortedOptions
+            };
+            sortedResults.push(result);
+        }));
+        return sortedResults;
+    };
     GenericFilterComponent.decorators = [
         { type: Component, args: [{
                     selector: 'xuilib-generic-filter',
-                    template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break 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?.required) || 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 || form.get(field.name).errors?.required)\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.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-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                                [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          />\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 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\n      <ng-container *ngSwitchDefault>\n        <div class=\"govuk-form-group xui-generic-filter\"\n             [hidden]=\"hidden(field, form)\"\n             [id]=\"field.name\"\n             [ngClass]=\"{'form-group-error': submitted && ((form.get(field.name).errors?.minlength || form.get(field.name).errors?.required) || form.get(field.name).errors?.maxLength || form.get(field.name).errors?.email)}\">\n\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\n            <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n              {{ field.titleHint }}\n            </div>\n          </div>\n\n          <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n\n          <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n            *ngIf=\"field.displayMinSelectedError && submitted && (form.get(field.name).errors?.minlength || form.get(field.name).errors?.required)\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n          </span>\n\n          <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n            *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n          </span>\n\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\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 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 selected value=\"\">{{field.disabledText}}</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=\"'checkbox-large'\">\n              <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n                <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n                  <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                         [attr.disabled]=\"disabled(field, form)\"\n                         [formControlName]=\"i\"\n                         (change)=\"toggleSelectAll($event, form, item, field)\"\n                         [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                         [name]=\"'checkbox_' + item.key\"\n                  />\n                  <label\n                    [for]=\"'checkbox_' + item.key\"\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n                  >{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'radio'\">\n              <div class=\"govuk-radios\">\n                <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n                  <input type=\"radio\"\n                         [formControlName]=\"field.name\"\n                         [id]=\"'radio_' + item.key\"\n                         [attr.disabled]=\"disabled(field, form)\"\n                         [checked]=\"item.key === form.get(field.name).value\"\n                         class=\"govuk-radios__input\"\n                         [value]=\"item.key\"\n                         (change)=\"fieldChanged(field, form)\"\n                  />\n                  <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'find-person'\">\n              <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                                  (personFieldChanged)=\"inputChanged(field)\"\n                                  [submitted]=\"submitted\"\n                                  [disabled]=\"disabled(field, form)\"\n                                  [domain]=\"form.get(field.domainField)?.value\"\n                                  [findPersonGroup]=\"form\"\n                                  [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                                  [userIncluded]=\"false\"\n              ></xuilib-find-person>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'find-location'\">\n              <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                    [form]=\"form\"\n                                    [fields]=\"config.fields\"\n                                    [locationTitle]=\"field.locationTitle\"\n                                    [enableAddLocationButton]=\"field.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-service'\">\n              <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                    [form]=\"form\"\n                                    [enableAddServiceButton]=\"field.enableAddButton\"\n                                    [disabled]=\"disabled(field, form)\"\n                                    [selectedServices]=\"form.get(field.name)?.value\"\n                                    [services]=\"field.options\"\n                                    [field]=\"field\"\n              ></xuilib-find-service>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'text-input'\">\n              <input class=\"govuk-input\" type=\"text\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"field.name\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\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\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    styles: [".contain-classes .elevated-break{margin-bottom:20px}@media (min-width:40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .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 .govuk-select{width:100%}"]
+                    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 */
@@ -3885,7 +4057,7 @@ var LocationService = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * Generated from: lib/services/session-storage/session-storage.service.ts
+ * Generated from: lib/services/storage/session-storage/session-storage.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var SessionStorageService = /** @class */ (function () {
@@ -4463,7 +4635,7 @@ var FindLocationComponent = /** @class */ (function () {
     FindLocationComponent.decorators = [
         { type: Component, args: [{
                     selector: 'xuilib-find-location',
-                    template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n\n    <div class=\"search-location__input-container\">\n      <exui-search-location class=\"search-location__input\"\n                            [locations]=\"locations\"\n                            [selectedLocations]=\"selectedLocations\"\n                            [singleMode]=\"field.maxSelected === 1\"\n                            [bookingCheck]=\"field.bookingCheckType\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"\n                            [serviceIds]=\"serviceIds\"\n                            (locationInputChanged)=\"onInputChanged($event)\"\n                            (locationSelected)=\"onLocationSelected($event)\"\n                            (searchLocationChanged)=\"onSearchInputChanged()\"\n                            [locationType]=\"'case-management'\"></exui-search-location>\n      <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\" *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",
+                    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}"]
                 }] }
     ];
@@ -5191,15 +5363,28 @@ var FindPersonComponent = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var FindServiceComponent = /** @class */ (function () {
-    function FindServiceComponent(fb) {
-        this.fb = fb;
-        this.serviceTitle = 'Search for a service by name';
+    function FindServiceComponent() {
+        this.services = [];
+        this.selectedServices = [];
         this.enableAddServiceButton = true;
-        this.disableInputField = false;
-        this.form = this.fb.group({
-            searchTerm: ['']
-        });
+        this.disabled = false;
+        this.serviceFieldChanged = new EventEmitter();
+        this.tempSelectedService = null;
     }
+    /**
+     * @return {?}
+     */
+    FindServiceComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        this.selectedServices = this.selectedServices !== null ? this.selectedServices.filter((/**
+         * @param {?} service
+         * @return {?}
+         */
+        function (service) { return service.key; })) : [];
+        this.SortAnOptions();
+    };
     /**
      * @return {?}
      */
@@ -5207,19 +5392,149 @@ var FindServiceComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        // Todo
+        var _this = this;
+        if (this.tempSelectedService === null) {
+            return;
+        }
+        this.selectedServices = __spread(this.selectedServices, [this.tempSelectedService]);
+        this.addSelectedServicesToForm([this.tempSelectedService]);
+        this.services = this.services.filter((/**
+         * @param {?} s
+         * @return {?}
+         */
+        function (s) { return s.key !== _this.tempSelectedService.key; }));
+        this.tempSelectedService = null;
+        this.serviceFieldChanged.emit();
+    };
+    /**
+     * @param {?} service
+     * @return {?}
+     */
+    FindServiceComponent.prototype.removeService = /**
+     * @param {?} service
+     * @return {?}
+     */
+    function (service) {
+        if (service.key) {
+            this.selectedServices = this.selectedServices !== null ? this.selectedServices.filter((/**
+             * @param {?} selectedService
+             * @return {?}
+             */
+            function (selectedService) { return selectedService.key !== service.key; })) : [];
+            /** @type {?} */
+            var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+            /** @type {?} */
+            var index = (formArray.value).findIndex((/**
+             * @param {?} selectedService
+             * @return {?}
+             */
+            function (selectedService) { return selectedService.key === service.key; }));
+            if (index > -1) {
+                formArray.removeAt(index);
+                this.services.splice(index, 0, service);
+                this.SortAnOptions();
+            }
+            this.serviceFieldChanged.emit();
+        }
+    };
+    /**
+     * @param {?} service
+     * @return {?}
+     */
+    FindServiceComponent.prototype.onServiceSelected = /**
+     * @param {?} service
+     * @return {?}
+     */
+    function (service) {
+        if (!service) {
+            this.tempSelectedService = null;
+            return;
+        }
+        if (this.field.maxSelected === 1) {
+            this.removeSelectedValues();
+            this.addSelectedServicesToForm([service]);
+        }
+        else {
+            if (!this.selectedServices.find((/**
+             * @param {?} s
+             * @return {?}
+             */
+            function (s) { return s.key === service.key; }))) {
+                if (service.key) {
+                    this.tempSelectedService = service;
+                }
+            }
+        }
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    FindServiceComponent.prototype.removeSelectedValues = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+        for (var i = 0; i < formArray.length; i++) {
+            formArray.removeAt(i);
+        }
+        this.selectedServices = [];
+    };
+    /**
+     * @private
+     * @param {?} services
+     * @return {?}
+     */
+    FindServiceComponent.prototype.addSelectedServicesToForm = /**
+     * @private
+     * @param {?} services
+     * @return {?}
+     */
+    function (services) {
+        var e_1, _a;
+        /** @type {?} */
+        var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+        try {
+            for (var services_1 = __values(services), services_1_1 = services_1.next(); !services_1_1.done; services_1_1 = services_1.next()) {
+                var service = services_1_1.value;
+                formArray.push(new FormControl(service));
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (services_1_1 && !services_1_1.done && (_a = services_1.return)) _a.call(services_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    FindServiceComponent.prototype.SortAnOptions = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        return this.services.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        function (a, b) {
+            return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : (b.label.toLowerCase() > a.label.toLowerCase() ? -1 : 0);
+        }));
     };
     FindServiceComponent.decorators = [
         { type: Component, args: [{
                     selector: 'xuilib-find-service',
-                    template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n      <div class=\"govuk-body\">\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <div class=\"search-service__input-container\">\n        <exui-search-service class=\"search-service__input\"\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    </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",
+                    template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\" [services]=\"services\"\n        (serviceChanged)=\"onServiceSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeService(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label }}\n      </a>\n    </li>\n  </ul>\n</div>",
                     styles: ["#add-service{background-color:#ddd}.search-service__input-container{display:flex}.search-service__input{flex:1 0 auto}"]
                 }] }
     ];
-    /** @nocollapse */
-    FindServiceComponent.ctorParameters = function () { return [
-        { type: FormBuilder }
-    ]; };
     FindServiceComponent.propDecorators = {
         field: [{ type: Input }],
         fields: [{ type: Input }],
@@ -5227,9 +5542,9 @@ var FindServiceComponent = /** @class */ (function () {
         form: [{ type: Input }],
         services: [{ type: Input }],
         selectedServices: [{ type: Input }],
-        disabled: [{ type: Input }],
         enableAddServiceButton: [{ type: Input }],
-        disableInputField: [{ type: Input }]
+        disabled: [{ type: Input }],
+        serviceFieldChanged: [{ type: Output }]
     };
     return FindServiceComponent;
 }());
@@ -5482,42 +5797,36 @@ var SearchJudicialsComponent = /** @class */ (function () {
  */
 var SearchServiceComponent = /** @class */ (function () {
     function SearchServiceComponent() {
-        this.showAutocomplete = false;
-        this.minSearchCharacters = 3;
-        this.term = '';
+        this.services = [];
+        this.serviceChanged = new EventEmitter();
     }
     /**
+     * @param {?} key
      * @return {?}
      */
-    SearchServiceComponent.prototype.onInput = /**
-     * @return {?}
-     */
-    function () {
-        // Todo
-    };
-    /**
-     * @return {?}
-     */
-    SearchServiceComponent.prototype.onSelectionChange = /**
+    SearchServiceComponent.prototype.onSelectionChanged = /**
+     * @param {?} key
      * @return {?}
      */
-    function () {
-        // Todo
+    function (key) {
+        /** @type {?} */
+        var selectedService = this.services.find((/**
+         * @param {?} s
+         * @return {?}
+         */
+        function (s) { return s.key === key; }));
+        this.serviceChanged.emit(selectedService);
     };
     SearchServiceComponent.decorators = [
         { type: 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=\"govuk-form-group\">\n  <select id=\"serviceSearch__select\" class=\"govuk-select\" name=\"serviceSearch__select\"\n    (change)=\"onSelectionChanged($event.target.value)\">\n    <option [value]=\"null\">All</option>\n    <option *ngFor=\"let service of services\" [value]=\"service.key\">\n      {{ service.label }}\n    </option>\n  </select>\n</div>",
                     styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{width:calc(100% - 4px);display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
                 }] }
     ];
     SearchServiceComponent.propDecorators = {
         services: [{ type: Input }],
-        selectedServices: [{ type: Input }],
-        disabled: [{ type: Input }],
-        delay: [{ type: Input }],
-        form: [{ type: Input }],
-        showAutocomplete: [{ type: Input }]
+        serviceChanged: [{ type: Output }]
     };
     return SearchServiceComponent;
 }());
@@ -6885,6 +7194,33 @@ var RemoveHostDirective = /** @class */ (function () {
     return RemoveHostDirective;
 }());
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/pipes/capitalize.pipe.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var CapitalizePipe = /** @class */ (function () {
+    function CapitalizePipe() {
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    CapitalizePipe.prototype.transform = /**
+     * @param {?} value
+     * @return {?}
+     */
+    function (value) {
+        /** @type {?} */
+        var lowerCaseString = value.toLowerCase();
+        return lowerCaseString.charAt(0).toUpperCase() + lowerCaseString.slice(1);
+    };
+    CapitalizePipe.decorators = [
+        { type: Pipe, args: [{ name: 'capitalize' },] }
+    ];
+    return CapitalizePipe;
+}());
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/exui-common-lib.module.ts
@@ -6954,13 +7290,17 @@ var GOV_UI_COMPONENTS = [
     GovUkFileUploadComponent,
     RemoveHostDirective
 ];
+/** @type {?} */
+var pipes = [
+    CapitalizePipe
+];
 var ɵ0 = windowProvider;
 var ExuiCommonLibModule = /** @class */ (function () {
     function ExuiCommonLibModule() {
     }
     ExuiCommonLibModule.decorators = [
         { type: NgModule, args: [{
-                    declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS),
+                    declarations: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, pipes),
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -6976,7 +7316,7 @@ var ExuiCommonLibModule = /** @class */ (function () {
                     ],
                     exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, [
                         PaginatePipe
-                    ])
+                    ], pipes)
                 },] }
     ];
     return ExuiCommonLibModule;
@@ -8002,6 +8342,6 @@ var LoadingService = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AccessibilityComponent, CheckboxListComponent, ContactDetailsComponent, DueDateComponent, GenericFilterComponent, HmctsSessionDialogComponent, InviteUserFormComponent, InviteUserPermissionComponent, LoadingSpinnerComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, SelectedCaseComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseConfirmComponent, ShareCaseComponent, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, UserDetailsComponent, UserListComponent, CookieBannerComponent, FindLocationComponent, SearchLocationComponent, PaginationComponent, FeatureToggleDirective, LetContext, LetDirective, COMMON_COMPONENTS, GOV_UI_COMPONENTS, ExuiCommonLibModule, GovUiService, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, HmctsSubNavigationComponent, 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, 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, CapitalizePipe as ɵco, CaseSharingStateService as ɵr, CookieService as ɵbg, FeatureToggleService as ɵh, FilterService as ɵbe, FindAPersonService as ɵbi, LocationService as ɵbn, SessionStorageService as ɵbj };
 
 //# sourceMappingURL=hmcts-rpx-xui-common-lib.js.map