@inboxsdk/core 0.2.28 → 0.2.29-alpha.1

package/src/platform-implementation-js/views/app-menu-item-view.js

@@ -0,0 +1,324 @@
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import kefirBus from 'kefir-bus';
+import EventEmitter from '../lib/safe-event-emitter';
+import { GmailAppMenuItemView, NATIVE_CLASS, INBOXSDK_CLASS, } from '../dom-driver/gmail/views/gmail-app-menu-item-view';
+import { NATIVE_CLASS as PANEL_NATIVE_CLASS, CollapsiblePanelView, } from './collapsible-panel-view';
+import { addCollapsiblePanel } from '../dom-driver/gmail/gmail-driver/add-collapsible-panel';
+import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
+var NativeAppMenuClassName;
+(function (NativeAppMenuClassName) {
+    NativeAppMenuClassName["MAIL"] = "XJ";
+    NativeAppMenuClassName["CHAT"] = "ao4";
+    NativeAppMenuClassName["SPACES"] = "aIt";
+    NativeAppMenuClassName["MEET"] = "adZ";
+})(NativeAppMenuClassName || (NativeAppMenuClassName = {}));
+// Native Gmail menu button => the panel class names mapping
+const nativeButtonToPanelMap = new Map([
+    [NativeAppMenuClassName.MAIL, 'aIH'],
+    [NativeAppMenuClassName.CHAT, 'arL'],
+    [NativeAppMenuClassName.SPACES, 'arM'],
+    [NativeAppMenuClassName.MEET, undefined], // Meet
+]);
+/**
+ * Mail routes list is not exhaustive
+ */
+const MAIL_ROUTES = ['inbox/:page'];
+const CHAT_ROUTES = ['chat/welcome', 'chat/dm/:chatID'];
+const SPACES_ROUTES = ['rooms/welcome', 'chat/space/:spaceID'];
+const MEET_ROUTES = ['calls'];
+const routeIDtoMenuItemClass = Object.fromEntries([
+    ...MAIL_ROUTES.map((route) => [route, NativeAppMenuClassName.MAIL]),
+    ...CHAT_ROUTES.map((route) => [route, NativeAppMenuClassName.CHAT]),
+    ...SPACES_ROUTES.map((route) => [route, NativeAppMenuClassName.SPACES]),
+    ...MEET_ROUTES.map((route) => [route, NativeAppMenuClassName.MEET]),
+]);
+const initialRoutingStateStopper = kefirStopper();
+/**
+ * Contains both a native Gmail app menu item and a collapsible panel.
+ */
+export class AppMenuItemView extends EventEmitter {
+    static #menuItemChangeStream = Kefir.pool();
+    static #routeViewDriverStream;
+    static #menuItemToPanelMap = new Map();
+    static #appMenuItemViews = new Set();
+    static #getActivePanel() {
+        const appMenuElement = GmailElementGetter.getAppMenuContainer();
+        const { ACTIVE } = CollapsiblePanelView.elementCss;
+        const nativePanel = appMenuElement?.querySelector(`.${PANEL_NATIVE_CLASS}.${ACTIVE}`);
+        return nativePanel;
+    }
+    static #getActiveMenuItem() {
+        const appMenuElement = GmailElementGetter.getAppMenuContainer();
+        const { ACTIVE } = GmailAppMenuItemView.elementCss;
+        const button = appMenuElement?.querySelector(`.${NATIVE_CLASS}.${ACTIVE}`);
+        return button;
+    }
+    static #setUpRouteViewDriverStream(driver) {
+        if (AppMenuItemView.#routeViewDriverStream)
+            return;
+        AppMenuItemView.#routeViewDriverStream = driver.getRouteViewDriverStream();
+        const bus = kefirBus();
+        AppMenuItemView.#menuItemChangeStream.plug(bus);
+        AppMenuItemView.#routeViewDriverStream
+            .takeUntilBy(initialRoutingStateStopper)
+            .onValue(async (routeView) => {
+            const routeViewID = routeView.getRouteID();
+            const routeType = routeView.getRouteType();
+            const routeViewParams = routeView.getParams();
+            console.debug({
+                routeViewID,
+                routeType,
+                routeViewParams,
+            });
+            /* Handling custom app menu items */
+            const descriptors = Array.from(AppMenuItemView.#appMenuItemViews, async (appMenuItemView) => {
+                const gmailView = await appMenuItemView.#gmailViewPromise;
+                return [gmailView.menuItemDescriptor, gmailView];
+            });
+            const results = await Promise.all(descriptors);
+            const [, gmailView] = results.find(([descriptor]) => {
+                return descriptor?.isRouteActive(routeView);
+            }) ?? [];
+            if (gmailView?.element) {
+                bus.emit(['click', gmailView.element]);
+                return;
+            }
+            /* Handling native app menu items */
+            const selector = `.${routeViewID
+                ? routeIDtoMenuItemClass[routeViewID] ?? NativeAppMenuClassName.MAIL
+                : NativeAppMenuClassName.MAIL}`;
+            const element = document.querySelector(selector);
+            if (element) {
+                bus.emit(['click', element]);
+                return;
+            }
+        });
+    }
+    static {
+        (async () => {
+            const gmailAppMenu = await GmailElementGetter.getAppMenuAsync();
+            if (!gmailAppMenu) {
+                return;
+            }
+            // Set up menu item panel -> menu collapsible panel element mappings
+            for (const [menuItemClass, panelClass] of nativeButtonToPanelMap) {
+                const menuItemElement = document.querySelector(`.${NATIVE_CLASS}.${menuItemClass}`);
+                const panelElement = panelClass
+                    ? document.querySelector(`.${PANEL_NATIVE_CLASS}.${panelClass}`)
+                    : null;
+                if (menuItemElement) {
+                    AppMenuItemView.#menuItemToPanelMap.set(menuItemElement, panelElement ?? undefined);
+                }
+            }
+            // Set up event listeners we use to control menu UI
+            const stream = Kefir.stream((emitter) => {
+                // We intercept some events emitted on Gmail (native) menu items to gain full control of the menu (menu items and panels).
+                // Thus, some native event handlers won't be invoked so we replicate the Gmail's behavior by ourselves.
+                const appMenuElement = GmailElementGetter.getAppMenuContainer();
+                for (const nativeMenuItem of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}:not(.${INBOXSDK_CLASS})`) ?? []) {
+                    // Gmail uses this listener for panel hover state activation. It's prevented from propagation and we handle UI updates
+                    nativeMenuItem.addEventListener('mouseenter', (e) => {
+                        e.stopImmediatePropagation();
+                        emitter.emit(['mouseenter', nativeMenuItem, e]);
+                    }, true);
+                    // Gmail uses this listener for panel hover state deactivation. It's prevented from propagation and we handle UI updates
+                    nativeMenuItem.addEventListener('mouseleave', (e) => {
+                        e.stopImmediatePropagation();
+                        emitter.emit(['mouseleave', nativeMenuItem, e]);
+                    }, true);
+                    // Click event isn't prevented from propagation to let Gmail handle routing. The styling is handled by us
+                    nativeMenuItem.addEventListener('click', () => {
+                        emitter.emit(['click', nativeMenuItem]);
+                    });
+                    // Handle moving cursor out of panel. We use it to enhance the styling since it won't be handled by Gmail
+                    const panel = AppMenuItemView.#menuItemToPanelMap.get(nativeMenuItem);
+                    panel?.addEventListener('mouseleave', (e) => {
+                        emitter.emit(['mouseleave', nativeMenuItem, e]);
+                    });
+                }
+            });
+            AppMenuItemView.#menuItemChangeStream.plug(stream);
+        })();
+    }
+    static {
+        AppMenuItemView.#menuItemChangeStream.onValue(async (v) => {
+            const [type, menuItem, mouseEvent] = v;
+            const { ACTIVE, HOVER } = GmailAppMenuItemView.elementCss;
+            if (type === 'mouseenter') {
+                const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
+                if (mouseEvent.relatedTarget instanceof Node &&
+                    (menuItem.contains(mouseEvent.relatedTarget) ||
+                        panel?.contains(mouseEvent.relatedTarget)))
+                    return;
+                const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
+                const activePanel = AppMenuItemView.#getActivePanel();
+                if (activeMenuItem === menuItem && activePanel === panel)
+                    return;
+                // deactivate active panel
+                if (activePanel) {
+                    activePanel.style.removeProperty('height');
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                }
+                // activate new panel
+                if (panel) {
+                    const height = window.innerHeight - panel.getBoundingClientRect().top;
+                    panel.style.cssText = `height: ${height}px;`;
+                    panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                    panel.classList.add(CollapsiblePanelView.elementCss.HOVER);
+                    // hover menu item
+                    menuItem.classList.add(HOVER);
+                }
+                else {
+                    // panel doesn't exist (i.e. Meet) so activate active menu item's panel instead (as Gmail currently does -- FEB 2023)
+                    const panel = activeMenuItem &&
+                        AppMenuItemView.#menuItemToPanelMap.get(activeMenuItem);
+                    panel?.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                }
+            }
+            if (type === 'mouseleave') {
+                const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
+                const activePanel = AppMenuItemView.#getActivePanel();
+                const activeMenuItemPanel = activeMenuItem &&
+                    AppMenuItemView.#menuItemToPanelMap.get(activeMenuItem);
+                if (mouseEvent.relatedTarget instanceof Node &&
+                    (menuItem.contains(mouseEvent.relatedTarget) ||
+                        activePanel?.contains(mouseEvent.relatedTarget)))
+                    return;
+                if (activePanel === activeMenuItemPanel)
+                    return;
+                // unhover menu item
+                menuItem.classList.remove(HOVER);
+                // deactivate active panel
+                if (activePanel) {
+                    activePanel.style.removeProperty('height');
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                }
+                // activate active menu item panel
+                if (activeMenuItemPanel) {
+                    activeMenuItemPanel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                }
+            }
+            if (type === 'click') {
+                const appMenuElement = GmailElementGetter.getAppMenuContainer();
+                // deactivate active panel
+                const activePanel = AppMenuItemView.#getActivePanel();
+                if (activePanel) {
+                    activePanel.style.removeProperty('height');
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                }
+                // deactivate menu items
+                for (const menuItem_ of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}`) ?? []) {
+                    menuItem_.classList.remove(ACTIVE);
+                    menuItem_.classList.remove(HOVER);
+                }
+                // activate menu item
+                menuItem.classList.add(ACTIVE);
+                // activate panel
+                const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
+                if (panel) {
+                    panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                }
+            }
+        });
+    }
+    #driver;
+    #destroyed = false;
+    #gmailViewPromise;
+    #collapsiblePanel;
+    #appMenuItemStream;
+    #collapsiblePanelStream;
+    constructor(driver, menuItemDescriptor) {
+        super();
+        this.#driver = driver;
+        const gmailAppMenuItemView = this.#driver.addAppMenuItem(menuItemDescriptor);
+        this.#gmailViewPromise = gmailAppMenuItemView;
+        gmailAppMenuItemView.then((gmailView) => {
+            if (this.#destroyed || !gmailView) {
+                return; //we have been removed already
+            }
+            const gmailElement = gmailView.element;
+            if (gmailElement) {
+                AppMenuItemView.#menuItemToPanelMap.set(gmailElement, undefined);
+            }
+            this.#appMenuItemStream = Kefir.stream((emitter) => {
+                gmailView.on('destroy', () => {
+                    emitter.end();
+                    this.remove();
+                });
+                gmailView.on('click', () => {
+                    emitter.emit(['click', gmailElement]);
+                    this.emit('click');
+                });
+                gmailView.on('hover', (e) => {
+                    emitter.emit(['mouseenter', gmailElement, e]);
+                    this.emit('hover');
+                });
+                gmailView.on('blur', (e) => {
+                    emitter.emit(['mouseleave', gmailElement, e]);
+                    this.emit('blur');
+                });
+            });
+            AppMenuItemView.#menuItemChangeStream.plug(this.#appMenuItemStream);
+            AppMenuItemView.#setUpRouteViewDriverStream(driver);
+            AppMenuItemView.#appMenuItemViews.add(this);
+        });
+    }
+    async addCollapsiblePanel(panelDescriptor) {
+        const collapsiblePanel = await addCollapsiblePanel(this.#driver, panelDescriptor);
+        if (collapsiblePanel) {
+            this.#gmailViewPromise.then((gmailView) => {
+                const gmailElement = gmailView.element;
+                if (gmailElement) {
+                    this.#collapsiblePanelStream = Kefir.stream((emitter) => {
+                        collapsiblePanel.on('blur', (e) => {
+                            emitter.value(['mouseleave', gmailElement, e]);
+                        });
+                    });
+                    AppMenuItemView.#menuItemChangeStream.plug(this.#collapsiblePanelStream);
+                }
+                if (gmailElement && collapsiblePanel) {
+                    AppMenuItemView.#menuItemToPanelMap.set(gmailElement, collapsiblePanel.element);
+                }
+            });
+        }
+        this.#collapsiblePanel = collapsiblePanel;
+        return collapsiblePanel;
+    }
+    async update(menuItemDescriptor) {
+        const gmailView = await this.#gmailViewPromise;
+        gmailView.setMenuItemDescriptor(menuItemDescriptor);
+    }
+    remove() {
+        if (this.#destroyed)
+            return;
+        this.#destroyed = true;
+        this.emit('destroy');
+        this.#collapsiblePanel?.remove();
+        this.#gmailViewPromise.then((gmailView) => {
+            gmailView.element &&
+                AppMenuItemView.#menuItemToPanelMap.delete(gmailView.element);
+            gmailView.remove();
+        });
+        this.#appMenuItemStream &&
+            AppMenuItemView.#menuItemChangeStream.unplug(this.#appMenuItemStream);
+        this.#collapsiblePanelStream &&
+            AppMenuItemView.#menuItemChangeStream.unplug(this.#collapsiblePanelStream);
+        AppMenuItemView.#appMenuItemViews.delete(this);
+        initialRoutingStateStopper.destroy();
+    }
+    async #activate() {
+        const gmailView = await this.#gmailViewPromise;
+        const appMenuElement = GmailElementGetter.getAppMenuContainer();
+        const { ACTIVE } = GmailAppMenuItemView.elementCss;
+        // Note this affects both the active app menu item and the collapsible panel.
+        for (const el of appMenuElement?.querySelectorAll(`.${ACTIVE}`) ?? []) {
+            el.classList.remove(ACTIVE);
+        }
+        gmailView.activate();
+        this.#collapsiblePanel?.activate();
+    }
+}

