@hmcts/rpx-xui-common-lib 1.8.0-angular-upgrade-9 → 1.8.0-angular-upgrade-9-rc.8

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/core'), require('@angular/common'), require('@angular/forms'), require('rxjs/operators'), require('@angular/common/http'), require('rxjs'), require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/tabs'), require('@angular/router'), require('launchdarkly-js-client-sdk'), require('@angular/platform-browser'), require('@ng-idle/core'), require('@ng-idle/keepalive')) :
-    typeof define === 'function' && define.amd ? define('@hmcts/rpx-xui-common-lib', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs/operators', '@angular/common/http', 'rxjs', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/tabs', '@angular/router', 'launchdarkly-js-client-sdk', '@angular/platform-browser', '@ng-idle/core', '@ng-idle/keepalive'], factory) :
-    (global = global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts['rpx-xui-common-lib'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs.operators, global.ng.common.http, global.rxjs, global.ng.material.autocomplete, global.ng.material.input, global.ng.material.tabs, global.ng.router, global.launchdarklyJsClientSdk, global.ng.platformBrowser, global.core$1, global.keepalive));
-}(this, (function (exports, core, common, forms, operators, http, rxjs, autocomplete, input, tabs, router, launchdarklyJsClientSdk, platformBrowser, core$1, keepalive) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs/operators'), require('@angular/common/http'), require('rxjs'), require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/tabs'), require('@angular/router'), require('ngx-pagination'), require('launchdarkly-js-client-sdk'), require('@angular/platform-browser'), require('@ng-idle/core'), require('@ng-idle/keepalive')) :
+    typeof define === 'function' && define.amd ? define('@hmcts/rpx-xui-common-lib', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs/operators', '@angular/common/http', 'rxjs', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/tabs', '@angular/router', 'ngx-pagination', 'launchdarkly-js-client-sdk', '@angular/platform-browser', '@ng-idle/core', '@ng-idle/keepalive'], factory) :
+    (global = global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts['rpx-xui-common-lib'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs.operators, global.ng.common.http, global.rxjs, global.ng.material.autocomplete, global.ng.material.input, global.ng.material.tabs, global.ng.router, global.ngxPagination, global.launchdarklyJsClientSdk, global.ng.platformBrowser, global.core$1, global.keepalive));
+}(this, (function (exports, core, common, forms, operators, http, rxjs, autocomplete, input, tabs, router, ngxPagination, launchdarklyJsClientSdk, platformBrowser, core$1, keepalive) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -850,6 +850,7 @@
             this.locations = [];
             this.locationSelected = new core.EventEmitter();
             this.locationInputChanged = new core.EventEmitter();
+            this.searchLocationChanged = new core.EventEmitter();
             this.minSearchCharacters = 3;
             this.term = '';
             this.pSelectedLocations = [];
@@ -908,6 +909,9 @@
                 _this.showAutocomplete = true;
             });
         };
+        SearchLocationComponent.prototype.onInput = function () {
+            this.searchLocationChanged.emit();
+        };
         SearchLocationComponent.prototype.getLocations = function (term) {
             return this.locationService.getAllLocations(this.serviceIds, this.locationType, term);
         };
@@ -974,6 +978,10 @@
             core.Output(),
             __metadata("design:type", core.EventEmitter)
         ], SearchLocationComponent.prototype, "locationInputChanged", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], SearchLocationComponent.prototype, "searchLocationChanged", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Boolean),
