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

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 +93 -85
  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 +47 -34
  11. package/esm2015/lib/components/write-address-inputs/write-address-inputs.component.js +13 -26
  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 +92 -85
  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
@@ -857,6 +857,37 @@
857
857
  },] }
858
858
  ];
859
859
 
860
+ exports.AddressMessageEnum = void 0;
861
+ (function (AddressMessageEnum) {
862
+ AddressMessageEnum["NO_OPTION_SELECTED"] = "Please select an answer";
863
+ AddressMessageEnum["NO_STREET_SELECTED"] = "Enter building and street";
864
+ AddressMessageEnum["NO_CITY_SELECTED"] = "Enter town or city";
865
+ AddressMessageEnum["NO_COUNTRY_SELECTED"] = "Enter country";
866
+ AddressMessageEnum["NO_POSTCODE_SELECTED"] = "Enter postcode";
867
+ })(exports.AddressMessageEnum || (exports.AddressMessageEnum = {}));
868
+
869
+ var AddressOption = /** @class */ (function () {
870
+ function AddressOption(addressModel, description) {
871
+ if (description === null) {
872
+ this.value = addressModel;
873
+ this.description = this.getDescription();
874
+ }
875
+ else {
876
+ this.description = description;
877
+ }
878
+ }
879
+ AddressOption.prototype.getDescription = function () {
880
+ return this.removeInitialCommaIfPresent("" + (this.value.addressLine1 === undefined ? '' : this.value.addressLine1) + this.prefixWithCommaIfPresent(this.value.addressLine2) + this.prefixWithCommaIfPresent(this.value.addressLine3) + ", " + this.value.postTown);
881
+ };
882
+ AddressOption.prototype.prefixWithCommaIfPresent = function (value) {
883
+ return value ? ", " + value : value;
884
+ };
885
+ AddressOption.prototype.removeInitialCommaIfPresent = function (value) {
886
+ return value.replace(new RegExp('^,', 'gi'), '');
887
+ };
888
+ return AddressOption;
889
+ }());
890
+
860
891
  // tslint:disable:variable-name
