@momentum-design/components 0.62.2 → 0.62.4

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

@@ -0,0 +1,100 @@
+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;
+/**
+ * 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
+ * the following features:
+ * - Image
+ * - Header
+ *    - Icon
+ *    - Title
+ *    - Subtitle
+ * - Body
+ *
+ * The card can either be vertically or horizontally oriented.
+ *
+ * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
+ *
+ * To make this card interactive, use the following slots:
+ * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
+ * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
+ * - `footer-button-primary`: This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ *
+ * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` 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-button-secondary - This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ *
+ * @tagname mdc-card
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ */
+declare class Card extends Card_base {
+    /**
+    * The icon buttons in the header section
+    * @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.
+     * It also limits the number of buttons to 3.
+     * @internal
+     */
+    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
+      */
+    protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Card;

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

@@ -0,0 +1,197 @@
+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 { 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 { CardComponentMixin } from '../../utils/mixins/CardComponentMixin';
+/**
+ * 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
+ * the following features:
+ * - Image
+ * - Header
+ *    - Icon
+ *    - Title
+ *    - Subtitle
+ * - Body
+ *
+ * The card can either be vertically or horizontally oriented.
+ *
+ * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
+ *
+ * To make this card interactive, use the following slots:
+ * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
+ * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
+ * - `footer-button-primary`: This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ *
+ * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` 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-button-secondary - This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ *
+ * @tagname mdc-card
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ */
+class Card extends CardComponentMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Handles the icon buttons in the header section and sets its variant for styling.
+         * It also limits the number of buttons to 3.
+         * @internal
+         */
+        this.handleIconButtons = () => {
+            var _a;
+            (_a = this.iconButtons) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+                if (!element.matches(DEFAULTS.BUTTON) && element.getAttribute('data-btn-type') !== 'icon') {
+                    element.remove();
+                }
+                else {
+                    element.setAttribute('variant', BUTTON_VARIANTS.TERTIARY);
+                    element.setAttribute('size', '32');
+                }
+            });
+            // limit to show only first 3 buttons defined in the slot
+            if (this.iconButtons && this.iconButtons.length > 3) {
+                for (let i = 3; i < this.iconButtons.length; i += 1) {
+                    this.iconButtons[i].remove();
+                }
+            }
+        };
+        /**
+         * 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();
+        }
+    }
+    /**
+      * Renders the header of the card if title is provided
+      * @returns The header element
+      */
+    renderHeader() {
+        if (!this.cardTitle) {
+            return nothing;
+        }
+        return html `<div part="header">
+      ${this.renderIcon()}
+      ${this.renderTitle()}
+      <div part="icon-button"><slot name="icon-button" @slotchange=${this.handleIconButtons}></slot></div>
+    </div>`;
+    }
+    render() {
+        return html `
+  ${this.renderImage()}
+    <div part="body">
+    ${this.renderHeader()}
+      <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>
+    </div>
+    `;
+    }
+}
+Card.styles = [...Component.styles, ...styles];
+__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/card/card.constants.d.ts

@@ -0,0 +1,22 @@
+declare const TAG_NAME: "mdc-card";
+declare const VARIANTS: {
+    readonly BORDER: "border";
+    readonly GHOST: "ghost";
+    readonly PROMOTIONAL: "promotional";
+};
+declare const ORIENTATIONS: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+declare const DEFAULTS: {
+    VARIANT: "border";
+    ORIENTATION: "vertical";
+    TITLE_TYPE: "heading-small-bold";
+    SUBTITLE_TYPE: "body-midsize-medium";
+    TAGNAME: "span";
+    ICON_SIZE: number;
+    ICON_LENGTH_UNIT: string;
+    LINK: "mdc-link";
+    BUTTON: "mdc-button";
+};
+export { TAG_NAME, DEFAULTS, VARIANTS, ORIENTATIONS };

package/dist/components/card/card.constants.js

@@ -0,0 +1,26 @@
+import utils from '../../utils/tag-name';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { TAG_NAME as BUTTON_TAG } from '../button/button.constants';
+import { TAG_NAME as LINK_TAG } from '../link/link.constants';
+const TAG_NAME = utils.constructTagName('card');
+const VARIANTS = {
+    BORDER: 'border',
+    GHOST: 'ghost',
+    PROMOTIONAL: 'promotional', // This is applicable only on interactive-card
+};
+const ORIENTATIONS = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+const DEFAULTS = {
+    VARIANT: VARIANTS.BORDER,
+    ORIENTATION: ORIENTATIONS.VERTICAL,
+    TITLE_TYPE: TYPE.HEADING_SMALL_BOLD,
+    SUBTITLE_TYPE: TYPE.BODY_MIDSIZE_MEDIUM,
+    TAGNAME: VALID_TEXT_TAGS.SPAN,
+    ICON_SIZE: 1.5,
+    ICON_LENGTH_UNIT: 'rem',
+    LINK: LINK_TAG,
+    BUTTON: BUTTON_TAG,
+};
+export { TAG_NAME, DEFAULTS, VARIANTS, ORIENTATIONS };

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

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

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