@@ -987,7 +995,7 @@
         SearchLocationComponent = __decorate([
             core.Component({
                 selector: 'exui-search-location',
-                template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\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}"]
             }),
             __metadata("design:paramtypes", [LocationService, forms.FormBuilder, core.ChangeDetectorRef])
@@ -997,10 +1005,12 @@
 
     var FindLocationComponent = /** @class */ (function () {
         function FindLocationComponent() {
+            this.locationFieldChanged = new core.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';
@@ -1016,7 +1026,7 @@
                     this.searchLocationComponent.resetSearchTerm();
                     this.removeSelectedValues();
                 }
-                this.pDisabled = value;
+                this.pDisabled = this.disableInputField === true ? true : null;
             },
             enumerable: true,
             configurable: true
@@ -1028,7 +1038,7 @@
             set: function (value) {
                 var _this = this;
                 this.pServices = value;
-                var field = this.field && this.field.findLocationField && this.fields.find(function (f) { return f.name === _this.field.findLocationField; });
+                var field = this.fields.find(function (f) { return f.name === _this.field.findLocationField; });
                 if (field) {
                     if (typeof value === 'string') {
                         this.serviceIds = value;
@@ -1066,6 +1076,9 @@
                 this.removeSelectedValues();
             }
         };
+        FindLocationComponent.prototype.onSearchInputChanged = function () {
+            this.locationFieldChanged.emit();
+        };
         FindLocationComponent.prototype.onLocationSelected = function (location) {
             if (this.field.maxSelected === 1) {
                 this.removeSelectedValues();
@@ -1103,6 +1116,10 @@
                 finally { if (e_1) throw e_1.error; }
             }
         };
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], FindLocationComponent.prototype, "locationFieldChanged", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Array)
@@ -1131,6 +1148,10 @@
             core.Input(),
             __metadata("design:type", Object)
         ], FindLocationComponent.prototype, "locationTitle", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FindLocationComponent.prototype, "disableInputField", void 0);
         __decorate([
             core.ViewChild(SearchLocationComponent, { static: true }),
             __metadata("design:type", SearchLocationComponent)
@@ -1148,7 +1169,7 @@
         FindLocationComponent = __decorate([
             core.Component({
                 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);
@@ -1367,6 +1388,7 @@
             this.findPersonService = findPersonService;
             this.cd = cd;
             this.personSelected = new core.EventEmitter();
+            this.personFieldChanged = new core.EventEmitter();
             this.boldTitle = 'Find the person';
             this.subTitle = 'Type the name of the person and select them.';
             this.domain = exports.PersonRole.ALL;
@@ -1440,9 +1462,12 @@
                 return '';
             }
             if (selectedPerson.domain === exports.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;
+        };
+        FindPersonComponent.prototype.onInput = function () {
+            this.personFieldChanged.emit();
         };
         FindPersonComponent.ctorParameters = function () { return [
             { type: FindAPersonService },
@@ -1452,6 +1477,10 @@
             core.Output(),
             __metadata("design:type", Object)
         ], FindPersonComponent.prototype, "personSelected", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], FindPersonComponent.prototype, "personFieldChanged", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", String)
@@ -1523,7 +1552,7 @@
         FindPersonComponent = __decorate([
             core.Component({
                 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}"]
             }),
             __metadata("design:paramtypes", [FindAPersonService, core.ChangeDetectorRef])
@@ -1711,7 +1740,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;
         };
         GenericFilterComponent.prototype.applyFilter = function (form) {
             this.submitted = true;
@@ -1749,6 +1784,13 @@
                 }
             }
         };
+        // when user enters input change radio button
+        GenericFilterComponent.prototype.inputChanged = 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);
+            }
+        };
         GenericFilterComponent.prototype.cancelFilter = function () {
             this.buildForm(this.config, this.settings, true);
             if (this.config && this.config.cancelSetting) {
@@ -1971,7 +2013,7 @@
             var defaultValues;
             if (settings && settings.fields) {
                 defaultValues = settings.fields.find(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;
@@ -2050,7 +2092,7 @@
         GenericFilterComponent = GenericFilterComponent_1 = __decorate([
             core.Component({
                 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: core.ChangeDetectionStrategy.OnPush,
                 encapsulation: core.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}"]
@@ -2353,7 +2395,7 @@
             __metadata("design:type", Boolean)
         ], SearchVenueComponent.prototype, "submitted", void 0);
         __decorate([
-            core.ViewChild('inputSelectedLocation', { read: core.ElementRef }),
+            core.ViewChild('inputSelectedLocation', { read: core.ElementRef, static: true }),
             __metadata("design:type", core.ElementRef)
         ], SearchVenueComponent.prototype, "autoCompleteInputBox", void 0);
         __decorate([
@@ -2529,7 +2571,7 @@
             __metadata("design:type", String)
         ], SearchJudicialsComponent.prototype, "serviceId", void 0);
         __decorate([
-            core.ViewChild('inputSelection', { read: core.ElementRef }),
+            core.ViewChild('inputSelection', { read: core.ElementRef, static: true }),
             __metadata("design:type", core.ElementRef)
         ], SearchJudicialsComponent.prototype, "autoCompleteInputBox", void 0);
         SearchJudicialsComponent = __decorate([
@@ -4389,6 +4431,53 @@
         return HmctsMainWrapperComponent;
     }());
 
+    var HmctsPaginationComponent = /** @class */ (function () {
+        function HmctsPaginationComponent() {
+            this.maxSize = 7;
+            this.pageSize = 10;
+            this.showPageNumbers = true;
+            this.showResultCount = true;
+            this.pageChange = new core.EventEmitter();
+            this.pageBoundsCorrection = new core.EventEmitter();
+        }
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], HmctsPaginationComponent.prototype, "id", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], HmctsPaginationComponent.prototype, "maxSize", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], HmctsPaginationComponent.prototype, "pageSize", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], HmctsPaginationComponent.prototype, "showPageNumbers", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], HmctsPaginationComponent.prototype, "showResultCount", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], HmctsPaginationComponent.prototype, "pageChange", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], HmctsPaginationComponent.prototype, "pageBoundsCorrection", void 0);
+        HmctsPaginationComponent = __decorate([
+            core.Component({
+                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);
+        return HmctsPaginationComponent;
+    }());
+
     var HmctsPrimaryNavigationComponent = /** @class */ (function () {
         function HmctsPrimaryNavigationComponent() {
         }
@@ -4517,6 +4606,7 @@
         HmctsIdentityBarComponent,
         HmctsSubNavigationComponent,
         HmctsPrimaryNavigationComponent,
+        HmctsPaginationComponent,
         HmctsErrorSummaryComponent,
         HmctsMainWrapperComponent,
         HmctsBannerComponent,
@@ -4550,7 +4640,8 @@
                     router.RouterModule.forChild([]),
                     autocomplete.MatAutocompleteModule,
                     tabs.MatTabsModule,
-                    input.MatInputModule
+                    input.MatInputModule,
+                    ngxPagination.NgxPaginationModule
                 ],
                 providers: [
                     { provide: windowToken, useFactory: ɵ0 }
@@ -5129,6 +5220,7 @@
     exports.HmctsErrorSummaryComponent = HmctsErrorSummaryComponent;
     exports.HmctsIdentityBarComponent = HmctsIdentityBarComponent;
     exports.HmctsMainWrapperComponent = HmctsMainWrapperComponent;
+    exports.HmctsPaginationComponent = HmctsPaginationComponent;
     exports.HmctsPrimaryNavigationComponent = HmctsPrimaryNavigationComponent;
     exports.HmctsSessionDialogComponent = HmctsSessionDialogComponent;
     exports.HmctsSubNavigationComponent = HmctsSubNavigationComponent;
@@ -5193,25 +5285,26 @@
     exports.ɵbq = HmctsIdentityBarComponent;
     exports.ɵbr = HmctsSubNavigationComponent;
     exports.ɵbs = HmctsPrimaryNavigationComponent;
-    exports.ɵbt = HmctsErrorSummaryComponent;
-    exports.ɵbu = HmctsMainWrapperComponent;
-    exports.ɵbv = HmctsBannerComponent;
-    exports.ɵbw = GovukTableComponent;
-    exports.ɵbx = GovUkInputComponent;
-    exports.ɵby = GovUkCheckboxComponent;
-    exports.ɵbz = GovUkFormGroupWrapperComponent;
+    exports.ɵbt = HmctsPaginationComponent;
+    exports.ɵbu = HmctsErrorSummaryComponent;
+    exports.ɵbv = HmctsMainWrapperComponent;
+    exports.ɵbw = HmctsBannerComponent;
+    exports.ɵbx = GovukTableComponent;
+    exports.ɵby = GovUkInputComponent;
+    exports.ɵbz = GovUkCheckboxComponent;
     exports.ɵc = TcDisplayHtmlComponent;
-    exports.ɵca = GovUkLabelComponent;
-    exports.ɵcb = GovUkErrorMessageComponent;
-    exports.ɵcc = GovUkFieldsetComponent;
-    exports.ɵcd = GovUkDateComponent;
-    exports.ɵce = GovUkCheckboxesComponent;
-    exports.ɵcf = GovUkRadioComponent;
-    exports.ɵcg = GovUkRadiosComponent;
-    exports.ɵch = GovUkSelectComponent;
-    exports.ɵci = GovUkTextareaComponent;
-    exports.ɵcj = GovUkFileUploadComponent;
-    exports.ɵck = RemoveHostDirective;
+    exports.ɵca = GovUkFormGroupWrapperComponent;
+    exports.ɵcb = GovUkLabelComponent;
+    exports.ɵcc = GovUkErrorMessageComponent;
+    exports.ɵcd = GovUkFieldsetComponent;
+    exports.ɵce = GovUkDateComponent;
+    exports.ɵcf = GovUkCheckboxesComponent;
+    exports.ɵcg = GovUkRadioComponent;
+    exports.ɵch = GovUkRadiosComponent;
+    exports.ɵci = GovUkSelectComponent;
+    exports.ɵcj = GovUkTextareaComponent;
+    exports.ɵck = GovUkFileUploadComponent;
+    exports.ɵcl = RemoveHostDirective;
     exports.ɵd = TcDisplayPlainComponent;
     exports.ɵe = TcConfirmComponent;
     exports.ɵf = ContactDetailsComponent;