@hmcts/rpx-xui-common-lib 1.7.0-ao-rectification.1 → 1.7.3-user-list-performance-pagination

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/tabs'), require('ngx-pagination'), require('@angular/forms'), require('@angular/common/http'), require('launchdarkly-js-client-sdk'), require('@angular/common'), require('@angular/platform-browser'), require('@ng-idle/core'), require('@ng-idle/keepalive'), require('@angular/router'), require('@angular/core'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@hmcts/rpx-xui-common-lib', ['exports', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/tabs', 'ngx-pagination', '@angular/forms', '@angular/common/http', 'launchdarkly-js-client-sdk', '@angular/common', '@angular/platform-browser', '@ng-idle/core', '@ng-idle/keepalive', '@angular/router', '@angular/core', 'rxjs', 'rxjs/operators'], factory) :
-    (factory((global.hmcts = global.hmcts || {}, global.hmcts['rpx-xui-common-lib'] = {}),global.ng.material.autocomplete,global.ng.material.input,global.ng.material.tabs,global.ngxPagination,global.ng.forms,global.ng.common.http,global.LDClient,global.ng.common,global.ng.platformBrowser,global.i1$1,global.i2$1,global.ng.router,global.ng.core,global.rxjs,global.rxjs.operators));
-}(this, (function (exports,autocomplete,input,tabs,ngxPagination,forms,i1,LDClient,i4,i2,i1$1,i2$1,i2$2,i0,rxjs,operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/material'), require('@angular/material/autocomplete'), require('ngx-pagination'), require('@angular/common/http'), require('@angular/forms'), require('launchdarkly-js-client-sdk'), require('@angular/common'), require('@angular/platform-browser'), require('@ng-idle/core'), require('@ng-idle/keepalive'), require('@angular/router'), require('@angular/core'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@hmcts/rpx-xui-common-lib', ['exports', '@angular/material', '@angular/material/autocomplete', 'ngx-pagination', '@angular/common/http', '@angular/forms', 'launchdarkly-js-client-sdk', '@angular/common', '@angular/platform-browser', '@ng-idle/core', '@ng-idle/keepalive', '@angular/router', '@angular/core', 'rxjs', 'rxjs/operators'], factory) :
+    (factory((global.hmcts = global.hmcts || {}, global.hmcts['rpx-xui-common-lib'] = {}),global.ng.material,global.ng.material.autocomplete,global.ngxPagination,global.ng.common.http,global.ng.forms,global.LDClient,global.ng.common,global.ng.platformBrowser,global.i1$1,global.i2$1,global.ng.router,global.ng.core,global.rxjs,global.rxjs.operators));
+}(this, (function (exports,material,autocomplete,ngxPagination,i1,forms,LDClient,i4,i2,i1$1,i2$1,i2$2,i0,rxjs,operators) { 'use strict';
 
     /**
      * @fileoverview added by tsickle
@@ -1035,7 +1035,13 @@
                         }
                     }
                 }
-                return true;
+                // find-location is special case where need to reset textbox (by existing disabling functionality)
+                // field.disable referred to component itself
+                if (field.type === 'find-location') {
+                    return true;
+                }
+                // Note: field.disable decides whether to actually disable or not
+                return field.disable ? field.disable : null;
             };
         /**
          * @param {?} form
@@ -1101,6 +1107,24 @@
                     }
                 }
             };
+        // when user enters input change radio button
+        // when user enters input change radio button
+        /**
+         * @param {?} field
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.inputChanged =
+            // when user enters input change radio button
+            /**
+             * @param {?} field
+             * @return {?}
+             */
+            function (field) {
+                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);
+                }
+            };
         /**
          * @return {?}
          */
@@ -1130,7 +1154,6 @@
          */
             function (values, field) {
                 var e_2, _a;
-                console.log('updatePersonControls', values, field);
                 /** @type {?} */
                 var keys;
                 if (!values) {
@@ -1514,7 +1537,7 @@
                      * @param {?} f
                      * @return {?}
                      */function (f) { return f.name === field.name; }));
-                    if (defaultValues) {
+                    if (defaultValues && defaultValues.value && defaultValues.value.length > 0) {
                         try {
                             for (var _b = __values(defaultValues.value), _c = _b.next(); !_c.done; _c = _b.next()) {
                                 var defaultValue = _c.value;
@@ -1622,7 +1645,7 @@
         GenericFilterComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-generic-filter',
-                        template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              [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 [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddLocationButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [field]=\"field\"\n          ></xuilib-find-location>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
+                        template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddLocationButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [field]=\"field\"\n          ></xuilib-find-location>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
                         styles: [".contain-classes .elevated-break{position:relative;top:-10px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}"]
@@ -3420,12 +3443,17 @@
         function UserListComponent() {
             this.users = [];
             this.userClick = new i0.EventEmitter();
-            this.moreResultsToGo = false;
-            this.pagination = {
-                page_number: 1,
-                page_size: 25
-            };
+            this.pageChange = new i0.EventEmitter();
         }
+        /**
+         * @return {?}
+         */
+        UserListComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                this.pagination = { itemsPerPage: 50, currentPage: this.currentPageNumber, totalItems: this.pageTotalSize };
+            };
         /**
          * @param {?} user
          * @return {?}
@@ -3441,74 +3469,27 @@
          * @param {?} pageNumber
          * @return {?}
          */
-        UserListComponent.prototype.onPaginationHandler = /**
+        UserListComponent.prototype.emitPageClickEvent = /**
          * @param {?} pageNumber
          * @return {?}
          */
             function (pageNumber) {
-                this.pagination.page_number = pageNumber;
-            };
-        /**
-         * @param {?} rows
-         * @return {?}
-         */
-        UserListComponent.prototype.getFirstResult = /**
-         * @param {?} rows
-         * @return {?}
-         */
-            function (rows) {
-                if (rows && rows.length > 0) {
-                    /** @type {?} */
-                    var currentPage = (this.pagination.page_number ? this.pagination.page_number : 1);
-                    if (currentPage === 1) {
-                        return currentPage;
-                    }
-                    return (currentPage - 1) * this.pagination.page_size + 1;
-                }
-                return 0;
-            };
-        /**
-         * @param {?} rows
-         * @return {?}
-         */
-        UserListComponent.prototype.getLastResult = /**
-         * @param {?} rows
-         * @return {?}
-         */
-            function (rows) {
-                if (rows && rows.length > 0) {
-                    /** @type {?} */
-                    var currentPage = (this.pagination.page_number ? this.pagination.page_number : 1);
-                    return (currentPage) * this.pagination.page_size;
-                }
-                return 0;
-            };
-        /**
-         * @param {?} rows
-         * @return {?}
-         */
-        UserListComponent.prototype.getTotalResults = /**
-         * @param {?} rows
-         * @return {?}
-         */
-            function (rows) {
-                if (rows && rows.length > 0) {
-                    return rows.length;
-                }
-                return 0;
+                this.currentPageNumber = pageNumber;
+                this.pageChange.emit(pageNumber);
             };
         UserListComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-user-list',
-                        template: "<div class=\"pagination-top\" *ngIf=\"getTotalResults(users) > pagination.page_size\" attr.aria-label=\"{{ getTotalResults(users) }} results have been found\" role=\"status\">\n    <span class=\"text-16\" id=\"search-result-summary__text\">Showing \n      <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult(users) }}</span>\n      to\n      <span class=\"govuk-!-font-weight-bold\">{{ getLastResult(users) }}</span>\n      of\n      <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults(users) }}</span> results</span>\n</div>\n<table class=\"govuk-table\">\n    <thead clas=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Name</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Email</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Status</th>\n        </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" data-selector=\"table-row\" *ngFor=\"let u of users | paginate: { itemsPerPage: pagination?.page_size, currentPage: pagination?.page_number, totalItems: users.length }\">\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">\n              <a class=\"govuk-link\" [attr.title]=\"u.routerLinkTitle\" [routerLink]=\"u.routerLink\" (click)=\"onUserClick(u)\">{{ u.fullName }}</a>\n            </td>\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">{{ u.email }}</td>\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">{{ u.status }}</td>\n        </tr>\n    </tbody>\n</table>\n<xuilib-pagination-v1 *ngIf=\"getTotalResults(users) > pagination.page_size\" (pageChange)=\"onPaginationHandler($event)\"></xuilib-pagination-v1>",
+                        template: "<table class=\"govuk-table\">\n\n    <thead clas=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Name</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Email</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Status</th>\n        </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n      <ng-container *ngFor=\"let u of users | paginate: { itemsPerPage: pagination.itemsPerPage, currentPage: currentPageNumber, totalItems: pagination.totalItems }\">\n        <tr class=\"govuk-table__row\" data-selector=\"table-row\">\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">\n              <a class=\"govuk-link\" [attr.title]=\"u.routerLinkTitle\" [routerLink]=\"u.routerLink\" (click)=\"onUserClick(u)\">{{ u.fullName }}</a>\n            </td>\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">{{ u.email }}</td>\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">{{ u.status }}</td>\n        </tr>\n      </ng-container>\n    </tbody>\n</table>\n<xuilib-hmcts-pagination (pageChange)=\"emitPageClickEvent($event)\" [pageSize]=\"pagination.itemsPerPage\"></xuilib-hmcts-pagination>\n",
                         styles: [":host{display:block}"]
                     }] }
         ];
-        /** @nocollapse */
-        UserListComponent.ctorParameters = function () { return []; };
         UserListComponent.propDecorators = {
             users: [{ type: i0.Input }],
-            userClick: [{ type: i0.Output }]
+            currentPageNumber: [{ type: i0.Input }],
+            pageTotalSize: [{ type: i0.Input }],
+            userClick: [{ type: i0.Output }],
+            pageChange: [{ type: i0.Output }]
         };
         return UserListComponent;
     }());
@@ -3812,6 +3793,30 @@
             function (serviceIds, locationType, searchTerm) {
                 return this.http.get("api/locations/getLocations?serviceIds=" + serviceIds + "&locationType=" + locationType + "&searchTerm=" + searchTerm);
             };
+        /**
+         * @description searchLocations from service Ids/location type/search term
+         * @param serviceIds: BBA3 | BBA3,BFA1 split with ','
+         * @param locationType: optional | hearing | case_management
+         * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
+         * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+        /**
+         * \@description searchLocations from service Ids/location type/search term
+         * @param {?} serviceIds
+         * @param {?} locationType
+         * @param {?} searchTerm
+         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+        LocationService.prototype.searchLocations = /**
+         * \@description searchLocations from service Ids/location type/search term
+         * @param {?} serviceIds
+         * @param {?} locationType
+         * @param {?} searchTerm
+         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+         */
+            function (serviceIds, locationType, searchTerm) {
+                return this.http.get("api/prd/location/getLocations?serviceIds=" + serviceIds + "&locationType=" + locationType + "&searchTerm=" + searchTerm);
+            };
         LocationService.decorators = [
             { type: i0.Injectable, args: [{
                         providedIn: 'root'
@@ -3847,6 +3852,7 @@
             this.locations = [];
             this.locationSelected = new i0.EventEmitter();
             this.locationInputChanged = new i0.EventEmitter();
+            this.searchLocationChanged = new i0.EventEmitter();
             this.minSearchCharacters = 3;
             this.term = '';
             this.pSelectedLocations = [];
@@ -3967,6 +3973,15 @@
                     _this.showAutocomplete = true;
                 }));
             };
+        /**
+         * @return {?}
+         */
+        SearchLocationComponent.prototype.onInput = /**
+         * @return {?}
+         */
+            function () {
+                this.searchLocationChanged.emit();
+            };
         /**
          * @param {?} term
          * @return {?}
@@ -4015,7 +4030,7 @@
         SearchLocationComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'exui-search-location',
-                        template: "<div class=\"auto-complete-container\">\n  <input\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",
+                        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}"]
                     }] }
         ];
@@ -4040,6 +4055,7 @@
             locations: [{ type: i0.Input }],
             locationSelected: [{ type: i0.Output }],
             locationInputChanged: [{ type: i0.Output }],
+            searchLocationChanged: [{ type: i0.Output }],
             reset: [{ type: i0.Input }],
             selectedLocations: [{ type: i0.Input }]
         };
@@ -4053,10 +4069,12 @@
      */
     var FindLocationComponent = /** @class */ (function () {
         function FindLocationComponent() {
+            this.locationFieldChanged = new i0.EventEmitter();
             this.selectedLocations = [];
             this.submitted = true;
             this.enableAddLocationButton = true;
             this.locationTitle = 'Search for a location by name';
+            this.disableInputField = false;
             this.locations = [];
             this.tempSelectedLocation = null;
             this.serviceIds = 'SSCS,IA';
@@ -4077,7 +4095,7 @@
                     this.searchLocationComponent.resetSearchTerm();
                     this.removeSelectedValues();
                 }
-                this.pDisabled = value;
+                this.pDisabled = this.disableInputField === true ? true : null;
             },
             enumerable: true,
             configurable: true
@@ -4169,6 +4187,15 @@
                     this.removeSelectedValues();
                 }
             };
