@hmcts/rpx-xui-common-lib 1.9.0-address-display-full → 1.9.0-address-non-postcode

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/bundles/hmcts-rpx-xui-common-lib.umd.js +96 -82
  2. package/bundles/hmcts-rpx-xui-common-lib.umd.js.map +1 -1
  3. package/bundles/hmcts-rpx-xui-common-lib.umd.min.js +1 -1
  4. package/bundles/hmcts-rpx-xui-common-lib.umd.min.js.map +1 -1
  5. package/esm2015/lib/components/cookie-banner/cookie-banner.component.js +2 -2
  6. package/esm2015/lib/components/find-service/find-service.component.js +2 -2
  7. package/esm2015/lib/components/generic-filter/generic-filter.component.js +2 -2
  8. package/esm2015/lib/components/selected-case-confirm/selected-case-confirm.component.js +2 -2
  9. package/esm2015/lib/components/share-case/share-case.component.js +2 -2
  10. package/esm2015/lib/components/write-address/write-address.component.js +46 -32
  11. package/esm2015/lib/components/write-address-inputs/write-address-inputs.component.js +17 -25
  12. package/esm2015/lib/gov-ui/components/hmcts-identity-bar/hmcts-identity-bar.component.js +2 -2
  13. package/esm2015/lib/models/address-message.enum.js +9 -0
  14. package/esm2015/lib/models/address.model.js +1 -1
  15. package/esm2015/lib/models/index.js +3 -1
  16. package/fesm2015/hmcts-rpx-xui-common-lib.js +95 -82
  17. package/fesm2015/hmcts-rpx-xui-common-lib.js.map +1 -1
  18. package/hmcts-rpx-xui-common-lib.metadata.json +1 -1
  19. package/lib/components/write-address/write-address.component.d.ts +13 -12
  20. package/lib/components/write-address-inputs/write-address-inputs.component.d.ts +7 -10
  21. package/lib/models/address-message.enum.d.ts +7 -0
  22. package/lib/models/address.model.d.ts +3 -3
  23. package/lib/models/index.d.ts +2 -0
  24. package/package.json +1 -1
@@ -470,6 +470,36 @@ LaunchDarklyService.decorators = [
470
470
  },] }
471
471
  ];
472
472
 
473
+ var AddressMessageEnum;
474
+ (function (AddressMessageEnum) {
475
+ AddressMessageEnum["NO_OPTION_SELECTED"] = "Please select an answer";
476
+ AddressMessageEnum["NO_STREET_SELECTED"] = "Enter building and street";
477
+ AddressMessageEnum["NO_CITY_SELECTED"] = "Enter town or city";
478
+ AddressMessageEnum["NO_COUNTRY_SELECTED"] = "Enter country";
479
+ AddressMessageEnum["NO_POSTCODE_SELECTED"] = "Enter postcode";
480
+ })(AddressMessageEnum || (AddressMessageEnum = {}));
481
+
482
+ class AddressOption {
483
+ constructor(addressModel, description) {
484
+ if (description === null) {
485
+ this.value = addressModel;
486
+ this.description = this.getDescription();
487
+ }
488
+ else {
489
+ this.description = description;
490
+ }
491
+ }
492
+ getDescription() {
493
+ return this.removeInitialCommaIfPresent(`${this.value.addressLine1 === undefined ? '' : this.value.addressLine1}${this.prefixWithCommaIfPresent(this.value.addressLine2)}${this.prefixWithCommaIfPresent(this.value.addressLine3)}, ${this.value.postTown}`);
494
+ }
495
+ prefixWithCommaIfPresent(value) {
496
+ return value ? `, ${value}` : value;
497
+ }
498
+ removeInitialCommaIfPresent(value) {
499
+ return value.replace(new RegExp('^,', 'gi'), '');
500
+ }
501
+ }
502
+
473
503
  // tslint:disable:variable-name
474
504
  class AddressModel {
475
505
  }
