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

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

@@ -8,14 +8,14 @@ import * as i1 from '@angular/router';
 import { Router, NavigationEnd, RouterModule } from '@angular/router';
 import { map, filter, distinctUntilChanged, delay, skipWhile, shareReplay, catchError, take, tap, switchMap, debounceTime, mergeMap } from 'rxjs/operators';
 import * as LDClient from 'launchdarkly-js-client-sdk';
+import * as i1$2 from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import * as i2 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
 import * as i1$1 from '@ng-idle/core';
 import { DocumentInterruptSource, Idle, WindowInterruptSource } from '@ng-idle/core';
 import * as i2$1 from '@ng-idle/keepalive';
 import { Keepalive } from '@ng-idle/keepalive';
-import * as i1$2 from '@angular/common/http';
-import { HttpParams, HttpClient } from '@angular/common/http';
 import { of as of$1 } from 'rxjs/internal/observable/of';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
@@ -470,6 +470,215 @@ LaunchDarklyService.decorators = [
             },] }
 ];
 
+var AddressMessageEnum;
+(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";
+})(AddressMessageEnum || (AddressMessageEnum = {}));
+
+class AddressOption {
+    constructor(addressModel, description) {
+        if (description === null) {
+            this.value = addressModel;
+            this.description = this.getDescription();
+        }
+        else {
+            this.description = description;
+        }
+    }
+    getDescription() {
+        return this.removeInitialCommaIfPresent(`${this.value.addressLine1 === undefined ? '' : this.value.addressLine1}${this.prefixWithCommaIfPresent(this.value.addressLine2)}${this.prefixWithCommaIfPresent(this.value.addressLine3)}, ${this.value.postTown}`);
+    }
+    prefixWithCommaIfPresent(value) {
+        return value ? `, ${value}` : value;
+    }
+    removeInitialCommaIfPresent(value) {
+        return value.replace(new RegExp('^,', 'gi'), '');
+    }
+}
+
+// tslint:disable:variable-name
+class AddressModel {
+}
+
+var SharedCaseErrorMessages;
+(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";
+})(SharedCaseErrorMessages || (SharedCaseErrorMessages = {}));
+
+var BadgeColour;
+(function (BadgeColour) {
+    BadgeColour["BADGE_RED"] = "hmcts-badge--red";
+    BadgeColour["BADGE_BLUE"] = "hmcts-badge--blue";
+    BadgeColour["BADGE_GREEN"] = "hmcts-badge--green";
+})(BadgeColour || (BadgeColour = {}));
+
+class AnonymousFeatureUser {
+}
+class LoggedInFeatureUser {
+}
+
+class RadioFilterFieldConfig {
+}
+
+var BookingCheckType;
+(function (BookingCheckType) {
+    BookingCheckType["NO_CHECK"] = "NO_CHECK";
+    BookingCheckType["BOOKINGS_AND_BASE"] = "BOOKINGS_AND_BASE";
+    BookingCheckType["POSSIBLE_BOOKINGS"] = "POSSIBLE_BOOKINGS";
+})(BookingCheckType || (BookingCheckType = {}));
+
+var PersonRole;
+(function (PersonRole) {
+    PersonRole["JUDICIAL"] = "Judicial";
+    PersonRole["CASEWORKER"] = "Legal Ops";
+    PersonRole["ADMIN"] = "Admin";
+    PersonRole["CTSC"] = "CTSC";
+    PersonRole["ALL"] = "All";
+})(PersonRole || (PersonRole = {}));
+// Note: RoleCategory could replace PersonRole possibly
+// However a lot of webapp logic is based on current PersonRole understanding
+var RoleCategory;
+(function (RoleCategory) {
+    RoleCategory["JUDICIAL"] = "JUDICIAL";
+    RoleCategory["CASEWORKER"] = "LEGAL_OPERATIONS";
+    RoleCategory["ADMIN"] = "ADMIN";
+    RoleCategory["CTSC"] = "CTSC";
+    RoleCategory["ALL"] = "ALL";
+})(RoleCategory || (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.
+ */
+class AddressParser {
+    parse(address) {
+        const classification = `${address.CLASSIFICATION_CODE}`;
+        const 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;
+    }
+    parseAddressLine1(classification, address) {
+        let 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);
+    }
+    parseAddressLine2(classification, address) {
+        let 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);
+    }
+    parseAddressLine3(classification, address) {
+        let 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);
+    }
+    removeNonAddressValues(line) {
+        line = line.replace(' null', ' ').replace('null ', ' ');
+        line = this.removeUndefinedString(line);
+        line = this.removeInitialComma(line);
+        line = this.removeEmptySpaces(line);
+        return line;
+    }
+    removeUndefinedString(value) {
+        return value.replace(new RegExp('undefined', 'gi'), '');
+    }
+    removeEmptySpaces(value) {
+        return value.replace(new RegExp(' +', 'gi'), ' ').trim();
+    }
+    removeInitialComma(value) {
+        return value.replace(new RegExp('^,', 'gi'), '');
+    }
+    prefixWithCommaIfPresent(value) {
+        return value ? `, ${value}` : value;
+    }
+}
+
+class AddressService {
+    constructor(http) {
+        this.http = http;
+    }
+    getAddressesForPostcode(postcode) {
+        return this.http
+            .get('/external/addresses?postcode=${postcode}'.replace('${postcode}', postcode), undefined)
+            .pipe(map((res) => res.results))
+            .pipe(map(output => output.map((addresses) => this.format(new AddressParser().parse(addresses[AddressType.DPA])))));
+    }
+    format(addressModel) {
+        return this.formatAddressLines(this.shiftAddressLinesUp(addressModel));
+    }
+    formatAddressLines(addressModel) {
+        ['addressLine1', 'addressLine2', 'addressLine3', 'postTown'].forEach((value) => {
+            addressModel[value] = this.toCapitalCase(addressModel[value]);
+        });
+        return addressModel;
+    }
+    shiftAddressLinesUp(addressModel) {
+        if (addressModel.addressLine2 === '') {
+            addressModel.addressLine2 = addressModel.addressLine3;
+            addressModel.addressLine3 = '';
+        }
+        if (addressModel.addressLine1 === '') {
+            addressModel.addressLine1 = addressModel.addressLine2;
+            addressModel.addressLine2 = '';
+        }
+        return addressModel;
+    }
+    toCapitalCase(sentence) {
+        sentence = sentence.toLowerCase();
+        sentence.split(' ').forEach((value) => {
+            sentence = sentence.replace(value, value.charAt(0).toUpperCase() + value.substr(1));
+        });
+        return sentence;
+    }
+}
+AddressService.decorators = [
+    { type: Injectable }
+];
+AddressService.ctorParameters = () => [
+    { type: HttpClient }
+];
+
 const windowToken = new InjectionToken('Window');
 function windowProvider() { return window; }
 
