@hmcts/rpx-xui-common-lib 1.9.0-consume-jrd-e-links-api-new-version-v3 → 1.9.0-postcode-validation

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'), require('@angular/router'), require('rxjs/operators'), require('launchdarkly-js-client-sdk'), require('@angular/platform-browser'), require('@ng-idle/core'), require('@ng-idle/keepalive'), require('@angular/common/http'), require('rxjs/internal/observable/of'), require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/tabs'), require('ngx-pagination'), require('rpx-xui-translation')) :
-    typeof define === 'function' && define.amd ? define('@hmcts/rpx-xui-common-lib', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', '@angular/router', 'rxjs/operators', 'launchdarkly-js-client-sdk', '@angular/platform-browser', '@ng-idle/core', '@ng-idle/keepalive', '@angular/common/http', 'rxjs/internal/observable/of', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/tabs', 'ngx-pagination', 'rpx-xui-translation'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts["rpx-xui-common-lib"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.ng.router, global.rxjs.operators, global.LDClient, global.ng.platformBrowser, global.i1$1, global.i2$1, global.ng.common.http, global.rxjs["internal/observable/of"], global.ng.material.autocomplete, global.ng.material.input, global.ng.material.tabs, global.ngxPagination, global.rpxXuiTranslation));
-})(this, (function (exports, i0, i4, forms, rxjs, i1, operators, LDClient, i2, i1$1, i2$1, i1$2, of, autocomplete, input, tabs, ngxPagination, rpxXuiTranslation) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('@angular/router'), require('rxjs/operators'), require('launchdarkly-js-client-sdk'), require('@angular/common/http'), require('@angular/platform-browser'), require('@ng-idle/core'), require('@ng-idle/keepalive'), require('rxjs/internal/observable/of'), require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/tabs'), require('ngx-pagination'), require('rpx-xui-translation')) :
+    typeof define === 'function' && define.amd ? define('@hmcts/rpx-xui-common-lib', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', '@angular/router', 'rxjs/operators', 'launchdarkly-js-client-sdk', '@angular/common/http', '@angular/platform-browser', '@ng-idle/core', '@ng-idle/keepalive', 'rxjs/internal/observable/of', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/tabs', 'ngx-pagination', 'rpx-xui-translation'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts["rpx-xui-common-lib"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.ng.router, global.rxjs.operators, global.LDClient, global.ng.common.http, global.ng.platformBrowser, global.i1$2, global.i2$1, global.rxjs["internal/observable/of"], global.ng.material.autocomplete, global.ng.material.input, global.ng.material.tabs, global.ngxPagination, global.rpxXuiTranslation));
+})(this, (function (exports, i0, i4, forms, rxjs, i1, operators, LDClient, i1$1, i2, i1$2, i2$1, of, autocomplete, input, tabs, ngxPagination, rpxXuiTranslation) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,10 +26,10 @@
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var LDClient__namespace = /*#__PURE__*/_interopNamespace(LDClient);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
 
     var AccessibilityComponent = /** @class */ (function () {
         function AccessibilityComponent() {
@@ -857,6 +857,234 @@
                 },] }
     ];
 
+    exports.AddressMessageEnum = void 0;
+    (function (AddressMessageEnum) {
+        AddressMessageEnum["NO_OPTION_SELECTED"] = "Please select an answer";
+        AddressMessageEnum["NO_STREET_SELECTED"] = "Enter building and street";
+        AddressMessageEnum["NO_CITY_SELECTED"] = "Enter town or city";
+        AddressMessageEnum["NO_COUNTRY_SELECTED"] = "Enter country";
+        AddressMessageEnum["NO_POSTCODE_SELECTED"] = "Enter postcode";
+        AddressMessageEnum["INVALID_POSTCODE"] = "Enter valid postcode";
+    })(exports.AddressMessageEnum || (exports.AddressMessageEnum = {}));
+
+    var AddressOption = /** @class */ (function () {
+        function AddressOption(addressModel, description) {
+            if (description === null) {
+                this.value = addressModel;
+                this.description = this.getDescription();
+            }
+            else {
+                this.description = description;
+            }
+        }
+        AddressOption.prototype.getDescription = function () {
+            return this.removeInitialCommaIfPresent("" + (this.value.addressLine1 === undefined ? '' : this.value.addressLine1) + this.prefixWithCommaIfPresent(this.value.addressLine2) + this.prefixWithCommaIfPresent(this.value.addressLine3) + ", " + this.value.postTown);
+        };
+        AddressOption.prototype.prefixWithCommaIfPresent = function (value) {
+            return value ? ", " + value : value;
+        };
+        AddressOption.prototype.removeInitialCommaIfPresent = function (value) {
+            return value.replace(new RegExp('^,', 'gi'), '');
+        };
+        return AddressOption;
+    }());
+
+    // tslint:disable:variable-name
+    var AddressModel = /** @class */ (function () {
+        function AddressModel() {
+        }
+        return AddressModel;
+    }());
+
+    exports.SharedCaseErrorMessages = void 0;
+    (function (SharedCaseErrorMessages) {
+        SharedCaseErrorMessages["OneCaseMustBeSelected"] = "At least one case must be selected";
+        SharedCaseErrorMessages["NoChangesRequested"] = "You have not requested any changes to case sharing";
+        SharedCaseErrorMessages["OnePersonMustBeAssigned"] = "At least one person must be assigned to each case";
+    })(exports.SharedCaseErrorMessages || (exports.SharedCaseErrorMessages = {}));
+
+    exports.BadgeColour = void 0;
+    (function (BadgeColour) {
+        BadgeColour["BADGE_RED"] = "hmcts-badge--red";
+        BadgeColour["BADGE_BLUE"] = "hmcts-badge--blue";
+        BadgeColour["BADGE_GREEN"] = "hmcts-badge--green";
+    })(exports.BadgeColour || (exports.BadgeColour = {}));
+
+    var AnonymousFeatureUser = /** @class */ (function () {
+        function AnonymousFeatureUser() {
+        }
+        return AnonymousFeatureUser;
+    }());
+    var LoggedInFeatureUser = /** @class */ (function () {
+        function LoggedInFeatureUser() {
+        }
+        return LoggedInFeatureUser;
+    }());
+
+    var RadioFilterFieldConfig = /** @class */ (function () {
+        function RadioFilterFieldConfig() {
+        }
+        return RadioFilterFieldConfig;
+    }());
+
+    exports.BookingCheckType = void 0;
+    (function (BookingCheckType) {
+        BookingCheckType["NO_CHECK"] = "NO_CHECK";
+        BookingCheckType["BOOKINGS_AND_BASE"] = "BOOKINGS_AND_BASE";
+        BookingCheckType["POSSIBLE_BOOKINGS"] = "POSSIBLE_BOOKINGS";
+    })(exports.BookingCheckType || (exports.BookingCheckType = {}));
+
+    exports.PersonRole = void 0;
+    (function (PersonRole) {
+        PersonRole["JUDICIAL"] = "Judicial";
+        PersonRole["CASEWORKER"] = "Legal Ops";
+        PersonRole["ADMIN"] = "Admin";
+        PersonRole["CTSC"] = "CTSC";
+        PersonRole["ALL"] = "All";
+    })(exports.PersonRole || (exports.PersonRole = {}));
+    // Note: RoleCategory could replace PersonRole possibly
+    // However a lot of webapp logic is based on current PersonRole understanding
+    exports.RoleCategory = void 0;
+    (function (RoleCategory) {
+        RoleCategory["JUDICIAL"] = "JUDICIAL";
+        RoleCategory["CASEWORKER"] = "LEGAL_OPERATIONS";
+        RoleCategory["ADMIN"] = "ADMIN";
+        RoleCategory["CTSC"] = "CTSC";
+        RoleCategory["ALL"] = "ALL";
+    })(exports.RoleCategory || (exports.RoleCategory = {}));
+
+    var AddressType;
+    (function (AddressType) {
+        AddressType["DPA"] = "DPA";
+        AddressType["UK"] = "United Kingdom";
+        AddressType["RD06"] = "RD06";
+    })(AddressType || (AddressType = {}));
+
+    /**
+     * Moving all this logic here into Address Parser class, so that it
+     * will be easier for us when we move this parsing logic to into
+     * `Shim` java service.
+     */
+    var AddressParser = /** @class */ (function () {
+        function AddressParser() {
+        }
+        AddressParser.prototype.parse = function (address) {
+            var classification = "" + address.CLASSIFICATION_CODE;
+            var addressModel = new AddressModel();
+            addressModel.addressLine1 = this.parseAddressLine1(classification, address);
+            addressModel.addressLine2 = this.parseAddressLine2(classification, address);
+            addressModel.addressLine3 = this.parseAddressLine3(classification, address);
+            addressModel.postCode = address.POSTCODE;
+            addressModel.postTown = address.POST_TOWN;
+            addressModel.country = AddressType.UK;
+            return addressModel;
+        };
+        AddressParser.prototype.parseAddressLine1 = function (classification, address) {
+            var addressLine;
+            if (classification === AddressType.RD06) {
+                addressLine =
+                    address.SUB_BUILDING_NAME + " " + address.ORGANISATION_NAME + " " + address.DEPARTMENT_NAME + " " + address.PO_BOX_NUMBER;
+            }
+            else {
+                addressLine =
+                    "" + address.ORGANISATION_NAME + this.prefixWithCommaIfPresent(address.BUILDING_NAME) +
+                        (address.DEPARTMENT_NAME + " " + address.PO_BOX_NUMBER);
+            }
+            return this.removeNonAddressValues(addressLine);
+        };
+        AddressParser.prototype.parseAddressLine2 = function (classification, address) {
+            var addressLine;
+            if (classification === AddressType.RD06) {
+                addressLine = address.BUILDING_NAME + " ";
+            }
+            else {
+                addressLine =
+                    address.SUB_BUILDING_NAME + " " + address.BUILDING_NUMBER + " " + address.THOROUGHFARE_NAME;
+            }
+            return this.removeNonAddressValues(addressLine);
+        };
+        AddressParser.prototype.parseAddressLine3 = function (classification, address) {
+            var addressLine;
+            if (classification === AddressType.RD06) {
+                addressLine =
+                    address.BUILDING_NUMBER + " " + address.THOROUGHFARE_NAME;
+            }
+            else {
+                addressLine =
+                    address.DEPENDENT_LOCALITY + " " + address.DOUBLE_DEPENDENT_LOCALITY + " " + address.DEPENDENT_THOROUGHFARE_NAME;
+            }
+            return this.removeNonAddressValues(addressLine);
+        };
+        AddressParser.prototype.removeNonAddressValues = function (line) {
+            line = line.replace(' null', ' ').replace('null ', ' ');
+            line = this.removeUndefinedString(line);
+            line = this.removeInitialComma(line);
+            line = this.removeEmptySpaces(line);
+            return line;
+        };
+        AddressParser.prototype.removeUndefinedString = function (value) {
+            return value.replace(new RegExp('undefined', 'gi'), '');
+        };
+        AddressParser.prototype.removeEmptySpaces = function (value) {
+            return value.replace(new RegExp(' +', 'gi'), ' ').trim();
+        };
+        AddressParser.prototype.removeInitialComma = function (value) {
+            return value.replace(new RegExp('^,', 'gi'), '');
+        };
+        AddressParser.prototype.prefixWithCommaIfPresent = function (value) {
+            return value ? ", " + value : value;
+        };
+        return AddressParser;
+    }());
+
+    var AddressService = /** @class */ (function () {
+        function AddressService(http) {
+            this.http = http;
+        }
+        AddressService.prototype.getAddressesForPostcode = function (postcode) {
+            var _this = this;
+            return this.http
+                .get('/external/addresses?postcode=${postcode}'.replace('${postcode}', postcode), undefined)
+                .pipe(operators.map(function (res) { return res.results; }))
+                .pipe(operators.map(function (output) { return output.map(function (addresses) { return _this.format(new AddressParser().parse(addresses[AddressType.DPA])); }); }));
+        };
+        AddressService.prototype.format = function (addressModel) {
+            return this.formatAddressLines(this.shiftAddressLinesUp(addressModel));
+        };
+        AddressService.prototype.formatAddressLines = function (addressModel) {
+            var _this = this;
+            ['addressLine1', 'addressLine2', 'addressLine3', 'postTown'].forEach(function (value) {
+                addressModel[value] = _this.toCapitalCase(addressModel[value]);
+            });
+            return addressModel;
+        };
+        AddressService.prototype.shiftAddressLinesUp = function (addressModel) {
+            if (addressModel.addressLine2 === '') {
+                addressModel.addressLine2 = addressModel.addressLine3;
+                addressModel.addressLine3 = '';
+            }
+            if (addressModel.addressLine1 === '') {
+                addressModel.addressLine1 = addressModel.addressLine2;
+                addressModel.addressLine2 = '';
+            }
+            return addressModel;
+        };
+        AddressService.prototype.toCapitalCase = function (sentence) {
+            sentence = sentence.toLowerCase();
+            sentence.split(' ').forEach(function (value) {
+                sentence = sentence.replace(value, value.charAt(0).toUpperCase() + value.substr(1));
+            });
+            return sentence;
+        };
+        return AddressService;
+    }());
+    AddressService.decorators = [
+        { type: i0.Injectable }
+    ];
+    AddressService.ctorParameters = function () { return [
+        { type: i1$1.HttpClient }
+    ]; };
+
     var windowToken = new i0.InjectionToken('Window');
     function windowProvider() { return window; }
 
@@ -988,7 +1216,7 @@
             var _this = this;
             this.idle.setIdleName(idleConfig.idleServiceName);
             this.idle.setTimeout(idleConfig.timeout);
-            var interrupt = new i1$1.DocumentInterruptSource('mousedown keydown DOMMouseScroll mousewheel touchstart touchmove scroll');
+            var interrupt = new i1$2.DocumentInterruptSource('mousedown keydown DOMMouseScroll mousewheel touchstart touchmove scroll');
             this.idle.setInterrupts([interrupt]);
             // adding delay so that user can click on sign out before the modal shuts
             this.idle.onIdleEnd.pipe(operators.delay(250)).subscribe(function () {
@@ -1020,7 +1248,7 @@
                 },] }
     ];
     ManageSessionServices.ctorParameters = function () { return [
-        { type: i1$1.Idle },
+        { type: i1$2.Idle },
         { type: i2$1.Keepalive }
     ]; };
 