+        /**
+         * @return {?}
+         */
+        FindLocationComponent.prototype.onSearchInputChanged = /**
+         * @return {?}
+         */
+            function () {
+                this.locationFieldChanged.emit();
+            };
         /**
          * @param {?} location
          * @return {?}
@@ -4246,11 +4273,12 @@
         FindLocationComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-find-location',
-                        template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          [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",
+                        template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
                         styles: [""]
                     }] }
         ];
         FindLocationComponent.propDecorators = {
+            locationFieldChanged: [{ type: i0.Output }],
             selectedLocations: [{ type: i0.Input }],
             submitted: [{ type: i0.Input }],
             enableAddLocationButton: [{ type: i0.Input }],
@@ -4258,6 +4286,7 @@
             field: [{ type: i0.Input }],
             fields: [{ type: i0.Input }],
             locationTitle: [{ type: i0.Input }],
+            disableInputField: [{ type: i0.Input }],
             searchLocationComponent: [{ type: i0.ViewChild, args: [SearchLocationComponent,] }],
             disabled: [{ type: i0.Input }],
             services: [{ type: i0.Input }]
@@ -4311,105 +4340,6 @@
         return PaginationComponent;
     }());
 
-    /**
-     * @fileoverview added by tsickle
-     * Generated from: lib/components/pagination-v1/pagination.component.ts
-     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @param {?} input
-     * @return {?}
-     */
-    function coerceToBoolean(input$$1) {
-        return !!input$$1 && input$$1 !== 'false';
-    }
-    var PaginationV1Component = /** @class */ (function () {
-        function PaginationV1Component() {
-            this.maxSize = 7;
-            this.previousLabel = 'Previous';
-            this.nextLabel = 'Next';
-            this.screenReaderPaginationLabel = 'Pagination';
-            this.screenReaderPageLabel = 'page';
-            this.screenReaderCurrentLabel = "You're on page";
-            this.pageChange = new i0.EventEmitter();
-            this.pageBoundsCorrection = new i0.EventEmitter();
-            // tslint:disable-next-line:variable-name
-            this._directionLinks = true;
-            // tslint:disable-next-line:variable-name
-            this._autoHide = false;
-            // tslint:disable-next-line:variable-name
-            this._responsive = false;
-        }
-        Object.defineProperty(PaginationV1Component.prototype, "directionLinks", {
-            get: /**
-             * @return {?}
-             */ function () {
-                return this._directionLinks;
-            },
-            set: /**
-             * @param {?} value
-             * @return {?}
-             */ function (value) {
-                this._directionLinks = coerceToBoolean(value);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(PaginationV1Component.prototype, "autoHide", {
-            get: /**
-             * @return {?}
-             */ function () {
-                return this._autoHide;
-            },
-            set: /**
-             * @param {?} value
-             * @return {?}
-             */ function (value) {
-                this._autoHide = coerceToBoolean(value);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(PaginationV1Component.prototype, "responsive", {
-            get: /**
-             * @return {?}
-             */ function () {
-                return this._responsive;
-            },
-            set: /**
-             * @param {?} value
-             * @return {?}
-             */ function (value) {
-                this._responsive = coerceToBoolean(value);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        PaginationV1Component.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'xuilib-pagination-v1',
-                        template: "<pagination-template #p=\"paginationApi\" [id]=\"id\" [maxSize]=\"maxSize\" (pageChange)=\"pageChange.emit($event)\"\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\">\n  <nav role=\"navigation\" aria-label=\"Pagination\">\n    <ul class=\"ngx-pagination\" role=\"navigation\" [attr.aria-label]=\"screenReaderPaginationLabel\"\n      [class.responsive]=\"responsive\" *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n      <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\">\n        <a tabindex=\"0\" *ngIf=\"1 < p.getCurrent()\" (keyup.enter)=\"p.previous()\" (click)=\"p.previous()\"\n          [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n          {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n        </a>\n        <span *ngIf=\"p.isFirstPage()\">\n          {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n        </span>\n      </li>\n      <li class=\"small-screen\">\n        {{ p.getCurrent() }} / {{ p.getLastPage() }}\n      </li>\n      <li [class.current]=\"p.getCurrent() === page.value\" [class.ellipsis]=\"page.label === '...'\"\n        *ngFor=\"let page of p.pages\">\n        <a tabindex=\"0\" (keyup.enter)=\"p.setCurrent(page.value)\" (click)=\"p.setCurrent(page.value)\"\n          *ngIf=\"p.getCurrent() !== page.value\">\n          <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n          <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n        </a>\n        <ng-container *ngIf=\"p.getCurrent() === page.value\">\n          <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n          <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n        </ng-container>\n      </li>\n      <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n        <a tabindex=\"0\" *ngIf=\"!p.isLastPage()\" (keyup.enter)=\"p.next()\" (click)=\"p.next()\"\n          [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n          {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n        </a>\n        <span *ngIf=\"p.isLastPage()\">\n          {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n        </span>\n      </li>\n    </ul>\n  </nav>\n</pagination-template>\n",
-                        styles: [".ngx-pagination{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination::after,.ngx-pagination::before{content:\" \";display:table}.ngx-pagination::after{clear:both}.ngx-pagination li{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0;display:inline-block}.ngx-pagination a,.ngx-pagination button{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6;cursor:pointer}.ngx-pagination a:hover,.ngx-pagination button:hover{background:#e6e6e6}.ngx-pagination .current{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900}.ngx-pagination .disabled{display:none}.ngx-pagination .disabled:hover{background:0 0}.ngx-pagination .pagination-previous a::before,.ngx-pagination .pagination-previous.disabled::before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:0 0;transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination .pagination-next a::after,.ngx-pagination .pagination-next.disabled::after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:0 0;transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination .show-for-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination .small-screen{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive .small-screen{display:inline-block}.ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"]
-                    }] }
-        ];
-        PaginationV1Component.propDecorators = {
-            visibilityLabel: [{ type: i0.Input }],
-            id: [{ type: i0.Input }],
-            maxSize: [{ type: i0.Input }],
-            directionLinks: [{ type: i0.Input }],
-            autoHide: [{ type: i0.Input }],
-            responsive: [{ type: i0.Input }],
-            previousLabel: [{ type: i0.Input }],
-            nextLabel: [{ type: i0.Input }],
-            screenReaderPaginationLabel: [{ type: i0.Input }],
-            screenReaderPageLabel: [{ type: i0.Input }],
-            screenReaderCurrentLabel: [{ type: i0.Input }],
-            pageChange: [{ type: i0.Output }],
-            pageBoundsCorrection: [{ type: i0.Output }]
-        };
-        return PaginationV1Component;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/public_api.ts
@@ -4963,6 +4893,19 @@
                      * @return {?}
                      */function (person) { return person && person.id !== _this.userId && person.id !== _this.assignedUser; }));
             };
+        /**
+         * @param {?} value
+         * @param {?} serviceId
+         * @return {?}
+         */
+        FindAPersonService.prototype.searchJudicial = /**
+         * @param {?} value
+         * @param {?} serviceId
+         * @return {?}
+         */
+            function (value, serviceId) {
+                return this.http.post('api/prd/judicial/getJudicialUsersSearch', { searchString: value, serviceCode: serviceId });
+            };
         FindAPersonService.caseworkersKey = 'caseworkers';
         FindAPersonService.decorators = [
             { type: i0.Injectable, args: [{
@@ -4990,6 +4933,7 @@
             this.findPersonService = findPersonService;
             this.cd = cd;
             this.personSelected = new i0.EventEmitter();
+            this.personFieldChanged = new i0.EventEmitter();
             this.boldTitle = 'Find the person';
             this.subTitle = 'Type the name of the person and select them.';
             this.domain = PersonRole.ALL;
@@ -5136,14 +5080,23 @@
                     return '';
                 }
                 if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
-                    return selectedPerson.knownAs + "(" + selectedPerson.email + ")";
+                    return selectedPerson.knownAs + " (" + selectedPerson.email + ")";
                 }
-                return selectedPerson.email ? selectedPerson.name + "(" + selectedPerson.email + ")" : selectedPerson.name;
+                return selectedPerson.email ? selectedPerson.name + " (" + selectedPerson.email + ")" : selectedPerson.name;
+            };
+        /**
+         * @return {?}
+         */
+        FindPersonComponent.prototype.onInput = /**
+         * @return {?}
+         */
+            function () {
+                this.personFieldChanged.emit();
             };
         FindPersonComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-find-person',
-                        template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findPersonGroup\"\n     [ngClass]=\"{'form-group-error': findPersonGroup.get('findPersonControl').invalid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findPersonGroup && findPersonGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findPersonGroup.errors.error ? findPersonGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectPerson{{idValue}}\" type=\"text\" aria-label=\"select a person\"\n           formControlName=\"findPersonControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"onSelectionChange($event.option.value)\">\n      <mat-option *ngFor=\"let option of filteredOptions\"\n                  [value]=\"option\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n        {{getDisplayName(option)}}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && !filteredOptions.length && showAutocomplete\">No results found</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
+                        template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findPersonGroup\"\n     [ngClass]=\"{'form-group-error': findPersonGroup.get('findPersonControl').invalid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findPersonGroup && findPersonGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findPersonGroup.errors.error ? findPersonGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectPerson{{idValue}}\" type=\"text\" aria-label=\"select a person\"\n           formControlName=\"findPersonControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           (input)=\"onInput()\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"onSelectionChange($event.option.value)\">\n      <mat-option *ngFor=\"let option of filteredOptions\"\n                  [value]=\"option\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n        {{getDisplayName(option)}}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && !filteredOptions.length && showAutocomplete\">No results found</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
                         styles: [".mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}.hide-autocomplete{display:none}"]
                     }] }
         ];
@@ -5156,6 +5109,7 @@
         };
         FindPersonComponent.propDecorators = {
             personSelected: [{ type: i0.Output }],
+            personFieldChanged: [{ type: i0.Output }],
             title: [{ type: i0.Input }],
             boldTitle: [{ type: i0.Input }],
             subTitle: [{ type: i0.Input }],
@@ -5177,6 +5131,485 @@
         return FindPersonComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/search-judicials/search-judicials.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var SearchJudicialsComponent = /** @class */ (function () {
+        function SearchJudicialsComponent(judicialService, fb) {
+            this.judicialService = judicialService;
+            this.disabled = null;
+            this.selectedJudicials = [];
+            this.submitted = true;
+            this.placeholderContent = '';
+            this.showAutocomplete = false;
+            this.judicialChanged = new i0.EventEmitter();
+            this.idValue = '';
+            this.errorMessage = 'You must select a name';
+            this.serviceId = '';
+            this.minSearchCharacters = 3;
+            this.keyUpSubject$ = new rxjs.Subject();
+            this.searchInProgress = false;
+            this.formGroup = fb.group({
+                formControl: [null],
+                selectedFormControl: [null]
+            });
+        }
+        /**
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                this.displayedJudicials = [];
+                if (this.control) {
+                    if (this.formGroup && this.formGroup.controls) {
+                        this.formGroup.controls.selectedFormControl = this.control;
+                        this.formGroup.controls.formControl.setValue(this.getControlValueDisplayText());
+                    }
+                }
+                this.keyUpSubject$.pipe(operators.debounceTime(500)).subscribe(( /**
+                 * @param {?} searchValue
+                 * @return {?}
+                 */function (searchValue) { return _this.search(( /** @type {?} */(searchValue))); }));
+            };
+        /**
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.onKeyDown = /**
+         * @return {?}
+         */
+            function () {
+                this.judicialChanged.emit();
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.onKeyUp = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                this.showAutocomplete = false;
+                this.keyUpSubject$.next(event.target.value);
+            };
+        /**
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.onFocus = /**
+         * @return {?}
+         */
+            function () {
+                this.showAutocomplete = false;
+            };
+        Object.defineProperty(SearchJudicialsComponent.prototype, "displayedJudicialsDuplicationFiltered", {
+            get: /**
+             * @return {?}
+             */ function () {
+                var _this = this;
+                return this.displayedJudicials.filter(( /**
+                 * @param {?} judicial
+                 * @return {?}
+                 */function (judicial) {
+                    return !_this.selectedJudicials.map(( /**
+                     * @param {?} selectedJudicial
+                     * @return {?}
+                     */function (selectedJudicial) { return selectedJudicial.idamId; })).includes(judicial.idamId);
+                }));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @param {?} term
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.filter = /**
+         * @param {?} term
+         * @return {?}
+         */
+            function (term) {
+                var _this = this;
+                this.searchJudicials(term, this.serviceId).pipe(operators.mergeMap(( /**
+                 * @param {?} apiData
+                 * @return {?}
+                 */function (apiData) {
+                    /** @type {?} */
+                    var apiFilter = apiData.filter(( /**
+                     * @param {?} apiJudicial
+                     * @return {?}
+                     */function (apiJudicial) {
+                        return !_this.selectedJudicials.map(( /**
+                         * @param {?} selectedJudicial
+                         * @return {?}
+                         */function (selectedJudicial) { return selectedJudicial.idamId; })).includes(apiJudicial.idamId);
+                    }));
+                    _this.displayedJudicials = apiFilter;
+                    _this.searchInProgress = false;
+                    return apiFilter;
+                }))).subscribe(( /**
+                 * @param {?} judicial
+                 * @return {?}
+                 */function (judicial) {
+                    if (term === judicial.knownAs) {
+                        _this.formGroup.controls.selectedFormControl.setValue(judicial);
+                        _this.displayedJudicials = [];
+                        _this.judicialChanged.emit(judicial);
+                        _this.showAutocomplete = false;
+                    }
+                    _this.searchInProgress = false;
+                }));
+            };
+        /**
+         * @param {?=} selection
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.onSelectionChange = /**
+         * @param {?=} selection
+         * @return {?}
+         */
+            function (selection) {
+                if (this.formGroup.controls.formControl instanceof forms.FormArray) {
+                    (( /** @type {?} */(this.formGroup.controls.selectedFormControl))).push(new forms.FormControl(selection.idamId));
+                }
+                else {
+                    this.formGroup.controls.selectedFormControl.setValue(selection);
+                }
+                this.judicialChanged.emit(selection);
+            };
+        /**
+         * @param {?} currentValue
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.search = /**
+         * @param {?} currentValue
+         * @return {?}
+         */
+            function (currentValue) {
+                this.searchInProgress = true;
+                this.showAutocomplete = !!currentValue && (currentValue.length >= this.minSearchCharacters);
+                if (!!currentValue) {
+                    this.formGroup.controls.selectedFormControl.markAsDirty();
+                }
+                else {
+                    this.formGroup.controls.selectedFormControl.reset();
+                }
+                if (this.showAutocomplete) {
+                    this.filter(currentValue);
+                }
+                else {
+                    this.searchInProgress = false;
+                }
+            };
+        /**
+         * @param {?} selectedJudicial
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.getDisplayName = /**
+         * @param {?} selectedJudicial
+         * @return {?}
+         */
+            function (selectedJudicial) {
+                return selectedJudicial.knownAs + " (" + selectedJudicial.emailId + ")";
+            };
+        /**
+         * @param {?} term
+         * @param {?} serviceId
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.searchJudicials = /**
+         * @param {?} term
+         * @param {?} serviceId
+         * @return {?}
+         */
+            function (term, serviceId) {
+                return this.judicialService.searchJudicial(term, serviceId);
+            };
+        /**
+         * @return {?}
+         */
+        SearchJudicialsComponent.prototype.getControlValueDisplayText = /**
+         * @return {?}
+         */
+            function () {
+                return this.formGroup && this.formGroup.controls && this.formGroup.controls.selectedFormControl.value ?
+                    this.getDisplayName(( /** @type {?} */(this.formGroup.controls.selectedFormControl.value))) : '';
+            };
+        SearchJudicialsComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-search-judicials',
+                        template: "<div class=\"govuk-form-group\">\n  <input id=\"inputSelectPerson{{idValue}}\" [placeholder]=\"placeholderContent\" [formControl]=\"formGroup.controls.formControl\"\n    [matAutocomplete]=\"autoComplete\" (keydown)=\"onKeyDown()\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus()\"\n    class=\"govuk-input\" [attr.disabled]=\"!disabled ? null: disabled\" [value]=\"getControlValueDisplayText()\"\n    #inputSelection>\n  <mat-autocomplete autoActiveFirstOption #autoComplete=\"matAutocomplete\">\n    <mat-option *ngFor=\"let judicial of displayedJudicialsDuplicationFiltered\" class=\"select-option\"\n      [value]=\"getDisplayName(judicial)\" (onSelectionChange)=\"onSelectionChange(judicial)\"\n      [ngClass]=\"{'hide-autocomplete': !showAutocomplete}\">\n      {{ getDisplayName(judicial) }}\n    </mat-option>\n    <mat-option class=\"select-option\"\n      *ngIf=\"!displayedJudicialsDuplicationFiltered?.length && showAutocomplete && !searchInProgress\">\n      {{ 'No results found' }}</mat-option>\n  </mat-autocomplete>\n</div>\n",
+                        styles: [".hide-autocomplete{display:none}.mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        SearchJudicialsComponent.ctorParameters = function () {
+            return [
+                { type: FindAPersonService },
+                { type: forms.FormBuilder }
+            ];
+        };
+        SearchJudicialsComponent.propDecorators = {
+            control: [{ type: i0.Input }],
+            disabled: [{ type: i0.Input }],
+            selectedJudicials: [{ type: i0.Input }],
+            submitted: [{ type: i0.Input }],
+            placeholderContent: [{ type: i0.Input }],
+            showAutocomplete: [{ type: i0.Input }],
+            displayedJudicials: [{ type: i0.Input }],
+            judicialChanged: [{ type: i0.Output }],
+            idValue: [{ type: i0.Input }],
+            errorMessage: [{ type: i0.Input }],
+            serviceId: [{ type: i0.Input }],
+            autoCompleteInputBox: [{ type: i0.ViewChild, args: ['inputSelection', { read: i0.ElementRef },] }]
+        };
+        return SearchJudicialsComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/search-venue/search-venue.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var SearchVenueComponent = /** @class */ (function () {
+        function SearchVenueComponent(locationService, fb) {
+            this.locationService = locationService;
+            this.disabled = null;
+            this.locationType = '';
+            this.serviceIds = '';
+            this.submitted = true;
+            this.showAutocomplete = false;
+            this.locationChanged = new i0.EventEmitter();
+            this.minSearchCharacters = 3;
+            this.keyUpSubject$ = new rxjs.Subject();
+            this.readyAfterContent = false;
+            this.searchInProgress = false;
+            this.findLocationFormGroup = fb.group({
+                findLocationFormControl: [null],
+                locationSelectedFormControl: [null]
+            });
+            this.selectedLocations = [];
+        }
+        /**
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.ngAfterContentInit = /**
+         * @return {?}
+         */
+            function () {
+                this.readyAfterContent = true;
+            };
+        /**
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                this.displayedLocations = [];
+                if (this.control) {
+                    if (this.findLocationFormGroup && this.findLocationFormGroup.controls) {
+                        this.findLocationFormGroup.controls.locationSelectedFormControl = this.control;
+                    }
+                }
+                this.keyUpSubject$.pipe(operators.debounceTime(500)).subscribe(( /**
+                 * @param {?} searchValue
+                 * @return {?}
+                 */function (searchValue) { return _this.search(( /** @type {?} */(searchValue))); }));
+            };
+        /**
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.onKeyDown = /**
+         * @return {?}
+         */
+            function () {
+                this.locationChanged.emit();
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.onKeyUp = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                this.showAutocomplete = false;
+                this.keyUpSubject$.next(event.target.value);
+            };
+        /**
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.onFocus = /**
+         * @return {?}
+         */
+            function () {
+                this.showAutocomplete = false;
+            };
+        Object.defineProperty(SearchVenueComponent.prototype, "displayedLocationsDuplicationFiltered", {
+            get: /**
+             * @return {?}
+             */ function () {
+                var _this = this;
+                return this.displayedLocations.filter(( /**
+                 * @param {?} location
+                 * @return {?}
+                 */function (location) {
+                    return !_this.selectedLocations.map(( /**
+                     * @param {?} selectedLocation
+                     * @return {?}
+                     */function (selectedLocation) { return selectedLocation.epimms_id; })).includes(location.epimms_id) && location.court_name;
+                }));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @param {?} term
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.filter = /**
+         * @param {?} term
+         * @return {?}
+         */
+            function (term) {
+                var _this = this;
+                this.searchLocations(term).pipe(operators.mergeMap(( /**
+                 * @param {?} apiData
+                 * @return {?}
+                 */function (apiData) {
+                    /** @type {?} */
+                    var apiFilter = apiData.filter(( /**
+                     * @param {?} apiLocation
+                     * @return {?}
+                     */function (apiLocation) {
+                        return !_this.selectedLocations.map(( /**
+                         * @param {?} selectedLocation
+                         * @return {?}
+                         */function (selectedLocation) { return selectedLocation.epimms_id; })).includes(apiLocation.epimms_id);
+                    }));
+                    _this.displayedLocations = apiFilter;
+                    _this.searchInProgress = false;
+                    return apiFilter;
+                }))).subscribe(( /**
+                 * @param {?} location
+                 * @return {?}
+                 */function (location) {
+                    if (term === location.court_name) {
+                        _this.findLocationFormGroup.controls.locationSelectedFormControl.setValue(location);
+                        _this.displayedLocations = [];
+                        _this.locationChanged.emit(location);
+                        _this.showAutocomplete = false;
+                    }
+                    _this.searchInProgress = false;
+                }));
+            };
+        /**
+         * @param {?=} selection
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.onSelectionChange = /**
+         * @param {?=} selection
+         * @return {?}
+         */
+            function (selection) {
+                if (this.findLocationFormGroup.controls.findLocationFormControl instanceof forms.FormArray) {
+                    (( /** @type {?} */(this.findLocationFormGroup.controls.locationSelectedFormControl))).push(new forms.FormControl(selection.epimms_id));
+                }
+                else {
+                    this.findLocationFormGroup.controls.locationSelectedFormControl.setValue(selection);
+                }
+                this.locationChanged.emit(selection);
+            };
+        /**
+         * @param {?} currentValue
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.search = /**
+         * @param {?} currentValue
+         * @return {?}
+         */
+            function (currentValue) {
+                this.searchInProgress = true;
+                this.showAutocomplete = !!currentValue && (currentValue.length >= this.minSearchCharacters);
+                if (!currentValue || !currentValue.length) {
+                    this.findLocationFormGroup.controls.locationSelectedFormControl.markAsPristine();
+                    this.findLocationFormGroup.controls.locationSelectedFormControl.reset();
+                }
+                if (this.showAutocomplete) {
+                    this.filter(currentValue);
+                }
+                else {
+                    this.searchInProgress = false;
+                }
+            };
+        /**
+         * @param {?} selectedLocation
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.getDisplayName = /**
+         * @param {?} selectedLocation
+         * @return {?}
+         */
+            function (selectedLocation) {
+                return selectedLocation.court_name;
+            };
+        /**
+         * @param {?} term
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.searchLocations = /**
+         * @param {?} term
+         * @return {?}
+         */
+            function (term) {
+                return this.locationService.searchLocations(this.serviceIds, this.locationType, term);
+            };
+        /**
+         * @return {?}
+         */
+        SearchVenueComponent.prototype.getControlCourtNameValue = /**
+         * @return {?}
+         */
+            function () {
+                return this.findLocationFormGroup && this.findLocationFormGroup.controls && this.findLocationFormGroup.controls.locationSelectedFormControl.value ?
+                    (( /** @type {?} */(this.findLocationFormGroup.controls.locationSelectedFormControl.value))).court_name : '';
+            };
+        SearchVenueComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-search-venue',
+                        template: "<div class=\"auto-complete-container\">\n  <div *ngIf=\"readyAfterContent\" class=\"autocomplete__wrapper\">\n    <input\n      [formControl]=\"findLocationFormGroup.controls.findLocationFormControl\"\n      [matAutocomplete]=\"autoSearchLocation\"\n      (keydown)=\"onKeyDown()\"\n      (keyup)=\"onKeyUp($event)\"\n      (focus)=\"onFocus()\"\n      class=\"autocomplete__input autocomplete__input--default search-box\"\n      [attr.disabled]=\"!disabled ? null: disabled\"\n      [value]=\"getControlCourtNameValue()\"\n      #inputSelectedLocation>\n    <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n      <mat-option *ngFor=\"let location of displayedLocationsDuplicationFiltered\"\n                  [value]=\"getDisplayName(location)\"\n                  (onSelectionChange)=\"onSelectionChange(location)\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete}\">\n        {{ getDisplayName(location) }}\n      </mat-option>\n      <mat-option *ngIf=\"!displayedLocationsDuplicationFiltered?.length && showAutocomplete && !searchInProgress\">{{ 'No results found' }}</mat-option>\n    </mat-autocomplete>\n  </div>\n</div>\n",
+                        styles: [".autocomplete__input{-webkit-appearance:none;border:2px solid #0b0c0c;border-radius:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:0;width:100%;background-color:transparent;position:relative}.autocomplete__hint{color:#b1b4b6;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{outline:#fd0 solid 3px;outline-offset:0;box-shadow:inset 0 0 0 2px}.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}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        SearchVenueComponent.ctorParameters = function () {
+            return [
+                { type: LocationService },
+                { type: forms.FormBuilder }
+            ];
+        };
+        SearchVenueComponent.propDecorators = {
+            control: [{ type: i0.Input }],
+            disabled: [{ type: i0.Input }],
+            locationType: [{ type: i0.Input }],
+            selectedLocations: [{ type: i0.Input }],
+            serviceIds: [{ type: i0.Input }],
+            submitted: [{ type: i0.Input }],
+            autoCompleteInputBox: [{ type: i0.ViewChild, args: ['inputSelectedLocation', { read: i0.ElementRef },] }],
+            showAutocomplete: [{ type: i0.Input }],
+            displayedLocations: [{ type: i0.Input }],
+            locationChanged: [{ type: i0.Output }]
+        };
+        return SearchVenueComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/gov-ui/components/gov-uk-checkbox/gov-uk-checkbox.component.ts
@@ -6074,6 +6507,39 @@
         return HmctsMainWrapperComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/gov-ui/components/hmcts-pagination/hmcts-pagination.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var HmctsPaginationComponent = /** @class */ (function () {
+        function HmctsPaginationComponent() {
+            this.maxSize = 7;
+            this.pageSize = 10;
+            this.showPageNumbers = true;
+            this.showResultCount = true;
+            this.pageChange = new i0.EventEmitter();
+            this.pageBoundsCorrection = new i0.EventEmitter();
+        }
+        HmctsPaginationComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-hmcts-pagination',
+                        template: "<pagination-template #p=\"paginationApi\" [id]=\"id\" [maxSize]=\"maxSize\" (pageChange)=\"pageChange.emit($event)\"\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\">\n\n  <nav class=\"hmcts-pagination\" id=\"pagination-label\">\n    <p class=\"govuk-visually-hidden\" aria-labelledby=\"pagination-label\">Pagination navigation</p>\n    <ul class=\"hmcts-pagination__list\" *ngIf=\"!(p.pages.length <= 1)\">\n\n      <li class=\"hmcts-pagination__item  hmcts-pagination__item--prev\" [class.disabled]=\"p.isFirstPage()\">\n        <a [routerLink]=\"\" class=\"hmcts-pagination__link\" *ngIf=\"1 < p.getCurrent()\" (keyup.enter)=\"p.previous()\"\n          (click)=\"p.previous()\">Previous <span class=\"govuk-visually-hidden\">set of pages</span></a>\n      </li>\n\n      <ng-container *ngIf=\"showPageNumbers\">\n        <li class=\"hmcts-pagination__item\" [class.hmcts-pagination__item--active]=\"p.getCurrent() === page.value\"\n          [class.hmcts-pagination__item--dots]=\"page.label === '...'\" *ngFor=\"let page of p.pages\">\n          <a class=\"hmcts-pagination__link\" [routerLink]=\"\" (keyup.enter)=\"p.setCurrent(page.value)\"\n            (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n            <span class=\"govuk-visually-hidden\">page </span>\n            <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n          </a>\n          <ng-container *ngIf=\"p.getCurrent() === page.value\">\n            <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n          </ng-container>\n        </li>\n      </ng-container>\n\n      <li class=\"hmcts-pagination__item  hmcts-pagination__item--next\" [class.disabled]=\"p.isLastPage()\">\n        <a [routerLink]=\"\" class=\"hmcts-pagination__link\" *ngIf=\"!p.isLastPage()\" (keyup.enter)=\"p.next()\"\n          (click)=\"p.next()\">Next<span class=\"govuk-visually-hidden\"> page</span></a>\n      </li>\n\n    </ul>\n    <p class=\"hmcts-pagination__results\" *ngIf=\"showResultCount\">Showing <b>{{(p.getCurrent() * pageSize) - pageSize + 1}}</b>\n      to <b>{{ p.getCurrent() * pageSize > p.getTotalItems() ? p.getTotalItems() : p.getCurrent() *\n        pageSize}}</b> of <b>{{p.getTotalItems()}}</b> results</p>\n  </nav>\n\n</pagination-template>",
+                        styles: [".hmcts-pagination__results{float:right}"]
+                    }] }
+        ];
+        HmctsPaginationComponent.propDecorators = {
+            id: [{ type: i0.Input }],
+            maxSize: [{ type: i0.Input }],
+            pageSize: [{ type: i0.Input }],
+            showPageNumbers: [{ type: i0.Input }],
+            showResultCount: [{ type: i0.Input }],
+            pageChange: [{ type: i0.Output }],
+            pageBoundsCorrection: [{ type: i0.Output }]
+        };
+        return HmctsPaginationComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/gov-ui/components/hmcts-primary-navigation/hmcts-primary-navigation.component.ts
@@ -6212,14 +6678,16 @@
         GenericFilterComponent,
         CookieBannerComponent,
         FindPersonComponent,
-        PaginationComponent,
-        PaginationV1Component,
+        SearchJudicialsComponent,
         FindLocationComponent,
-        SearchLocationComponent
+        SearchLocationComponent,
+        SearchVenueComponent,
+        PaginationComponent
     ];
     /** @type {?} */
     var GOV_UI_COMPONENTS = [
         HmctsIdentityBarComponent,
+        HmctsPaginationComponent,
         HmctsSubNavigationComponent,
         HmctsPrimaryNavigationComponent,
         HmctsErrorSummaryComponent,
@@ -6254,8 +6722,8 @@
                             forms.ReactiveFormsModule,
                             i2$2.RouterModule.forChild([]),
                             autocomplete.MatAutocompleteModule,
-                            tabs.MatTabsModule,
-                            input.MatInputModule,
+                            material.MatTabsModule,
+                            material.MatInputModule,
                             ngxPagination.NgxPaginationModule
                         ],
                         providers: [
@@ -7294,7 +7762,6 @@
     exports.FindLocationComponent = FindLocationComponent;
     exports.SearchLocationComponent = SearchLocationComponent;
     exports.PaginationComponent = PaginationComponent;
-    exports.PaginationV1Component = PaginationV1Component;
     exports.FeatureToggleDirective = FeatureToggleDirective;
     exports.LetContext = LetContext;
     exports.LetDirective = LetDirective;
@@ -7336,16 +7803,17 @@
     exports.ɵbf = CookieBannerComponent;
     exports.ɵy = DueDateComponent;
     exports.ɵa = ExuiPageWrapperComponent;
-    exports.ɵbm = FindLocationComponent;
+    exports.ɵbl = FindLocationComponent;
     exports.ɵbh = FindPersonComponent;
     exports.ɵbd = GenericFilterComponent;
     exports.ɵk = HmctsSessionDialogComponent;
     exports.ɵo = InviteUserFormComponent;
     exports.ɵn = InviteUserPermissionComponent;
     exports.ɵbc = LoadingSpinnerComponent;
-    exports.ɵbl = PaginationV1Component;
-    exports.ɵbk = PaginationComponent;
-    exports.ɵbn = SearchLocationComponent;
+    exports.ɵbp = PaginationComponent;
+    exports.ɵbk = SearchJudicialsComponent;
+    exports.ɵbm = SearchLocationComponent;
+    exports.ɵbo = SearchVenueComponent;
     exports.ɵv = SelectedCaseConfirmComponent;
     exports.ɵt = SelectedCaseListComponent;
     exports.ɵu = SelectedCaseComponent;
@@ -7364,33 +7832,34 @@
     exports.ɵg = FeatureToggleDirective;
     exports.ɵi = LetContext;
     exports.ɵj = LetDirective;
-    exports.ɵbx = GovUkCheckboxComponent;
-    exports.ɵcd = GovUkCheckboxesComponent;
-    exports.ɵcc = GovUkDateComponent;
-    exports.ɵca = GovUkErrorMessageComponent;
-    exports.ɵcb = GovUkFieldsetComponent;
-    exports.ɵci = GovUkFileUploadComponent;
-    exports.ɵby = GovUkFormGroupWrapperComponent;
-    exports.ɵbw = GovUkInputComponent;
-    exports.ɵbz = GovUkLabelComponent;
-    exports.ɵce = GovUkRadioComponent;
-    exports.ɵcf = GovUkRadiosComponent;
-    exports.ɵcg = GovUkSelectComponent;
-    exports.ɵbv = GovukTableComponent;
-    exports.ɵch = GovUkTextareaComponent;
-    exports.ɵbu = HmctsBannerComponent;
-    exports.ɵbs = HmctsErrorSummaryComponent;
-    exports.ɵbp = HmctsIdentityBarComponent;
-    exports.ɵbt = HmctsMainWrapperComponent;
-    exports.ɵbr = HmctsPrimaryNavigationComponent;
-    exports.ɵbq = HmctsSubNavigationComponent;
-    exports.ɵcj = RemoveHostDirective;
+    exports.ɵbz = GovUkCheckboxComponent;
+    exports.ɵcf = GovUkCheckboxesComponent;
+    exports.ɵce = GovUkDateComponent;
+    exports.ɵcc = GovUkErrorMessageComponent;
+    exports.ɵcd = GovUkFieldsetComponent;
+    exports.ɵck = GovUkFileUploadComponent;
+    exports.ɵca = GovUkFormGroupWrapperComponent;
+    exports.ɵby = GovUkInputComponent;
+    exports.ɵcb = GovUkLabelComponent;
+    exports.ɵcg = GovUkRadioComponent;
+    exports.ɵch = GovUkRadiosComponent;
+    exports.ɵci = GovUkSelectComponent;
+    exports.ɵbx = GovukTableComponent;
+    exports.ɵcj = GovUkTextareaComponent;
+    exports.ɵbw = HmctsBannerComponent;
+    exports.ɵbu = HmctsErrorSummaryComponent;
+    exports.ɵbq = HmctsIdentityBarComponent;
+    exports.ɵbv = HmctsMainWrapperComponent;
+    exports.ɵbr = HmctsPaginationComponent;
+    exports.ɵbt = HmctsPrimaryNavigationComponent;
+    exports.ɵbs = HmctsSubNavigationComponent;
+    exports.ɵcl = RemoveHostDirective;
     exports.ɵr = CaseSharingStateService;
     exports.ɵbg = CookieService;
     exports.ɵh = FeatureToggleService;
     exports.ɵbe = FilterService;
     exports.ɵbi = FindAPersonService;
-    exports.ɵbo = LocationService;
+    exports.ɵbn = LocationService;
     exports.ɵbj = SessionStorageService;
 
     Object.defineProperty(exports, '__esModule', { value: true });