@momentum-design/components 0.117.4 → 0.118.0

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

@@ -0,0 +1,87 @@
+import { CSSResult } from 'lit';
+import Dialog from '../dialog/dialog.component';
+import type { IllustrationNames } from '../illustration/illustration.types';
+import type { AnnouncementDialogSize } from './announcementdialog.types';
+/**
+ * AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.
+ * It can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.
+ * The dialog is available in 4 sizes:  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.
+ * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
+ * remember the previously focused element before the dialog was opened.
+ *
+ * The dialog is a controlled component, meaning it does not have its own state management for visibility.
+ * Use the `visible` property to control the visibility of the dialog.
+ * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
+ * or Escape is pressed).
+ *
+ * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ *
+ * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
+ * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
+ *
+ * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
+ * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
+ * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ *
+ * @dependency mdc-button
+ * @dependency mdc-illustration
+ * @dependency mdc-text
+ *
+ * @tagname mdc-announcementdialog
+ *
+ * @event shown - (React: onShown) Dispatched when the dialog is shown
+ * @event hidden - (React: onHidden) Dispatched when the dialog is hidden
+ * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed
+ * (this does not hide the dialog)
+ *
+ * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section
+ * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog
+ * @cssproperty --mdc-dialog-border-color - border color of the dialog
+ * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog
+ * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog
+ * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
+ * @cssproperty --mdc-dialog-width - width of the dialog
+ * @cssproperty --mdc-dialog-height - height of the dialog
+ *
+ * @csspart body - The main body container that holds the illustration and content sections
+ * @csspart illustration-container - The container for the illustration section
+ * @csspart content-container - The container for the content section
+ * @csspart header-text - The header text
+ *
+ * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
+ * @slot dialog-body - Slot for the dialog body content
+ * @slot illustration-container - Slot for the illustration container section
+ * @slot content-container - Slot for the content (header, description, etc) section
+ * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
+ * using the footer-link and footer-button slots is preferred
+ */
+declare class AnnouncementDialog extends Dialog {
+    /**
+     * The illustration to display in the announcement dialog.
+     * This can be an image URL, icon name, or any other illustration identifier.
+     *
+     * Make sure to choose the right illustration respective the size (the filename includes the size information, i.e. threetwozero = 320px)
+     */
+    illustration?: IllustrationNames;
+    /**
+     * 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;
+    connectedCallback(): void;
+    protected renderHeader(): import("lit-html").TemplateResult<1>;
+    protected renderBody(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default AnnouncementDialog;

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

@@ -0,0 +1,131 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import Dialog from '../dialog/dialog.component';
+import { DIALOG_VARIANT } from '../dialog/dialog.constants';
+import styles from './announcementdialog.styles';
+import { DEFAULTS } from './announcementdialog.constants';
+/**
+ * AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.
+ * It can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.
+ * The dialog is available in 4 sizes:  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.
+ * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
+ * remember the previously focused element before the dialog was opened.
+ *
+ * The dialog is a controlled component, meaning it does not have its own state management for visibility.
+ * Use the `visible` property to control the visibility of the dialog.
+ * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
+ * or Escape is pressed).
+ *
+ * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ *
+ * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
+ * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
+ *
+ * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
+ * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
+ * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ *
+ * @dependency mdc-button
+ * @dependency mdc-illustration
+ * @dependency mdc-text
+ *
+ * @tagname mdc-announcementdialog
+ *
+ * @event shown - (React: onShown) Dispatched when the dialog is shown
+ * @event hidden - (React: onHidden) Dispatched when the dialog is hidden
+ * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed
+ * (this does not hide the dialog)
+ *
+ * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section
+ * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog
+ * @cssproperty --mdc-dialog-border-color - border color of the dialog
+ * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog
+ * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog
+ * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
+ * @cssproperty --mdc-dialog-width - width of the dialog
+ * @cssproperty --mdc-dialog-height - height of the dialog
+ *
+ * @csspart body - The main body container that holds the illustration and content sections
+ * @csspart illustration-container - The container for the illustration section
+ * @csspart content-container - The container for the content section
+ * @csspart header-text - The header text
+ *
+ * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
+ * @slot dialog-body - Slot for the dialog body content
+ * @slot illustration-container - Slot for the illustration container section
+ * @slot content-container - Slot for the content (header, description, etc) section
+ * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
+ * using the footer-link and footer-button slots is preferred
+ */
+class AnnouncementDialog extends Dialog {
+    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;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.variant = DIALOG_VARIANT.DEFAULT;
+    }
+    renderHeader() {
+        return html `${nothing}`;
+    }
+    renderBody() {
+        return html `
+      <div part="body">
+        <div part="illustration-container">
+          <slot name="illustration-container">
+            <mdc-illustration name="${ifDefined(this.illustration)}"></mdc-illustration>
+          </slot>
+        </div>
+        <div part="content-container">
+          <slot name="content-container">
+            <mdc-text
+              part="header-text"
+              tagname="${VALID_TEXT_TAGS[this.headerTagName.toUpperCase()]}"
+              type="${TYPE.HEADING_MIDSIZE_MEDIUM}"
+            >
+              ${this.headerText}
+            </mdc-text>
+            <slot name="description-container"> </slot>
+          </slot>
+        </div>
+      </div>
+    `;
+    }
+}
+AnnouncementDialog.styles = [...Dialog.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], AnnouncementDialog.prototype, "illustration", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], AnnouncementDialog.prototype, "size", void 0);
+export default AnnouncementDialog;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-announcementdialog";
+declare const ANNOUNCEMENT_DIALOG_SIZE: readonly ["medium", "large", "xlarge", "fullscreen"];
+declare const DEFAULTS: {
+    readonly SIZE: "medium";
+};
+export { TAG_NAME, DEFAULTS, ANNOUNCEMENT_DIALOG_SIZE };

package/dist/components/announcementdialog/announcementdialog.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('announcementdialog');
+const ANNOUNCEMENT_DIALOG_SIZE = ['medium', 'large', 'xlarge', 'fullscreen'];
+const DEFAULTS = {
+    SIZE: 'medium',
+};
+export { TAG_NAME, DEFAULTS, ANNOUNCEMENT_DIALOG_SIZE };

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/announcementdialog/announcementdialog.styles.js

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-announcementdialog-illustration-background-color: var(--mds-color-theme-background-solid-secondary-normal);
+
+    background-image: linear-gradient(
+      var(--mdc-announcementdialog-illustration-background-color) 0%,
+      var(--mdc-announcementdialog-illustration-background-color) 100%
+    );
+    background-size: 50% 100%;
+    background-position: left;
+    background-repeat: no-repeat;
+    max-height: 100vh;
+  }
+  :host(:dir(rtl)) {
+    background-position: right;
+  }
+  :host::part(body) {
+    margin-top: 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
+  }
+  :host::part(illustration-container) {
+    width: auto;
+  }
+
+  :host mdc-illustration {
+    width: auto;
+    margin-inline-start: 1rem;
+    margin-inline-end: 2rem;
+  }
+  :host::part(content-container) {
+    color: var(--mdc-dialog-description-text-color);
+    width: auto;
+    margin-inline-start: 2rem;
+    margin-inline-end: 1rem;
+  }
+
+  @media (max-width: 27rem) {
+    :host {
+      background-size: 0% 100%;
+    }
+    :host::part(illustration-container) {
+      display: none;
+    }
+    :host::part(content-container) {
+      margin-inline-start: 0;
+      margin-inline-end: 0;
+    }
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,6 @@
+import type { Events as DialogEvents } from '../dialog/dialog.types';
+import { ANNOUNCEMENT_DIALOG_SIZE } from './announcementdialog.constants';
+type AnnouncementDialogSize = (typeof ANNOUNCEMENT_DIALOG_SIZE)[number];
+interface Events extends DialogEvents {
+}
+export type { Events, AnnouncementDialogSize };

package/dist/components/announcementdialog/announcementdialog.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import Announcementdialog from './announcementdialog.component';
+import '../illustration';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-announcementdialog']: Announcementdialog;
+    }
+}
+export default Announcementdialog;

package/dist/components/announcementdialog/index.js

@@ -0,0 +1,6 @@
+import Announcementdialog from './announcementdialog.component';
+import { TAG_NAME } from './announcementdialog.constants';
+import '../illustration';
+import '../text';
+Announcementdialog.register(TAG_NAME);
+export default Announcementdialog;

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

@@ -1,4 +1,4 @@
-import { CSSResult, PropertyValues } from 'lit';
+import { CSSResult, PropertyValues, nothing } from 'lit';
 import { Component } from '../../models';
 import type { DialogRole, DialogSize, DialogVariant } from './dialog.types';
 declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
@@ -46,6 +46,7 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
+ * @cssproperty --mdc-dialog-height - height of the dialog
  *
  * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
  * @slot dialog-body - Slot for the dialog body content
@@ -217,6 +218,18 @@ declare class Dialog extends Dialog_base {
      * @internal
      */
     private focusBackToTrigger;
+    /**
+     * Abstracting the renderHeader to allow for overrides of
+     * extending components
+     * @internal
+     */
+    protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+     * Abstracting the renderBody to allow for overrides of
+     * extending components
+     * @internal
+     */
+    protected renderBody(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -64,6 +64,7 @@ import styles from './dialog.styles';
  * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
+ * @cssproperty --mdc-dialog-height - height of the dialog
  *
  * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
  * @slot dialog-body - Slot for the dialog body content
@@ -359,31 +360,49 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             this.lastActiveElement.focus();
         }
     }
-    render() {
-        return html `
-      ${this.headerText
+    /**
+     * Abstracting the renderHeader to allow for overrides of
+     * extending components
+     * @internal
+     */
+    renderHeader() {
+        return this.headerText
             ? html ` <div part="header-section">
-            <div part="header">
-              <slot name="header-prefix"></slot>
-              <mdc-text
-                part="header-text"
-                tagname="${VALID_TEXT_TAGS[this.headerTagName.toUpperCase()]}"
-                type="${TYPE.BODY_LARGE_BOLD}"
-              >
-                ${this.headerText}
-              </mdc-text>
-            </div>
-            ${this.descriptionText
+          <div part="header">
+            <slot name="header-prefix"></slot>
+            <mdc-text
+              part="header-text"
+              tagname="${VALID_TEXT_TAGS[this.headerTagName.toUpperCase()]}"
+              type="${TYPE.BODY_LARGE_BOLD}"
+            >
+              ${this.headerText}
+            </mdc-text>
+          </div>
+          ${this.descriptionText
                 ? html `<mdc-text
-                  part="description-text"
-                  tagname="${VALID_TEXT_TAGS[this.descriptionTagName.toUpperCase()]}"
-                  type="${TYPE.BODY_MIDSIZE_REGULAR}"
-                >
-                  ${this.descriptionText}
-                </mdc-text>`
+                part="description-text"
+                tagname="${VALID_TEXT_TAGS[this.descriptionTagName.toUpperCase()]}"
+                type="${TYPE.BODY_MIDSIZE_REGULAR}"
+              >
+                ${this.descriptionText}
+              </mdc-text>`
                 : nothing}
-          </div>`
-            : nothing}
+        </div>`
+            : nothing;
+    }
+    /**
+     * Abstracting the renderBody to allow for overrides of
+     * extending components
+     * @internal
+     */
+    renderBody() {
+        return html ` <div part="body">
+      <slot name="dialog-body"></slot>
+    </div>`;
+    }
+    render() {
+        return html `
+      ${this.renderHeader()}
       <mdc-button
         part="dialog-close-btn"
         prefix-icon="${DEFAULTS.CANCEL_ICON}"
@@ -392,10 +411,7 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
         aria-label="${ifDefined(this.closeButtonAriaLabel) || ''}"
         @click="${this.closeDialog}"
       ></mdc-button>
-      <div part="body">
-        <slot name="dialog-body"></slot>
-      </div>
-      ${this.renderFooter()}
+      ${this.renderBody()} ${this.renderFooter()}
     `;
     }
 }
@@ -418,7 +434,7 @@ __decorate([
 ], Dialog.prototype, "zIndex", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Dialog.prototype, "size", void 0);
 __decorate([
     property({ type: String, reflect: true }),

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

@@ -7,6 +7,7 @@ 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-height: auto;
     --mdc-dialog-padding: 1.5rem;
 
     background-color: var(--mdc-dialog-primary-background-color);
@@ -60,6 +61,7 @@ const styles = css `
 
   :host {
     width: var(--mdc-dialog-width);
+    height: var(--mdc-dialog-height);
     max-width: 100%;
   }
 

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

@@ -2,7 +2,7 @@ import type { TypedCustomEvent, ValueOf } from '../../utils/types';
 import type Dialog from './dialog.component';
 import { DIALOG_ROLE, DIALOG_SIZE, DIALOG_VARIANT } from './dialog.constants';
 type DialogRole = (typeof DIALOG_ROLE)[number];
-type DialogSize = ValueOf<typeof DIALOG_SIZE>;
+type DialogSize = (typeof DIALOG_SIZE)[number];
 type DialogVariant = ValueOf<typeof DIALOG_VARIANT>;
 interface Events {
     onShownEvent: TypedCustomEvent<Dialog, {