@@ -0,0 +1,79 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    align-items: flex-start;
+    border-radius: 0.5rem;
+    border: 1px solid var(--mds-color-theme-outline-primary-normal);
+    box-shadow: none;
+  transition: box-shadow 0.2s;
+  }
+  :host([variant='ghost']){
+    border-color: transparent;
+  }
+  :host([orientation="horizontal"]){
+    width: 40rem;
+  }
+
+  :host([orientation="vertical"]){
+    width: 20rem;
+    flex-direction: column;
+  }
+  
+  :host([orientation="vertical"])::part(image){
+    height: 12.5rem;
+    width: 100%;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+  
+  :host([orientation="horizontal"])::part(image){
+    width: 10rem;
+    height: 100%;
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  :host::part(header){
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  :host::part(icon){
+    margin-top: 0.25rem;
+  }
+
+  :host::part(body){
+    width: 100%;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::slotted([slot='body']){
+    padding-bottom: 0.5rem;
+    margin-top: 0.75rem;
+  }
+
+  :host([variant='promotional']){
+    border-color: var(--mds-color-theme-outline-promotion-normal);
+  }
+
+  :host::part(icon-button), :host::part(footer) {
+    margin-left: auto;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+  }
+  :host::part(footer){
+    gap: 1rem;
+  }
+  ::slotted([slot='footer-link']), 
+  ::slotted([slot='footer-button-primary']), 
+  ::slotted([slot='footer-button-secondary']){
+    margin-bottom: 0.5rem;
+  }
+
+`;
+export default [hostFitContentStyles, styles];

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

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { VARIANTS, ORIENTATIONS } from './card.constants';
+type CardVariant = ValueOf<typeof VARIANTS>;
+type CardOrientation = ValueOf<typeof ORIENTATIONS>;
+export { CardVariant, CardOrientation };

package/dist/components/card/card.types.js

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

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

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

package/dist/components/card/index.js

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

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

@@ -0,0 +1,37 @@
+import { CSSResult, nothing } from 'lit';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+declare const CardButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CardComponentMixin").CardComponentMixinInterface> & typeof Buttonsimple;
+/**
+ * cardbutton component looks like a card and behaves as a button component.
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * @tagname mdc-cardbutton
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It fires the click event when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It fires the click event when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+declare class CardButton extends CardButton_base {
+    connectedCallback(): void;
+    /**
+     * 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>;
+}
+export default CardButton;

package/dist/components/cardbutton/cardbutton.component.js

@@ -0,0 +1,61 @@
+import { html, nothing } from 'lit';
+import styles from './cardbutton.styles';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import Card from '../card/card.component';
+import { CardComponentMixin } from '../../utils/mixins/CardComponentMixin';
+/**
+ * cardbutton component looks like a card and behaves as a button component.
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * @tagname mdc-cardbutton
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It fires the click event when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It fires the click event when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+class CardButton extends CardComponentMixin(Buttonsimple) {
+    connectedCallback() {
+        super.connectedCallback();
+        this.active = undefined;
+        this.size = undefined;
+    }
+    /**
+     * Renders the header of the card if title is provided
+     * @returns The header element
+     */
+    renderHeader() {
+        if (!this.cardTitle) {
+            return nothing;
+        }
+        return html `<div part="header">
+     ${this.renderIcon()}
+     ${this.renderTitle()}
+   </div>`;
+    }
+    render() {
+        return html `
+      ${this.renderImage()}
+    <div part="body">
+    ${this.renderHeader()}
+      <slot name="before-body"></slot>
+      <slot name="body"></slot>
+      <slot name="after-body"></slot>
+    </div>
+  `;
+    }
+}
+CardButton.styles = [...Card.styles, ...styles];
+export default CardButton;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-cardbutton";
+export { TAG_NAME };

package/dist/components/cardbutton/cardbutton.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('cardbutton');
+export { TAG_NAME };

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

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

package/dist/components/cardbutton/cardbutton.styles.js

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :host(:hover) {
+    background-color: var(--mds-color-theme-background-primary-hover);
+  }
+
+  :host(:active) {
+    background-color: var(--mds-color-theme-background-primary-active);
+  }
+
+  :host([disabled]) {
+    background-color: var(--mds-color-theme-background-primary-ghost);
+    color: var(--mds-color-theme-text-primary-disabled);
+  }
+
+  :host([disabled])::part(image){
+    opacity: 0.5;
+  }
+`;
+export default [styles, ...hostFocusRingStyles()];

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

@@ -0,0 +1,7 @@
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onKeyUpEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+}
+export type { Events };

package/dist/components/cardbutton/cardbutton.types.js

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

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

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

package/dist/components/cardbutton/index.js

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