@sunderapps/n4v - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/js/n4v.js

@@ -9,2 +9,3 @@ /*
  */
+var n4v;
 /******/ (() => { // webpackBootstrap
@@ -14,19 +15,9 @@ /******/ 	"use strict";
 
-/***/ "./src/ts/n4v.ts":
-/*!***********************!*\
-  !*** ./src/ts/n4v.ts ***!
-  \***********************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-eval("\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n__webpack_require__(/*! ../scss/n4v.scss */ \"./src/scss/n4v.scss\");\n\nvar n4vbar_1 = __importDefault(__webpack_require__(/*! ./n4vbar */ \"./src/ts/n4vbar.ts\"));\n\nvar n4v = new n4vbar_1.default();\nexports[\"default\"] = n4v;\n\n//# sourceURL=webpack://@sunderapps/n4v/./src/ts/n4v.ts?");
-
-/***/ }),
-
-/***/ "./src/ts/n4vbar.ts":
+/***/ "./src/ts/n4vBar.ts":
 /*!**************************!*\
-  !*** ./src/ts/n4vbar.ts ***!
+  !*** ./src/ts/n4vBar.ts ***!
   \**************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
-eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar selectors_1 = __importDefault(__webpack_require__(/*! ./selectors */ \"./src/ts/selectors.ts\"));\n\nvar settings_1 = __importDefault(__webpack_require__(/*! ./settings */ \"./src/ts/settings.ts\"));\n\nvar n4vBar = /*#__PURE__*/function () {\n  // Initializers\n  function n4vBar() {\n    _classCallCheck(this, n4vBar);\n\n    this.el = {};\n    this.attachElements();\n    this.attachEvents();\n    this.enableJavascript();\n    this.setMobileMenu();\n  }\n\n  _createClass(n4vBar, [{\n    key: \"attachElements\",\n    value: function attachElements() {\n      var _a;\n\n      this.el.header = document.getElementById(selectors_1.default.ids.header);\n      this.el.mobileButton = ((_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelector(selectors_1.default.controls(selectors_1.default.ids.wrapper))) || null;\n      this.el.wrapper = document.getElementById(selectors_1.default.ids.wrapper);\n    }\n  }, {\n    key: \"attachEvents\",\n    value: function attachEvents() {\n      var _this = this;\n\n      var _a, _b, _c;\n\n      var focusables = (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors_1.default.focusable),\n          lastFocusable = focusables === null || focusables === void 0 ? void 0 : focusables[(focusables === null || focusables === void 0 ? void 0 : focusables.length) - 1];\n      lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.addEventListener('keydown', n4vBar.throttle(this.eWrapTab.bind(this)));\n      focusables === null || focusables === void 0 ? void 0 : focusables.forEach(function (focusable) {\n        focusable.addEventListener('keydown', n4vBar.throttle(_this.eHandleKeypress.bind(_this)));\n      });\n      var menuButtons = (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors_1.default.controls() + selectors_1.default.not(selectors_1.default.controls(selectors_1.default.ids.wrapper)));\n      menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuButton) {\n        menuButton.addEventListener('mousedown', n4vBar.throttle(_this.eToggleMenu.bind(_this), settings_1.default.delay.slow, {\n          trailing: false\n        }));\n      });\n      (_c = this.el.mobileButton) === null || _c === void 0 ? void 0 : _c.addEventListener('mousedown', n4vBar.throttle(this.eToggleMobileMenu.bind(this), settings_1.default.delay.slow, {\n        trailing: false\n      }));\n    }\n  }, {\n    key: \"enableJavascript\",\n    value: function enableJavascript() {\n      var _a, _b;\n\n      (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.classList.add(selectors_1.default.classes.js);\n      (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.classList.add(selectors_1.default.classes.fixed);\n    } // Utility\n\n  }, {\n    key: \"setMobileMenu\",\n    value: // Functionality\n    function setMobileMenu() {\n      var _this2 = this;\n\n      var open = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n      var _a, _b, _c;\n\n      var ariaExpanded = open ? 'true' : 'false',\n          ariaLabel = open ? 'close menu' : 'open menu';\n      (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', ariaExpanded);\n      setTimeout(function () {\n        var _a;\n\n        (_a = _this2.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', ariaLabel);\n      }, settings_1.default.delay.fast);\n\n      if (open) {\n        (_b = this.el.wrapper) === null || _b === void 0 ? void 0 : _b.classList.add(selectors_1.default.classes.open);\n      } else {\n        (_c = this.el.wrapper) === null || _c === void 0 ? void 0 : _c.classList.remove(selectors_1.default.classes.open);\n        this.closeAllMenus();\n      }\n    }\n  }, {\n    key: \"setMenu\",\n    value: function setMenu(button) {\n      var open = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n      var ariaExpanded = open ? 'true' : 'false',\n          menu = button === null || button === void 0 ? void 0 : button.nextElementSibling;\n\n      if (button && menu) {\n        menu.classList.add(selectors_1.default.classes.anime);\n        button.setAttribute('aria-expanded', ariaExpanded);\n        menu.style.height = open ? n4vBar.getHeight(menu) + 'px' : '';\n        setTimeout(function () {\n          menu === null || menu === void 0 ? void 0 : menu.classList.remove(selectors_1.default.classes.anime);\n        }, settings_1.default.delay.default);\n      }\n    }\n  }, {\n    key: \"closeAllMenus\",\n    value: function closeAllMenus() {\n      var _this3 = this;\n\n      var _a;\n\n      var menuButtons = (_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors_1.default.subMenuButtons);\n      menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuButton) {\n        _this3.setMenu(menuButton);\n      });\n    }\n  }, {\n    key: \"openClosestMenu\",\n    value: function openClosestMenu() {\n      var _a;\n\n      var activeButton = document.activeElement,\n          activeMenu = activeButton === null || activeButton === void 0 ? void 0 : activeButton.nextElementSibling,\n          showing = ((_a = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';\n\n      if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) === selectors_1.default.ids.wrapper) {\n        activeMenu = this.el.wrapper;\n      }\n\n      if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) && activeMenu && !showing) {\n        activeButton.click();\n        var firstFocusable = activeMenu.querySelector(selectors_1.default.focusable);\n        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();\n      }\n    }\n  }, {\n    key: \"closeClosestMenu\",\n    value: function closeClosestMenu() {\n      var _a, _b;\n\n      var activeElement = document.activeElement,\n          activeMenu = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(selectors_1.default.subMenu),\n          activeButton = (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.previousElementSibling) ? activeMenu.previousElementSibling : this.el.mobileButton;\n\n      if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-controls')) && ((_a = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true') {\n        activeButton = activeElement;\n      }\n\n      if (((_b = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true') {\n        activeButton === null || activeButton === void 0 ? void 0 : activeButton.click();\n        activeButton === null || activeButton === void 0 ? void 0 : activeButton.focus();\n      }\n    }\n  }, {\n    key: \"toggleClosestMenu\",\n    value: function toggleClosestMenu() {\n      var _a, _b;\n\n      if (((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true') {\n        this.closeClosestMenu();\n      } else {\n        this.openClosestMenu();\n      }\n    } // Events\n\n  }, {\n    key: \"eWrapTab\",\n    value: function eWrapTab(e) {\n      var _a;\n\n      if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {\n        (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.focus();\n\n        if (document.activeElement === this.el.mobileButton) {\n          e.preventDefault();\n        }\n      }\n    }\n  }, {\n    key: \"eHandleButtonKeypress\",\n    value: function eHandleButtonKeypress(e) {\n      switch (e.key.toLowerCase()) {\n        case 'escape':\n        case 'arrowleft':\n          this.closeClosestMenu();\n          break;\n\n        case 'arrowright':\n          break;\n\n        case 'enter':\n        case 'space':\n          break;\n      }\n    }\n  }, {\n    key: \"eHandleLinkKeypress\",\n    value: function eHandleLinkKeypress(e) {\n      switch (e.key.toLowerCase()) {\n        case 'escape':\n        case 'arrowleft':\n          this.closeClosestMenu();\n          break;\n\n        case 'arrowright':\n          this.openClosestMenu();\n          break;\n\n        case 'enter':\n        case 'space':\n          this.toggleClosestMenu();\n          break;\n      }\n    }\n  }, {\n    key: \"eHandleKeypress\",\n    value: function eHandleKeypress(e) {\n      if (e.key.toLowerCase() !== 'tab') {\n        e.preventDefault();\n      }\n\n      var target = e.target;\n\n      switch (target === null || target === void 0 ? void 0 : target.tagName.toLowerCase()) {\n        case 'a':\n          this.eHandleLinkKeypress(e);\n          break;\n\n        case 'button':\n          this.eHandleButtonKeypress(e);\n          break;\n      }\n    }\n  }, {\n    key: \"eToggleMobileMenu\",\n    value: function eToggleMobileMenu(e) {\n      var _a;\n\n      var target = e.target,\n          open = ((_a = target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== 'true';\n      this.setMobileMenu(open);\n    }\n  }, {\n    key: \"eToggleMenu\",\n    value: function eToggleMenu(e) {\n      var _a;\n\n      var target = e.target,\n          open = ((_a = target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== 'true';\n      this.setMenu(target, open);\n    }\n  }], [{\n    key: \"throttle\",\n    value: function throttle(func) {\n      var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;\n      var options = arguments.length > 2 ? arguments[2] : undefined;\n\n      var context,\n          args,\n          result,\n          timeout,\n          previous = 0,\n          later = function later() {\n        previous = (options === null || options === void 0 ? void 0 : options.leading) === false ? 0 : new Date().getTime();\n        timeout = 0;\n        result = func.apply(context, args);\n\n        if (!timeout) {\n          context = args = null;\n        }\n      },\n          throttled = function throttled() {\n        var now = new Date().getTime();\n\n        if (!previous && (options === null || options === void 0 ? void 0 : options.leading) === false) {\n          previous = now;\n        }\n\n        var remaining = wait - now + previous;\n        context = this;\n        args = arguments;\n\n        if (remaining <= 0 || remaining > wait) {\n          if (timeout) {\n            clearTimeout(timeout);\n            timeout = 0;\n          }\n\n          previous = now;\n          result = func.apply(context, args);\n\n          if (!timeout) {\n            context = args = null;\n          }\n        } else if (!timeout && (options === null || options === void 0 ? void 0 : options.trailing) !== false) {\n          timeout = window.setTimeout(later, remaining);\n        }\n\n        return result;\n      };\n\n      return throttled;\n    }\n  }, {\n    key: \"getHeight\",\n    value: function getHeight(el) {\n      el === null || el === void 0 ? void 0 : el.classList.add(selectors_1.default.classes.gettingHeight);\n      var height = (el === null || el === void 0 ? void 0 : el.scrollHeight) || 0;\n      el === null || el === void 0 ? void 0 : el.classList.remove(selectors_1.default.classes.gettingHeight);\n      return height;\n    }\n  }]);\n\n  return n4vBar;\n}();\n\nexports[\"default\"] = n4vBar;\n\n//# sourceURL=webpack://@sunderapps/n4v/./src/ts/n4vbar.ts?");
+eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n__webpack_require__(/*! ../scss/n4v.scss */ \"./src/scss/n4v.scss\");\n\nvar selectors_1 = __importDefault(__webpack_require__(/*! ./selectors */ \"./src/ts/selectors.ts\"));\n\nvar settings_1 = __importDefault(__webpack_require__(/*! ./settings */ \"./src/ts/settings.ts\"));\n\nvar util_1 = __importDefault(__webpack_require__(/*! ./util */ \"./src/ts/util.ts\"));\n\nvar n4vBar = /*#__PURE__*/function () {\n  // Initializers\n  function n4vBar() {\n    _classCallCheck(this, n4vBar);\n\n    this.el = {};\n    this.attachElements();\n    this.attachEvents();\n    this.enableJavascript();\n    this.setMobileMenu();\n  }\n\n  _createClass(n4vBar, [{\n    key: \"attachElements\",\n    value: function attachElements() {\n      var _a;\n\n      this.el.header = document.getElementById(selectors_1.default.ids.header);\n      this.el.mobileButton = ((_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelector(selectors_1.default.controls(selectors_1.default.ids.wrapper))) || null;\n      this.el.wrapper = document.getElementById(selectors_1.default.ids.wrapper);\n    }\n  }, {\n    key: \"attachEvents\",\n    value: function attachEvents() {\n      var _this = this;\n\n      var _a, _b, _c;\n\n      window.addEventListener('resize', util_1.default.throttle(this.eHandleResize.bind(this), settings_1.default.delay.default, {\n        trailing: false\n      }));\n      window.addEventListener('scroll', util_1.default.throttle(this.eHandleScroll.bind(this), settings_1.default.delay.default, {\n        trailing: false\n      }));\n      var focusables = (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors_1.default.focusable),\n          lastFocusable = focusables === null || focusables === void 0 ? void 0 : focusables[(focusables === null || focusables === void 0 ? void 0 : focusables.length) - 1];\n      lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.addEventListener('keydown', util_1.default.throttle(this.eWrapTab.bind(this)));\n      focusables === null || focusables === void 0 ? void 0 : focusables.forEach(function (focusable) {\n        focusable.addEventListener('keydown', util_1.default.throttle(_this.eHandleKeypress.bind(_this)));\n      });\n      var menuButtons = (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors_1.default.controls() + selectors_1.default.not(selectors_1.default.controls(selectors_1.default.ids.wrapper)));\n      menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuButton) {\n        menuButton.addEventListener('mousedown', util_1.default.throttle(_this.eToggleMenu.bind(_this), settings_1.default.delay.slow, {\n          trailing: false\n        }));\n      });\n      (_c = this.el.mobileButton) === null || _c === void 0 ? void 0 : _c.addEventListener('mousedown', util_1.default.throttle(this.eToggleMobileMenu.bind(this), settings_1.default.delay.slow, {\n        trailing: false\n      }));\n    }\n  }, {\n    key: \"enableJavascript\",\n    value: function enableJavascript() {\n      var _a, _b;\n\n      (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.classList.add(selectors_1.default.classes.js);\n      (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.classList.add(selectors_1.default.classes.fixed);\n    } // Functionality\n\n  }, {\n    key: \"setMobileMenu\",\n    value: function setMobileMenu() {\n      var _this2 = this;\n\n      var open = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n      var _a, _b, _c;\n\n      var ariaExpanded = open ? 'true' : 'false',\n          ariaLabel = open ? 'close menu' : 'open menu';\n      (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', ariaExpanded);\n      setTimeout(function () {\n        var _a;\n\n        (_a = _this2.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', ariaLabel);\n      }, settings_1.default.delay.fast);\n\n      if (open) {\n        (_b = this.el.wrapper) === null || _b === void 0 ? void 0 : _b.classList.add(selectors_1.default.classes.open);\n      } else {\n        (_c = this.el.wrapper) === null || _c === void 0 ? void 0 : _c.classList.remove(selectors_1.default.classes.open);\n        this.closeAllMenus();\n      }\n    }\n  }, {\n    key: \"toggleMobileMenu\",\n    value: function toggleMobileMenu() {\n      var _a, _b;\n\n      this.setMobileMenu(((_b = (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'false');\n    }\n  }, {\n    key: \"setMenu\",\n    value: function setMenu(button) {\n      var open = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n      var ariaExpanded = open ? 'true' : 'false',\n          menu = button === null || button === void 0 ? void 0 : button.nextElementSibling;\n\n      if (button && menu) {\n        button.setAttribute('aria-expanded', ariaExpanded);\n\n        if (open) {\n          util_1.default.slideDown(menu);\n        } else {\n          util_1.default.slideUp(menu);\n          this.closeSubMenus(button);\n        }\n      }\n    }\n  }, {\n    key: \"toggleMenu\",\n    value: function toggleMenu(button) {\n      var _a;\n\n      this.setMenu(button, ((_a = button === null || button === void 0 ? void 0 : button.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== 'true');\n    }\n  }, {\n    key: \"closeSubMenus\",\n    value: function closeSubMenus(button) {\n      var _this3 = this;\n\n      var menu = button === null || button === void 0 ? void 0 : button.nextElementSibling,\n          subMenus = menu === null || menu === void 0 ? void 0 : menu.querySelectorAll(selectors_1.default.subMenuButtons);\n      subMenus.forEach(function (child) {\n        var _a; // setMenu calls this function, so ignore subsub menus\n\n\n        if (((_a = child.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === menu) {\n          _this3.setMenu(child);\n        }\n      });\n    }\n  }, {\n    key: \"closeAllMenus\",\n    value: function closeAllMenus() {\n      var _this4 = this;\n\n      var _a;\n\n      var menuButtons = (_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors_1.default.subMenuButtons);\n      menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuButton) {\n        _this4.setMenu(menuButton);\n      });\n    }\n  }, {\n    key: \"openClosestMenu\",\n    value: function openClosestMenu() {\n      var _a;\n\n      var activeButton = document.activeElement,\n          activeMenu = activeButton === null || activeButton === void 0 ? void 0 : activeButton.nextElementSibling,\n          showing = ((_a = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';\n\n      if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) === selectors_1.default.ids.wrapper) {\n        activeMenu = this.el.wrapper;\n      }\n\n      if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) && activeMenu && !showing) {\n        activeButton.click();\n        var firstFocusable = activeMenu.querySelector(selectors_1.default.focusable);\n        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();\n      }\n    }\n  }, {\n    key: \"closeClosestMenu\",\n    value: function closeClosestMenu() {\n      var _a, _b;\n\n      var activeElement = document.activeElement,\n          activeMenu = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(selectors_1.default.subMenu),\n          activeButton = (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.previousElementSibling) ? activeMenu.previousElementSibling : this.el.mobileButton;\n\n      if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-controls')) && ((_a = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true') {\n        activeButton = activeElement;\n      }\n\n      if (((_b = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true') {\n        activeButton === null || activeButton === void 0 ? void 0 : activeButton.click();\n        activeButton === null || activeButton === void 0 ? void 0 : activeButton.focus();\n      }\n    }\n  }, {\n    key: \"toggleClosestMenu\",\n    value: function toggleClosestMenu() {\n      var _a, _b;\n\n      if (((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true') {\n        this.closeClosestMenu();\n      } else {\n        this.openClosestMenu();\n      }\n    } // Events\n\n  }, {\n    key: \"eHandleResize\",\n    value: function eHandleResize() {\n      this.setMobileMenu();\n    }\n  }, {\n    key: \"eHandleScroll\",\n    value: function eHandleScroll() {\n      this.closeAllMenus();\n    }\n  }, {\n    key: \"eWrapTab\",\n    value: function eWrapTab(e) {\n      var _a;\n\n      if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {\n        (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.focus();\n\n        if (document.activeElement === this.el.mobileButton) {\n          e.preventDefault();\n        }\n      }\n    }\n  }, {\n    key: \"eHandleButtonKeypress\",\n    value: function eHandleButtonKeypress(e) {\n      var _a;\n\n      var target = e.target,\n          subMenu = target.closest('li');\n\n      switch (e.key.toLowerCase()) {\n        case 'escape':\n          if (subMenu === null || subMenu === void 0 ? void 0 : subMenu.classList.contains(selectors_1.default.classes.open)) {\n            this.setMenu(subMenu);\n          } else {\n            this.setMobileMenu();\n            (_a = this.el.menuButton) === null || _a === void 0 ? void 0 : _a.focus();\n          }\n\n        case 'arrowleft':\n          this.closeClosestMenu();\n          break;\n\n        case 'arrowright':\n          break;\n\n        case 'enter':\n        case 'space':\n          break;\n      }\n    }\n  }, {\n    key: \"eHandleLinkKeypress\",\n    value: function eHandleLinkKeypress(e) {\n      switch (e.key.toLowerCase()) {\n        case 'escape':\n        case 'arrowleft':\n          this.closeClosestMenu();\n          break;\n\n        case 'arrowright':\n          this.openClosestMenu();\n          break;\n\n        case 'enter':\n        case 'space':\n          this.toggleClosestMenu();\n          break;\n      }\n    }\n  }, {\n    key: \"eHandleKeypress\",\n    value: function eHandleKeypress(e) {\n      if (e.key.toLowerCase() !== 'tab') {\n        e.preventDefault();\n      }\n\n      var target = e.target;\n\n      switch (target === null || target === void 0 ? void 0 : target.tagName.toLowerCase()) {\n        case 'a':\n          this.eHandleLinkKeypress(e);\n          break;\n\n        case 'button':\n          this.eHandleButtonKeypress(e);\n          break;\n      }\n    }\n  }, {\n    key: \"eToggleMobileMenu\",\n    value: function eToggleMobileMenu() {\n      this.toggleMobileMenu();\n    }\n  }, {\n    key: \"eToggleMenu\",\n    value: function eToggleMenu(e) {\n      this.toggleMenu(e.target);\n    }\n  }]);\n\n  return n4vBar;\n}();\n\nexports[\"default\"] = n4vBar;\n\n//# sourceURL=webpack://n4v/./src/ts/n4vBar.ts?");
 