@@ -1077,8 +1305,8 @@
             var idleModalDisplayTimeInSeconds = this.millisecondsToSeconds(idleModalDisplayTime);
             var totalIdleTimeInSeconds = this.millisecondsToSeconds(totalIdleTime);
             this.idle.setTimeout(idleModalDisplayTimeInSeconds);
-            var docInterrupts = new i1$1.DocumentInterruptSource(DOCUMENT_INTERRUPTS);
-            var windowInterrupts = new i1$1.WindowInterruptSource(DOCUMENT_INTERRUPTS);
+            var docInterrupts = new i1$2.DocumentInterruptSource(DOCUMENT_INTERRUPTS);
+            var windowInterrupts = new i1$2.WindowInterruptSource(DOCUMENT_INTERRUPTS);
             this.idle.setInterrupts([docInterrupts, windowInterrupts]);
             this.subs.push(this.idle.onTimeout.subscribe(function () {
                 _this.eventEmitter.next({ eventType: SIGNOUT_EVENT });
@@ -1119,7 +1347,7 @@
                 },] }
     ];
     TimeoutNotificationsService.ctorParameters = function () { return [
-        { type: i1$1.Idle },
+        { type: i1$2.Idle },
         { type: i2$1.Keepalive }
     ]; };
 
@@ -1373,7 +1601,7 @@
             return this.http.get(RefDataDataAccessService.refDataUrl + "/regions");
         };
         RefDataDataAccessService.prototype.getLocationsByServiceCode = function (serviceCode) {
-            var httpParams = new i1$2.HttpParams()
+            var httpParams = new i1$1.HttpParams()
                 .append('service_code', serviceCode);
             return this.http.get(RefDataDataAccessService.refDataUrl + "/locations-by-service-code", { params: httpParams });
         };
