@momentum-design/components 0.27.3 → 0.27.5

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

@@ -10,6 +10,11 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  *
  * @dependency mdc-avatar
  *
+ * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ *
  * @tagname mdc-avatarbutton
  */
 declare class AvatarButton extends AvatarButton_base {

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -24,6 +24,11 @@ import styles from './avatarbutton.styles';
  *
  * @dependency mdc-avatar
  *
+ * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ *
  * @tagname mdc-avatarbutton
  */
 class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {

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

@@ -30,6 +30,11 @@ import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from
  *
  * @dependency mdc-icon
  *
+ * @event click - (React: onClick) This event is dispatched when the button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
+ * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
+ *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.

package/dist/components/button/button.component.js

@@ -41,6 +41,11 @@ import { getIconNameWithoutStyle, getIconSize } from './button.utils';
  *
  * @dependency mdc-icon
  *
+ * @event click - (React: onClick) This event is dispatched when the button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
+ * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
+ *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
@@ -152,8 +157,8 @@ class Button extends Buttonsimple {
     setSize(size) {
         const isIconType = this.typeInternal === BUTTON_TYPE_INTERNAL.ICON;
         const isValidSize = isIconType
-            ? (Object.values(ICON_BUTTON_SIZES).includes(size)
-                && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY))
+            ? Object.values(ICON_BUTTON_SIZES).includes(size)
+                && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
             : Object.values(PILL_BUTTON_SIZES).includes(size);
         this.setAttribute('size', isValidSize ? `${size}` : `${DEFAULTS.SIZE}`);
         this.iconSize = getIconSize(size);
@@ -178,7 +183,7 @@ class Button extends Buttonsimple {
      */
     inferButtonType() {
         var _a, _b;
-        const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().length;
+        const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().filter((node) => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
         if (slot && (this.prefixIcon || this.postfixIcon)) {
             this.typeInternal = BUTTON_TYPE_INTERNAL.PILL_WITH_ICON;
             this.setAttribute('data-btn-type', 'pill-with-icon');
@@ -194,21 +199,25 @@ class Button extends Buttonsimple {
     }
     render() {
         return html `
-      ${this.prefixIcon ? html `
-        <mdc-icon
-          name="${this.prefixIcon}" 
-          part="prefix-icon" 
-          size=${this.iconSize} 
-          length-unit="rem">
-        </mdc-icon>` : ''}
+      ${this.prefixIcon
+            ? html ` <mdc-icon
+            name="${this.prefixIcon}"
+            part="prefix-icon"
+            size=${this.iconSize}
+            length-unit="rem"
+          >
+          </mdc-icon>`
+            : ''}
       <slot @slotchange=${this.inferButtonType}></slot>
-      ${this.postfixIcon ? html `
-        <mdc-icon
-          name="${this.postfixIcon}" 
-          part="postfix-icon" 
-          size=${this.iconSize} 
-          length-unit="rem">
-        </mdc-icon>` : ''}
+      ${this.postfixIcon
+            ? html ` <mdc-icon
+            name="${this.postfixIcon}"
+            part="postfix-icon"
+            size=${this.iconSize}
+            length-unit="rem"
+          >
+          </mdc-icon>`
+            : ''}
     `;
     }
 }

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

@@ -8,6 +8,11 @@ declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constr
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
+ * @event click - (React: onClick) This event is dispatched when the button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
+ * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
+ *
  * @tagname mdc-buttonsimple
  */
 declare class Buttonsimple extends Buttonsimple_base {

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -19,6 +19,11 @@ import styles from './buttonsimple.styles';
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
+ * @event click - (React: onClick) This event is dispatched when the button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
+ * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
+ *
  * @tagname mdc-buttonsimple
  */
 class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {

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

@@ -13,6 +13,9 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  *
  * @tagname mdc-checkbox
  *
+ * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
+ *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
  * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
  * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.

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

@@ -29,6 +29,9 @@ import styles from './checkbox.styles';
  *
  * @tagname mdc-checkbox
  *
+ * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
+ *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
  * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
  * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.

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

@@ -17,6 +17,11 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * @tagname mdc-input
  *
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @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.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button

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

@@ -31,6 +31,11 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
  *
  * @tagname mdc-input
  *
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @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.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button

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

@@ -10,6 +10,9 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * @tagname mdc-radio
  *
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
+ *
  * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
  * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled

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

@@ -25,6 +25,9 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
  *
  * @tagname mdc-radio
  *
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
+ *
  * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
  * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled

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

@@ -19,6 +19,11 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * @dependency mdc-icon
  * @dependency mdc-text
  *
+ * @event click - (React: onClick) This event is dispatched when the tab is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
+ * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
+ *
  * @tagname mdc-tab
  *
  * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.

package/dist/components/tab/tab.component.js

@@ -32,6 +32,11 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
+ * @event click - (React: onClick) This event is dispatched when the tab is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
+ * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
+ *
  * @tagname mdc-tab
  *
  * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.

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

@@ -16,6 +16,9 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @tagname mdc-toggle
  *
+ * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
+ *
  * @cssproperty --mdc-toggle-width - width of the toggle
  * @cssproperty --mdc-toggle-height - height of the toggle
  * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact

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

@@ -31,6 +31,9 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
  *
  * @tagname mdc-toggle
  *
+ * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
+ *
  * @cssproperty --mdc-toggle-width - width of the toggle
  * @cssproperty --mdc-toggle-height - height of the toggle
  * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact

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

@@ -13,6 +13,8 @@ import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
  *
  * @tagname mdc-virtualizedlist
  *
+ * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ *
  * @slot - Client side List with nested list items.
  */
 declare class VirtualizedList extends Component {

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -24,6 +24,8 @@ import { DEFAULTS } from './virtualizedlist.constants';
  *
  * @tagname mdc-virtualizedlist
  *
+ * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ *
  * @slot - Client side List with nested list items.
  */
 class VirtualizedList extends Component {