@momentum-design/components 0.134.0 → 0.134.1

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

@@ -1,6 +1,7 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/input';
 import type { Events } from '../../components/input/input.types';
+import type { Events as EventsInherited } from '../../utils/mixins/CharacterLimitMixin.ts';
 /**
  * mdc-input is a component that allows users to input text.
  *  It contains:
@@ -20,6 +21,8 @@ import type { Events } from '../../components/input/input.types';
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
+ * exceeds or restored.
  *
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -66,6 +69,8 @@ import type { Events } from '../../components/input/input.types';
  * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
  * @csspart input-text - The input field element.
  * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
+ * @csspart input-footer - The footer element that contains the helper text and character counter.
+ * @csspart character-counter - The character counter element.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClear: EventName<Events["onClearEvent"]>;
@@ -73,5 +78,6 @@ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;
     onFocus: EventName<Events["onFocusEvent"]>;
     onBlur: EventName<Events["onBlurEvent"]>;
+    onLimitExceeded: EventName<EventsInherited["onLimitExceededEvent"]>;
 }>;
 export default reactWrapper;

package/dist/react/input/index.js

@@ -21,6 +21,8 @@ import { TAG_NAME } from '../../components/input/input.constants';
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
+ * exceeds or restored.
  *
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -67,6 +69,8 @@ import { TAG_NAME } from '../../components/input/input.constants';
  * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
  * @csspart input-text - The input field element.
  * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
+ * @csspart input-footer - The footer element that contains the helper text and character counter.
+ * @csspart character-counter - The character counter element.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
@@ -78,6 +82,7 @@ const reactWrapper = createComponent({
         onChange: 'change',
         onFocus: 'focus',
         onBlur: 'blur',
+        onLimitExceeded: 'limitexceeded',
     },
     displayName: 'Input',
 });

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

@@ -1,6 +1,7 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/password';
-import type { Events as EventsInherited } from '../../components/input/input.types';
+import type { Events as EventsInherited0 } from '../../components/input/input.types';
+import type { Events as EventsInherited1 } from '../../utils/mixins/CharacterLimitMixin.ts';
 /**
  * `mdc-password` is a component that allows users to input their password.
  *  It extends the `mdc-input` component and provides additional features specific to password fields.
@@ -61,10 +62,11 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onInput: EventName<EventsInherited["onInputEvent"]>;
-    onChange: EventName<EventsInherited["onChangeEvent"]>;
-    onFocus: EventName<EventsInherited["onFocusEvent"]>;
-    onBlur: EventName<EventsInherited["onBlurEvent"]>;
-    onClear: EventName<EventsInherited["onClearEvent"]>;
+    onInput: EventName<EventsInherited0["onInputEvent"]>;
+    onChange: EventName<EventsInherited0["onChangeEvent"]>;
+    onFocus: EventName<EventsInherited0["onFocusEvent"]>;
+    onBlur: EventName<EventsInherited0["onBlurEvent"]>;
+    onLimitExceeded: EventName<EventsInherited1["onLimitExceededEvent"]>;
+    onClear: EventName<EventsInherited0["onClearEvent"]>;
 }>;
 export default reactWrapper;

package/dist/react/password/index.js

@@ -70,6 +70,7 @@ const reactWrapper = createComponent({
         onChange: 'change',
         onFocus: 'focus',
         onBlur: 'blur',
+        onLimitExceeded: 'limitexceeded',
         onClear: 'clear',
     },
     displayName: 'Password',

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

@@ -1,7 +1,8 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/searchfield';
 import type { Events } from '../../components/searchfield/searchfield.types';
-import type { Events as EventsInherited } from '../../components/input/input.types';
+import type { Events as EventsInherited0 } from '../../components/input/input.types';
+import type { Events as EventsInherited1 } from '../../utils/mixins/CharacterLimitMixin.ts';
 /**
  * `mdc-searchfield` component is used as an input field for search functionality.
  *
@@ -76,10 +77,11 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChipRemove: EventName<Events["onChipRemoveEvent"]>;
-    onInput: EventName<EventsInherited["onInputEvent"]>;
-    onChange: EventName<EventsInherited["onChangeEvent"]>;
-    onFocus: EventName<EventsInherited["onFocusEvent"]>;
-    onBlur: EventName<EventsInherited["onBlurEvent"]>;
-    onClear: EventName<EventsInherited["onClearEvent"]>;
+    onInput: EventName<EventsInherited0["onInputEvent"]>;
+    onChange: EventName<EventsInherited0["onChangeEvent"]>;
+    onFocus: EventName<EventsInherited0["onFocusEvent"]>;
+    onBlur: EventName<EventsInherited0["onBlurEvent"]>;
+    onClear: EventName<EventsInherited0["onClearEvent"]>;
+    onLimitExceeded: EventName<EventsInherited1["onLimitExceededEvent"]>;
 }>;
 export default reactWrapper;

package/dist/react/searchfield/index.js

@@ -85,6 +85,7 @@ const reactWrapper = createComponent({
         onFocus: 'focus',
         onBlur: 'blur',
         onClear: 'clear',
+        onLimitExceeded: 'limitexceeded',
     },
     displayName: 'Searchfield',
 });

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

@@ -3,6 +3,7 @@ import Component from '../../components/searchpopover';
 import type { Events } from '../../components/searchpopover/searchpopover.types';
 import type { Events as EventsInherited0 } from '../../components/input/input.types';
 import type { Events as EventsInherited1 } from '../../components/searchfield/searchfield.types';
+import type { Events as EventsInherited2 } from '../../utils/mixins/CharacterLimitMixin.ts';
 /**
  * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure
  * proper accessibility. This component should be used when search results or suggestions need to be displayed
@@ -88,5 +89,6 @@ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onBlur: EventName<EventsInherited0["onBlurEvent"]>;
     onClear: EventName<EventsInherited0["onClearEvent"]>;
     onChipRemove: EventName<EventsInherited1["onChipRemoveEvent"]>;
+    onLimitExceeded: EventName<EventsInherited2["onLimitExceededEvent"]>;
 }>;
 export default reactWrapper;

package/dist/react/searchpopover/index.js

@@ -91,6 +91,7 @@ const reactWrapper = createComponent({
         onBlur: 'blur',
         onClear: 'clear',
         onChipRemove: 'chipRemove',
+        onLimitExceeded: 'limitexceeded',
     },
     displayName: 'Searchpopover',
 });

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

@@ -1,6 +1,7 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/textarea';
 import type { Events } from '../../components/textarea/textarea.types';
+import type { Events as EventsInherited } from '../../utils/mixins/CharacterLimitMixin.ts';
 /**
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:
@@ -87,10 +88,10 @@ import type { Events } from '../../components/textarea/textarea.types';
  * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onLimitExceeded: EventName<Events["onLimitExceededEvent"]>;
     onInput: EventName<Events["onInputEvent"]>;
     onChange: EventName<Events["onChangeEvent"]>;
     onFocus: EventName<Events["onFocusEvent"]>;
     onBlur: EventName<Events["onBlurEvent"]>;
+    onLimitExceeded: EventName<EventsInherited["onLimitExceededEvent"]>;
 }>;
 export default reactWrapper;

package/dist/react/textarea/index.js

@@ -92,11 +92,11 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
-        onLimitExceeded: 'limitexceeded',
         onInput: 'input',
         onChange: 'change',
         onFocus: 'focus',
         onBlur: 'blur',
+        onLimitExceeded: 'limitexceeded',
     },
     displayName: 'Textarea',
 });

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

@@ -0,0 +1,37 @@
+import { LitElement, nothing, html } from 'lit';
+import type { Constructor } from './index.types';
+export interface CharacterLimitHost {
+    value: string;
+    helpText?: string;
+}
+interface Events {
+    onLimitExceededEvent: CustomEvent;
+}
+export type { Events };
+export declare class CharacterLimitMixinInterface {
+    maxCharacterLimit?: number;
+    characterLimitAnnouncement?: string;
+    protected characterLimitAriaLiveAnnouncer?: string;
+    protected handleCharacterOverflowStateChange(): void;
+    protected announceCharacterLimitWarning(): void;
+    protected renderCharacterCounter(): typeof nothing | ReturnType<typeof html>;
+}
+/**
+ * Mixin that provides character limit / counter functionality.
+ *
+ * This mixin is shared between `mdc-input` and `mdc-textarea` components.
+ * It provides:
+ * - `maxCharacterLimit` and `characterLimitAnnouncement` properties
+ * - Character overflow state tracking and `limitexceeded` event dispatching
+ * - Screen reader announcement logic for character limit warnings
+ * - `renderCharacterCounter()` method for rendering the counter UI
+ *
+ * The consuming component must:
+ * - Have a `value` property (string)
+ * - Have a `helpText` property (string)
+ * - Call `handleCharacterOverflowStateChange()` when `value` changes
+ * - Call `announceCharacterLimitWarning()` when `helpText` changes or value is updated
+ *
+ * @param superClass - The base class to extend.
+ */
+export declare const CharacterLimitMixin: <T extends Constructor<LitElement & CharacterLimitHost>>(superClass: T) => Constructor<CharacterLimitMixinInterface> & T;

