@hmcts/rpx-xui-common-lib 1.4.7-select-all-v1 → 1.4.8-paging

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/material'), require('@angular/material/autocomplete'), require('@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', '@angular/material/autocomplete', '@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,global.ng.material.autocomplete,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,material,autocomplete,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/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', '@angular/material/autocomplete', '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,global.ng.material.autocomplete,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,material,autocomplete,ngxPagination,forms,i1,LDClient,i4,i2,i1$1,i2$1,i2$2,i0,rxjs,operators) { 'use strict';
 
     /**
      * @fileoverview added by tsickle
@@ -1030,7 +1030,7 @@
          * @param {?} form
          * @return {?}
          */
-        GenericFilterComponent.prototype.updateSpecificPerson =
+        GenericFilterComponent.prototype.selectChanged =
             // when domain changes ensure that person field is reset
             /**
              * @param {?} field
@@ -1047,13 +1047,38 @@
                     if (currentField) {
                         currentField.domain = form.get(field.name).value;
                     }
-                    if (this.form.get(field.findPersonField)) {
-                        this.form.get(field.findPersonField).get('domain').setValue(null);
-                        this.form.get(field.findPersonField).get('email').setValue(null);
-                        this.form.get(field.findPersonField).get('id').setValue(null);
-                        this.form.get(field.findPersonField).get('name').setValue(null);
-                        this.form.get(field.findPersonField).get('knownAs').setValue(null);
-                    }
+                    this.removePersonField(field);
+                }
+            };
+        /**
+         * @param {?} field
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.radiosChanged = /**
+         * @param {?} field
+         * @return {?}
+         */
+            function (field) {
+                if (field.findPersonField) {
+                    this.form.get('findPersonControl').setValue(null);
+                    this.removePersonField(field);
+                }
+            };
+        /**
+         * @param {?} field
+         * @return {?}
+         */
+        GenericFilterComponent.prototype.removePersonField = /**
+         * @param {?} field
+         * @return {?}
+         */
+            function (field) {
+                if (this.form.get(field.findPersonField)) {
+                    this.form.get(field.findPersonField).get('domain').setValue(null);
+                    this.form.get(field.findPersonField).get('email').setValue(null);
+                    this.form.get(field.findPersonField).get('id').setValue(null);
+                    this.form.get(field.findPersonField).get('name').setValue(null);
+                    this.form.get(field.findPersonField).get('knownAs').setValue(null);
                 }
             };
         /**
@@ -1068,7 +1093,6 @@
                     this._settings.fields = JSON.parse(JSON.stringify(this.config.cancelSetting.fields));
                 }
                 this.filterService.persist(this.settings, this.config.persistence);
-                this.filterService.givenErrors.next(null);
             };
         /**
          * @param {?} values
@@ -1106,85 +1130,6 @@
                     }
                 }
             };
-        /**
-         * @param {?} event
-         * @param {?} form
-         * @param {?} item
-         * @param {?} field
-         * @return {?}
-         */
-        GenericFilterComponent.prototype.toggleSelectAll = /**
-         * @param {?} event
-         * @param {?} form
-         * @param {?} item
-         * @param {?} field
-         * @return {?}
-         */
-            function (event, form, item, field) {
-                /** @type {?} */
-                var isChecked = event.target.checked;
-                /** @type {?} */
-                var formArray = ( /** @type {?} */(form.get(field.name)));
-                if (!item.selectAll) {
-                    /** @type {?} */
-                    var allChecked = formArray.controls.every(( /**
-                     * @param {?} control
-                     * @return {?}
-                     */function (control) { return control.value; }));
-                    /** @type {?} */
-                    var index_1 = null;
-                    /** @type {?} */
-                    var hasSelectAllOption = field.options.find(( /**
-                     * @param {?} option
-                     * @param {?} i
-                     * @return {?}
-                     */function (option, i) {
-                        if (option.hasOwnProperty('selectAll')) {
-                            index_1 = i;
-                            return true;
-                        }
-                        return false;
-                    }));
-                    // tslint:disable-next-line:variable-name
-                    /** @type {?} */
-                    var isAllCheckedExcludingTheSelectAllOption = formArray.controls.filter(( /**
-                     * @param {?} _control
-                     * @param {?} i
-                     * @return {?}
-                     */function (_control, i) { return i !== index_1; }))
-                        .every(( /**
-                 * @param {?} control
-                 * @return {?}
-                 */function (control) { return control.value; }));
-                    if (!allChecked && hasSelectAllOption && !isChecked) {
-                        formArray.controls.forEach(( /**
-                         * @param {?} control
-                         * @param {?} i
-                         * @return {?}
-                         */function (control, i) {
-                            if (index_1 === i) {
-                                control.patchValue(false);
-                                return;
-                            }
-                        }));
-                    }
-                    else if (hasSelectAllOption && !allChecked && isChecked && isAllCheckedExcludingTheSelectAllOption) {
-                        formArray.controls[index_1].patchValue(true);
-                    }
-                    return;
-                }
-                formArray.controls.forEach(( /**
-                 * @param {?} control
-                 * @return {?}
-                 */function (control) {
-                    if (isChecked) {
-                        control.patchValue(true);
-                    }
-                    else {
-                        control.patchValue(false);
-                    }
-                }));
-            };
         /**
          * @private
          * @param {?} filter
@@ -1289,7 +1234,7 @@
                         }
                         // if field updates find person component set the initial domain
                         if (field.findPersonField) {
-                            this_1.updateSpecificPerson(field, this_1.form);
+                            this_1.selectChanged(field, this_1.form);
                         }
                     }
                 };
@@ -1464,10 +1409,10 @@
         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         [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)=\"updateSpecificPerson(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=\"'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              />\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]=\"field.domain\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n          ></xuilib-find-person>\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\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         [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      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"selectChanged(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\">\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                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label [for]=\"'checkbox_' + item.key\" class=\"govuk-label govuk-checkboxes__label\">{{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)=\"radiosChanged(field)\"\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]=\"field.domain\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n          ></xuilib-find-person>\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\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}"]
+                        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;flex-basis:calc(50% - 34px);width:29%}"]
                     }] }
         ];
         /** @nocollapse */
@@ -1601,14 +1546,14 @@
      */
     var LoadingSpinnerComponent = /** @class */ (function () {
         function LoadingSpinnerComponent() {
-            this.loadingText = 'Searching';
+            this.loadingText = 'Loading';
         }
         LoadingSpinnerComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-loading-spinner',
                         template: "<div class=\"spinner-container\">\n    <div class=\"spinner-inner-container\">\n        <p>{{loadingText}}</p>\n        <div class=\"spinner\" style=\"margin: auto;\"></div>\n    </div>\n</div>\n",
                         encapsulation: i0.ViewEncapsulation.None,
-                        styles: [".spinner-container{position:fixed;top:32%;left:50%;transform:translate(-50%,-50%);z-index:99}.spinner-container .spinner-inner-container{padding:72px;width:560px;background-color:#fff}.spinner-container .spinner-inner-container p{text-align:center}.spinner-container .spinner-inner-container .spinner{border:10px solid #ddd;border-top:10px solid #000;border-radius:50%;width:40px;height:40px;-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}"]
+                        styles: [".spinner-container{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,.5);z-index:99}.spinner-container .spinner-inner-container p{text-align:center}.spinner-container .spinner-inner-container .spinner{border:10px solid #ddd;border-top:10px solid #000;border-radius:50%;width:40px;height:40px;-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}"]
                     }] }
         ];
         LoadingSpinnerComponent.propDecorators = {
@@ -3262,6 +3207,11 @@
         function UserListComponent() {
             this.users = [];
             this.userClick = new i0.EventEmitter();
+            this.moreResultsToGo = false;
+            this.pagination = {
+                page_number: 1,
+                page_size: 25
+            };
         }
         /**
          * @param {?} user
@@ -3274,13 +3224,75 @@
             function (user) {
                 this.userClick.emit(user);
             };
+        /**
+         * @param {?} pageNumber
+         * @return {?}
+         */
+        UserListComponent.prototype.onPaginationHandler = /**
+         * @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;
+            };
         UserListComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-user-list',
-                        template: "<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\">\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>",
+                        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>",
                         styles: [":host{display:block}"]
                     }] }
         ];
+        /** @nocollapse */
+        UserListComponent.ctorParameters = function () { return []; };
         UserListComponent.propDecorators = {
             users: [{ type: i0.Input }],
             userClick: [{ type: i0.Output }]
@@ -3554,6 +3566,151 @@
         return CookieBannerComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/pagination/pagination.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var PaginationComponent = /** @class */ (function () {
+        function PaginationComponent() {
+            this.previousPage = new i0.EventEmitter();
+            this.nextPage = new i0.EventEmitter();
+        }
+        /**
+         * @return {?}
+         */
+        PaginationComponent.prototype.onPrevious = /**
+         * @return {?}
+         */
+            function () {
+                this.previousPage.emit(null);
+            };
+        /**
+         * @return {?}
+         */
+        PaginationComponent.prototype.onNext = /**
+         * @return {?}
+         */
+            function () {
+                this.nextPage.emit(null);
+            };
+        PaginationComponent.decorators = [
+            { type: i0.Component, args: [{
+                        selector: 'xuilib-pagination',
+                        template: "<nav class=\"hmcts-pagination\" id=\"pagination-label\">\n\n  <p class=\"govuk-visually-hidden\" aria-labelledby=\"pagination-label\">Pagination navigation</p>\n\n  <ul class=\"hmcts-pagination__list\">\n    <li class=\"hmcts-pagination__item  hmcts-pagination__item--prev\">\n      <a *ngIf=\"firstRecord > 1; else noPrevious\" class=\"hmcts-pagination__link\" (click)=\"onPrevious()\" href=\"javascript:void(0)\">\n        Previous page\n      </a>\n      <ng-template #noPrevious>\n        <span class=\"hmcts-pagination__link\">Previous page</span>\n      </ng-template>\n    </li>\n\n    <li class=\"hmcts-pagination__item  hmcts-pagination__item--next\">\n      <a *ngIf=\"moreItems; else noNext\" class=\"hmcts-pagination__link\" (click)=\"onNext()\" href=\"javascript:void(0)\">Next page</a>\n      <ng-template #noNext>\n        <span class=\"hmcts-pagination__link\">Next page</span>\n      </ng-template>\n    </li>\n  </ul>\n</nav>\n",
+                        styles: ["span.hmcts-pagination__link:hover{color:revert}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        PaginationComponent.ctorParameters = function () { return []; };
+        PaginationComponent.propDecorators = {
+            moreItems: [{ type: i0.Input }],
+            firstRecord: [{ type: i0.Input }],
+            previousPage: [{ type: i0.Output }],
+            nextPage: [{ type: i0.Output }]
+        };
+        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) {
+        return !!input && input !== '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
@@ -5104,7 +5261,9 @@
         LoadingSpinnerComponent,
         GenericFilterComponent,
         CookieBannerComponent,
-        FindPersonComponent
+        FindPersonComponent,
+        PaginationComponent,
+        PaginationV1Component
     ];
     /** @type {?} */
     var GOV_UI_COMPONENTS = [
@@ -5143,12 +5302,15 @@
                             forms.ReactiveFormsModule,
                             i2$2.RouterModule.forChild([]),
                             autocomplete.MatAutocompleteModule,
-                            material.MatTabsModule
+                            material.MatTabsModule,
+                            ngxPagination.NgxPaginationModule
                         ],
                         providers: [
                             { provide: windowToken, useFactory: ɵ0 }
                         ],
-                        exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS)
+                        exports: __spread(COMMON_COMPONENTS, GOV_UI_COMPONENTS, [
+                            ngxPagination.PaginatePipe
+                        ])
                     },] }
         ];
         return ExuiCommonLibModule;
@@ -6176,6 +6338,8 @@
     exports.UserDetailsComponent = UserDetailsComponent;
     exports.UserListComponent = UserListComponent;
     exports.CookieBannerComponent = CookieBannerComponent;
+    exports.PaginationComponent = PaginationComponent;
+    exports.PaginationV1Component = PaginationV1Component;
     exports.FeatureToggleDirective = FeatureToggleDirective;
     exports.LetContext = LetContext;
     exports.LetDirective = LetDirective;
@@ -6223,6 +6387,8 @@
     exports.ɵo = InviteUserFormComponent;
     exports.ɵn = InviteUserPermissionComponent;
     exports.ɵbc = LoadingSpinnerComponent;
+    exports.ɵbl = PaginationV1Component;
+    exports.ɵbk = PaginationComponent;
     exports.ɵv = SelectedCaseConfirmComponent;
     exports.ɵt = SelectedCaseListComponent;
     exports.ɵu = SelectedCaseComponent;
@@ -6241,27 +6407,27 @@
     exports.ɵg = FeatureToggleDirective;
     exports.ɵi = LetContext;
     exports.ɵj = LetDirective;
-    exports.ɵbs = GovUkCheckboxComponent;
-    exports.ɵby = GovUkCheckboxesComponent;
-    exports.ɵbx = GovUkDateComponent;
-    exports.ɵbv = GovUkErrorMessageComponent;
-    exports.ɵbw = GovUkFieldsetComponent;
-    exports.ɵcd = GovUkFileUploadComponent;
-    exports.ɵbt = GovUkFormGroupWrapperComponent;
-    exports.ɵbr = GovUkInputComponent;
-    exports.ɵbu = GovUkLabelComponent;
-    exports.ɵbz = GovUkRadioComponent;
-    exports.ɵca = GovUkRadiosComponent;
-    exports.ɵcb = GovUkSelectComponent;
-    exports.ɵbq = GovukTableComponent;
-    exports.ɵcc = GovUkTextareaComponent;
-    exports.ɵbp = HmctsBannerComponent;
-    exports.ɵbn = HmctsErrorSummaryComponent;
-    exports.ɵbk = HmctsIdentityBarComponent;
-    exports.ɵbo = HmctsMainWrapperComponent;
-    exports.ɵbm = HmctsPrimaryNavigationComponent;
-    exports.ɵbl = HmctsSubNavigationComponent;
-    exports.ɵce = RemoveHostDirective;
+    exports.ɵbu = GovUkCheckboxComponent;
+    exports.ɵca = GovUkCheckboxesComponent;
+    exports.ɵbz = GovUkDateComponent;
+    exports.ɵbx = GovUkErrorMessageComponent;
+    exports.ɵby = GovUkFieldsetComponent;
+    exports.ɵcf = GovUkFileUploadComponent;
+    exports.ɵbv = GovUkFormGroupWrapperComponent;
+    exports.ɵbt = GovUkInputComponent;
+    exports.ɵbw = GovUkLabelComponent;
+    exports.ɵcb = GovUkRadioComponent;
+    exports.ɵcc = GovUkRadiosComponent;
+    exports.ɵcd = GovUkSelectComponent;
+    exports.ɵbs = GovukTableComponent;
+    exports.ɵce = GovUkTextareaComponent;
+    exports.ɵbr = HmctsBannerComponent;
+    exports.ɵbp = HmctsErrorSummaryComponent;
+    exports.ɵbm = HmctsIdentityBarComponent;
+    exports.ɵbq = HmctsMainWrapperComponent;
+    exports.ɵbo = HmctsPrimaryNavigationComponent;
+    exports.ɵbn = HmctsSubNavigationComponent;
+    exports.ɵcg = RemoveHostDirective;
     exports.ɵr = CaseSharingStateService;
     exports.ɵbg = CookieService;
     exports.ɵh = FeatureToggleService;