@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.
@@ -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: string;
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: string;
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: string;
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
- private utils;
120
+ protected backdropElement: HTMLElement | null;
115
121
  /** @internal */
116
- backdropElement: HTMLElement | null;
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.utils.setupAriaAttributes();
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.utils.setupAriaAttributes();
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.utils.createBackdrop();
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
- (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
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
- (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
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
  }