@momentum-design/components 0.66.4 → 0.68.0

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import CardRadio from './components/cardradio';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
 import Coachmark from './components/coachmark';
+import Dialog from './components/dialog';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -26,6 +27,7 @@ import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
+import MenuItem from './components/menuitem';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
 import Popover from './components/popover';
@@ -47,10 +49,9 @@ import Text from './components/text';
 import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
-import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
+import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
-import MenuItem from './components/menuitem';
 import MenuItemRadio from './components/menuitemradio';
 import MenuItemCheckbox from './components/menuitemcheckbox';
 import type { BadgeType } from './components/badge/badge.types';
@@ -60,6 +61,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, MenuItemRadio, MenuItemCheckbox, };
+export { AlertChip, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -15,6 +15,7 @@ import CardRadio from './components/cardradio';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
 import Coachmark from './components/coachmark';
+import Dialog from './components/dialog';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -27,6 +28,7 @@ import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
+import MenuItem from './components/menuitem';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
 import Popover from './components/popover';
@@ -48,16 +50,15 @@ import Text from './components/text';
 import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
-import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
+import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
-import MenuItem from './components/menuitem';
 import MenuItemRadio from './components/menuitemradio';
 import MenuItemCheckbox from './components/menuitemcheckbox';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, MenuItemRadio, MenuItemCheckbox, };
+export { AlertChip, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/dialog/index.d.ts

@@ -0,0 +1,51 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/dialog';
+/**
+ * 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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onShown: EventName<Event>;
+    onHidden: EventName<Event>;
+    onCreated: EventName<Event>;
+    onDestroyed: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/dialog/index.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/dialog';
+import { TAG_NAME } from '../../components/dialog/dialog.constants';
+/**
+ * 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.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onShown: 'shown',
+        onHidden: 'hidden',
+        onCreated: 'created',
+        onDestroyed: 'destroyed',
+    },
+    displayName: 'Dialog',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -15,6 +15,7 @@ export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
+export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';

package/dist/react/index.js

@@ -15,6 +15,7 @@ export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
+export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';

package/dist/utils/mixins/CardAndDialogFooterMixin.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, TemplateResult } from 'lit';
+import type { Constructor } from './index.types';
+export declare class CardAndDialogFooterMixinInterface {
+    footerLink?: Array<HTMLElement>;
+    footerButtonPrimary?: Array<HTMLElement>;
+    footerButtonSecondary?: Array<HTMLElement>;
+    protected updateFooterButtonColors(variant: string): void;
+    protected handleFooterSlot(tagname: string, variant?: string): void;
+    protected renderFooter(): TemplateResult;
+}
+export declare const CardAndDialogFooterMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardAndDialogFooterMixinInterface> & T;

package/dist/utils/mixins/CardAndDialogFooterMixin.js

@@ -0,0 +1,102 @@
+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);
+};
+/* eslint-disable max-classes-per-file */
+import { html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { DEFAULTS, VARIANTS } from '../../components/card/card.constants';
+import { BUTTON_COLORS, BUTTON_VARIANTS } from '../../components/button/button.constants';
+export const CardAndDialogFooterMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        /**
+      * Updates the color of the footer buttons based on the variant.
+      * If the variant is promotional, the color is promotional, else default.
+      *
+      * @internal
+      */
+        updateFooterButtonColors(variant) {
+            const footerButtons = [...(this.footerButtonPrimary || []), ...(this.footerButtonSecondary || [])];
+            footerButtons === null || footerButtons === void 0 ? void 0 : footerButtons.forEach((button) => {
+                if (variant === VARIANTS.PROMOTIONAL) {
+                    button.setAttribute('color', BUTTON_COLORS.PROMOTIONAL);
+                }
+                else {
+                    button.setAttribute('color', BUTTON_COLORS.DEFAULT);
+                }
+            });
+        }
+        /**
+        * 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
+        */
+        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);
+                }
+            });
+        }
+        /**
+         * Renders the footer of the card if footer-link,
+         * footer-button-primary, or footer-button-secondary slots are provided
+         * @returns The footer element
+         */
+        renderFooter() {
+            return html `<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>`;
+        }
+    }
+    __decorate([
+        queryAssignedElements({ slot: 'footer-link' }),
+        __metadata("design:type", Array)
+    ], InnerMixinClass.prototype, "footerLink", void 0);
+    __decorate([
+        queryAssignedElements({ slot: 'footer-button-primary' }),
+        __metadata("design:type", Array)
+    ], InnerMixinClass.prototype, "footerButtonPrimary", void 0);
+    __decorate([
+        queryAssignedElements({ slot: 'footer-button-secondary' }),
+        __metadata("design:type", Array)
+    ], InnerMixinClass.prototype, "footerButtonSecondary", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/dist/utils/mixins/FocusTrapMixin.js

@@ -9,7 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 /* eslint-disable max-classes-per-file */
 import { property } from 'lit/decorators.js';
-import { DEFAULTS as POPOVER_DEFAULTS } from '../../components/popover/popover.constants';
 export const FocusTrapMixin = (superClass) => {
     class FocusTrap extends superClass {
         constructor(...args) {
@@ -19,12 +18,12 @@ export const FocusTrapMixin = (superClass) => {
              * If true, focus will be restricted to the content within this component.
              * @default false
              */
-            this.enabledFocusTrap = POPOVER_DEFAULTS.FOCUS_TRAP;
+            this.enabledFocusTrap = false;
             /**
-             * Prevent outside scrolling when popover show.
+             * Prevent outside scrolling when element is shown.
              * @default false
              */
-            this.enabledPreventScroll = POPOVER_DEFAULTS.PREVENT_SCROLL;
+            this.enabledPreventScroll = false;
             /** @internal */
             this.focusTrapIndex = -1;
             /** @internal */
@@ -199,7 +198,7 @@ export const FocusTrapMixin = (superClass) => {
         /**
          * Sets the initial focus within the container.
          *
-         * @param prefferableElement - The index of the prefferable element to focus.
+         * @param prefferableElement - The index of the preferable element to focus.
          */
         setInitialFocus(prefferableElement = 0) {
             if (this.focusableElements.length === 0)

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.66.4"
+  "version": "0.68.0"
 }