@momentum-design/components 0.112.2 → 0.112.4

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

@@ -160,6 +160,7 @@ class Buttonsimple extends AutoFocusOnMountMixin(TabIndexMixin(DisabledMixin(Com
         const clickEvent = new MouseEvent('click', {
             bubbles: true,
             cancelable: true,
+            composed: true,
             view: window,
         });
         this.dispatchEvent(clickEvent);

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

@@ -125,7 +125,7 @@ declare class MenuPopover extends Popover {
      * If the popover is currently visible, it hides the popover; otherwise, it shows the popover.
      * @returns - This method does not return anything.
      */
-    togglePopoverVisible: () => void;
+    togglePopoverVisible: (event: Event) => void;
     /**
      * Closes all other submenus on the same level as the target menu item.
      * This method is used to ensure that only one submenu is open at a time.

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

@@ -111,9 +111,9 @@ class MenuPopover extends Popover {
          * If the popover is currently visible, it hides the popover; otherwise, it shows the popover.
          * @returns - This method does not return anything.
          */
-        this.togglePopoverVisible = () => {
+        this.togglePopoverVisible = (event) => {
             var _a;
-            if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('soft-disabled'))
+            if (((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('soft-disabled')) || !this.isEventFromTrigger(event))
                 return;
             if (this.visible) {
                 this.hide();

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

@@ -285,7 +285,6 @@ declare class Popover extends Popover_base {
      */
     keepConnectedTooltipClosed: boolean;
     arrowElement: HTMLElement | null;
-    triggerElement: HTMLElement | null;
     /** @internal */
     private hoverTimer;
     /** @internal */
@@ -299,18 +298,27 @@ declare class Popover extends Popover_base {
     /** @internal */
     private floatingUICleanupFunction;
     /** @internal */
-    protected shouldSupressOpening: boolean;
+    protected shouldSuppressOpening: boolean;
     /** @internal */
-    private connectedTooltip;
+    private get connectedTooltip();
+    /**
+     * Get trigger element on-demand
+     * It is necessary because trigger might appear later in the DOM, or it could be replaced completely.
+     *
+     * @internal
+     */
+    get triggerElement(): HTMLElement | null;
     constructor();
-    private storeConnectedTooltip;
-    private setupTriggerRelatedElement;
-    private cleanupTrigger;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    connectedCallback(): void;
+    private parseTrigger;
     disconnectedCallback(): Promise<void>;
     /**
      * Sets up the trigger related event listeners, based on the trigger type.
      * Includes fallback for mouseenter trigger to also handle focusin for non-interactive popovers.
+     *
+     * We are using capture phase for to make sure we capture trigger events even when they are not propagated during the
+     * bubble phase (e.g.: buttons in list item)
      */
     private setupTriggerListeners;
     /**
@@ -392,21 +400,14 @@ declare class Popover extends Popover_base {
     /**
      * Toggles the popover visibility.
      */
-    togglePopoverVisible: () => void;
+    togglePopoverVisible: (event: Event) => void;
     /**
      * Positions the popover based on the trigger element.
      * It also handles the flip, size and arrow placement.
      * It uses the floating-ui/dom library to calculate the position.
      */
     private positionPopover;
-    /**
-     * Finds the closest popover to the passed element in the DOM tree.
-     *
-     * Useful when need to find the parent popover in a nested popover scenario.
-     *
-     * @param element - The element to start searching from.
-     */
-    protected findClosestPopover: (element: Element) => Popover | null;
+    protected isEventFromTrigger(event: Event): boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -57,6 +57,20 @@ import { PopoverUtils } from './popover.utils';
  *
  */
 class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component))) {
+    /** @internal */
+    get connectedTooltip() {
+        const connectedTooltips = this.getRootNode().querySelectorAll(`mdc-tooltip[triggerID="${this.triggerID}"]`);
+        return Array.from(connectedTooltips).find(t => t !== this);
+    }
+    /**
+     * Get trigger element on-demand
+     * It is necessary because trigger might appear later in the DOM, or it could be replaced completely.
+     *
+     * @internal
+     */
+    get triggerElement() {
+        return this.getRootNode().querySelector(`[id="${this.triggerID}"]`);
+    }
     constructor() {
         super();
         /**
@@ -285,7 +299,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          */
         this.keepConnectedTooltipClosed = DEFAULTS.KEEP_CONNECTED_TOOLTIP_CLOSED;
         this.arrowElement = null;
-        this.triggerElement = null;
         /** @internal */
         this.hoverTimer = null;
         /** @internal */
@@ -297,20 +310,8 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         /** @internal */
         this.floatingUICleanupFunction = null;
         /** @internal */
-        this.shouldSupressOpening = false;
-        /** @internal */
-        this.connectedTooltip = null;
-        this.storeConnectedTooltip = () => {
-            const connectedTooltips = this.getRootNode().querySelectorAll(`mdc-tooltip[triggerID="${this.triggerID}"]`);
-            for (const tooltip of connectedTooltips) {
-                if (tooltip !== this) {
-                    this.connectedTooltip = tooltip;
-                    return;
-                }
-            }
-            this.connectedTooltip = null;
-        };
-        this.cleanupTrigger = () => {
+        this.shouldSuppressOpening = false;
+        this.parseTrigger = () => {
             var _a;
             const triggers = ((_a = this.trigger) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
             const validTriggers = triggers.filter(trigger => Object.values(TRIGGER).includes(trigger));
@@ -333,25 +334,26 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         /**
          * Sets up the trigger related event listeners, based on the trigger type.
          * Includes fallback for mouseenter trigger to also handle focusin for non-interactive popovers.
+         *
+         * We are using capture phase for to make sure we capture trigger events even when they are not propagated during the
+         * bubble phase (e.g.: buttons in list item)
          */
         this.setupTriggerListeners = () => {
-            if (!this.triggerElement)
-                return;
             if (this.trigger.includes('click')) {
-                this.triggerElement.addEventListener('click', this.togglePopoverVisible);
+                document.addEventListener('click', this.togglePopoverVisible, { capture: true });
             }
             if (this.trigger.includes('mouseenter')) {
                 const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
                 hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.show);
-                this.triggerElement.addEventListener('mouseenter', this.handleMouseEnter);
-                this.triggerElement.addEventListener('mouseleave', this.handleMouseLeave);
+                document.addEventListener('mouseenter', this.handleMouseEnter, { capture: true });
+                document.addEventListener('mouseleave', this.handleMouseLeave, { capture: true });
                 this.addEventListener('mouseenter', this.cancelCloseDelay);
                 this.addEventListener('mouseleave', this.startCloseDelay);
             }
             if (this.trigger.includes('focusin')) {
-                this.triggerElement.addEventListener('focusin', this.handleFocusIn);
+                document.addEventListener('focusin', this.handleFocusIn, { capture: true });
                 if (!this.interactive) {
-                    this.triggerElement.addEventListener('focusout', this.handleFocusOut);
+                    document.addEventListener('focusout', this.handleFocusOut, { capture: true });
                 }
             }
         };
@@ -359,32 +361,30 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * Removes the trigger related event listeners.
          */
         this.removeTriggerListeners = () => {
-            var _a, _b, _c, _d, _e;
             // click trigger
-            (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.togglePopoverVisible);
+            document.removeEventListener('click', this.togglePopoverVisible, { capture: true });
             // mouseenter trigger
             const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
             hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.show);
-            (_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.handleMouseEnter);
-            (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.handleMouseLeave);
+            document.removeEventListener('mouseenter', this.handleMouseEnter, { capture: true });
+            document.removeEventListener('mouseleave', this.handleMouseLeave, { capture: true });
             this.removeEventListener('mouseenter', this.cancelCloseDelay);
             this.removeEventListener('mouseleave', this.startCloseDelay);
             // focusin trigger
-            (_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusin', this.handleFocusIn);
-            (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusout', this.handleFocusOut);
+            document.removeEventListener('focusin', this.handleFocusIn, { capture: true });
+            document.removeEventListener('focusout', this.handleFocusOut, { capture: true });
         };
         /**
          * Removes all event listeners related to the popover.
          */
         this.removeAllListeners = () => {
-            var _a;
             this.removeTriggerListeners();
             if (this.hideOnOutsideClick) {
-                document.removeEventListener('click', this.onOutsidePopoverClick);
+                document.removeEventListener('click', this.onOutsidePopoverClick, { capture: true });
             }
             if (this.hideOnEscape) {
                 this.removeEventListener('keydown', this.onEscapeKeydown);
-                (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.onEscapeKeydown);
+                document.removeEventListener('keydown', this.onEscapeKeydown, { capture: true });
             }
             if (this.hideOnBlur) {
                 this.removeEventListener('focusout', this.onPopoverFocusOut);
@@ -439,7 +439,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          *  Handles mouse enter event on the trigger element.
          *  This method sets the `isHovered` flag to true and shows the popover
          */
-        this.handleMouseEnter = () => {
+        this.handleMouseEnter = (event) => {
+            if (!this.isEventFromTrigger(event))
+                return;
             this.isHovered = true;
             this.show();
         };
@@ -448,7 +450,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          *  This method sets the `isHovered` flag to false and starts the close delay
          *  timer to hide the popover.
          */
-        this.handleMouseLeave = () => {
+        this.handleMouseLeave = (event) => {
+            if (!this.isEventFromTrigger(event))
+                return;
             this.isHovered = false;
             this.startCloseDelay();
         };
@@ -457,7 +461,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          *  This method checks if the popover is not hovered and hides the popover.
          *  If the popover is hovered, it will not hide the popover.
          */
-        this.handleFocusOut = () => {
+        this.handleFocusOut = (event) => {
+            if (!this.isEventFromTrigger(event))
+                return;
             if (!this.isHovered) {
                 this.hide();
             }
@@ -466,8 +472,10 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          *  Handles focus in event on the trigger element.
          *  This method checks if the trigger element has visible focus or is being hovered.
          */
-        this.handleFocusIn = () => {
+        this.handleFocusIn = (event) => {
             var _a;
+            if (!this.isEventFromTrigger(event))
+                return;
             if (((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.matches(':focus-visible')) || this.isHovered) {
                 this.show();
             }
@@ -499,7 +507,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * Shows the popover.
          */
         this.show = () => {
-            if (this.visible || this.shouldSupressOpening) {
+            if (this.visible || this.shouldSuppressOpening) {
                 return;
             }
             this.cancelCloseDelay();
@@ -528,7 +536,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         /**
          * Toggles the popover visibility.
          */
-        this.togglePopoverVisible = () => {
+        this.togglePopoverVisible = (event) => {
+            if (!this.isEventFromTrigger(event))
+                return;
             if (this.visible) {
                 this.hide();
             }
@@ -542,7 +552,8 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * It uses the floating-ui/dom library to calculate the position.
          */
         this.positionPopover = () => {
-            if (!this.triggerElement)
+            const { triggerElement } = this;
+            if (!triggerElement)
                 return;
             const boundary = !this.boundary || this.boundary === 'clippingAncestors'
                 ? 'clippingAncestors'
@@ -594,10 +605,11 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 }
             }
             middleware.push(offset(popoverOffset));
-            this.floatingUICleanupFunction = autoUpdate(this.triggerElement, this, async () => {
-                if (!this.triggerElement)
+            this.floatingUICleanupFunction = autoUpdate(triggerElement, this, async () => {
+                const { triggerElement } = this;
+                if (!triggerElement)
                     return;
-                const { x, y, middlewareData, placement } = await computePosition(this.triggerElement, this, {
+                const { x, y, middlewareData, placement } = await computePosition(triggerElement, this, {
                     placement: this.placement,
                     middleware,
                     strategy: this.strategy,
@@ -611,36 +623,20 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 }
             });
         };
-        /**
-         * Finds the closest popover to the passed element in the DOM tree.
-         *
-         * Useful when need to find the parent popover in a nested popover scenario.
-         *
-         * @param element - The element to start searching from.
-         */
-        this.findClosestPopover = (element) => {
-            let el = element;
-            while (el && !(el instanceof Popover)) {
-                el = el.parentElement;
-            }
-            return el;
-        };
         this.utils = new PopoverUtils(this);
-    }
-    setupTriggerRelatedElement() {
-        this.triggerElement = this.getRootNode().querySelector(`[id="${this.triggerID}"]`);
-        this.storeConnectedTooltip();
+        this.parseTrigger();
+        [this.openDelay, this.closeDelay] = this.utils.setupDelay();
     }
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.utils.setupAppendTo();
-        [this.openDelay, this.closeDelay] = this.utils.setupDelay();
-        this.setupTriggerRelatedElement();
-        this.cleanupTrigger();
-        this.setupTriggerListeners();
         this.style.zIndex = `${this.zIndex}`;
+        this.utils.setupAppendTo();
         PopoverEventManager.onCreatedPopover(this);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupTriggerListeners();
+    }
     async disconnectedCallback() {
         var _a, _b;
         super.disconnectedCallback();
@@ -654,7 +650,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         this.cancelCloseDelay();
         if (this.keepConnectedTooltipClosed) {
             if (this.connectedTooltip) {
-                this.connectedTooltip.shouldSupressOpening = false;
+                this.connectedTooltip.shouldSuppressOpening = false;
             }
         }
         PopoverEventManager.onDestroyedPopover(this);
@@ -668,7 +664,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
             this.utils.updateAriaExpandedAttribute();
         }
         if (changedProperties.has('trigger')) {
-            this.cleanupTrigger();
+            this.parseTrigger();
             this.removeTriggerListeners();
             this.setupTriggerListeners();
         }
@@ -727,11 +723,12 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
      * @param newValue - The new value of the visible property.
      */
     async isOpenUpdated(oldValue, newValue) {
-        var _a, _b, _c, _d, _e;
-        if (oldValue === newValue || !this.triggerElement) {
+        var _a, _b;
+        const { triggerElement } = this;
+        if (oldValue === newValue || !triggerElement) {
             return;
         }
-        if (newValue && !this.shouldSupressOpening) {
+        if (newValue && !this.shouldSuppressOpening) {
             if (popoverStack.peek() !== this) {
                 popoverStack.push(this);
             }
@@ -740,28 +737,28 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 // we need to close the connected tooltip.
                 if (this.connectedTooltip) {
                     this.connectedTooltip.visible = false;
-                    this.connectedTooltip.shouldSupressOpening = true;
+                    this.connectedTooltip.shouldSuppressOpening = true;
                 }
             }
             // create backdrop if it doesn't exist
             if (this.backdrop && !this.backdropElement) {
                 this.createBackdrop('popover');
-                this.keepElementAboveBackdrop(this.triggerElement);
+                this.keepElementAboveBackdrop(triggerElement);
             }
             this.positionPopover();
             if (this.hideOnBlur) {
                 this.addEventListener('focusout', this.onPopoverFocusOut);
                 if (this.trigger === 'click') {
-                    this.triggerElement.style.pointerEvents = 'none';
+                    triggerElement.style.pointerEvents = 'none';
                 }
             }
             if (this.hideOnEscape) {
                 this.addEventListener('keydown', this.onEscapeKeydown);
-                (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.onEscapeKeydown);
+                document.addEventListener('keydown', this.onEscapeKeydown);
             }
             this.activatePreventScroll();
             if (this.hideOnOutsideClick) {
-                document.addEventListener('click', this.onOutsidePopoverClick);
+                document.addEventListener('click', this.onOutsidePopoverClick, { capture: true });
             }
             // make sure popover is fully rendered before activating focus trap
             setTimeout(() => {
@@ -778,37 +775,44 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 popoverStack.pop();
             }
             // cleanup floating-ui on closing the popover
-            (_b = this.floatingUICleanupFunction) === null || _b === void 0 ? void 0 : _b.call(this);
+            (_a = this.floatingUICleanupFunction) === null || _a === void 0 ? void 0 : _a.call(this);
             if (this.backdrop) {
-                this.moveElementBackAfterBackdropRemoval(this.triggerElement);
+                this.moveElementBackAfterBackdropRemoval(triggerElement);
                 this.removeBackdrop();
             }
             if (this.hideOnBlur) {
                 this.removeEventListener('focusout', this.onPopoverFocusOut);
                 if (this.trigger === 'click') {
-                    this.triggerElement.style.pointerEvents = '';
+                    triggerElement.style.pointerEvents = '';
                 }
             }
             if (this.hideOnOutsideClick) {
-                document.removeEventListener('click', this.onOutsidePopoverClick);
+                document.removeEventListener('click', this.onOutsidePopoverClick, { capture: true });
             }
             if (this.hideOnEscape) {
                 this.removeEventListener('keydown', this.onEscapeKeydown);
-                (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('keydown', this.onEscapeKeydown);
+                document.removeEventListener('keydown', this.onEscapeKeydown);
             }
             this.deactivatePreventScroll();
-            (_d = this.deactivateFocusTrap) === null || _d === void 0 ? void 0 : _d.call(this);
+            (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
             if (this.focusBackToTrigger) {
-                (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.focus();
+                triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.focus();
             }
             if (this.keepConnectedTooltipClosed) {
                 if (this.connectedTooltip) {
-                    this.connectedTooltip.shouldSupressOpening = false;
+                    this.connectedTooltip.shouldSuppressOpening = false;
                 }
             }
             PopoverEventManager.onHidePopover(this);
         }
     }
+    isEventFromTrigger(event) {
+        var _a;
+        if (event.composed) {
+            return event.composedPath().some(el => (el === null || el === void 0 ? void 0 : el.id) === this.triggerID);
+        }
+        return ((_a = event.target) === null || _a === void 0 ? void 0 : _a.id) === this.triggerID;
+    }
     render() {
         return html `
       <div class="popover-hover-bridge"></div>

package/dist/components/slider/slider.component.js

@@ -214,7 +214,7 @@ class Slider extends Component {
         const [inputStart, inputEnd] = this.inputElements;
         const input = source === 'end' ? inputEnd : inputStart;
         const value = Number(input === null || input === void 0 ? void 0 : input.value);
-        if (typeof value !== 'number' || Number.isNaN(value) || this.max === this.min) {
+        if (typeof value !== 'number' || Number.isNaN(value) || this.max === this.min || this.disabled) {
             return nothing;
         }
         const normalizedValue = (value - this.min) / (this.max - this.min);

package/dist/components/slider/slider.styles.js

@@ -31,6 +31,19 @@ const styles = css `
     line-height: var(--mds-font-apps-body-midsize-medium-line-height);
   }
 
+  :host([disabled])::part(leading-icon),
+  :host([disabled])::part(trailing-icon),
+  :host([soft-disabled])::part(leading-icon),
+  :host([soft-disabled])::part(trailing-icon),
+  :host([disabled])::part(slider-label),
+  :host([disabled])::part(slider-label-start),
+  :host([disabled])::part(slider-label-end),
+  :host([soft-disabled])::part(slider-label),
+  :host([soft-disabled])::part(slider-label-start),
+  :host([soft-disabled])::part(slider-label-end) {
+    color: var(--mds-color-theme-text-primary-disabled);
+  }
+
   :host::part(slider-label) {
     margin-bottom: 0.5rem;
     display: block;
@@ -112,6 +125,18 @@ const styles = css `
     border: 1px solid var(--mdc-slider-thumb-border-color);
   }
 
+  :host([disabled]) input[type='range']::-webkit-slider-thumb {
+    cursor: unset;
+  }
+
+  :host([disabled]) input[type='range']::-moz-range-thumb {
+    cursor: unset;
+  }
+
+  :host([disabled]) input[type='range']::-ms-thumb {
+    cursor: unset;
+  }
+
   :host(:not([soft-disabled])) input[type='range']:not(:disabled):hover::-webkit-slider-thumb {
     --mdc-slider-thumb-color: var(--mds-color-theme-overlay-button-secondary-hover);
     --mdc-slider-thumb-border-color: var(--mds-color-theme-outline-input-active);