@hmcts/rpx-xui-common-lib 1.9.0-address-inline-errors → 1.9.0-address-error-fix
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.
- package/bundles/hmcts-rpx-xui-common-lib.umd.js +5 -12
- package/bundles/hmcts-rpx-xui-common-lib.umd.js.map +1 -1
- package/bundles/hmcts-rpx-xui-common-lib.umd.min.js +1 -1
- package/bundles/hmcts-rpx-xui-common-lib.umd.min.js.map +1 -1
- package/esm2015/lib/components/write-address/write-address.component.js +3 -3
- package/esm2015/lib/components/write-address-inputs/write-address-inputs.component.js +3 -10
- package/esm2015/lib/gov-ui/components/gov-uk-date/gov-uk-date.component.js +2 -2
- package/fesm2015/hmcts-rpx-xui-common-lib.js +5 -12
- package/fesm2015/hmcts-rpx-xui-common-lib.js.map +1 -1
- package/hmcts-rpx-xui-common-lib.metadata.json +1 -1
- package/lib/components/write-address-inputs/write-address-inputs.component.d.ts +0 -3
- package/package.json +1 -1
|
@@ -5009,8 +5009,8 @@
|
|
|
5009
5009
|
WriteAddressFieldComponent.decorators = [
|
|
5010
5010
|
{ type: i0.Component, args: [{
|
|
5011
5011
|
selector: 'xuilib-write-address-field',
|
|
5012
|
-
template: "<div class=\"govuk-form-group\" [formGroup]=\"addressFormGroup\"
|
|
5013
|
-
styles: [".manual-link{cursor:pointer;text-decoration:underline;
|
|
5012
|
+
template: "<div class=\"govuk-form-group\" [formGroup]=\"addressFormGroup\"\n [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=\"postcodeLookupVisible()\">\n <span class=\"govuk-label\"><strong>Provide address details</strong></span>\n <div class=\"govuk-body postcode-lookup\" id=\"addressLookup\"\n [ngClass]=\"{'govuk-form-group--error': missingPostcode || postcodeErrorPresent(true)}\">\n <label for=\"postcodeInput\">\n <span class=\"govuk-hint\">Enter a UK postcode</span>\n </label>\n <p class=\"govuk-error-message\" *ngIf=\"missingPostcode || postcodeErrorPresent(true)\">\n <span class=\"govuk-visually-hidden\">Error:</span>{{postcodeErrorMessage}}\n </p>\n <div class=\"govuk-body\">\n <input type=\"text\" [ngClass]=\"{'govuk-input--error': missingPostcode}\" id=\"postcodeInput\" name=\"postcode\"\n class=\"govuk-input govuk-!-width-one-third postcodeinput inline-block\" formControlName=\"postcode\">\n <button type=\"button\" class=\"govuk-button find-address\" (click)=\"findAddress()\">Find address</button>\n </div>\n </div>\n\n <div class=\"govuk-body\" *ngIf=\"addressOptions\" id=\"selectAddress\">\n <div class=\"govuk-body\" [ngClass]=\"{'govuk-form-group--error': postcodeErrorPresent(false)}\">\n <label class=\"govuk-label\" for=\"addressList\">\n <span class=\"form-label\">Select an address</span>\n </label>\n <p class=\"govuk-error-message\" *ngIf=\"postcodeErrorPresent(false)\">\n <span class=\"govuk-visually-hidden\">Error:</span>{{selectErrorMessage}}\n </p>\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 </div>\n\n <a class=\"manual-link govuk-link\" *ngIf=\"!shouldShowDetailFields() || (!startedInternational && !addressChosen)\"\n (click)=\"blankAddress()\" href=\"javascript:void(0)\">I can't enter a UK postcode</a>\n </div>\n\n <div id=\"govuk-radios\" 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\"\n data-aria-controls=\"address-fields\" (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\"\n data-aria-controls=\"address-fields\" (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\"\n [isInternational]=\"isInternational\" [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\">\n </xuilib-write-address-inputs>\n\n</div>",
|
|
5013
|
+
styles: [".manual-link{cursor:pointer;display:block;text-decoration:underline;font-size:1.1875rem}.postcode-lookup{margin-bottom:-20px}.find-address{left:1%}:host{display:block}"]
|
|
5014
5014
|
},] }
|
|
5015
5015
|
];
|
|
5016
5016
|
WriteAddressFieldComponent.ctorParameters = function () { return [
|
|
@@ -5037,24 +5037,17 @@
|
|
|
5037
5037
|
this.submissionAttempted = false;
|
|
5038
5038
|
this.missingPostcode = false;
|
|
5039
5039
|
this.errorsPresent = false;
|
|
5040
|
-
this.streetInvalid = false;
|
|
5041
|
-
this.townInvalid = false;
|
|
5042
|
-
this.countryInvalid = false;
|
|
5043
5040
|
}
|
|
5044
5041
|
WriteAddressInputsComponent.prototype.ngOnChanges = function () {
|
|
5045
|
-
var addressGroup = this.formGroup.get('address');
|
|
5046
|
-
this.streetInvalid = !addressGroup.get('addressLine1').valid;
|
|
5047
|
-
this.townInvalid = !addressGroup.get('postTown').valid;
|
|
5048
|
-
this.countryInvalid = !addressGroup.get('country').valid;
|
|
5049
5042
|
// if there is an issue with the formgroup, ensure error styling is displayed
|
|
5050
|
-
this.errorsPresent = !
|
|
5043
|
+
this.errorsPresent = !this.formGroup.get('address').valid;
|
|
5051
5044
|
};
|
|
5052
5045
|
return WriteAddressInputsComponent;
|
|
5053
5046
|
}());
|
|
5054
5047
|
WriteAddressInputsComponent.decorators = [
|
|
5055
5048
|
{ type: i0.Component, args: [{
|
|
5056
5049
|
selector: 'xuilib-write-address-inputs',
|
|
5057
|
-
template: "<ng-container>\n <form [formGroup]=\"formGroup\">\n <div class=\"govuk-body\" formGroupName=\"address\">\n <label class=\"govuk-label govuk-!-font-weight-bold\">\n Enter address details\n </label>\n\n <div class=\"govuk-body\" [ngClass]=\"{'govuk-form-group--error': submissionAttempted &&
|
|
5050
|
+
template: "<ng-container>\n <form [formGroup]=\"formGroup\">\n <div class=\"govuk-body\" formGroupName=\"address\">\n <label class=\"govuk-label govuk-!-font-weight-bold\">\n Enter address details\n </label>\n\n <div class=\"govuk-body\" [ngClass]=\"{'govuk-form-group--error': submissionAttempted && !formGroup.get('address').get('addressLine1').valid}\">\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-body\">\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-body\">\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-body\" [ngClass]=\"{'govuk-form-group--error': submissionAttempted && !formGroup.get('address').get('postTown').valid}\">\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-body\">\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-body\" [ngClass]=\"{'govuk-form-group--error': submissionAttempted && !formGroup.get('address').get('country').valid}\">\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-body\" [ngClass]=\"{'govuk-form-group--error': submissionAttempted && !isInternational && !formGroup.get('address').get('postCode').valid}\">\n <label class=\"govuk-label\" for=\"postCode\">\n Postcode{{this.isInternational ? ' (Optional)' : ''}}\n </label>\n <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && !isInternational && this.formGroup.get('address').get('postCode').hasError('required')\">\n <span class=\"govuk-visually-hidden\">Error:</span>{{MESSAGE_ENUM.NO_POSTCODE_SELECTED}}\n </p>\n <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && !isInternational && this.formGroup.get('address').get('postCode').hasError('invalidPostcode')\">\n <span class=\"govuk-visually-hidden\">Error:</span>{{MESSAGE_ENUM.INVALID_POSTCODE}}\n </p>\n <input class=\"govuk-input govuk-!-width-one-third\" id=\"postCode\" name=\"postCode\" type=\"text\"\n formControlName=\"postCode\">\n </div>\n </div>\n</form>\n</ng-container>"
|
|
5058
5051
|
},] }
|
|
5059
5052
|
];
|
|
5060
5053
|
WriteAddressInputsComponent.ctorParameters = function () { return []; };
|
|
@@ -5313,7 +5306,7 @@
|
|
|
5313
5306
|
GovUkDateComponent.decorators = [
|
|
5314
5307
|
{ type: i0.Component, args: [{
|
|
5315
5308
|
selector: 'xuilib-gov-uk-date',
|
|
5316
|
-
template: "<div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\" [formGroup]=\"formGroup\">\n <div class=\"date-input-container\">\n <xuilib-gov-uk-fieldset\n [config]=\"{\n legend: config.label || 'Date component',\n classes: config.classes || 'govuk-label--m',\n id: config.id,\n hint: config.hint != null ? config.hint : 'For example, 12 11 2007',\n isPageHeading: config.isPageHeading || false}\"\n [errorMessage]=\"errorMessage\">\n <xuilib-gov-uk-error-message\n [config]=\"{id: 'passport'}\"\n *ngIf=\"errorMessage\"\n [errorMessage]=\"errorMessage\">\n </xuilib-gov-uk-error-message>\n <div class=\"govuk-date-input\" [id]=\"config.id+'-date'\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <xuilib-gov-label\n [config]=\"{label: 'Day', name: config.id+'-day', id: config.id+'-day', classes: 'govuk-date-input__label'}\">\n </xuilib-gov-label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n [id]=\"config.id\"\n [name]=\"config.id+'-day'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n [formControlName]=\"config.id+'_day'\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <xuilib-gov-label\n [config]=\"{label: 'Month', name: config.id+'-month', id: config.id+'-month', classes: 'govuk-date-input__label'}\">\n </xuilib-gov-label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n [id]=\"config.id+'-month'\"\n [name]=\"config.id+'-month'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n [formControlName]=\"config.id+'_month'\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <xuilib-gov-label\n [config]=\"{label: 'Year', name: config.id+'-year', id: config.id+'-year', classes: 'govuk-date-input__label'}\">\n </xuilib-gov-label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n [id]=\"config.id+'-year'\"\n [name]=\"config.id+'-year'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n [formControlName]=\"config.id+'_year'\">\n </div>\n </div>\n </div>\n </xuilib-gov-uk-fieldset>\n </div>\n</div>\n",
|
|
5309
|
+
template: "<div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\" [formGroup]=\"formGroup\">\n <div class=\"date-input-container\">\n <xuilib-gov-uk-fieldset\n [config]=\"{\n legend: config.label || 'Date component',\n classes: config.classes || 'govuk-label--m',\n id: config.id,\n hint: config.hint != null ? config.hint : 'For example, 12 11 2007',\n isPageHeading: config.isPageHeading || false}\"\n [errorMessage]=\"errorMessage\">\n <xuilib-gov-uk-error-message\n [config]=\"{id: 'passport'}\"\n *ngIf=\"errorMessage\"\n [errorMessage]=\"errorMessage\">\n </xuilib-gov-uk-error-message>\n <div class=\"govuk-date-input\" [id]=\"config.id+'-date'\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <xuilib-gov-label\n [config]=\"{label: 'Day' | rpxTranslate, name: config.id+'-day', id: config.id+'-day', classes: 'govuk-date-input__label'}\">\n </xuilib-gov-label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n [id]=\"config.id\"\n [name]=\"config.id+'-day'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n [formControlName]=\"config.id+'_day'\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <xuilib-gov-label\n [config]=\"{label: 'Month' | rpxTranslate, name: config.id+'-month', id: config.id+'-month', classes: 'govuk-date-input__label'}\">\n </xuilib-gov-label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n [id]=\"config.id+'-month'\"\n [name]=\"config.id+'-month'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n [formControlName]=\"config.id+'_month'\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <xuilib-gov-label\n [config]=\"{label: 'Year' | rpxTranslate, name: config.id+'-year', id: config.id+'-year', classes: 'govuk-date-input__label'}\">\n </xuilib-gov-label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n [id]=\"config.id+'-year'\"\n [name]=\"config.id+'-year'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n [formControlName]=\"config.id+'_year'\">\n </div>\n </div>\n </div>\n </xuilib-gov-uk-fieldset>\n </div>\n</div>\n",
|
|
5317
5310
|
styles: [".govuk-form-group .date-input-container{margin-bottom:30px}.govuk-form-group .date-input-container .govuk-date-input .govuk-date-input__item .govuk-form-group{margin-bottom:0}"]
|
|
5318
5311
|
},] }
|
|
5319
5312
|
];
|