@momentum-design/components 0.66.4 → 0.68.0

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

@@ -1,6 +1,6 @@
 import { CSSResult, nothing, PropertyValues } from 'lit';
 import { Component } from '../../models';
-declare const Card_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CardComponentMixin").CardComponentMixinInterface> & typeof Component;
+declare const Card_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CardComponentMixin").CardComponentMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CardAndDialogFooterMixin").CardAndDialogFooterMixinInterface> & typeof Component;
 /**
  * The card component allows users to organize information in a structured and tangible
  * format that is visually appealing. `mdc-card` is a static component that supports
@@ -51,21 +51,6 @@ declare class Card extends Card_base {
     * @internal
     */
     iconButtons?: Array<HTMLElement>;
-    /**
-     * The links in the footer section
-     * @internal
-     */
-    footerLink?: Array<HTMLElement>;
-    /**
-     * The primary buttons in the footer section
-     * @internal
-     */
-    footerButtonPrimary?: Array<HTMLElement>;
-    /**
-     * The secondary buttons in the footer section
-     * @internal
-     */
-    footerButtonSecondary?: Array<HTMLElement>;
     update(changedProperties: PropertyValues<Card>): void;
     /**
      * Handles the icon buttons in the header section and sets its variant for styling.
@@ -74,25 +59,9 @@ declare class Card extends Card_base {
      */
     private handleIconButtons;
     /**
-     * Filters and renders only the following content into the footer section and removes anything other than it
-     * - One mdc-link element in the footer-link slot
-     * - One secondary variant of the mdc-button element in the footer-button-secondary slot
-     * - One primary variant of the mdc-button element in the footer-button-primary slot
-     *
-     * @internal
-     */
-    private handleFooterSlot;
-    /**
-     * Updates the color of the footer buttons based on the variant.
-     * If the variant is promotional, the color is promotional, else default.
-     *
-     * @internal
-     */
-    private updateFooterButtonColors;
-    /**
-      * Renders the header of the card if title is provided
-      * @returns The header element
-      */
+    * Renders the header of the card if title is provided
+    * @returns The header element
+    */
     protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/card/card.component.js

@@ -11,9 +11,10 @@ import { html, nothing } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
 import styles from './card.styles';
 import { Component } from '../../models';
-import { VARIANTS, DEFAULTS } from './card.constants';
-import { BUTTON_COLORS, BUTTON_VARIANTS } from '../button/button.constants';
+import { DEFAULTS } from './card.constants';
+import { BUTTON_VARIANTS } from '../button/button.constants';
 import { CardComponentMixin } from '../../utils/mixins/CardComponentMixin';
+import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooterMixin';
 /**
  * The card component allows users to organize information in a structured and tangible
  * format that is visually appealing. `mdc-card` is a static component that supports
@@ -58,7 +59,7 @@ import { CardComponentMixin } from '../../utils/mixins/CardComponentMixin';
  * @slot after-body - This slot is for passing the content after the body
  *
  */
-class Card extends CardComponentMixin(Component) {
+class Card extends CardComponentMixin(CardAndDialogFooterMixin(Component)) {
     constructor() {
         super(...arguments);
         /**
@@ -84,70 +85,17 @@ class Card extends CardComponentMixin(Component) {
                 }
             }
         };
-        /**
-         * Filters and renders only the following content into the footer section and removes anything other than it
-         * - One mdc-link element in the footer-link slot
-         * - One secondary variant of the mdc-button element in the footer-button-secondary slot
-         * - One primary variant of the mdc-button element in the footer-button-primary slot
-         *
-         * @internal
-         */
-        this.handleFooterSlot = (tagname, variant = '') => {
-            var _a, _b, _c;
-            let arrayItems = [];
-            if (tagname === DEFAULTS.LINK && ((_a = this.footerLink) === null || _a === void 0 ? void 0 : _a.length)) {
-                arrayItems = this.footerLink;
-            }
-            else if (tagname === DEFAULTS.BUTTON && variant === BUTTON_VARIANTS.PRIMARY && ((_b = this.footerButtonPrimary) === null || _b === void 0 ? void 0 : _b.length)) {
-                arrayItems = this.footerButtonPrimary;
-            }
-            else if (tagname === DEFAULTS.BUTTON
-                && variant === BUTTON_VARIANTS.SECONDARY && ((_c = this.footerButtonSecondary) === null || _c === void 0 ? void 0 : _c.length)) {
-                arrayItems = this.footerButtonSecondary;
-            }
-            // if there are more than one instance, remove them.
-            for (let i = 1; i < arrayItems.length; i += 1) {
-                arrayItems[i].remove();
-            }
-            arrayItems.forEach((element) => {
-                // remove the element if it doesn't match with the tagname
-                if (!element.matches(tagname)) {
-                    element.remove();
-                }
-                // set the variant if it is provided
-                if (variant) {
-                    element.setAttribute('variant', variant);
-                }
-            });
-        };
-        /**
-         * Updates the color of the footer buttons based on the variant.
-         * If the variant is promotional, the color is promotional, else default.
-         *
-         * @internal
-         */
-        this.updateFooterButtonColors = () => {
-            const footerButtons = [...(this.footerButtonPrimary || []), ...(this.footerButtonSecondary || [])];
-            footerButtons === null || footerButtons === void 0 ? void 0 : footerButtons.forEach((button) => {
-                if (this.variant === VARIANTS.PROMOTIONAL) {
-                    button.setAttribute('color', BUTTON_COLORS.PROMOTIONAL);
-                }
-                else {
-                    button.setAttribute('color', BUTTON_COLORS.DEFAULT);
-                }
-            });
-        };
     }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('variant')) {
-            this.updateFooterButtonColors();
+            this.updateFooterButtonColors(this.variant);
         }
     }
     /**
-      * Renders the header of the card if title is provided
-      * @returns The header element
-      */
+    * Renders the header of the card if title is provided
+    * @returns The header element
+    */
     renderHeader() {
         if (!this.cardTitle) {
             return nothing;
@@ -166,13 +114,7 @@ class Card extends CardComponentMixin(Component) {
       <slot name="before-body"></slot>
       <slot name="body"></slot>
       <slot name="after-body"></slot>
-      <div part="footer">
-        <slot name="footer-link" @slotchange=${() => this.handleFooterSlot(DEFAULTS.LINK)}></slot>
-        <slot name="footer-button-secondary" 
-        @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.SECONDARY)}></slot>
-        <slot name="footer-button-primary" 
-        @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.PRIMARY)}></slot>
-      </div>
+      ${this.renderFooter()}
     </div>
     `;
     }
@@ -182,16 +124,4 @@ __decorate([
     queryAssignedElements({ slot: 'icon-button' }),
     __metadata("design:type", Array)
 ], Card.prototype, "iconButtons", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'footer-link' }),
-    __metadata("design:type", Array)
-], Card.prototype, "footerLink", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'footer-button-primary' }),
-    __metadata("design:type", Array)
-], Card.prototype, "footerButtonPrimary", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'footer-button-secondary' }),
-    __metadata("design:type", Array)
-], Card.prototype, "footerButtonSecondary", void 0);
 export default Card;

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

@@ -0,0 +1,150 @@
+import { CSSResult, PropertyValues } from 'lit';
+import { Component } from '../../models';
+import type { DialogRole, DialogSize, DialogVariant } from './dialog.types';
+declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<HTMLElement & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CardAndDialogFooterMixin").CardAndDialogFooterMixinInterface> & typeof Component;
+/**
+ * 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 interrupts the user and will block interaction with the rest of the application until it is closed.
+ *
+ * Dialog component have 2 variants: default and promotional.
+ *
+ * **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-text
+ *
+ * @tagname mdc-dialog
+ *
+ * @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)
+ *
+ * @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
+ *
+ * @slot dialog-body - Slot for the dialog body content
+ * @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.
+ *
+ */
+declare class Dialog extends Dialog_base {
+    /**
+     * The unique ID of the dialog
+     */
+    id: string;
+    /**
+     * The ID of the element that triggers the dialog
+     */
+    triggerId: string;
+    /**
+     * The visibility of the dialog
+     * @default false
+     */
+    visible: boolean;
+    /**
+     * The z-index of the dialog
+     * @default 1000
+     */
+    zIndex: number;
+    /**
+     * The size of the dialog, can be 'small' (432x332), 'medium' (656x356), or 'large' (992x412)
+     * @default small
+     */
+    size: DialogSize;
+    variant: DialogVariant;
+    /**
+     * Defines a string value for the aria-label attribute for close button accessibility
+     */
+    closeButtonAriaLabel: string | null;
+    /**
+     * Defines a string value for the aria-labelledby attribute that refers to the element
+     * labeling the dialog for accessibility
+     */
+    ariaLabelledby: string | null;
+    /**
+     * Defines a string value for the aria-label attribute when header is not used
+     */
+    ariaLabel: string | null;
+    /**
+     * Defines a string value to display as the title of the dialog
+     */
+    headerText: string;
+    /**
+     * Defines a string value to display as the under-header description of the dialog
+     */
+    descriptionText: string;
+    /**
+     * The html tag to be used for the header text
+     */
+    headerTagName: string;
+    /**
+     * The html tag to be used for the below-header description text
+     */
+    descriptionTagName: string;
+    /**
+     * Role of the dialog
+     * @default dialog
+     */
+    role: DialogRole;
+    /** @internal */
+    triggerElement: HTMLElement | null;
+    /** @internal */
+    private utils;
+    /** @internal */
+    backdropElement: HTMLElement | null;
+    constructor();
+    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    /**
+     * Sets up the trigger listener for focus trap
+     */
+    private setupTriggerListener;
+    /**
+     * Removes the trigger event listener
+     */
+    private removeEventListeners;
+    protected updated(changedProperties: PropertyValues): Promise<void>;
+    /**
+     * Handles the escape keydown event to close the dialog.
+     * @internal
+     * @param event - The keyboard event.
+     */
+    private onEscapeKeydown;
+    /**
+     * Handles the dialog visibility change.
+     * Handles the exit event to close the dialog.
+     *
+     * @param oldValue - The old value of the visible property.
+     * @param newValue - The new value of the visible property.
+     */
+    private isOpenUpdated;
+    /**
+     * Hides the dialog.
+     * @internal
+     */
+    hideDialog: () => void;
+    /**
+     * Sets the focusable elements inside the dialog.
+     */
+    private handleCreateDialogFirstUpdate;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Dialog;

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

@@ -0,0 +1,340 @@
+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 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';
+import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooterMixin';
+/**
+ * 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 interrupts the user and will block interaction with the rest of the application until it is closed.
+ *
+ * Dialog component have 2 variants: default and promotional.
+ *
+ * **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-text
+ *
+ * @tagname mdc-dialog
+ *
+ * @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)
+ *
+ * @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
+ *
+ * @slot dialog-body - Slot for the dialog body content
+ * @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.
+ *
+ */
+class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
+    constructor() {
+        super();
+        /**
+         * 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
+         */
+        this.visible = DEFAULTS.VISIBLE;
+        /**
+         * The z-index of the dialog
+         * @default 1000
+         */
+        this.zIndex = DEFAULTS.Z_INDEX;
+        /**
+         * The size of the dialog, can be 'small' (432x332), 'medium' (656x356), or 'large' (992x412)
+         * @default small
+         */
+        this.size = DEFAULTS.SIZE;
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * Defines a string value for the aria-label attribute for close button accessibility
+         */
+        this.closeButtonAriaLabel = null;
+        /**
+         * Defines a string value for the aria-labelledby attribute that refers to the element
+         * labeling the dialog for accessibility
+         */
+        this.ariaLabelledby = null;
+        /**
+         * 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
+         */
+        this.headerTagName = DEFAULTS.HEADER_TAG_NAME;
+        /**
+         * The html tag to be used for the below-header description text
+         */
+        this.descriptionTagName = DEFAULTS.DESCRIPTION_TAG_NAME;
+        /**
+         * Role of the dialog
+         * @default dialog
+         */
+        this.role = DEFAULTS.ROLE;
+        /** @internal */
+        this.triggerElement = null;
+        /** @internal */
+        this.backdropElement = null;
+        /**
+         * Handles the escape keydown event to close the dialog.
+         * @internal
+         * @param event - The keyboard event.
+         */
+        this.onEscapeKeydown = (event) => {
+            if (!this.visible || event.code !== 'Escape') {
+                return;
+            }
+            event.preventDefault();
+            this.hideDialog();
+        };
+        /**
+         * Hides the dialog.
+         * @internal
+         */
+        this.hideDialog = () => {
+            this.visible = false;
+        };
+        /** @internal */
+        this.utils = new DialogUtils(this);
+        document.addEventListener('keydown', this.onEscapeKeydown);
+    }
+    async firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.setupTriggerListener();
+        this.utils.setupAriaAttributes();
+        this.style.zIndex = `${this.zIndex}`;
+        DialogEventManager.onCreatedDialog(this);
+        if (this.visible) {
+            await this.handleCreateDialogFirstUpdate();
+        }
+    }
+    async disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListeners();
+        document.removeEventListener('keydown', this.onEscapeKeydown);
+        DialogEventManager.onDestroyedDialog(this);
+    }
+    /**
+     * Sets up the trigger listener for focus trap
+     */
+    setupTriggerListener() {
+        if (!this.triggerId)
+            return;
+        this.triggerElement = this.getRootNode().querySelector(`[id="${this.triggerId}"]`);
+        if (!this.triggerElement)
+            return;
+        this.addEventListener('focus-trap-exit', this.hideDialog);
+    }
+    /**
+     * Removes the trigger event listener
+     */
+    removeEventListeners() {
+        if (!this.triggerElement)
+            return;
+        this.removeEventListener('focus-trap-exit', this.hideDialog);
+    }
+    async updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('visible')) {
+            const oldValue = changedProperties.get('visible');
+            await this.isOpenUpdated(oldValue, this.visible);
+        }
+        if (changedProperties.has('zIndex')) {
+            this.setAttribute('z-index', `${this.zIndex}`);
+        }
+        if (changedProperties.has('variant')) {
+            this.updateFooterButtonColors(this.variant);
+        }
+        if (changedProperties.has('aria-label')
+            || changedProperties.has('aria-labelledby')) {
+            this.utils.setupAriaAttributes();
+        }
+    }
+    /**
+     * Handles the dialog visibility change.
+     * Handles the exit event to close the dialog.
+     *
+     * @param oldValue - The old value of the visible property.
+     * @param newValue - The new value of the visible property.
+     */
+    async isOpenUpdated(oldValue, newValue) {
+        var _a, _b, _c;
+        if (oldValue === newValue || !this.triggerElement) {
+            return;
+        }
+        if (newValue) {
+            this.enabledFocusTrap = true;
+            this.enabledPreventScroll = true;
+            this.utils.createBackdrop();
+            await this.handleCreateDialogFirstUpdate();
+            this.triggerElement.setAttribute('aria-expanded', 'true');
+            this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
+            DialogEventManager.onShowDialog(this);
+        }
+        else {
+            (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this.backdropElement = null;
+            (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
+            this.triggerElement.removeAttribute('aria-expanded');
+            this.triggerElement.removeAttribute('aria-haspopup');
+            (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.focus();
+            DialogEventManager.onHideDialog(this);
+        }
+    }
+    /**
+     * Sets the focusable elements inside the dialog.
+     */
+    async handleCreateDialogFirstUpdate() {
+        var _a, _b;
+        if (this.visible) {
+            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
+            await this.updateComplete;
+            (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
+        }
+    }
+    render() {
+        var _a;
+        return html `
+      ${this.headerText
+            ? html `
+      <div part="header">
+        <mdc-text
+          part="header-text"
+          tagname="${VALID_TEXT_TAGS[this.headerTagName.toUpperCase()]}"
+          type="${TYPE.BODY_LARGE_BOLD}"  
+        >
+          ${this.headerText}
+        </mdc-text>
+        <mdc-text
+          part="description-text"
+          tagname="${VALID_TEXT_TAGS[this.descriptionTagName.toUpperCase()]}"
+          type="${TYPE.BODY_MIDSIZE_REGULAR}"
+        >
+          ${(_a = this.descriptionText) !== null && _a !== void 0 ? _a : nothing}
+        </mdc-text>
+      </div>`
+            : nothing}
+      <mdc-button
+        part="dialog-close-btn"
+        prefix-icon="${DEFAULTS.CANCEL_ICON}"
+        variant="${BUTTON_VARIANTS.TERTIARY}"
+        size="${ICON_BUTTON_SIZES[20]}"
+        aria-label="${ifDefined(this.closeButtonAriaLabel) || ''}"
+        @click="${this.hideDialog}"
+      ></mdc-button>
+      <div part="body">
+        <slot name="dialog-body"></slot>
+      </div>
+      ${this.renderFooter()}
+    `;
+    }
+}
+Dialog.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Dialog.prototype, "id", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Dialog.prototype, "triggerId", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Dialog.prototype, "visible", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'z-index' }),
+    __metadata("design:type", Number)
+], Dialog.prototype, "zIndex", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Dialog.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Dialog.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, attribute: 'close-button-aria-label' }),
+    __metadata("design:type", Object)
+], Dialog.prototype, "closeButtonAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-labelledby' }),
+    __metadata("design:type", Object)
+], Dialog.prototype, "ariaLabelledby", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Dialog.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'header-text' }),
+    __metadata("design:type", String)
+], Dialog.prototype, "headerText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'description-text' }),
+    __metadata("design:type", String)
+], Dialog.prototype, "descriptionText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'header-tag-name' }),
+    __metadata("design:type", String)
+], Dialog.prototype, "headerTagName", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'description-tag-name' }),
+    __metadata("design:type", String)
+], Dialog.prototype, "descriptionTagName", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Dialog.prototype, "role", void 0);
+export default Dialog;