@openeuropa/bcl-theme-joinup 0.4230.202512021730 → 0.4360.202601141610

package/js/oe-bcl-joinup.umd.js

@@ -4871,12 +4871,27 @@
     MainNavigation.init(".bcl-navbar-toggler");
   });
 
+  const SUBMENU_HEIGHT_VARIABLE = "--oel-mega-menu-submenu-height";
+  const SUBMENU_BODY_SELECTOR = ".__submenu_body";
   class MegaMenu {
+    scheduleSubmenuHeightUpdate = () => {
+      if (this.submenuHeightFrame) {
+        return;
+      }
+      this.submenuHeightFrame = window.requestAnimationFrame(() => {
+        this.submenuHeightFrame = null;
+        this.updateSubmenuHeight();
+      });
+    };
     constructor(root) {
       this.root = root;
+      this.submenuHeightFrame = null;
+      this.submenuBodies = SelectorEngine.find(SUBMENU_BODY_SELECTOR, this.root);
       this.backButton = SelectorEngine.findOne(".back-button", this.root);
       this.trigger = SelectorEngine.findOne(':scope > .dropdown-toggle[data-bs-toggle="dropdown"]', this.root);
       this.ul = SelectorEngine.findOne('.bcl-mega-menu__items.__level-1', this.root);
+      EventHandler.on(window, "resize", this.scheduleSubmenuHeightUpdate);
+      EventHandler.on(window, "orientationchange", this.scheduleSubmenuHeightUpdate);
       this.addSubmenuTriggerListeners();
       this.addBackButtonListener();
       this.addTriggerListeners();
@@ -4932,6 +4947,7 @@
 
       // When the mega menu is opened, focus the first item in the menu.
       EventHandler.on(this.trigger, 'shown.bs.dropdown', () => {
+        this.scheduleSubmenuHeightUpdate();
         const panelId = this.trigger.getAttribute('aria-controls');
         const panel = panelId ? document.getElementById(panelId) : null;
         const firstFocusable = panel ? this.getFocusableChildren(panel)[0] : null;
@@ -4990,6 +5006,7 @@
       trigger.setAttribute('aria-expanded', 'true');
       const panel = this.getPanelForTrigger(trigger);
       if (panel) panel.hidden = false;
+      this.scheduleSubmenuHeightUpdate();
     }
 
     /**
@@ -5015,6 +5032,33 @@
       const panel = this.getPanelForTrigger(trigger);
       if (panel) panel.hidden = true;
     }
+    updateSubmenuHeight() {
+      if (!this.trigger || this.trigger.getAttribute('aria-expanded') !== 'true') {
+        return;
+      }
+      if (!this.submenuBodies || this.submenuBodies.length === 0) {
+        return;
+      }
+      const viewportHeight = document.documentElement && document.documentElement.clientHeight || window.innerHeight || 0;
+      if (!viewportHeight) {
+        return;
+      }
+      this.submenuBodies.forEach(submenuBody => {
+        if (!submenuBody.isConnected || submenuBody.closest('[hidden]')) {
+          return;
+        }
+        const rect = submenuBody.getBoundingClientRect();
+        const visibleTop = Math.max(rect.top, 0);
+        // Use the distance to the viewport bottom instead of the current element
+        // height. Nested submenus inherit the parent max-height, so relying on
+        // rect.bottom would keep the parent's value and never recalc for children.
+        const availableHeight = Math.max(0, viewportHeight - visibleTop);
+        const value = `${availableHeight}px`;
+        if (submenuBody.style.getPropertyValue(SUBMENU_HEIGHT_VARIABLE) !== value) {
+          submenuBody.style.setProperty(SUBMENU_HEIGHT_VARIABLE, value);
+        }
+      });
+    }
     static init(selector = ".bcl-mega-menu") {
       const megaMenus = SelectorEngine.find(selector);
       megaMenus.forEach(menuEl => new MegaMenu(menuEl));
@@ -6923,6 +6967,72 @@
 
   defineJQueryPlugin$1(Toast);
 
+  const HEADER_SELECTOR = ".bcl-header";
+  const TOGGLER_SELECTOR = ".bcl-navbar-toggler";
+  const OFFSET_VARIABLE = "--oel-mega-menu-offset-top";
+  class Header {
+    scheduleUpdate = () => {
+      if (this.frameRequest) {
+        return;
+      }
+      this.frameRequest = window.requestAnimationFrame(() => {
+        this.frameRequest = null;
+        this.updateOffset();
+      });
+    };
+    constructor(element) {
+      this.element = element;
+      this.frameRequest = null;
+      this.resizeObserver = null;
+      this.init();
+    }
+    init() {
+      this.updateOffset();
+      EventHandler.on(window, "resize", this.scheduleUpdate);
+      EventHandler.on(window, "orientationchange", this.scheduleUpdate);
+      const togglers = SelectorEngine.find(TOGGLER_SELECTOR, this.element);
+      togglers.forEach(toggler => {
+        // Some layouts move the header when the nav toggler expands; keep offset in sync.
+        EventHandler.on(toggler, "click", this.scheduleUpdate);
+      });
+    }
+    updateOffset() {
+      if (!this.element) {
+        return;
+      }
+      const rect = this.element.getBoundingClientRect();
+      const offset = Math.max(0, rect.top);
+      const value = `${offset}px`;
+      if (this.element.style.getPropertyValue(OFFSET_VARIABLE) === value) {
+        return;
+      }
+      this.element.style.setProperty(OFFSET_VARIABLE, value);
+    }
+    static init(root) {
+      if (typeof document === "undefined" || typeof window === "undefined") {
+        return;
+      }
+      const resolvedRoot = root || document;
+      const context = resolvedRoot instanceof Element ? resolvedRoot : resolvedRoot.documentElement || document.documentElement;
+      const headers = SelectorEngine.find(HEADER_SELECTOR, context);
+      headers.forEach(headerElement => {
+        if (headerElement.dataset.headerOffsetInitialized === "true") {
+          return;
+        }
+        headerElement.dataset.headerOffsetInitialized = "true";
+        new Header(headerElement);
+      });
+    }
+  }
+  if (typeof document !== "undefined") {
+    const initializeHeaderOffset = () => Header.init();
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", initializeHeaderOffset);
+    } else {
+      initializeHeaderOffset();
+    }
+  }
+
   /**
    * --------------------------------------------------------------------------
    * Bootstrap (v5.1.0): index.esm.js
@@ -6948,7 +7058,8 @@
     ScrollSpy,
     Tab,
     Toast,
-    Tooltip
+    Tooltip,
+    Header
   };
 
   return index_umd;