wj-elements 0.1.64 → 0.1.65

package/dist/wje-dropdown.js

@@ -37,6 +37,7 @@ class Dropdown extends WJElement {
      * @param {Event} e - The event object.
      */
     __publicField(this, "toggleCallback", (e) => {
+      e.stopPropagation();
       if (this.classList.contains("active")) {
         this.onClose(e);
       } else {

package/dist/wje-menu-item.js

@@ -15,6 +15,40 @@ class MenuItem extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "MenuItem");
+    __publicField(this, "mouseenterHandler", (e) => {
+      if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
+        if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
+          return;
+        this.activateSubmenu(e);
+        e.stopPropagation();
+        this.showSubmenu();
+      }
+    });
+    __publicField(this, "clickHandler", (e) => {
+      switch (this.variant) {
+        case "NAV":
+          if (!this.collapse && this.hasSubmenu) {
+            this.submenuToggle(e);
+            this.hideSubmenu();
+            e.stopPropagation();
+          } else {
+            event.dispatchCustomEvent(this, "wje-menu-item:click");
+            event.dispatchCustomEvent(this, this.dialog, {
+              bubbles: true
+            });
+          }
+          break;
+        case "CONTEXT":
+          let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
+          if (submenuElements == null ? void 0 : submenuElements.hasAttribute("active")) {
+            this.shouldHideSubmenu(e);
+          } else {
+            this.activateSubmenu(e);
+            this.showSubmenu(e);
+          }
+          break;
+      }
+    });
     /**
      * Checks if the submenu should be hidden based on the event.
      *
@@ -212,29 +246,18 @@ class MenuItem extends WJElement {
   afterDraw() {
     this.addEventListener("mousemove", this.dispatchMove);
     this.addEventListener("wje-popup:reposition", this.dispatchReposition);
-    event.addListener(this, "mouseenter", null, (e) => {
-      if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
-        if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
-          return;
-        this.activateSubmenu(e);
-        e.stopPropagation();
-        this.showSubmenu();
-      }
-    });
+    event.addListener(this, "mouseenter", null, this.mouseenterHandler);
     event.addListener(this, "mouseleave", null, this.shouldHideSubmenu);
     event.addListener(this, "focusout", null, this.shouldHideSubmenu);
-    event.addListener(this, "click", null, (e) => {
-      if (!this.collapse && this.variant === "NAV" && this.hasSubmenu) {
-        this.submenuToggle(e);
-        this.hideSubmenu();
-        e.stopPropagation();
-      } else {
-        event.dispatchCustomEvent(this, "wje-menu-item:click");
-        event.dispatchCustomEvent(this, this.dialog, {
-          bubbles: true
-        });
-      }
-    });
+    event.addListener(this, "click", null, this.clickHandler);
+  }
+  afterDisconnect() {
+    event.removeListener(this, "mousemove", null, this.dispatchMove);
+    event.removeListener(this, "wje-popup:reposition", null, this.dispatchReposition);
+    event.removeListener(this, "mouseenter", null, this.mouseenterHandler);
+    event.removeListener(this, "mouseleave", null, this.shouldHideSubmenu);
+    event.removeListener(this, "focusout", null, this.shouldHideSubmenu);
+    event.removeListener(this, "click", null, this.clickHandler);
   }
   /**
    * Creates a tooltip for the MenuItem when it is collapsed.
@@ -261,9 +284,10 @@ class MenuItem extends WJElement {
    * Shows the submenu of the MenuItem.
    */
   showSubmenu() {
+    var _a;
     this.tabIndex = -1;
     if (this.hasSubmenu) {
-      this.popup.setAttribute("active", "");
+      (_a = this.popup) == null ? void 0 : _a.setAttribute("active", "");
       this.classList.add("expanded-submenu");
       this.native.classList.add("expanded-submenu");
     }
@@ -272,9 +296,10 @@ class MenuItem extends WJElement {
    * Hides the submenu of the MenuItem.
    */
   hideSubmenu() {
+    var _a;
     this.tabIndex = 0;
     if (this.hasSubmenu) {
-      this.popup.removeAttribute("active");
+      (_a = this.popup) == null ? void 0 : _a.removeAttribute("active");
       this.classList.remove("expanded-submenu");
       this.native.classList.remove("expanded-submenu");
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",