@momentum-design/components 0.95.6 → 0.95.8

package/dist/components/stepperitem/stepperitem.component.js

@@ -0,0 +1,199 @@
+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 } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+import { ROLE } from '../../utils/roles';
+import { KEYS } from '../../utils/keys';
+import styles from './stepperitem.styles';
+import { DEFAULT, STATUS, STATUS_ICON } from './stepperitem.constants';
+/**
+ * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.
+ * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.
+ * The component supports various visual styles and can be customized with labels, help text, and step numbers.
+ *
+ * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
+ * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @tagname mdc-stepperitem
+ *
+ * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
+ *
+ * @csspart status-container - The container for the status icon or step number.
+ * @csspart label-container - The container for the label and help text.
+ * @csspart help-text-container - The container for the help text and error icon when applicable.
+ * @csspart status-icon - The icon representing the status of the stepper item.
+ * @csspart step-number - The text representing the step number.
+ * @csspart label - The text representing the label of the stepper item.
+ * @csspart help-text - The text providing additional information about the stepper item.
+ * @csspart help-icon - The icon representing an error in the stepper item.
+ *
+ * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.
+ * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.
+ * @cssproperty --mdc-stepperitem-label-color - The color of the label text.
+ * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.
+ * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.
+ */
+class StepperItem extends TabIndexMixin(Component) {
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = ROLE.LISTITEM;
+    }
+    constructor() {
+        super();
+        /**
+         * The variant of the stepper item, which can be `inline` or `stacked`.
+         * @default 'inline'
+         */
+        this.variant = DEFAULT.VARIANT;
+        /**
+         * The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.
+         * @default 'not-started'
+         */
+        this.status = DEFAULT.STATUS;
+        /**
+         * The label for the stepper item, which is displayed as the main text of the step.
+         * This label is typically used to describe the step or action that the step represents.
+         * @default ''
+         */
+        this.label = '';
+        this.addEventListener('keydown', this.handleKeyDown.bind(this));
+        this.addEventListener('keyup', this.handleKeyUp.bind(this));
+    }
+    /**
+     * Handles the keydown event on the stepperitem.
+     * If the key is 'Enter' or 'Space', the stepperitem is pressed.
+     * If the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.
+     * If the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application.
+     *
+     * @param event - The keyboard event.
+     */
+    handleKeyDown(event) {
+        if ([KEYS.ENTER, KEYS.SPACE].includes(event.key)) {
+            this.classList.add('pressed');
+            if (event.key === KEYS.ENTER) {
+                this.triggerClickEvent();
+            }
+            // Prevent default event behavior to avoid scrolling or double-triggering
+            event.preventDefault();
+        }
+    }
+    /**
+     * Triggers a click event on the stepper item.
+     */
+    triggerClickEvent() {
+        const clickEvent = new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+        });
+        this.dispatchEvent(clickEvent);
+    }
+    /**
+     * Handles the keyup event on the stepperitem.
+     * If the key is 'Enter' or 'Space', the stepperitem is clicked.
+     * If the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way.
+     *
+     * @param event - The keyboard event.
+     */
+    handleKeyUp(event) {
+        if ([KEYS.ENTER, KEYS.SPACE].includes(event.key)) {
+            this.classList.remove('pressed');
+            if (event.key === KEYS.SPACE) {
+                this.triggerClickEvent();
+            }
+        }
+    }
+    /**
+     * Renders the status icon based on the current status of the stepper item.
+     * - If the status is `completed`, it renders a check icon.
+     * - If the status is `current` or `error-current`, it renders a pencil icon.
+     * - If the status is `not-started` or `error-incomplete`, it renders the step number.
+     * - If the status is anything else, it renders nothing.
+     * @returns A template literal that renders the status icon based on the current status of the stepper item.
+     */
+    renderStatusIcon() {
+        if (this.status === STATUS.COMPLETED) {
+            return html `<mdc-icon part="status-icon" name=${STATUS_ICON.COMPLETED} length-unit="rem" size="1"></mdc-icon>`;
+        }
+        if (this.status === STATUS.ERROR_CURRENT || this.status === STATUS.CURRENT) {
+            return html `<mdc-icon part="status-icon" name=${STATUS_ICON.PENCIL} length-unit="rem" size="1"></mdc-icon>`;
+        }
+        if (this.stepNumber && (this.status === STATUS.NOT_STARTED || this.status === STATUS.ERROR_INCOMPLETE)) {
+            return html `<mdc-text part="step-number" tagname=${VALID_TEXT_TAGS.SPAN} type=${TYPE.BODY_MIDSIZE_REGULAR}
+        >${this.stepNumber}</mdc-text
+      >`;
+        }
+        return nothing;
+    }
+    /**
+     * Renders the help text for the stepper item.
+     * If the `helpText` property is not set, it returns nothing.
+     * @returns A template literal that renders the help text for the stepper item.
+     */
+    renderHelpText() {
+        if (!this.helpText) {
+            return nothing;
+        }
+        const helpTextContent = html `<mdc-text
+      part="help-text"
+      tagname=${VALID_TEXT_TAGS.SPAN}
+      type=${TYPE.BODY_MIDSIZE_REGULAR}
+      >${this.helpText}</mdc-text
+    >`;
+        if (this.status === STATUS.ERROR_INCOMPLETE || this.status === STATUS.ERROR_CURRENT) {
+            return html `<div part="help-text-container">
+        <mdc-icon part="help-icon" name=${STATUS_ICON.ERROR} length-unit="rem" size="1"></mdc-icon>
+        ${helpTextContent}
+      </div>`;
+        }
+        return helpTextContent;
+    }
+    render() {
+        return html ` <div part="status-container">${this.renderStatusIcon()}</div>
+      <div part="label-container">
+        ${this.label
+            ? html `<mdc-text part="label" tagname=${VALID_TEXT_TAGS.SPAN} type=${TYPE.BODY_MIDSIZE_REGULAR}
+              >${this.label}</mdc-text
+            >`
+            : nothing}
+        ${this.renderHelpText()}
+      </div>`;
+    }
+}
+StepperItem.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StepperItem.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StepperItem.prototype, "status", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StepperItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'help-text' }),
+    __metadata("design:type", String)
+], StepperItem.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'step-number' }),
+    __metadata("design:type", Number)
+], StepperItem.prototype, "stepNumber", void 0);
+export default StepperItem;

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

