@hmcts/opal-frontend-common 0.0.107 → 0.0.108
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.
|
@@ -96,11 +96,11 @@ class CustomDeferredLiveRegionAnnouncement {
|
|
|
96
96
|
this.clearPendingAnnouncement();
|
|
97
97
|
}
|
|
98
98
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: CustomDeferredLiveRegionAnnouncement, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: CustomDeferredLiveRegionAnnouncement, isStandalone: true, selector: "opal-lib-custom-deferred-live-region-announcement", inputs: { message: "message", role: "role", announcementDelayMs: "announcementDelayMs" }, usesOnChanges: true, ngImport: i0, template: "<output class=\"govuk-visually-hidden\" [attr.role]=\"role\" aria-atomic=\"true\">\n {{ renderedMessage() }}\n</output>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
99
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: CustomDeferredLiveRegionAnnouncement, isStandalone: true, selector: "opal-lib-custom-deferred-live-region-announcement", inputs: { message: "message", role: "role", announcementDelayMs: "announcementDelayMs" }, usesOnChanges: true, ngImport: i0, template: "<output class=\"govuk-visually-hidden\" [attr.role]=\"role\" aria-atomic=\"true\">\n {{ renderedMessage() }}\n</output>\n", styles: [":host{display:contents}:host .govuk-visually-hidden:before,:host .govuk-visually-hidden:after{content:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
100
100
|
}
|
|
101
101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: CustomDeferredLiveRegionAnnouncement, decorators: [{
|
|
102
102
|
type: Component,
|
|
103
|
-
args: [{ selector: 'opal-lib-custom-deferred-live-region-announcement', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<output class=\"govuk-visually-hidden\" [attr.role]=\"role\" aria-atomic=\"true\">\n {{ renderedMessage() }}\n</output>\n", styles: [":host{display:contents}\n"] }]
|
|
103
|
+
args: [{ selector: 'opal-lib-custom-deferred-live-region-announcement', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<output class=\"govuk-visually-hidden\" [attr.role]=\"role\" aria-atomic=\"true\">\n {{ renderedMessage() }}\n</output>\n", styles: [":host{display:contents}:host .govuk-visually-hidden:before,:host .govuk-visually-hidden:after{content:none}\n"] }]
|
|
104
104
|
}], propDecorators: { message: [{
|
|
105
105
|
type: Input,
|
|
106
106
|
args: [{ required: true }]
|
|
@@ -32,17 +32,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
32
32
|
}] } });
|
|
33
33
|
|
|
34
34
|
class MojAlertComponent {
|
|
35
|
+
/**
|
|
36
|
+
* Accessible label used for live announcements.
|
|
37
|
+
*
|
|
38
|
+
* Required when `enableLiveAnnouncement` is true.
|
|
39
|
+
*/
|
|
35
40
|
ariaLabel;
|
|
41
|
+
/**
|
|
42
|
+
* Controls whether the alert creates a live-region announcement.
|
|
43
|
+
*
|
|
44
|
+
* Defaults to `true`. When enabled, `ariaLabel` must be provided.
|
|
45
|
+
*/
|
|
46
|
+
enableLiveAnnouncement = true;
|
|
36
47
|
type = 'information';
|
|
37
48
|
showDismiss;
|
|
38
49
|
dismissed = new EventEmitter();
|
|
50
|
+
/**
|
|
51
|
+
* Controls the visibility of the alert.
|
|
52
|
+
*
|
|
53
|
+
* Defaults to `true` and is set to `false` when the alert is dismissed.
|
|
54
|
+
*/
|
|
39
55
|
isVisible = true;
|
|
40
56
|
get hostClass() {
|
|
41
57
|
return this.isVisible ? `moj-alert moj-alert--${this.type}` : '';
|
|
42
58
|
}
|
|
43
59
|
dataModule = 'moj-alert';
|
|
60
|
+
/**
|
|
61
|
+
* Returns the message used for the live-region announcement.
|
|
62
|
+
*
|
|
63
|
+
* @returns The alert type and accessible label formatted as an announcement message.
|
|
64
|
+
* @throws {Error} If `ariaLabel` is missing, empty, or contains only whitespace.
|
|
65
|
+
*/
|
|
44
66
|
get announcementMessage() {
|
|
45
|
-
|
|
67
|
+
const ariaLabel = this.ariaLabel?.trim();
|
|
68
|
+
if (!ariaLabel) {
|
|
69
|
+
throw new Error('MojAlertComponent requires ariaLabel when live announcements are enabled. ' +
|
|
70
|
+
'Provide ariaLabel or set enableLiveAnnouncement to false.');
|
|
71
|
+
}
|
|
72
|
+
return `${this.type}: ${ariaLabel}`;
|
|
46
73
|
}
|
|
47
74
|
get announcementRole() {
|
|
48
75
|
return this.type === 'error' || this.type === 'warning' ? 'alert' : 'status';
|
|
@@ -50,7 +77,7 @@ class MojAlertComponent {
|
|
|
50
77
|
/**
|
|
51
78
|
* Dismisses the alert component.
|
|
52
79
|
*
|
|
53
|
-
* This method emits the dismissed event to
|
|
80
|
+
* This method emits the dismissed event to its parent and
|
|
54
81
|
* sets the component's visibility state to false,
|
|
55
82
|
* effectively hiding the alert from view.
|
|
56
83
|
*/
|
|
@@ -59,14 +86,17 @@ class MojAlertComponent {
|
|
|
59
86
|
this.dismissed.emit();
|
|
60
87
|
}
|
|
61
88
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: MojAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: MojAlertComponent, isStandalone: true, selector: "opal-lib-moj-alert, [opal-lib-moj-alert]", inputs: { ariaLabel: "ariaLabel", type: "type", showDismiss: "showDismiss" }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "this.hostClass", "attr.data-module": "this.dataModule" } }, ngImport: i0, template: "@if (isVisible) {\n <opal-lib-custom-deferred-live-region-announcement\n
|
|
89
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: MojAlertComponent, isStandalone: true, selector: "opal-lib-moj-alert, [opal-lib-moj-alert]", inputs: { ariaLabel: "ariaLabel", enableLiveAnnouncement: "enableLiveAnnouncement", type: "type", showDismiss: "showDismiss" }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "this.hostClass", "attr.data-module": "this.dataModule" } }, ngImport: i0, template: "@if (isVisible) {\n @if (enableLiveAnnouncement) {\n <opal-lib-custom-deferred-live-region-announcement\n [message]=\"announcementMessage\"\n [role]=\"announcementRole\"\n [announcementDelayMs]=\"200\"\n ></opal-lib-custom-deferred-live-region-announcement>\n }\n <ng-content select=\"[icon]\"></ng-content>\n <ng-content select=\"[content]\"></ng-content>\n\n @if (showDismiss) {\n <opal-lib-moj-alert-dismiss (dismiss)=\"dismiss()\"></opal-lib-moj-alert-dismiss>\n }\n}\n", dependencies: [{ kind: "component", type: MojAlertDismissComponent, selector: "opal-lib-moj-alert-dismiss", outputs: ["dismiss"] }, { kind: "component", type: CustomDeferredLiveRegionAnnouncement, selector: "opal-lib-custom-deferred-live-region-announcement", inputs: ["message", "role", "announcementDelayMs"] }] });
|
|
63
90
|
}
|
|
64
91
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: MojAlertComponent, decorators: [{
|
|
65
92
|
type: Component,
|
|
66
|
-
args: [{ selector: 'opal-lib-moj-alert, [opal-lib-moj-alert]', imports: [MojAlertDismissComponent, CustomDeferredLiveRegionAnnouncement], template: "@if (isVisible) {\n <opal-lib-custom-deferred-live-region-announcement\n
|
|
93
|
+
args: [{ selector: 'opal-lib-moj-alert, [opal-lib-moj-alert]', imports: [MojAlertDismissComponent, CustomDeferredLiveRegionAnnouncement], template: "@if (isVisible) {\n @if (enableLiveAnnouncement) {\n <opal-lib-custom-deferred-live-region-announcement\n [message]=\"announcementMessage\"\n [role]=\"announcementRole\"\n [announcementDelayMs]=\"200\"\n ></opal-lib-custom-deferred-live-region-announcement>\n }\n <ng-content select=\"[icon]\"></ng-content>\n <ng-content select=\"[content]\"></ng-content>\n\n @if (showDismiss) {\n <opal-lib-moj-alert-dismiss (dismiss)=\"dismiss()\"></opal-lib-moj-alert-dismiss>\n }\n}\n" }]
|
|
67
94
|
}], propDecorators: { ariaLabel: [{
|
|
68
95
|
type: Input,
|
|
69
|
-
args: [{ required:
|
|
96
|
+
args: [{ required: false }]
|
|
97
|
+
}], enableLiveAnnouncement: [{
|
|
98
|
+
type: Input,
|
|
99
|
+
args: [{ required: false }]
|
|
70
100
|
}], type: [{
|
|
71
101
|
type: Input,
|
|
72
102
|
args: [{ required: true }]
|
package/package.json
CHANGED
|
@@ -4,25 +4,47 @@ import { EventEmitter } from '@angular/core';
|
|
|
4
4
|
type MojAlertType = 'success' | 'warning' | 'information' | 'error';
|
|
5
5
|
|
|
6
6
|
declare class MojAlertComponent {
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Accessible label used for live announcements.
|
|
9
|
+
*
|
|
10
|
+
* Required when `enableLiveAnnouncement` is true.
|
|
11
|
+
*/
|
|
12
|
+
ariaLabel?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Controls whether the alert creates a live-region announcement.
|
|
15
|
+
*
|
|
16
|
+
* Defaults to `true`. When enabled, `ariaLabel` must be provided.
|
|
17
|
+
*/
|
|
18
|
+
enableLiveAnnouncement: boolean;
|
|
8
19
|
type: MojAlertType;
|
|
9
20
|
showDismiss: boolean;
|
|
10
21
|
dismissed: EventEmitter<void>;
|
|
22
|
+
/**
|
|
23
|
+
* Controls the visibility of the alert.
|
|
24
|
+
*
|
|
25
|
+
* Defaults to `true` and is set to `false` when the alert is dismissed.
|
|
26
|
+
*/
|
|
11
27
|
isVisible: boolean;
|
|
12
28
|
get hostClass(): string;
|
|
13
29
|
dataModule: string;
|
|
30
|
+
/**
|
|
31
|
+
* Returns the message used for the live-region announcement.
|
|
32
|
+
*
|
|
33
|
+
* @returns The alert type and accessible label formatted as an announcement message.
|
|
34
|
+
* @throws {Error} If `ariaLabel` is missing, empty, or contains only whitespace.
|
|
35
|
+
*/
|
|
14
36
|
get announcementMessage(): string;
|
|
15
37
|
get announcementRole(): 'alert' | 'status';
|
|
16
38
|
/**
|
|
17
39
|
* Dismisses the alert component.
|
|
18
40
|
*
|
|
19
|
-
* This method emits the dismissed event to
|
|
41
|
+
* This method emits the dismissed event to its parent and
|
|
20
42
|
* sets the component's visibility state to false,
|
|
21
43
|
* effectively hiding the alert from view.
|
|
22
44
|
*/
|
|
23
45
|
dismiss(): void;
|
|
24
46
|
static ɵfac: i0.ɵɵFactoryDeclaration<MojAlertComponent, never>;
|
|
25
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MojAlertComponent, "opal-lib-moj-alert, [opal-lib-moj-alert]", never, { "ariaLabel": { "alias": "ariaLabel"; "required":
|
|
47
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MojAlertComponent, "opal-lib-moj-alert, [opal-lib-moj-alert]", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "enableLiveAnnouncement": { "alias": "enableLiveAnnouncement"; "required": false; }; "type": { "alias": "type"; "required": true; }; "showDismiss": { "alias": "showDismiss"; "required": false; }; }, { "dismissed": "dismissed"; }, never, ["[icon]", "[content]"], true, never>;
|
|
26
48
|
}
|
|
27
49
|
|
|
28
50
|
declare class MojAlertIconComponent {
|