@momentum-design/components 0.104.11 → 0.104.12

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/custom-elements.json

@@ -6873,6 +6873,14 @@
             }
           ],
           "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) Event that gets dispatched when the card's checked state changes.",
+              "reactName": "onChange"
+            },
             {
               "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
               "name": "click",
@@ -7071,7 +7079,7 @@
             "module": "/src/components/card/card.component"
           },
           "tagName": "mdc-cardcheckbox",
-          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
           "customElement": true
         }
       ],
@@ -7612,6 +7620,14 @@
             }
           ],
           "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) Event that gets dispatched when the card's checked state changes.",
+              "reactName": "onChange"
+            },
             {
               "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
               "name": "click",
@@ -7810,7 +7826,7 @@
             "module": "/src/components/card/card.component"
           },
           "tagName": "mdc-cardradio",
-          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
           "customElement": true
         }
       ],

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

@@ -45,9 +45,12 @@ import Component from '../../components/cardcheckbox';
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<CustomEvent<unknown> & {
+        target: Component;
+    }>;
     onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
     onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
     onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;

package/dist/react/cardcheckbox/index.js

@@ -47,13 +47,14 @@ import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
  * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
     events: {
+        onChange: 'change',
         onClick: 'click',
         onKeyDown: 'keydown',
         onKeyUp: 'keyup',

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

@@ -45,9 +45,12 @@ import Component from '../../components/cardradio';
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<CustomEvent<unknown> & {
+        target: Component;
+    }>;
     onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
     onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
     onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;

package/dist/react/cardradio/index.js

@@ -47,13 +47,14 @@ import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
  * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
     events: {
+        onChange: 'change',
         onClick: 'click',
         onKeyDown: 'keydown',
         onKeyUp: 'keyup',

package/package.json

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