@momentum-design/components 0.80.0 → 0.80.1

package/dist/components/dialog/dialog.component.d.ts

@@ -56,8 +56,10 @@ declare class Dialog extends Dialog_base {
     id: string;
     /**
      * The ID of the element that triggers the dialog
+     *
+     * @default undefined
      */
-    triggerId: string;
+    triggerId?: string;
     /**
      * The visibility of the dialog
      * @default false
@@ -73,6 +75,10 @@ declare class Dialog extends Dialog_base {
      * @default small
      */
     size: DialogSize;
+    /**
+     * The variant of the dialog, can be 'default' or 'promotional'
+     * @default default
+     */
     variant: DialogVariant;
     /**
      * Defines a string value for the aria-label attribute for close button accessibility
@@ -90,11 +96,11 @@ declare class Dialog extends Dialog_base {
     /**
      * Defines a string value to display as the title of the dialog
      */
-    headerText: string;
+    headerText?: string;
     /**
      * Defines a string value to display as the under-header description of the dialog
      */
-    descriptionText: string;
+    descriptionText?: string;
     /**
      * The html tag to be used for the header text
      */
@@ -109,14 +115,25 @@ declare class Dialog extends Dialog_base {
      */
     role: DialogRole;
     /** @internal */
-    triggerElement: HTMLElement | null;
+    protected triggerElement: HTMLElement | null;
     /** @internal */
-    private utils;
+    protected backdropElement: HTMLElement | null;
     /** @internal */
-    backdropElement: HTMLElement | null;
-    /** @internal */
-    private lastActiveElement;
+    protected lastActiveElement: HTMLElement | null;
     constructor();
+    /**
+     * Sets up the aria attributes for the dialog based on the header text and aria attributes.
+     * If no header text or aria attributes are provided, it will use the triggerId if available.
+     * @internal
+     */
+    private setupAriaAttributes;
+    /**
+     * Creates a backdrop element for the dialog.
+     * The backdrop is a full-screen overlay that appears behind the dialog when it is open.
+     * It prevents interaction with the rest of the application while the dialog is open.
+     * @internal
+     */
+    private createBackdrop;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     disconnectedCallback(): Promise<void>;
     /**

package/dist/components/dialog/dialog.component.js

@@ -14,7 +14,6 @@ import styles from './dialog.styles';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
 import { DEFAULTS } from './dialog.constants';
-import { DialogUtils } from './dialog.utils';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { DialogEventManager } from './dialog.events';
 import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
@@ -73,10 +72,6 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * The unique ID of the dialog
          */
         this.id = '';
-        /**
-         * The ID of the element that triggers the dialog
-         */
-        this.triggerId = '';
         /**
          * The visibility of the dialog
          * @default false
@@ -92,6 +87,10 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * @default small
          */
         this.size = DEFAULTS.SIZE;
+        /**
+         * The variant of the dialog, can be 'default' or 'promotional'
+         * @default default
+         */
         this.variant = DEFAULTS.VARIANT;
         /**
          * Defines a string value for the aria-label attribute for close button accessibility
@@ -106,14 +105,6 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * Defines a string value for the aria-label attribute when header is not used
          */
         this.ariaLabel = null;
-        /**
-         * Defines a string value to display as the title of the dialog
-         */
-        this.headerText = '';
-        /**
-         * Defines a string value to display as the under-header description of the dialog
-         */
-        this.descriptionText = '';
         /**
          * The html tag to be used for the header text
          */
@@ -159,14 +150,53 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         this.showDialog = () => {
             this.visible = true;
         };
-        /** @internal */
-        this.utils = new DialogUtils(this);
         document.addEventListener('keydown', this.onEscapeKeydown);
     }
+    /**
+     * Sets up the aria attributes for the dialog based on the header text and aria attributes.
+     * If no header text or aria attributes are provided, it will use the triggerId if available.
+     * @internal
+     */
+    setupAriaAttributes() {
+        if (this.headerText && !this.ariaLabel && !this.ariaLabelledby) {
+            this.setAttribute('aria-labelledby', this.headerText);
+        }
+        else if (!this.headerText && !this.ariaLabel && !this.ariaLabelledby) {
+            if (this.triggerId) {
+                this.setAttribute('aria-labelledby', this.triggerId);
+            }
+        }
+    }
+    /**
+     * Creates a backdrop element for the dialog.
+     * The backdrop is a full-screen overlay that appears behind the dialog when it is open.
+     * It prevents interaction with the rest of the application while the dialog is open.
+     * @internal
+     */
+    createBackdrop() {
+        var _a;
+        const backdrop = document.createElement('div');
+        backdrop.classList.add('dialog-backdrop');
+        const styleElement = document.createElement('style');
+        styleElement.textContent = `
+      .dialog-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--mds-color-theme-common-overlays-secondary-normal);
+        z-index: ${this.zIndex - 1};
+      }
+    `;
+        backdrop.appendChild(styleElement);
+        (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
+        this.backdropElement = backdrop;
+    }
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.setupTriggerListener();
-        this.utils.setupAriaAttributes();
+        this.setupAriaAttributes();
         this.style.zIndex = `${this.zIndex}`;
         DialogEventManager.onCreatedDialog(this);
         if (this.visible) {
@@ -212,7 +242,7 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         }
         if (changedProperties.has('aria-label')
             || changedProperties.has('aria-labelledby')) {
-            this.utils.setupAriaAttributes();
+            this.setupAriaAttributes();
         }
     }
     /**
@@ -232,7 +262,7 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
             this.lastActiveElement = document.activeElement;
             this.enabledFocusTrap = true;
             this.enabledPreventScroll = true;
-            this.utils.createBackdrop();
+            this.createBackdrop();
             await this.handleCreateDialogFirstUpdate();
             // If we have a trigger element, update its attributes
             if (this.triggerElement) {
@@ -264,8 +294,9 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
     async handleCreateDialogFirstUpdate() {
         var _a, _b;
         if (this.visible) {
-            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
+            // Wait for the first update to complete before setting focusable elements
             await this.updateComplete;
+            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
             (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
         }
     }

package/dist/components/popover/popover.component.js

@@ -512,8 +512,9 @@ class Popover extends FocusTrapMixin(Component) {
     async handleCreatePopoverFirstUpdate() {
         var _a, _b;
         if (this.visible && this.interactive) {
-            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
+            // Wait for the first update to complete before setting focusable elements
             await this.updateComplete;
+            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
             (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
         }
     }