@momentum-design/components 0.129.44 → 0.129.46

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

@@ -3,7 +3,7 @@ import { CSSResult } from 'lit';
 import type { RoleType } from '../../utils/roles';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { IconButtonSize, PillButtonSize } from './button.types';
-declare const Button_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ButtonComponentMixin").ButtonComponentMixinInterface> & typeof Buttonsimple;
+declare const Button_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/OverflowMixin").OverflowMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ButtonComponentMixin").ButtonComponentMixinInterface> & typeof Buttonsimple;
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -68,6 +68,10 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-button-line-height - Line height of the button text
  */
 declare class Button extends Button_base {
+    /**
+     * @internal
+     */
+    protected buttonTextPart: HTMLSlotElement;
     /**
      * Specifies the size of the button in pixels. Available sizes depend on the button type:
      *
@@ -119,6 +123,10 @@ declare class Button extends Button_base {
      * @internal
      */
     private postfixFilledIconName?;
+    /**
+     * @internal
+     */
+    protected get overflowElement(): HTMLElement;
     update(changedProperties: PropertyValues): void;
     /**
      * Modifies the icon name based on the active state.

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

@@ -8,10 +8,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { ButtonComponentMixin } from '../../utils/mixins/ButtonComponentMixin';
 import { ROLE } from '../../utils/roles';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import { OverflowMixin } from '../../utils/mixins/OverflowMixin';
 import { DEFAULTS } from './button.constants';
 import styles from './button.styles';
 import { getIconNameWithoutStyle } from './button.utils';
@@ -78,7 +79,7 @@ import { getIconNameWithoutStyle } from './button.utils';
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  * @cssproperty --mdc-button-line-height - Line height of the button text
  */
-class Button extends ButtonComponentMixin(Buttonsimple) {
+class Button extends OverflowMixin(ButtonComponentMixin(Buttonsimple)) {
     constructor() {
         super(...arguments);
         /**
@@ -125,6 +126,12 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
          */
         this.role = ROLE.BUTTON;
     }
+    /**
+     * @internal
+     */
+    get overflowElement() {
+        return this.buttonTextPart;
+    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('active')) {
@@ -195,6 +202,10 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
     }
 }
 Button.styles = [...Buttonsimple.styles, ...styles];
+__decorate([
+    query('slot[part="button-text"]'),
+    __metadata("design:type", HTMLSlotElement)
+], Button.prototype, "buttonTextPart", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Number)

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues, nothing } from 'lit';
 import { Component } from '../../models';
 import type { DialogRole, DialogSize, DialogVariant } from './dialog.types';
-declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
+declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/focus/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
 /**
  * Dialog component is a modal dialog that can be used to display information or prompt the user for input.
  * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.

package/dist/components/dialog/dialog.component.js

@@ -11,7 +11,7 @@ import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
+import { FocusTrapMixin } from '../../utils/mixins/focus/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { PopoverBoundaryRoot, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
-declare const Popover_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
+declare const Popover_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/focus/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover is generic overlay which can be triggered by any actionable element.
  *
@@ -478,7 +478,7 @@ declare class Popover extends Popover_base {
     /**
      * Shows the popover.
      */
-    show: () => void;
+    show(): void;
     /**
      * Hides the popover.
      */

package/dist/components/popover/popover.component.js

@@ -14,7 +14,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
-import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
+import { FocusTrapMixin } from '../../utils/mixins/focus/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { Timers } from '../../utils/controllers/Timers';
 import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
@@ -614,28 +614,6 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             this.timers.clearTimeout(TIMEOUTS.HOVER);
             this.timers.clearTimeout(TIMEOUTS.CLOSE);
         };
-        /**
-         * Shows the popover.
-         */
-        this.show = () => {
-            if (this.shouldSuppressOpening) {
-                return;
-            }
-            this.cancelCloseDelay();
-            if (this.visible) {
-                return;
-            }
-            const callback = () => {
-                this.visible = true;
-            };
-            if (this.openDelay > 0) {
-                this.timers.setTimeout(TIMEOUTS.OPEN, callback, this.openDelay);
-            }
-            else {
-                this.timers.clearTimeout(TIMEOUTS.OPEN);
-                callback();
-            }
-        };
         /**
          * Hides the popover.
          */
@@ -746,6 +724,7 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
                 animationFrame: this.animationFrame,
             });
         };
+        this.show = this.show.bind(this);
         this.utils = new PopoverUtils(this);
         this.parseTrigger();
         [this.openDelay, this.closeDelay] = this.utils.setupDelay();
@@ -931,6 +910,28 @@ class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTra
             PopoverEventManager.onHidePopover(this);
         }
     }