@@ -0,0 +1,22 @@
+declare const TAG_NAME: "mdc-stepperitem";
+declare const VARIANT: {
+    readonly INLINE: "inline";
+    readonly STACKED: "stacked";
+};
+declare const STATUS: {
+    readonly COMPLETED: "completed";
+    readonly CURRENT: "current";
+    readonly ERROR_CURRENT: "error-current";
+    readonly ERROR_INCOMPLETE: "error-incomplete";
+    readonly NOT_STARTED: "not-started";
+};
+declare const STATUS_ICON: {
+    readonly COMPLETED: "check-bold";
+    readonly ERROR: "error-legacy-badge-filled";
+    readonly PENCIL: "edit-bold";
+};
+declare const DEFAULT: {
+    VARIANT: "inline";
+    STATUS: "not-started";
+};
+export { TAG_NAME, VARIANT, STATUS, DEFAULT, STATUS_ICON };

package/dist/components/stepperitem/stepperitem.constants.js

@@ -0,0 +1,23 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('stepperitem');
+const VARIANT = {
+    INLINE: 'inline',
+    STACKED: 'stacked',
+};
+const STATUS = {
+    COMPLETED: 'completed',
+    CURRENT: 'current',
+    ERROR_CURRENT: 'error-current',
+    ERROR_INCOMPLETE: 'error-incomplete',
+    NOT_STARTED: 'not-started',
+};
+const STATUS_ICON = {
+    COMPLETED: 'check-bold',
+    ERROR: 'error-legacy-badge-filled',
+    PENCIL: 'edit-bold',
+};
+const DEFAULT = {
+    VARIANT: VARIANT.INLINE,
+    STATUS: STATUS.NOT_STARTED,
+};
+export { TAG_NAME, VARIANT, STATUS, DEFAULT, STATUS_ICON };

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

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

package/dist/components/stepperitem/stepperitem.styles.js