@@ -41,3 +32,3 @@ /***/ }),
 
-eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __classPrivateFieldGet = this && this.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\n\nvar _a, _n4vSelectors_lib, _n4vSelectors_pre, _n4vSelectors_controls, _n4vSelectors_expanded;\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar n4vSelectors = /*#__PURE__*/function () {\n  function n4vSelectors() {\n    _classCallCheck(this, n4vSelectors);\n  }\n\n  _createClass(n4vSelectors, null, [{\n    key: \"prefix\",\n    value: function prefix(base) {\n      base = base.toLowerCase();\n      return base.startsWith(__classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_pre)) ? base : \"\".concat(__classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_pre)).concat(base);\n    }\n  }, {\n    key: \"cssPrefix\",\n    value: function cssPrefix(base) {\n      return \"--\".concat(this.prefix(base.replace(/^-+/, '')));\n    }\n  }, {\n    key: \"cssVar\",\n    value: function cssVar(base) {\n      return \"var(\".concat(this.cssPrefix(base), \")\");\n    }\n  }, {\n    key: \"not\",\n    value: function not(base) {\n      return \":not(\".concat(base, \")\");\n    }\n  }, {\n    key: \"class\",\n    value: function _class(base) {\n      return \".\".concat(this.prefix(base));\n    }\n  }, {\n    key: \"id\",\n    value: function id(base) {\n      return \"#\".concat(this.prefix(base));\n    }\n  }, {\n    key: \"controls\",\n    value: function controls(id) {\n      return id ? \"[aria-controls=\\\"\".concat(this.prefix(id), \"\\\"]\") : __classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_controls);\n    }\n  }, {\n    key: \"expanded\",\n    value: function expanded(bool) {\n      return typeof bool === 'boolean' ? \"[aria-expanded=\\\"\".concat(bool, \"\\\"]\") : __classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_expanded);\n    }\n  }]);\n\n  return n4vSelectors;\n}();\n\n_a = n4vSelectors;\n_n4vSelectors_lib = {\n  value: 'n4v'\n};\n_n4vSelectors_pre = {\n  value: \"\".concat(__classPrivateFieldGet(_a, _a, \"f\", _n4vSelectors_lib), \"-\")\n};\n_n4vSelectors_controls = {\n  value: '[aria-controls]'\n};\n_n4vSelectors_expanded = {\n  value: '[aria-expanded]'\n};\nn4vSelectors.disabled = '[disabled]';\nn4vSelectors.tabbable = '[tabindex]';\nn4vSelectors.hasLink = '[href]';\nn4vSelectors.hasRouterLink = '[routerLink]';\nn4vSelectors.hasId = '[id]';\nn4vSelectors.noTab = '[tabindex^=\"-\"]';\nn4vSelectors.focusable = \"input\".concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                select\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                textarea\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                button\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                object\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                a\").concat(_a.hasLink, \", a\").concat(_a.hasRouterLink, \",\\n                                area\").concat(_a.hasLink, \",\\n                                \").concat(_a.tabbable).concat(_a.not(_a.noTab)).replace(/\\s/g, '');\nn4vSelectors.subMenuButtons = \"button\".concat(__classPrivateFieldGet(_a, _a, \"f\", _n4vSelectors_controls));\nn4vSelectors.subMenu = \"\".concat(_a.subMenuButtons, \" + ul\").concat(_a.hasId);\nn4vSelectors.ids = {\n  header: _a.prefix('header'),\n  logo: _a.prefix('logo'),\n  wrapper: _a.prefix('wrapper'),\n  mainContent: _a.prefix('main-content')\n};\nn4vSelectors.classes = {\n  srOnly: _a.prefix('sr-only'),\n  js: _a.prefix('js'),\n  fixed: _a.prefix('fixed'),\n  gettingHeight: _a.prefix('getting-height'),\n  anime: _a.prefix('anime'),\n  open: _a.prefix('open')\n};\nexports[\"default\"] = n4vSelectors;\n\n//# sourceURL=webpack://@sunderapps/n4v/./src/ts/selectors.ts?");
+eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __classPrivateFieldGet = this && this.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\n\nvar _a, _n4vSelectors_lib, _n4vSelectors_pre, _n4vSelectors_controls, _n4vSelectors_expanded;\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar n4vSelectors = /*#__PURE__*/function () {\n  function n4vSelectors() {\n    _classCallCheck(this, n4vSelectors);\n  }\n\n  _createClass(n4vSelectors, null, [{\n    key: \"prefix\",\n    value: function prefix(base) {\n      base = base.toLowerCase();\n      return base.startsWith(__classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_pre)) ? base : \"\".concat(__classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_pre)).concat(base);\n    }\n  }, {\n    key: \"cssPrefix\",\n    value: function cssPrefix(base) {\n      return \"--\".concat(this.prefix(base.replace(/^-+/, '')));\n    }\n  }, {\n    key: \"cssVar\",\n    value: function cssVar(base) {\n      return \"var(\".concat(this.cssPrefix(base), \")\");\n    }\n  }, {\n    key: \"not\",\n    value: function not(base) {\n      return \":not(\".concat(base, \")\");\n    }\n  }, {\n    key: \"class\",\n    value: function _class(base) {\n      return \".\".concat(this.prefix(base));\n    }\n  }, {\n    key: \"id\",\n    value: function id(base) {\n      return \"#\".concat(this.prefix(base));\n    }\n  }, {\n    key: \"controls\",\n    value: function controls(id) {\n      return id ? \"[aria-controls=\\\"\".concat(this.prefix(id), \"\\\"]\") : __classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_controls);\n    }\n  }, {\n    key: \"expanded\",\n    value: function expanded(bool) {\n      return typeof bool === 'boolean' ? \"[aria-expanded=\\\"\".concat(bool, \"\\\"]\") : __classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_expanded);\n    }\n  }]);\n\n  return n4vSelectors;\n}();\n\n_a = n4vSelectors;\n_n4vSelectors_lib = {\n  value: 'n4v'\n};\n_n4vSelectors_pre = {\n  value: \"\".concat(__classPrivateFieldGet(_a, _a, \"f\", _n4vSelectors_lib), \"-\")\n};\n_n4vSelectors_controls = {\n  value: '[aria-controls]'\n};\n_n4vSelectors_expanded = {\n  value: '[aria-expanded]'\n};\nn4vSelectors.disabled = '[disabled]';\nn4vSelectors.tabbable = '[tabindex]';\nn4vSelectors.hasLink = '[href]';\nn4vSelectors.hasRouterLink = '[routerLink]';\nn4vSelectors.hasId = '[id]';\nn4vSelectors.noTab = '[tabindex^=\"-\"]';\nn4vSelectors.focusable = \"input\".concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                select\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                textarea\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                button\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                object\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                a\").concat(_a.hasLink, \", a\").concat(_a.hasRouterLink, \",\\n                                area\").concat(_a.hasLink, \",\\n                                \").concat(_a.tabbable).concat(_a.not(_a.noTab)).replace(/\\s/g, '');\nn4vSelectors.subMenuButtons = \"button\".concat(__classPrivateFieldGet(_a, _a, \"f\", _n4vSelectors_controls));\nn4vSelectors.subMenu = \"\".concat(_a.subMenuButtons, \" + ul\").concat(_a.hasId);\nn4vSelectors.ids = {\n  header: _a.prefix('header'),\n  logo: _a.prefix('logo'),\n  wrapper: _a.prefix('wrapper'),\n  mainContent: _a.prefix('main-content')\n};\nn4vSelectors.classes = {\n  srOnly: _a.prefix('sr-only'),\n  js: _a.prefix('js'),\n  fixed: _a.prefix('fixed'),\n  gettingHeight: _a.prefix('getting-height'),\n  anime: _a.prefix('anime'),\n  instant: _a.prefix('instant'),\n  open: _a.prefix('open')\n};\nexports[\"default\"] = n4vSelectors;\n\n//# sourceURL=webpack://n4v/./src/ts/selectors.ts?");
 
@@ -52,6 +43,16 @@ /***/ }),
 
-eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __classPrivateFieldGet = this && this.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\n\nvar _a, _n4vSettings_setDelay;\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar n4vSettings = /*#__PURE__*/function () {\n  function n4vSettings() {\n    _classCallCheck(this, n4vSettings);\n  }\n\n  _createClass(n4vSettings, null, [{\n    key: \"set\",\n    value: function set(settings) {\n      var newDelay = false;\n\n      if (typeof settings.delayBase === 'number') {\n        this.delayBase = settings.delayBase;\n        newDelay = true;\n      }\n\n      if (typeof settings.delayStep === 'number') {\n        this.delayStep = settings.delayStep;\n        newDelay = true;\n      }\n\n      if (newDelay) {\n        __classPrivateFieldGet(this, _a, \"m\", _n4vSettings_setDelay).call(this);\n      }\n\n      if (settings.delay && Object.keys(settings.delay).length) {\n        if (Object.values(settings.delay).reduce(function (prev, next) {\n          return prev && typeof next === 'number';\n        }, true)) {\n          this.delay = Object.assign(Object.assign({}, this.delay), settings.delay);\n        }\n      }\n    }\n  }]);\n\n  return n4vSettings;\n}();\n\n_a = n4vSettings, _n4vSettings_setDelay = function _n4vSettings_setDelay() {\n  this.delay = {\n    instant: this.delayBase + this.delayStep * 0,\n    fast: this.delayBase + this.delayStep * 1,\n    medFast: this.delayBase + this.delayStep * 2,\n    default: this.delayBase + this.delayStep * 3,\n    medSlow: this.delayBase + this.delayStep * 4,\n    slow: this.delayBase + this.delayStep * 5\n  };\n};\nn4vSettings.delayBase = 0;\nn4vSettings.delayStep = 100;\nn4vSettings.delay = {\n  instant: _a.delayBase + _a.delayStep * 0,\n  fast: _a.delayBase + _a.delayStep * 1,\n  medFast: _a.delayBase + _a.delayStep * 2,\n  default: _a.delayBase + _a.delayStep * 3,\n  medSlow: _a.delayBase + _a.delayStep * 4,\n  slow: _a.delayBase + _a.delayStep * 5\n};\nexports[\"default\"] = n4vSettings;\n\n//# sourceURL=webpack://@sunderapps/n4v/./src/ts/settings.ts?");
+eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __classPrivateFieldGet = this && this.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\n\nvar _a, _n4vSettings_setDelay;\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar n4vSettings = /*#__PURE__*/function () {\n  function n4vSettings() {\n    _classCallCheck(this, n4vSettings);\n  }\n\n  _createClass(n4vSettings, null, [{\n    key: \"set\",\n    value: function set(settings) {\n      var newDelay = false;\n\n      if (typeof settings.delayBase === 'number') {\n        this.delayBase = settings.delayBase;\n        newDelay = true;\n      }\n\n      if (typeof settings.delayStep === 'number') {\n        this.delayStep = settings.delayStep;\n        newDelay = true;\n      }\n\n      if (newDelay) {\n        __classPrivateFieldGet(this, _a, \"m\", _n4vSettings_setDelay).call(this);\n      }\n\n      if (settings.delay && Object.keys(settings.delay).length) {\n        if (Object.values(settings.delay).reduce(function (prev, next) {\n          return prev && typeof next === 'number';\n        }, true)) {\n          this.delay = Object.assign(Object.assign({}, this.delay), settings.delay);\n        }\n      }\n    }\n  }]);\n\n  return n4vSettings;\n}();\n\n_a = n4vSettings, _n4vSettings_setDelay = function _n4vSettings_setDelay() {\n  this.delay = {\n    instant: this.delayBase + this.delayStep * 0,\n    fast: this.delayBase + this.delayStep * 1,\n    medFast: this.delayBase + this.delayStep * 2,\n    default: this.delayBase + this.delayStep * 3,\n    medSlow: this.delayBase + this.delayStep * 4,\n    slow: this.delayBase + this.delayStep * 5\n  };\n};\nn4vSettings.delayBase = 0;\nn4vSettings.delayStep = 100;\nn4vSettings.delay = {\n  instant: _a.delayBase + _a.delayStep * 0,\n  fast: _a.delayBase + _a.delayStep * 1,\n  medFast: _a.delayBase + _a.delayStep * 2,\n  default: _a.delayBase + _a.delayStep * 3,\n  medSlow: _a.delayBase + _a.delayStep * 4,\n  slow: _a.delayBase + _a.delayStep * 5\n};\nexports[\"default\"] = n4vSettings;\n\n//# sourceURL=webpack://n4v/./src/ts/settings.ts?");
 
 /***/ }),
 
+/***/ "./src/ts/util.ts":
+/*!************************!*\
+  !*** ./src/ts/util.ts ***!
+  \************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar selectors_1 = __importDefault(__webpack_require__(/*! ./selectors */ \"./src/ts/selectors.ts\"));\n\nvar settings_1 = __importDefault(__webpack_require__(/*! ./settings */ \"./src/ts/settings.ts\"));\n\nvar n4vUtil = /*#__PURE__*/function () {\n  function n4vUtil() {\n    _classCallCheck(this, n4vUtil);\n  }\n\n  _createClass(n4vUtil, null, [{\n    key: \"throttle\",\n    value: function throttle(func) {\n      var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;\n      var options = arguments.length > 2 ? arguments[2] : undefined;\n\n      var context,\n          args,\n          result,\n          timeout,\n          previous = 0,\n          later = function later() {\n        previous = (options === null || options === void 0 ? void 0 : options.leading) === false ? 0 : new Date().getTime();\n        timeout = 0;\n        result = func.apply(context, args);\n\n        if (!timeout) {\n          context = args = null;\n        }\n      },\n          throttled = function throttled() {\n        var now = new Date().getTime();\n\n        if (!previous && (options === null || options === void 0 ? void 0 : options.leading) === false) {\n          previous = now;\n        }\n\n        var remaining = wait - now + previous;\n        context = this;\n        args = arguments;\n\n        if (remaining <= 0 || remaining > wait) {\n          if (timeout) {\n            clearTimeout(timeout);\n            timeout = 0;\n          }\n\n          previous = now;\n          result = func.apply(context, args);\n\n          if (!timeout) {\n            context = args = null;\n          }\n        } else if (!timeout && (options === null || options === void 0 ? void 0 : options.trailing) !== false) {\n          timeout = window.setTimeout(later, remaining);\n        }\n\n        return result;\n      };\n\n      return throttled;\n    }\n  }, {\n    key: \"getHeight\",\n    value: function getHeight(el) {\n      el === null || el === void 0 ? void 0 : el.classList.add(selectors_1.default.classes.gettingHeight);\n      var height = (el === null || el === void 0 ? void 0 : el.scrollHeight) || 0;\n      el === null || el === void 0 ? void 0 : el.classList.remove(selectors_1.default.classes.gettingHeight);\n      return height;\n    }\n  }, {\n    key: \"slideDown\",\n    value: function slideDown(el) {\n      if (el) {\n        el.classList.add(selectors_1.default.classes.anime);\n        el.style.height = \"\".concat(this.getHeight(el), \"px\");\n        setTimeout(function () {\n          el.style.height = 'auto';\n          el.classList.remove(selectors_1.default.classes.anime);\n        }, settings_1.default.delay.default);\n      }\n    }\n  }, {\n    key: \"slideUp\",\n    value: function slideUp(el) {\n      if (el) {\n        el.classList.add(selectors_1.default.classes.anime);\n        var height = this.getHeight(el),\n            transition = el.style.transition;\n        el.style.transition = '';\n        requestAnimationFrame(function () {\n          el.style.height = \"\".concat(height, \"px\");\n          el.style.transition = transition;\n          requestAnimationFrame(function () {\n            el.style.height = '0px';\n          });\n        });\n        setTimeout(function () {\n          el.classList.remove(selectors_1.default.classes.anime);\n        }, settings_1.default.delay.default);\n      }\n    }\n  }]);\n\n  return n4vUtil;\n}();\n\nexports[\"default\"] = n4vUtil;\n\n//# sourceURL=webpack://n4v/./src/ts/util.ts?");
+
+/***/ }),
+
 /***/ "./src/scss/n4v.scss":
@@ -63,3 +64,3 @@ /*!***************************!*\
 
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://@sunderapps/n4v/./src/scss/n4v.scss?");
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://n4v/./src/scss/n4v.scss?");
 
@@ -111,5 +112,6 @@ /***/ })
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/ts/n4v.ts");
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/ts/n4vBar.ts");
+/******/ 	n4v = __webpack_exports__["default"];
 /******/ 	
 /******/ })()
 ;

dist/js/n4v.min.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var e={954:function(e,t,a){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),a(968);var l=new(n(a(762)).default);t.default=l},762:function(e,t,a){function n(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var o=l(a(565)),i=l(a(750)),r=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.el={},this.attachElements(),this.attachEvents(),this.enableJavascript(),this.setMobileMenu()}var t,a,l;return t=e,a=[{key:"attachElements",value:function(){var e;this.el.header=document.getElementById(o.default.ids.header),this.el.mobileButton=(null===(e=this.el.header)||void 0===e?void 0:e.querySelector(o.default.controls(o.default.ids.wrapper)))||null,this.el.wrapper=document.getElementById(o.default.ids.wrapper)}},{key:"attachEvents",value:function(){var t,a,n,l=this,r=null===(t=this.el.header)||void 0===t?void 0:t.querySelectorAll(o.default.focusable),s=null==r?void 0:r[(null==r?void 0:r.length)-1];null==s||s.addEventListener("keydown",e.throttle(this.eWrapTab.bind(this))),null==r||r.forEach((function(t){t.addEventListener("keydown",e.throttle(l.eHandleKeypress.bind(l)))}));var u=null===(a=this.el.header)||void 0===a?void 0:a.querySelectorAll(o.default.controls()+o.default.not(o.default.controls(o.default.ids.wrapper)));null==u||u.forEach((function(t){t.addEventListener("mousedown",e.throttle(l.eToggleMenu.bind(l),i.default.delay.slow,{trailing:!1}))})),null===(n=this.el.mobileButton)||void 0===n||n.addEventListener("mousedown",e.throttle(this.eToggleMobileMenu.bind(this),i.default.delay.slow,{trailing:!1}))}},{key:"enableJavascript",value:function(){var e,t;null===(e=this.el.header)||void 0===e||e.classList.add(o.default.classes.js),null===(t=this.el.header)||void 0===t||t.classList.add(o.default.classes.fixed)}},{key:"setMobileMenu",value:function(){var e,t,a,n=this,l=arguments.length>0&&void 0!==arguments[0]&&arguments[0],r=l?"true":"false",s=l?"close menu":"open menu";null===(e=this.el.mobileButton)||void 0===e||e.setAttribute("aria-expanded",r),setTimeout((function(){var e;null===(e=n.el.mobileButton)||void 0===e||e.setAttribute("aria-label",s)}),i.default.delay.fast),l?null===(t=this.el.wrapper)||void 0===t||t.classList.add(o.default.classes.open):(null===(a=this.el.wrapper)||void 0===a||a.classList.remove(o.default.classes.open),this.closeAllMenus())}},{key:"setMenu",value:function(t){var a=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=a?"true":"false",l=null==t?void 0:t.nextElementSibling;t&&l&&(l.classList.add(o.default.classes.anime),t.setAttribute("aria-expanded",n),l.style.height=a?e.getHeight(l)+"px":"",setTimeout((function(){null==l||l.classList.remove(o.default.classes.anime)}),i.default.delay.default))}},{key:"closeAllMenus",value:function(){var e,t=this,a=null===(e=this.el.wrapper)||void 0===e?void 0:e.querySelectorAll(o.default.subMenuButtons);null==a||a.forEach((function(e){t.setMenu(e)}))}},{key:"openClosestMenu",value:function(){var e,t=document.activeElement,a=null==t?void 0:t.nextElementSibling,n="true"===(null===(e=null==t?void 0:t.getAttribute("aria-expanded"))||void 0===e?void 0:e.toLowerCase());if((null==t?void 0:t.getAttribute("aria-controls"))===o.default.ids.wrapper&&(a=this.el.wrapper),(null==t?void 0:t.getAttribute("aria-controls"))&&a&&!n){t.click();var l=a.querySelector(o.default.focusable);null==l||l.focus()}}},{key:"closeClosestMenu",value:function(){var e,t,a=document.activeElement,n=null==a?void 0:a.closest(o.default.subMenu),l=(null==n?void 0:n.previousElementSibling)?n.previousElementSibling:this.el.mobileButton;(null==a?void 0:a.getAttribute("aria-controls"))&&"true"===(null===(e=null==a?void 0:a.getAttribute("aria-expanded"))||void 0===e?void 0:e.toLowerCase())&&(l=a),"true"===(null===(t=null==l?void 0:l.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase())&&(null==l||l.click(),null==l||l.focus())}},{key:"toggleClosestMenu",value:function(){var e,t;"true"===(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase())?this.closeClosestMenu():this.openClosestMenu()}},{key:"eWrapTab",value:function(e){var t;"tab"!==e.key.toLowerCase()||e.shiftKey||(null===(t=this.el.mobileButton)||void 0===t||t.focus(),document.activeElement===this.el.mobileButton&&e.preventDefault())}},{key:"eHandleButtonKeypress",value:function(e){switch(e.key.toLowerCase()){case"escape":case"arrowleft":this.closeClosestMenu()}}},{key:"eHandleLinkKeypress",value:function(e){switch(e.key.toLowerCase()){case"escape":case"arrowleft":this.closeClosestMenu();break;case"arrowright":this.openClosestMenu();break;case"enter":case"space":this.toggleClosestMenu()}}},{key:"eHandleKeypress",value:function(e){"tab"!==e.key.toLowerCase()&&e.preventDefault();var t=e.target;switch(null==t?void 0:t.tagName.toLowerCase()){case"a":this.eHandleLinkKeypress(e);break;case"button":this.eHandleButtonKeypress(e)}}},{key:"eToggleMobileMenu",value:function(e){var t,a=e.target,n="true"!==(null===(t=null==a?void 0:a.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase());this.setMobileMenu(n)}},{key:"eToggleMenu",value:function(e){var t,a=e.target,n="true"!==(null===(t=null==a?void 0:a.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase());this.setMenu(a,n)}}],l=[{key:"throttle",value:function(e){var t,a,n,l,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:i.default.delay.default,r=arguments.length>2?arguments[2]:void 0,s=0,u=function(){s=!1===(null==r?void 0:r.leading)?0:(new Date).getTime(),l=0,n=e.apply(t,a),l||(t=a=null)},d=function(){var i=(new Date).getTime();s||!1!==(null==r?void 0:r.leading)||(s=i);var d=o-i+s;return t=this,a=arguments,d<=0||d>o?(l&&(clearTimeout(l),l=0),s=i,n=e.apply(t,a),l||(t=a=null)):l||!1===(null==r?void 0:r.trailing)||(l=window.setTimeout(u,d)),n};return d}},{key:"getHeight",value:function(e){null==e||e.classList.add(o.default.classes.gettingHeight);var t=(null==e?void 0:e.scrollHeight)||0;return null==e||e.classList.remove(o.default.classes.gettingHeight),t}}],a&&n(t.prototype,a),l&&n(t,l),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=r},565:function(e,t){function a(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var n,l,o,i,r=this&&this.__classPrivateFieldGet||function(e,t,a,n){if("a"===a&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===a?n:"a"===a?n.call(e):n?n.value:t.get(e)};Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,s;return t=e,s=[{key:"prefix",value:function(e){return(e=e.toLowerCase()).startsWith(r(this,n,"f",l))?e:"".concat(r(this,n,"f",l)).concat(e)}},{key:"cssPrefix",value:function(e){return"--".concat(this.prefix(e.replace(/^-+/,"")))}},{key:"cssVar",value:function(e){return"var(".concat(this.cssPrefix(e),")")}},{key:"not",value:function(e){return":not(".concat(e,")")}},{key:"class",value:function(e){return".".concat(this.prefix(e))}},{key:"id",value:function(e){return"#".concat(this.prefix(e))}},{key:"controls",value:function(e){return e?'[aria-controls="'.concat(this.prefix(e),'"]'):r(this,n,"f",o)}},{key:"expanded",value:function(e){return"boolean"==typeof e?'[aria-expanded="'.concat(e,'"]'):r(this,n,"f",i)}}],null&&a(t.prototype,null),s&&a(t,s),Object.defineProperty(t,"prototype",{writable:!1}),e}();l={value:"".concat(r(n=s,n,"f",{value:"n4v"}),"-")},o={value:"[aria-controls]"},i={value:"[aria-expanded]"},s.disabled="[disabled]",s.tabbable="[tabindex]",s.hasLink="[href]",s.hasRouterLink="[routerLink]",s.hasId="[id]",s.noTab='[tabindex^="-"]',s.focusable="input".concat(n.not(n.disabled)).concat(n.not(n.noTab),",\n                                select").concat(n.not(n.disabled)).concat(n.not(n.noTab),",\n                                textarea").concat(n.not(n.disabled)).concat(n.not(n.noTab),",\n                                button").concat(n.not(n.disabled)).concat(n.not(n.noTab),",\n                                object").concat(n.not(n.disabled)).concat(n.not(n.noTab),",\n                                a").concat(n.hasLink,", a").concat(n.hasRouterLink,",\n                                area").concat(n.hasLink,",\n                                ").concat(n.tabbable).concat(n.not(n.noTab)).replace(/\s/g,""),s.subMenuButtons="button".concat(r(n,n,"f",o)),s.subMenu="".concat(n.subMenuButtons," + ul").concat(n.hasId),s.ids={header:n.prefix("header"),logo:n.prefix("logo"),wrapper:n.prefix("wrapper"),mainContent:n.prefix("main-content")},s.classes={srOnly:n.prefix("sr-only"),js:n.prefix("js"),fixed:n.prefix("fixed"),gettingHeight:n.prefix("getting-height"),anime:n.prefix("anime"),open:n.prefix("open")},t.default=s},750:function(e,t){function a(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var n,l,o=this&&this.__classPrivateFieldGet||function(e,t,a,n){if("a"===a&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===a?n:"a"===a?n.call(e):n?n.value:t.get(e)};Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,i;return t=e,i=[{key:"set",value:function(e){var t=!1;"number"==typeof e.delayBase&&(this.delayBase=e.delayBase,t=!0),"number"==typeof e.delayStep&&(this.delayStep=e.delayStep,t=!0),t&&o(this,n,"m",l).call(this),e.delay&&Object.keys(e.delay).length&&Object.values(e.delay).reduce((function(e,t){return e&&"number"==typeof t}),!0)&&(this.delay=Object.assign(Object.assign({},this.delay),e.delay))}}],null&&a(t.prototype,null),i&&a(t,i),Object.defineProperty(t,"prototype",{writable:!1}),e}();n=i,l=function(){this.delay={instant:this.delayBase+0*this.delayStep,fast:this.delayBase+1*this.delayStep,medFast:this.delayBase+2*this.delayStep,default:this.delayBase+3*this.delayStep,medSlow:this.delayBase+4*this.delayStep,slow:this.delayBase+5*this.delayStep}},i.delayBase=0,i.delayStep=100,i.delay={instant:n.delayBase+0*n.delayStep,fast:n.delayBase+1*n.delayStep,medFast:n.delayBase+2*n.delayStep,default:n.delayBase+3*n.delayStep,medSlow:n.delayBase+4*n.delayStep,slow:n.delayBase+5*n.delayStep},t.default=i},968:(e,t,a)=>{a.r(t)}},t={};function a(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n].call(o.exports,o,o.exports,a),o.exports}a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a(954)})();
+var n4v;(()=>{"use strict";var e={283:function(e,t,n){function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),n(968);var i=l(n(565)),o=l(n(750)),s=l(n(427)),r=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.el={},this.attachElements(),this.attachEvents(),this.enableJavascript(),this.setMobileMenu()}var t,n;return t=e,n=[{key:"attachElements",value:function(){var e;this.el.header=document.getElementById(i.default.ids.header),this.el.mobileButton=(null===(e=this.el.header)||void 0===e?void 0:e.querySelector(i.default.controls(i.default.ids.wrapper)))||null,this.el.wrapper=document.getElementById(i.default.ids.wrapper)}},{key:"attachEvents",value:function(){var e,t,n,a=this;window.addEventListener("resize",s.default.throttle(this.eHandleResize.bind(this),o.default.delay.default,{trailing:!1})),window.addEventListener("scroll",s.default.throttle(this.eHandleScroll.bind(this),o.default.delay.default,{trailing:!1}));var l=null===(e=this.el.header)||void 0===e?void 0:e.querySelectorAll(i.default.focusable),r=null==l?void 0:l[(null==l?void 0:l.length)-1];null==r||r.addEventListener("keydown",s.default.throttle(this.eWrapTab.bind(this))),null==l||l.forEach((function(e){e.addEventListener("keydown",s.default.throttle(a.eHandleKeypress.bind(a)))}));var u=null===(t=this.el.header)||void 0===t?void 0:t.querySelectorAll(i.default.controls()+i.default.not(i.default.controls(i.default.ids.wrapper)));null==u||u.forEach((function(e){e.addEventListener("mousedown",s.default.throttle(a.eToggleMenu.bind(a),o.default.delay.slow,{trailing:!1}))})),null===(n=this.el.mobileButton)||void 0===n||n.addEventListener("mousedown",s.default.throttle(this.eToggleMobileMenu.bind(this),o.default.delay.slow,{trailing:!1}))}},{key:"enableJavascript",value:function(){var e,t;null===(e=this.el.header)||void 0===e||e.classList.add(i.default.classes.js),null===(t=this.el.header)||void 0===t||t.classList.add(i.default.classes.fixed)}},{key:"setMobileMenu",value:function(){var e,t,n,a=this,l=arguments.length>0&&void 0!==arguments[0]&&arguments[0],s=l?"true":"false",r=l?"close menu":"open menu";null===(e=this.el.mobileButton)||void 0===e||e.setAttribute("aria-expanded",s),setTimeout((function(){var e;null===(e=a.el.mobileButton)||void 0===e||e.setAttribute("aria-label",r)}),o.default.delay.fast),l?null===(t=this.el.wrapper)||void 0===t||t.classList.add(i.default.classes.open):(null===(n=this.el.wrapper)||void 0===n||n.classList.remove(i.default.classes.open),this.closeAllMenus())}},{key:"toggleMobileMenu",value:function(){var e,t;this.setMobileMenu("false"===(null===(t=null===(e=this.el.mobileButton)||void 0===e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase()))}},{key:"setMenu",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=t?"true":"false",a=null==e?void 0:e.nextElementSibling;e&&a&&(e.setAttribute("aria-expanded",n),t?s.default.slideDown(a):(s.default.slideUp(a),this.closeSubMenus(e)))}},{key:"toggleMenu",value:function(e){var t;this.setMenu(e,"true"!==(null===(t=null==e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase()))}},{key:"closeSubMenus",value:function(e){var t=this,n=null==e?void 0:e.nextElementSibling;(null==n?void 0:n.querySelectorAll(i.default.subMenuButtons)).forEach((function(e){var a;(null===(a=e.parentElement)||void 0===a?void 0:a.parentElement)===n&&t.setMenu(e)}))}},{key:"closeAllMenus",value:function(){var e,t=this,n=null===(e=this.el.wrapper)||void 0===e?void 0:e.querySelectorAll(i.default.subMenuButtons);null==n||n.forEach((function(e){t.setMenu(e)}))}},{key:"openClosestMenu",value:function(){var e,t=document.activeElement,n=null==t?void 0:t.nextElementSibling,a="true"===(null===(e=null==t?void 0:t.getAttribute("aria-expanded"))||void 0===e?void 0:e.toLowerCase());if((null==t?void 0:t.getAttribute("aria-controls"))===i.default.ids.wrapper&&(n=this.el.wrapper),(null==t?void 0:t.getAttribute("aria-controls"))&&n&&!a){t.click();var l=n.querySelector(i.default.focusable);null==l||l.focus()}}},{key:"closeClosestMenu",value:function(){var e,t,n=document.activeElement,a=null==n?void 0:n.closest(i.default.subMenu),l=(null==a?void 0:a.previousElementSibling)?a.previousElementSibling:this.el.mobileButton;(null==n?void 0:n.getAttribute("aria-controls"))&&"true"===(null===(e=null==n?void 0:n.getAttribute("aria-expanded"))||void 0===e?void 0:e.toLowerCase())&&(l=n),"true"===(null===(t=null==l?void 0:l.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase())&&(null==l||l.click(),null==l||l.focus())}},{key:"toggleClosestMenu",value:function(){var e,t;"true"===(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase())?this.closeClosestMenu():this.openClosestMenu()}},{key:"eHandleResize",value:function(){this.setMobileMenu()}},{key:"eHandleScroll",value:function(){this.closeAllMenus()}},{key:"eWrapTab",value:function(e){var t;"tab"!==e.key.toLowerCase()||e.shiftKey||(null===(t=this.el.mobileButton)||void 0===t||t.focus(),document.activeElement===this.el.mobileButton&&e.preventDefault())}},{key:"eHandleButtonKeypress",value:function(e){var t,n=e.target.closest("li");switch(e.key.toLowerCase()){case"escape":(null==n?void 0:n.classList.contains(i.default.classes.open))?this.setMenu(n):(this.setMobileMenu(),null===(t=this.el.menuButton)||void 0===t||t.focus());case"arrowleft":this.closeClosestMenu()}}},{key:"eHandleLinkKeypress",value:function(e){switch(e.key.toLowerCase()){case"escape":case"arrowleft":this.closeClosestMenu();break;case"arrowright":this.openClosestMenu();break;case"enter":case"space":this.toggleClosestMenu()}}},{key:"eHandleKeypress",value:function(e){"tab"!==e.key.toLowerCase()&&e.preventDefault();var t=e.target;switch(null==t?void 0:t.tagName.toLowerCase()){case"a":this.eHandleLinkKeypress(e);break;case"button":this.eHandleButtonKeypress(e)}}},{key:"eToggleMobileMenu",value:function(){this.toggleMobileMenu()}},{key:"eToggleMenu",value:function(e){this.toggleMenu(e.target)}}],n&&a(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=r},565:function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var a,l,i,o,s=this&&this.__classPrivateFieldGet||function(e,t,n,a){if("a"===n&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?a:"a"===n?a.call(e):a?a.value:t.get(e)};Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,r;return t=e,r=[{key:"prefix",value:function(e){return(e=e.toLowerCase()).startsWith(s(this,a,"f",l))?e:"".concat(s(this,a,"f",l)).concat(e)}},{key:"cssPrefix",value:function(e){return"--".concat(this.prefix(e.replace(/^-+/,"")))}},{key:"cssVar",value:function(e){return"var(".concat(this.cssPrefix(e),")")}},{key:"not",value:function(e){return":not(".concat(e,")")}},{key:"class",value:function(e){return".".concat(this.prefix(e))}},{key:"id",value:function(e){return"#".concat(this.prefix(e))}},{key:"controls",value:function(e){return e?'[aria-controls="'.concat(this.prefix(e),'"]'):s(this,a,"f",i)}},{key:"expanded",value:function(e){return"boolean"==typeof e?'[aria-expanded="'.concat(e,'"]'):s(this,a,"f",o)}}],null&&n(t.prototype,null),r&&n(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();l={value:"".concat(s(a=r,a,"f",{value:"n4v"}),"-")},i={value:"[aria-controls]"},o={value:"[aria-expanded]"},r.disabled="[disabled]",r.tabbable="[tabindex]",r.hasLink="[href]",r.hasRouterLink="[routerLink]",r.hasId="[id]",r.noTab='[tabindex^="-"]',r.focusable="input".concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                select").concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                textarea").concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                button").concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                object").concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                a").concat(a.hasLink,", a").concat(a.hasRouterLink,",\n                                area").concat(a.hasLink,",\n                                ").concat(a.tabbable).concat(a.not(a.noTab)).replace(/\s/g,""),r.subMenuButtons="button".concat(s(a,a,"f",i)),r.subMenu="".concat(a.subMenuButtons," + ul").concat(a.hasId),r.ids={header:a.prefix("header"),logo:a.prefix("logo"),wrapper:a.prefix("wrapper"),mainContent:a.prefix("main-content")},r.classes={srOnly:a.prefix("sr-only"),js:a.prefix("js"),fixed:a.prefix("fixed"),gettingHeight:a.prefix("getting-height"),anime:a.prefix("anime"),instant:a.prefix("instant"),open:a.prefix("open")},t.default=r},750:function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var a,l,i=this&&this.__classPrivateFieldGet||function(e,t,n,a){if("a"===n&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?a:"a"===n?a.call(e):a?a.value:t.get(e)};Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,o;return t=e,o=[{key:"set",value:function(e){var t=!1;"number"==typeof e.delayBase&&(this.delayBase=e.delayBase,t=!0),"number"==typeof e.delayStep&&(this.delayStep=e.delayStep,t=!0),t&&i(this,a,"m",l).call(this),e.delay&&Object.keys(e.delay).length&&Object.values(e.delay).reduce((function(e,t){return e&&"number"==typeof t}),!0)&&(this.delay=Object.assign(Object.assign({},this.delay),e.delay))}}],null&&n(t.prototype,null),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),e}();a=o,l=function(){this.delay={instant:this.delayBase+0*this.delayStep,fast:this.delayBase+1*this.delayStep,medFast:this.delayBase+2*this.delayStep,default:this.delayBase+3*this.delayStep,medSlow:this.delayBase+4*this.delayStep,slow:this.delayBase+5*this.delayStep}},o.delayBase=0,o.delayStep=100,o.delay={instant:a.delayBase+0*a.delayStep,fast:a.delayBase+1*a.delayStep,medFast:a.delayBase+2*a.delayStep,default:a.delayBase+3*a.delayStep,medSlow:a.delayBase+4*a.delayStep,slow:a.delayBase+5*a.delayStep},t.default=o},427:function(e,t,n){function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=l(n(565)),o=l(n(750)),s=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,n;return t=e,n=[{key:"throttle",value:function(e){var t,n,a,l,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o.default.delay.default,s=arguments.length>2?arguments[2]:void 0,r=0,u=function(){r=!1===(null==s?void 0:s.leading)?0:(new Date).getTime(),l=0,a=e.apply(t,n),l||(t=n=null)},d=function(){var o=(new Date).getTime();r||!1!==(null==s?void 0:s.leading)||(r=o);var d=i-o+r;return t=this,n=arguments,d<=0||d>i?(l&&(clearTimeout(l),l=0),r=o,a=e.apply(t,n),l||(t=n=null)):l||!1===(null==s?void 0:s.trailing)||(l=window.setTimeout(u,d)),a};return d}},{key:"getHeight",value:function(e){null==e||e.classList.add(i.default.classes.gettingHeight);var t=(null==e?void 0:e.scrollHeight)||0;return null==e||e.classList.remove(i.default.classes.gettingHeight),t}},{key:"slideDown",value:function(e){e&&(e.classList.add(i.default.classes.anime),e.style.height="".concat(this.getHeight(e),"px"),setTimeout((function(){e.style.height="auto",e.classList.remove(i.default.classes.anime)}),o.default.delay.default))}},{key:"slideUp",value:function(e){if(e){e.classList.add(i.default.classes.anime);var t=this.getHeight(e),n=e.style.transition;e.style.transition="",requestAnimationFrame((function(){e.style.height="".concat(t,"px"),e.style.transition=n,requestAnimationFrame((function(){e.style.height="0px"}))})),setTimeout((function(){e.classList.remove(i.default.classes.anime)}),o.default.delay.default)}}}],null&&a(t.prototype,null),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=s},968:(e,t,n)=>{n.r(t)}},t={};function n(a){var l=t[a];if(void 0!==l)return l.exports;var i=t[a]={exports:{}};return e[a].call(i.exports,i,i.exports,n),i.exports}n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a=n(283);n4v=a.default})();

package.json

 {
   "name": "@sunderapps/n4v",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Navigation 4 Virtuosos - Accessible, Responsive Navbars",
@@ -24,3 +24,4 @@ "main": "./src/main.ts",
     "validator",
-    "accessibility"
+    "accessibility",
+    "responsive"
   ],
@@ -27,0 +28,0 @@ "author": "Samuel T Underwood",

README.md

@@ -1,2 +0,89 @@
-# n4v
- Navigation 4 Virtuosos - Accessible, Responsive Navbars
+# n4v - An accessible, responsive navbar library
+
+## Hosting
+
+ - [www.n4v.bar](https://www.n4v.bar)
+ - [NPM - @sunderapps/n4v/](https://www.npmjs.com/package/@sunderapps/n4v)
+ - [GitHub - Sunder-Apps/n4v/](https://github.com/Sunder-Apps/n4v)
+
+## Getting Started - Development
+
+1. Install <sup>7</sup>[NodeJS](https://nodejs.org/en/docs/) and <sup>8</sup>[NPM](https://docs.npmjs.com/) [here](https://nodejs.org/en/download/).
+2. Install <sup>15</sup>[git](https://git-scm.com/doc) [here](https://git-scm.com/downloads) or <sup>18</sup>[GitHub Desktop here](https://desktop.github.com/).
+3. Clone the <sup>16</sup>[GitHub](https://docs.github.com/en) repository.
+
+```powershell
+PS C:\proj> git clone https://github.com/Sunder-Apps/n4v.git ./n4v
+```
+
+4. Change directory into the n4v project
+
+```powershell
+PS C:\proj> cd n4v
+```
+
+5. Install development dependencies.
+
+```powershell
+PS C:\proj\n4v> npm install
+```
+
+6. Run the development server.
+
+```powershell
+PS C:\proj\n4v> npm run serve
+```
+
+7. Visit [http://localhost:42069/](http://localhost:42069/) in a browser.
+
+## Getting Started - Usage
+
+### Vanilla HTML / CSS / JavaScript
+
+### HTML / SCSS / JavaScript
+
+### HTML / SCSS / TypeScript
+
+### Angular / SCSS / TypeScript
+
+## References
+
+### The Basics:
+
+ - <sup>1</sup>[HTML](https://www.w3schools.com/html/default.asp)
+ - <sup>2</sup>[CSS](https://www.w3schools.com/css/default.asp)
+ - <sup>3</sup>[JavaScript](https://www.w3schools.com/css/default.asp)
+
+### Advanced:
+
+ - <sup>4</sup>[SCSS](https://sass-lang.com/guide)
+ - <sup>5</sup>[TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html)
+ - <sup>6</sup>[PowerShell](https://docs.microsoft.com/en-us/powershell/scripting/overview?view=powershell-7.2)
+ - <sup>7</sup>[NodeJS](https://nodejs.org/en/docs/)
+
+### Build Tools:
+
+ - <sup>8</sup>[NPM](https://docs.npmjs.com/)
+ - <sup>9</sup>[Webpack](https://webpack.js.org/guides/)
+ - <sup>10</sup>[Babel](https://babeljs.io/docs/en/)
+
+### Testing:
+
+ - <sup>11</sup>[Jasmine](https://jasmine.github.io/pages/docs_home.html)
+ - <sup>12</sup>[Karma](https://karma-runner.github.io/6.4/index.html)
+
+### Organization:
+
+ - <sup>13</sup>[TSDoc](https://tsdoc.org/)
+ - <sup>14</sup>[ESLint](https://eslint.org/docs/user-guide/getting-started)
+
+### Version Control:
+
+ - <sup>15</sup>[git](https://git-scm.com/doc)
+ - <sup>16</sup>[GitHub](https://docs.github.com/en)
+
+### Software:
+
+ - <sup>17</sup>[VS Code](https://code.visualstudio.com/)
+ - <sup>18</sup>[GitHub Desktop](https://desktop.github.com/)
+ - <sup>19</sup>[Discord](https://discord.com/)

src/ts/n4vbar.ts

@@ -0,3 +1,6 @@
+import '../scss/n4v.scss';
+
 import n4vSelectors from './selectors';
 import n4vSettings from './settings';
+import n4vUtil from './util';
 
@@ -23,7 +26,10 @@ class n4vBar {
     attachEvents () : void {
+        window.addEventListener('resize', n4vUtil.throttle(this.eHandleResize.bind(this), n4vSettings.delay.default, { trailing: false }) as EventListenerOrEventListenerObject);
+        window.addEventListener('scroll', n4vUtil.throttle(this.eHandleScroll.bind(this), n4vSettings.delay.default, { trailing: false }) as EventListenerOrEventListenerObject);
+
         let focusables: NodeListOf<HTMLElement> | undefined = this.el.header?.querySelectorAll(n4vSelectors.focusable),
             lastFocusable: HTMLElement | undefined = focusables?.[focusables?.length - 1];
-        lastFocusable?.addEventListener('keydown', n4vBar.throttle(this.eWrapTab.bind(this)) as EventListenerOrEventListenerObject);
+        lastFocusable?.addEventListener('keydown', n4vUtil.throttle(this.eWrapTab.bind(this)) as EventListenerOrEventListenerObject);
         focusables?.forEach((focusable: HTMLElement) => {
-            focusable.addEventListener('keydown', n4vBar.throttle(this.eHandleKeypress.bind(this)) as EventListenerOrEventListenerObject);
+            focusable.addEventListener('keydown', n4vUtil.throttle(this.eHandleKeypress.bind(this)) as EventListenerOrEventListenerObject);
         });
@@ -33,6 +39,6 @@
         menuButtons?.forEach((menuButton: HTMLElement) => {
-            menuButton.addEventListener('mousedown', n4vBar.throttle(this.eToggleMenu.bind(this), n4vSettings.delay.slow, { trailing: false }) as EventListenerOrEventListenerObject);
+            menuButton.addEventListener('mousedown', n4vUtil.throttle(this.eToggleMenu.bind(this), n4vSettings.delay.slow, { trailing: false }) as EventListenerOrEventListenerObject);
         });
 
-        this.el.mobileButton?.addEventListener('mousedown', n4vBar.throttle(this.eToggleMobileMenu.bind(this), n4vSettings.delay.slow, { trailing: false }) as EventListenerOrEventListenerObject);
+        this.el.mobileButton?.addEventListener('mousedown', n4vUtil.throttle(this.eToggleMobileMenu.bind(this), n4vSettings.delay.slow, { trailing: false }) as EventListenerOrEventListenerObject);
     }
@@ -45,50 +51,2 @@
 
-    // Utility
-    static throttle (func: Function,
-                     wait: number = n4vSettings.delay.default,
-                     options?: {[key: string]: boolean}) : Function {
-        let context: any, args: any, result: any,
-            timeout: number, previous: number = 0,
-            later: Function = function () {
-                previous = options?.leading === false ? 0 : new Date().getTime();
-                timeout = 0;
-                result = func.apply(context, args);
-                if (!timeout) {
-                    context = args = null;
-                }
-            },
-            throttled: Function = function (this: any): any {
-                let now: number = new Date().getTime();
-                if (!previous && options?.leading === false) {
-                    previous = now;
-                }
-                let remaining: number = wait - now + previous;
-                context = this;
-                args = arguments;
-                if (remaining <= 0 || remaining > wait) {
-                    if (timeout) {
-                        clearTimeout(timeout);
-                        timeout = 0;
-                    }
-                    previous = now;
-                    result = func.apply(context, args);
-                    if (!timeout) {
-                        context = args = null;
-                    }
-                } else if (!timeout && options?.trailing !== false) {
-                    timeout = window.setTimeout(later, remaining);
-                }
-                return result;
-            };
-
-        return throttled;
-    }
-
-    static getHeight (el?: HTMLElement) : number {
-        el?.classList.add(n4vSelectors.classes.gettingHeight);
-        let height: number = el?.scrollHeight || 0;
-        el?.classList.remove(n4vSelectors.classes.gettingHeight);
-        return height;
-    }
-
     // Functionality
@@ -112,2 +70,6 @@ setMobileMenu (open: boolean = false) : void {
 
+    toggleMobileMenu () : void {
+        this.setMobileMenu(this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'false');
+    }
+
     setMenu (button?: HTMLElement | null,
@@ -118,11 +80,27 @@ open: boolean = false) : void {
         if (button && menu) {
-            menu.classList.add(n4vSelectors.classes.anime);
             button.setAttribute('aria-expanded', ariaExpanded);
-            menu.style.height = open ? n4vBar.getHeight(menu) + 'px' : '';
-            setTimeout(() => {
-                menu?.classList.remove(n4vSelectors.classes.anime);
-            }, n4vSettings.delay.default);
+            if (open) {
+                n4vUtil.slideDown(menu);
+            } else {
+                n4vUtil.slideUp(menu);
+                this.closeSubMenus(button);
+            }
         }
     }
 
+    toggleMenu (button?: HTMLElement | null) {
+        this.setMenu(button, button?.getAttribute('aria-expanded')?.toLowerCase() !== 'true');
+    }
+
+    closeSubMenus (button?: HTMLElement | null) {
+        let menu: HTMLElement | null | undefined = button?.nextElementSibling as HTMLElement,
+            subMenus: NodeListOf<HTMLElement> = menu?.querySelectorAll(n4vSelectors.subMenuButtons) as NodeListOf<HTMLElement>;
+        subMenus.forEach((child: HTMLElement) => {
+            // setMenu calls this function, so ignore subsub menus
+            if (child.parentElement?.parentElement === menu) {
+                this.setMenu(child);
+            }
+        });
+    }
+
     closeAllMenus () : void {
@@ -173,2 +151,10 @@ let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.wrapper?.querySelectorAll(n4vSelectors.subMenuButtons);
     // Events
+    eHandleResize () : void {
+        this.setMobileMenu();
+    }
+
+    eHandleScroll () : void {
+        this.closeAllMenus();
+    }
+
     eWrapTab (e: KeyboardEvent) : void {
@@ -184,4 +170,12 @@ if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {
     eHandleButtonKeypress (e: KeyboardEvent) : void {
+        let target = e.target as HTMLElement,
+            subMenu = target.closest('li');
         switch (e.key.toLowerCase()) {
             case 'escape':
+                if (subMenu?.classList.contains(n4vSelectors.classes.open)) {
+                    this.setMenu(subMenu);
+                } else {
+                    this.setMobileMenu();
+                    this.el.menuButton?.focus();
+                }
             case 'arrowleft':
@@ -229,12 +223,8 @@ this.closeClosestMenu();
 
-    eToggleMobileMenu (e: MouseEvent) : void {
-        let target: HTMLElement | null = e.target as HTMLElement | null,
-            open: boolean = target?.getAttribute('aria-expanded')?.toLowerCase() !== 'true';
-        this.setMobileMenu(open);
+    eToggleMobileMenu () : void {
+        this.toggleMobileMenu();
     }
 
     eToggleMenu (e: MouseEvent) : void {
-        let target: HTMLElement | null = e.target as HTMLElement | null,
-            open: boolean = target?.getAttribute('aria-expanded')?.toLowerCase() !== 'true';
-        this.setMenu(target, open);
+        this.toggleMenu(e.target as HTMLElement | null);
     }
@@ -241,0 +231,0 @@ }

src/ts/selectors.ts

@@ -34,2 +34,3 @@ class n4vSelectors {
         anime: this.prefix('anime'),
+        instant: this.prefix('instant'),
         open: this.prefix('open')
@@ -36,0 +37,0 @@ };

webpack.config.ts

@@ -32,3 +32,3 @@ import path from 'path';
     entry: {
-        n4v: './src/ts/n4v.ts',
+        n4v: './src/ts/n4vBar.ts',
         theme: './src/scss/theme.scss'
@@ -39,3 +39,8 @@ },
         filename: `js/[name]${min}.js`,
-        chunkFilename: `js/[name].[chunkhash].chunk.${min}.js`
+        chunkFilename: `js/[name].[chunkhash].chunk.${min}.js`,
+        library: {
+            name: 'n4v',
+            type: 'var',
+            export: 'default'
+        }
     },
@@ -42,0 +47,0 @@ module: {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111358

increased by18.72%

Lines of code

975

increased by9.18%

Number of lines in readme file

90

increased by2900%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes