@momentum-design/components 0.122.12 → 0.122.14

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

@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { VariantType } from './alertchip.types';
+declare const AlertChip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
@@ -27,7 +28,7 @@ import type { VariantType } from './alertchip.types';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
-declare class AlertChip extends Buttonsimple {
+declare class AlertChip extends AlertChip_base {
     /**
      * The variant of the alertchip. It supports 5 variants
      * - neutral

package/dist/components/alertchip/alertchip.component.js

@@ -11,6 +11,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import styles from './alertchip.styles';
 import { DEFAULTS } from './alertchip.constants';
 import { getAlertIcon } from './alertchip.utils';
@@ -40,7 +41,7 @@ import { getAlertIcon } from './alertchip.utils';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
-class AlertChip extends Buttonsimple {
+class AlertChip extends IconNameMixin(Buttonsimple) {
     constructor() {
         super(...arguments);
         /**
@@ -72,7 +73,7 @@ class AlertChip extends Buttonsimple {
     }
     render() {
         return html `
-      <mdc-icon part="icon" name="${getAlertIcon(this.variant)}" length-unit="rem" size="1"></mdc-icon>
+      <mdc-icon part="icon" name="${this.iconName || getAlertIcon(this.variant)}" length-unit="rem" size="1"></mdc-icon>
       ${this.label
             ? html `<mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}"
             >${this.label}</mdc-text

package/dist/components/alertchip/alertchip.styles.js

@@ -21,10 +21,14 @@ const styles = css `
 
   :host::part(label) {
     color: var(--mdc-chip-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
   :host::part(icon) {
     color: var(--mdc-chip-icon-color);
+    flex-shrink: 0;
   }
 
   :host([variant='neutral']:hover) {

package/dist/components/chip/chip.component.js

@@ -83,7 +83,7 @@ class Chip extends IconNameMixin(Buttonsimple) {
     renderIcon() {
         if (!this.iconName)
             return nothing;
-        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+        return html ` <mdc-icon part="icon" name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
     }
     render() {
         return html `

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

@@ -70,7 +70,7 @@ declare class MenuItemCheckbox extends MenuItemCheckbox_base {
     connectedCallback(): void;
     /**
      * Handles click events to toggle checked state
-     * If the menuitemcheckbox is disabled, it does nothing.
+     * If the menuitemcheckbox is disabled or soft-disabled, it does nothing.
      * If the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event.
      */
     private handleMouseClick;

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -91,11 +91,11 @@ class MenuItemCheckbox extends ControlTypeMixin(MenuItem) {
     }
     /**
      * Handles click events to toggle checked state
-     * If the menuitemcheckbox is disabled, it does nothing.
+     * If the menuitemcheckbox is disabled or soft-disabled, it does nothing.
      * If the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event.
      */
     handleMouseClick() {
-        if (this.disabled)
+        if (this.disabled || this.softDisabled)
             return;
         if (this.controlType !== 'controlled') {
             this.checked = !this.checked;

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

@@ -82,6 +82,7 @@ declare class MenuItemRadio extends MenuItemRadio_base {
     private updateOtherRadiosCheckedState;
     /**
      * Handles click events to set checked state and uncheck siblings in the same group and container.
+     * If the menuitemradio is disabled, soft-disabled, or already checked, it does nothing.
      * If the menuitemradio is not checked, it sets its checked state to `true`
      * and sets all other menuitemradio elements of the same group with checked state to `false`.
      */

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -116,11 +116,12 @@ class MenuItemRadio extends ControlTypeMixin(MenuItem) {
     }
     /**
      * Handles click events to set checked state and uncheck siblings in the same group and container.
+     * If the menuitemradio is disabled, soft-disabled, or already checked, it does nothing.
      * If the menuitemradio is not checked, it sets its checked state to `true`
      * and sets all other menuitemradio elements of the same group with checked state to `false`.
      */
     handleMouseClick() {
-        if (this.disabled || this.checked)
+        if (this.disabled || this.softDisabled || this.checked)
             return;
         if (this.controlType !== 'controlled') {
             this.updateOtherRadiosCheckedState();

package/dist/components/menupopover/menupopover.component.js

@@ -226,7 +226,7 @@ class MenuPopover extends Popover {
                     break;
                 }
                 case KEYS.ENTER: {
-                    if (!this.getSubMenuPopoverOfTarget(target)) {
+                    if (!this.getSubMenuPopoverOfTarget(target) && !target.hasAttribute('soft-disabled')) {
                         this.closeAllMenuPopovers();
                         this.fireMenuItemAction(target);
                         isKeyHandled = true;
@@ -267,7 +267,7 @@ class MenuPopover extends Popover {
             switch (event.key) {
                 case KEYS.SPACE: {
                     // If the target is a menu item, trigger its click event
-                    if (!target.matches(`${MENUITEMRADIO_TAGNAME}, ${MENUITEMCHECKBOX_TAGNAME}`)) {
+                    if (!target.matches(`${MENUITEMRADIO_TAGNAME}, ${MENUITEMCHECKBOX_TAGNAME}`) && !target.hasAttribute('soft-disabled')) {
                         // only close all menu popovers if the target is not opening a menu popover
                         if (!this.getSubMenuPopoverOfTarget(target)) {
                             this.closeAllMenuPopovers();
@@ -473,7 +473,7 @@ class MenuPopover extends Popover {
         // if the target is not a valid menu item or if the event is not trusted (
         // e.g., triggered by keydown originally), do nothing. Pressing space and enter
         // is handled separately in the respective handler.
-        if (!isValidMenuItem(target) || !event.isTrusted)
+        if (!isValidMenuItem(target) || !event.isTrusted || target.hasAttribute('soft-disabled'))
             return;
         // If the target has a submenu, show it and close other submenus on the same level
         if (this.getSubMenuPopoverOfTarget(target)) {

package/dist/components/staticchip/staticchip.component.js

@@ -65,7 +65,7 @@ class StaticChip extends IconNameMixin(Component) {
     renderIcon() {
         if (!this.iconName)
             return nothing;
-        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+        return html ` <mdc-icon part="icon" name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
     }
     render() {
         return html `

package/dist/components/staticchip/staticchip.styles.js

@@ -18,6 +18,16 @@ const styles = css `
     background-color: var(--mdc-chip-background-color);
   }
 
+  :host::part(icon) {
+    flex-shrink: 0;
+  }
+
+  :host::part(label) {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   :host([color='cobalt']) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-theme-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-normal);