@hmcts/rpx-xui-common-lib 1.9.0-error-message-change → 1.9.0-error-message-rearrange-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.
- package/bundles/hmcts-rpx-xui-common-lib.umd.js +10 -4
- 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 +8 -2
- package/esm2015/lib/gov-ui/components/gov-uk-date/gov-uk-date.component.js +2 -2
- package/esm2015/lib/models/address-message.enum.js +1 -1
- package/fesm2015/hmcts-rpx-xui-common-lib.js +10 -4
- 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 +3 -0
- 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,9 +5037,15 @@
|
|
|
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;
|
|
5040
5043
|
}
|
|
5041
5044
|
WriteAddressInputsComponent.prototype.ngOnChanges = function () {
|
|
5042
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;
|
|
5043
5049
|
// if there is an issue with the formgroup, ensure error styling is displayed
|
|
5044
5050
|
this.errorsPresent = !addressGroup.valid;
|
|
5045
5051
|
};
|
|
@@ -5048,7 +5054,7 @@
|
|
|
5048
5054
|
WriteAddressInputsComponent.decorators = [
|
|
5049
5055
|
{ type: i0.Component, args: [{
|
|
5050
5056
|
selector: 'xuilib-write-address-inputs',
|
|
5051
|
-
template: "<ng-container>\n <form [formGroup]=\"formGroup\">\n <div class=\"govuk-body\" formGroupName=\"address\"
|
|
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 && streetInvalid}\">\n <label class=\"govuk-label\" for=\"addressLine1\">\n Building and Street\n </label>\n <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && streetInvalid\">\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 && townInvalid}\">\n <label class=\"govuk-label\" for=\"postTown\">\n Town or City\n </label>\n <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && townInvalid\">\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 && countryInvalid}\">\n <label class=\"govuk-label\" for=\"country\">\n Country\n </label>\n <p class=\"govuk-error-message\" *ngIf=\"submissionAttempted && countryInvalid\">\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>"
|
|
5052
5058
|
},] }
|
|
5053
5059
|
];
|
|
5054
5060
|
WriteAddressInputsComponent.ctorParameters = function () { return []; };
|
|
@@ -5307,7 +5313,7 @@
|
|
|
5307
5313
|
GovUkDateComponent.decorators = [
|
|
5308
5314
|
{ type: i0.Component, args: [{
|
|
5309
5315
|
selector: 'xuilib-gov-uk-date',
|
|
5310
|
-
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",
|
|
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' | 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",
|
|
5311
5317
|
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}"]
|
|
5312
5318
|
},] }
|
|
5313
5319
|
];
|