@asante-org/atlascopco-vt-litesitegenerator 1.6.0 → 1.6.4

package/dist/index.esm.js

@@ -570,6 +570,31 @@ var hasOpenNavItem = function (items) {
     return item.open || hasOpenNavItem(item.children || []);
   });
 };
+var clearMegaMenuBranch = function (scope) {
+  if (scope instanceof HTMLElement) {
+    scope.classList.remove("lsg-header__mega-item--open");
+    scope.classList.remove("lsg-header__mega-column--open");
+  }
+  scope.querySelectorAll(".lsg-header__mega-item--open").forEach(function (item) {
+    item.classList.remove("lsg-header__mega-item--open");
+  });
+  scope.querySelectorAll(".lsg-header__mega-column--open").forEach(function (column) {
+    column.classList.remove("lsg-header__mega-column--open");
+  });
+};
+var activateMegaMenuItem = function (item) {
+  var _a;
+  var parentColumn = item.parentElement;
+  if (parentColumn) {
+    Array.from(parentColumn.children).forEach(function (openItem) {
+      if (openItem !== item) {
+        clearMegaMenuBranch(openItem);
+      }
+    });
+  }
+  item.classList.add("lsg-header__mega-item--open");
+  (_a = item.querySelector(":scope > .lsg-header__mega-column")) === null || _a === void 0 ? void 0 : _a.classList.add("lsg-header__mega-column--open");
+};
 var HeaderActionButton = function (_a) {
   var label = _a.label,
     icon = _a.icon,
@@ -614,13 +639,14 @@ var LsgHeader = function (_a) {
     onDropdownClose = _a.onDropdownClose,
     onMegaItemHover = _a.onMegaItemHover,
     onMobileItemClick = _a.onMobileItemClick,
-    onMobileBreadcrumbClick = _a.onMobileBreadcrumbClick;
+    onMobileBreadcrumbClick = _a.onMobileBreadcrumbClick,
+    children = _a.children;
   var _l = useState(false),
     searchOpen = _l[0],
     setSearchOpen = _l[1];
   var headerRef = useRef(null);
   var mobileOpen = menuOpen || mobileLevel > 0;
-  var columns = getMegaColumns(navItems, activePath);
+  var columns = children ? [] : getMegaColumns(navItems, activePath);
   var mobileItems = getItemsAtLevel(navItems, activePath, mobileLevel || 1);
   var dropdownOpen = variant === "dropdown" && hasOpenNavItem(navItems);
   useEffect(function () {
@@ -646,6 +672,34 @@ var LsgHeader = function (_a) {
       document.removeEventListener("touchstart", closeOnOutsidePointerDown);
     };
   }, [dropdownOpen, menuOpen, onDropdownClose, onMenuToggle]);
+  useEffect(function () {
+    if (variant !== "mega" || !children || !menuOpen || !headerRef.current) {
+      return undefined;
+    }
+    var megaItems = Array.from(headerRef.current.querySelectorAll(".lsg-header__mega-item--has-children"));
+    var removeListeners = megaItems.map(function (item) {
+      var onMouseEnter = function () {
+        return activateMegaMenuItem(item);
+      };
+      var onFocusIn = function () {
+        return activateMegaMenuItem(item);
+      };
+      item.addEventListener("mouseenter", onMouseEnter);
+      item.addEventListener("focusin", onFocusIn);
+      return function () {
+        item.removeEventListener("mouseenter", onMouseEnter);
+        item.removeEventListener("focusin", onFocusIn);
+      };
+    });
+    return function () {
+      removeListeners.forEach(function (removeListener) {
+        return removeListener();
+      });
+      if (headerRef.current) {
+        clearMegaMenuBranch(headerRef.current);
+      }
+    };
+  }, [children, menuOpen, variant]);
   var openSearch = function () {
     return setSearchOpen(true);
   };
@@ -810,7 +864,7 @@ var LsgHeader = function (_a) {
     "data-lsg-menu-trigger": true
   }, /*#__PURE__*/React.createElement(LsgHeaderIcon, {
     name: mobileOpen ? "close" : "bars"
-  })))), variant === "mega" && menuOpen && renderMegaPanel(), mobileOpen && renderMobileMenu()), /*#__PURE__*/React.createElement(LsgSearchOverlay, {
+  })))), variant === "mega" && menuOpen && (children || renderMegaPanel()), mobileOpen && renderMobileMenu()), /*#__PURE__*/React.createElement(LsgSearchOverlay, {
     id: SEARCH_OVERLAY_ID,
     isOpen: searchOpen,
     onClose: function () {
@@ -904,37 +958,145 @@ var LsgSocialMediaIcons = function (_a) {
   }));
 };
 