@@ -1643,7 +1852,7 @@ class GenericFilterComponent {
 GenericFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-generic-filter',
-                template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <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: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 styles: [".contain-classes .elevated-break{margin-bottom:20px}@media (min-width:40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .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%}"]
@@ -1930,7 +2139,7 @@ class SelectedCaseConfirmComponent {
 SelectedCaseConfirmComponent.decorators = [
     { type: 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%}"]
             },] }
 ];
@@ -2241,13 +2450,6 @@ ShareCaseConfirmComponent.propDecorators = {
     completeLink: [{ type: Input }]
 };
 
-var SharedCaseErrorMessages;
-(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";
-})(SharedCaseErrorMessages || (SharedCaseErrorMessages = {}));
-
 class UserSelectComponent {
     constructor() {
         this.selected = new EventEmitter();
@@ -2478,7 +2680,7 @@ class ShareCaseComponent {
 ShareCaseComponent.decorators = [
     { type: 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%}"]
             },] }
 ];
@@ -2704,7 +2906,7 @@ class CookieBannerComponent {
 CookieBannerComponent.decorators = [
     { type: 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 = () => [
@@ -2854,7 +3056,7 @@ class FindServiceComponent {
 FindServiceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-find-service',
-                template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"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}"]
             },] }
 ];
@@ -2868,47 +3070,6 @@ FindServiceComponent.propDecorators = {
     serviceFieldChanged: [{ type: Output }]
 };
 
