@momentum-design/components 0.134.4 → 0.134.5

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

@@ -44,6 +44,11 @@ declare const Toast_base: import("../../utils/mixins/index.types").Constructor<i
  * @cssproperty --mdc-toast-padding - Padding inside the toast.
  */
 declare class Toast extends Toast_base {
+    /**
+     * Reference to the header text element
+     * @internal
+     */
+    private headerTextElement;
     /**
      * Type of toast
      * - Can be `custom`, `success`, `warning` or `error`.
@@ -79,6 +84,12 @@ declare class Toast extends Toast_base {
     showLessText?: string;
     private isDetailVisible;
     private hasDetailedSlot;
+    /**
+     * Indicates whether the header text is overflowing and requires the show more/less toggle button to be shown when detailed content is present.
+     * This is determined on first update and will not update dynamically if the header text changes after initial render.
+     * @internal
+     */
+    private hasOverflowingHeaderText;
     private detailedElements;
     private hasFooterButtons;
     /**
@@ -90,7 +101,7 @@ declare class Toast extends Toast_base {
     private toggleDetailVisibility;
     private updateDetailedSlotPresence;
     private updateFooterButtonsPresence;
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     protected renderIcon(iconName: string): import("lit-html").TemplateResult<1> | typeof nothing;
     private shouldRenderToggleButton;
     private renderToggleDetailButton;

package/dist/components/toast/toast.component.js

@@ -8,11 +8,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { FooterMixin } from '../../utils/mixins/FooterMixin';
 import { TYPE } from '../text/text.constants';
+import { hasOverflowMixin } from '../../utils/dom';
 import { DEFAULTS } from './toast.constants';
 import { getIconNameForVariant } from './toast.utils';
 import styles from './toast.styles';
@@ -77,6 +78,12 @@ class Toast extends FooterMixin(Component) {
         this.ariaLabel = null;
         this.isDetailVisible = false;
         this.hasDetailedSlot = false;
+        /**
+         * Indicates whether the header text is overflowing and requires the show more/less toggle button to be shown when detailed content is present.
+         * This is determined on first update and will not update dynamically if the header text changes after initial render.
+         * @internal
+         */
+        this.hasOverflowingHeaderText = false;
         this.hasFooterButtons = '';
     }
     /**
@@ -94,6 +101,12 @@ class Toast extends FooterMixin(Component) {
     }
     toggleDetailVisibility() {
         this.isDetailVisible = !this.isDetailVisible;
+        if (this.isDetailVisible) {
+            this.setAttribute('data-expanded', 'true');
+        }
+        else {
+            this.removeAttribute('data-expanded');
+        }
     }
     updateDetailedSlotPresence() {
         var _a, _b;
@@ -108,9 +121,13 @@ class Toast extends FooterMixin(Component) {
                 ? 'has-footer-buttons'
                 : '';
     }
-    firstUpdated(changedProperties) {
+    async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.updateDetailedSlotPresence();
+        await this.updateComplete;
+        if (hasOverflowMixin(this.headerTextElement)) {
+            this.hasOverflowingHeaderText = this.headerTextElement.isHeightOverflowing();
+        }
     }
     renderIcon(iconName) {
         if (!iconName)
@@ -120,7 +137,7 @@ class Toast extends FooterMixin(Component) {
     `;
     }
     shouldRenderToggleButton() {
-        return this.hasDetailedSlot && this.showMoreText && this.showLessText;
+        return (this.hasDetailedSlot || this.hasOverflowingHeaderText) && this.showMoreText && this.showLessText;
     }
     renderToggleDetailButton() {
         if (!this.shouldRenderToggleButton())
@@ -193,6 +210,10 @@ class Toast extends FooterMixin(Component) {
     }
 }
 Toast.styles = [...Component.styles, ...styles];
+__decorate([
+    query("[part='toast-header']"),
+    __metadata("design:type", HTMLElement)
+], Toast.prototype, "headerTextElement", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
@@ -229,6 +250,10 @@ __decorate([
     state(),
     __metadata("design:type", Boolean)
 ], Toast.prototype, "hasDetailedSlot", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], Toast.prototype, "hasOverflowingHeaderText", void 0);
 __decorate([
     queryAssignedElements({ slot: 'toast-body-detailed', flatten: true }),
     __metadata("design:type", Array)

package/dist/components/toast/toast.styles.js

@@ -65,6 +65,16 @@ const styles = css `
     line-height: var(--mds-font-lineheight-body-large);
   }
 
+  [part='toast-header']::part(text) {
+    display: unset;
+    -webkit-box-orient: inherit;
+    -webkit-line-clamp: inherit;
+  }
+
+  :host([data-expanded='true'])::part(toast-header) {
+    -webkit-line-clamp: unset;
+  }
+
   :host::part(footer) {
     display: flex;
     justify-content: flex-end;

package/dist/custom-elements.json

@@ -5160,6 +5160,20 @@
               "attribute": "inverted",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "OverflowMixin",
+                "module": "utils/mixins/OverflowMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -47421,6 +47435,20 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "OverflowMixin",
+                "module": "utils/mixins/OverflowMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -57835,6 +57863,16 @@
           "description": "",
           "name": "OverflowMixin",
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -57861,6 +57899,16 @@
           "description": "",
           "name": "OverflowMixinInterface",
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",

package/dist/utils/mixins/OverflowMixin.d.ts

@@ -3,5 +3,6 @@ import type { Constructor } from './index.types';
 export declare abstract class OverflowMixinInterface {
     protected get overflowElement(): HTMLElement;
     isWidthOverflowing(): boolean;
+    isHeightOverflowing(): boolean;
 }
 export declare const OverflowMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<OverflowMixinInterface> & T;

package/dist/utils/mixins/OverflowMixin.js

@@ -17,6 +17,10 @@ export const OverflowMixin = (superClass) => {
             const el = this.overflowElement;
             return el.scrollWidth > el.clientWidth;
         }
+        isHeightOverflowing() {
+            const el = this.overflowElement;
+            return el.scrollHeight > el.clientHeight;
+        }
     }
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;

package/package.json

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