+    /**
+     * Shows the popover.
+     */
+    show() {
+        if (this.shouldSuppressOpening) {
+            return;
+        }
+        this.cancelCloseDelay();
+        if (this.visible) {
+            return;
+        }
+        const callback = () => {
+            this.visible = true;
+        };
+        if (this.openDelay > 0) {
+            this.timers.setTimeout(TIMEOUTS.OPEN, callback, this.openDelay);
+        }
+        else {
+            this.timers.clearTimeout(TIMEOUTS.OPEN);
+            callback();
+        }
+    }
     isEventFromTrigger(event) {
         var _a;
         if (!this.triggerID)

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

@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { TextType, TagName } from './text.types';
+declare const Text_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/OverflowMixin").OverflowMixinInterface> & typeof Component;
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -19,7 +20,11 @@ import type { TextType, TagName } from './text.types';
  *
  * @csspart text - The text element
  */
-declare class Text extends Component {
+declare class Text extends Text_base {
+    /**
+     * @internal
+     */
+    private textPartElement;
     /**
      * Specifies the text style to be applied.
      *
@@ -77,7 +82,11 @@ declare class Text extends Component {
      * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
      * Note that the styling is determined by the `type` attribute.
      */
-    tagname?: TagName;
+    tagname: TagName;
+    /**
+     * @internal
+     */
+    protected get overflowElement(): HTMLElement;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/text/text.component.js

@@ -8,8 +8,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { Component } from '../../models';
+import { OverflowMixin } from '../../utils/mixins/OverflowMixin';
 import styles from './text.styles';
 import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
 /**
@@ -30,7 +31,7 @@ import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
  *
  * @csspart text - The text element
  */
-class Text extends Component {
+class Text extends OverflowMixin(Component) {
     constructor() {
         super(...arguments);
         /**
@@ -92,6 +93,16 @@ class Text extends Component {
          */
         this.tagname = DEFAULTS.TEXT_ELEMENT_TAGNAME;
     }
+    /**
+     * @internal
+     */
+    get overflowElement() {
+        // span and small are inline elements therefore we need to return the host element itself
+        if ([VALID_TEXT_TAGS.SPAN, VALID_TEXT_TAGS.SMALL].includes(this.tagname)) {
+            return this;
+        }
+        return this.textPartElement;
+    }
     render() {
         // Lit does not support dynamically changing values for the tag name of a custom element.
         // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
@@ -121,6 +132,10 @@ class Text extends Component {
     }
 }
 Text.styles = [...Component.styles, ...styles];
+__decorate([
+    query(`[part='${DEFAULTS.CSS_PART_TEXT}']`),
+    __metadata("design:type", HTMLElement)
+], Text.prototype, "textPartElement", void 0);
 __decorate([
     property({ attribute: 'type', reflect: true, type: String }),
     __metadata("design:type", String)

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

@@ -38,6 +38,16 @@ declare class Tooltip extends Popover {
      * @default 'description'
      */
     tooltipType: TooltipType;
+    /**
+     * If true, the tooltip will only be shown when the trigger element's content is overflowing on the x-axis.
+     *
+     * Supports the following components:
+     * - mdc-button
+     * - mdc-text
+     *
+     * @default false
+     */
+    onlyShowWhenTriggerOverflows: boolean;
     connectedCallback(): void;
     /**
      * Sets the type attribute for the tooltip component.
@@ -61,7 +71,8 @@ declare class Tooltip extends Popover {
      * @param changedProperties - The changed properties.
      */
     private onTooltipTypeUpdated;
-    update(changedProperties: PropertyValues): Promise<void>;
+    update(changedProperties: PropertyValues<this>): Promise<void>;
+    show(): void;
     static styles: Array<CSSResult>;
 }
 export default Tooltip;

package/dist/components/tooltip/tooltip.component.js

@@ -12,6 +12,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { ROLE } from '../../utils/roles';
 import Popover from '../popover/popover.component';
 import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { hasOverflowMixin } from '../../utils/dom';
 import { DEFAULTS, TOOLTIP_TYPES } from './tooltip.constants';
 import styles from './tooltip.styles';
 /**
@@ -52,6 +53,16 @@ class Tooltip extends Popover {
          * @default 'description'
          */
         this.tooltipType = DEFAULTS.TOOLTIP_TYPE;
+        /**
+         * If true, the tooltip will only be shown when the trigger element's content is overflowing on the x-axis.
+         *
+         * Supports the following components:
+         * - mdc-button
+         * - mdc-text
+         *
+         * @default false
+         */
+        this.onlyShowWhenTriggerOverflows = DEFAULTS.ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -165,10 +176,22 @@ class Tooltip extends Popover {
             this.onTooltipTypeUpdated(changedProperties);
         }
     }
+    show() {
+        if (this.onlyShowWhenTriggerOverflows && this.triggerElement && hasOverflowMixin(this.triggerElement)) {
+            if (!this.triggerElement.isWidthOverflowing()) {
+                return;
+            }
+        }
+        super.show();
+    }
 }
 Tooltip.styles = [...Popover.styles, ...styles];
 __decorate([
     property({ type: String, attribute: 'tooltip-type', reflect: true }),
     __metadata("design:type", String)
 ], Tooltip.prototype, "tooltipType", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'only-show-when-trigger-overflows', reflect: true }),
+    __metadata("design:type", Boolean)
+], Tooltip.prototype, "onlyShowWhenTriggerOverflows", void 0);
 export default Tooltip;

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

@@ -16,5 +16,6 @@ declare const DEFAULTS: {
     readonly PLACEMENT: "top";
     readonly SHOW_ARROW: true;
     readonly TOOLTIP_TYPE: "description";
+    readonly ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS: false;
 };
 export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };

package/dist/components/tooltip/tooltip.constants.js

@@ -18,5 +18,6 @@ const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.TOP,
     SHOW_ARROW: true,
     TOOLTIP_TYPE: TOOLTIP_TYPES.DESCRIPTION,
+    ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS: false,
 };
 export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };