wj-elements 0.1.221 → 0.1.223

package/dist/packages/wje-dropdown/dropdown.element.d.ts

@@ -26,6 +26,19 @@ export default class Dropdown extends WJElement {
     dependencies: {
         "wje-popup": Popup;
     };
+    /**
+     * Sets or removes the 'portaled' attribute on the element.
+     * When the value is truthy, the attribute 'portaled' is added to the element.
+     * When the value is falsy, the attribute 'portaled' is removed from the element.
+     * @param {boolean} value - Determines whether to add or remove the 'portaled' attribute.
+     */
+    set portaled(value: boolean);
+    /**
+     * Getter method for the `portaled` property.
+     * Checks if the `portaled` attribute is present on the element.
+     * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.
+     */
+    get portaled(): boolean;
     /**
      * Sets the placement of the dropdown.
      * @param value
@@ -52,11 +65,16 @@ export default class Dropdown extends WJElement {
      */
     draw(): DocumentFragment;
     anchorSlot: HTMLSlotElement;
-    popupHideCallback: (e: any) => void;
     /**
      * Adds event listeners for the mouseenter and mouseleave events.
      */
     afterDraw(): void;
+    popupHideCallback: (e: any) => void;
+    /**
+     * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.
+     * This works even when the menu is portaled, because we rely on the composed path.
+     */
+    onMenuItemClick: (e: any) => void;
     /**
      * @summary Toggles the dropdown element between active and inactive states.
      * Calls the `onOpen` method if the element is currently inactive,
@@ -81,4 +99,5 @@ export default class Dropdown extends WJElement {
     beforeClose: () => void;
     afterClose: () => void;
     onClose: () => void;
+    #private;
 }

package/dist/packages/wje-menu-item/menu-item.element.d.ts

@@ -43,7 +43,7 @@ export default class MenuItem extends WJElement {
      * @returns {Array} An empty array as no attributes are being observed.
      */
     static get observedAttributes(): any[];
-    _collapsible: boolean;
+    _bind: boolean;
     /**
      * Getter for placement attribute.
      * @returns {string} The placement attribute of the menu or "right-start" if it doesn't exist.
@@ -101,6 +101,8 @@ export default class MenuItem extends WJElement {
     afterDraw(): void;
     unbindRouterLinks: any;
     mouseenterHandler: (e: any) => void;
+    rebindRouterLinks: (e: any) => void;
+    unbindPortalRouterLinks: any;
     /**
      * Handles the click event on the MenuItem.
      * @param {object} e

package/dist/packages/wje-popup/popup.element.d.ts

@@ -52,6 +52,7 @@ export default class Popup extends WJElement {
      * @returns {boolean} True if the 'portal' attribute exists, otherwise false.
      */
     get portal(): boolean;
+    get floatingEl(): HTMLDivElement;
     beforeDraw(context: any, store: any, params: any): void;
     /**
      * Draws the component for the popup.
@@ -74,7 +75,6 @@ export default class Popup extends WJElement {
     anchorEl: any;
     manualCallback: (e: any) => void;
     clickHandler: (e: any) => void;
-    get floatingEl(): HTMLDivElement;
     /**
      * Toggles the active attribute of the popup.
      */
@@ -95,6 +95,8 @@ export default class Popup extends WJElement {
      */
     _mountContentToPortal(): void;
     _portalNative: HTMLDivElement;
+    _portalSlot: HTMLSlotElement;
+    _portalArrowSlot: HTMLSlotElement;
     _portalAttrObserver: MutationObserver;
     _defPlaceholders: any[];
     _arrowPlaceholders: any[];

package/dist/{popup.element-DmYw9KXv.js → popup.element-C_eXD5J4.js}

@@ -1385,7 +1385,9 @@ class Popup extends WJElement {
       this.showHide();
     });
     __publicField(this, "clickHandler", (e) => {
-      const path = e.composedPath();
+      const path = typeof e.composedPath === "function" ? e.composedPath() : [];
+      const isMenuClick = path.some((n) => n && (n.tagName === "WJE-MENU-ITEM" || n.tagName === "WJE-MENU" || n.tagName === "WJE-DROPDOWN"));
+      if (isMenuClick) return;
       const inside = path.includes(this) || this.floatingEl && path.includes(this.floatingEl);
       if (!inside && this.hasAttribute("active")) this.hide(true);
     });
@@ -1442,6 +1444,9 @@ class Popup extends WJElement {
   get portal() {
     return this.hasAttribute("portal");
   }
+  get floatingEl() {
+    return this._floatingEl || this.native;
+  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -1530,9 +1535,6 @@ class Popup extends WJElement {
       event.addListener(this.anchorEl, "click", null, this.manualCallback, { stopPropagation: true });
     }
   }
-  get floatingEl() {
-    return this._floatingEl || this.native;
-  }
   /**
    * Toggles the active attribute of the popup.
    */
@@ -1625,6 +1627,10 @@ class Popup extends WJElement {
       this._portalNative = document.createElement("div");
       this._portalNative.setAttribute("part", "native");
       this._portalNative.classList.add("native-popup");
+      this._portalSlot = document.createElement("slot");
+      this._portalArrowSlot = document.createElement("slot");
+      this._portalArrowSlot.setAttribute("name", "arrow");
+      this._portalNative.append(this._portalSlot, this._portalArrowSlot);
     }
     this._portalShadow.append(this._portalNative);
     const mirrorAll = () => {
@@ -1655,7 +1661,7 @@ class Popup extends WJElement {
       const ph = document.createComment("wje-portal-default");
       this._defPlaceholders.push({ node: n, ph });
       n.parentNode && n.parentNode.insertBefore(ph, n.nextSibling);
-      this._portalNative.append(n);
+      this._portalContainer.append(n);
     }
     const arrowNodes = (this.slotArrow instanceof HTMLSlotElement ? this.slotArrow.assignedNodes({ flatten: true }) : []).filter((n) => n && n.nodeType === Node.ELEMENT_NODE || n && n.nodeType === Node.TEXT_NODE);
     this._arrowPlaceholders = [];
@@ -1663,10 +1669,15 @@ class Popup extends WJElement {
       const ph = document.createComment("wje-portal-arrow");
       this._arrowPlaceholders.push({ node: n, ph });
       n.parentNode && n.parentNode.insertBefore(ph, n.nextSibling);
-      this._portalNative.append(n);
+      this._portalContainer.append(n);
     }
     this._floatingEl = this._portalNative;
     this._portaled = true;
+    this._floatingEl = this._portalNative;
+    this._portaled = true;
+    console.log("Portal mount 1", { root: this._portalShadow, container: this._portalContainer, floating: this._portalNative });
+    event.dispatchCustomEvent(this, "wje-router:rebind", { root: this._portalShadow, container: this._portalContainer, floating: this._portalNative });
+    console.log("Portal mount 2", { root: this._portalShadow, container: this._portalContainer, floating: this._portalNative });
   }
   /**
    * Restores the content previously moved to a portal back to its original location.
@@ -1709,6 +1720,15 @@ class Popup extends WJElement {
       this._portalContainer = null;
       this._portalShadow = null;
     }
+    const detail = { root: this.shadowRoot, container: this, floating: this.native };
+    this.dispatchEvent(new CustomEvent("wje-portal:restored", { bubbles: true, composed: true, detail }));
+    try {
+      if (typeof window.bindRouterLinks === "function") {
+        window.bindRouterLinks(this.shadowRoot);
+      }
+      document.dispatchEvent(new CustomEvent("wje-router:rebind", { bubbles: true, composed: true, detail }));
+    } catch {
+    }
   }
   /**
    * Ensures that a portal root is created and initialized properly with a shadow DOM and attached styles.
@@ -1764,6 +1784,13 @@ class Popup extends WJElement {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     if (this.portal) {
       this._mountContentToPortal();
+      if (this.portal && this._portalShadow) {
+        const detail = { root: this._portalShadow, container: this._portalContainer, floating: this._portalNative };
+        document.dispatchEvent(new CustomEvent("wje-router:rebind", { bubbles: true, composed: true, detail }));
+        if (typeof window.bindRouterLinks === "function") {
+          window.bindRouterLinks(this._portalShadow);
+        }
+      }
     }
     if (this.loader) {
       (_b = (_a = this.floatingEl) == null ? void 0 : _a.classList) == null ? void 0 : _b.add("loading");
@@ -1799,7 +1826,9 @@ class Popup extends WJElement {
     (_c = this.cleanup) == null ? void 0 : _c.call(this);
     this.cleanup = void 0;
     document.removeEventListener("click", this.clickHandler, { capture: true });
-    this._restoreContentFromPortal();
+    if (this.portal && this._portaled) {
+      this._restoreContentFromPortal();
+    }
     if (this.hasAttribute("active")) {
       this.removeAttribute("active");
     }
@@ -1819,4 +1848,4 @@ class Popup extends WJElement {
 export {
   Popup as P
 };
-//# sourceMappingURL=popup.element-DmYw9KXv.js.map
+//# sourceMappingURL=popup.element-C_eXD5J4.js.map