feat(masthead-v2): Minimize CMApp on megamenu open

packages/web-components/src/components/masthead/masthead-composite.ts

@@ -49,6 +49,7 @@ import { DDS_CUSTOM_PROFILE_LOGIN } from '../../globals/internal/feature-flags';
 import DDSMastheadLogo from './masthead-logo';
 import DDSMegaMenuTabs from './megamenu-tabs';
 import DDSMegamenuTopNavMenu from './megamenu-top-nav-menu';
+import DDSMastheadL1 from './masthead-l1';
 import './masthead';
 import './masthead-button-cta';
 import './masthead-l1';
@@ -101,6 +102,7 @@ export interface CMApp {
   version: string;
   ready: boolean;
   init: Function;
+  minimize: Function;
   refresh: Function;
   register: Function;
   deregister: Function;
@@ -1000,6 +1002,9 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
     // any previously opened megamenu.
     if (active && menuIndex !== undefined) {
       this._activeMegamenuIndex = menuIndex;
+
+      // Close the Contact Module upon opening megamenu.
+      this.contactModuleApp?.minimize();
     }
 
     // If clicking the same nav item to close megamenu, reset state to prune its
@@ -1016,6 +1021,14 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
     resolveFn();
   };
 
+  @HostListener(DDSMastheadL1.dropDownToggleEvent)
+  protected _handleL1DropdownToggle({ detail }: CustomEvent) {
+    const { isOpen } = detail;
+    if (isOpen) {
+      this.contactModuleApp?.minimize();
+    }
+  }
+
   /**
    * Sets the active megamenu tabpanel upon user interaction.
    *

packages/web-components/src/components/masthead/masthead-contact.ts

@@ -11,11 +11,10 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { html, customElement, property } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings.js';
 import Chat20 from '../../internal/vendor/@carbon/web-components/icons/chat/20.js';
+import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import DDSMastheadProfile from './masthead-profile';
-import DDSMastheadContainer from './masthead-container';
-import { CMApp } from './masthead-composite';
 
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
@@ -33,6 +32,28 @@ class DDSMastheadContact extends DDSMastheadProfile {
   @property({ attribute: 'trigger-label' })
   triggerLabel = 'Contact';
 
+  /**
+   * Handles cm-app-pane-displayed event fired by CM_APP.
+   *
+   * @see DOCUMENT_EVENTS live-advisor/cm-app/js/helpers/otherConstants.js
+   *   - https://github.ibm.com/live-advisor/cm-app/blob/master/js/helpers/otherConstants.js
+   */
+  @HostListener('document:cm-app-pane-displayed')
+  protected _handleCMAppDisplayed = (_event: CustomEvent) => {
+    this.triggerLabel = 'Close contact window';
+  };
+
+  /**
+   * Handles cm-app-pane-hidden event fired by CM_APP.
+   *
+   * @see DOCUMENT_EVENTS live-advisor/cm-app/js/helpers/otherConstants.js
+   *   - https://github.ibm.com/live-advisor/cm-app/blob/master/js/helpers/otherConstants.js
+   */
+  @HostListener('document:cm-app-pane-hidden')
+  protected _handleCMAppHidden = (_event: CustomEvent) => {
+    this.triggerLabel = 'Show contact window';
+  };
+
   render() {
     const { triggerLabel, _handleClick: handleClick } = this;
     return html`
@@ -46,25 +67,6 @@ class DDSMastheadContact extends DDSMastheadProfile {
     `;
   }
 
-  updated(changedProperties) {
-    if (changedProperties.has('expanded')) {
-      if (!this.expanded) {
-        const mastheadContainer = this.closest(
-          `${ddsPrefix}-masthead-container`
-        ) as DDSMastheadContainer;
-
-        /**
-         * This is a workaround to minimize the chat module. Currently no minimize methods exist.
-         *
-         * @see https://github.ibm.com/live-advisor/cm-app
-         */
-        if (mastheadContainer?.contactModuleApp) {
-          (mastheadContainer.contactModuleApp as CMApp).init();
-        }
-      }
-    }
-  }
-
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 

packages/web-components/src/components/masthead/masthead-l1.ts

@@ -676,6 +676,7 @@ class DDSMastheadL1 extends StableSelectorMixin(LitElement) {
    */
   protected _toggleSubsection(event: PointerEvent) {
     const { isMobileVersion } = this;
+    const { dropDownToggleEvent } = this.constructor as typeof DDSMastheadL1;
     const { currentTarget } = event;
     const button = currentTarget as HTMLElement;
     const dropdown = button.parentNode?.querySelector(
@@ -739,6 +740,17 @@ class DDSMastheadL1 extends StableSelectorMixin(LitElement) {
       dropdown.style.maxHeight = `calc(${maxHeight}px - 4rem)`;
     }
 
+    this.dispatchEvent(
+      new CustomEvent(dropDownToggleEvent, {
+        bubbles: true,
+        composed: true,
+        cancelable: false,
+        detail: {
+          isOpen: !isOpen,
+        },
+      })
+    );
+
     button.classList.toggle('is-open', !isOpen);
     dropdown.classList.toggle('is-open', !isOpen);
   }
@@ -960,6 +972,10 @@ class DDSMastheadL1 extends StableSelectorMixin(LitElement) {
     return `${ddsPrefix}--masthead__l1`;
   }
 
+  static get dropDownToggleEvent() {
+    return `${ddsPrefix}-masthead-l1-dropdown-toggle`;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }