@momentum-design/components 0.80.0 → 0.80.1
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/dist/browser/index.js +148 -144
- package/dist/browser/index.js.map +4 -4
- package/dist/components/dialog/dialog.component.d.ts +25 -8
- package/dist/components/dialog/dialog.component.js +50 -19
- package/dist/components/popover/popover.component.js +2 -1
- package/dist/custom-elements.json +2903 -2900
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/dist/utils/mixins/CardAndDialogFooterMixin.d.ts +3 -3
- package/dist/utils/mixins/CardAndDialogFooterMixin.js +20 -16
- package/package.json +1 -1
- package/dist/components/dialog/dialog.utils.d.ts +0 -7
- package/dist/components/dialog/dialog.utils.js +0 -33
@@ -56,8 +56,10 @@ declare class Dialog extends Dialog_base {
|
|
56
56
|
id: string;
|
57
57
|
/**
|
58
58
|
* The ID of the element that triggers the dialog
|
59
|
+
*
|
60
|
+
* @default undefined
|
59
61
|
*/
|
60
|
-
triggerId
|
62
|
+
triggerId?: string;
|
61
63
|
/**
|
62
64
|
* The visibility of the dialog
|
63
65
|
* @default false
|
@@ -73,6 +75,10 @@ declare class Dialog extends Dialog_base {
|
|
73
75
|
* @default small
|
74
76
|
*/
|
75
77
|
size: DialogSize;
|
78
|
+
/**
|
79
|
+
* The variant of the dialog, can be 'default' or 'promotional'
|
80
|
+
* @default default
|
81
|
+
*/
|
76
82
|
variant: DialogVariant;
|
77
83
|
/**
|
78
84
|
* Defines a string value for the aria-label attribute for close button accessibility
|
@@ -90,11 +96,11 @@ declare class Dialog extends Dialog_base {
|
|
90
96
|
/**
|
91
97
|
* Defines a string value to display as the title of the dialog
|
92
98
|
*/
|
93
|
-
headerText
|
99
|
+
headerText?: string;
|
94
100
|
/**
|
95
101
|
* Defines a string value to display as the under-header description of the dialog
|
96
102
|
*/
|
97
|
-
descriptionText
|
103
|
+
descriptionText?: string;
|
98
104
|
/**
|
99
105
|
* The html tag to be used for the header text
|
100
106
|
*/
|
@@ -109,14 +115,25 @@ declare class Dialog extends Dialog_base {
|
|
109
115
|
*/
|
110
116
|
role: DialogRole;
|
111
117
|
/** @internal */
|
112
|
-
triggerElement: HTMLElement | null;
|
118
|
+
protected triggerElement: HTMLElement | null;
|
113
119
|
/** @internal */
|
114
|
-
|
120
|
+
protected backdropElement: HTMLElement | null;
|
115
121
|
/** @internal */
|
116
|
-
|
117
|
-
/** @internal */
|
118
|
-
private lastActiveElement;
|
122
|
+
protected lastActiveElement: HTMLElement | null;
|
119
123
|
constructor();
|
124
|
+
/**
|
125
|
+
* Sets up the aria attributes for the dialog based on the header text and aria attributes.
|
126
|
+
* If no header text or aria attributes are provided, it will use the triggerId if available.
|
127
|
+
* @internal
|
128
|
+
*/
|
129
|
+
private setupAriaAttributes;
|
130
|
+
/**
|
131
|
+
* Creates a backdrop element for the dialog.
|
132
|
+
* The backdrop is a full-screen overlay that appears behind the dialog when it is open.
|
133
|
+
* It prevents interaction with the rest of the application while the dialog is open.
|
134
|
+
* @internal
|
135
|
+
*/
|
136
|
+
private createBackdrop;
|
120
137
|
protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
|
121
138
|
disconnectedCallback(): Promise<void>;
|
122
139
|
/**
|
@@ -14,7 +14,6 @@ import styles from './dialog.styles';
|
|
14
14
|
import { Component } from '../../models';
|
15
15
|
import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
|
16
16
|
import { DEFAULTS } from './dialog.constants';
|
17
|
-
import { DialogUtils } from './dialog.utils';
|
18
17
|
import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
|
19
18
|
import { DialogEventManager } from './dialog.events';
|
20
19
|
import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
|
@@ -73,10 +72,6 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
|
|
73
72
|
* The unique ID of the dialog
|
74
73
|
*/
|
75
74
|
this.id = '';
|
76
|
-
/**
|
77
|
-
* The ID of the element that triggers the dialog
|
78
|
-
*/
|
79
|
-
this.triggerId = '';
|
80
75
|
/**
|
81
76
|
* The visibility of the dialog
|
82
77
|
* @default false
|
@@ -92,6 +87,10 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
|
|
92
87
|
* @default small
|
93
88
|
*/
|
94
89
|
this.size = DEFAULTS.SIZE;
|
90
|
+
/**
|
91
|
+
* The variant of the dialog, can be 'default' or 'promotional'
|
92
|
+
* @default default
|
93
|
+
*/
|
95
94
|
this.variant = DEFAULTS.VARIANT;
|
96
95
|
/**
|
97
96
|
* Defines a string value for the aria-label attribute for close button accessibility
|
@@ -106,14 +105,6 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
|
|
106
105
|
* Defines a string value for the aria-label attribute when header is not used
|
107
106
|
*/
|
108
107
|
this.ariaLabel = null;
|
109
|
-
/**
|
110
|
-
* Defines a string value to display as the title of the dialog
|
111
|
-
*/
|
112
|
-
this.headerText = '';
|
113
|
-
/**
|
114
|
-
* Defines a string value to display as the under-header description of the dialog
|
115
|
-
*/
|
116
|
-
this.descriptionText = '';
|
117
108
|
/**
|
118
109
|
* The html tag to be used for the header text
|
119
110
|
*/
|
@@ -159,14 +150,53 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
|
|
159
150
|
this.showDialog = () => {
|
160
151
|
this.visible = true;
|
161
152
|
};
|
162
|
-
/** @internal */
|
163
|
-
this.utils = new DialogUtils(this);
|
164
153
|
document.addEventListener('keydown', this.onEscapeKeydown);
|
165
154
|
}
|
155
|
+
/**
|
156
|
+
* Sets up the aria attributes for the dialog based on the header text and aria attributes.
|
157
|
+
* If no header text or aria attributes are provided, it will use the triggerId if available.
|
158
|
+
* @internal
|
159
|
+
*/
|
160
|
+
setupAriaAttributes() {
|
161
|
+
if (this.headerText && !this.ariaLabel && !this.ariaLabelledby) {
|
162
|
+
this.setAttribute('aria-labelledby', this.headerText);
|
163
|
+
}
|
164
|
+
else if (!this.headerText && !this.ariaLabel && !this.ariaLabelledby) {
|
165
|
+
if (this.triggerId) {
|
166
|
+
this.setAttribute('aria-labelledby', this.triggerId);
|
167
|
+
}
|
168
|
+
}
|
169
|
+
}
|
170
|
+
/**
|
171
|
+
* Creates a backdrop element for the dialog.
|
172
|
+
* The backdrop is a full-screen overlay that appears behind the dialog when it is open.
|
173
|
+
* It prevents interaction with the rest of the application while the dialog is open.
|
174
|
+
* @internal
|
175
|
+
*/
|
176
|
+
createBackdrop() {
|
177
|
+
var _a;
|
178
|
+
const backdrop = document.createElement('div');
|
179
|
+
backdrop.classList.add('dialog-backdrop');
|
180
|
+
const styleElement = document.createElement('style');
|
181
|
+
styleElement.textContent = `
|
182
|
+
.dialog-backdrop {
|
183
|
+
position: fixed;
|
184
|
+
top: 0;
|
185
|
+
left: 0;
|
186
|
+
width: 100%;
|
187
|
+
height: 100%;
|
188
|
+
background: var(--mds-color-theme-common-overlays-secondary-normal);
|
189
|
+
z-index: ${this.zIndex - 1};
|
190
|
+
}
|
191
|
+
`;
|
192
|
+
backdrop.appendChild(styleElement);
|
193
|
+
(_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
|
194
|
+
this.backdropElement = backdrop;
|
195
|
+
}
|
166
196
|
async firstUpdated(changedProperties) {
|
167
197
|
super.firstUpdated(changedProperties);
|
168
198
|
this.setupTriggerListener();
|
169
|
-
this.
|
199
|
+
this.setupAriaAttributes();
|
170
200
|
this.style.zIndex = `${this.zIndex}`;
|
171
201
|
DialogEventManager.onCreatedDialog(this);
|
172
202
|
if (this.visible) {
|
@@ -212,7 +242,7 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
|
|
212
242
|
}
|
213
243
|
if (changedProperties.has('aria-label')
|
214
244
|
|| changedProperties.has('aria-labelledby')) {
|
215
|
-
this.
|
245
|
+
this.setupAriaAttributes();
|
216
246
|
}
|
217
247
|
}
|
218
248
|
/**
|
@@ -232,7 +262,7 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
|
|
232
262
|
this.lastActiveElement = document.activeElement;
|
233
263
|
this.enabledFocusTrap = true;
|
234
264
|
this.enabledPreventScroll = true;
|
235
|
-
this.
|
265
|
+
this.createBackdrop();
|
236
266
|
await this.handleCreateDialogFirstUpdate();
|
237
267
|
// If we have a trigger element, update its attributes
|
238
268
|
if (this.triggerElement) {
|
@@ -264,8 +294,9 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
|
|
264
294
|
async handleCreateDialogFirstUpdate() {
|
265
295
|
var _a, _b;
|
266
296
|
if (this.visible) {
|
267
|
-
|
297
|
+
// Wait for the first update to complete before setting focusable elements
|
268
298
|
await this.updateComplete;
|
299
|
+
(_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
|
269
300
|
(_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
|
270
301
|
}
|
271
302
|
}
|
@@ -512,8 +512,9 @@ class Popover extends FocusTrapMixin(Component) {
|
|
512
512
|
async handleCreatePopoverFirstUpdate() {
|
513
513
|
var _a, _b;
|
514
514
|
if (this.visible && this.interactive) {
|
515
|
-
|
515
|
+
// Wait for the first update to complete before setting focusable elements
|
516
516
|
await this.updateComplete;
|
517
|
+
(_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
|
517
518
|
(_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
|
518
519
|
}
|
519
520
|
}
|