@momentum-design/components 0.101.4 → 0.102.1

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

@@ -32,6 +32,8 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  * @slot trailing-text-side-header - slot for list item side header text.
  * @slot trailing-text-subline - slot for list item subline text.
  * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ * @slot content - content slot can be used to override the content completely. Be aware that
+ * this will override the default content of the list item.
  *
  * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
  * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
@@ -42,7 +44,11 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
  * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
- * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.
+ * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.
+ * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
+ * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.

package/dist/components/listitem/listitem.component.js

@@ -48,6 +48,8 @@ import { ListItemEventManager } from './listitem.events';
  * @slot trailing-text-side-header - slot for list item side header text.
  * @slot trailing-text-subline - slot for list item subline text.
  * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ * @slot content - content slot can be used to override the content completely. Be aware that
+ * this will override the default content of the list item.
  *
  * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
  * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
@@ -58,7 +60,11 @@ import { ListItemEventManager } from './listitem.events';
  *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
  * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
- * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.
+ * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.
+ * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
+ * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
@@ -252,21 +258,23 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
     }
     render() {
         return html `
-      <div part="leading">
-        ${this.renderLeadingControls()}
-        <div part="leading-text">
-          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
-          ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
-          ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+      <slot name="content">
+        <div part="leading">
+          ${this.renderLeadingControls()}
+          <div part="leading-text">
+            ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+            ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
+            ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+          </div>
         </div>
-      </div>
-      <div part="trailing">
-        <div part="trailing-text">
-          ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
-          ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+        <div part="trailing">
+          <div part="trailing-text">
+            ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
+            ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+          </div>
+          ${this.renderTrailingControls()}
         </div>
-        ${this.renderTrailingControls()}
-      </div>
+      </slot>
     `;
     }
 }

package/dist/components/listitem/listitem.styles.js

@@ -9,16 +9,21 @@ const styles = css `
     --mdc-listitem-secondary-label-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-listitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
     --mdc-listitem-column-gap: 0.75rem;
-    --mdc-listitem-padding-left-and-right: 0.75rem;
+    --mdc-listitem-padding-left-right: 0.75rem;
+    --mdc-listitem-padding-top-bottom: 0.5rem;
+    --mdc-listitem-cursor: pointer;
+    --mdc-listitem-width: 100%;
+    --mdc-listitem-height: auto;
   }
   :host {
     background-color: var(--mdc-listitem-default-background-color);
     column-gap: var(--mdc-listitem-column-gap);
-    cursor: pointer;
     display: flex;
     flex-direction: row;
-    padding: 0.5rem var(--mdc-listitem-padding-left-and-right);
-    width: 100%;
+    cursor: var(--mdc-listitem-cursor);
+    padding: var(--mdc-listitem-padding-top-bottom) var(--mdc-listitem-padding-left-right);
+    width: var(--mdc-listitem-width);
+    height: var(--mdc-listitem-height);
   }
   :host([variant='inset-rectangle']) {
     border-radius: 0.5rem;
@@ -29,7 +34,7 @@ const styles = css `
   :host::part(leading-text) {
     flex: 1;
     /** 2x of column gap on both ends of the listitem - 100% width */
-    width: calc(100% - (2 * var(--mdc-listitem-padding-left-and-right)));
+    width: calc(100% - (2 * var(--mdc-listitem-padding-left-right)));
   }
   :host::part(leading-text-primary-label),
   :host::part(leading-text-secondary-label),

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

@@ -0,0 +1,7 @@
+import Typewriter from './typewriter.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-typewriter']: Typewriter;
+    }
+}
+export default Typewriter;

package/dist/components/typewriter/index.js

@@ -0,0 +1,4 @@
+import Typewriter from './typewriter.component';
+import { TAG_NAME } from './typewriter.constants';
+Typewriter.register(TAG_NAME);
+export default Typewriter;

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

