@openeuropa/bcl-theme-default 0.4298.202511051800 → 0.4360.202601141610

package/js/oe-bcl-default.esm.js

@@ -2702,12 +2702,27 @@ document.addEventListener("DOMContentLoaded", () => {
   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();
@@ -2763,6 +2778,7 @@ class MegaMenu {
 
     // 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;
@@ -2821,6 +2837,7 @@ class MegaMenu {
     trigger.setAttribute('aria-expanded', 'true');
     const panel = this.getPanelForTrigger(trigger);
     if (panel) panel.hidden = false;
+    this.scheduleSubmenuHeightUpdate();
   }
 
   /**
@@ -2846,6 +2863,33 @@ class MegaMenu {
     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));
@@ -5256,5 +5300,71 @@ class AccessibleToggle {
   }
 }
 
-export { AccessibleToggle, AccordionToggle, Alert, Button, Carousel, Collapse, Dropdown, Gallery, MainNavigation, MegaMenu, Modal, Offcanvas, Popover, ScrollSpy, ScrollSpy$1 as ScrollSpyV2, Tab, Toast, Tooltip };
+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();
+  }
+}
+
+export { AccessibleToggle, AccordionToggle, Alert, Button, Carousel, Collapse, Dropdown, Gallery, Header, MainNavigation, MegaMenu, Modal, Offcanvas, Popover, ScrollSpy, ScrollSpy$1 as ScrollSpyV2, Tab, Toast, Tooltip };
 //# sourceMappingURL=oe-bcl-default.esm.js.map