@hmcts/opal-frontend-common 0.0.96 → 0.0.98
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/fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-date-input.mjs +10 -2
- package/fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-select.mjs +10 -2
- package/fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-table.mjs +10 -2
- package/fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-text-area.mjs +10 -2
- package/fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-text-input-prefix-suffix.mjs +10 -2
- package/fesm2022/hmcts-opal-frontend-common-components-moj-moj-date-picker.mjs +10 -2
- package/fesm2022/hmcts-opal-frontend-common-directives-trim-leading-trailing-whitespace.mjs +41 -0
- package/fesm2022/hmcts-opal-frontend-common-guards-can-deactivate.mjs +1 -1
- package/package.json +6 -1
- package/types/hmcts-opal-frontend-common-components-govuk-govuk-date-input-interfaces.d.ts +6 -1
- package/types/hmcts-opal-frontend-common-components-govuk-govuk-date-input.d.ts +8 -1
- package/types/hmcts-opal-frontend-common-components-govuk-govuk-select.d.ts +3 -1
- package/types/hmcts-opal-frontend-common-components-govuk-govuk-table.d.ts +3 -1
- package/types/hmcts-opal-frontend-common-components-govuk-govuk-text-area.d.ts +3 -1
- package/types/hmcts-opal-frontend-common-components-govuk-govuk-text-input-prefix-suffix.d.ts +3 -1
- package/types/hmcts-opal-frontend-common-components-moj-moj-date-picker.d.ts +3 -1
- package/types/hmcts-opal-frontend-common-directives-trim-leading-trailing-whitespace.d.ts +11 -0
- package/types/hmcts-opal-frontend-common-services-date-service.d.ts +2 -2
|
@@ -12,6 +12,8 @@ class GovukDateInputComponent {
|
|
|
12
12
|
errorDay = null;
|
|
13
13
|
errorMonth = null;
|
|
14
14
|
errorYear = null;
|
|
15
|
+
autoComplete = false;
|
|
16
|
+
autoCompleteValue = null;
|
|
15
17
|
dateInputs;
|
|
16
18
|
set group(abstractControl) {
|
|
17
19
|
this._group = abstractControl;
|
|
@@ -30,11 +32,11 @@ class GovukDateInputComponent {
|
|
|
30
32
|
return ids.length ? ids.join(' ') : null;
|
|
31
33
|
}
|
|
32
34
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukDateInputComponent, isStandalone: true, selector: "opal-lib-govuk-date-input", inputs: { fieldSetId: "fieldSetId", legendText: "legendText", legendHint: "legendHint", legendClasses: "legendClasses", errorDay: "errorDay", errorMonth: "errorMonth", errorYear: "errorYear", dateInputs: "dateInputs", group: "group" }, ngImport: i0, template: "<div\n class=\"govuk-form-group\"\n [formGroup]=\"getGroup\"\n [class.govuk-form-group--error]=\"!!errorDay || !!errorMonth || !!errorYear\"\n>\n <fieldset class=\"govuk-fieldset\" role=\"group\" [id]=\"fieldSetId\" [attr.aria-describedby]=\"describedBy\">\n <legend class=\"govuk-fieldset__legend {{ legendClasses }}\">\n {{ legendText }}\n </legend>\n @if (legendHint) {\n <div [id]=\"fieldSetId ? fieldSetId + '-hint' : ''\" class=\"govuk-hint\">\n {{ legendHint }}\n </div>\n }\n @if (errorDay || errorMonth || errorYear) {\n <p id=\"{{ this.fieldSetId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errorDay || errorMonth || errorYear }}\n </p>\n }\n <div class=\"govuk-date-input\" [id]=\"fieldSetId + '-date-input'\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.day.inputId\">\n {{ dateInputs.day.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.day.inputClasses }}\"\n [class.govuk-input--error]=\"errorDay && errorDay !== null\"\n [id]=\"dateInputs.day.inputId\"\n [name]=\"dateInputs.day.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ dateInputs.day.inputId }}\"\n />\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.month.inputId\">\n {{ dateInputs.month.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.month.inputClasses }}\"\n [class.govuk-input--error]=\"errorMonth && errorMonth !== null\"\n [id]=\"dateInputs.month.inputId\"\n [name]=\"dateInputs.month.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ dateInputs.month.inputId }}\"\n />\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.year.inputId\">\n {{ dateInputs.year.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.year.inputClasses }}\"\n [class.govuk-input--error]=\"errorYear && errorYear !== null\"\n [id]=\"dateInputs.year.inputId\"\n [name]=\"dateInputs.year.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ dateInputs.year.inputId }}\"\n />\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukDateInputComponent, isStandalone: true, selector: "opal-lib-govuk-date-input", inputs: { fieldSetId: "fieldSetId", legendText: "legendText", legendHint: "legendHint", legendClasses: "legendClasses", errorDay: "errorDay", errorMonth: "errorMonth", errorYear: "errorYear", autoComplete: "autoComplete", autoCompleteValue: "autoCompleteValue", dateInputs: "dateInputs", group: "group" }, ngImport: i0, template: "<div\n class=\"govuk-form-group\"\n [formGroup]=\"getGroup\"\n [class.govuk-form-group--error]=\"!!errorDay || !!errorMonth || !!errorYear\"\n>\n <fieldset class=\"govuk-fieldset\" role=\"group\" [id]=\"fieldSetId\" [attr.aria-describedby]=\"describedBy\">\n <legend class=\"govuk-fieldset__legend {{ legendClasses }}\">\n {{ legendText }}\n </legend>\n @if (legendHint) {\n <div [id]=\"fieldSetId ? fieldSetId + '-hint' : ''\" class=\"govuk-hint\">\n {{ legendHint }}\n </div>\n }\n @if (errorDay || errorMonth || errorYear) {\n <p id=\"{{ this.fieldSetId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errorDay || errorMonth || errorYear }}\n </p>\n }\n <div class=\"govuk-date-input\" [id]=\"fieldSetId + '-date-input'\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.day.inputId\">\n {{ dateInputs.day.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.day.inputClasses }}\"\n [class.govuk-input--error]=\"errorDay && errorDay !== null\"\n [id]=\"dateInputs.day.inputId\"\n [name]=\"dateInputs.day.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.autocomplete]=\"autoCompleteValue?.day ? autoCompleteValue?.day : autoComplete ? 'on' : 'off'\"\n formControlName=\"{{ dateInputs.day.inputId }}\"\n />\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.month.inputId\">\n {{ dateInputs.month.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.month.inputClasses }}\"\n [class.govuk-input--error]=\"errorMonth && errorMonth !== null\"\n [id]=\"dateInputs.month.inputId\"\n [name]=\"dateInputs.month.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.autocomplete]=\"autoCompleteValue?.month ? autoCompleteValue?.month : autoComplete ? 'on' : 'off'\"\n formControlName=\"{{ dateInputs.month.inputId }}\"\n />\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.year.inputId\">\n {{ dateInputs.year.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.year.inputClasses }}\"\n [class.govuk-input--error]=\"errorYear && errorYear !== null\"\n [id]=\"dateInputs.year.inputId\"\n [name]=\"dateInputs.year.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.autocomplete]=\"autoCompleteValue?.year ? autoCompleteValue?.year : autoComplete ? 'on' : 'off'\"\n formControlName=\"{{ dateInputs.year.inputId }}\"\n />\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34
36
|
}
|
|
35
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukDateInputComponent, decorators: [{
|
|
36
38
|
type: Component,
|
|
37
|
-
args: [{ selector: 'opal-lib-govuk-date-input', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"govuk-form-group\"\n [formGroup]=\"getGroup\"\n [class.govuk-form-group--error]=\"!!errorDay || !!errorMonth || !!errorYear\"\n>\n <fieldset class=\"govuk-fieldset\" role=\"group\" [id]=\"fieldSetId\" [attr.aria-describedby]=\"describedBy\">\n <legend class=\"govuk-fieldset__legend {{ legendClasses }}\">\n {{ legendText }}\n </legend>\n @if (legendHint) {\n <div [id]=\"fieldSetId ? fieldSetId + '-hint' : ''\" class=\"govuk-hint\">\n {{ legendHint }}\n </div>\n }\n @if (errorDay || errorMonth || errorYear) {\n <p id=\"{{ this.fieldSetId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errorDay || errorMonth || errorYear }}\n </p>\n }\n <div class=\"govuk-date-input\" [id]=\"fieldSetId + '-date-input'\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.day.inputId\">\n {{ dateInputs.day.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.day.inputClasses }}\"\n [class.govuk-input--error]=\"errorDay && errorDay !== null\"\n [id]=\"dateInputs.day.inputId\"\n [name]=\"dateInputs.day.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ dateInputs.day.inputId }}\"\n />\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.month.inputId\">\n {{ dateInputs.month.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.month.inputClasses }}\"\n [class.govuk-input--error]=\"errorMonth && errorMonth !== null\"\n [id]=\"dateInputs.month.inputId\"\n [name]=\"dateInputs.month.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ dateInputs.month.inputId }}\"\n />\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.year.inputId\">\n {{ dateInputs.year.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.year.inputClasses }}\"\n [class.govuk-input--error]=\"errorYear && errorYear !== null\"\n [id]=\"dateInputs.year.inputId\"\n [name]=\"dateInputs.year.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ dateInputs.year.inputId }}\"\n />\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n" }]
|
|
39
|
+
args: [{ selector: 'opal-lib-govuk-date-input', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"govuk-form-group\"\n [formGroup]=\"getGroup\"\n [class.govuk-form-group--error]=\"!!errorDay || !!errorMonth || !!errorYear\"\n>\n <fieldset class=\"govuk-fieldset\" role=\"group\" [id]=\"fieldSetId\" [attr.aria-describedby]=\"describedBy\">\n <legend class=\"govuk-fieldset__legend {{ legendClasses }}\">\n {{ legendText }}\n </legend>\n @if (legendHint) {\n <div [id]=\"fieldSetId ? fieldSetId + '-hint' : ''\" class=\"govuk-hint\">\n {{ legendHint }}\n </div>\n }\n @if (errorDay || errorMonth || errorYear) {\n <p id=\"{{ this.fieldSetId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errorDay || errorMonth || errorYear }}\n </p>\n }\n <div class=\"govuk-date-input\" [id]=\"fieldSetId + '-date-input'\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.day.inputId\">\n {{ dateInputs.day.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.day.inputClasses }}\"\n [class.govuk-input--error]=\"errorDay && errorDay !== null\"\n [id]=\"dateInputs.day.inputId\"\n [name]=\"dateInputs.day.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.autocomplete]=\"autoCompleteValue?.day ? autoCompleteValue?.day : autoComplete ? 'on' : 'off'\"\n formControlName=\"{{ dateInputs.day.inputId }}\"\n />\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.month.inputId\">\n {{ dateInputs.month.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.month.inputClasses }}\"\n [class.govuk-input--error]=\"errorMonth && errorMonth !== null\"\n [id]=\"dateInputs.month.inputId\"\n [name]=\"dateInputs.month.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.autocomplete]=\"autoCompleteValue?.month ? autoCompleteValue?.month : autoComplete ? 'on' : 'off'\"\n formControlName=\"{{ dateInputs.month.inputId }}\"\n />\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" [for]=\"dateInputs.year.inputId\">\n {{ dateInputs.year.inputLabel }}\n </label>\n <input\n class=\"govuk-input govuk-date-input__input {{ dateInputs.year.inputClasses }}\"\n [class.govuk-input--error]=\"errorYear && errorYear !== null\"\n [id]=\"dateInputs.year.inputId\"\n [name]=\"dateInputs.year.inputName\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.autocomplete]=\"autoCompleteValue?.year ? autoCompleteValue?.year : autoComplete ? 'on' : 'off'\"\n formControlName=\"{{ dateInputs.year.inputId }}\"\n />\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n" }]
|
|
38
40
|
}], propDecorators: { fieldSetId: [{
|
|
39
41
|
type: Input,
|
|
40
42
|
args: [{ required: true }]
|
|
@@ -56,6 +58,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
56
58
|
}], errorYear: [{
|
|
57
59
|
type: Input,
|
|
58
60
|
args: [{ required: false }]
|
|
61
|
+
}], autoComplete: [{
|
|
62
|
+
type: Input,
|
|
63
|
+
args: [{ required: false }]
|
|
64
|
+
}], autoCompleteValue: [{
|
|
65
|
+
type: Input,
|
|
66
|
+
args: [{ required: false }]
|
|
59
67
|
}], dateInputs: [{
|
|
60
68
|
type: Input,
|
|
61
69
|
args: [{ required: true }]
|
|
@@ -12,6 +12,8 @@ class GovukSelectComponent {
|
|
|
12
12
|
selectClasses;
|
|
13
13
|
selectHint;
|
|
14
14
|
errors = null;
|
|
15
|
+
autoComplete = false;
|
|
16
|
+
autoCompleteValue = null;
|
|
15
17
|
options;
|
|
16
18
|
set control(abstractControl) {
|
|
17
19
|
// Form controls are passed in as abstract controls, we need to re-cast it.
|
|
@@ -31,11 +33,11 @@ class GovukSelectComponent {
|
|
|
31
33
|
return ids.length ? ids.join(' ') : null;
|
|
32
34
|
}
|
|
33
35
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukSelectComponent, isStandalone: true, selector: "opal-lib-govuk-select", inputs: { labelText: "labelText", labelClasses: "labelClasses", selectId: "selectId", selectName: "selectName", selectClasses: "selectClasses", selectHint: "selectHint", errors: "errors", options: "options", control: "control" }, ngImport: i0, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"selectId\"> {{ labelText }} </label>\n\n @if (selectHint) {\n <div [id]=\"selectId ? selectId + '-hint' : ''\" class=\"govuk-hint\">\n {{ selectHint }}\n </div>\n }\n\n @if (errors) {\n <p id=\"{{ this.selectId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n <select\n class=\"govuk-select {{ selectClasses }}\"\n [id]=\"selectId\"\n [name]=\"selectName\"\n [attr.aria-describedby]=\"describedBy\"\n [formControl]=\"getControl\"\n >\n <option value=\"\" selected></option>\n @for (option of options; track option.name) {\n <option [value]=\"option.value\">\n {{ option.name }}\n </option>\n }\n </select>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukSelectComponent, isStandalone: true, selector: "opal-lib-govuk-select", inputs: { labelText: "labelText", labelClasses: "labelClasses", selectId: "selectId", selectName: "selectName", selectClasses: "selectClasses", selectHint: "selectHint", errors: "errors", autoComplete: "autoComplete", autoCompleteValue: "autoCompleteValue", options: "options", control: "control" }, ngImport: i0, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"selectId\"> {{ labelText }} </label>\n\n @if (selectHint) {\n <div [id]=\"selectId ? selectId + '-hint' : ''\" class=\"govuk-hint\">\n {{ selectHint }}\n </div>\n }\n\n @if (errors) {\n <p id=\"{{ this.selectId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n <select\n class=\"govuk-select {{ selectClasses }}\"\n [id]=\"selectId\"\n [name]=\"selectName\"\n [attr.autocomplete]=\"autoCompleteValue ? autoCompleteValue : autoComplete ? 'on' : 'off'\"\n [attr.aria-describedby]=\"describedBy\"\n [formControl]=\"getControl\"\n >\n <option value=\"\" selected></option>\n @for (option of options; track option.name) {\n <option [value]=\"option.value\">\n {{ option.name }}\n </option>\n }\n </select>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
37
|
}
|
|
36
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukSelectComponent, decorators: [{
|
|
37
39
|
type: Component,
|
|
38
|
-
args: [{ selector: 'opal-lib-govuk-select', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"selectId\"> {{ labelText }} </label>\n\n @if (selectHint) {\n <div [id]=\"selectId ? selectId + '-hint' : ''\" class=\"govuk-hint\">\n {{ selectHint }}\n </div>\n }\n\n @if (errors) {\n <p id=\"{{ this.selectId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n <select\n class=\"govuk-select {{ selectClasses }}\"\n [id]=\"selectId\"\n [name]=\"selectName\"\n [attr.aria-describedby]=\"describedBy\"\n [formControl]=\"getControl\"\n >\n <option value=\"\" selected></option>\n @for (option of options; track option.name) {\n <option [value]=\"option.value\">\n {{ option.name }}\n </option>\n }\n </select>\n</div>\n" }]
|
|
40
|
+
args: [{ selector: 'opal-lib-govuk-select', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"selectId\"> {{ labelText }} </label>\n\n @if (selectHint) {\n <div [id]=\"selectId ? selectId + '-hint' : ''\" class=\"govuk-hint\">\n {{ selectHint }}\n </div>\n }\n\n @if (errors) {\n <p id=\"{{ this.selectId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n <select\n class=\"govuk-select {{ selectClasses }}\"\n [id]=\"selectId\"\n [name]=\"selectName\"\n [attr.autocomplete]=\"autoCompleteValue ? autoCompleteValue : autoComplete ? 'on' : 'off'\"\n [attr.aria-describedby]=\"describedBy\"\n [formControl]=\"getControl\"\n >\n <option value=\"\" selected></option>\n @for (option of options; track option.name) {\n <option [value]=\"option.value\">\n {{ option.name }}\n </option>\n }\n </select>\n</div>\n" }]
|
|
39
41
|
}], propDecorators: { labelText: [{
|
|
40
42
|
type: Input,
|
|
41
43
|
args: [{ required: true }]
|
|
@@ -57,6 +59,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
57
59
|
}], errors: [{
|
|
58
60
|
type: Input,
|
|
59
61
|
args: [{ required: false }]
|
|
62
|
+
}], autoComplete: [{
|
|
63
|
+
type: Input,
|
|
64
|
+
args: [{ required: false }]
|
|
65
|
+
}], autoCompleteValue: [{
|
|
66
|
+
type: Input,
|
|
67
|
+
args: [{ required: false }]
|
|
60
68
|
}], options: [{
|
|
61
69
|
type: Input,
|
|
62
70
|
args: [{ required: true }]
|
|
@@ -64,15 +64,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
64
64
|
|
|
65
65
|
class GovukTableComponent {
|
|
66
66
|
tableClasses;
|
|
67
|
+
caption = null;
|
|
68
|
+
captionClasses;
|
|
67
69
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
68
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
70
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukTableComponent, isStandalone: true, selector: "opal-lib-govuk-table", inputs: { tableClasses: "tableClasses", caption: "caption", captionClasses: "captionClasses" }, ngImport: i0, template: "<table class=\"govuk-table {{ tableClasses }}\">\n @if (caption) {\n <caption class=\"govuk-table__caption {{ captionClasses }}\">\n {{\n caption\n }}\n </caption>\n }\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <ng-content select=\"[head]\"></ng-content>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <ng-content select=\"[body]\"></ng-content>\n <ng-content select=\"[results]\"></ng-content>\n </tbody>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
69
71
|
}
|
|
70
72
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukTableComponent, decorators: [{
|
|
71
73
|
type: Component,
|
|
72
|
-
args: [{ selector: 'opal-lib-govuk-table', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"govuk-table {{ tableClasses }}\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <ng-content select=\"[head]\"></ng-content>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <ng-content select=\"[body]\"></ng-content>\n <ng-content select=\"[results]\"></ng-content>\n </tbody>\n</table>\n" }]
|
|
74
|
+
args: [{ selector: 'opal-lib-govuk-table', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"govuk-table {{ tableClasses }}\">\n @if (caption) {\n <caption class=\"govuk-table__caption {{ captionClasses }}\">\n {{\n caption\n }}\n </caption>\n }\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <ng-content select=\"[head]\"></ng-content>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <ng-content select=\"[body]\"></ng-content>\n <ng-content select=\"[results]\"></ng-content>\n </tbody>\n</table>\n" }]
|
|
73
75
|
}], propDecorators: { tableClasses: [{
|
|
74
76
|
type: Input,
|
|
75
77
|
args: [{ required: false }]
|
|
78
|
+
}], caption: [{
|
|
79
|
+
type: Input,
|
|
80
|
+
args: [{ required: false }]
|
|
81
|
+
}], captionClasses: [{
|
|
82
|
+
type: Input,
|
|
83
|
+
args: [{ required: false }]
|
|
76
84
|
}] } });
|
|
77
85
|
|
|
78
86
|
/**
|
|
@@ -19,6 +19,8 @@ class GovukTextAreaComponent {
|
|
|
19
19
|
hintText;
|
|
20
20
|
inputMode = 'text';
|
|
21
21
|
errors = null;
|
|
22
|
+
autoComplete = false;
|
|
23
|
+
autoCompleteValue = null;
|
|
22
24
|
rows = 5;
|
|
23
25
|
characterCountEnabled = false;
|
|
24
26
|
maxCharacterLimit = 500;
|
|
@@ -46,11 +48,11 @@ class GovukTextAreaComponent {
|
|
|
46
48
|
return ids.length ? ids.join(' ') : null;
|
|
47
49
|
}
|
|
48
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
49
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukTextAreaComponent, isStandalone: true, selector: "opal-lib-govuk-text-area", inputs: { labelText: "labelText", labelClasses: "labelClasses", inputId: "inputId", inputName: "inputName", inputClasses: "inputClasses", hintText: "hintText", inputMode: "inputMode", errors: "errors", rows: "rows", characterCountEnabled: "characterCountEnabled", maxCharacterLimit: "maxCharacterLimit", control: "control" }, ngImport: i0, template: "<div class=\"govuk-form-group govuk-character-count\" [class.govuk-form-group--error]=\"!!errors\">\n <div class=\"govuk-label-wrapper\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\">\n {{ labelText }}\n </label>\n </div>\n @if (hintText) {\n <div id=\"{{ inputId }}-hint\" class=\"govuk-hint\">\n {{ hintText }}\n </div>\n }\n\n @if (errors) {\n <p id=\"{{ this.inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n\n <textarea\n class=\"govuk-textarea {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [rows]=\"rows\"\n [formControl]=\"getControl\"\n [inputMode]=\"inputMode\"\n [maxlength]=\"maxCharacterLimit\"\n [attr.aria-describedby]=\"describedBy\"\n ></textarea>\n @if (characterCountEnabled) {\n <div [id]=\"inputId + '-with-hint-info'\" class=\"govuk-hint govuk-character-count__message govuk-visually-hidden\">\n You can enter up to {{ maxCharacterLimit }} characters\n </div>\n <div class=\"govuk-hint govuk-character-count__message govuk-character-count__status\" aria-hidden=\"true\">\n You have {{ remainingCharacterCount() }} character{{ remainingCharacterCount() === 1 ? '' : 's' }} remaining\n </div>\n <div class=\"govuk-character-count__sr-status govuk-visually-hidden\" aria-live=\"polite\">\n You have {{ remainingCharacterCount() }} character{{ remainingCharacterCount() === 1 ? '' : 's' }} remaining\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukTextAreaComponent, isStandalone: true, selector: "opal-lib-govuk-text-area", inputs: { labelText: "labelText", labelClasses: "labelClasses", inputId: "inputId", inputName: "inputName", inputClasses: "inputClasses", hintText: "hintText", inputMode: "inputMode", errors: "errors", autoComplete: "autoComplete", autoCompleteValue: "autoCompleteValue", rows: "rows", characterCountEnabled: "characterCountEnabled", maxCharacterLimit: "maxCharacterLimit", control: "control" }, ngImport: i0, template: "<div class=\"govuk-form-group govuk-character-count\" [class.govuk-form-group--error]=\"!!errors\">\n <div class=\"govuk-label-wrapper\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\">\n {{ labelText }}\n </label>\n </div>\n @if (hintText) {\n <div id=\"{{ inputId }}-hint\" class=\"govuk-hint\">\n {{ hintText }}\n </div>\n }\n\n @if (errors) {\n <p id=\"{{ this.inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n\n <textarea\n class=\"govuk-textarea {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [rows]=\"rows\"\n [formControl]=\"getControl\"\n [inputMode]=\"inputMode\"\n [attr.autocomplete]=\"autoCompleteValue ? autoCompleteValue : autoComplete ? 'on' : 'off'\"\n [maxlength]=\"maxCharacterLimit\"\n [attr.aria-describedby]=\"describedBy\"\n ></textarea>\n @if (characterCountEnabled) {\n <div [id]=\"inputId + '-with-hint-info'\" class=\"govuk-hint govuk-character-count__message govuk-visually-hidden\">\n You can enter up to {{ maxCharacterLimit }} characters\n </div>\n <div class=\"govuk-hint govuk-character-count__message govuk-character-count__status\" aria-hidden=\"true\">\n You have {{ remainingCharacterCount() }} character{{ remainingCharacterCount() === 1 ? '' : 's' }} remaining\n </div>\n <div class=\"govuk-character-count__sr-status govuk-visually-hidden\" aria-live=\"polite\">\n You have {{ remainingCharacterCount() }} character{{ remainingCharacterCount() === 1 ? '' : 's' }} remaining\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
50
52
|
}
|
|
51
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukTextAreaComponent, decorators: [{
|
|
52
54
|
type: Component,
|
|
53
|
-
args: [{ selector: 'opal-lib-govuk-text-area', imports: [ReactiveFormsModule], template: "<div class=\"govuk-form-group govuk-character-count\" [class.govuk-form-group--error]=\"!!errors\">\n <div class=\"govuk-label-wrapper\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\">\n {{ labelText }}\n </label>\n </div>\n @if (hintText) {\n <div id=\"{{ inputId }}-hint\" class=\"govuk-hint\">\n {{ hintText }}\n </div>\n }\n\n @if (errors) {\n <p id=\"{{ this.inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n\n <textarea\n class=\"govuk-textarea {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [rows]=\"rows\"\n [formControl]=\"getControl\"\n [inputMode]=\"inputMode\"\n [maxlength]=\"maxCharacterLimit\"\n [attr.aria-describedby]=\"describedBy\"\n ></textarea>\n @if (characterCountEnabled) {\n <div [id]=\"inputId + '-with-hint-info'\" class=\"govuk-hint govuk-character-count__message govuk-visually-hidden\">\n You can enter up to {{ maxCharacterLimit }} characters\n </div>\n <div class=\"govuk-hint govuk-character-count__message govuk-character-count__status\" aria-hidden=\"true\">\n You have {{ remainingCharacterCount() }} character{{ remainingCharacterCount() === 1 ? '' : 's' }} remaining\n </div>\n <div class=\"govuk-character-count__sr-status govuk-visually-hidden\" aria-live=\"polite\">\n You have {{ remainingCharacterCount() }} character{{ remainingCharacterCount() === 1 ? '' : 's' }} remaining\n </div>\n }\n</div>\n" }]
|
|
55
|
+
args: [{ selector: 'opal-lib-govuk-text-area', imports: [ReactiveFormsModule], template: "<div class=\"govuk-form-group govuk-character-count\" [class.govuk-form-group--error]=\"!!errors\">\n <div class=\"govuk-label-wrapper\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\">\n {{ labelText }}\n </label>\n </div>\n @if (hintText) {\n <div id=\"{{ inputId }}-hint\" class=\"govuk-hint\">\n {{ hintText }}\n </div>\n }\n\n @if (errors) {\n <p id=\"{{ this.inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n\n <textarea\n class=\"govuk-textarea {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [rows]=\"rows\"\n [formControl]=\"getControl\"\n [inputMode]=\"inputMode\"\n [attr.autocomplete]=\"autoCompleteValue ? autoCompleteValue : autoComplete ? 'on' : 'off'\"\n [maxlength]=\"maxCharacterLimit\"\n [attr.aria-describedby]=\"describedBy\"\n ></textarea>\n @if (characterCountEnabled) {\n <div [id]=\"inputId + '-with-hint-info'\" class=\"govuk-hint govuk-character-count__message govuk-visually-hidden\">\n You can enter up to {{ maxCharacterLimit }} characters\n </div>\n <div class=\"govuk-hint govuk-character-count__message govuk-character-count__status\" aria-hidden=\"true\">\n You have {{ remainingCharacterCount() }} character{{ remainingCharacterCount() === 1 ? '' : 's' }} remaining\n </div>\n <div class=\"govuk-character-count__sr-status govuk-visually-hidden\" aria-live=\"polite\">\n You have {{ remainingCharacterCount() }} character{{ remainingCharacterCount() === 1 ? '' : 's' }} remaining\n </div>\n }\n</div>\n" }]
|
|
54
56
|
}], propDecorators: { labelText: [{
|
|
55
57
|
type: Input,
|
|
56
58
|
args: [{ required: true }]
|
|
@@ -75,6 +77,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
75
77
|
}], errors: [{
|
|
76
78
|
type: Input,
|
|
77
79
|
args: [{ required: false }]
|
|
80
|
+
}], autoComplete: [{
|
|
81
|
+
type: Input,
|
|
82
|
+
args: [{ required: false }]
|
|
83
|
+
}], autoCompleteValue: [{
|
|
84
|
+
type: Input,
|
|
85
|
+
args: [{ required: false }]
|
|
78
86
|
}], rows: [{
|
|
79
87
|
type: Input,
|
|
80
88
|
args: [{ required: false }]
|
package/fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-text-input-prefix-suffix.mjs
CHANGED
|
@@ -11,6 +11,8 @@ class GovukTextInputPrefixSuffixComponent {
|
|
|
11
11
|
inputName;
|
|
12
12
|
inputClasses;
|
|
13
13
|
errors = null;
|
|
14
|
+
autoComplete = false;
|
|
15
|
+
autoCompleteValue = null;
|
|
14
16
|
prefixText;
|
|
15
17
|
suffixText;
|
|
16
18
|
forceTwoDecimalPoints;
|
|
@@ -43,11 +45,11 @@ class GovukTextInputPrefixSuffixComponent {
|
|
|
43
45
|
return null;
|
|
44
46
|
}
|
|
45
47
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukTextInputPrefixSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukTextInputPrefixSuffixComponent, isStandalone: true, selector: "opal-lib-govuk-text-input-prefix-suffix", inputs: { labelText: "labelText", labelClasses: "labelClasses", inputId: "inputId", inputName: "inputName", inputClasses: "inputClasses", errors: "errors", prefixText: "prefixText", suffixText: "suffixText", forceTwoDecimalPoints: "forceTwoDecimalPoints", control: "control" }, ngImport: i0, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\"> {{ labelText }} </label>\n @if (errors) {\n <p id=\"{{ this.inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n <div class=\"govuk-input__wrapper\">\n @if (prefixText) {\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">{{ prefixText }}</div>\n }\n <input\n class=\"govuk-input {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [formControl]=\"getControl\"\n [attr.aria-describedby]=\"describedBy\"\n (blur)=\"forceTwoDecimalPoints && onBlurFormatToTwoDecimalPlaces()\"\n />\n @if (suffixText) {\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">{{ suffixText }}</div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
48
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GovukTextInputPrefixSuffixComponent, isStandalone: true, selector: "opal-lib-govuk-text-input-prefix-suffix", inputs: { labelText: "labelText", labelClasses: "labelClasses", inputId: "inputId", inputName: "inputName", inputClasses: "inputClasses", errors: "errors", autoComplete: "autoComplete", autoCompleteValue: "autoCompleteValue", prefixText: "prefixText", suffixText: "suffixText", forceTwoDecimalPoints: "forceTwoDecimalPoints", control: "control" }, ngImport: i0, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\"> {{ labelText }} </label>\n @if (errors) {\n <p id=\"{{ this.inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n <div class=\"govuk-input__wrapper\">\n @if (prefixText) {\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">{{ prefixText }}</div>\n }\n <input\n class=\"govuk-input {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [attr.autocomplete]=\"autoCompleteValue ? autoCompleteValue : autoComplete ? 'on' : 'off'\"\n [formControl]=\"getControl\"\n [attr.aria-describedby]=\"describedBy\"\n (blur)=\"forceTwoDecimalPoints && onBlurFormatToTwoDecimalPlaces()\"\n />\n @if (suffixText) {\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">{{ suffixText }}</div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
47
49
|
}
|
|
48
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GovukTextInputPrefixSuffixComponent, decorators: [{
|
|
49
51
|
type: Component,
|
|
50
|
-
args: [{ selector: 'opal-lib-govuk-text-input-prefix-suffix', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\"> {{ labelText }} </label>\n @if (errors) {\n <p id=\"{{ this.inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n <div class=\"govuk-input__wrapper\">\n @if (prefixText) {\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">{{ prefixText }}</div>\n }\n <input\n class=\"govuk-input {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [formControl]=\"getControl\"\n [attr.aria-describedby]=\"describedBy\"\n (blur)=\"forceTwoDecimalPoints && onBlurFormatToTwoDecimalPlaces()\"\n />\n @if (suffixText) {\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">{{ suffixText }}</div>\n }\n </div>\n</div>\n" }]
|
|
52
|
+
args: [{ selector: 'opal-lib-govuk-text-input-prefix-suffix', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\"> {{ labelText }} </label>\n @if (errors) {\n <p id=\"{{ this.inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n <div class=\"govuk-input__wrapper\">\n @if (prefixText) {\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">{{ prefixText }}</div>\n }\n <input\n class=\"govuk-input {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [attr.autocomplete]=\"autoCompleteValue ? autoCompleteValue : autoComplete ? 'on' : 'off'\"\n [formControl]=\"getControl\"\n [attr.aria-describedby]=\"describedBy\"\n (blur)=\"forceTwoDecimalPoints && onBlurFormatToTwoDecimalPlaces()\"\n />\n @if (suffixText) {\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">{{ suffixText }}</div>\n }\n </div>\n</div>\n" }]
|
|
51
53
|
}], propDecorators: { labelText: [{
|
|
52
54
|
type: Input,
|
|
53
55
|
args: [{ required: true }]
|
|
@@ -66,6 +68,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
66
68
|
}], errors: [{
|
|
67
69
|
type: Input,
|
|
68
70
|
args: [{ required: false }]
|
|
71
|
+
}], autoComplete: [{
|
|
72
|
+
type: Input,
|
|
73
|
+
args: [{ required: false }]
|
|
74
|
+
}], autoCompleteValue: [{
|
|
75
|
+
type: Input,
|
|
76
|
+
args: [{ required: false }]
|
|
69
77
|
}], prefixText: [{
|
|
70
78
|
type: Input,
|
|
71
79
|
args: [{ required: false }]
|
|
@@ -22,6 +22,8 @@ class MojDatePickerComponent {
|
|
|
22
22
|
disabledDates;
|
|
23
23
|
disabledDays;
|
|
24
24
|
errors = null;
|
|
25
|
+
autoComplete = false;
|
|
26
|
+
autoCompleteValue = null;
|
|
25
27
|
dateChange = new EventEmitter();
|
|
26
28
|
set control(abstractControl) {
|
|
27
29
|
// Form controls are passed in as abstract controls, we need to re-cast it.
|
|
@@ -105,11 +107,11 @@ class MojDatePickerComponent {
|
|
|
105
107
|
this.nextRenderRef.destroy();
|
|
106
108
|
}
|
|
107
109
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MojDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: MojDatePickerComponent, isStandalone: true, selector: "opal-lib-moj-date-picker", inputs: { labelText: "labelText", labelClasses: "labelClasses", hintText: "hintText", inputId: "inputId", inputName: "inputName", inputClasses: "inputClasses", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", errors: "errors", control: "control" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div\n class=\"moj-datepicker\"\n data-module=\"moj-date-picker\"\n [attr.data-min-date]=\"minDate\"\n [attr.data-max-date]=\"maxDate\"\n [attr.data-excluded-dates]=\"disabledDatesConcatenated\"\n [attr.data-excluded-days]=\"disabledDays\"\n>\n <div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\"> {{ labelText }} </label>\n\n @if (hintText) {\n <div [id]=\"inputId + '-hint'\" class=\"govuk-hint\">{{ hintText }}</div>\n }\n\n @if (errors) {\n <p id=\"{{ inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n\n <input\n class=\"govuk-input moj-js-datepicker-input {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [attr.aria-describedby]=\"describedBy\"\n autocomplete=\"off\"\n [formControl]=\"getControl\"\n (change)=\"setDateValue($any($event).target.value)\"\n />\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: MojDatePickerComponent, isStandalone: true, selector: "opal-lib-moj-date-picker", inputs: { labelText: "labelText", labelClasses: "labelClasses", hintText: "hintText", inputId: "inputId", inputName: "inputName", inputClasses: "inputClasses", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", errors: "errors", autoComplete: "autoComplete", autoCompleteValue: "autoCompleteValue", control: "control" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div\n class=\"moj-datepicker\"\n data-module=\"moj-date-picker\"\n [attr.data-min-date]=\"minDate\"\n [attr.data-max-date]=\"maxDate\"\n [attr.data-excluded-dates]=\"disabledDatesConcatenated\"\n [attr.data-excluded-days]=\"disabledDays\"\n>\n <div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\"> {{ labelText }} </label>\n\n @if (hintText) {\n <div [id]=\"inputId + '-hint'\" class=\"govuk-hint\">{{ hintText }}</div>\n }\n\n @if (errors) {\n <p id=\"{{ inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n\n <input\n class=\"govuk-input moj-js-datepicker-input {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [attr.aria-describedby]=\"describedBy\"\n [attr.autocomplete]=\"autoCompleteValue ? autoCompleteValue : autoComplete ? 'on' : 'off'\"\n [formControl]=\"getControl\"\n (change)=\"setDateValue($any($event).target.value)\"\n />\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
109
111
|
}
|
|
110
112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MojDatePickerComponent, decorators: [{
|
|
111
113
|
type: Component,
|
|
112
|
-
args: [{ selector: 'opal-lib-moj-date-picker', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"moj-datepicker\"\n data-module=\"moj-date-picker\"\n [attr.data-min-date]=\"minDate\"\n [attr.data-max-date]=\"maxDate\"\n [attr.data-excluded-dates]=\"disabledDatesConcatenated\"\n [attr.data-excluded-days]=\"disabledDays\"\n>\n <div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\"> {{ labelText }} </label>\n\n @if (hintText) {\n <div [id]=\"inputId + '-hint'\" class=\"govuk-hint\">{{ hintText }}</div>\n }\n\n @if (errors) {\n <p id=\"{{ inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n\n <input\n class=\"govuk-input moj-js-datepicker-input {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [attr.aria-describedby]=\"describedBy\"\n autocomplete=\"off\"\n [formControl]=\"getControl\"\n (change)=\"setDateValue($any($event).target.value)\"\n />\n </div>\n</div>\n" }]
|
|
114
|
+
args: [{ selector: 'opal-lib-moj-date-picker', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"moj-datepicker\"\n data-module=\"moj-date-picker\"\n [attr.data-min-date]=\"minDate\"\n [attr.data-max-date]=\"maxDate\"\n [attr.data-excluded-dates]=\"disabledDatesConcatenated\"\n [attr.data-excluded-days]=\"disabledDays\"\n>\n <div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n <label class=\"govuk-label {{ labelClasses }}\" [for]=\"inputId\"> {{ labelText }} </label>\n\n @if (hintText) {\n <div [id]=\"inputId + '-hint'\" class=\"govuk-hint\">{{ hintText }}</div>\n }\n\n @if (errors) {\n <p id=\"{{ inputId }}-error-message\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n </p>\n }\n\n <input\n class=\"govuk-input moj-js-datepicker-input {{ inputClasses }}\"\n [id]=\"inputId\"\n [name]=\"inputName\"\n type=\"text\"\n [attr.aria-describedby]=\"describedBy\"\n [attr.autocomplete]=\"autoCompleteValue ? autoCompleteValue : autoComplete ? 'on' : 'off'\"\n [formControl]=\"getControl\"\n (change)=\"setDateValue($any($event).target.value)\"\n />\n </div>\n</div>\n" }]
|
|
113
115
|
}], ctorParameters: () => [], propDecorators: { labelText: [{
|
|
114
116
|
type: Input,
|
|
115
117
|
args: [{ required: true }]
|
|
@@ -143,6 +145,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
143
145
|
}], errors: [{
|
|
144
146
|
type: Input,
|
|
145
147
|
args: [{ required: false }]
|
|
148
|
+
}], autoComplete: [{
|
|
149
|
+
type: Input,
|
|
150
|
+
args: [{ required: false }]
|
|
151
|
+
}], autoCompleteValue: [{
|
|
152
|
+
type: Input,
|
|
153
|
+
args: [{ required: false }]
|
|
146
154
|
}], dateChange: [{
|
|
147
155
|
type: Output
|
|
148
156
|
}], control: [{
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { HostListener, Input, Directive } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class TrimLeadingTrailingWhitespaceDirective {
|
|
5
|
+
control;
|
|
6
|
+
onFocusOut() {
|
|
7
|
+
if (!this.control)
|
|
8
|
+
return;
|
|
9
|
+
const value = this.control.value;
|
|
10
|
+
if (typeof value !== 'string') {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
const trimmedValue = value.trim();
|
|
14
|
+
if (trimmedValue === value) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
this.control.setValue(trimmedValue);
|
|
18
|
+
}
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrimLeadingTrailingWhitespaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: TrimLeadingTrailingWhitespaceDirective, isStandalone: true, selector: "[opalLibTrimLeadingTrailingWhitespace]", inputs: { control: ["opalLibTrimLeadingTrailingWhitespace", "control"] }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0 });
|
|
21
|
+
}
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrimLeadingTrailingWhitespaceDirective, decorators: [{
|
|
23
|
+
type: Directive,
|
|
24
|
+
args: [{
|
|
25
|
+
selector: '[opalLibTrimLeadingTrailingWhitespace]',
|
|
26
|
+
standalone: true,
|
|
27
|
+
}]
|
|
28
|
+
}], propDecorators: { control: [{
|
|
29
|
+
type: Input,
|
|
30
|
+
args: ['opalLibTrimLeadingTrailingWhitespace']
|
|
31
|
+
}], onFocusOut: [{
|
|
32
|
+
type: HostListener,
|
|
33
|
+
args: ['focusout']
|
|
34
|
+
}] } });
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Generated bundle index. Do not edit.
|
|
38
|
+
*/
|
|
39
|
+
|
|
40
|
+
export { TrimLeadingTrailingWhitespaceDirective };
|
|
41
|
+
//# sourceMappingURL=hmcts-opal-frontend-common-directives-trim-leading-trailing-whitespace.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const canDeactivateGuard = (component) => {
|
|
2
2
|
return component.canDeactivate()
|
|
3
3
|
? true
|
|
4
|
-
: confirm('WARNING:
|
|
4
|
+
: confirm('WARNING: Are you sure you want to cancel? Any information you entered will be lost.');
|
|
5
5
|
};
|
|
6
6
|
|
|
7
7
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hmcts/opal-frontend-common",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.98",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -601,6 +601,11 @@
|
|
|
601
601
|
"types": "./types/hmcts-opal-frontend-common-directives-govuk-button.d.ts",
|
|
602
602
|
"default": "./fesm2022/hmcts-opal-frontend-common-directives-govuk-button.mjs"
|
|
603
603
|
},
|
|
604
|
+
"./directives/trim-leading-trailing-whitespace": {
|
|
605
|
+
"import": "./fesm2022/hmcts-opal-frontend-common-directives-trim-leading-trailing-whitespace.mjs",
|
|
606
|
+
"types": "./types/hmcts-opal-frontend-common-directives-trim-leading-trailing-whitespace.d.ts",
|
|
607
|
+
"default": "./fesm2022/hmcts-opal-frontend-common-directives-trim-leading-trailing-whitespace.mjs"
|
|
608
|
+
},
|
|
604
609
|
"./directives/moj-multi-select": {
|
|
605
610
|
"import": "./fesm2022/hmcts-opal-frontend-common-directives-moj-multi-select.mjs",
|
|
606
611
|
"types": "./types/hmcts-opal-frontend-common-directives-moj-multi-select.d.ts",
|
|
@@ -4,10 +4,15 @@ interface IDateInput {
|
|
|
4
4
|
inputId: string;
|
|
5
5
|
inputLabel: string;
|
|
6
6
|
}
|
|
7
|
+
interface IGovUkDateInputAutoCompleteValue {
|
|
8
|
+
day: string;
|
|
9
|
+
month: string;
|
|
10
|
+
year: string;
|
|
11
|
+
}
|
|
7
12
|
interface IGovUkDateInput {
|
|
8
13
|
day: IDateInput;
|
|
9
14
|
month: IDateInput;
|
|
10
15
|
year: IDateInput;
|
|
11
16
|
}
|
|
12
17
|
|
|
13
|
-
export type { IGovUkDateInput };
|
|
18
|
+
export type { IGovUkDateInput, IGovUkDateInputAutoCompleteValue };
|
|
@@ -7,6 +7,11 @@ interface IDateInput {
|
|
|
7
7
|
inputId: string;
|
|
8
8
|
inputLabel: string;
|
|
9
9
|
}
|
|
10
|
+
interface IGovUkDateInputAutoCompleteValue {
|
|
11
|
+
day: string;
|
|
12
|
+
month: string;
|
|
13
|
+
year: string;
|
|
14
|
+
}
|
|
10
15
|
interface IGovUkDateInput {
|
|
11
16
|
day: IDateInput;
|
|
12
17
|
month: IDateInput;
|
|
@@ -22,12 +27,14 @@ declare class GovukDateInputComponent {
|
|
|
22
27
|
errorDay: string | null;
|
|
23
28
|
errorMonth: string | null;
|
|
24
29
|
errorYear: string | null;
|
|
30
|
+
autoComplete: boolean;
|
|
31
|
+
autoCompleteValue: IGovUkDateInputAutoCompleteValue | null;
|
|
25
32
|
dateInputs: IGovUkDateInput;
|
|
26
33
|
set group(abstractControl: AbstractControl | null);
|
|
27
34
|
get getGroup(): FormGroup<any>;
|
|
28
35
|
get describedBy(): string | null;
|
|
29
36
|
static ɵfac: i0.ɵɵFactoryDeclaration<GovukDateInputComponent, never>;
|
|
30
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<GovukDateInputComponent, "opal-lib-govuk-date-input", never, { "fieldSetId": { "alias": "fieldSetId"; "required": true; }; "legendText": { "alias": "legendText"; "required": true; }; "legendHint": { "alias": "legendHint"; "required": false; }; "legendClasses": { "alias": "legendClasses"; "required": false; }; "errorDay": { "alias": "errorDay"; "required": false; }; "errorMonth": { "alias": "errorMonth"; "required": false; }; "errorYear": { "alias": "errorYear"; "required": false; }; "dateInputs": { "alias": "dateInputs"; "required": true; }; "group": { "alias": "group"; "required": true; }; }, {}, never, never, true, never>;
|
|
37
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<GovukDateInputComponent, "opal-lib-govuk-date-input", never, { "fieldSetId": { "alias": "fieldSetId"; "required": true; }; "legendText": { "alias": "legendText"; "required": true; }; "legendHint": { "alias": "legendHint"; "required": false; }; "legendClasses": { "alias": "legendClasses"; "required": false; }; "errorDay": { "alias": "errorDay"; "required": false; }; "errorMonth": { "alias": "errorMonth"; "required": false; }; "errorYear": { "alias": "errorYear"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "autoCompleteValue": { "alias": "autoCompleteValue"; "required": false; }; "dateInputs": { "alias": "dateInputs"; "required": true; }; "group": { "alias": "group"; "required": true; }; }, {}, never, never, true, never>;
|
|
31
38
|
}
|
|
32
39
|
|
|
33
40
|
export { GovukDateInputComponent };
|
|
@@ -15,12 +15,14 @@ declare class GovukSelectComponent {
|
|
|
15
15
|
selectClasses: string;
|
|
16
16
|
selectHint: string;
|
|
17
17
|
errors: string | null;
|
|
18
|
+
autoComplete: boolean;
|
|
19
|
+
autoCompleteValue: string | null;
|
|
18
20
|
options: IGovUkSelectOptions[];
|
|
19
21
|
set control(abstractControl: AbstractControl);
|
|
20
22
|
get getControl(): FormControl<any>;
|
|
21
23
|
get describedBy(): string | null;
|
|
22
24
|
static ɵfac: i0.ɵɵFactoryDeclaration<GovukSelectComponent, never>;
|
|
23
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<GovukSelectComponent, "opal-lib-govuk-select", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "selectId": { "alias": "selectId"; "required": true; }; "selectName": { "alias": "selectName"; "required": true; }; "selectClasses": { "alias": "selectClasses"; "required": false; }; "selectHint": { "alias": "selectHint"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "options": { "alias": "options"; "required": true; }; "control": { "alias": "control"; "required": true; }; }, {}, never, never, true, never>;
|
|
25
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<GovukSelectComponent, "opal-lib-govuk-select", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "selectId": { "alias": "selectId"; "required": true; }; "selectName": { "alias": "selectName"; "required": true; }; "selectClasses": { "alias": "selectClasses"; "required": false; }; "selectHint": { "alias": "selectHint"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "autoCompleteValue": { "alias": "autoCompleteValue"; "required": false; }; "options": { "alias": "options"; "required": true; }; "control": { "alias": "control"; "required": true; }; }, {}, never, never, true, never>;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
export { GovukSelectComponent };
|
|
@@ -24,8 +24,10 @@ declare class GovukTableHeadingComponent {
|
|
|
24
24
|
|
|
25
25
|
declare class GovukTableComponent {
|
|
26
26
|
tableClasses: string;
|
|
27
|
+
caption: string | null;
|
|
28
|
+
captionClasses: string;
|
|
27
29
|
static ɵfac: i0.ɵɵFactoryDeclaration<GovukTableComponent, never>;
|
|
28
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<GovukTableComponent, "opal-lib-govuk-table", never, { "tableClasses": { "alias": "tableClasses"; "required": false; }; }, {}, never, ["[head]", "[body]", "[results]"], true, never>;
|
|
30
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<GovukTableComponent, "opal-lib-govuk-table", never, { "tableClasses": { "alias": "tableClasses"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "captionClasses": { "alias": "captionClasses"; "required": false; }; }, {}, never, ["[head]", "[body]", "[results]"], true, never>;
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
export { GovukTableBodyRowComponent, GovukTableBodyRowDataComponent, GovukTableComponent, GovukTableHeadingComponent };
|
|
@@ -14,6 +14,8 @@ declare class GovukTextAreaComponent {
|
|
|
14
14
|
hintText: string;
|
|
15
15
|
inputMode: string;
|
|
16
16
|
errors: string | null;
|
|
17
|
+
autoComplete: boolean;
|
|
18
|
+
autoCompleteValue: string | null;
|
|
17
19
|
rows: number;
|
|
18
20
|
characterCountEnabled: boolean;
|
|
19
21
|
maxCharacterLimit: number;
|
|
@@ -21,7 +23,7 @@ declare class GovukTextAreaComponent {
|
|
|
21
23
|
get getControl(): FormControl<any>;
|
|
22
24
|
get describedBy(): string | null;
|
|
23
25
|
static ɵfac: i0.ɵɵFactoryDeclaration<GovukTextAreaComponent, never>;
|
|
24
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<GovukTextAreaComponent, "opal-lib-govuk-text-area", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "inputId": { "alias": "inputId"; "required": true; }; "inputName": { "alias": "inputName"; "required": true; }; "inputClasses": { "alias": "inputClasses"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "characterCountEnabled": { "alias": "characterCountEnabled"; "required": false; }; "maxCharacterLimit": { "alias": "maxCharacterLimit"; "required": false; }; "control": { "alias": "control"; "required": true; }; }, {}, never, never, true, never>;
|
|
26
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<GovukTextAreaComponent, "opal-lib-govuk-text-area", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "inputId": { "alias": "inputId"; "required": true; }; "inputName": { "alias": "inputName"; "required": true; }; "inputClasses": { "alias": "inputClasses"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "autoCompleteValue": { "alias": "autoCompleteValue"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "characterCountEnabled": { "alias": "characterCountEnabled"; "required": false; }; "maxCharacterLimit": { "alias": "maxCharacterLimit"; "required": false; }; "control": { "alias": "control"; "required": true; }; }, {}, never, never, true, never>;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
export { GovukTextAreaComponent };
|
package/types/hmcts-opal-frontend-common-components-govuk-govuk-text-input-prefix-suffix.d.ts
CHANGED
|
@@ -9,6 +9,8 @@ declare class GovukTextInputPrefixSuffixComponent {
|
|
|
9
9
|
inputName: string;
|
|
10
10
|
inputClasses: string;
|
|
11
11
|
errors: string | null;
|
|
12
|
+
autoComplete: boolean;
|
|
13
|
+
autoCompleteValue: string | null;
|
|
12
14
|
prefixText: string;
|
|
13
15
|
suffixText: string;
|
|
14
16
|
forceTwoDecimalPoints: boolean;
|
|
@@ -20,7 +22,7 @@ declare class GovukTextInputPrefixSuffixComponent {
|
|
|
20
22
|
get getControl(): FormControl<any>;
|
|
21
23
|
get describedBy(): string | null;
|
|
22
24
|
static ɵfac: i0.ɵɵFactoryDeclaration<GovukTextInputPrefixSuffixComponent, never>;
|
|
23
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<GovukTextInputPrefixSuffixComponent, "opal-lib-govuk-text-input-prefix-suffix", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "inputId": { "alias": "inputId"; "required": true; }; "inputName": { "alias": "inputName"; "required": true; }; "inputClasses": { "alias": "inputClasses"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "prefixText": { "alias": "prefixText"; "required": false; }; "suffixText": { "alias": "suffixText"; "required": false; }; "forceTwoDecimalPoints": { "alias": "forceTwoDecimalPoints"; "required": false; }; "control": { "alias": "control"; "required": true; }; }, {}, never, never, true, never>;
|
|
25
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<GovukTextInputPrefixSuffixComponent, "opal-lib-govuk-text-input-prefix-suffix", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "inputId": { "alias": "inputId"; "required": true; }; "inputName": { "alias": "inputName"; "required": true; }; "inputClasses": { "alias": "inputClasses"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "autoCompleteValue": { "alias": "autoCompleteValue"; "required": false; }; "prefixText": { "alias": "prefixText"; "required": false; }; "suffixText": { "alias": "suffixText"; "required": false; }; "forceTwoDecimalPoints": { "alias": "forceTwoDecimalPoints"; "required": false; }; "control": { "alias": "control"; "required": true; }; }, {}, never, never, true, never>;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
export { GovukTextInputPrefixSuffixComponent };
|
|
@@ -19,6 +19,8 @@ declare class MojDatePickerComponent implements OnInit, OnDestroy {
|
|
|
19
19
|
disabledDates: string[];
|
|
20
20
|
disabledDays: string;
|
|
21
21
|
errors: string | null;
|
|
22
|
+
autoComplete: boolean;
|
|
23
|
+
autoCompleteValue: string | null;
|
|
22
24
|
dateChange: EventEmitter<string>;
|
|
23
25
|
set control(abstractControl: AbstractControl);
|
|
24
26
|
get getControl(): FormControl<any>;
|
|
@@ -52,7 +54,7 @@ declare class MojDatePickerComponent implements OnInit, OnDestroy {
|
|
|
52
54
|
ngOnInit(): void;
|
|
53
55
|
ngOnDestroy(): void;
|
|
54
56
|
static ɵfac: i0.ɵɵFactoryDeclaration<MojDatePickerComponent, never>;
|
|
55
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MojDatePickerComponent, "opal-lib-moj-date-picker", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "inputId": { "alias": "inputId"; "required": true; }; "inputName": { "alias": "inputName"; "required": true; }; "inputClasses": { "alias": "inputClasses"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "disabledDays": { "alias": "disabledDays"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "control": { "alias": "control"; "required": true; }; }, { "dateChange": "dateChange"; }, never, never, true, never>;
|
|
57
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MojDatePickerComponent, "opal-lib-moj-date-picker", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "inputId": { "alias": "inputId"; "required": true; }; "inputName": { "alias": "inputName"; "required": true; }; "inputClasses": { "alias": "inputClasses"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "disabledDays": { "alias": "disabledDays"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "autoCompleteValue": { "alias": "autoCompleteValue"; "required": false; }; "control": { "alias": "control"; "required": true; }; }, { "dateChange": "dateChange"; }, never, never, true, never>;
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
export { MojDatePickerComponent };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { AbstractControl } from '@angular/forms';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
|
|
4
|
+
declare class TrimLeadingTrailingWhitespaceDirective {
|
|
5
|
+
control: AbstractControl;
|
|
6
|
+
onFocusOut(): void;
|
|
7
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TrimLeadingTrailingWhitespaceDirective, never>;
|
|
8
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<TrimLeadingTrailingWhitespaceDirective, "[opalLibTrimLeadingTrailingWhitespace]", never, { "control": { "alias": "opalLibTrimLeadingTrailingWhitespace"; "required": false; }; }, {}, never, never, true, never>;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export { TrimLeadingTrailingWhitespaceDirective };
|
|
@@ -50,7 +50,7 @@ declare class DateService {
|
|
|
50
50
|
* @param format - The format of the string value.
|
|
51
51
|
* @returns A DateTime object representing the parsed value.
|
|
52
52
|
*/
|
|
53
|
-
getFromFormat(value: string, format: string): DateTime<
|
|
53
|
+
getFromFormat(value: string, format: string): DateTime<boolean>;
|
|
54
54
|
/**
|
|
55
55
|
* Returns an object containing the age and age group based on the date of birth.
|
|
56
56
|
* @param dateOfBirth - The date of birth to calculate the age from.
|
|
@@ -85,7 +85,7 @@ declare class DateService {
|
|
|
85
85
|
* @param value - The string value in ISO format.
|
|
86
86
|
* @returns A DateTime object representing the given value.
|
|
87
87
|
*/
|
|
88
|
-
getFromIso(value: string): DateTime<
|
|
88
|
+
getFromIso(value: string): DateTime<boolean>;
|
|
89
89
|
/**
|
|
90
90
|
* Returns the current date and time.
|
|
91
91
|
* @returns {DateTime} The current date and time.
|