@@ -0,0 +1,192 @@
+import { CSSResult, PropertyValues } from 'lit';
+import { Component } from '../../models';
+import '../text';
+import type { TextType, TagName, TypewriterSpeed } from './typewriter.types';
+/**
+ * Typewriter component that creates a typewriter effect on text content.
+ * It uses the Text component internally, adding a progressive typing effect.
+ *
+ * The `type` attribute allows changing the text style (passed to the internal Text component).
+ * The `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).
+ * The default tag name is `p`.
+ *
+ * The `speed` attribute controls typing speed in milliseconds per character:
+ * - 'very-slow' = 240ms per character
+ * - 'slow' = 120ms per character
+ * - 'normal' = 60ms per character (default)
+ * - 'fast' = 20ms per character
+ * - 'very-fast' = 1ms per character
+ * - Or any numeric string representing milliseconds
+ *
+ * Advanced features:
+ * - Dynamic speed adjustment during typing
+ * - Chunked text addition via addTextChunk() method
+ * - Instant text addition via addInstantTextChunk() method or instant parameter
+ * - Mixed instant and animated chunks in queue
+ * - Continues typing in background tabs
+ * - Performance optimized for large text
+ * - maxQueueSize to limit memory usage from excessive queuing
+ * - event handling for typing completion and content changes
+ *
+ * The component includes accessibility features:
+ * - Screen readers announce the complete text, not character by character
+ * - Uses aria-live="polite" for dynamic content updates
+ * - Sets aria-busy during typing animation
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-typewriter
+ * @slot - Default slot for text content
+ *
+ * @csspart container - Container for the text element
+ * @csspart text - The text element (forwarded to mdc-text)
+ *
+ * @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.
+ *   Detail: \{ finalContent: string \}
+ * @event change - (React: onChange) Fired when the content of the typewriter changes.
+ *   Detail: \{ content: string, isTyping: boolean \}
+ */
+declare class Typewriter extends Component {
+    /**
+     * Specifies the text style to be applied to the internal text component.
+     * Uses the same types as the Text component.
+     * @default body-large-regular
+     */
+    type: TextType;
+    /**
+     * Specifies the HTML tag name for the text element. The default tag name is `p`.
+     * This attribute is optional. When set, it changes the tag name of the internal text element.
+     *
+     * Acceptable values include all valid tag names from the Text component.
+     */
+    tagname?: TagName;
+    /**
+     * Speed of the typewriter effect in milliseconds per character.
+     * Can be a string preset or a numeric string in milliseconds.
+     * - 'very-slow' = 240ms per character
+     * - 'slow' = 120ms per character
+     * - 'normal' = 60ms per character (default)
+     * - 'fast' = 20ms per character
+     * - 'very-fast' = 1ms per character
+     * - Or any numeric string representing milliseconds (e.g., '100')
+     * @default 'normal' (60ms per character)
+     */
+    speed: TypewriterSpeed;
+    /**
+     * Maximum number of text chunks that can be queued before oldest chunks are dropped.
+     * Set to prevent memory accumulation from excessive queuing.
+     * @default Number.MAX_SAFE_INTEGER (effectively unlimited)
+     */
+    maxQueueSize: number;
+    /**
+     * Internal state for the displayed text
+     * @internal
+     */
+    private displayedText;
+    /**
+     * Internal state to track the original text
+     * @internal
+     */
+    private originalText;
+    /**
+     * Character index for typing animation
+     * @internal
+     */
+    private currentIndex;
+    /**
+     * Typing animation timeout id
+     * @internal
+     */
+    private typingTimeout;
+    /**
+     * Set of pending setTimeout IDs for cleanup
+     * @internal
+     */
+    private pendingTimeouts;
+    /**
+     * Queue of text chunks to be added (limited to prevent memory issues)
+     * @internal
+     */
+    private textChunkQueue;
+    /**
+     * Stores previous text content for comparison
+     * @internal
+     */
+    private previousTextContent;
+    /**
+     * Whether the typing animation has completed
+     * @internal
+     */
+    private typingComplete;
+    /**
+     * Called when the element is first connected to the document
+     */
+    connectedCallback(): void;
+    /**
+     * Called when the element is disconnected from the document
+     */
+    disconnectedCallback(): void;
+    /**
+     * Helper to create tracked setTimeout that will be cleaned up on disconnect
+     */
+    private createTimeout;
+    /**
+     * Clear all pending timeouts
+     */
+    private clearAllTimeouts;
+    /**
+     * Clears the text chunk queue and stops processing
+     * Useful for resetting the component state
+     */
+    clearQueue(): void;
+    /**
+     * Adds a chunk of text to be typed out, optionally with a different speed
+     * @param text - The text to add
+     * @param speed - Optional speed override for this chunk
+     * @param instant - If true, text appears instantly without animation
+     */
+    addTextChunk(text: string, speed?: TypewriterSpeed, instant?: boolean): void;
+    /**
+     * Adds a chunk of text instantly without typing animation
+     * @param text - The text to add instantly
+     */
+    addInstantTextChunk(text: string): void;
+    /**
+     * Processes all chunks in the queue
+     */
+    private processChunkQueue;
+    /**
+     * Processes the next chunk in the queue
+     */
+    private processNextChunk;
+    /**
+     * Gets the typing delay in milliseconds per character
+     */
+    private getTypingDelayMs;
+    /**
+     * Responds to property changes
+     */
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Captures slot content and starts typewriter animation
+     */
+    private captureAndProcessContent;
+    /**
+     * Starts the typewriter animation
+     */
+    private startTypingAnimation;
+    /**
+     * Clears the typing animation timeout
+     */
+    private clearTypingAnimation;
+    /**
+     * Handler for slotchange event
+     */
+    private handleSlotChange;
+    /**
+     * Render method that uses mdc-text component internally with accessibility features
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Typewriter;