@@ -1390,7 +1618,7 @@
                 },] }
     ];
     RefDataDataAccessService.ctorParameters = function () { return [
-        { type: i1$2.HttpClient }
+        { type: i1$1.HttpClient }
     ]; };
 
     var RefDataService = /** @class */ (function () {
@@ -2176,7 +2404,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    <ng-container [ngSwitch]=\"field.type\">\n      <ng-container *ngSwitchCase=\"'group-title'\">\n        <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n          {{ field.name | capitalize }}\n        </div>\n    </ng-container>\n      <ng-container *ngSwitchDefault>\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.required || form.get(field.name).errors?.minlength || form.get(field.name).errors?.maxLength)}\">\n        <div *ngIf=\"field.title\" class=\"xui-generic-filter__field-title\">\n          <h3 [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n            {{field.title | capitalize}}\n          </h3>\n          <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n            {{ field.titleHint }}\n          </div>\n        </div>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <div *ngIf=\"field.hintText\"\n        [id]=\"field.hintText + '-hint'\" class=\"govuk-hint\">\n        {{ field.hintText | rpxTranslate }}\n      </div>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && (form.get(field.name).errors?.required || form.get(field.name).errors?.minlength)\">\n        <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate}}</span> {{field.minSelectedError | rpxTranslate }}\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:' | rpxTranslate}}</span> {{field.maxSelectedError | rpxTranslate }}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n        *ngIf=\"field.emailError && submitted && form.get(field.name).errors?.email\">\n        <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }}</span> {{field.emailError | rpxTranslate }}\n      </span>\n        <div class=\"govuk-body\"  [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option *ngIf=\"field.defaultOption\" [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'group-select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option *ngIf=\"field.defaultOption\" selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <optgroup *ngFor = 'let grp of filteredSkillsByServices' label=\"{{grp.group | titlecase}}\">\n              <option *ngFor = 'let item of grp.options' [value]=\"item.key\">{{item.label}}</option>\n            </optgroup>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'nested-checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of filteredSkillsByServicesCheckbox; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'nested-checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of filteredSkillsByServicesCheckbox; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label | rpxTranslate}}</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_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label | rpxTranslate}}</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 | rpxTranslate}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n                              [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n                              [services]=\"form.get(field.servicesField)?.value\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [submitted]=\"submitted\"\n                                [field]=\"field\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [formSubmissionEvent$]=\"formSubmissionEvent$\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-task-name'\">\n          <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n                              (taskNameFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findTaskNameGroup]=\"form\"\n                              [selectedTaskName]=\"form.get(field.name)?.value?.task_type_name\"\n                              [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n                              [services]=\"form.get(field.servicesField)?.value\"\n          ></xuilib-find-task-name>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputServiceChanged(field)\"\n                               [field]=\"field\"\n                               [form]=\"form\"\n                               [formSubmissionEvent$]=\"formSubmissionEvent$\"\n                               [disabled]=\"disabled(field, form)\">\n          </xuilib-find-service>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text-input'\">\n          <input class=\"govuk-input\" type=\"text\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [attr.maxlength]=\"field.maxlength ? field.maxlength : null\"\n                 [readonly]=\"field.readonly\"\n          />\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email-input'\">\n          <input class=\"govuk-input\" type=\"email\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [readonly]=\"field.readonly\"\n          />\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{(config.applyButtonText || 'Apply') | rpxTranslate}}</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') | rpxTranslate}}</button>\n    </div>\n  </div>\n</form>\n",
+                    template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <ng-container [ngSwitch]=\"field.type\">\n      <ng-container *ngSwitchCase=\"'group-title'\">\n        <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n          {{ field.name | capitalize }}\n        </div>\n    </ng-container>\n      <ng-container *ngSwitchDefault>\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.required || form.get(field.name).errors?.minlength || form.get(field.name).errors?.maxLength)}\">\n        <div *ngIf=\"field.title\" class=\"xui-generic-filter__field-title\">\n          <h3 [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n            {{field.title | capitalize}}\n          </h3>\n          <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n            {{ field.titleHint }}\n          </div>\n        </div>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <div *ngIf=\"field.hintText\"\n        [id]=\"field.hintText + '-hint'\" class=\"govuk-hint\">\n        {{ field.hintText | rpxTranslate }}\n      </div>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && (form.get(field.name).errors?.required || form.get(field.name).errors?.minlength)\">\n        <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate}}</span> {{field.minSelectedError | rpxTranslate }}\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:' | rpxTranslate}}</span> {{field.maxSelectedError | rpxTranslate }}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n        *ngIf=\"field.emailError && submitted && form.get(field.name).errors?.email\">\n        <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }}</span> {{field.emailError | rpxTranslate }}\n      </span>\n        <div class=\"govuk-body\"  [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option *ngIf=\"field.defaultOption\" [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'group-select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option *ngIf=\"field.defaultOption\" selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <optgroup *ngFor = 'let grp of filteredSkillsByServices' label=\"{{grp.group | titlecase}}\">\n              <option *ngFor = 'let item of grp.options' [value]=\"item.key\">{{item.label}}</option>\n            </optgroup>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'nested-checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of filteredSkillsByServicesCheckbox; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label | rpxTranslate}}</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_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label | rpxTranslate}}</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 | rpxTranslate}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n                              [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n                              [services]=\"form.get(field.servicesField)?.value\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [submitted]=\"submitted\"\n                                [field]=\"field\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [formSubmissionEvent$]=\"formSubmissionEvent$\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-task-name'\">\n          <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n                              (taskNameFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findTaskNameGroup]=\"form\"\n                              [selectedTaskName]=\"form.get(field.name)?.value?.task_type_name\"\n                              [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n                              [services]=\"form.get(field.servicesField)?.value\"\n          ></xuilib-find-task-name>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputServiceChanged(field)\"\n                               [field]=\"field\"\n                               [form]=\"form\"\n                               [formSubmissionEvent$]=\"formSubmissionEvent$\"\n                               [disabled]=\"disabled(field, form)\">\n          </xuilib-find-service>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text-input'\">\n          <input class=\"govuk-input\" type=\"text\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [attr.maxlength]=\"field.maxlength ? field.maxlength : null\"\n                 [readonly]=\"field.readonly\"\n          />\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email-input'\">\n          <input class=\"govuk-input\" type=\"email\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [readonly]=\"field.readonly\"\n          />\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{(config.applyButtonText || 'Apply') | rpxTranslate}}</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') | rpxTranslate}}</button>\n    </div>\n  </div>\n</form>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: [".contain-classes .elevated-break{margin-bottom:20px}@media (min-width:40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .govuk-body--maxWidth480px{max-width:480px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-direction:column;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}.contain-classes .xui-generic-filter__field-title{display:flex;align-items:center;margin-bottom:10px}.contain-classes .govuk-select{width:100%}"]
@@ -2512,7 +2740,7 @@
     SelectedCaseConfirmComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'xuilib-selected-case-confirm',
-                    template: "<div id=\"user-access-block-{{ sharedCase.caseId }}\" *ngIf=\"showUserAccessBlock()\">\n  <h2 class=\"govuk-heading-m case-share-confirm__title\">{{ sharedCase.caseTitle }}</h2>\n  <div class=\"case-share-confirm__caption-area\">\n    <div class=\"govuk-caption-m case-share-confirm__caption\">\n      {{ sharedCase.caseId }}\n    </div>\n    <a [routerLink]=\"changeLink\" class=\"case-share-confirm__change-link govuk-link govuk-!-font-size-19\">\n      {{'Change' | rpxTranslate}}\n      <span class=\"govuk-visually-hidden\">{{'selected case' | rpxTranslate}}</span>\n    </a>\n  </div>\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">{{'Name' | rpxTranslate}}</th>\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">{{'Email address' | rpxTranslate}}</th>\n      <th class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">{{'Actions' | rpxTranslate}}</th>\n    </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingShares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge\">{{'To be added' | rpxTranslate}}</span>\n      </td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingUnshares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge hmcts-badge--red\">\n          {{'To be removed' | rpxTranslate}}\n        </span>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</div>\n",
+                    template: "<div id=\"user-access-block-{{ sharedCase.caseId }}\" *ngIf=\"showUserAccessBlock()\">\n  <h2 class=\"govuk-heading-m case-share-confirm__title\">{{ sharedCase.caseTitle }}</h2>\n  <div class=\"case-share-confirm__caption-area\">\n    <div class=\"govuk-caption-m case-share-confirm__caption\">\n      {{ sharedCase.caseId }}\n    </div>\n    <a [routerLink]=\"changeLink\" class=\"case-share-confirm__change-link govuk-link govuk-!-font-size-19\">{{'Change' | rpxTranslate}}</a>\n  </div>\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">{{'Name' | rpxTranslate}}</th>\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">{{'Email address' | rpxTranslate}}</th>\n      <th class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">{{'Actions' | rpxTranslate}}</th>\n    </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingShares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge\">{{'To be added' | rpxTranslate}}</span>\n      </td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingUnshares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge hmcts-badge--red\">\n          {{'To be removed' | rpxTranslate}}\n        </span>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</div>\n",
                     styles: [".case-share-confirm__title{margin-bottom:0}.case-share-confirm__caption-area{border-bottom:1px solid #b1b4b6;padding-bottom:10px;display:inline-block;width:100%;clear:both}.case-share-confirm__caption{float:left}.case-share-confirm__change-link{float:right}.govuk-table-column-header{width:45%}.govuk-table-column-actions{width:10%}"]
                 },] }
     ];