@@ -1821,7 +1851,7 @@ class GenericFilterComponent {
1821
1851
  GenericFilterComponent.decorators = [
1822
1852
  { type: Component, args: [{
1823
1853
  selector: 'xuilib-generic-filter',
1824
- 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",
1854
+ 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",
1825
1855
  changeDetection: ChangeDetectionStrategy.OnPush,
1826
1856
  encapsulation: ViewEncapsulation.None,
1827
1857
  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%}"]
@@ -2108,7 +2138,7 @@ class SelectedCaseConfirmComponent {
2108
2138
  SelectedCaseConfirmComponent.decorators = [
2109
2139
  { type: Component, args: [{
2110
2140
  selector: 'xuilib-selected-case-confirm',
2111
- 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",
2141
+ 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",
2112
2142
  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%}"]
2113
2143
  },] }
2114
2144
  ];
@@ -2649,7 +2679,7 @@ class ShareCaseComponent {
2649
2679
  ShareCaseComponent.decorators = [
2650
2680
  { type: Component, args: [{
2651
2681
  selector: 'xuilib-share-case',
2652
- 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",
2682
+ 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",
2653
2683
  styles: ["select{width:100%}"]
2654
2684
  },] }
2655
2685
  ];
@@ -2875,7 +2905,7 @@ class CookieBannerComponent {
2875
2905
  CookieBannerComponent.decorators = [
2876
2906
  { type: Component, args: [{
2877
2907
  selector: 'xuilib-cookie-banner',
2878
- 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"
2908
+ 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"
2879
2909
  },] }
2880
2910
  ];
2881
2911
  CookieBannerComponent.ctorParameters = () => [
@@ -3025,7 +3055,7 @@ class FindServiceComponent {
3025
3055
  FindServiceComponent.decorators = [
3026
3056
  { type: Component, args: [{
3027
3057
  selector: 'xuilib-find-service',
3028
- 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",
3058
+ 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",
3029
3059
  styles: ["#add-service{background-color:#ddd}"]
3030
3060
  },] }
3031
3061
  ];
@@ -4035,29 +4065,13 @@ ExuiPageWrapperComponent.propDecorators = {
4035
4065
  fnTitle: [{ type: Input }]
4036
4066
  };
4037
4067
 
4038
- class AddressOption {
4039
- constructor(addressModel, description) {
4040
- if (description === null) {
4041
- this.value = addressModel;
4042
- this.description = this.getDescription();
4043
- }
4044
- else {
4045
- this.description = description;
4046
- }
4047
- }
4048
- getDescription() {
4049
- return this.removeInitialCommaIfPresent(`${this.value.addressLine1 === undefined ? '' : this.value.addressLine1}${this.prefixWithCommaIfPresent(this.value.addressLine2)}${this.prefixWithCommaIfPresent(this.value.addressLine3)}, ${this.value.postTown}`);
4050
- }
4051
- prefixWithCommaIfPresent(value) {
4052
- return value ? `, ${value}` : value;
4053
- }
4054
- removeInitialCommaIfPresent(value) {
4055
- return value.replace(new RegExp('^,', 'gi'), '');
4056
- }
4057
- }
4058
-
4059
4068
  class WriteAddressFieldComponent {
4060
4069
  constructor(addressesService) {
4070
+ this.internationalMode = false;
4071
+ this.submissionAttempted = false;
4072
+ this.postcodeOptionSelected = new EventEmitter();
4073
+ this.internationalModeStart = new EventEmitter();
4074
+ this.ukAddressOptionSelected = new EventEmitter();
4061
4075
  this.addressField = {
4062
4076
  addressLine1: '',
4063
4077
  addressLine2: '',
@@ -4067,38 +4081,33 @@ class WriteAddressFieldComponent {
4067
4081
  country: '',
4068
4082
  county: ''
4069
4083
  };
4070
- this.isExpanded = false;
4071
- this.internationalMode = false;
4072
- this.internationalModeStart = new EventEmitter();
4073
- this.ukRadioChecked = false;
4084
+ this.optionErrorsPresent = false;
4074
4085
  this.addressChosen = false;
4075
- this.addressFormGroup = new FormGroup({});
4076
- this.ukInternationalFormGroup = new FormGroup({});
4077
4086
  this.missingPostcode = false;
4087
+ this.optionErrorMessage = AddressMessageEnum.NO_OPTION_SELECTED;
4078
4088
  this.addressesService = addressesService;
4079
4089
  }
4080
4090
  ngOnInit() {
4081
4091
  if (!this.formGroup.get('address')) {
4082
4092
  this.formGroup.addControl('address', new FormControl({}));
4083
4093
  }
4084
- this.ukInternationalFormGroup = new FormGroup({
4085
- ukAddress: new FormControl()
4094
+ // set the form group relevant to only the external parent component
4095
+ this.addressFormGroup = new FormGroup({
4096
+ // relevant to international mode
4097
+ ukAddress: new FormControl(this.isInternational !== undefined ? (this.isInternational ? 'no' : 'yes') : null),
4098
+ // relevant to postocode lookup
4099
+ postcode: new FormControl(''),
4100
+ addressList: new FormControl('')
4086
4101
  });
4087
- this.postcode = new FormControl('');
4088
- this.addressFormGroup.addControl('postcode', this.postcode);
4089
- this.addressList = new FormControl('');
4090
- this.addressFormGroup.addControl('address', this.addressList);
4091
- this.ukAddress = new FormControl('');
4092
- this.addressFormGroup.addControl('ukAddress', this.ukAddress);
4093
4102
  }
4094
4103
  findAddress() {
4095
- if (!this.postcode.value) {
4104
+ if (!this.addressFormGroup.get('postcode').value) {
4096
4105
  this.missingPostcode = true;
4097
4106
  }
4098
4107
  else {
4099
4108
  this.missingPostcode = false;
4100
4109
  this.addressField = null;
4101
- const postcode = this.postcode.value;
4110
+ const postcode = this.addressFormGroup.get('postcode').value;
4102
4111
  this.addressOptions = [];
4103
4112
  this.addressesService.getAddressesForPostcode(postcode.replace(' ', '').toUpperCase()).subscribe(result => {
4104
4113
  result.forEach(address => {
@@ -4109,7 +4118,7 @@ class WriteAddressFieldComponent {
4109
4118
  console.log(`An error occurred retrieving addresses for postcode ${postcode}. ${error}`);
4110
4119
  this.addressOptions.unshift(new AddressOption(undefined, this.defaultLabel(this.addressOptions.length)));
4111
4120
  });
4112
- this.addressList.setValue(undefined);
4121
+ this.addressFormGroup.get('addressList').setValue(undefined);
4113
4122
  // this.refocusElement();
4114
4123
  }
4115
4124
  }
@@ -4120,9 +4129,6 @@ class WriteAddressFieldComponent {
4120
4129
  }
4121
4130
  }
4122
4131
  shouldShowDetailFields() {
4123
- if (this.isExpanded) {
4124
- return true;
4125
- }
4126
4132
  if (!this.formGroup.get('address')) {
4127
4133
  return false;
4128
4134
  }
@@ -4138,22 +4144,34 @@ class WriteAddressFieldComponent {
4138
4144
  return hasAddress;
4139
4145
  }
4140
4146
  addressSelected() {
4141
- this.addressField = this.addressList.value;
4147
+ this.addressField = this.addressFormGroup.get('addressList').value;
4142
4148
  this.addressChosen = true;
4143
4149
  this.setFormValue();
4150
+ this.postcodeOptionSelected.emit();
4144
4151
  }
4145
4152
  ngOnChanges(changes) {
4146
- const change = changes['addressField'];
4147
- if (change) {
4153
+ const addressChange = changes['addressField'];
4154
+ if (addressChange) {
4148
4155
  this.setFormValue();
4149
4156
  }
4157
+ this.checkIfErrorsNeeded();
4150
4158
  }
4151
- setInternationalAddress(event) {
4152
- const target = event.target;
4153
- if (target.checked) {
4154
- this.ukRadioChecked = true;
4155
- this.isInternational = target.id === 'no';
4159
+ checkIfErrorsNeeded() {
4160
+ if (this.submissionAttempted && this.shouldShowDetailFields() && this.internationalMode && !this.addressChosen) {
4161
+ // ensure errors present when submission attmempted on international radio buttons
4162
+ this.optionErrorsPresent = true;
4163
+ }
4164
+ else {
4165
+ this.optionErrorsPresent = false;
4156
4166
  }
4167
+ if (this.optionErrorsPresent && (this.addressChosen || this.isInternational !== undefined)) {
4168
+ // ensure parent errors not present when the child form group is present
4169
+ this.optionErrorsPresent = false;
4170
+ }
4171
+ }
4172
+ setInternationalAddress(isInternational) {
4173
+ this.isInternational = isInternational;
4174
+ this.ukAddressOptionSelected.emit(this.isInternational);
4157
4175
  }
4158
4176
  defaultLabel(numberOfAddresses) {
4159
4177
  return numberOfAddresses === 0 ? 'No address found'
@@ -4168,7 +4186,7 @@ class WriteAddressFieldComponent {
4168
4186
  WriteAddressFieldComponent.decorators = [
4169
4187
  { type: Component, args: [{
4170
4188
  selector: 'xuilib-write-address-field',
4171
- template: "<div class=\"govuk-form-group\">\n\n <div *ngIf=\"!shouldShowDetailFields()\">\n <div class=\"govuk-form-group postcodeLookup\" id=\"addressLookup\"\n [ngClass]=\"{'form-group-error': missingPostcode}\" *ngIf=\"!isExpanded\">\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\" [formControl]=\"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 [formControl]=\"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()\" (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 && !addressChosen\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"yes\" name=\"ukAddress\" type=\"radio\" data-aria-controls=\"address-fields\"\n (change)=\"setInternationalAddress($event)\" 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\" name=\"ukAddress\" type=\"radio\" data-aria-controls=\"address-fields\"\n (change)=\"setInternationalAddress($event)\" 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=\"ukRadioChecked\" [formGroup]=\"formGroup\" [isInternational]=\"isInternational\">\n </xuilib-write-address-inputs>\n </div>\n </div>\n\n <xuilib-write-address-inputs *ngIf=\"shouldShowDetailFields() && (addressChosen || !internationalMode)\"\n [formGroup]=\"formGroup\" [isInternational]=\"false\"></xuilib-write-address-inputs>\n\n</div>",
4189
+ 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>",
4172
4190
  styles: [".manual-link{cursor:pointer;text-decoration:underline}.manual-link,:host{display:block}"]
4173
4191
  },] }
4174
4192
  ];
@@ -4177,50 +4195,45 @@ WriteAddressFieldComponent.ctorParameters = () => [
4177
4195
  ];
4178
4196
  WriteAddressFieldComponent.propDecorators = {
4179
4197
  formGroup: [{ type: Input }],
4180
- isExpanded: [{ type: Input }],
4181
4198
  internationalMode: [{ type: Input }],
4182
- internationalModeStart: [{ type: Output }]
4199
+ isInternational: [{ type: Input }],
4200
+ submissionAttempted: [{ type: Input }],
4201
+ startedInternational: [{ type: Input }],
4202
+ postcodeOptionSelected: [{ type: Output }],
4203
+ internationalModeStart: [{ type: Output }],
4204
+ ukAddressOptionSelected: [{ type: Output }]
4183
4205
  };
4184
4206
 
4185
4207
  class WriteAddressInputsComponent {
4186
4208
  constructor() {
4209
+ this.MESSAGE_ENUM = AddressMessageEnum;
4187
4210
  this.isInternational = false;
4188
- this.addressFormGroup = new FormGroup({});
4211
+ this.submissionAttempted = false;
4189
4212
  this.missingPostcode = false;
4213
+ this.errorsPresent = false;
4190
4214
  }
4191
- ngOnInit() {
4192
- this.setAddressFormGroup();
4193
- }
4194
- setAddressFormGroup() {
4195
- if (!this.formGroup.get('address')) {
4196
- this.setFormGroup();
4197
- return;
4215
+ ngOnChanges() {
4216
+ const addressGroup = this.formGroup.get('address');
4217
+ // if there is an issue with the formgroup, ensure error styling is displayed
4218
+ if (addressGroup.valid) {
4219
+ this.errorsPresent = false;
4220
+ }
4221
+ else {
4222
+ this.errorsPresent = true;
4198
4223
  }
4199
- const givenAddress = this.formGroup.get('address').value;
4200
- givenAddress.postCode && givenAddress.postCode !== '' ? this.setFormGroup(givenAddress) : this.setFormGroup();
4201
- }
4202
- setFormGroup(givenAddress) {
4203
- this.addressFormGroup = new FormGroup({
4204
- buildingAndStreet: new FormControl(givenAddress ? givenAddress.addressLine1 : null, Validators.required),
4205
- addressLine2: new FormControl(givenAddress ? givenAddress.addressLine2 : null, null),
4206
- addressLine3: new FormControl(givenAddress ? givenAddress.addressLine3 : null, null),
4207
- townOrCity: new FormControl(givenAddress ? givenAddress.postTown : null, Validators.required),
4208
- county: new FormControl(givenAddress ? givenAddress.county : null, null),
4209
- country: new FormControl(givenAddress ? givenAddress.country : null, null),
4210
- postcode: new FormControl(givenAddress ? givenAddress.postCode : null, null)
4211
- });
4212
4224
  }
4213
4225
  }
4214
4226
  WriteAddressInputsComponent.decorators = [
4215
4227
  { type: Component, args: [{
4216
4228
  selector: 'xuilib-write-address-inputs',
4217
- template: "<ng-container>\n <div class=\"govuk-form-group\" [formGroup]=\"addressFormGroup\">\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=\"building-and-street\">\n Building and Street\n </label>\n <input class=\"govuk-input govuk-!-width-full\" id=\"building-and-street\" name=\"building-and-street\" type=\"text\"\n formControlName=\"buildingAndStreet\">\n </div>\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"address-line-2\">\n Address line 2 (Optional)\n </label>\n <input class=\"govuk-input govuk-!-width-full\" id=\"address-line-2\" name=\"address-line-2\" type=\"text\"\n formControlName=\"addressLine2\">\n </div>\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"address-line-3\">\n Address line 3 (Optional)\n </label>\n <input class=\"govuk-input govuk-!-width-full\" id=\"address-line-3\" name=\"address-line-3\" type=\"text\"\n formControlName=\"addressLine3\">\n </div>\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"town-or-city\">\n Town or City\n </label>\n <input class=\"govuk-input govuk-!-width-two-thirds\" id=\"town-or-city\" name=\"town-or-city\" type=\"text\"\n formControlName=\"townOrCity\">\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 <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 <input class=\"govuk-input govuk-!-width-one-third\" id=\"postcode\" name=\"postcode\" type=\"text\"\n formControlName=\"postcode\">\n </div>\n </div>\n</ng-container>"
4229
+ 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 && !formGroup.get('address').get('postCode').valid\">\n <span class=\"govuk-visually-hidden\">Error:</span>{{MESSAGE_ENUM.NO_POSTCODE_SELECTED}}\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>"
4218
4230
  },] }
4219
4231
  ];
4220
4232
  WriteAddressInputsComponent.ctorParameters = () => [];
4221
4233
  WriteAddressInputsComponent.propDecorators = {
4222
4234
  formGroup: [{ type: Input }],
4223
- isInternational: [{ type: Input }]
4235
+ isInternational: [{ type: Input }],
4236
+ submissionAttempted: [{ type: Input }]
4224
4237
  };
4225
4238
 
4226
4239
  class FeatureToggleDirective {
@@ -4829,7 +4842,7 @@ class HmctsIdentityBarComponent {
4829
4842
  HmctsIdentityBarComponent.decorators = [
4830
4843
  { type: Component, args: [{
4831
4844
  selector: 'xuilib-hmcts-identity-bar',
4832
- 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",
4845
+ 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",
4833
4846
  styles: [""]
4834
4847
  },] }
4835
4848
  ];
@@ -5155,5 +5168,5 @@ function radioGroupValidator() {
5155
5168
  * Generated bundle index. Do not edit.
5156
5169
  */
5157
5170
 
5158
- export { AccessibilityComponent, AddressModel, 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 };
5171
+ 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 };
5159
5172
  //# sourceMappingURL=hmcts-rpx-xui-common-lib.js.map