@momentum-design/components 0.134.0 → 0.134.1

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

@@ -1,5 +1,6 @@
 import '../button';
 import '../icon';
+import '../screenreaderannouncer';
 import '../text';
 import '../toggletip';
 import Input from './input.component';

package/dist/components/input/index.js

@@ -1,5 +1,6 @@
 import '../button';
 import '../icon';
+import '../screenreaderannouncer';
 import '../text';
 import '../toggletip';
 import Input from './input.component';

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

@@ -3,7 +3,7 @@ import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import type { AutoCapitalizeType, AutoCompleteType, InputType } from './input.types';
-declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CharacterLimitMixin").CharacterLimitMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * mdc-input is a component that allows users to input text.
  *  It contains:
@@ -23,6 +23,8 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @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
@@ -69,6 +71,8 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @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 class Input extends Input_base implements AssociatedFormControl {
     /**
@@ -155,6 +159,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
      */
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     private setInputValidity;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Updates the value of the input field.
      * Sets the form value.
@@ -213,6 +218,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
      */
     protected renderTrailingButton(show?: boolean): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderInputElement(type: InputType, hidePlaceholder?: boolean): import("lit-html").TemplateResult<1>;
+    protected renderInputFooter(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
     static shadowRootOptions: {

package/dist/components/input/input.component.js

@@ -12,11 +12,12 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import FormfieldWrapper from '../formfieldwrapper';
-import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { KeyToActionMixin, ACTIONS, NAV_MODES } from '../../utils/mixins/KeyToActionMixin';
+import { CharacterLimitMixin } from '../../utils/mixins/CharacterLimitMixin';
 import { AUTO_CAPITALIZE, AUTO_COMPLETE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
 import styles from './input.styles';
 /**
@@ -38,6 +39,8 @@ import styles from './input.styles';
  * @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
@@ -84,8 +87,10 @@ import styles from './input.styles';
  * @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.
  */
-class Input extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
+class Input extends CharacterLimitMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {
         super(...arguments);
         /**
@@ -181,8 +186,23 @@ class Input extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(Da
         if (!this.inputElement.validity.valid && this.validationMessage) {
             this.inputElement.setCustomValidity(this.validationMessage);
         }
+        else if (this.maxCharacterLimit &&
+            this.value.length > this.maxCharacterLimit &&
+            this.helpTextType === VALIDATION.ERROR &&
+            this.helpText) {
+            this.inputElement.setCustomValidity(this.helpText);
+        }
         this.setValidity();
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.handleCharacterOverflowStateChange();
+        }
+        if (changedProperties.has('helpText')) {
+            this.announceCharacterLimitWarning();
+        }
+    }
     /**
      * Updates the value of the input field.
      * Sets the form value.
@@ -191,6 +211,7 @@ class Input extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(Da
     updateValue() {
         this.value = this.inputElement.value;
         this.internals.setFormValue(this.inputElement.value);
+        this.announceCharacterLimitWarning();
     }
     /**
      * Handles the input event of the input field.
@@ -342,6 +363,12 @@ class Input extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(Da
       @keydown=${this.handleKeyDown}
     />`;
     }
+    renderInputFooter() {
+        if (!this.helpText && !this.maxCharacterLimit) {
+            return nothing;
+        }
+        return html ` <div part="input-footer">${this.renderHelperText()} ${this.renderCharacterCounter()}</div> `;
+    }
     render() {
         return html `
       ${this.renderLabel()}
@@ -353,7 +380,13 @@ class Input extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(Da
         </div>
         <slot name="trailing-button">${this.renderTrailingButton()}</slot>
       </div>
-      ${this.helpText ? this.renderHelperText() : nothing}
+      <mdc-screenreaderannouncer
+        identity="${this.inputId}"
+        announcement="${ifDefined(this.characterLimitAriaLiveAnnouncer)}"
+        data-aria-live="polite"
+        delay="500"
+      ></mdc-screenreaderannouncer>
+      ${this.renderInputFooter()}
     `;
     }
 }

package/dist/components/input/input.styles.js

@@ -122,6 +122,26 @@ const styles = [
       opacity: 0;
       pointer-events: none;
     }
+
+    :host::part(input-footer) {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+
+    :host::part(character-counter) {
+      margin-left: auto;
+      color: var(--mdc-input-support-text-color);
+    }
+
+    :host([help-text-type='error'])::part(character-counter) {
+      color: var(--mdc-help-text-color);
+    }
+
+    :host([disabled])::part(character-counter) {
+      color: var(--mds-color-theme-text-primary-disabled);
+    }
   `,
     ...hostFocusRingStyles(true),
 ];

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

@@ -9,11 +9,13 @@ type InputChangeEvent = TypedCustomEvent<Input>;
 type InputFocusEvent = OverrideEventTarget<FocusEvent, Input>;
 type InputBlurEvent = OverrideEventTarget<FocusEvent, Input>;
 type InputClearEvent = TypedCustomEvent<Input>;
+type InputLimitExceededEvent = TypedCustomEvent<Input>;
 interface Events {
     onInputEvent: InputInputEvent;
     onChangeEvent: InputChangeEvent;
     onFocusEvent: InputFocusEvent;
     onBlurEvent: InputBlurEvent;
     onClearEvent: InputClearEvent;
+    onLimitExceededEvent: InputLimitExceededEvent;
 }
-export type { AutoCapitalizeType, AutoCompleteType, InputType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, Events, };
+export type { AutoCapitalizeType, AutoCompleteType, InputType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, InputLimitExceededEvent, Events, };

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

@@ -2,7 +2,7 @@ import { CSSResult, nothing, PropertyValueMap } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { AutoCapitalizeType } from '../input/input.types';
 import type { WrapType, AutoCompleteType } from './textarea.types';
-declare const Textarea_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Textarea_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CharacterLimitMixin").CharacterLimitMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:
@@ -130,18 +130,6 @@ declare class Textarea extends Textarea_base {
      * The minimum number of characters that the textarea field can accept.
      */
     minlength?: number;
-    /**
-     * The maximum character limit for the textarea field for character counter.
-     */
-    maxCharacterLimit?: number;
-    /**
-     * Template string for the announcement that will be read by screen readers when the max character limit is set.
-     * Consumers must use the placeholders `%{number-of-characters}` and `%{max-character-limit}` in the string,
-     * which will be dynamically replaced with the actual values at runtime.
-     * For example: `%{number-of-characters} out of %{max-character-limit} characters are typed.`
-     * Example output: "93 out of 140 characters are typed."
-     */
-    characterLimitAnnouncement?: string;
     /**
      * Controls whether the textarea is resizable via the resize button.
      * When set to false, the resize button will be hidden.
@@ -160,10 +148,6 @@ declare class Textarea extends Textarea_base {
      */
     inputElement: HTMLTextAreaElement;
     /** @internal */
-    private ariaLiveAnnouncer?;
-    /** @internal */
-    private characterLimitExceedingFired;
-    /** @internal */
     private resizeStartY;
     /** @internal */
     private resizeStartRows;
@@ -182,29 +166,12 @@ declare class Textarea extends Textarea_base {
      */
     handleValueChange(): void;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    /**
-     * Dispatches the character overflow state change event.
-     * @returns void
-     */
-    private dispatchCharacterOverflowStateChangeEvent;
-    /**
-     * Handles the character overflow state change.
-     * Dispatches the character overflow state change event if the character limit is exceeded or restored.
-     * @returns void
-     */
-    private handleCharacterOverflowStateChange;
     /**
      * Updates the value of the textarea field.
      * Sets the form value.
      * @returns void
      */
     private updateValue;
-    /**
-     * 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.
-     */
-    private announceMaxLengthWarning;
     /**
      * Handles the change event of the textarea field.
      * Updates the value and sets the validity of the textarea field.
@@ -216,7 +183,6 @@ declare class Textarea extends Textarea_base {
      * @param event - Event which contains information about the value change.
      */
     private onChange;
-    protected renderCharacterCounter(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderTextareaFooter(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
      * Handles the resize button keydown event for keyboard-based resizing.

package/dist/components/textarea/textarea.component.js

@@ -9,7 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { property, query, state } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 import { AUTO_CAPITALIZE } from '../input/input.constants';
@@ -18,6 +18,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { KeyDownHandledMixin } from '../../utils/mixins/KeyDownHandledMixin';
+import { CharacterLimitMixin } from '../../utils/mixins/CharacterLimitMixin';
 import { AUTO_COMPLETE, WRAP, DEFAULTS } from './textarea.constants';
 import styles from './textarea.styles';
 /**
@@ -105,7 +106,7 @@ import styles from './textarea.styles';
  * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
  * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
  */
-class Textarea extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
+class Textarea extends CharacterLimitMixin(KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))))) {
     constructor() {
         super(...arguments);
         /**
@@ -135,8 +136,6 @@ class Textarea extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
          */
         this.resizable = false;
         /** @internal */
-        this.characterLimitExceedingFired = false;
-        /** @internal */
         this.resizeStartY = 0;
         /** @internal */
         this.resizeStartRows = 0;
@@ -268,39 +267,7 @@ class Textarea extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         }
         // When helpText gets changed, we need to re-announce the max length warning
         if (changedProperties.has('helpText')) {
-            this.announceMaxLengthWarning();
-        }
-    }
-    /**
-     * Dispatches the character overflow state change event.
-     * @returns void
-     */
-    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.
-     * @returns void
-     */
-    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;
-            }
+            this.announceCharacterLimitWarning();
         }
     }
     /**
@@ -311,33 +278,7 @@ class Textarea extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
     updateValue() {
         this.value = this.textarea.value;
         this.internals.setFormValue(this.textarea.value);
-        this.announceMaxLengthWarning();
-    }
-    /**
-     * 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.
-     */
-    announceMaxLengthWarning() {
-        this.ariaLiveAnnouncer = '';
-        if (!this.maxCharacterLimit || this.value.length === 0) {
-            return;
-        }
-        if (this.helpText && this.value.length > this.maxCharacterLimit) {
-            // We need to assign the same value multiple times, when the input reaches the max limit,
-            // Lit does a `===` strict comparison and doesn't update the value
-            // Hence we need to manually wait for the update to complete and then assign the value.
-            this.updateComplete
-                .then(() => {
-                this.ariaLiveAnnouncer = this.helpText;
-            })
-                .catch(() => { });
-        }
-        else if (this.characterLimitAnnouncement && this.value.length <= this.maxCharacterLimit) {
-            this.ariaLiveAnnouncer = this.characterLimitAnnouncement
-                .replace('%{number-of-characters}', this.value.length.toString())
-                .replace('%{max-character-limit}', this.maxCharacterLimit.toString());
-        }
+        this.announceCharacterLimitWarning();
     }
     /**
      * Handles the change event of the textarea field.
@@ -354,16 +295,6 @@ class Textarea extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         const EventConstructor = event.constructor;
         this.dispatchEvent(new EventConstructor(event.type, event));
     }
-    renderCharacterCounter() {
-        if (!this.maxCharacterLimit) {
-            return nothing;
-        }
-        return html `
-      <mdc-text part="character-counter" tagname="span" type=${DEFAULTS.CHARACTER_COUNTER_TYPE}>
-        ${this.value.length}/${this.maxCharacterLimit}
-      </mdc-text>
-    `;
-    }
     renderTextareaFooter() {
         if (!this.helpText && !this.maxCharacterLimit) {
             return nothing;
@@ -427,7 +358,7 @@ class Textarea extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         ></textarea>
         <mdc-screenreaderannouncer
           identity="${this.inputId}"
-          announcement="${ifDefined(this.ariaLiveAnnouncer)}"
+          announcement="${ifDefined(this.characterLimitAriaLiveAnnouncer)}"
           data-aria-live="polite"
           delay="500"
         ></mdc-screenreaderannouncer>
@@ -488,14 +419,6 @@ __decorate([
     property({ type: Number }),
     __metadata("design:type", Number)
 ], Textarea.prototype, "minlength", void 0);
-__decorate([
-    property({ type: Number, attribute: 'max-character-limit' }),
-    __metadata("design:type", Number)
-], Textarea.prototype, "maxCharacterLimit", void 0);
-__decorate([
-    property({ type: String, attribute: 'character-limit-announcement' }),
-    __metadata("design:type", String)
-], Textarea.prototype, "characterLimitAnnouncement", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
@@ -508,8 +431,4 @@ __decorate([
     query('textarea'),
     __metadata("design:type", HTMLTextAreaElement)
 ], Textarea.prototype, "inputElement", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], Textarea.prototype, "ariaLiveAnnouncer", void 0);
 export default Textarea;

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

@@ -8,7 +8,6 @@ declare const AUTO_COMPLETE: {
     readonly ON: "on";
 };
 declare const DEFAULTS: {
-    readonly CHARACTER_COUNTER_TYPE: "body-midsize-regular";
     readonly ROWS: 5;
     readonly COLS: 40;
     readonly WRAP: "soft";

package/dist/components/textarea/textarea.constants.js

@@ -1,5 +1,4 @@
 import utils from '../../utils/tag-name';
-import { TYPE as FONT_TYPE } from '../text/text.constants';
 const TAG_NAME = utils.constructTagName('textarea');
 const WRAP = {
     HARD: 'hard',
@@ -10,7 +9,6 @@ const AUTO_COMPLETE = {
     ON: 'on',
 };
 const DEFAULTS = {
-    CHARACTER_COUNTER_TYPE: FONT_TYPE.BODY_MIDSIZE_REGULAR,
     ROWS: 5,
     COLS: 40,
     WRAP: WRAP.SOFT,