@@ -0,0 +1,157 @@
+import { css } from 'lit';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    gap: 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+
+    --mdc-stepperitem-status-container-background: transparent;
+    --mdc-stepperitem-status-container-border-color: transparent;
+    --mdc-stepperitem-label-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-stepperitem-help-text-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-stepperitem-label-container-background: transparent;
+  }
+
+  :host([variant='stacked']) {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  :host::part(label) {
+    color: var(--mdc-stepperitem-label-color);
+  }
+  :host::part(help-text) {
+    color: var(--mdc-stepperitem-help-text-color);
+  }
+
+  :host::part(status-container) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background-color: var(--mdc-stepperitem-status-container-background);
+    border: 1px solid var(--mdc-stepperitem-status-container-border-color);
+  }
+
+  :host::part(step-number) {
+    color: var(--mdc-stepperitem-label-color);
+  }
+
+  :host::part(label-container) {
+    background-color: var(--mdc-stepperitem-label-container-background);
+    border-radius: 0.5rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  :host([variant='stacked'])::part(label-container) {
+    max-width: 8.75rem;
+  }
+  :host([variant='stacked'])::part(label),
+  :host([variant='stacked'])::part(help-text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :host([status='error-current']),
+  :host([status='error-incomplete']) {
+    --mdc-stepperitem-help-text-color: var(--mds-color-theme-text-error-normal);
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-background-alert-error-normal);
+  }
+
+  :host([status='error-current'])::part(help-text-container),
+  :host([status='error-incomplete'])::part(help-text-container) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  :host([status='completed'])::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-control-active-normal);
+  }
+  :host([status='completed'])::part(status-icon) {
+    --mdc-icon-fill-color: var(--mds-color-theme-inverted-text-primary-normal);
+  }
+  :host([status='current'])::part(status-container) {
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-control-active-normal);
+  }
+  :host([status='error-current'])::part(status-container) {
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-outline-cancel-normal);
+    --mdc-stepperitem-status-container-background: none;
+  }
+  :host([status='error-incomplete'])::part(status-container),
+  :host([status='not-started'])::part(status-container) {
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-stepperitem-status-container-background: none;
+  }
+
+  :host([status='error-current'])::part(help-icon),
+  :host([status='error-incomplete'])::part(help-icon) {
+    --mdc-icon-fill-color: var(--mds-color-theme-text-error-normal);
+  }
+
+  :host(:hover) {
+    --mdc-stepperitem-label-container-background: var(--mds-color-theme-background-primary-hover);
+  }
+  :host(:active) {
+    --mdc-stepperitem-label-container-background: var(--mds-color-theme-background-primary-active);
+  }
+
+  :host([status='completed']:hover)::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-control-active-hover);
+  }
+  :host([status='completed']:active)::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-control-active-active);
+  }
+
+  :host([status='current']:hover)::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-control-active-hover);
+  }
+  :host([status='current']:active)::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-background-secondary-active);
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-control-active-hover);
+  }
+
+  :host([status='not-started']:hover)::part(status-container),
+  :host([status='error-incomplete']:hover)::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-background-secondary-hover);
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-outline-secondary-normal);
+  }
+  :host([status='not-started']:active)::part(status-container),
+  :host([status='error-incomplete']:active)::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-background-secondary-active);
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-outline-secondary-normal);
+  }
+
+  :host([status='error-current']:hover)::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-background-secondary-hover);
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-outline-cancel-normal);
+  }
+  :host([status='error-current']:active)::part(status-container) {
+    --mdc-stepperitem-status-container-background: var(--mds-color-theme-background-secondary-active);
+    --mdc-stepperitem-status-container-border-color: var(--mds-color-theme-outline-cancel-normal);
+  }
+
+  :host([status='error-current']:hover)::part(help-icon),
+  :host([status='error-incomplete']:hover)::part(help-icon) {
+    --mdc-icon-fill-color: var(--mds-color-theme-text-error-hover);
+  }
+  :host([status='error-current']:hover),
+  :host([status='error-incomplete']:hover) {
+    --mdc-stepperitem-help-text-color: var(--mds-color-theme-text-error-hover);
+  }
+  :host([status='error-current']:hover)::part(help-icon),
+  :host([status='error-incomplete']:hover)::part(help-icon) {
+    --mdc-icon-fill-color: var(--mds-color-theme-text-error-active);
+  }
+
+  :host([status='error-current']:active),
+  :host([status='error-incomplete']:active) {
+    --mdc-stepperitem-help-text-color: var(--mds-color-theme-text-error-active);
+  }
+`;
+export default [hostFitContentStyles, styles, ...hostFocusRingStyles()];

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

@@ -0,0 +1,11 @@
+import type { ValueOf } from '../../utils/types';
+import { VARIANT, STATUS } from './stepperitem.constants';
+type VariantType = ValueOf<typeof VARIANT>;
+type StatusType = ValueOf<typeof STATUS>;
+type StatusIconType = ValueOf<typeof STATUS>;
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onKeyUpEvent: KeyboardEvent;
+}
+export type { VariantType, StatusType, StatusIconType, Events };

package/dist/components/stepperitem/stepperitem.types.js

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

package/dist/components/toggle/toggle.component.js

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { KEYS } from '../../utils/keys';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { ROLE } from '../../utils/roles';
@@ -144,7 +145,7 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      */
     handleKeyDown(event) {
         var _a;
-        if (event.key === 'Enter') {
+        if (event.key === KEYS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }