@momentum-design/components 0.104.11 → 0.104.13

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

@@ -47,7 +47,7 @@ declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constr
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare class CardCheckbox extends CardCheckbox_base {
     /**

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -61,7 +61,7 @@ import styles from './cardcheckbox.styles';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
     constructor() {
@@ -101,6 +101,7 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
         if (!this.disabled) {
             this.checked = !this.checked;
         }
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     /**
      * Toggles the checked state when enter key is used

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

@@ -1,11 +1,13 @@
-import type { OverrideEventTarget, ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
 import type CardCheckbox from './cardcheckbox.component';
 import { SELECTION_TYPE } from './cardcheckbox.constants';
 type SelectionType = ValueOf<typeof SELECTION_TYPE>;
+type CardCheckboxChangeEvent = TypedCustomEvent<CardCheckbox>;
 interface Events {
     onClickEvent: OverrideEventTarget<MouseEvent, CardCheckbox>;
     onKeyDownEvent: OverrideEventTarget<KeyboardEvent, CardCheckbox>;
     onKeyUpEvent: OverrideEventTarget<KeyboardEvent, CardCheckbox>;
     onFocusEvent: OverrideEventTarget<FocusEvent, CardCheckbox>;
+    onChangeEvent: CardCheckboxChangeEvent;
 }
 export { SelectionType, Events };

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

@@ -46,7 +46,7 @@ declare const CardRadio_base: import("../../utils/mixins/index.types").Construct
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare class CardRadio extends CardRadio_base {
     /**

package/dist/components/cardradio/cardradio.component.js

@@ -61,7 +61,7 @@ import styles from './cardradio.styles';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
     constructor() {
@@ -96,7 +96,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
      * Dispatches the change event.
      */
     toggleChecked() {
-        if (this.disabled)
+        if (this.disabled || this.checked)
             return;
         const cards = this.getAllCardsWithinSameGroup();
         cards.forEach(card => {
@@ -106,6 +106,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
             card.checked = false;
         });
         this.checked = true;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     setDisabled(disabled) {
         this.setAttribute('aria-disabled', `${disabled}`);

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

@@ -1,9 +1,11 @@
-import type { OverrideEventTarget } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent } from '../../utils/types';
 import type CardRadio from './cardradio.component';
+type CardRadioChangeEvent = TypedCustomEvent<CardRadio>;
 interface Events {
     onClickEvent: OverrideEventTarget<MouseEvent, CardRadio>;
     onKeyDownEvent: OverrideEventTarget<KeyboardEvent, CardRadio>;
     onKeyUpEvent: OverrideEventTarget<KeyboardEvent, CardRadio>;
     onFocusEvent: OverrideEventTarget<FocusEvent, CardRadio>;
+    onChangeEvent: CardRadioChangeEvent;
 }
 export type { Events };

package/dist/components/checkbox/checkbox.component.js

@@ -170,7 +170,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         ?disabled="${this.disabled}"
       >
         <input
-          id="${this.id}"
+          id="${this.inputId}"
           type="checkbox"
           class="input"
           ?autofocus="${this.autofocus}"

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -41,9 +41,7 @@ class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
     }
     connectedCallback() {
         super.connectedCallback();
-        /** @internal */
         this.shouldRenderLabel = false;
-        this.id = '';
         this.disabled = undefined;
     }
     render() {

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

@@ -18,6 +18,12 @@ declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Co
  *
  */
 declare class FormfieldWrapper extends FormfieldWrapper_base {
+    /**
+    * Indicates the unique identifier for the native input element.
+    * Required for acccessibility.
+    * @internal
+    */
+    protected inputId: string;
     /**
      * The label of the input field. It is linked to the input field using the `for` attribute.
      */
@@ -28,11 +34,6 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * @default false
      */
     required: boolean;
-    /**
-     * The unique id of the input field. It is used to link the input field with the label.
-     * @default ''
-     */
-    id: string;
     /**
      * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
      */

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { v4 as uuidv4 } from 'uuid';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
@@ -33,17 +34,18 @@ import { getHelperIcon } from './formfieldwrapper.utils';
 class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
+        /**
+        * Indicates the unique identifier for the native input element.
+        * Required for acccessibility.
+        * @internal
+        */
+        this.inputId = `mdc-el-${uuidv4()}`;
         /**
          * The required attribute to indicate that the input field is required.
          * It is used to append a required indicator (*) to the label.
          * @default false
          */
         this.required = false;
-        /**
-         * The unique id of the input field. It is used to link the input field with the label.
-         * @default ''
-         */
-        this.id = '';
         /**
          * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
          */
@@ -66,7 +68,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
             return nothing;
         }
         return this.shouldRenderLabel
-            ? html `<label for="${this.id}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label">${this.label}</label>`
+            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label">${this.label}</label>`
             : html ` <mdc-text
           id="${DEFAULTS.HEADING_ID}"
           tagname="${MDC_TEXT_OPTIONS.TAGNAME}"
@@ -163,10 +165,6 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'required' }),
     __metadata("design:type", Object)
 ], FormfieldWrapper.prototype, "required", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], FormfieldWrapper.prototype, "id", void 0);
 __decorate([
     property({ reflect: true, attribute: 'help-text-type' }),
     __metadata("design:type", String)

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

@@ -284,7 +284,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
       class="input"
       part="mdc-input"
-      id="${this.id}"
+      id="${this.inputId}"
       name="${this.name}"
       .value="${live(this.value)}"
       ?disabled="${this.disabled}"

package/dist/components/radio/radio.component.js

@@ -276,7 +276,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         ?readonly="${this.readonly}"
       >
         <input
-          id="${this.id}"
+          id="${this.inputId}"
           type="radio"
           role="${ROLE.RADIO}"
           ?autofocus="${this.autofocus}"

package/dist/components/select/select.component.js

@@ -534,7 +534,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           </div>
         </div>
         <input
-          id="${this.id}"
+          id="${this.inputId}"
           part="native-input"
           name="${this.name}"
           type="text"

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

@@ -280,7 +280,7 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         <textarea
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           part="textarea"
-          id="${this.id}"
+          id="${this.inputId}"
           name="${this.name}"
           .value="${this.value}"
           ?disabled="${this.disabled}"

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

@@ -188,7 +188,7 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         part="container"
       >
         <input
-          id="${this.id}"
+          id="${this.inputId}"
           type="checkbox"
           part="toggle-input"
           role="${ROLE.CHECKBOX}"