+var PhoneIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.833 13.483c-.417-.416-1.25-.833-1.875-1.083-.625-.25-1.042-.167-1.458.208l-.834.833c-.208.209-.5.209-.708.042-.625-.5-1.833-1.583-2.583-2.333-.75-.75-1.75-1.875-2.25-2.583-.167-.208-.125-.5.083-.709l.834-.833c.416-.417.5-.833.25-1.458-.25-.625-.667-1.458-1.084-1.875C8.791 3.25 8.208 3 7.583 3c-.416 0-.833.167-1.125.458L5.625 4.292C4.5 5.417 4.708 7.125 5.333 8.833c.625 1.708 2 3.833 3.625 5.458 1.625 1.625 3.75 3 5.458 3.625 1.709.625 3.417.833 4.542-.292l.833-.833c.292-.292.458-.708.458-1.125 0-.625-.25-1.208-.416-1.583z",
+    fill: "currentColor"
+  }));
+};
+var FaxIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M16 6h-1V2H5v4H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h1v2h10v-2h1c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM7 4h6v2H7V4zm6 12H7v-4h6v4zm3-5H4V8h12v3z",
+    fill: "currentColor"
+  }));
+};
+var MailIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "20",
+    viewBox: "0 0 24 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M20 0H4C2.9 0 2 .9 2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V2l8 5 8-5v2z",
+    fill: "currentColor"
+  }));
+};
+var LocationIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "18",
+    height: "21",
+    viewBox: "0 0 18 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9 0C5.13 0 2 3.13 2 7c0 5.25 7 13 7 13s7-7.75 7-13C16 3.13 12.87 0 9 0zm0 9.5C7.62 9.5 6.5 8.38 6.5 7S7.62 4.5 9 4.5 11.5 5.62 11.5 7 10.38 9.5 9 9.5z",
+    fill: "currentColor"
+  }));
+};
 var LsgFooter = function (_a) {
-  var logo = _a.logo,
-    tagline = _a.tagline,
-    _b = _a.quickLinksGroups,
-    quickLinksGroups = _b === void 0 ? [] : _b,
-    _c = _a.socialItems,
-    socialItems = _c === void 0 ? [] : _c,
+  var _b = _a.variant,
+    variant = _b === void 0 ? "simple" : _b,
+    logo = _a.logo,
+    _c = _a.navItems,
+    navItems = _c === void 0 ? [] : _c,
+    contact = _a.contact,
+    _d = _a.quickLinks,
+    quickLinks = _d === void 0 ? [] : _d,
     copyright = _a.copyright;
   var year = new Date().getFullYear();
+  var copyrightText = copyright !== null && copyright !== void 0 ? copyright : "\u00A9 ".concat(year, " Brand - Part of Atlas Copco Group");
+  if (variant === "simple") {
+    return /*#__PURE__*/React.createElement("footer", {
+      className: "lsg-footer lsg-footer--simple"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "lsg-footer__simple-inner"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "lsg-footer__copyright"
+    }, copyrightText), navItems.length > 0 && /*#__PURE__*/React.createElement("nav", {
+      className: "lsg-footer__simple-nav",
+      "aria-label": "Footer navigation"
+    }, navItems.map(function (item, i) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: item.href
+      }, i > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "lsg-footer__pipe",
+        "aria-hidden": "true"
+      }, "|"), /*#__PURE__*/React.createElement("hr", {
+        className: "lsg-footer__mobile-divider",
+        "aria-hidden": "true"
+      })), /*#__PURE__*/React.createElement("a", {
+        href: item.href,
+        className: "lsg-footer__simple-nav-item"
+      }, item.label));
+    }))));
+  }
   return /*#__PURE__*/React.createElement("footer", {
-    className: "lsg-footer"
+    className: "lsg-footer lsg-footer--complex"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "lsg-footer__inner"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "lsg-footer__brand"
-  }, /*#__PURE__*/React.createElement(LsgLogo, logo), tagline && /*#__PURE__*/React.createElement("p", {
-    className: "lsg-footer__tagline"
-  }, tagline), socialItems.length > 0 && /*#__PURE__*/React.createElement(LsgSocialMediaIcons, {
-    items: socialItems
-  })), quickLinksGroups.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-footer__nav"
-  }, quickLinksGroups.map(function (group, i) {
+    className: "lsg-footer__complex-inner"
+  }, logo && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__logo-col"
+  }, /*#__PURE__*/React.createElement(LsgLogo, logo)), /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__content-cols"
+  }, contact && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__contact-col"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "lsg-footer__col-heading"
+  }, "CONTACT"), contact.address && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__address"
+  }, /*#__PURE__*/React.createElement(LocationIcon, null), /*#__PURE__*/React.createElement("p", null, contact.address)), /*#__PURE__*/React.createElement("hr", {
+    className: "lsg-footer__divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__contact-items"
+  }, contact.phone && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__contact-item"
+  }, /*#__PURE__*/React.createElement(PhoneIcon, null), /*#__PURE__*/React.createElement("span", null, contact.phone)), contact.fax && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__contact-item"
+  }, /*#__PURE__*/React.createElement(FaxIcon, null), /*#__PURE__*/React.createElement("span", null, contact.fax)), contact.email && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__contact-item"
+  }, /*#__PURE__*/React.createElement(MailIcon, null), /*#__PURE__*/React.createElement("a", {
+    href: "mailto:".concat(contact.email)
+  }, contact.email)))), quickLinks.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-footer__quicklinks-col"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "lsg-footer__col-heading"
+  }, "QUICK LINKS"), /*#__PURE__*/React.createElement("ul", {
+    className: "lsg-footer__quicklinks-list"
+  }, quickLinks.map(function (link, i) {
     var _a;
-    return /*#__PURE__*/React.createElement(LsgQuickLinks, _extends({
-      key: (_a = group.heading) !== null && _a !== void 0 ? _a : i
-    }, group));
-  }))), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("li", {
+      key: (_a = link.href) !== null && _a !== void 0 ? _a : i,
+      className: "lsg-footer__quicklink-item"
+    }, /*#__PURE__*/React.createElement("a", {
+      href: link.href,
+      className: "lsg-footer__quicklink"
+    }, link.label), /*#__PURE__*/React.createElement("hr", {
+      className: "lsg-footer__divider"
+    }));
+  }))))), /*#__PURE__*/React.createElement("hr", {
+    className: "lsg-footer__bottom-divider"
+  }), /*#__PURE__*/React.createElement("div", {
     className: "lsg-footer__bottom"
   }, /*#__PURE__*/React.createElement("p", {
     className: "lsg-footer__copyright"
-  }, copyright !== null && copyright !== void 0 ? copyright : "\u00A9 ".concat(year, " Atlas Copco AB. All rights reserved."))));
+  }, copyrightText)));
 };
 
 var BASE_COMPONENTS = {