@@ -2875,13 +3103,6 @@
         completeLink: [{ type: i0.Input }]
     };
 
-    exports.SharedCaseErrorMessages = void 0;
-    (function (SharedCaseErrorMessages) {
-        SharedCaseErrorMessages["OneCaseMustBeSelected"] = "At least one case must be selected";
-        SharedCaseErrorMessages["NoChangesRequested"] = "You have not requested any changes to case sharing";
-        SharedCaseErrorMessages["OnePersonMustBeAssigned"] = "At least one person must be assigned to each case";
-    })(exports.SharedCaseErrorMessages || (exports.SharedCaseErrorMessages = {}));
-
     var UserSelectComponent = /** @class */ (function () {
         function UserSelectComponent() {
             this.selected = new i0.EventEmitter();
@@ -3139,7 +3360,7 @@
     ShareCaseComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'xuilib-share-case',
-                    template: "<xuilib-hmcts-error-summary\n  [errorMessages]=\"validationErrors\"\n  [header]=\"'There is a problem'\"\n></xuilib-hmcts-error-summary>\n<h1 *ngIf=\"title\" class=\"govuk-heading-xl govuk-!-margin-top-2\">\n  <span *ngIf=\"fnTitle\" class=\"govuk-caption-xl\">{{fnTitle | rpxTranslate}}</span>\n  {{title | rpxTranslate}}\n</h1>\n<div id=\"add-user\">\n  <div class=\"govuk-form-group\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">{{addUserLabel | rpxTranslate}}</label>\n    <span id=\"add-user-hint\" class=\"govuk-hint\">\n      {{'Search by name or email address. You can share access with as many people as you need.' | rpxTranslate}}\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <xuilib-user-select\n          id=\"add-user-input\"\n          aria-describedby=\"add-user-hint\"\n          [users]=\"users\"\n          (selected)=\"onSelectedUser($event)\">\n        </xuilib-user-select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-add-user\" (click)=\"addUser()\"\n          class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\"\n          title=\"{{'Add user to selected cases' | rpxTranslate}}\">\n          {{'Add' | rpxTranslate}}\n          <span class=\"govuk-visually-hidden\">{{'user' | rpxTranslate}}</span>\n        </button>\n      </div>\n    </div>\n    <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n      <summary class=\"govuk-details__summary\">\n      <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n        {{\"Can't find an email address?\" | rpxTranslate}}\n      </span>\n      </summary>\n      <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n        {{\"If you can't find your colleague's email address, they will need to complete their registration. Contact your administrator for help.\" | rpxTranslate}}\n      </div>\n    </details>\n  </div>\n  <div class=\"govuk-form-group\" *ngIf=\"showRemoveUsers\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"remove-user-input\">\n      {{'Remove a person from all cases' | rpxTranslate}}\n    </label>\n    <span id=\"remove-user-hint\" class=\"govuk-hint\">\n      {{'Select a person to remove them from all selected cases.' | rpxTranslate}}\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <select [(ngModel)]=\"selectedUserToRemove\" class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option [ngValue]=\"null\" selected>Select a person</option>\n          <option *ngFor=\"let user of assignedUsers\" [ngValue]=\"user\">{{user.firstName}} {{user.lastName}} - {{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" (click)=\"removeUser()\" class=\"govuk-button govuk-button--secondary\" title=\"{{'Remove user from selected cases' | rpxTranslate}}\">\n          {{'Remove' | rpxTranslate}}\n          <span class=\"govuk-visually-hidden\"> {{'user' | rpxTranslate}}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"cases\" [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">\n    {{'Selected cases' | rpxTranslate}}\n  </h3>\n  <xuilib-gov-uk-error-message [config]=\"selectedCasesErrorMessageConfig\" [errorMessage]=\"shareCaseErrorMessage\"></xuilib-gov-uk-error-message>\n  <div *ngIf=\"shareCases && shareCases.length > 0\" class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\"\n    [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n    {{'No cases to display.' | rpxTranslate}}\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n  <button id=\"btn-continue\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"onContinue()\" title=\"{{'Continue' | rpxTranslate}}\">\n    {{'Continue' | rpxTranslate}}\n  </button>\n  <button id=\"btn-cancel\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"{{'Cancel' | rpxTranslate}}\" [routerLink]=\"cancelLink\">\n    {{'Cancel' | rpxTranslate}}\n  </button>\n</div>\n",
+                    template: "<xuilib-hmcts-error-summary\n  [errorMessages]=\"validationErrors\"\n  [header]=\"'There is a problem'\"\n></xuilib-hmcts-error-summary>\n<h1 *ngIf=\"title\" class=\"govuk-heading-xl govuk-!-margin-top-2\">\n  <span *ngIf=\"fnTitle\" class=\"govuk-caption-xl\">{{fnTitle | rpxTranslate}}</span>\n  {{title | rpxTranslate}}\n</h1>\n<div id=\"add-user\">\n  <div class=\"govuk-form-group\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">{{addUserLabel | rpxTranslate}}</label>\n    <span id=\"add-user-hint\" class=\"govuk-hint\">\n      {{'Search by name or email address. You can share access with as many people as you need.' | rpxTranslate}}\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <xuilib-user-select\n          id=\"add-user-input\"\n          aria-describedby=\"add-user-hint\"\n          [users]=\"users\"\n          (selected)=\"onSelectedUser($event)\">\n        </xuilib-user-select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-add-user\" (click)=\"addUser()\"\n          class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\"\n          title=\"{{'Add user to selected cases' | rpxTranslate}}\">\n          {{'Add' | rpxTranslate}}\n        </button>\n      </div>\n    </div>\n    <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n      <summary class=\"govuk-details__summary\">\n      <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n        {{\"Can't find an email address?\" | rpxTranslate}}\n      </span>\n      </summary>\n      <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n        {{\"If you can't find your colleague's email address, they will need to complete their registration. Contact your administrator for help.\" | rpxTranslate}}\n      </div>\n    </details>\n  </div>\n  <div class=\"govuk-form-group\" *ngIf=\"showRemoveUsers\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"remove-user-input\">\n      {{'Remove a person from all cases' | rpxTranslate}}\n    </label>\n    <span id=\"remove-user-hint\" class=\"govuk-hint\">\n      {{'Select a person to remove them from all selected cases.' | rpxTranslate}}\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <select [(ngModel)]=\"selectedUserToRemove\" class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option [ngValue]=\"null\" selected>Select a person</option>\n          <option *ngFor=\"let user of assignedUsers\" [ngValue]=\"user\">{{user.firstName}} {{user.lastName}} - {{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" (click)=\"removeUser()\" class=\"govuk-button govuk-button--secondary\" title=\"{{'Remove user from selected cases' | rpxTranslate}}\">\n          {{'Remove' | rpxTranslate}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"cases\" [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">\n    {{'Selected cases' | rpxTranslate}}\n  </h3>\n  <xuilib-gov-uk-error-message [config]=\"selectedCasesErrorMessageConfig\" [errorMessage]=\"shareCaseErrorMessage\"></xuilib-gov-uk-error-message>\n  <div *ngIf=\"shareCases && shareCases.length > 0\" class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\"\n    [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n    {{'No cases to display.' | rpxTranslate}}\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n  <button id=\"btn-continue\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"onContinue()\" title=\"{{'Continue' | rpxTranslate}}\">\n    {{'Continue' | rpxTranslate}}\n  </button>\n  <button id=\"btn-cancel\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"{{'Cancel' | rpxTranslate}}\" [routerLink]=\"cancelLink\">\n    {{'Cancel' | rpxTranslate}}\n  </button>\n</div>\n",
                     styles: ["select{width:100%}"]
                 },] }
     ];
@@ -3377,7 +3598,7 @@
     CookieBannerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'xuilib-cookie-banner',
-                    template: "<div class=\"govuk-cookie-banner \" role=\"region\" attr.aria-label=\"'Cookies on {{appName}}'\" *ngIf=\"isCookieBannerVisible\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">{{'Cookies on' | rpxTranslate}} {{appName | rpxTranslate}}</h2>\n\n        <div class=\"govuk-cookie-banner__content\">\n          <p>{{'We use some essential cookies to make this service work.' | rpxTranslate}}</p>\n          <p>{{'We\\'d also like to use analytics cookies so we can understand how you use the service and make improvements.' | rpxTranslate}}</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"acceptCookie()\">\n        {{'Accept analytics cookies' | rpxTranslate}}\n      </button>\n      <button value=\"reject\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"rejectCookie()\">\n        {{'Reject analytics cookies' | rpxTranslate}}\n      </button>\n      <a class=\"govuk-link\" routerLink=\"/cookies\">{{'View cookies' | rpxTranslate}}</a>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"govuk-cookie-banner \" role=\"region\" attr.aria-label=\"'Cookies on {{appName}}'\" *ngIf=\"isCookieBannerVisible\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">{{'Cookies on' | rpxTranslate}} {{appName | rpxTranslate}}</h2>\n\n        <div class=\"govuk-cookie-banner__content\">\n          <p>{{'We use some essential cookies to make this service work.' | rpxTranslate}}</p>\n          <p>{{'We\\\u2019d also like to use analytics cookies so we can understand how you use the service and make improvements.' | rpxTranslate}}</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"acceptCookie()\">\n        {{'Accept analytics cookies' | rpxTranslate}}\n      </button>\n      <button value=\"reject\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"rejectCookie()\">\n        {{'Reject analytics cookies' | rpxTranslate}}\n      </button>\n      <a class=\"govuk-link\" routerLink=\"/cookies\">{{'View cookies' | rpxTranslate}}</a>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     CookieBannerComponent.ctorParameters = function () { return [
@@ -3540,7 +3761,7 @@
     FindServiceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'xuilib-find-service',
-                    template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle | rpxTranslate}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\"\n        [options]=\"field.options\"\n        [selectedOptions]=\"selectedServices\"\n        [disabled]=\"disabled\"\n        (optionChanged)=\"onOptionSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addOption(tempSelectedService)\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"field?.enableAddButton\" id=\"add-service\">\n        {{ 'Add' | rpxTranslate}}\n        <span class=\"govuk-visually-hidden\">{{'service' | rpxTranslate}}</span>\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeOption(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label  | rpxTranslate }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                    template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle | rpxTranslate}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\"\n        [options]=\"field.options\"\n        [selectedOptions]=\"selectedServices\"\n        [disabled]=\"disabled\"\n        (optionChanged)=\"onOptionSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addOption(tempSelectedService)\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"field?.enableAddButton\" id=\"add-service\">\n        {{ 'Add' | rpxTranslate}}\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeOption(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label  | rpxTranslate }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
                     styles: ["#add-service{background-color:#ddd}"]
                 },] }
     ];
@@ -3554,56 +3775,6 @@
         serviceFieldChanged: [{ type: i0.Output }]
     };
 
