@momentum-design/components 0.98.1 → 0.99.0

package/dist/components/card/card.styles.js

@@ -106,8 +106,8 @@ const styles = css `
     margin-bottom: 0.5rem;
   }
 
-  :host::part(text) {
-    margin: unset;
+  mdc-text::part(text) {
+    margin: 0;
   }
 `;
 export default [hostFitContentStyles, styles];

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

@@ -0,0 +1,11 @@
+import Toast from './toast.component';
+import '../icon';
+import '../text';
+import '../button';
+import '../linkbutton';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-toast']: Toast;
+    }
+}
+export default Toast;

package/dist/components/toast/index.js

@@ -0,0 +1,8 @@
+import Toast from './toast.component';
+import { TAG_NAME } from './toast.constants';
+import '../icon';
+import '../text';
+import '../button';
+import '../linkbutton';
+Toast.register(TAG_NAME);
+export default Toast;

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

@@ -0,0 +1,101 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import { nothing } from 'lit';
+import { Component } from '../../models';
+import type { TagName } from '../text/text.types';
+import type { ToastVariant } from './toast.types';
+declare const Toast_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
+/**
+ * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.
+ * It supports success, warning, error, and custom messages, and is designed to be controlled externally.
+ *
+ * **Note**: When using `slot="toast-body-normal"` and `slot="toast-body-detailed"`, it's strongly recommended to wrap the content with `<mdc-text tagname="span">`.
+ * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-linkbutton
+ *
+ * @slot content-prefix - Slot for custom content before the icon (only for custom variant).
+ * @slot toast-body-normal - Slot for the main body content of the toast.
+ * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.
+ * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.
+ * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.
+ * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.
+ *
+ * @tagname mdc-toast
+ *
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.
+ *
+ * @csspart content-container - The container for the toast's main content, including icon, text, and close button.
+ * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.
+ * @csspart toast-content - The container for the header and body content of the toast.
+ * @csspart toast-header - The header text of the toast.
+ * @csspart footer - The container for the toast's footer, including toggle and action buttons.
+ * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
+ * @csspart toast-close-btn - The close button for the toast.
+ *
+ * @cssproperty --mdc-toast-background-color - Background color of the toast.
+ * @cssproperty --mdc-toast-border-color - Border color of the toast.
+ * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.
+ * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.
+ * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.
+ * @cssproperty --mdc-toast-width - Width of the toast.
+ * @cssproperty --mdc-toast-padding - Padding inside the toast.
+ */
+declare class Toast extends Toast_base {
+    /**
+     * Type of toast
+     * - Can be `custom`, `success`, `warning` or `error`.
+     * @default 'custom'
+     */
+    variant: ToastVariant;
+    /**
+     * Defines aria-label attribute for close button accessibility
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Defines a string value to display as the title of the toast
+     */
+    headerText?: string;
+    /**
+     * The html tag to be used for the header text
+     * @default 'h2'
+     */
+    headerTagName: TagName;
+    /**
+     * Defines aria-label attribute when header is not used
+     */
+    ariaLabel: string | null;
+    /**
+     * Defines the text shown on the linkbutton when detailed content is hidden.
+     */
+    showMoreText?: string;
+    /**
+     * Defines the text shown on the linkbutton when detailed content is visible.
+     */
+    showLessText?: string;
+    private isDetailVisible;
+    private hasDetailedSlot;
+    private detailedElements;
+    private hasFooterButtons;
+    /**
+     * Fired when Close Button is clicked using mouse or keyboard.
+     * This method dispatches the close event.
+     * It is used to notify that the toast should be closed.
+     */
+    private closeToast;
+    private toggleDetailVisibility;
+    private updateDetailedSlotPresence;
+    private updateFooterButtonsPresence;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected renderIcon(iconName: string): import("lit-html").TemplateResult<1> | typeof nothing;
+    private shouldRenderToggleButton;
+    private renderToggleDetailButton;
+    protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected handleFooterSlot(tagname: string, variant?: string | undefined): void;
+    protected renderFooter(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Toast;

package/dist/components/toast/toast.component.js

@@ -0,0 +1,242 @@
+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 { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { Component } from '../../models';
+import { FooterMixin } from '../../utils/mixins/FooterMixin';
+import { TYPE } from '../text/text.constants';
+import { DEFAULTS } from './toast.constants';
+import { getIconNameForVariant } from './toast.utils';
+import styles from './toast.styles';
+/**
+ * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.
+ * It supports success, warning, error, and custom messages, and is designed to be controlled externally.
+ *
+ * **Note**: When using `slot="toast-body-normal"` and `slot="toast-body-detailed"`, it's strongly recommended to wrap the content with `<mdc-text tagname="span">`.
+ * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-linkbutton
+ *
+ * @slot content-prefix - Slot for custom content before the icon (only for custom variant).
+ * @slot toast-body-normal - Slot for the main body content of the toast.
+ * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.
+ * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.
+ * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.
+ * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.
+ *
+ * @tagname mdc-toast
+ *
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.
+ *
+ * @csspart content-container - The container for the toast's main content, including icon, text, and close button.
+ * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.
+ * @csspart toast-content - The container for the header and body content of the toast.
+ * @csspart toast-header - The header text of the toast.
+ * @csspart footer - The container for the toast's footer, including toggle and action buttons.
+ * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
+ * @csspart toast-close-btn - The close button for the toast.
+ *
+ * @cssproperty --mdc-toast-background-color - Background color of the toast.
+ * @cssproperty --mdc-toast-border-color - Border color of the toast.
+ * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.
+ * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.
+ * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.
+ * @cssproperty --mdc-toast-width - Width of the toast.
+ * @cssproperty --mdc-toast-padding - Padding inside the toast.
+ */
+class Toast extends FooterMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Type of toast
+         * - Can be `custom`, `success`, `warning` or `error`.
+         * @default 'custom'
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * The html tag to be used for the header text
+         * @default 'h2'
+         */
+        this.headerTagName = DEFAULTS.HEADER_TAG_NAME;
+        /**
+         * Defines aria-label attribute when header is not used
+         */
+        this.ariaLabel = null;
+        this.isDetailVisible = false;
+        this.hasDetailedSlot = false;
+        this.hasFooterButtons = '';
+    }
+    /**
+     * Fired when Close Button is clicked using mouse or keyboard.
+     * This method dispatches the close event.
+     * It is used to notify that the toast should be closed.
+     */
+    closeToast() {
+        const closeEvent = new CustomEvent('close', {
+            bubbles: true,
+            composed: true,
+            detail: { id: this.id },
+        });
+        this.dispatchEvent(closeEvent);
+    }
+    toggleDetailVisibility() {
+        this.isDetailVisible = !this.isDetailVisible;
+    }
+    updateDetailedSlotPresence() {
+        var _a, _b;
+        this.hasDetailedSlot = (_b = (_a = this.detailedElements) === null || _a === void 0 ? void 0 : _a.some((el) => { var _a; return (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })) !== null && _b !== void 0 ? _b : false;
+    }
+    updateFooterButtonsPresence() {
+        var _a, _b, _c, _d;
+        this.hasFooterButtons = ((_b = (_a = this.footerButtonPrimary) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 ||
+            ((_d = (_c = this.footerButtonSecondary) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0 ||
+            this.shouldRenderToggleButton() ? 'has-footer-buttons' : '';
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.updateDetailedSlotPresence();
+    }
+    renderIcon(iconName) {
+        if (!iconName)
+            return nothing;
+        return html `
+      <mdc-icon
+        name="${iconName}"
+        size="${DEFAULTS.PREFIX_ICON_SIZE}"
+        part="toast-prefix-icon"
+      ></mdc-icon>
+    `;
+    }
+    shouldRenderToggleButton() {
+        return this.hasDetailedSlot && this.showMoreText && this.showLessText;
+    }
+    renderToggleDetailButton() {
+        if (!this.shouldRenderToggleButton())
+            return nothing;
+        return html `
+      <mdc-linkbutton
+        part="footer-button-toggle"
+        @click="${this.toggleDetailVisibility}"
+        icon-name="${this.isDetailVisible ? DEFAULTS.ARROW_UP_BOLD : DEFAULTS.ARROW_DOWN_BOLD}"
+      >
+        ${this.isDetailVisible ? this.showLessText : this.showMoreText}
+      </mdc-linkbutton>
+    `;
+    }
+    renderHeader() {
+        return this.headerText
+            ? html `
+          <mdc-text
+            part="toast-header"
+            tagname="${this.headerTagName}"
+            type="${TYPE.BODY_LARGE_BOLD}"
+          >
+            ${this.headerText}
+          </mdc-text>
+        `
+            : nothing;
+    }
+    handleFooterSlot(tagname, variant) {
+        super.handleFooterSlot(tagname, variant);
+        this.updateFooterButtonsPresence();
+    }
+    renderFooter() {
+        this.updateFooterButtonsPresence();
+        return html ` <slot name="footer">
+      <div part="footer" class="${this.hasFooterButtons}">
+        ${this.renderToggleDetailButton()}
+        <slot
+          name="footer-button-secondary"
+          @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, DEFAULTS.SECONDARY_BUTTON)}
+        ></slot>
+        <slot
+          name="footer-button-primary"
+          @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, DEFAULTS.PRIMARY_BUTTON)}
+        ></slot>
+      </div>
+    </slot>`;
+    }
+    render() {
+        var _a;
+        return html `
+      <div part="content-container">
+        ${this.variant === DEFAULTS.VARIANT
+            ? html `<slot name="content-prefix"></slot>`
+            : html `${this.renderIcon((_a = getIconNameForVariant(this.variant)) !== null && _a !== void 0 ? _a : '')}`}
+        <div part="toast-content">
+          ${this.renderHeader()}
+          <slot name="toast-body-normal"></slot>
+          <div ?hidden="${!this.isDetailVisible}">
+            <slot name="toast-body-detailed"></slot>
+          </div>
+        </div>
+        <mdc-button
+            part="toast-close-btn"
+            prefix-icon="${DEFAULTS.CANCEL_ICON}"
+            variant="${DEFAULTS.TERTIARY_BUTTON}"
+            size="${DEFAULTS.CLOSE_ICON_SIZE}"
+            aria-label="${ifDefined(this.closeButtonAriaLabel)}"
+            @click="${this.closeToast}"
+          ></mdc-button>
+      </div>
+      ${this.renderFooter()}
+    `;
+    }
+}
+Toast.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Toast.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, attribute: 'close-button-aria-label' }),
+    __metadata("design:type", String)
+], Toast.prototype, "closeButtonAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'header-text' }),
+    __metadata("design:type", String)
+], Toast.prototype, "headerText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'header-tag-name' }),
+    __metadata("design:type", String)
+], Toast.prototype, "headerTagName", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Toast.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'show-more-text' }),
+    __metadata("design:type", String)
+], Toast.prototype, "showMoreText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'show-less-text' }),
+    __metadata("design:type", String)
+], Toast.prototype, "showLessText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], Toast.prototype, "isDetailVisible", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], Toast.prototype, "hasDetailedSlot", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'toast-body-detailed', flatten: true }),
+    __metadata("design:type", Array)
+], Toast.prototype, "detailedElements", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Toast.prototype, "hasFooterButtons", void 0);
+export default Toast;

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

