@threespot/expand-toggle - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/expand-toggle.amd.js

@@ -97,3 +97,3 @@ define("expand-toggleLink", [], function() { return /******/ (function(modules) { // webpackBootstrap
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n  _inherits(ExpandToggle, _EventEmitter);\n  var _super = _createSuper(ExpandToggle);\n  function ExpandToggle(el, opts) {\n    var _this;\n    _classCallCheck(this, ExpandToggle);\n    // Have to call super() first before referencing “this” since we’re extending EventEmitter\n    // https://stackoverflow.com/a/43591507/673457\n    _this = _super.call(this);\n    _this.el = el;\n    _this.targetId = _this.el.getAttribute(\"data-expands\");\n    _this.targetEl = document.getElementById(_this.targetId);\n    _this.targetParentEl = _this.targetEl.parentNode;\n\n    // Ensure target element exist before initializing\n    if (!_this.targetEl) {\n      console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n      return _possibleConstructorReturn(_this);\n    }\n\n    // Use Object.assign() to merge “opts” object with default values in this.options\n    _this.options = Object.assign({}, {\n      expandedClasses: \"\",\n      // string, accepts multiple space-separated classes\n      activeToggleText: \"\",\n      // expanded state toggle button text\n      shouldStartExpanded: false,\n      // component starts expanded on init\n      onReady: null // ready callback function\n    }, opts);\n\n    // Check for custom expanded class(es)\n    _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n    if (_this.expandedClasses.length) {\n      // Check if active class string contains multiple classes\n      if (_this.expandedClasses.indexOf(\" \") > -1) {\n        // Convert to array and remove any empty string values\n        // caused by having multiple spaces in a row.\n        _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n          return n.length;\n        });\n      } else {\n        // We still need to convert a single active class to an array\n        // so we can use the spread syntax later in classList.add()\n        _this.expandedClasses = [_this.expandedClasses];\n      }\n    }\n\n    // Check if component should start expanded\n    _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n    // Check for custom toggle button text to use when expanded\n    _this.hasActiveText = false;\n    _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n    if (_this.textEl) {\n      _this.defaultToggleText = _this.textEl.textContent;\n      _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n      _this.hasActiveText = !!_this.activeToggleText.length;\n    }\n    _this.init();\n    return _this;\n  }\n  _createClass(ExpandToggle, [{\n    key: \"init\",\n    value: function init() {\n      // Store state to avoid calling resize handler after component has been destroyed\n      this.hasInitialized = true;\n\n      // Accessibility setup\n      this.el.setAttribute(\"aria-haspopup\", true);\n      this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n      // Omit “aria-controls” for now\n      // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n      // this.el.setAttribute(\"aria-controls\", this.targetId);\n      this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.setAttribute(\"role\", \"button\");\n      }\n\n      // Click event listener on toggle button\n      // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n      // https://stackoverflow.com/a/22870717/673457\n      this.clickHandler = this.toggle.bind(this);\n      this.el.addEventListener(\"click\", this.clickHandler);\n\n      // Keyboard listeners on toggle button\n      this.keydownHandler = this.keyboardEvents.bind(this);\n      this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n      // Check for onReady callback\n      if (typeof this.options.onReady === \"function\") {\n        this.options.onReady();\n      }\n    }\n  }, {\n    key: \"destroy\",\n    value: function destroy() {\n      this.hasInitialized = false;\n\n      // Remove event listeners\n      this.el.removeEventListener(\"click\", this.clickHandler);\n      this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n      // Remove aria attributes\n      this.el.removeAttribute(\"aria-haspopup\");\n      this.el.removeAttribute(\"aria-expanded\");\n      this.targetEl.removeAttribute(\"aria-hidden\");\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.removeAttribute(\"role\");\n      }\n\n      // Reset toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove custom classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList, _this$targetEl$classL;\n        (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n      }\n      this.emitEvent(\"destroy\");\n    }\n  }, {\n    key: \"keyboardEvents\",\n    value: function keyboardEvents(event) {\n      // Expand with down arrow\n      if (event.keyCode == 40) {\n        this.expand();\n      } else if (event.keyCode == 38 || event.keyCode == 27) {\n        // Close with up arrow or escape key\n        this.collapse();\n      }\n    }\n  }, {\n    key: \"expand\",\n    value: function expand(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.activeToggleText;\n      }\n\n      // Add classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList2, _this$targetEl$classL2;\n        (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", true);\n      this.targetEl.setAttribute(\"aria-hidden\", false);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"expand\", event);\n    }\n  }, {\n    key: \"collapse\",\n    value: function collapse(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList3, _this$targetEl$classL3;\n        (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", false);\n      this.targetEl.setAttribute(\"aria-hidden\", true);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"collapse\", event);\n    }\n  }, {\n    key: \"toggle\",\n    value: function toggle(event) {\n      // Prevent default in case toggle element is a link instead of a button\n      event.preventDefault();\n      if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n        this.collapse(event);\n      } else {\n        this.expand(event);\n      }\n    }\n  }]);\n  return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n'use client';\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n  _inherits(ExpandToggle, _EventEmitter);\n  var _super = _createSuper(ExpandToggle);\n  function ExpandToggle(el, opts) {\n    var _this;\n    _classCallCheck(this, ExpandToggle);\n    // Have to call super() first before referencing “this” since we’re extending EventEmitter\n    // https://stackoverflow.com/a/43591507/673457\n    _this = _super.call(this);\n    _this.el = el;\n    _this.targetId = _this.el.getAttribute(\"data-expands\");\n    _this.targetEl = document.getElementById(_this.targetId);\n    _this.targetParentEl = _this.targetEl.parentNode;\n\n    // Ensure target element exist before initializing\n    if (!_this.targetEl) {\n      console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n      return _possibleConstructorReturn(_this);\n    }\n\n    // Use Object.assign() to merge “opts” object with default values in this.options\n    _this.options = Object.assign({}, {\n      expandedClasses: \"\",\n      // string, accepts multiple space-separated classes\n      activeToggleText: \"\",\n      // expanded state toggle button text\n      shouldStartExpanded: false,\n      // component starts expanded on init\n      onReady: null // ready callback function\n    }, opts);\n\n    // Check for custom expanded class(es)\n    _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n    if (_this.expandedClasses.length) {\n      // Check if active class string contains multiple classes\n      if (_this.expandedClasses.indexOf(\" \") > -1) {\n        // Convert to array and remove any empty string values\n        // caused by having multiple spaces in a row.\n        _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n          return n.length;\n        });\n      } else {\n        // We still need to convert a single active class to an array\n        // so we can use the spread syntax later in classList.add()\n        _this.expandedClasses = [_this.expandedClasses];\n      }\n    }\n\n    // Check if component should start expanded\n    _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n    // Check for custom toggle button text to use when expanded\n    _this.hasActiveText = false;\n    _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n    if (_this.textEl) {\n      _this.defaultToggleText = _this.textEl.textContent;\n      _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n      _this.hasActiveText = !!_this.activeToggleText.length;\n    }\n    _this.init();\n    return _this;\n  }\n  _createClass(ExpandToggle, [{\n    key: \"init\",\n    value: function init() {\n      // Store state to avoid calling resize handler after component has been destroyed\n      this.hasInitialized = true;\n\n      // Accessibility setup\n      this.el.setAttribute(\"aria-haspopup\", true);\n      this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n      // Omit “aria-controls” for now\n      // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n      // this.el.setAttribute(\"aria-controls\", this.targetId);\n      this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.setAttribute(\"role\", \"button\");\n      }\n\n      // Click event listener on toggle button\n      // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n      // https://stackoverflow.com/a/22870717/673457\n      this.clickHandler = this.toggle.bind(this);\n      this.el.addEventListener(\"click\", this.clickHandler);\n\n      // Keyboard listeners on toggle button\n      this.keydownHandler = this.keyboardEvents.bind(this);\n      this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n      // Check for onReady callback\n      if (typeof this.options.onReady === \"function\") {\n        this.options.onReady();\n      }\n    }\n  }, {\n    key: \"destroy\",\n    value: function destroy() {\n      this.hasInitialized = false;\n\n      // Remove event listeners\n      this.el.removeEventListener(\"click\", this.clickHandler);\n      this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n      // Remove aria attributes\n      this.el.removeAttribute(\"aria-haspopup\");\n      this.el.removeAttribute(\"aria-expanded\");\n      this.targetEl.removeAttribute(\"aria-hidden\");\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.removeAttribute(\"role\");\n      }\n\n      // Reset toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove custom classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList, _this$targetEl$classL;\n        (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n      }\n      this.emitEvent(\"destroy\");\n    }\n  }, {\n    key: \"keyboardEvents\",\n    value: function keyboardEvents(event) {\n      // Expand with down arrow\n      if (event.keyCode == 40) {\n        this.expand();\n      } else if (event.keyCode == 38 || event.keyCode == 27) {\n        // Close with up arrow or escape key\n        this.collapse();\n      }\n    }\n  }, {\n    key: \"expand\",\n    value: function expand(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.activeToggleText;\n      }\n\n      // Add classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList2, _this$targetEl$classL2;\n        (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", true);\n      this.targetEl.setAttribute(\"aria-hidden\", false);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"expand\", event);\n    }\n  }, {\n    key: \"collapse\",\n    value: function collapse(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList3, _this$targetEl$classL3;\n        (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", false);\n      this.targetEl.setAttribute(\"aria-hidden\", true);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"collapse\", event);\n    }\n  }, {\n    key: \"toggle\",\n    value: function toggle(event) {\n      // Prevent default in case toggle element is a link instead of a button\n      event.preventDefault();\n      if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n        this.collapse(event);\n      } else {\n        this.expand(event);\n      }\n    }\n  }]);\n  return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
 
@@ -100,0 +100,0 @@ /***/ }),

dist/expand-toggle.m.js

@@ -98,3 +98,3 @@ module.exports =
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n  _inherits(ExpandToggle, _EventEmitter);\n  var _super = _createSuper(ExpandToggle);\n  function ExpandToggle(el, opts) {\n    var _this;\n    _classCallCheck(this, ExpandToggle);\n    // Have to call super() first before referencing “this” since we’re extending EventEmitter\n    // https://stackoverflow.com/a/43591507/673457\n    _this = _super.call(this);\n    _this.el = el;\n    _this.targetId = _this.el.getAttribute(\"data-expands\");\n    _this.targetEl = document.getElementById(_this.targetId);\n    _this.targetParentEl = _this.targetEl.parentNode;\n\n    // Ensure target element exist before initializing\n    if (!_this.targetEl) {\n      console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n      return _possibleConstructorReturn(_this);\n    }\n\n    // Use Object.assign() to merge “opts” object with default values in this.options\n    _this.options = Object.assign({}, {\n      expandedClasses: \"\",\n      // string, accepts multiple space-separated classes\n      activeToggleText: \"\",\n      // expanded state toggle button text\n      shouldStartExpanded: false,\n      // component starts expanded on init\n      onReady: null // ready callback function\n    }, opts);\n\n    // Check for custom expanded class(es)\n    _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n    if (_this.expandedClasses.length) {\n      // Check if active class string contains multiple classes\n      if (_this.expandedClasses.indexOf(\" \") > -1) {\n        // Convert to array and remove any empty string values\n        // caused by having multiple spaces in a row.\n        _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n          return n.length;\n        });\n      } else {\n        // We still need to convert a single active class to an array\n        // so we can use the spread syntax later in classList.add()\n        _this.expandedClasses = [_this.expandedClasses];\n      }\n    }\n\n    // Check if component should start expanded\n    _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n    // Check for custom toggle button text to use when expanded\n    _this.hasActiveText = false;\n    _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n    if (_this.textEl) {\n      _this.defaultToggleText = _this.textEl.textContent;\n      _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n      _this.hasActiveText = !!_this.activeToggleText.length;\n    }\n    _this.init();\n    return _this;\n  }\n  _createClass(ExpandToggle, [{\n    key: \"init\",\n    value: function init() {\n      // Store state to avoid calling resize handler after component has been destroyed\n      this.hasInitialized = true;\n\n      // Accessibility setup\n      this.el.setAttribute(\"aria-haspopup\", true);\n      this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n      // Omit “aria-controls” for now\n      // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n      // this.el.setAttribute(\"aria-controls\", this.targetId);\n      this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.setAttribute(\"role\", \"button\");\n      }\n\n      // Click event listener on toggle button\n      // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n      // https://stackoverflow.com/a/22870717/673457\n      this.clickHandler = this.toggle.bind(this);\n      this.el.addEventListener(\"click\", this.clickHandler);\n\n      // Keyboard listeners on toggle button\n      this.keydownHandler = this.keyboardEvents.bind(this);\n      this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n      // Check for onReady callback\n      if (typeof this.options.onReady === \"function\") {\n        this.options.onReady();\n      }\n    }\n  }, {\n    key: \"destroy\",\n    value: function destroy() {\n      this.hasInitialized = false;\n\n      // Remove event listeners\n      this.el.removeEventListener(\"click\", this.clickHandler);\n      this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n      // Remove aria attributes\n      this.el.removeAttribute(\"aria-haspopup\");\n      this.el.removeAttribute(\"aria-expanded\");\n      this.targetEl.removeAttribute(\"aria-hidden\");\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.removeAttribute(\"role\");\n      }\n\n      // Reset toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove custom classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList, _this$targetEl$classL;\n        (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n      }\n      this.emitEvent(\"destroy\");\n    }\n  }, {\n    key: \"keyboardEvents\",\n    value: function keyboardEvents(event) {\n      // Expand with down arrow\n      if (event.keyCode == 40) {\n        this.expand();\n      } else if (event.keyCode == 38 || event.keyCode == 27) {\n        // Close with up arrow or escape key\n        this.collapse();\n      }\n    }\n  }, {\n    key: \"expand\",\n    value: function expand(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.activeToggleText;\n      }\n\n      // Add classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList2, _this$targetEl$classL2;\n        (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", true);\n      this.targetEl.setAttribute(\"aria-hidden\", false);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"expand\", event);\n    }\n  }, {\n    key: \"collapse\",\n    value: function collapse(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList3, _this$targetEl$classL3;\n        (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", false);\n      this.targetEl.setAttribute(\"aria-hidden\", true);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"collapse\", event);\n    }\n  }, {\n    key: \"toggle\",\n    value: function toggle(event) {\n      // Prevent default in case toggle element is a link instead of a button\n      event.preventDefault();\n      if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n        this.collapse(event);\n      } else {\n        this.expand(event);\n      }\n    }\n  }]);\n  return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n'use client';\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n  _inherits(ExpandToggle, _EventEmitter);\n  var _super = _createSuper(ExpandToggle);\n  function ExpandToggle(el, opts) {\n    var _this;\n    _classCallCheck(this, ExpandToggle);\n    // Have to call super() first before referencing “this” since we’re extending EventEmitter\n    // https://stackoverflow.com/a/43591507/673457\n    _this = _super.call(this);\n    _this.el = el;\n    _this.targetId = _this.el.getAttribute(\"data-expands\");\n    _this.targetEl = document.getElementById(_this.targetId);\n    _this.targetParentEl = _this.targetEl.parentNode;\n\n    // Ensure target element exist before initializing\n    if (!_this.targetEl) {\n      console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n      return _possibleConstructorReturn(_this);\n    }\n\n    // Use Object.assign() to merge “opts” object with default values in this.options\n    _this.options = Object.assign({}, {\n      expandedClasses: \"\",\n      // string, accepts multiple space-separated classes\n      activeToggleText: \"\",\n      // expanded state toggle button text\n      shouldStartExpanded: false,\n      // component starts expanded on init\n      onReady: null // ready callback function\n    }, opts);\n\n    // Check for custom expanded class(es)\n    _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n    if (_this.expandedClasses.length) {\n      // Check if active class string contains multiple classes\n      if (_this.expandedClasses.indexOf(\" \") > -1) {\n        // Convert to array and remove any empty string values\n        // caused by having multiple spaces in a row.\n        _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n          return n.length;\n        });\n      } else {\n        // We still need to convert a single active class to an array\n        // so we can use the spread syntax later in classList.add()\n        _this.expandedClasses = [_this.expandedClasses];\n      }\n    }\n\n    // Check if component should start expanded\n    _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n    // Check for custom toggle button text to use when expanded\n    _this.hasActiveText = false;\n    _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n    if (_this.textEl) {\n      _this.defaultToggleText = _this.textEl.textContent;\n      _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n      _this.hasActiveText = !!_this.activeToggleText.length;\n    }\n    _this.init();\n    return _this;\n  }\n  _createClass(ExpandToggle, [{\n    key: \"init\",\n    value: function init() {\n      // Store state to avoid calling resize handler after component has been destroyed\n      this.hasInitialized = true;\n\n      // Accessibility setup\n      this.el.setAttribute(\"aria-haspopup\", true);\n      this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n      // Omit “aria-controls” for now\n      // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n      // this.el.setAttribute(\"aria-controls\", this.targetId);\n      this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.setAttribute(\"role\", \"button\");\n      }\n\n      // Click event listener on toggle button\n      // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n      // https://stackoverflow.com/a/22870717/673457\n      this.clickHandler = this.toggle.bind(this);\n      this.el.addEventListener(\"click\", this.clickHandler);\n\n      // Keyboard listeners on toggle button\n      this.keydownHandler = this.keyboardEvents.bind(this);\n      this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n      // Check for onReady callback\n      if (typeof this.options.onReady === \"function\") {\n        this.options.onReady();\n      }\n    }\n  }, {\n    key: \"destroy\",\n    value: function destroy() {\n      this.hasInitialized = false;\n\n      // Remove event listeners\n      this.el.removeEventListener(\"click\", this.clickHandler);\n      this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n      // Remove aria attributes\n      this.el.removeAttribute(\"aria-haspopup\");\n      this.el.removeAttribute(\"aria-expanded\");\n      this.targetEl.removeAttribute(\"aria-hidden\");\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.removeAttribute(\"role\");\n      }\n\n      // Reset toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove custom classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList, _this$targetEl$classL;\n        (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n      }\n      this.emitEvent(\"destroy\");\n    }\n  }, {\n    key: \"keyboardEvents\",\n    value: function keyboardEvents(event) {\n      // Expand with down arrow\n      if (event.keyCode == 40) {\n        this.expand();\n      } else if (event.keyCode == 38 || event.keyCode == 27) {\n        // Close with up arrow or escape key\n        this.collapse();\n      }\n    }\n  }, {\n    key: \"expand\",\n    value: function expand(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.activeToggleText;\n      }\n\n      // Add classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList2, _this$targetEl$classL2;\n        (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", true);\n      this.targetEl.setAttribute(\"aria-hidden\", false);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"expand\", event);\n    }\n  }, {\n    key: \"collapse\",\n    value: function collapse(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList3, _this$targetEl$classL3;\n        (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", false);\n      this.targetEl.setAttribute(\"aria-hidden\", true);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"collapse\", event);\n    }\n  }, {\n    key: \"toggle\",\n    value: function toggle(event) {\n      // Prevent default in case toggle element is a link instead of a button\n      event.preventDefault();\n      if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n        this.collapse(event);\n      } else {\n        this.expand(event);\n      }\n    }\n  }]);\n  return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
 
@@ -101,0 +101,0 @@ /***/ }),

dist/expand-toggle.umd.js

@@ -107,3 +107,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n  _inherits(ExpandToggle, _EventEmitter);\n  var _super = _createSuper(ExpandToggle);\n  function ExpandToggle(el, opts) {\n    var _this;\n    _classCallCheck(this, ExpandToggle);\n    // Have to call super() first before referencing “this” since we’re extending EventEmitter\n    // https://stackoverflow.com/a/43591507/673457\n    _this = _super.call(this);\n    _this.el = el;\n    _this.targetId = _this.el.getAttribute(\"data-expands\");\n    _this.targetEl = document.getElementById(_this.targetId);\n    _this.targetParentEl = _this.targetEl.parentNode;\n\n    // Ensure target element exist before initializing\n    if (!_this.targetEl) {\n      console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n      return _possibleConstructorReturn(_this);\n    }\n\n    // Use Object.assign() to merge “opts” object with default values in this.options\n    _this.options = Object.assign({}, {\n      expandedClasses: \"\",\n      // string, accepts multiple space-separated classes\n      activeToggleText: \"\",\n      // expanded state toggle button text\n      shouldStartExpanded: false,\n      // component starts expanded on init\n      onReady: null // ready callback function\n    }, opts);\n\n    // Check for custom expanded class(es)\n    _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n    if (_this.expandedClasses.length) {\n      // Check if active class string contains multiple classes\n      if (_this.expandedClasses.indexOf(\" \") > -1) {\n        // Convert to array and remove any empty string values\n        // caused by having multiple spaces in a row.\n        _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n          return n.length;\n        });\n      } else {\n        // We still need to convert a single active class to an array\n        // so we can use the spread syntax later in classList.add()\n        _this.expandedClasses = [_this.expandedClasses];\n      }\n    }\n\n    // Check if component should start expanded\n    _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n    // Check for custom toggle button text to use when expanded\n    _this.hasActiveText = false;\n    _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n    if (_this.textEl) {\n      _this.defaultToggleText = _this.textEl.textContent;\n      _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n      _this.hasActiveText = !!_this.activeToggleText.length;\n    }\n    _this.init();\n    return _this;\n  }\n  _createClass(ExpandToggle, [{\n    key: \"init\",\n    value: function init() {\n      // Store state to avoid calling resize handler after component has been destroyed\n      this.hasInitialized = true;\n\n      // Accessibility setup\n      this.el.setAttribute(\"aria-haspopup\", true);\n      this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n      // Omit “aria-controls” for now\n      // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n      // this.el.setAttribute(\"aria-controls\", this.targetId);\n      this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.setAttribute(\"role\", \"button\");\n      }\n\n      // Click event listener on toggle button\n      // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n      // https://stackoverflow.com/a/22870717/673457\n      this.clickHandler = this.toggle.bind(this);\n      this.el.addEventListener(\"click\", this.clickHandler);\n\n      // Keyboard listeners on toggle button\n      this.keydownHandler = this.keyboardEvents.bind(this);\n      this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n      // Check for onReady callback\n      if (typeof this.options.onReady === \"function\") {\n        this.options.onReady();\n      }\n    }\n  }, {\n    key: \"destroy\",\n    value: function destroy() {\n      this.hasInitialized = false;\n\n      // Remove event listeners\n      this.el.removeEventListener(\"click\", this.clickHandler);\n      this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n      // Remove aria attributes\n      this.el.removeAttribute(\"aria-haspopup\");\n      this.el.removeAttribute(\"aria-expanded\");\n      this.targetEl.removeAttribute(\"aria-hidden\");\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.removeAttribute(\"role\");\n      }\n\n      // Reset toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove custom classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList, _this$targetEl$classL;\n        (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n      }\n      this.emitEvent(\"destroy\");\n    }\n  }, {\n    key: \"keyboardEvents\",\n    value: function keyboardEvents(event) {\n      // Expand with down arrow\n      if (event.keyCode == 40) {\n        this.expand();\n      } else if (event.keyCode == 38 || event.keyCode == 27) {\n        // Close with up arrow or escape key\n        this.collapse();\n      }\n    }\n  }, {\n    key: \"expand\",\n    value: function expand(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.activeToggleText;\n      }\n\n      // Add classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList2, _this$targetEl$classL2;\n        (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", true);\n      this.targetEl.setAttribute(\"aria-hidden\", false);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"expand\", event);\n    }\n  }, {\n    key: \"collapse\",\n    value: function collapse(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList3, _this$targetEl$classL3;\n        (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", false);\n      this.targetEl.setAttribute(\"aria-hidden\", true);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"collapse\", event);\n    }\n  }, {\n    key: \"toggle\",\n    value: function toggle(event) {\n      // Prevent default in case toggle element is a link instead of a button\n      event.preventDefault();\n      if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n        this.collapse(event);\n      } else {\n        this.expand(event);\n      }\n    }\n  }]);\n  return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n'use client';\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n  _inherits(ExpandToggle, _EventEmitter);\n  var _super = _createSuper(ExpandToggle);\n  function ExpandToggle(el, opts) {\n    var _this;\n    _classCallCheck(this, ExpandToggle);\n    // Have to call super() first before referencing “this” since we’re extending EventEmitter\n    // https://stackoverflow.com/a/43591507/673457\n    _this = _super.call(this);\n    _this.el = el;\n    _this.targetId = _this.el.getAttribute(\"data-expands\");\n    _this.targetEl = document.getElementById(_this.targetId);\n    _this.targetParentEl = _this.targetEl.parentNode;\n\n    // Ensure target element exist before initializing\n    if (!_this.targetEl) {\n      console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n      return _possibleConstructorReturn(_this);\n    }\n\n    // Use Object.assign() to merge “opts” object with default values in this.options\n    _this.options = Object.assign({}, {\n      expandedClasses: \"\",\n      // string, accepts multiple space-separated classes\n      activeToggleText: \"\",\n      // expanded state toggle button text\n      shouldStartExpanded: false,\n      // component starts expanded on init\n      onReady: null // ready callback function\n    }, opts);\n\n    // Check for custom expanded class(es)\n    _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n    if (_this.expandedClasses.length) {\n      // Check if active class string contains multiple classes\n      if (_this.expandedClasses.indexOf(\" \") > -1) {\n        // Convert to array and remove any empty string values\n        // caused by having multiple spaces in a row.\n        _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n          return n.length;\n        });\n      } else {\n        // We still need to convert a single active class to an array\n        // so we can use the spread syntax later in classList.add()\n        _this.expandedClasses = [_this.expandedClasses];\n      }\n    }\n\n    // Check if component should start expanded\n    _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n    // Check for custom toggle button text to use when expanded\n    _this.hasActiveText = false;\n    _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n    if (_this.textEl) {\n      _this.defaultToggleText = _this.textEl.textContent;\n      _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n      _this.hasActiveText = !!_this.activeToggleText.length;\n    }\n    _this.init();\n    return _this;\n  }\n  _createClass(ExpandToggle, [{\n    key: \"init\",\n    value: function init() {\n      // Store state to avoid calling resize handler after component has been destroyed\n      this.hasInitialized = true;\n\n      // Accessibility setup\n      this.el.setAttribute(\"aria-haspopup\", true);\n      this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n      // Omit “aria-controls” for now\n      // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n      // this.el.setAttribute(\"aria-controls\", this.targetId);\n      this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.setAttribute(\"role\", \"button\");\n      }\n\n      // Click event listener on toggle button\n      // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n      // https://stackoverflow.com/a/22870717/673457\n      this.clickHandler = this.toggle.bind(this);\n      this.el.addEventListener(\"click\", this.clickHandler);\n\n      // Keyboard listeners on toggle button\n      this.keydownHandler = this.keyboardEvents.bind(this);\n      this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n      // Check for onReady callback\n      if (typeof this.options.onReady === \"function\") {\n        this.options.onReady();\n      }\n    }\n  }, {\n    key: \"destroy\",\n    value: function destroy() {\n      this.hasInitialized = false;\n\n      // Remove event listeners\n      this.el.removeEventListener(\"click\", this.clickHandler);\n      this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n      // Remove aria attributes\n      this.el.removeAttribute(\"aria-haspopup\");\n      this.el.removeAttribute(\"aria-expanded\");\n      this.targetEl.removeAttribute(\"aria-hidden\");\n      if (this.el.tagName.toLowerCase() === \"a\") {\n        this.el.removeAttribute(\"role\");\n      }\n\n      // Reset toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove custom classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList, _this$targetEl$classL;\n        (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n      }\n      this.emitEvent(\"destroy\");\n    }\n  }, {\n    key: \"keyboardEvents\",\n    value: function keyboardEvents(event) {\n      // Expand with down arrow\n      if (event.keyCode == 40) {\n        this.expand();\n      } else if (event.keyCode == 38 || event.keyCode == 27) {\n        // Close with up arrow or escape key\n        this.collapse();\n      }\n    }\n  }, {\n    key: \"expand\",\n    value: function expand(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.activeToggleText;\n      }\n\n      // Add classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList2, _this$targetEl$classL2;\n        (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", true);\n      this.targetEl.setAttribute(\"aria-hidden\", false);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"expand\", event);\n    }\n  }, {\n    key: \"collapse\",\n    value: function collapse(event) {\n      // Update toggle text\n      if (this.hasActiveText) {\n        this.textEl.textContent = this.defaultToggleText;\n      }\n\n      // Remove classes\n      if (this.expandedClasses.length) {\n        var _this$el$classList3, _this$targetEl$classL3;\n        (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n        (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n      }\n\n      // Update aria attributes\n      this.el.setAttribute(\"aria-expanded\", false);\n      this.targetEl.setAttribute(\"aria-hidden\", true);\n\n      // Emit event and include original event as an argument\n      this.emitEvent(\"collapse\", event);\n    }\n  }, {\n    key: \"toggle\",\n    value: function toggle(event) {\n      // Prevent default in case toggle element is a link instead of a button\n      event.preventDefault();\n      if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n        this.collapse(event);\n      } else {\n        this.expand(event);\n      }\n    }\n  }]);\n  return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
 
@@ -110,0 +110,0 @@ /***/ }),

index.js

@@ -10,2 +10,4 @@ /**
  */
+'use client';
+
 import EventEmitter from "ev-emitter";
@@ -12,0 +14,0 @@

package.json

 {
   "name": "@threespot/expand-toggle",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Simple and accessible expandable functionality, similar to jQuery’s `slideToggle()` method.",
@@ -26,3 +26,3 @@ "main": "dist/expand-toggle.m.js",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=20.0.0"
   },
@@ -32,3 +32,3 @@ "license": "MIT",
   "scripts": {
-    "webpack": "webpack --config webpack.config.js",
+    "webpack": "NODE_OPTIONS=--openssl-legacy-provider webpack --config webpack.config.js",
     "docs": "jsdoc index.js -t node_modules/minami --readme README.md --destination docs",
@@ -35,0 +35,0 @@ "test:prod": "jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",

README.md

@@ -51,5 +51,7 @@ # Expand Toggle
 .expandable {
+  $speed: 500ms;
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 250ms ease;
+  transition: grid-template-rows $speed ease, visibility 0s linear $speed;
+  visibility: hidden;
 
@@ -59,2 +61,4 @@ &[aria-hidden="false"],
     grid-template-rows: 1fr;
+    transition: grid-template-rows $speed ease, visibility 0s linear 0s;
+    visibility: visible;
   }
@@ -61,0 +65,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1580170

increased by0.03%

Lines of code

1941

increased by0.05%

Number of lines in readme file

144

increased by2.86%

No dependency changes