-    exports.BadgeColour = void 0;
-    (function (BadgeColour) {
-        BadgeColour["BADGE_RED"] = "hmcts-badge--red";
-        BadgeColour["BADGE_BLUE"] = "hmcts-badge--blue";
-        BadgeColour["BADGE_GREEN"] = "hmcts-badge--green";
-    })(exports.BadgeColour || (exports.BadgeColour = {}));
-
-    var AnonymousFeatureUser = /** @class */ (function () {
-        function AnonymousFeatureUser() {
-        }
-        return AnonymousFeatureUser;
-    }());
-    var LoggedInFeatureUser = /** @class */ (function () {
-        function LoggedInFeatureUser() {
-        }
-        return LoggedInFeatureUser;
-    }());
-
-    var RadioFilterFieldConfig = /** @class */ (function () {
-        function RadioFilterFieldConfig() {
-        }
-        return RadioFilterFieldConfig;
-    }());
-
-    exports.BookingCheckType = void 0;
-    (function (BookingCheckType) {
-        BookingCheckType["NO_CHECK"] = "NO_CHECK";
-        BookingCheckType["BOOKINGS_AND_BASE"] = "BOOKINGS_AND_BASE";
-        BookingCheckType["POSSIBLE_BOOKINGS"] = "POSSIBLE_BOOKINGS";
-    })(exports.BookingCheckType || (exports.BookingCheckType = {}));
-
-    exports.PersonRole = void 0;
-    (function (PersonRole) {
-        PersonRole["JUDICIAL"] = "Judicial";
-        PersonRole["CASEWORKER"] = "Legal Ops";
-        PersonRole["ADMIN"] = "Admin";
-        PersonRole["CTSC"] = "CTSC";
-        PersonRole["ALL"] = "All";
-    })(exports.PersonRole || (exports.PersonRole = {}));
-    // Note: RoleCategory could replace PersonRole possibly
-    // However a lot of webapp logic is based on current PersonRole understanding
-    exports.RoleCategory = void 0;
-    (function (RoleCategory) {
-        RoleCategory["JUDICIAL"] = "JUDICIAL";
-        RoleCategory["CASEWORKER"] = "LEGAL_OPERATIONS";
-        RoleCategory["ADMIN"] = "ADMIN";
-        RoleCategory["CTSC"] = "CTSC";
-        RoleCategory["ALL"] = "ALL";
-    })(exports.RoleCategory || (exports.RoleCategory = {}));
-
     var LocationService = /** @class */ (function () {
         function LocationService(http) {
             this.http = http;
@@ -3637,7 +3808,7 @@
                 },] }
     ];
     LocationService.ctorParameters = function () { return [
-        { type: i1$2.HttpClient }
+        { type: i1$1.HttpClient }
     ]; };
 
     var SessionStorageService = /** @class */ (function () {
@@ -4269,7 +4440,7 @@
                 },] }
     ];
     FindAPersonService.ctorParameters = function () { return [
-        { type: i1$2.HttpClient },
+        { type: i1$1.HttpClient },
         { type: SessionStorageService }
     ]; };
 
@@ -4551,7 +4722,7 @@
                 },] }
     ];
     TaskNameService.ctorParameters = function () { return [
-        { type: i1$2.HttpClient },
+        { type: i1$1.HttpClient },
         { type: SessionStorageService }
     ]; };
 
@@ -4678,6 +4849,178 @@
         fnTitle: [{ type: i0.Input }]
     };
 