package/dist/utils/mixins/CharacterLimitMixin.js

@@ -0,0 +1,124 @@
+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 { nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+/**
+ * Mixin that provides character limit / counter functionality.
+ *
+ * This mixin is shared between `mdc-input` and `mdc-textarea` components.
+ * It provides:
+ * - `maxCharacterLimit` and `characterLimitAnnouncement` properties
+ * - Character overflow state tracking and `limitexceeded` event dispatching
+ * - Screen reader announcement logic for character limit warnings
+ * - `renderCharacterCounter()` method for rendering the counter UI
+ *
+ * The consuming component must:
+ * - Have a `value` property (string)
+ * - Have a `helpText` property (string)
+ * - Call `handleCharacterOverflowStateChange()` when `value` changes
+ * - Call `announceCharacterLimitWarning()` when `helpText` changes or value is updated
+ *
+ * @param superClass - The base class to extend.
+ */
+export const CharacterLimitMixin = (superClass) => {
+    /**
+     * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
+     * exceeds or restored.
+     */
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * @internal
+             */
+            this.characterLimitExceedingFired = false;
+        }
+        /**
+         * Dispatches the character overflow state change event.
+         * @internal
+         */
+        dispatchCharacterOverflowStateChangeEvent() {
+            this.dispatchEvent(new CustomEvent('limitexceeded', {
+                detail: {
+                    currentCharacterCount: this.value.length,
+                    maxCharacterLimit: this.maxCharacterLimit,
+                    value: this.value,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * Handles the character overflow state change.
+         * Dispatches the character overflow state change event if the character limit is exceeded or restored.
+         */
+        handleCharacterOverflowStateChange() {
+            if (this.maxCharacterLimit) {
+                if (this.value.length > this.maxCharacterLimit && !this.characterLimitExceedingFired) {
+                    this.dispatchCharacterOverflowStateChangeEvent();
+                    this.characterLimitExceedingFired = true;
+                }
+                else if (this.value.length <= this.maxCharacterLimit && this.characterLimitExceedingFired) {
+                    this.dispatchCharacterOverflowStateChangeEvent();
+                    this.characterLimitExceedingFired = false;
+                }
+            }
+        }
+        /**
+         * Announces the character limit warning based on the current value length.
+         * If the value length exceeds the max character limit, the help text is announced (if help text is present).
+         * If the value length does not exceed the max character limit, then the character limit announcement is announced.
+         */
+        announceCharacterLimitWarning() {
+            this.characterLimitAriaLiveAnnouncer = '';
+            if (!this.maxCharacterLimit || this.value.length === 0) {
+                return;
+            }
+            if (this.helpText && this.value.length > this.maxCharacterLimit) {
+                this.updateComplete
+                    .then(() => {
+                    this.characterLimitAriaLiveAnnouncer = this.helpText;
+                })
+                    .catch(() => { });
+            }
+            else if (this.characterLimitAnnouncement && this.value.length <= this.maxCharacterLimit) {
+                this.characterLimitAriaLiveAnnouncer = this.characterLimitAnnouncement
+                    .replace('%{number-of-characters}', this.value.length.toString())
+                    .replace('%{max-character-limit}', this.maxCharacterLimit.toString());
+            }
+        }
+        /**
+         * Renders the character counter element.
+         */
+        renderCharacterCounter() {
+            if (!this.maxCharacterLimit) {
+                return nothing;
+            }
+            return html `
+        <mdc-text part="character-counter" tagname="span" type="body-midsize-regular">
+          ${this.value.length}/${this.maxCharacterLimit}
+        </mdc-text>
+      `;
+        }
+    }
+    __decorate([
+        property({ type: Number, attribute: 'max-character-limit' }),
+        __metadata("design:type", Number)
+    ], InnerMixinClass.prototype, "maxCharacterLimit", void 0);
+    __decorate([
+        property({ type: String, attribute: 'character-limit-announcement' }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "characterLimitAnnouncement", void 0);
+    __decorate([
+        state(),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "characterLimitAriaLiveAnnouncer", void 0);
+    return InnerMixinClass;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.134.0",
+  "version": "0.134.1",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"