-var BadgeColour;
-(function (BadgeColour) {
-    BadgeColour["BADGE_RED"] = "hmcts-badge--red";
-    BadgeColour["BADGE_BLUE"] = "hmcts-badge--blue";
-    BadgeColour["BADGE_GREEN"] = "hmcts-badge--green";
-})(BadgeColour || (BadgeColour = {}));
-
-class AnonymousFeatureUser {
-}
-class LoggedInFeatureUser {
-}
-
-class RadioFilterFieldConfig {
-}
-
-var BookingCheckType;
-(function (BookingCheckType) {
-    BookingCheckType["NO_CHECK"] = "NO_CHECK";
-    BookingCheckType["BOOKINGS_AND_BASE"] = "BOOKINGS_AND_BASE";
-    BookingCheckType["POSSIBLE_BOOKINGS"] = "POSSIBLE_BOOKINGS";
-})(BookingCheckType || (BookingCheckType = {}));
-
-var PersonRole;
-(function (PersonRole) {
-    PersonRole["JUDICIAL"] = "Judicial";
-    PersonRole["CASEWORKER"] = "Legal Ops";
-    PersonRole["ADMIN"] = "Admin";
-    PersonRole["CTSC"] = "CTSC";
-    PersonRole["ALL"] = "All";
-})(PersonRole || (PersonRole = {}));
-// Note: RoleCategory could replace PersonRole possibly
-// However a lot of webapp logic is based on current PersonRole understanding
-var RoleCategory;
-(function (RoleCategory) {
-    RoleCategory["JUDICIAL"] = "JUDICIAL";
-    RoleCategory["CASEWORKER"] = "LEGAL_OPERATIONS";
-    RoleCategory["ADMIN"] = "ADMIN";
-    RoleCategory["CTSC"] = "CTSC";
-    RoleCategory["ALL"] = "ALL";
-})(RoleCategory || (RoleCategory = {}));
-
 class LocationService {
     constructor(http) {
         this.http = http;
@@ -3905,6 +4066,175 @@ ExuiPageWrapperComponent.propDecorators = {
     fnTitle: [{ type: Input }]
 };
 
+class WriteAddressFieldComponent {
+    constructor(addressesService) {
+        this.addressesService = addressesService;
+        this.internationalMode = false;
+        this.submissionAttempted = false;
+        this.postcodeOptionSelected = new EventEmitter();
+        this.internationalModeStart = new EventEmitter();
+        this.ukAddressOptionSelected = new EventEmitter();
+        this.addressField = {
+            addressLine1: '',
+            addressLine2: '',
+            addressLine3: '',
+            postCode: '',
+            postTown: '',
+            country: '',
+            county: ''
+        };
+        this.optionErrorsPresent = false;
+        this.addressChosen = false;
+        this.missingPostcode = false;
+        this.optionErrorMessage = AddressMessageEnum.NO_OPTION_SELECTED;
+    }
+    ngOnInit() {
+        if (!this.formGroup.get('address')) {
+            this.formGroup.addControl('address', new FormControl({}));
+        }
+        // set the form group relevant to only the external parent component
+        this.addressFormGroup = new FormGroup({
+            // relevant to international mode
+            ukAddress: new FormControl(this.isInternational !== undefined ? (this.isInternational ? 'no' : 'yes') : null),
+            // relevant to postocode lookup
+            postcode: new FormControl(''),
+            addressList: new FormControl('')
+        });
+    }
+    findAddress() {
+        if (!this.addressFormGroup.get('postcode').value) {
+            this.missingPostcode = true;
+        }
+        else {
+            this.missingPostcode = false;
+            this.addressField = null;
+            const postcode = this.addressFormGroup.get('postcode').value;
+            this.addressOptions = [];
+            this.addressesService.getAddressesForPostcode(postcode.replace(' ', '').toUpperCase()).subscribe(result => {
+                result.forEach(address => {
+                    this.addressOptions.push(new AddressOption(address, null));
+                });
+                this.addressOptions.unshift(new AddressOption(undefined, this.defaultLabel(this.addressOptions.length)));
+            }, (error) => {
+                console.log(`An error occurred retrieving addresses for postcode ${postcode}. ${error}`);
+                this.addressOptions.unshift(new AddressOption(undefined, this.defaultLabel(this.addressOptions.length)));
+            });
+            this.addressFormGroup.get('addressList').setValue(undefined);
+        }
+    }
+    blankAddress() {
+        this.setFormValue();
+        if (this.internationalMode) {
+            this.internationalModeStart.emit();
+        }
+    }
+    shouldShowDetailFields() {
+        if (!this.formGroup.get('address')) {
+            return false;
+        }
+        const address = this.formGroup.get('address').value;
+        let hasAddress = false;
+        if (address) {
+            Object.keys(address).forEach((key) => {
+                if (address[key] !== null) {
+                    hasAddress = true;
+                }
+            });
+        }
+        return hasAddress;
+    }
+    addressSelected() {
+        this.addressField = this.addressFormGroup.get('addressList').value;
+        this.addressChosen = true;
+        this.setFormValue();
+        this.postcodeOptionSelected.emit();
+    }
+    ngOnChanges(changes) {
+        const addressChange = changes['addressField'];
+        const 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();
+    }
+    checkIfErrorsNeeded() {
+        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;
+        }
+    }
+    setInternationalAddress(isInternational) {
+        this.isInternational = isInternational;
+        this.ukAddressOptionSelected.emit(this.isInternational);
+    }
+    defaultLabel(numberOfAddresses) {
+        return numberOfAddresses === 0 ? 'No address found'
+            : `${numberOfAddresses}${numberOfAddresses === 1 ? ' address ' : ' addresses '}found`;
+    }
+    setFormValue() {
+        if (this.formGroup) {
+            this.formGroup.get('address').patchValue(this.addressField);
+        }
+    }
+}
+WriteAddressFieldComponent.decorators = [
+    { type: 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 = () => [
+    { type: AddressService }
+];
+WriteAddressFieldComponent.propDecorators = {
+    formGroup: [{ type: Input }],
+    internationalMode: [{ type: Input }],
+    isInternational: [{ type: Input }],
+    submissionAttempted: [{ type: Input }],
+    startedInternational: [{ type: Input }],
+    postcodeOptionSelected: [{ type: Output }],
+    internationalModeStart: [{ type: Output }],
+    ukAddressOptionSelected: [{ type: Output }]
+};
+
+class WriteAddressInputsComponent {
+    constructor() {
+        this.MESSAGE_ENUM = AddressMessageEnum;
+        this.isInternational = false;
+        this.submissionAttempted = false;
+        this.missingPostcode = false;
+        this.errorsPresent = false;
+    }
+    ngOnChanges() {
+        const addressGroup = this.formGroup.get('address');
+        // if there is an issue with the formgroup, ensure error styling is displayed
+        this.errorsPresent = !addressGroup.valid;
+    }
+}
+WriteAddressInputsComponent.decorators = [
+    { type: 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 = () => [];
+WriteAddressInputsComponent.propDecorators = {
+    formGroup: [{ type: Input }],
+    isInternational: [{ type: Input }],
+    submissionAttempted: [{ type: Input }]
+};
+
 class FeatureToggleDirective {
     constructor(service, viewContainer, templateRef) {
         this.service = service;
@@ -4511,7 +4841,7 @@ class HmctsIdentityBarComponent {
 HmctsIdentityBarComponent.decorators = [
     { type: 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: [""]
             },] }
 ];
@@ -4698,7 +5028,9 @@ const COMMON_COMPONENTS = [
     FindServiceComponent,
     SearchServiceComponent,
     SearchVenueComponent,
-    PaginationComponent
+    PaginationComponent,
+    WriteAddressFieldComponent,
+    WriteAddressInputsComponent
 ];
 const GOV_UI_COMPONENTS = [
     HmctsIdentityBarComponent,
@@ -4835,5 +5167,5 @@ function radioGroupValidator() {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessibilityComponent, AnonymousFeatureUser, BadgeColour, BookingCheckType, COMMON_COMPONENTS, CapitalizePipe, CheckboxListComponent, ContactDetailsComponent, CookieBannerComponent, CookieService, DateBadgeColour, DueDateComponent, ExuiCommonLibModule, ExuiPageWrapperComponent, FeatureToggleDirective, FeatureToggleGuard, FeatureToggleService, FilterService, FindLocationComponent, FindPersonComponent, FindServiceComponent, FindTaskNameComponent, GOV_UI_COMPONENTS, GenericFilterComponent, GoogleAnalyticsService, GoogleTagManagerService, GovUiService, GovUkCheckboxComponent, GovUkCheckboxesComponent, GovUkDateComponent, GovUkErrorMessageComponent, GovUkFieldsetComponent, GovUkFileUploadComponent, GovUkFormGroupWrapperComponent, GovUkInputComponent, GovUkLabelComponent, GovUkRadioComponent, GovUkRadiosComponent, GovUkSelectComponent, GovUkTextareaComponent, GovukTableColumnConfig, GovukTableComponent, HasLoadingState, HmctsBannerComponent, HmctsErrorSummaryComponent, HmctsIdentityBarComponent, HmctsMainWrapperComponent, HmctsPaginationComponent, HmctsPrimaryNavigationComponent, HmctsSessionDialogComponent, HmctsSubNavigationComponent, InviteUserFormComponent, InviteUserPermissionComponent, LaunchDarklyService, LetContext, LetDirective, LoadingService, LoadingSpinnerComponent, LoggedInFeatureUser, ManageSessionServices, PaginationComponent, PersonRole, RadioFilterFieldConfig, RefDataService, RemoveHostDirective, RoleCategory, RoleGuard, RoleMatching, RoleService, SECONDS_IN_A_DAY, SearchJudicialsComponent, SearchLocationComponent, SearchServiceComponent, SearchVenueComponent, SelectedCaseComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseComponent, ShareCaseConfirmComponent, SharedCaseErrorMessages, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, TimeoutNotificationsService, UserDetailsComponent, UserListComponent, UserSelectComponent, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, windowProvider, windowToken, ɵ0, ExuiPageWrapperComponent as ɵa, TermsAndConditionsComponent as ɵb, ServiceMessageComponent as ɵba, ServiceMessagesComponent as ɵbb, LoadingSpinnerComponent as ɵbc, GenericFilterComponent as ɵbd, FilterService as ɵbe, CookieBannerComponent as ɵbf, CookieService as ɵbg, FindPersonComponent as ɵbh, FindAPersonService as ɵbi, SessionStorageService as ɵbj, SearchJudicialsComponent as ɵbk, FindLocationComponent as ɵbl, SearchLocationComponent as ɵbm, LocationService as ɵbn, RefDataService as ɵbo, FindTaskNameComponent as ɵbp, TaskNameService as ɵbq, FindServiceComponent as ɵbr, SearchServiceComponent as ɵbs, SearchVenueComponent as ɵbt, PaginationComponent as ɵbu, HmctsIdentityBarComponent as ɵbv, HmctsPaginationComponent as ɵbw, HmctsSubNavigationComponent as ɵbx, HmctsPrimaryNavigationComponent as ɵby, HmctsErrorSummaryComponent as ɵbz, TcDisplayHtmlComponent as ɵc, HmctsMainWrapperComponent as ɵca, HmctsBannerComponent as ɵcb, GovukTableComponent as ɵcc, GovUkInputComponent as ɵcd, GovUkCheckboxComponent as ɵce, GovUkFormGroupWrapperComponent as ɵcf, GovUkLabelComponent as ɵcg, GovUkErrorMessageComponent as ɵch, GovUkFieldsetComponent as ɵci, GovUkDateComponent as ɵcj, GovUkCheckboxesComponent as ɵck, GovUkRadioComponent as ɵcl, GovUkRadiosComponent as ɵcm, GovUkSelectComponent as ɵcn, GovUkTextareaComponent as ɵco, GovUkFileUploadComponent as ɵcp, RemoveHostDirective as ɵcq, CapitalizePipe as ɵcr, TcDisplayPlainComponent as ɵd, TcConfirmComponent as ɵe, ContactDetailsComponent as ɵf, FeatureToggleDirective as ɵg, FeatureToggleService as ɵh, LetContext as ɵi, LetDirective as ɵj, HmctsSessionDialogComponent as ɵk, UserListComponent as ɵl, UserDetailsComponent as ɵm, InviteUserPermissionComponent as ɵn, InviteUserFormComponent as ɵo, ShareCaseComponent as ɵp, UserSelectComponent as ɵq, CaseSharingStateService as ɵr, ShareCaseConfirmComponent as ɵs, SelectedCaseListComponent as ɵt, SelectedCaseComponent as ɵu, SelectedCaseConfirmComponent as ɵv, TabComponent as ɵw, AccessibilityComponent as ɵx, DueDateComponent as ɵy, CheckboxListComponent as ɵz };
+export { AccessibilityComponent, AddressMessageEnum, AddressModel, AddressOption, AddressService, AnonymousFeatureUser, BadgeColour, BookingCheckType, COMMON_COMPONENTS, CapitalizePipe, CheckboxListComponent, ContactDetailsComponent, CookieBannerComponent, CookieService, DateBadgeColour, DueDateComponent, ExuiCommonLibModule, ExuiPageWrapperComponent, FeatureToggleDirective, FeatureToggleGuard, FeatureToggleService, FilterService, FindLocationComponent, FindPersonComponent, FindServiceComponent, FindTaskNameComponent, GOV_UI_COMPONENTS, GenericFilterComponent, GoogleAnalyticsService, GoogleTagManagerService, GovUiService, GovUkCheckboxComponent, GovUkCheckboxesComponent, GovUkDateComponent, GovUkErrorMessageComponent, GovUkFieldsetComponent, GovUkFileUploadComponent, GovUkFormGroupWrapperComponent, GovUkInputComponent, GovUkLabelComponent, GovUkRadioComponent, GovUkRadiosComponent, GovUkSelectComponent, GovUkTextareaComponent, GovukTableColumnConfig, GovukTableComponent, HasLoadingState, HmctsBannerComponent, HmctsErrorSummaryComponent, HmctsIdentityBarComponent, HmctsMainWrapperComponent, HmctsPaginationComponent, HmctsPrimaryNavigationComponent, HmctsSessionDialogComponent, HmctsSubNavigationComponent, InviteUserFormComponent, InviteUserPermissionComponent, LaunchDarklyService, LetContext, LetDirective, LoadingService, LoadingSpinnerComponent, LoggedInFeatureUser, ManageSessionServices, PaginationComponent, PersonRole, RadioFilterFieldConfig, RefDataService, RemoveHostDirective, RoleCategory, RoleGuard, RoleMatching, RoleService, SECONDS_IN_A_DAY, SearchJudicialsComponent, SearchLocationComponent, SearchServiceComponent, SearchVenueComponent, SelectedCaseComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseComponent, ShareCaseConfirmComponent, SharedCaseErrorMessages, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, TimeoutNotificationsService, UserDetailsComponent, UserListComponent, UserSelectComponent, WriteAddressFieldComponent, WriteAddressInputsComponent, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, windowProvider, windowToken, ɵ0, ExuiPageWrapperComponent as ɵa, TermsAndConditionsComponent as ɵb, ServiceMessageComponent as ɵba, ServiceMessagesComponent as ɵbb, LoadingSpinnerComponent as ɵbc, GenericFilterComponent as ɵbd, FilterService as ɵbe, CookieBannerComponent as ɵbf, CookieService as ɵbg, FindPersonComponent as ɵbh, FindAPersonService as ɵbi, SessionStorageService as ɵbj, SearchJudicialsComponent as ɵbk, FindLocationComponent as ɵbl, SearchLocationComponent as ɵbm, LocationService as ɵbn, RefDataService as ɵbo, FindTaskNameComponent as ɵbp, TaskNameService as ɵbq, FindServiceComponent as ɵbr, SearchServiceComponent as ɵbs, SearchVenueComponent as ɵbt, PaginationComponent as ɵbu, WriteAddressFieldComponent as ɵbv, AddressService as ɵbw, WriteAddressInputsComponent as ɵbx, HmctsIdentityBarComponent as ɵby, HmctsPaginationComponent as ɵbz, TcDisplayHtmlComponent as ɵc, HmctsSubNavigationComponent as ɵca, HmctsPrimaryNavigationComponent as ɵcb, HmctsErrorSummaryComponent as ɵcc, HmctsMainWrapperComponent as ɵcd, HmctsBannerComponent as ɵce, GovukTableComponent as ɵcf, GovUkInputComponent as ɵcg, GovUkCheckboxComponent as ɵch, GovUkFormGroupWrapperComponent as ɵci, GovUkLabelComponent as ɵcj, GovUkErrorMessageComponent as ɵck, GovUkFieldsetComponent as ɵcl, GovUkDateComponent as ɵcm, GovUkCheckboxesComponent as ɵcn, GovUkRadioComponent as ɵco, GovUkRadiosComponent as ɵcp, GovUkSelectComponent as ɵcq, GovUkTextareaComponent as ɵcr, GovUkFileUploadComponent as ɵcs, RemoveHostDirective as ɵct, CapitalizePipe as ɵcu, TcDisplayPlainComponent as ɵd, TcConfirmComponent as ɵe, ContactDetailsComponent as ɵf, FeatureToggleDirective as ɵg, FeatureToggleService as ɵh, LetContext as ɵi, LetDirective as ɵj, HmctsSessionDialogComponent as ɵk, UserListComponent as ɵl, UserDetailsComponent as ɵm, InviteUserPermissionComponent as ɵn, InviteUserFormComponent as ɵo, ShareCaseComponent as ɵp, UserSelectComponent as ɵq, CaseSharingStateService as ɵr, ShareCaseConfirmComponent as ɵs, SelectedCaseListComponent as ɵt, SelectedCaseComponent as ɵu, SelectedCaseConfirmComponent as ɵv, TabComponent as ɵw, AccessibilityComponent as ɵx, DueDateComponent as ɵy, CheckboxListComponent as ɵz };
 //# sourceMappingURL=hmcts-rpx-xui-common-lib.js.map