+    var WriteAddressFieldComponent = /** @class */ (function () {
+        function WriteAddressFieldComponent(addressesService) {
+            this.addressesService = addressesService;
+            this.internationalMode = false;
+            this.submissionAttempted = false;
+            this.postcodeOptionSelected = new i0.EventEmitter();
+            this.internationalModeStart = new i0.EventEmitter();
+            this.ukAddressOptionSelected = new i0.EventEmitter();
+            this.addressField = {
+                addressLine1: '',
+                addressLine2: '',
+                addressLine3: '',
+                postCode: '',
+                postTown: '',
+                country: '',
+                county: ''
+            };
+            this.optionErrorsPresent = false;
+            this.addressChosen = false;
+            this.missingPostcode = false;
+            this.optionErrorMessage = exports.AddressMessageEnum.NO_OPTION_SELECTED;
+        }
+        WriteAddressFieldComponent.prototype.ngOnInit = function () {
+            if (!this.formGroup.get('address')) {
+                this.formGroup.addControl('address', new forms.FormControl({}));
+            }
+            // set the form group relevant to only the external parent component
+            this.addressFormGroup = new forms.FormGroup({
+                // relevant to international mode
+                ukAddress: new forms.FormControl(this.isInternational !== undefined ? (this.isInternational ? 'no' : 'yes') : null),
+                // relevant to postocode lookup
+                postcode: new forms.FormControl(''),
+                addressList: new forms.FormControl('')
+            });
+        };
+        WriteAddressFieldComponent.prototype.findAddress = function () {
+            var _this = this;
+            if (!this.addressFormGroup.get('postcode').value) {
+                this.missingPostcode = true;
+            }
+            else {
+                this.missingPostcode = false;
+                this.addressField = null;
+                var postcode_1 = this.addressFormGroup.get('postcode').value;
+                this.addressOptions = [];
+                this.addressesService.getAddressesForPostcode(postcode_1.replace(' ', '').toUpperCase()).subscribe(function (result) {
+                    result.forEach(function (address) {
+                        _this.addressOptions.push(new AddressOption(address, null));
+                    });
+                    _this.addressOptions.unshift(new AddressOption(undefined, _this.defaultLabel(_this.addressOptions.length)));
+                }, function (error) {
+                    console.log("An error occurred retrieving addresses for postcode " + postcode_1 + ". " + error);
+                    _this.addressOptions.unshift(new AddressOption(undefined, _this.defaultLabel(_this.addressOptions.length)));
+                });
+                this.addressFormGroup.get('addressList').setValue(undefined);
+            }
+        };
+        WriteAddressFieldComponent.prototype.blankAddress = function () {
+            this.setFormValue();
+            if (this.internationalMode) {
+                this.internationalModeStart.emit();
+            }
+        };
+        WriteAddressFieldComponent.prototype.shouldShowDetailFields = function () {
+            if (!this.formGroup.get('address')) {
+                return false;
+            }
+            var address = this.formGroup.get('address').value;
+            var hasAddress = false;
+            if (address) {
+                Object.keys(address).forEach(function (key) {
+                    if (address[key] !== null) {
+                        hasAddress = true;
+                    }
+                });
+            }
+            return hasAddress;
+        };
+        WriteAddressFieldComponent.prototype.addressSelected = function () {
+            this.addressField = this.addressFormGroup.get('addressList').value;
+            this.addressChosen = true;
+            this.setFormValue();
+            this.postcodeOptionSelected.emit();
+        };
+        WriteAddressFieldComponent.prototype.ngOnChanges = function (changes) {
+            var addressChange = changes['addressField'];
+            var internationalChange = changes['isInternational'];
+            if (addressChange) {
+                this.setFormValue();
+            }
+            if (internationalChange && this.addressFormGroup && this.addressFormGroup.get('ukAddress')) {
+                this.addressFormGroup.get('ukAddress').patchValue(this.isInternational ? 'no' : 'yes');
+            }
+            this.checkIfErrorsNeeded();
+        };
+        WriteAddressFieldComponent.prototype.checkIfErrorsNeeded = function () {
+            if (this.submissionAttempted && this.shouldShowDetailFields() && this.internationalMode && !this.addressChosen) {
+                // ensure errors present when submission attmempted on international radio buttons
+                this.optionErrorsPresent = true;
+            }
+            else {
+                this.optionErrorsPresent = false;
+            }
+            if (this.optionErrorsPresent && (this.addressChosen || this.isInternational !== undefined)) {
+                // ensure parent errors not present when the child form group is present
+                this.optionErrorsPresent = false;
+            }
+        };
+        WriteAddressFieldComponent.prototype.setInternationalAddress = function (isInternational) {
+            this.isInternational = isInternational;
+            this.ukAddressOptionSelected.emit(this.isInternational);
+        };
+        WriteAddressFieldComponent.prototype.defaultLabel = function (numberOfAddresses) {
+            return numberOfAddresses === 0 ? 'No address found'
+                : "" + numberOfAddresses + (numberOfAddresses === 1 ? ' address ' : ' addresses ') + "found";
+        };
+        WriteAddressFieldComponent.prototype.setFormValue = function () {
+            if (this.formGroup) {
+                this.formGroup.get('address').patchValue(this.addressField);
+            }
+        };
+        return WriteAddressFieldComponent;
+    }());
+    WriteAddressFieldComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'xuilib-write-address-field',
+                    template: "<div class=\"govuk-form-group\" [formGroup]=\"addressFormGroup\" [ngClass]=\"{'govuk-form-group--error': optionErrorsPresent}\">\n  <p class=\"govuk-error-message\" *ngIf=\"optionErrorsPresent\">\n    <span class=\"govuk-visually-hidden\">Error:</span>{{optionErrorMessage}}\n  </p>\n  <div *ngIf=\"!shouldShowDetailFields() || (!startedInternational && !addressChosen)\">\n    <div class=\"govuk-form-group postcodeLookup\" id=\"addressLookup\"\n      [ngClass]=\"{'form-group-error': missingPostcode}\">\n      <label for=\"postcodeInput\">\n        <span class=\"govuk-label\"><b>Provide address details</b></span>\n        <span class=\"govuk-label\">Enter a UK postcode</span>\n      </label>\n      <span class=\"error-message\" *ngIf=\"missingPostcode\">Enter the Postcode</span>\n      <input type=\"text\" [ngClass]=\"{'govuk-input--error': missingPostcode}\" id=\"postcodeInput\" name=\"postcode\"\n        class=\"govuk-input govuk-!-width-two-thirds postcodeinput inline-block\" formControlName=\"postcode\">\n      <button type=\"button\" class=\"govuk-button\" (click)=\"findAddress()\">Find address</button>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"addressOptions\" id=\"selectAddress\">\n      <label class=\"govuk-label\" for=\"addressList\">\n        <span class=\"form-label\">Select an address</span>\n      </label>\n\n      <select class=\"form-control govuk-select ccd-dropdown addressList\" id=\"addressList\" name=\"address\"\n        formControlName=\"addressList\" (change)=\"addressSelected()\" focusElement>\n        <option *ngFor=\"let addressOption of addressOptions\" [ngValue]=\"addressOption.value\">\n          {{addressOption.description}}\n        </option>\n      </select>\n    </div>\n\n    <a class=\"manual-link govuk-link\" *ngIf=\"!shouldShowDetailFields() || (!startedInternational && !addressChosen)\" (click)=\"blankAddress()\"\n      href=\"javascript:void(0)\">I can't enter a UK postcode</a>\n  </div>\n\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\"\n    *ngIf=\"shouldShowDetailFields() && internationalMode && startedInternational && !addressChosen\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"yes\" value=\"yes\" name=\"ukAddress\" type=\"radio\" data-aria-controls=\"address-fields\"\n        (click)=\"setInternationalAddress(false)\" formControlName=\"ukAddress\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"yes\">\n        Yes\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"no\" value=\"no\" name=\"ukAddress\" type=\"radio\" data-aria-controls=\"address-fields\"\n        (click)=\"setInternationalAddress(true)\" formControlName=\"ukAddress\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"no\">\n        No\n      </label>\n    </div>\n    <div class=\"govuk-radios__conditional\" id=\"address-fields\">\n      <xuilib-write-address-inputs *ngIf=\"isInternational !== undefined\" [formGroup]=\"formGroup\" [isInternational]=\"isInternational\"\n                                  [submissionAttempted]=\"submissionAttempted\">\n      </xuilib-write-address-inputs>\n    </div>\n  </div>\n\n  <xuilib-write-address-inputs *ngIf=\"shouldShowDetailFields() && (addressChosen || !internationalMode)\"\n    [formGroup]=\"formGroup\" [isInternational]=\"false\" [submissionAttempted]=\"submissionAttempted\"></xuilib-write-address-inputs>\n\n</div>",
+                    styles: [".manual-link{cursor:pointer;text-decoration:underline}.manual-link,:host{display:block}"]
+                },] }
+    ];
+    WriteAddressFieldComponent.ctorParameters = function () { return [
+        { type: AddressService }
+    ]; };
+    WriteAddressFieldComponent.propDecorators = {
+        formGroup: [{ type: i0.Input }],
+        internationalMode: [{ type: i0.Input }],
+        isInternational: [{ type: i0.Input }],
+        submissionAttempted: [{ type: i0.Input }],
+        startedInternational: [{ type: i0.Input }],
+        postcodeOptionSelected: [{ type: i0.Output }],
+        internationalModeStart: [{ type: i0.Output }],
+        ukAddressOptionSelected: [{ type: i0.Output }]
+    };
+
+    var WriteAddressInputsComponent = /** @class */ (function () {
+        function WriteAddressInputsComponent() {
+            this.MESSAGE_ENUM = exports.AddressMessageEnum;
+            this.isInternational = false;
+            this.submissionAttempted = false;
+            this.missingPostcode = false;
+            this.errorsPresent = false;
+        }
+        WriteAddressInputsComponent.prototype.ngOnChanges = function () {
+            var addressGroup = this.formGroup.get('address');
+            // if there is an issue with the formgroup, ensure error styling is displayed
+            this.errorsPresent = !addressGroup.valid;
+        };
+        return WriteAddressInputsComponent;
+    }());
+    WriteAddressInputsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'xuilib-write-address-inputs',
+                    template: "<ng-container>\n  <form [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" formGroupName=\"address\" [ngClass]=\"{'govuk-form-group--error': submissionAttempted && errorsPresent}\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\">\n      Enter address details\n    </label>\n\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label\" for=\"addressLine1\">\n        Building and Street\n      </label>\n      <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && !formGroup.get('address').get('addressLine1').valid\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{MESSAGE_ENUM.NO_STREET_SELECTED}}\n      </p>\n      <input class=\"govuk-input govuk-!-width-full\" id=\"addressLine1\" name=\"addressLine1\" type=\"text\"\n        formControlName=\"addressLine1\">\n    </div>\n\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label\" for=\"addressLine2\">\n        Address line 2 (Optional)\n      </label>\n      <input class=\"govuk-input govuk-!-width-full\" id=\"addressLine2\" name=\"addressLine2\" type=\"text\"\n        formControlName=\"addressLine2\">\n    </div>\n\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label\" for=\"addressLine3\">\n        Address line 3 (Optional)\n      </label>\n      <input class=\"govuk-input govuk-!-width-full\" id=\"addressLine3\" name=\"addressLine3\" type=\"text\"\n        formControlName=\"addressLine3\">\n    </div>\n\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label\" for=\"postTown\">\n        Town or City\n      </label>\n      <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && !formGroup.get('address').get('postTown').valid\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{MESSAGE_ENUM.NO_CITY_SELECTED}}\n      </p>\n      <input class=\"govuk-input govuk-!-width-two-thirds\" id=\"postTown\" name=\"postTown\" type=\"text\"\n        formControlName=\"postTown\">\n    </div>\n\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label\" for=\"county\">\n        County{{this.isInternational ? '/ State/ Province' : ''}} (Optional)\n      </label>\n      <input class=\"govuk-input govuk-!-width-two-thirds\" id=\"county\" name=\"county\" type=\"text\"\n        formControlName=\"county\">\n    </div>\n\n    <div *ngIf=\"isInternational\" class=\"govuk-form-group\">\n      <label class=\"govuk-label\" for=\"country\">\n        Country\n      </label>\n      <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && !formGroup.get('address').get('country').valid\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{MESSAGE_ENUM.NO_COUNTRY_SELECTED}}\n      </p>\n      <input class=\"govuk-input govuk-!-width-two-thirds\" id=\"country\" name=\"country\" type=\"text\"\n        formControlName=\"country\">\n    </div>\n\n    <div class=\"govuk-form-group\">\n      <label class=\"govuk-label\" for=\"postCode\">\n        Postcode{{this.isInternational ? ' (Optional)' : ''}}\n      </label>\n      <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && !isInternational && this.formGroup.get('address').get('postCode').hasError('required')\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{MESSAGE_ENUM.NO_POSTCODE_SELECTED}}\n      </p>\n      <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && !isInternational && this.formGroup.get('address').get('postCode').hasError('invalidPostcode')\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{MESSAGE_ENUM.INVALID_POSTCODE}}\n      </p>\n      <input class=\"govuk-input govuk-!-width-one-third\" id=\"postCode\" name=\"postCode\" type=\"text\"\n        formControlName=\"postCode\">\n    </div>\n  </div>\n</form>\n</ng-container>"
+                },] }
+    ];
+    WriteAddressInputsComponent.ctorParameters = function () { return []; };
+    WriteAddressInputsComponent.propDecorators = {
+        formGroup: [{ type: i0.Input }],
+        isInternational: [{ type: i0.Input }],
+        submissionAttempted: [{ type: i0.Input }]
+    };
+
     var FeatureToggleDirective = /** @class */ (function () {
         function FeatureToggleDirective(service, viewContainer, templateRef) {
             this.service = service;
@@ -5340,7 +5683,7 @@
     HmctsIdentityBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'xuilib-hmcts-identity-bar',
-                    template: "<div class=\"hmcts-identity-bar\" *ngIf=\"value\">\n  <div class=\"hmcts-identity-bar__container\">\n    <div class=\"hmcts-identity-bar__details\">\n      <span class=\"hmcts-identity-bar__title\">{{value | rpxTranslate}}</span>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div class=\"hmcts-identity-bar\" *ngIf=\"value\">\n\n    <div class=\"hmcts-identity-bar__container\">\n\n        <div class=\"hmcts-identity-bar__details\">\n\n            <span class=\"hmcts-identity-bar__title\">{{value | rpxTranslate}}</span>\n\n        </div>\n\n    </div>\n\n</div>\n",
                     styles: [""]
                 },] }
     ];