package/src/platform-implementation-js/views/app-toolbar-button-view.js

@@ -1,73 +1,52 @@
-/* @flow */
-
-import EventEmitter from '../lib/safe-event-emitter';
-import get from '../../common/get-or-fail';
-import type { Driver } from '../driver-interfaces/driver';
-
-import type GmailAppToolbarButtonView from '../dom-driver/gmail/views/gmail-app-toolbar-button-view';
-import type InboxAppToolbarButtonView from '../dom-driver/inbox/views/inbox-app-toolbar-button-view';
-
-type AppToolbarButtonViewDriver =
-  | GmailAppToolbarButtonView
-  | InboxAppToolbarButtonView;
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _safeEventEmitter = _interopRequireDefault(require("../lib/safe-event-emitter"));
+var _getOrFail = _interopRequireDefault(require("../../common/get-or-fail"));
 const memberMap = new WeakMap();
 
 // Documented in src/docs/app-toolbar-button-view.js
-export default class AppToolbarButtonView extends EventEmitter {
-  destroyed: boolean;
-
-  constructor(
-    driver: Driver,
-    appToolbarButtonViewDriverPromise: Promise<AppToolbarButtonViewDriver>
-  ) {
+class AppToolbarButtonView extends _safeEventEmitter.default {
+  constructor(driver, appToolbarButtonViewDriverPromise) {
     super();
     const members = {
       appToolbarButtonViewDriverPromise,
-      appToolbarButtonViewDriver: (null: ?AppToolbarButtonViewDriver),
+      appToolbarButtonViewDriver: null
     };
     memberMap.set(this, members);
-
     this.destroyed = false;
-    members.appToolbarButtonViewDriverPromise.then(
-      (appToolbarButtonViewDriver) => {
-        members.appToolbarButtonViewDriver = appToolbarButtonViewDriver;
-        appToolbarButtonViewDriver.getStopper().onValue(() => {
-          this.destroyed = true;
-          this.emit('destroy');
-        });
-      }
-    );
-
+    members.appToolbarButtonViewDriverPromise.then(appToolbarButtonViewDriver => {
+      members.appToolbarButtonViewDriver = appToolbarButtonViewDriver;
+      appToolbarButtonViewDriver.getStopper().onValue(() => {
+        this.destroyed = true;
+        this.emit('destroy');
+      });
+    });
     driver.getStopper().onValue(() => {
       this.remove();
     });
   }
-
   open() {
-    const members = get(memberMap, this);
-    members.appToolbarButtonViewDriverPromise.then(function (
-      appToolbarButtonViewDriver
-    ) {
+    const members = (0, _getOrFail.default)(memberMap, this);
+    members.appToolbarButtonViewDriverPromise.then(function (appToolbarButtonViewDriver) {
       appToolbarButtonViewDriver.open();
     });
   }
-
   close() {
-    const members = get(memberMap, this);
-    members.appToolbarButtonViewDriverPromise.then(function (
-      appToolbarButtonViewDriver
-    ) {
+    const members = (0, _getOrFail.default)(memberMap, this);
+    members.appToolbarButtonViewDriverPromise.then(function (appToolbarButtonViewDriver) {
       appToolbarButtonViewDriver.close();
     });
   }
-
   remove() {
-    const members = get(memberMap, this);
-    members.appToolbarButtonViewDriverPromise.then(function (
-      appToolbarButtonViewDriver
-    ) {
+    const members = (0, _getOrFail.default)(memberMap, this);
+    members.appToolbarButtonViewDriverPromise.then(function (appToolbarButtonViewDriver) {
       appToolbarButtonViewDriver.destroy();
     });
   }
 }
+exports.default = AppToolbarButtonView;

package/src/platform-implementation-js/views/collapsible-panel-view.d.ts

@@ -0,0 +1,37 @@
+import TypedEmitter from 'typed-emitter';
+import * as Kefir from 'kefir';
+import { AppMenuItemPanelDescriptor } from '../namespaces/app-menu';
+import GmailDriver from '../dom-driver/gmail/gmail-driver';
+import { NavItemDescriptor } from '../dom-driver/gmail/views/gmail-nav-item-view';
+import NavItemView from './nav-item-view';
+export declare const NATIVE_CLASS: "aqn";
+export declare const INBOXSDK_CLASS: "inboxsdk__collapsiblePanel";
+type MessageEvents = {
+    destroy: () => void;
+    blur: (e: MouseEvent) => void;
+};
+declare const CollapsiblePanelView_base: new () => TypedEmitter<MessageEvents>;
+export declare class CollapsiblePanelView extends CollapsiblePanelView_base {
+    #private;
+    static elementSelectors: {
+        readonly NATIVE: ".aqn.oy8Mbf";
+        readonly CUSTOM: ".inboxsdk__collapsiblePanel";
+    };
+    static elementCss: {
+        readonly ACTIVE: "apV";
+        readonly COLLAPSED: "aBa";
+        /** A hover popover has both ACTIVE _and_ HOVER */
+        readonly HOVER: "aJu";
+    };
+    get element(): HTMLElement | undefined;
+    set panelDescriptor(panelDescriptor: AppMenuItemPanelDescriptor);
+    constructor(driver: GmailDriver);
+    /**
+     * @internal
+     */
+    activate(): void;
+    remove(): void;
+    addNavItem(navItemDescriptor: NavItemDescriptor | Kefir.Observable<NavItemDescriptor, any>): NavItemView | undefined;
+}
+export {};
+//# sourceMappingURL=collapsible-panel-view.d.ts.map

package/src/platform-implementation-js/views/collapsible-panel-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-panel-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/collapsible-panel-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAIpE,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,eAAO,MAAM,YAAY,OAAiB,CAAC;AAC3C,eAAO,MAAM,cAAc,8BAAwC,CAAC;AAQpE,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/B,CAAC;mDAEmE,aAAa,aAAa,CAAC;AAAhG,qBAAa,oBAAqB,SAAQ,yBAAuD;;IAC/F,MAAM,CAAC,gBAAgB;;;MAGZ;IACX,MAAM,CAAC,UAAU;;;QAGf,kDAAkD;;MAEzC;IAQX,IAAI,OAAO,4BAEV;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,0BAA0B,EAG9D;gBAEW,MAAM,EAAE,WAAW;IAS/B;;OAEG;IACH,QAAQ;IAQR,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CA+J/C"}

package/src/platform-implementation-js/views/collapsible-panel-view.js

@@ -0,0 +1,167 @@
+import cx from 'classnames';
+import * as Kefir from 'kefir';
+import kefirCast from 'kefir-cast';
+import EventEmitter from '../lib/safe-event-emitter';
+import autoHtml from 'auto-html';
+import querySelector from '../lib/dom/querySelectorOrFail';
+import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
+import NavItemView from './nav-item-view';
+export const NATIVE_CLASS = 'aqn';
+export const INBOXSDK_CLASS = 'inboxsdk__collapsiblePanel';
+const ELEMENT_CLASS = `${NATIVE_CLASS} ${INBOXSDK_CLASS} oy8Mbf`;
+const PRIMARY_BUTTON_ELEMENT_CLASS = 'T-I T-I-KE L3';
+const PRIMARY_BUTTON_ELEMENT_SELECTOR = '.T-I.T-I-KE.L3';
+const NAV_MENU_CONTAINER_ELEMENT_SELECTOR = '.at9 .n3 .TK';
+export class CollapsiblePanelView extends EventEmitter {
+    static elementSelectors = {
+        NATIVE: '.aqn.oy8Mbf',
+        CUSTOM: '.inboxsdk__collapsiblePanel',
+    };
+    static elementCss = {
+        ACTIVE: 'apV',
+        COLLAPSED: 'aBa',
+        /** A hover popover has both ACTIVE _and_ HOVER */
+        HOVER: 'aJu',
+    };
+    #panelDescriptor;
+    #element;
+    #destroyed = false;
+    #id = Math.random().toFixed(3);
+    #ARIA_LABELLED_BY_ID = Math.random().toFixed(3);
+    #driver;
+    get element() {
+        return this.#element;
+    }
+    set panelDescriptor(panelDescriptor) {
+        this.#panelDescriptor = panelDescriptor;
+        this.#update();
+    }
+    constructor(driver) {
+        super();
+        this.#driver = driver;
+        this.#element = this.#setupElement();
+        this.#element.addEventListener('mouseleave', (e) => {
+            this.emit('blur', e);
+        });
+    }
+    /**
+     * @internal
+     */
+    activate() {
+        const element = this.element;
+        if (!element)
+            return;
+        element?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+        element.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+    }
+    remove() {
+        if (this.#destroyed)
+            return;
+        this.#destroyed = true;
+        this.element?.remove();
+        this.emit('destroy');
+    }
+    addNavItem(navItemDescriptor) {
+        const element = this.element;
+        if (!element)
+            return;
+        const navMenuContainerElement = querySelector(element, NAV_MENU_CONTAINER_ELEMENT_SELECTOR);
+        const appId = `collapsible-panel-${this.#id}`;
+        const navItemDescriptorPropertyStream = kefirCast(Kefir, navItemDescriptor).toProperty();
+        const gmailNavItemView = this.#driver.addNavItem(appId, navItemDescriptorPropertyStream, navMenuContainerElement);
+        const navItemView = new NavItemView(appId, this.#driver, navItemDescriptorPropertyStream, gmailNavItemView);
+        return navItemView;
+    }
+    #setupElement() {
+        const { iconUrl: themedIcons, className, name = '', } = this.#panelDescriptor?.primaryButton ?? {};
+        const element = document.createElement('div');
+        element.className = ELEMENT_CLASS;
+        const primaryButtonClass = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
+        let iconUrl;
+        if (themedIcons) {
+            if (GmailElementGetter.isDarkTheme()) {
+                iconUrl = themedIcons.darkTheme;
+            }
+            else {
+                iconUrl = themedIcons.lightTheme;
+            }
+        }
+        element.innerHTML = autoHtml `
+      <div class="aBO">
+        <div class="aic">
+          <div class="z0">
+            <div class="${primaryButtonClass}" style="user-select: none" role="button" tabindex="0">
+              ${name}
+            </div>
+          </div>
+        </div>
+        <div class="at9">
+          <div class="Ls77Lb aZ6">
+            <div class="pp" style="user-select: none;">
+              <div>
+                <div class="nM">
+                  <div class="aic"></div>
+                  <div class="yJ">
+                    <div class="ajl aib aZ6" aria-labelledby="${this.#ARIA_LABELLED_BY_ID}">
+                      <h2 class="aWk" id="${this.#ARIA_LABELLED_BY_ID}">Labels</h2>
+                      <div class="wT">
+                        <div class="n3">
+                          <div class="byl">
+                            <div class="TK"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="aTV" style="top: 27px;"></div>
+    `.trim();
+        const primaryBtnEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
+        primaryBtnEl.style.setProperty('--background-image', iconUrl ? `url(${iconUrl})` : 'unset');
+        primaryBtnEl.addEventListener('click', this.#onPrimaryButtonClick);
+        return element;
+    }
+    #onPrimaryButtonClick = (e) => {
+        this.#panelDescriptor?.primaryButton?.onClick?.(e);
+    };
+    #update() {
+        const element = this.element;
+        if (!element)
+            return;
+        const { ACTIVE, COLLAPSED } = CollapsiblePanelView.elementCss;
+        const isActive = element.classList.contains(ACTIVE);
+        const isCollapsed = element.classList.contains(COLLAPSED);
+        element.className = cx(ELEMENT_CLASS, this.#panelDescriptor?.className, {
+            [ACTIVE]: isActive,
+            [COLLAPSED]: isCollapsed,
+        });
+        this.#updateName(element);
+        this.#updateIcon(element);
+    }
+    #updateIcon(element) {
+        const iconContainerEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
+        const { iconUrl, className } = this.#panelDescriptor?.primaryButton ?? {};
+        if (iconUrl) {
+            const backgroundImage = `url(${GmailElementGetter.isDarkTheme()
+                ? iconUrl.darkTheme
+                : iconUrl.lightTheme})`;
+            iconContainerEl.style.setProperty('--background-image', backgroundImage);
+        }
+        else {
+            iconContainerEl.style.setProperty('--background-image', 'unset');
+        }
+        iconContainerEl.className = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
+    }
+    #updateName(element) {
+        const buttonTextEl = element.querySelector(PRIMARY_BUTTON_ELEMENT_SELECTOR);
+        if (!buttonTextEl) {
+            return;
+        }
+        buttonTextEl.textContent = this.#panelDescriptor?.primaryButton?.name ?? '';
+    }
+}