@momentum-design/components 0.85.8 → 0.85.10

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

@@ -5,7 +5,7 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
 /**
  * Dialog component is a modal dialog that can be used to display information or prompt the user for input.
  * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.
- * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.
+ * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
  * The dialog can be controlled solely through the `visible` property, no trigger element is required.
@@ -77,11 +77,13 @@ declare class Dialog extends Dialog_base {
     visible: boolean;
     /**
      * The z-index of the dialog
+     *
+     * The backdrop will have z-index of `zIndex - 1`
      * @default 1000
      */
     zIndex: number;
     /**
-     * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), or 'large' (992px width)
+     * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
      * @default small
      */
     size: DialogSize;
@@ -165,6 +167,13 @@ declare class Dialog extends Dialog_base {
     protected lastActiveElement: HTMLElement | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Applies the z-index to the dialog and backdrop elements.
+     * The dialog will have a z-index of `zIndex` and the backdrop will have a z-index of `zIndex - 1`.
+     *
+     * @internal
+     */
+    private applyZIndex;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     protected updated(changedProperties: PropertyValues): Promise<void>;
     /**

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

@@ -22,7 +22,7 @@ import styles from './dialog.styles';
 /**
  * Dialog component is a modal dialog that can be used to display information or prompt the user for input.
  * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.
- * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.
+ * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
  * The dialog can be controlled solely through the `visible` property, no trigger element is required.
@@ -90,11 +90,13 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         this.visible = DEFAULTS.VISIBLE;
         /**
          * The z-index of the dialog
+         *
+         * The backdrop will have z-index of `zIndex - 1`
          * @default 1000
          */
         this.zIndex = DEFAULTS.Z_INDEX;
         /**
-         * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), or 'large' (992px width)
+         * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
          * @default small
          */
         this.size = DEFAULTS.SIZE;
@@ -203,11 +205,22 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         this.focusBackToTrigger();
         DialogEventManager.onDestroyedDialog(this);
     }
+    /**
+     * Applies the z-index to the dialog and backdrop elements.
+     * The dialog will have a z-index of `zIndex` and the backdrop will have a z-index of `zIndex - 1`.
+     *
+     * @internal
+     */
+    applyZIndex() {
+        var _a;
+        this.style.setProperty('z-index', `${this.zIndex}`);
+        (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.style.setProperty('z-index', `${this.zIndex - 1}`);
+    }
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.setAttribute('aria-modal', 'true');
         this.setupAriaLabelledDescribedBy();
-        this.style.zIndex = `${this.zIndex}`;
+        this.applyZIndex();
         DialogEventManager.onCreatedDialog(this);
     }
     async updated(changedProperties) {
@@ -221,7 +234,12 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
             await this.isOpenUpdated(oldValue, this.visible);
         }
         if (changedProperties.has('zIndex')) {
-            this.setAttribute('z-index', `${this.zIndex}`);
+            // If zIndex is not set, use the default value
+            // This is to ensure that the dialog has always a z-index set even if not explicitly defined
+            if (this.zIndex === null) {
+                this.zIndex = DEFAULTS.Z_INDEX;
+            }
+            this.applyZIndex();
         }
         if (changedProperties.has('variant')) {
             this.updateFooterButtonColors(this.variant);

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

@@ -15,6 +15,6 @@ declare const DEFAULTS: {
     readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly FOCUS_TRAP: true;
 };
-declare const DIALOG_SIZE: readonly ["small", "medium", "large"];
+declare const DIALOG_SIZE: readonly ["small", "medium", "large", "xlarge", "fullscreen"];
 declare const DIALOG_ROLE: readonly ["dialog", "alertdialog"];
 export { TAG_NAME, DEFAULTS, DIALOG_SIZE, DIALOG_ROLE, DIALOG_VARIANT };

package/dist/components/dialog/dialog.constants.js

@@ -16,6 +16,6 @@ const DEFAULTS = {
     DISABLE_ARIA_HAS_POPUP: false,
     FOCUS_TRAP: true,
 };
-const DIALOG_SIZE = ['small', 'medium', 'large'];
+const DIALOG_SIZE = ['small', 'medium', 'large', 'xlarge', 'fullscreen'];
 const DIALOG_ROLE = ['dialog', 'alertdialog'];
 export { TAG_NAME, DEFAULTS, DIALOG_SIZE, DIALOG_ROLE, DIALOG_VARIANT };

package/dist/components/dialog/dialog.styles.js

@@ -7,13 +7,14 @@ const styles = css `
     --mdc-dialog-description-text-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-dialog-elevation-3: var(--mds-elevation-3);
     --mdc-dialog-width: 27rem; /* Default to small */
+    --mdc-dialog-padding: 1.5rem;
 
     background-color: var(--mdc-dialog-primary-background-color);
     border: 0.0625rem solid var(--mdc-dialog-border-color);
     border-radius: 0.5rem;
     filter: var(--mdc-dialog-elevation-3);
     display: none;
-    padding: 1rem;
+    padding: var(--mdc-dialog-padding);
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -40,6 +41,23 @@ const styles = css `
     --mdc-dialog-width: 62rem;
   }
 
+  :host([size='xlarge']) {
+    --mdc-dialog-width: 90%;
+  }
+
+  @media (max-width: 62rem) {
+    :host([size='xlarge']) {
+      --mdc-dialog-width: 100%;
+    }
+  }
+
+  :host([size='fullscreen']) {
+    --mdc-dialog-width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
   :host {
     width: var(--mdc-dialog-width);
     max-width: 100%;
@@ -91,14 +109,13 @@ const styles = css `
 
   :host::part(dialog-close-btn) {
     position: absolute;
-    top: 1rem;
-    right: 1rem;
-    cursor: pointer;
+    top: var(--mdc-dialog-padding);
+    right: var(--mdc-dialog-padding);
   }
 
   :host(:dir(rtl))::part(dialog-close-btn) {
     right: auto;
-    left: 1rem;
+    left: var(--mdc-dialog-padding);
   }
 
   mdc-text::part(text) {