@@ -0,0 +1,26 @@
+declare const TAG_NAME: "mdc-toast";
+declare const TOAST_VARIANT: {
+    readonly CUSTOM: "custom";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+};
+declare const VARIANT_ICON_NAMES: {
+    readonly SUCCESS_ICON_NAME: "check-circle-bold";
+    readonly WARNING_ICON_NAME: "warning-bold";
+    readonly ERROR_ICON_NAME: "error-legacy-bold";
+};
+declare const DEFAULTS: {
+    readonly HEADER_TAG_NAME: "h2";
+    readonly CANCEL_ICON: "cancel-bold";
+    readonly ARROW_UP_BOLD: "arrow-up-bold";
+    readonly ARROW_DOWN_BOLD: "arrow-down-bold";
+    readonly PREFIX_ICON_SIZE: 1.5;
+    readonly CLOSE_ICON_SIZE: 20;
+    readonly BUTTON: "mdc-button";
+    readonly PRIMARY_BUTTON: "primary";
+    readonly SECONDARY_BUTTON: "secondary";
+    readonly TERTIARY_BUTTON: "tertiary";
+    readonly VARIANT: "custom";
+};
+export { TAG_NAME, TOAST_VARIANT, VARIANT_ICON_NAMES, DEFAULTS };

package/dist/components/toast/toast.constants.js