@@ -5545,7 +5888,9 @@
         FindServiceComponent,
         SearchServiceComponent,
         SearchVenueComponent,
-        PaginationComponent
+        PaginationComponent,
+        WriteAddressFieldComponent,
+        WriteAddressInputsComponent
     ];
     var GOV_UI_COMPONENTS = [
         HmctsIdentityBarComponent,
@@ -5682,6 +6027,9 @@
      */
 
     exports.AccessibilityComponent = AccessibilityComponent;
+    exports.AddressModel = AddressModel;
+    exports.AddressOption = AddressOption;
+    exports.AddressService = AddressService;
     exports.AnonymousFeatureUser = AnonymousFeatureUser;
     exports.COMMON_COMPONENTS = COMMON_COMPONENTS;
     exports.CapitalizePipe = CapitalizePipe;
@@ -5765,6 +6113,8 @@
     exports.UserDetailsComponent = UserDetailsComponent;
     exports.UserListComponent = UserListComponent;
     exports.UserSelectComponent = UserSelectComponent;
+    exports.WriteAddressFieldComponent = WriteAddressFieldComponent;
+    exports.WriteAddressInputsComponent = WriteAddressInputsComponent;
     exports.checkboxesBeCheckedValidator = checkboxesBeCheckedValidator;
     exports.dateValidator = dateValidator;
     exports.radioGroupValidator = radioGroupValidator;
@@ -5794,30 +6144,33 @@
     exports["ɵbs"] = SearchServiceComponent;
     exports["ɵbt"] = SearchVenueComponent;
     exports["ɵbu"] = PaginationComponent;
-    exports["ɵbv"] = HmctsIdentityBarComponent;
-    exports["ɵbw"] = HmctsPaginationComponent;
-    exports["ɵbx"] = HmctsSubNavigationComponent;
-    exports["ɵby"] = HmctsPrimaryNavigationComponent;
-    exports["ɵbz"] = HmctsErrorSummaryComponent;
+    exports["ɵbv"] = WriteAddressFieldComponent;
+    exports["ɵbw"] = AddressService;
+    exports["ɵbx"] = WriteAddressInputsComponent;
+    exports["ɵby"] = HmctsIdentityBarComponent;
+    exports["ɵbz"] = HmctsPaginationComponent;
     exports["ɵc"] = TcDisplayHtmlComponent;
-    exports["ɵca"] = HmctsMainWrapperComponent;
-    exports["ɵcb"] = HmctsBannerComponent;
-    exports["ɵcc"] = GovukTableComponent;
-    exports["ɵcd"] = GovUkInputComponent;
-    exports["ɵce"] = GovUkCheckboxComponent;
-    exports["ɵcf"] = GovUkFormGroupWrapperComponent;
-    exports["ɵcg"] = GovUkLabelComponent;
-    exports["ɵch"] = GovUkErrorMessageComponent;
-    exports["ɵci"] = GovUkFieldsetComponent;
-    exports["ɵcj"] = GovUkDateComponent;
-    exports["ɵck"] = GovUkCheckboxesComponent;
-    exports["ɵcl"] = GovUkRadioComponent;
-    exports["ɵcm"] = GovUkRadiosComponent;
-    exports["ɵcn"] = GovUkSelectComponent;
-    exports["ɵco"] = GovUkTextareaComponent;
-    exports["ɵcp"] = GovUkFileUploadComponent;
-    exports["ɵcq"] = RemoveHostDirective;
-    exports["ɵcr"] = CapitalizePipe;
+    exports["ɵca"] = HmctsSubNavigationComponent;
+    exports["ɵcb"] = HmctsPrimaryNavigationComponent;
+    exports["ɵcc"] = HmctsErrorSummaryComponent;
+    exports["ɵcd"] = HmctsMainWrapperComponent;
+    exports["ɵce"] = HmctsBannerComponent;
+    exports["ɵcf"] = GovukTableComponent;
+    exports["ɵcg"] = GovUkInputComponent;
+    exports["ɵch"] = GovUkCheckboxComponent;
+    exports["ɵci"] = GovUkFormGroupWrapperComponent;
+    exports["ɵcj"] = GovUkLabelComponent;
+    exports["ɵck"] = GovUkErrorMessageComponent;
+    exports["ɵcl"] = GovUkFieldsetComponent;
+    exports["ɵcm"] = GovUkDateComponent;
+    exports["ɵcn"] = GovUkCheckboxesComponent;
+    exports["ɵco"] = GovUkRadioComponent;
+    exports["ɵcp"] = GovUkRadiosComponent;
+    exports["ɵcq"] = GovUkSelectComponent;
+    exports["ɵcr"] = GovUkTextareaComponent;
+    exports["ɵcs"] = GovUkFileUploadComponent;
+    exports["ɵct"] = RemoveHostDirective;
+    exports["ɵcu"] = CapitalizePipe;
     exports["ɵd"] = TcDisplayPlainComponent;
     exports["ɵe"] = TcConfirmComponent;
     exports["ɵf"] = ContactDetailsComponent;