@momentum-design/components 0.127.5 → 0.127.6

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

@@ -78,7 +78,9 @@ declare class AnnouncementDialog extends Dialog {
      * The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
      * @default medium
      */
-    size: AnnouncementDialogSize;
+    get size(): AnnouncementDialogSize;
+    set size(value: AnnouncementDialogSize);
+    constructor();
     connectedCallback(): void;
     protected renderHeader(): import("lit-html").TemplateResult<1>;
     protected renderBody(): import("lit-html").TemplateResult<1>;

package/dist/components/announcementdialog/announcementdialog.component.js

@@ -80,13 +80,22 @@ import { DEFAULTS } from './announcementdialog.constants';
  * using the footer-link and footer-button slots is preferred
  */
 class AnnouncementDialog extends Dialog {
+    /**
+     * The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
+     * @default medium
+     */
+    get size() {
+        var _a, _b;
+        return ((_b = (_a = this.responsiveSettingsContext) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.forceFullscreenDialog)
+            ? 'fullscreen'
+            : this.internalSize;
+    }
+    set size(value) {
+        this.internalSize = value;
+    }
     constructor() {
-        super(...arguments);
-        /**
-         * The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
-         * @default medium
-         */
-        this.size = DEFAULTS.SIZE;
+        super();
+        this.internalSize = DEFAULTS.SIZE;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -126,6 +135,7 @@ __decorate([
 ], AnnouncementDialog.prototype, "illustration", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", String)
-], AnnouncementDialog.prototype, "size", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], AnnouncementDialog.prototype, "size", null);
 export default AnnouncementDialog;

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

@@ -75,6 +75,10 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * using the footer-link and footer-button slots is preferred
  */
 declare class Dialog extends Dialog_base {
+    /** @internal */
+    protected readonly responsiveSettingsContext: import("@lit/context").ContextConsumer<{
+        __context__: import("../responsivesettingsprovider/responsivesettingsprovider.types").ResponsiveSettings;
+    }, import("lit").ReactiveElement>;
     /**
      * The unique ID of the dialog
      */
@@ -99,11 +103,18 @@ declare class Dialog extends Dialog_base {
      * @default 1000
      */
     zIndex: number;
+    /**
+     * The internal value helps to restore original size when responsive settings disabled.
+     *
+     * @internal
+     */
+    protected internalSize: DialogSize;
     /**
      * 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;
+    get size(): DialogSize;
+    set size(value: DialogSize);
     /**
      * The variant of the dialog, can be 'default' or 'promotional'
      * @default default

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

@@ -17,6 +17,8 @@ import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
 import { FooterMixin } from '../../utils/mixins/FooterMixin';
 import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
+import providerUtils from '../../utils/provider';
+import ResponsiveSettingsProvider from '../responsivesettingsprovider';
 import { DEFAULTS } from './dialog.constants';
 import { DialogEventManager } from './dialog.events';
 import styles from './dialog.styles';
@@ -95,6 +97,13 @@ import styles from './dialog.styles';
 class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))) {
     constructor() {
         super(...arguments);
+        /** @internal */
+        this.responsiveSettingsContext = providerUtils.consume({
+            host: this,
+            context: ResponsiveSettingsProvider.Context,
+            subscribe: true,
+            syncProperties: ['size'],
+        });
         /**
          * The unique ID of the dialog
          */
@@ -114,10 +123,11 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
          */
         this.zIndex = DEFAULTS.Z_INDEX;
         /**
-         * 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
+         * The internal value helps to restore original size when responsive settings disabled.
+         *
+         * @internal
          */
-        this.size = DEFAULTS.SIZE;
+        this.internalSize = DEFAULTS.SIZE;
         /**
          * The variant of the dialog, can be 'default' or 'promotional'
          * @default default
@@ -202,6 +212,17 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             this.closeDialog();
         };
     }
+    /**
+     * 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
+     */
+    get size() {
+        var _a, _b;
+        return ((_b = (_a = this.responsiveSettingsContext) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.forceFullscreenDialog) ? 'fullscreen' : this.internalSize;
+    }
+    set size(value) {
+        this.internalSize = value;
+    }
     connectedCallback() {
         super.connectedCallback();
         // event listener can be added to the element directly, since dialog is a modal component
@@ -450,8 +471,9 @@ __decorate([
 ], Dialog.prototype, "zIndex", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", String)
-], Dialog.prototype, "size", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], Dialog.prototype, "size", null);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)