@momentum-design/components 0.75.4 → 0.76.1

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

@@ -97,8 +97,19 @@ declare class ListItem extends ListItem_base {
     tooltipPlacement: PopoverPlacement;
     constructor();
     connectedCallback(): void;
+    /**
+     * Fires the click event when the enter or space key is pressed.
+     * @param event - The keyboard event triggered when a key is pressed down.
+     */
     private handleKeyDown;
+    /**
+     * Triggers a click event on the list item.
+     */
     private triggerClickEvent;
+    /**
+     * Handles the click event on the list item.
+     * If the tooltip is open, it has to be closed first.
+     */
     private handleClick;
     /**
      * Display a tooltip for the listitem.
@@ -126,8 +137,24 @@ declare class ListItem extends ListItem_base {
      */
     private disableSlottedChildren;
     update(changedProperties: PropertyValues): void;
+    /**
+     * Renders the trailing controls slot.
+     * @returns A template for the trailing controls slot.
+     */
     protected renderTrailingControls(): TemplateResult<1>;
+    /**
+     * Renders the leading controls slot.
+     * @returns A template for the leading controls slot.
+     */
     protected renderLeadingControls(): TemplateResult<1>;
+    /**
+     * Stops the click event from propagating to parent elements. In case of keyboard events,
+     * it stops the propagation for Enter and Space keys.
+     * This is useful when the list item contains controls that
+     * should not trigger the click event on the list item itself.
+     * @param event - The mouse event triggered when a click occurs.
+     */
+    protected stopEventPropagation(event: Event): void;
     render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/listitem/listitem.component.js

@@ -88,12 +88,19 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         super.connectedCallback();
         this.role = this.role || ROLE.LISTITEM;
     }
+    /**
+     * Fires the click event when the enter or space key is pressed.
+     * @param event - The keyboard event triggered when a key is pressed down.
+     */
     handleKeyDown(event) {
         if (event.key === KEYS.ENTER || event.key === KEYS.SPACE) {
             this.triggerClickEvent();
             event.preventDefault();
         }
     }
+    /**
+     * Triggers a click event on the list item.
+     */
     triggerClickEvent() {
         const clickEvent = new MouseEvent('click', {
             bubbles: true,
@@ -102,6 +109,10 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         });
         this.dispatchEvent(clickEvent);
     }
+    /**
+     * Handles the click event on the list item.
+     * If the tooltip is open, it has to be closed first.
+     */
     handleClick() {
         // If the tooltip is open, it has to be closed first.
         this.hideTooltipOnLeave();
@@ -178,11 +189,38 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
             this.setAttribute('aria-disabled', `${this.disabled}`);
         }
     }
+    /**
+     * Renders the trailing controls slot.
+     * @returns A template for the trailing controls slot.
+     */
     renderTrailingControls() {
-        return html `<slot name="trailing-controls"></slot>`;
+        return html `<slot name="trailing-controls" 
+    @click=${this.stopEventPropagation}
+    @keyup=${this.stopEventPropagation}
+    @keydown=${this.stopEventPropagation}></slot>`;
     }
+    /**
+     * Renders the leading controls slot.
+     * @returns A template for the leading controls slot.
+     */
     renderLeadingControls() {
-        return html `<slot name="leading-controls"></slot>`;
+        return html `<slot name="leading-controls" 
+    @click=${this.stopEventPropagation}
+    @keyup=${this.stopEventPropagation}
+    @keydown=${this.stopEventPropagation}></slot>`;
+    }
+    /**
+     * Stops the click event from propagating to parent elements. In case of keyboard events,
+     * it stops the propagation for Enter and Space keys.
+     * This is useful when the list item contains controls that
+     * should not trigger the click event on the list item itself.
+     * @param event - The mouse event triggered when a click occurs.
+     */
+    stopEventPropagation(event) {
+        if ((event instanceof KeyboardEvent && (event.key === KEYS.ENTER || event.key === KEYS.SPACE))
+            || (event instanceof MouseEvent)) {
+            event.stopPropagation();
+        }
     }
     render() {
         return html `

package/dist/components/menuitem/menuitem.component.js

@@ -49,7 +49,10 @@ class MenuItem extends ListItem {
             ? ARROW_ICONS.LEFT
             : ARROW_ICONS.RIGHT;
         return html `
-      <slot name="trailing-controls"></slot>
+      <slot name="trailing-controls"
+      @click=${this.stopEventPropagation}
+      @keyup=${this.stopEventPropagation}
+      @keydown=${this.stopEventPropagation}></slot>
       ${this.arrowPosition === ARROW_POSITIONS.TRAILING
             ? html `<mdc-icon name="${arrowIcon}" length-unit="rem" part="trailing-arrow"></mdc-icon>`
             : nothing}
@@ -64,7 +67,10 @@ class MenuItem extends ListItem {
             ? ARROW_ICONS.RIGHT
             : ARROW_ICONS.LEFT;
         return html `
-      <slot name="leading-controls"></slot>
+      <slot name="leading-controls"
+      @click=${this.stopEventPropagation}
+      @keyup=${this.stopEventPropagation}
+      @keydown=${this.stopEventPropagation}></slot>
       ${this.arrowPosition === ARROW_POSITIONS.LEADING
             ? html `<mdc-icon name="${arrowIcon}" length-unit="rem" part="leading-arrow"></mdc-icon>`
             : nothing}