@@ -0,0 +1,28 @@
+import utils from '../../utils/tag-name';
+import { BUTTON_VARIANTS, ICON_BUTTON_SIZES, TAG_NAME as BUTTON_TAGNAME } from '../button/button.constants';
+const TAG_NAME = utils.constructTagName('toast');
+const TOAST_VARIANT = {
+    CUSTOM: 'custom',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    ERROR: 'error',
+};
+const VARIANT_ICON_NAMES = {
+    SUCCESS_ICON_NAME: 'check-circle-bold',
+    WARNING_ICON_NAME: 'warning-bold',
+    ERROR_ICON_NAME: 'error-legacy-bold',
+};
+const DEFAULTS = {
+    HEADER_TAG_NAME: 'h2',
+    CANCEL_ICON: 'cancel-bold',
+    ARROW_UP_BOLD: 'arrow-up-bold',
+    ARROW_DOWN_BOLD: 'arrow-down-bold',
+    PREFIX_ICON_SIZE: 1.5,
+    CLOSE_ICON_SIZE: ICON_BUTTON_SIZES[20],
+    BUTTON: BUTTON_TAGNAME,
+    PRIMARY_BUTTON: BUTTON_VARIANTS.PRIMARY,
+    SECONDARY_BUTTON: BUTTON_VARIANTS.SECONDARY,
+    TERTIARY_BUTTON: BUTTON_VARIANTS.TERTIARY,
+    VARIANT: TOAST_VARIANT.CUSTOM,
+};
+export { TAG_NAME, TOAST_VARIANT, VARIANT_ICON_NAMES, DEFAULTS };

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

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

package/dist/components/toast/toast.styles.js

@@ -0,0 +1,88 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-toast-background-color: var(--mds-color-theme-background-solid-primary-normal);
+    --mdc-toast-border-color: var(--mds-color-theme-outline-primary-normal);
+    --mdc-toast-header-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-toast-icon-color: var(--mdc-toast-header-text-color);
+    --mdc-toast-elevation-3: var(--mds-elevation-3);
+    --mdc-toast-width: 25rem;
+    --mdc-toast-padding: 1rem;
+
+    display: block;
+    width: var(--mdc-toast-width);
+    max-width: 100%;
+    padding: var(--mdc-toast-padding);
+    background-color: var(--mdc-toast-background-color);
+    border: 0.0625rem solid var(--mdc-toast-border-color);
+    border-radius: 0.5rem;
+    filter: var(--mdc-toast-elevation-3);
+  }
+
+  :host::part(toast-prefix-icon) {
+    color: var(--mdc-toast-icon-color);
+  }
+
+  :host([variant='success'])::part(toast-prefix-icon) {
+    --mdc-toast-icon-color: var(--mds-color-theme-text-success-normal);
+  }
+
+  :host([variant='warning'])::part(toast-prefix-icon) {
+    --mdc-toast-icon-color: var(--mds-color-theme-text-warning-normal);
+  }
+
+  :host([variant='error'])::part(toast-prefix-icon) {
+    --mdc-toast-icon-color: var(--mds-color-theme-text-error-normal);
+  }
+
+  :host::part(content-container) {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    align-self: stretch;
+  }
+
+  :host::part(toast-content) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 0.25rem;
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+
+  :host::part(toast-header) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    align-self: stretch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--mdc-toast-header-text-color);
+    font-weight: 500;
+    font-size: var(--mds-font-size-body-large);
+    line-height: var(--mds-font-lineheight-body-large);
+  }
+
+  :host::part(footer) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.75rem;
+    align-self: stretch;
+  }
+
+  .has-footer-buttons {
+    margin-top: 1rem;
+  }
+
+  :host::part(footer-button-toggle) {
+    text-decoration: none;
+  }
+
+  mdc-text::part(text) {
+    margin: 0;
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,7 @@
+import type { ValueOf } from '../../utils/types';
+import { TOAST_VARIANT } from './toast.constants';
+interface Events {
+    onCloseEvent: Event;
+}
+type ToastVariant = ValueOf<typeof TOAST_VARIANT>;
+export type { ToastVariant, Events };

package/dist/components/toast/toast.types.js

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

package/dist/components/toast/toast.utils.d.ts

@@ -0,0 +1,3 @@
+import type { ToastVariant } from './toast.types';
+declare const getIconNameForVariant: (variant: ToastVariant) => string | null;
+export { getIconNameForVariant };

package/dist/components/toast/toast.utils.js

@@ -0,0 +1,14 @@
+import { TOAST_VARIANT, VARIANT_ICON_NAMES } from './toast.constants';
+const getIconNameForVariant = (variant) => {
+    switch (variant) {
+        case TOAST_VARIANT.SUCCESS:
+            return VARIANT_ICON_NAMES.SUCCESS_ICON_NAME;
+        case TOAST_VARIANT.WARNING:
+            return VARIANT_ICON_NAMES.WARNING_ICON_NAME;
+        case TOAST_VARIANT.ERROR:
+            return VARIANT_ICON_NAMES.ERROR_ICON_NAME;
+        default:
+            return null;
+    }
+};
+export { getIconNameForVariant };