861
892
  var AddressModel = /** @class */ (function () {
862
893
  function AddressModel() {
@@ -2372,7 +2403,7 @@
2372
2403
  GenericFilterComponent.decorators = [
2373
2404
  { type: i0.Component, args: [{
2374
2405
  selector: 'xuilib-generic-filter',
2375
- 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",
2406
+ 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",
2376
2407
  changeDetection: i0.ChangeDetectionStrategy.OnPush,
2377
2408
  encapsulation: i0.ViewEncapsulation.None,
2378
2409
  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%}"]
@@ -2708,7 +2739,7 @@
2708
2739
  SelectedCaseConfirmComponent.decorators = [
2709
2740
  { type: i0.Component, args: [{
2710
2741
  selector: 'xuilib-selected-case-confirm',
2711
- 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",
2742
+ 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",
2712
2743
  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%}"]
2713
2744
  },] }
2714
2745
  ];
@@ -3328,7 +3359,7 @@
3328
3359
  ShareCaseComponent.decorators = [
3329
3360
  { type: i0.Component, args: [{
3330
3361
  selector: 'xuilib-share-case',
3331
- 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",
3362
+ 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",
3332
3363
  styles: ["select{width:100%}"]
3333
3364
  },] }
3334
3365
  ];
@@ -3566,7 +3597,7 @@
3566
3597
  CookieBannerComponent.decorators = [
3567
3598
  { type: i0.Component, args: [{
3568
3599
  selector: 'xuilib-cookie-banner',
3569
- 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"
3600
+ 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"
3570
3601
  },] }
3571
3602
  ];
3572
3603
  CookieBannerComponent.ctorParameters = function () { return [
@@ -3729,7 +3760,7 @@
3729
3760
  FindServiceComponent.decorators = [
3730
3761
  { type: i0.Component, args: [{
3731
3762
  selector: 'xuilib-find-service',
3732
- 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",
3763
+ 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",
3733
3764
  styles: ["#add-service{background-color:#ddd}"]
3734
3765
  },] }
3735
3766
  ];
@@ -4817,30 +4848,14 @@
4817
4848
  fnTitle: [{ type: i0.Input }]
4818
4849
  };
4819
4850
 
4820
- var AddressOption = /** @class */ (function () {
4821
- function AddressOption(addressModel, description) {
4822
- if (description === null) {
4823
- this.value = addressModel;
4824
- this.description = this.getDescription();
4825
- }
4826
- else {
4827
- this.description = description;
4828
- }
4829
- }
4830
- AddressOption.prototype.getDescription = function () {
4831
- return this.removeInitialCommaIfPresent("" + (this.value.addressLine1 === undefined ? '' : this.value.addressLine1) + this.prefixWithCommaIfPresent(this.value.addressLine2) + this.prefixWithCommaIfPresent(this.value.addressLine3) + ", " + this.value.postTown);
4832
- };
4833
- AddressOption.prototype.prefixWithCommaIfPresent = function (value) {
4834
- return value ? ", " + value : value;
4835
- };
4836
- AddressOption.prototype.removeInitialCommaIfPresent = function (value) {
4837
- return value.replace(new RegExp('^,', 'gi'), '');
4838
- };
4839
- return AddressOption;
4840
- }());
4841
-
4842
4851
  var WriteAddressFieldComponent = /** @class */ (function () {
4843
4852
  function WriteAddressFieldComponent(addressesService) {
4853
+ this.addressesService = addressesService;
4854
+ this.internationalMode = false;
4855
+ this.submissionAttempted = false;
4856
+ this.postcodeOptionSelected = new i0.EventEmitter();
4857
+ this.internationalModeStart = new i0.EventEmitter();
4858
+ this.ukAddressOptionSelected = new i0.EventEmitter();
4844
4859
  this.addressField = {
4845
4860
  addressLine1: '',
4846
4861
  addressLine2: '',
@@ -4850,39 +4865,33 @@
4850
4865
  country: '',
4851
4866
  county: ''
4852
4867
  };
4853
- this.isExpanded = false;
4854
- this.internationalMode = false;
4855
- this.internationalModeStart = new i0.EventEmitter();
4856
- this.ukRadioChecked = false;
4868
+ this.optionErrorsPresent = false;
4857
4869
  this.addressChosen = false;
4858
- this.addressFormGroup = new forms.FormGroup({});
4859
- this.ukInternationalFormGroup = new forms.FormGroup({});
4860
4870
  this.missingPostcode = false;
4861
- this.addressesService = addressesService;
4871
+ this.optionErrorMessage = exports.AddressMessageEnum.NO_OPTION_SELECTED;
4862
4872
  }
4863
4873
  WriteAddressFieldComponent.prototype.ngOnInit = function () {
4864
4874
  if (!this.formGroup.get('address')) {
4865
4875
  this.formGroup.addControl('address', new forms.FormControl({}));
4866
4876
  }
4867
- this.ukInternationalFormGroup = new forms.FormGroup({
4868
- ukAddress: new forms.FormControl()
4877
+ // set the form group relevant to only the external parent component
4878
+ this.addressFormGroup = new forms.FormGroup({
4879
+ // relevant to international mode
4880
+ ukAddress: new forms.FormControl(this.isInternational !== undefined ? (this.isInternational ? 'no' : 'yes') : null),
4881
+ // relevant to postocode lookup
4882
+ postcode: new forms.FormControl(''),
4883
+ addressList: new forms.FormControl('')
4869
4884
  });
4870
- this.postcode = new forms.FormControl('');
4871
- this.addressFormGroup.addControl('postcode', this.postcode);
4872
- this.addressList = new forms.FormControl('');
4873
- this.addressFormGroup.addControl('address', this.addressList);
4874
- this.ukAddress = new forms.FormControl('');
4875
- this.addressFormGroup.addControl('ukAddress', this.ukAddress);
4876
4885
  };
4877
4886
  WriteAddressFieldComponent.prototype.findAddress = function () {
4878
4887
  var _this = this;
4879
- if (!this.postcode.value) {
4888
+ if (!this.addressFormGroup.get('postcode').value) {
4880
4889
  this.missingPostcode = true;
4881
4890
  }
4882
4891
  else {
4883
4892
  this.missingPostcode = false;
4884
4893
  this.addressField = null;
4885
- var postcode_1 = this.postcode.value;
4894
+ var postcode_1 = this.addressFormGroup.get('postcode').value;
4886
4895
  this.addressOptions = [];
4887
4896
  this.addressesService.getAddressesForPostcode(postcode_1.replace(' ', '').toUpperCase()).subscribe(function (result) {
4888
4897
  result.forEach(function (address) {
@@ -4893,8 +4902,7 @@
4893
4902
  console.log("An error occurred retrieving addresses for postcode " + postcode_1 + ". " + error);
4894
4903
  _this.addressOptions.unshift(new AddressOption(undefined, _this.defaultLabel(_this.addressOptions.length)));
4895
4904
  });
4896
- this.addressList.setValue(undefined);
4897
- // this.refocusElement();
4905
+ this.addressFormGroup.get('addressList').setValue(undefined);
4898
4906
  }
4899
4907
  };
4900
4908
  WriteAddressFieldComponent.prototype.blankAddress = function () {
@@ -4904,9 +4912,6 @@
4904
4912
  }
4905
4913
  };
4906
4914
  WriteAddressFieldComponent.prototype.shouldShowDetailFields = function () {
4907
- if (this.isExpanded) {
4908
- return true;
4909
- }
4910
4915
  if (!this.formGroup.get('address')) {
4911
4916
  return false;
4912
4917
  }
@@ -4922,23 +4927,35 @@
4922
4927
  return hasAddress;
4923
4928
  };
4924
4929
  WriteAddressFieldComponent.prototype.addressSelected = function () {
4925
- this.addressField = this.addressList.value;
4930
+ this.addressField = this.addressFormGroup.get('addressList').value;
4926
4931
  this.addressChosen = true;
4927
4932
  this.setFormValue();
4933
+ this.postcodeOptionSelected.emit();
4928
4934
  };
4929
4935
  WriteAddressFieldComponent.prototype.ngOnChanges = function (changes) {
4930
- var change = changes['addressField'];
4931
- if (change) {
4936
+ var addressChange = changes['addressField'];
4937
+ if (addressChange) {
4932
4938
  this.setFormValue();
4933
4939
  }
4940
+ this.checkIfErrorsNeeded();
4934
4941
  };
4935
- WriteAddressFieldComponent.prototype.setInternationalAddress = function (event) {
4936
- var target = event.target;
4937
- if (target.checked) {
4938
- this.ukRadioChecked = true;
4939
- this.isInternational = target.id === 'no';
4942
+ WriteAddressFieldComponent.prototype.checkIfErrorsNeeded = function () {
4943
+ if (this.submissionAttempted && this.shouldShowDetailFields() && this.internationalMode && !this.addressChosen) {
4944
+ // ensure errors present when submission attmempted on international radio buttons
4945
+ this.optionErrorsPresent = true;
4946
+ }
4947
+ else {
4948
+ this.optionErrorsPresent = false;
4949
+ }
4950
+ if (this.optionErrorsPresent && (this.addressChosen || this.isInternational !== undefined)) {
4951
+ // ensure parent errors not present when the child form group is present
4952
+ this.optionErrorsPresent = false;
4940
4953
  }
4941
4954
  };
4955
+ WriteAddressFieldComponent.prototype.setInternationalAddress = function (isInternational) {
4956
+ this.isInternational = isInternational;
4957
+ this.ukAddressOptionSelected.emit(this.isInternational);
4958
+ };
4942
4959
  WriteAddressFieldComponent.prototype.defaultLabel = function (numberOfAddresses) {
4943
4960
  return numberOfAddresses === 0 ? 'No address found'
4944
4961
  : "" + numberOfAddresses + (numberOfAddresses === 1 ? ' address ' : ' addresses ') + "found";
@@ -4953,7 +4970,7 @@
4953
4970
  WriteAddressFieldComponent.decorators = [
4954
4971
  { type: i0.Component, args: [{
4955
4972
  selector: 'xuilib-write-address-field',
4956
- 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>",
4973
+ 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>",
4957
4974
  styles: [".manual-link{cursor:pointer;text-decoration:underline}.manual-link,:host{display:block}"]
4958
4975
  },] }
4959
4976
  ];
@@ -4962,51 +4979,41 @@
4962
4979
  ]; };
4963
4980
  WriteAddressFieldComponent.propDecorators = {
4964
4981
  formGroup: [{ type: i0.Input }],
4965
- isExpanded: [{ type: i0.Input }],
4966
4982
  internationalMode: [{ type: i0.Input }],
4967
- internationalModeStart: [{ type: i0.Output }]
4983
+ isInternational: [{ type: i0.Input }],
4984
+ submissionAttempted: [{ type: i0.Input }],
4985
+ startedInternational: [{ type: i0.Input }],
4986
+ postcodeOptionSelected: [{ type: i0.Output }],
4987
+ internationalModeStart: [{ type: i0.Output }],
4988
+ ukAddressOptionSelected: [{ type: i0.Output }]
4968
4989
  };
4969
4990
 
4970
4991
  var WriteAddressInputsComponent = /** @class */ (function () {
4971
4992
  function WriteAddressInputsComponent() {
4993
+ this.MESSAGE_ENUM = exports.AddressMessageEnum;
4972
4994
  this.isInternational = false;
4973
- this.addressFormGroup = new forms.FormGroup({});
4995
+ this.submissionAttempted = false;
4974
4996
  this.missingPostcode = false;
4997
+ this.errorsPresent = false;
4975
4998
  }
4976
- WriteAddressInputsComponent.prototype.ngOnInit = function () {
4977
- this.setAddressFormGroup();
4978
- };
4979
- WriteAddressInputsComponent.prototype.setAddressFormGroup = function () {
4980
- if (!this.formGroup.get('address')) {
4981
- this.setFormGroup();
4982
- return;
4983
- }
4984
- var givenAddress = this.formGroup.get('address').value;
4985
- givenAddress.postCode && givenAddress.postCode !== '' ? this.setFormGroup(givenAddress) : this.setFormGroup();
4986
- };
4987
- WriteAddressInputsComponent.prototype.setFormGroup = function (givenAddress) {
4988
- this.addressFormGroup = new forms.FormGroup({
4989
- buildingAndStreet: new forms.FormControl(givenAddress ? givenAddress.addressLine1 : null, forms.Validators.required),
4990
- addressLine2: new forms.FormControl(givenAddress ? givenAddress.addressLine2 : null, null),
4991
- addressLine3: new forms.FormControl(givenAddress ? givenAddress.addressLine3 : null, null),
4992
- townOrCity: new forms.FormControl(givenAddress ? givenAddress.postTown : null, forms.Validators.required),
4993
- county: new forms.FormControl(givenAddress ? givenAddress.county : null, null),
4994
- country: new forms.FormControl(givenAddress ? givenAddress.country : null, null),
4995
- postcode: new forms.FormControl(givenAddress ? givenAddress.postCode : null, null)
4996
- });
4999
+ WriteAddressInputsComponent.prototype.ngOnChanges = function () {
5000
+ var addressGroup = this.formGroup.get('address');
5001
+ // if there is an issue with the formgroup, ensure error styling is displayed
5002
+ this.errorsPresent = !addressGroup.valid;
4997
5003
  };
4998
5004
  return WriteAddressInputsComponent;
4999
5005
  }());
5000
5006
  WriteAddressInputsComponent.decorators = [
5001
5007
  { type: i0.Component, args: [{
5002
5008
  selector: 'xuilib-write-address-inputs',
5003
- 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>"
5009
+ 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>"
5004
5010
  },] }
5005
5011
  ];
5006
5012
  WriteAddressInputsComponent.ctorParameters = function () { return []; };
5007
5013
  WriteAddressInputsComponent.propDecorators = {
5008
5014
  formGroup: [{ type: i0.Input }],
5009
- isInternational: [{ type: i0.Input }]
5015
+ isInternational: [{ type: i0.Input }],
5016
+ submissionAttempted: [{ type: i0.Input }]
5010
5017
  };
5011
5018
 
5012
5019
  var FeatureToggleDirective = /** @class */ (function () {
@@ -5671,7 +5678,7 @@
5671
5678
  HmctsIdentityBarComponent.decorators = [
5672
5679
  { type: i0.Component, args: [{
5673
5680
  selector: 'xuilib-hmcts-identity-bar',
5674
- 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",
5681
+ 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",
5675
5682
  styles: [""]
5676
5683
  },] }
5677
5684
  ];
@@ -6016,6 +6023,7 @@
6016
6023
 
6017
6024
  exports.AccessibilityComponent = AccessibilityComponent;
6018
6025
  exports.AddressModel = AddressModel;
6026
+ exports.AddressOption = AddressOption;
6019
6027
  exports.AddressService = AddressService;
6020
6028
  exports.AnonymousFeatureUser = AnonymousFeatureUser;
6021
6029
  exports.COMMON_COMPONENTS = COMMON_COMPONENTS;