@graupl/core 1.0.0-beta.19 → 1.0.0-beta.21

package/dist/js/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","names":["isValidInstance","contructor","elements","elementsType","TypeError","key","elementType","name","status","error","isValidType","type","values","valuesType","valueType","isQuerySelector","Error","document","querySelector","isValidClassList","Array","isArray","forEach","value","obj","isValidHoverType","validTypes","includes","join","isTag","tagName","HTMLElement","tag","toLowerCase","check","isValidState","validStates","isValidEvent","validEvents","isValidType","initializeStorage","type","window","Graupl","getStorage","setStorage","data","clearStorage","pushToStorage","key","value","getFromStorage","removeFromStorage","wsRE","attrName","doc","document","attr","element","op","value","attrSelector","id","TypeError","test","RangeError","checkElement","itemToCheck","Element","getElements","selector","context","elements","Document","DocumentFragment","querySelectorAll","Array","prototype","slice","call","filterAndModify","apply","filter","selected","matches","updateAttribute","add","remove","result","trim","split","forEach","item","indexOf","push","attribute","join","once","find","storage","once","generate","options","context","document","navigationSelector","forEach","navigationElement","MenuConstructor","dataset","grauplMenuType","DisclosureMenu","window","undefined","console","warn","menuOptions","grauplMenuOptions","JSON","parse","replace","menuElement","querySelector","controllerElement","containerElement","menu","menuItemSelector","menuLinkSelector","submenuItemSelector","submenuToggleSelector","initializeStorage","pushToStorage","dom","id","generate","document","addEventListener"],"sources":["../../src/js/validate.js","../../src/js/storage.js","../../../../node_modules/@drupal/once/src/once.js","../../src/js/navigation/generator.js","../../src/js/navigation/index.js"],"sourcesContent":["/**\n * Check to see if the provided elements have a specific contructor.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * This is essentially just a wrapper function around checking instanceof with\n * more descriptive error message to help debugging.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {object}                  contructor - The constructor to check for.\n * @param  {object}                  elements   - The element(s) to check.\n * @return {Object<boolean, string>}            - The result of the check.\n */\nexport function isValidInstance(contructor, elements) {\n  try {\n    if (typeof elements !== \"object\") {\n      const elementsType = typeof elements;\n\n      throw new TypeError(\n        `Elements given to isValidInstance() must be inside of an object. \"${elementsType}\" given.`\n      );\n    }\n\n    for (const key in elements) {\n      if (!(elements[key] instanceof contructor)) {\n        const elementType = typeof elements[key];\n        throw new TypeError(\n          `${key} must be an instance of ${contructor.name}. \"${elementType}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are of a specific type.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * This is essentially just a wrapper function around checking typeof with\n * more descriptive error message to help debugging.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {string}                  type   - The type to check for.\n * @param  {object}                  values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidType(type, values) {\n  try {\n    if (typeof values !== \"object\") {\n      const valuesType = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidType() must be inside of an object. \"${valuesType}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      const valueType = typeof values[key];\n\n      if (valueType !== type) {\n        throw new TypeError(`${key} must be a ${type}. \"${valueType}\" given.`);\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided values are valid query selectors.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isQuerySelector(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isQuerySelector() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      try {\n        if (values[key] === null) {\n          throw new Error();\n        }\n\n        document.querySelector(values[key]);\n      } catch {\n        throw new TypeError(\n          `${key} must be a valid query selector. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided value is either a string or an array of strings.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string, string[]>} values - The value(s) to check.\n * @return {Object<boolean, string>}         - The result of the check.\n */\nexport function isValidClassList(values) {\n  try {\n    if (typeof values !== \"object\" || Array.isArray(values)) {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidClassList() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      const type = typeof values[key];\n\n      if (type !== \"string\") {\n        if (Array.isArray(values[key])) {\n          values[key].forEach((value) => {\n            if (typeof value !== \"string\") {\n              throw new TypeError(\n                `${key} must be a string or an array of strings. An array containing non-strings given.`\n              );\n            }\n          });\n        } else {\n          throw new TypeError(\n            `${key} must be a string or an array of strings. \"${type}\" given.`\n          );\n        }\n      } else {\n        const obj = {};\n        obj[key] = values[key];\n\n        isQuerySelector(obj);\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are valid hover types.\n *\n * Available types are: `\"off\"`, `\"on\"`, and `\"dynamic\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidHoverType(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidHoverType() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validTypes = [\"off\", \"on\", \"dynamic\"];\n\n    for (const key in values) {\n      if (!validTypes.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validTypes.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided elements are using a specific tag.\n *\n * The elements must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `true` if the check is successful.\n *\n * @param  {string}               tagName - The name of the tag.\n * @param  {Object<HTMLElement>} elements - The element(s) to check.\n * @return {boolean}                      - The result of the check.\n */\nexport function isTag(tagName, elements) {\n  if (\n    isValidType(\"string\", { tagName }).status &&\n    isValidInstance(HTMLElement, elements).status\n  ) {\n    const tag = tagName.toLowerCase();\n    let check = true;\n\n    for (const key in elements) {\n      if (elements[key].tagName.toLowerCase() !== tag) check = false;\n    }\n\n    return check;\n  } else {\n    return false;\n  }\n}\n\n/**\n * Check to see if the provided values are valid focus states for a menu.\n *\n * Available states are: `\"none\"`, `\"self\"`, and `\"child\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidState(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidState() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validStates = [\"none\", \"self\", \"child\"];\n\n    for (const key in values) {\n      if (!validStates.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validStates.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are valid event types for a menu.\n *\n * Available events are: `\"none\"`, `\"mouse\"`, `\"keyboard\"`, and `\"character\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidEvent(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidEvent() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validEvents = [\"none\", \"mouse\", \"keyboard\", \"character\"];\n\n    for (const key in values) {\n      if (!validEvents.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validEvents.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n","/**\n * @file\n * Provides a system to get and store Graupl data in the browser.\n */\n\nimport { isValidType } from \"./validate.js\";\n\n/**\n * Initializes the storage system.\n *\n * @param {?string} [type = null] - The type of storage to initialize.\n */\nexport function initializeStorage(type = null) {\n  window.Graupl = window.Graupl || {};\n\n  if (isValidType(\"string\", { type })) {\n    window.Graupl[type] = window.Graupl[type] || {};\n  }\n}\n\n/**\n * Get the storage object.\n *\n * @param  {?string} type - The type of storage to get.\n * @return {object}       - The storage object.\n */\nexport function getStorage(type = null) {\n  if (isValidType(\"string\", { type })) {\n    return window.Graupl[type];\n  }\n\n  return window.Graupl;\n}\n\n/**\n * Set the storage object of a given type.\n *\n * @param {string} type - The type of storage to set.\n * @param {object} data - The data to set.\n */\nexport function setStorage(type, data = {}) {\n  if (isValidType(\"string\", { type }) && isValidType(\"object\", { data })) {\n    window.Graupl[type] = data;\n  }\n}\n\n/**\n * Clear the storage object of a given type.\n *\n * @param {string} type - The type of storage to clear.\n */\nexport function clearStorage(type) {\n  if (isValidType(\"string\", { type })) {\n    window.Graupl[type] = {};\n  }\n}\n\n/**\n * Push a value to the storage object.\n *\n * @param {string} type  - The type of storage to push to.\n * @param {string} key   - The key to use for the value.\n * @param {*}      value - The value to store.\n */\nexport function pushToStorage(type, key, value) {\n  if (isValidType(\"string\", { type, key })) {\n    window.Graupl[type][key] = value;\n  }\n}\n\n/**\n * Get a value from the storage object.\n *\n * @param  {string }type - The type of storage to get from.\n * @param  {string }key  - The key to get the value from.\n * @return {*}           - The value from the storage object.\n */\nexport function getFromStorage(type, key) {\n  if (isValidType(\"string\", { type, key })) {\n    return window.Graupl[type][key];\n  }\n\n  return null;\n}\n\n/**\n * Remove a value from the storage object.\n *\n * @param {string} type - The type of storage to remove from.\n * @param {string} key  - The key to remove the value from.\n */\nexport function removeFromStorage(type, key) {\n  if (isValidType(\"string\", { type, key })) {\n    delete window.Graupl[type][key];\n  }\n}\n\nexport default {\n  initializeStorage,\n  getStorage,\n  setStorage,\n  clearStorage,\n  pushToStorage,\n  getFromStorage,\n  removeFromStorage,\n};\n","/**\n * Mark DOM elements as processed to prevent multiple initializations.\n *\n * @module @drupal/once\n *\n * @example <!-- Use as a module -->\n * <script type=\"module\">\n *   import once from 'https://unpkg.com/@drupal/once/src/once.js';\n *   const elements = once('my-once-id', 'div');\n *   // Initialize elements.\n *   elements.forEach(el => el.innerHTML = 'processed');\n * </script>\n *\n * @example <!-- Use as a regular script -->\n * <script src=\"https://unpkg.com/@drupal/once\"></script>\n * <script>\n *   const elements = once('my-once-id', 'div');\n *   // Initialize elements.\n *   elements.forEach(el => el.innerHTML = 'processed');\n * </script>\n * @example <!-- Using a single element as input-->\n * <script src=\"https://unpkg.com/@drupal/once\"></script>\n * <script>\n *   // once methods always return an array, to simplify the use with a single\n *   // element use destructuring or the shift method.\n *   const [myElement] = once('my-once-id', document.body);\n *   const myElement = once('my-once-id', document.body).shift();\n * </script>\n */\n\n/**\n * Illegal spaces in ids.\n *\n * @private\n *\n * @type {RegExp}\n */\nconst wsRE = /[\\11\\12\\14\\15\\40]+/;\n\n/**\n * Name of the HTML attribute containing an element's once ids.\n *\n * @private\n *\n * @type {string}\n */\nconst attrName = 'data-once';\n\n/**\n * Shortcut to access the html element.\n *\n * @private\n *\n * @type {HTMLElement}\n */\nconst doc = document;\n\n/**\n * Helper to access element attributes.\n *\n * @private\n *\n * @param {Element} element\n *   The Element to access the data-once attribute from.\n * @param {string} op\n *   The action to take on the element.\n * @param {string} [value]\n *   Optional value for setAttribute.\n *\n * @return {string|undefined|null|boolean}\n *   Result of the attribute method.\n */\nfunction attr(element, op, value) {\n  return element[`${op}Attribute`](attrName, value);\n}\n\n/**\n * Return the attribute selector.\n *\n * @private\n *\n * @param {string} id\n *   The id passed by a call to a once() function.\n *\n * @return {string}\n *   The full CSS attribute selector.\n *\n * @throws {TypeError|RangeError}\n */\nfunction attrSelector(id) {\n  // Verify the validity of the once id.\n  if (typeof id !== 'string') {\n    throw new TypeError('once ID must be a string');\n  }\n  if (id === '' || wsRE.test(id)) {\n    throw new RangeError('once ID must not be empty or contain spaces');\n  }\n  // The id is valid, return the full CSS selector.\n  return `[${attrName}~=\"${id}\"]`;\n}\n\n/**\n * Verifies that an item is an instance of Element.\n *\n * This function is used during filtering to ensure only DOM elements are\n * processed. once() makes use of get/setAttribute, which are methods\n * inherited from the Element object, so only of Element can be used.\n *\n * @private\n *\n * @param {*} itemToCheck\n *   The item to check.\n *\n * @return {boolean}\n *   True if the item is an instance of Element\n *\n * @throws {TypeError}\n */\nfunction checkElement(itemToCheck) {\n  if (!(itemToCheck instanceof Element)) {\n    throw new TypeError('The element must be an instance of Element');\n  }\n  return true;\n}\n\n/**\n * Process arguments, query the DOM if necessary.\n *\n * @private\n *\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   An element or document object to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   An array with the processed Id and the list of elements to process.\n */\nfunction getElements(selector, context = doc) {\n  // Assume selector is an array-like value.\n  let elements = selector;\n\n  // If selector is null it is most likely because of a call to querySelector\n  // that didn't return a result.\n  if (selector === null) {\n    elements = [];\n  }\n  // The selector is undefined, error out.\n  else if (!selector) {\n    throw new TypeError('Selector must not be empty');\n  }\n  // Context doesn't implement querySelectorAll, error out.\n  else if (\n    !(\n      context instanceof Document ||\n      context instanceof DocumentFragment ||\n      context instanceof Element\n    )\n  ) {\n    throw new TypeError(\n      'Context must be an object of type \"Document\", \"DocumentFragment\", or \"Element\".',\n    );\n  }\n  // This is a selector, query the elements.\n  else if (typeof selector === 'string') {\n    elements = context.querySelectorAll(selector);\n  }\n  // This is a single element.\n  else if (selector instanceof Element) {\n    elements = [selector];\n  }\n\n  // Make sure an array is returned and not a NodeList or an Array-like object.\n  return Array.prototype.slice.call(elements);\n}\n\n/**\n * A helper for applying DOM changes to a filtered set of elements.\n *\n * This makes it possible to filter items that are not instances of Element,\n * then modify their DOM attributes in a single array traversal.\n *\n * @private\n *\n * @param {string} selector\n *   A CSS selector to check against to each element in the array.\n * @param {Array.<Element>} elements\n *   A NodeList or array of elements passed by a call to a once() function.\n * @param {function} [apply]\n *   An optional function to apply on all matched elements.\n *\n * @return {Array.<Element>}\n *   The array of elements that match the CSS selector.\n */\nfunction filterAndModify(selector, elements, apply) {\n  return elements.filter((element) => {\n    const selected = checkElement(element) && element.matches(selector);\n    if (selected && apply) {\n      apply(element);\n    }\n    return selected;\n  });\n}\n\n/**\n * Add or remove an item from a list of once values.\n *\n * This function removes duplicates while adding or removing a once id in a\n * single array traversal.\n *\n * @private\n *\n * @param {Element} element\n *   A space separated string of once ids from a data-drupal-once attribute.\n * @param {string} [add]\n *   The once id to add to the list of values.\n * @param {string} [remove]\n *   The once id to remove from the list of values.\n *\n * @return {undefined}\n *   Nothing to return this is a callback in a foreach.\n */\nfunction updateAttribute(element, { add, remove }) {\n  const result = [];\n  if (attr(element, 'has')) {\n    attr(element, 'get')\n      .trim()\n      .split(wsRE)\n      .forEach((item) => {\n        if (result.indexOf(item) < 0 && item !== remove) {\n          result.push(item);\n        }\n      });\n  }\n  if (add) {\n    result.push(add);\n  }\n  const attribute = result.join(' ');\n  attr(element, attribute === '' ? 'remove' : 'set', attribute);\n}\n\n/**\n * Ensures a JavaScript callback is only executed once on a set of elements.\n *\n * Filters a NodeList or array of elements, removing those already processed\n * by a callback with a given id.\n * This method adds a `data-once` attribute on DOM elements. The value of\n * this attribute identifies if a given callback has been executed on that\n * element.\n *\n * @global\n *\n * @example <caption>Basic usage</caption>\n * const elements = once('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once('my-once-id', document.querySelector('#some-id'));\n * @example <caption>Using a single element</caption>\n * // Once always returns an array, even when passing a single element. Some\n * // forms that can be used to keep code readable.\n * // Destructuring:\n * const [myElement] = once('my-once-id', document.body);\n * // By changing the resulting array, es5 compatible.\n * const myElement = once('my-once-id', document.body).shift();\n *\n * @param {string} id\n *   The id of the once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   An element or document object to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   An array of elements that have not yet been processed by a once call\n *   with a given id.\n */\nfunction once(id, selector, context) {\n  return filterAndModify(\n    `:not(${attrSelector(id)})`,\n    getElements(selector, context),\n    (element) => updateAttribute(element, { add: id }),\n  );\n}\n\n/**\n * Removes a once id from an element's data-drupal-once attribute value.\n *\n * If a once id is removed from an element's data-drupal-once attribute value,\n * the JavaScript callback associated with that id can be executed on that\n * element again.\n *\n * @method once.remove\n *\n * @example <caption>Basic usage</caption>\n * const elements = once.remove('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once.remove('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once.remove('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once.remove('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once.remove('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once.remove('my-once-id', document.querySelector('#some-id'));\n *\n * @param {string} id\n *   The id of a once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements to remove the once id from.\n * @param {Document|Element} [context=document]\n *   An element to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that had been processed by the provided id,\n *   and are now able to be processed again.\n */\nonce.remove = (id, selector, context) => {\n  return filterAndModify(\n    attrSelector(id),\n    getElements(selector, context),\n    (element) => updateAttribute(element, { remove: id }),\n  );\n};\n\n/**\n * Finds elements that have been processed by a given once id.\n *\n * Behaves like {@link once} and {@link once.remove} without changing the DOM.\n * To select all DOM nodes processed by a given id, use {@link once.find}.\n *\n * @method once.filter\n *\n * @example <caption>Basic usage</caption>\n * const filteredElements = once.filter('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once.filter('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once.filter('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once.filter('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once.filter('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once.filter('my-once-id', document.querySelector('#some-id'));\n *\n * @param {string} id\n *   The id of the once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements to remove the once id from.\n * @param {Document|Element} [context=document]\n *   An element to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that have already been processed by the\n *   provided once id.\n */\nonce.filter = (id, selector, context) =>\n  filterAndModify(attrSelector(id), getElements(selector, context));\n\n/**\n * Finds elements that have been processed by a given once id.\n *\n * Query the 'context' element for elements that already have the\n * corresponding once id value.\n *\n * @method once.find\n *\n * @example <caption>Basic usage</caption>\n * const oncedElements = once.find('my-once-id');\n * @example <caption>Input parameters accepted</caption>\n * // Call without parameters, return all elements with a `data-once` attribute.\n * once.find();\n * // Call without a context.\n * once.find('my-once-id');\n * // Call with a context.\n * once.find('my-once-id', document.head);\n *\n * @param {string} [id]\n *   The id of the once call.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   Scope of the search for matching elements.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that have already been processed by the\n *   provided once id.\n */\nonce.find = (id, context) =>\n  getElements(!id ? `[${attrName}]` : attrSelector(id), context);\n\nexport default once;\n","import storage from \"../storage.js\";\nimport once from \"@drupal/once\";\n\nconst generate = (\n  options = {},\n  context = document,\n  navigationSelector = \".navigation\"\n) => {\n  once(\"graupl-navigation-generator\", navigationSelector, context).forEach(\n    (navigationElement) => {\n      const MenuConstructor =\n        navigationElement.dataset.grauplMenuType || DisclosureMenu;\n\n      if (window[MenuConstructor] === undefined) {\n        console.warn(\n          `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`\n        );\n\n        return;\n      }\n\n      const menuOptions = navigationElement.dataset.grauplMenuOptions\n        ? JSON.parse(\n            navigationElement.dataset.grauplMenuOptions.replace(/'/g, '\"')\n          ) || {}\n        : {};\n      const menuElement = navigationElement.querySelector(\".menu\");\n      const controllerElement =\n        navigationElement.querySelector(\".navigation-toggle\") || null;\n      const containerElement = controllerElement ? navigationElement : null;\n      const menu = new window[MenuConstructor]({\n        menuElement,\n        menuItemSelector: \".menu-item\",\n        menuLinkSelector: \".menu-link\",\n        submenuItemSelector: \".submenu-item\",\n        submenuToggleSelector: \".submenu-toggle\",\n        controllerElement,\n        containerElement,\n        ...options,\n        ...menuOptions,\n      });\n\n      storage.initializeStorage(\"menus\");\n      storage.pushToStorage(\"menus\", menu.dom.menu.id, menu);\n    }\n  );\n};\n\nexport default generate;\n","import generate from \"./generator.js\";\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  generate();\n});\n"],"x_google_ignoreList":[2],"mappings":"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"}
+{"version":3,"file":"navigation.js","names":["isValidInstance","constructor","elements","elementsType","TypeError","key","elementType","name","status","error","isValidType","type","values","valuesType","valueType","isQuerySelector","Error","document","querySelector","isValidClassList","Array","isArray","forEach","value","obj","isValidHoverType","validTypes","includes","join","isTag","tagName","HTMLElement","tag","toLowerCase","check","isValidState","validStates","isValidEvent","validEvents","isValidType","initializeStorage","type","window","Graupl","getStorage","setStorage","data","clearStorage","pushToStorage","key","value","getFromStorage","removeFromStorage","wsRE","attrName","doc","document","attr","element","op","value","attrSelector","id","TypeError","test","RangeError","checkElement","itemToCheck","Element","getElements","selector","context","elements","Document","DocumentFragment","querySelectorAll","Array","prototype","slice","call","filterAndModify","apply","filter","selected","matches","updateAttribute","add","remove","result","trim","split","forEach","item","indexOf","push","attribute","join","once","find","storage","once","generate","options","context","document","navigationSelector","forEach","navigationElement","MenuConstructor","dataset","grauplMenuType","DisclosureMenu","window","undefined","console","warn","menuOptions","grauplMenuOptions","JSON","parse","replace","menuElement","querySelector","controllerElement","containerElement","menu","menuItemSelector","menuLinkSelector","submenuItemSelector","submenuToggleSelector","initializeStorage","pushToStorage","dom","id","generate","document","addEventListener"],"sources":["../../src/js/validate.js","../../src/js/storage.js","../../../../node_modules/@drupal/once/src/once.js","../../src/js/navigation/generator.js","../../src/js/navigation/index.js"],"sourcesContent":["/**\n * Check to see if the provided elements have a specific constructor.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * This is essentially just a wrapper function around checking instanceof with\n * more descriptive error message to help debugging.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {object}                  constructor - The constructor to check for.\n * @param  {object}                  elements    - The element(s) to check.\n * @return {Object<boolean, string>}             - The result of the check.\n */\nexport function isValidInstance(constructor, elements) {\n  try {\n    if (typeof elements !== \"object\") {\n      const elementsType = typeof elements;\n\n      throw new TypeError(\n        `Elements given to isValidInstance() must be inside of an object. \"${elementsType}\" given.`\n      );\n    }\n\n    for (const key in elements) {\n      if (!(elements[key] instanceof constructor)) {\n        const elementType = typeof elements[key];\n        throw new TypeError(\n          `${key} must be an instance of ${constructor.name}. \"${elementType}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are of a specific type.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * This is essentially just a wrapper function around checking typeof with\n * more descriptive error message to help debugging.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {string}                  type   - The type to check for.\n * @param  {object}                  values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidType(type, values) {\n  try {\n    if (typeof values !== \"object\") {\n      const valuesType = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidType() must be inside of an object. \"${valuesType}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      const valueType = typeof values[key];\n\n      if (valueType !== type) {\n        throw new TypeError(`${key} must be a ${type}. \"${valueType}\" given.`);\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided values are valid query selectors.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isQuerySelector(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isQuerySelector() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      try {\n        if (values[key] === null) {\n          throw new Error();\n        }\n\n        document.querySelector(values[key]);\n      } catch {\n        throw new TypeError(\n          `${key} must be a valid query selector. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided value is either a string or an array of strings.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string, string[]>} values - The value(s) to check.\n * @return {Object<boolean, string>}         - The result of the check.\n */\nexport function isValidClassList(values) {\n  try {\n    if (typeof values !== \"object\" || Array.isArray(values)) {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidClassList() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      const type = typeof values[key];\n\n      if (type !== \"string\") {\n        if (Array.isArray(values[key])) {\n          values[key].forEach((value) => {\n            if (typeof value !== \"string\") {\n              throw new TypeError(\n                `${key} must be a string or an array of strings. An array containing non-strings given.`\n              );\n            }\n          });\n        } else {\n          throw new TypeError(\n            `${key} must be a string or an array of strings. \"${type}\" given.`\n          );\n        }\n      } else {\n        const obj = {};\n        obj[key] = values[key];\n\n        isQuerySelector(obj);\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are valid hover types.\n *\n * Available types are: `\"off\"`, `\"on\"`, and `\"dynamic\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidHoverType(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidHoverType() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validTypes = [\"off\", \"on\", \"dynamic\"];\n\n    for (const key in values) {\n      if (!validTypes.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validTypes.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided elements are using a specific tag.\n *\n * The elements must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `true` if the check is successful.\n *\n * @param  {string}               tagName - The name of the tag.\n * @param  {Object<HTMLElement>} elements - The element(s) to check.\n * @return {boolean}                      - The result of the check.\n */\nexport function isTag(tagName, elements) {\n  if (\n    isValidType(\"string\", { tagName }).status &&\n    isValidInstance(HTMLElement, elements).status\n  ) {\n    const tag = tagName.toLowerCase();\n    let check = true;\n\n    for (const key in elements) {\n      if (elements[key].tagName.toLowerCase() !== tag) check = false;\n    }\n\n    return check;\n  } else {\n    return false;\n  }\n}\n\n/**\n * Check to see if the provided values are valid focus states for a menu.\n *\n * Available states are: `\"none\"`, `\"self\"`, and `\"child\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidState(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidState() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validStates = [\"none\", \"self\", \"child\"];\n\n    for (const key in values) {\n      if (!validStates.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validStates.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are valid event types for a menu.\n *\n * Available events are: `\"none\"`, `\"mouse\"`, `\"keyboard\"`, and `\"character\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidEvent(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidEvent() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validEvents = [\"none\", \"mouse\", \"keyboard\", \"character\"];\n\n    for (const key in values) {\n      if (!validEvents.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validEvents.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n","/**\n * @file\n * Provides a system to get and store Graupl data in the browser.\n */\n\nimport { isValidType } from \"./validate.js\";\n\n/**\n * Initializes the storage system.\n *\n * @param {?string} [type = null] - The type of storage to initialize.\n */\nexport function initializeStorage(type = null) {\n  window.Graupl = window.Graupl || {};\n\n  if (isValidType(\"string\", { type })) {\n    window.Graupl[type] = window.Graupl[type] || {};\n  }\n}\n\n/**\n * Get the storage object.\n *\n * @param  {?string} type - The type of storage to get.\n * @return {object}       - The storage object.\n */\nexport function getStorage(type = null) {\n  if (isValidType(\"string\", { type })) {\n    return window.Graupl[type];\n  }\n\n  return window.Graupl;\n}\n\n/**\n * Set the storage object of a given type.\n *\n * @param {string} type - The type of storage to set.\n * @param {object} data - The data to set.\n */\nexport function setStorage(type, data = {}) {\n  if (isValidType(\"string\", { type }) && isValidType(\"object\", { data })) {\n    window.Graupl[type] = data;\n  }\n}\n\n/**\n * Clear the storage object of a given type.\n *\n * @param {string} type - The type of storage to clear.\n */\nexport function clearStorage(type) {\n  if (isValidType(\"string\", { type })) {\n    window.Graupl[type] = {};\n  }\n}\n\n/**\n * Push a value to the storage object.\n *\n * @param {string} type  - The type of storage to push to.\n * @param {string} key   - The key to use for the value.\n * @param {*}      value - The value to store.\n */\nexport function pushToStorage(type, key, value) {\n  if (isValidType(\"string\", { type, key })) {\n    window.Graupl[type][key] = value;\n  }\n}\n\n/**\n * Get a value from the storage object.\n *\n * @param  {string }type - The type of storage to get from.\n * @param  {string }key  - The key to get the value from.\n * @return {*}           - The value from the storage object.\n */\nexport function getFromStorage(type, key) {\n  if (isValidType(\"string\", { type, key })) {\n    return window.Graupl[type][key];\n  }\n\n  return null;\n}\n\n/**\n * Remove a value from the storage object.\n *\n * @param {string} type - The type of storage to remove from.\n * @param {string} key  - The key to remove the value from.\n */\nexport function removeFromStorage(type, key) {\n  if (isValidType(\"string\", { type, key })) {\n    delete window.Graupl[type][key];\n  }\n}\n\nexport default {\n  initializeStorage,\n  getStorage,\n  setStorage,\n  clearStorage,\n  pushToStorage,\n  getFromStorage,\n  removeFromStorage,\n};\n","/**\n * Mark DOM elements as processed to prevent multiple initializations.\n *\n * @module @drupal/once\n *\n * @example <!-- Use as a module -->\n * <script type=\"module\">\n *   import once from 'https://unpkg.com/@drupal/once/src/once.js';\n *   const elements = once('my-once-id', 'div');\n *   // Initialize elements.\n *   elements.forEach(el => el.innerHTML = 'processed');\n * </script>\n *\n * @example <!-- Use as a regular script -->\n * <script src=\"https://unpkg.com/@drupal/once\"></script>\n * <script>\n *   const elements = once('my-once-id', 'div');\n *   // Initialize elements.\n *   elements.forEach(el => el.innerHTML = 'processed');\n * </script>\n * @example <!-- Using a single element as input-->\n * <script src=\"https://unpkg.com/@drupal/once\"></script>\n * <script>\n *   // once methods always return an array, to simplify the use with a single\n *   // element use destructuring or the shift method.\n *   const [myElement] = once('my-once-id', document.body);\n *   const myElement = once('my-once-id', document.body).shift();\n * </script>\n */\n\n/**\n * Illegal spaces in ids.\n *\n * @private\n *\n * @type {RegExp}\n */\nconst wsRE = /[\\11\\12\\14\\15\\40]+/;\n\n/**\n * Name of the HTML attribute containing an element's once ids.\n *\n * @private\n *\n * @type {string}\n */\nconst attrName = 'data-once';\n\n/**\n * Shortcut to access the html element.\n *\n * @private\n *\n * @type {HTMLElement}\n */\nconst doc = document;\n\n/**\n * Helper to access element attributes.\n *\n * @private\n *\n * @param {Element} element\n *   The Element to access the data-once attribute from.\n * @param {string} op\n *   The action to take on the element.\n * @param {string} [value]\n *   Optional value for setAttribute.\n *\n * @return {string|undefined|null|boolean}\n *   Result of the attribute method.\n */\nfunction attr(element, op, value) {\n  return element[`${op}Attribute`](attrName, value);\n}\n\n/**\n * Return the attribute selector.\n *\n * @private\n *\n * @param {string} id\n *   The id passed by a call to a once() function.\n *\n * @return {string}\n *   The full CSS attribute selector.\n *\n * @throws {TypeError|RangeError}\n */\nfunction attrSelector(id) {\n  // Verify the validity of the once id.\n  if (typeof id !== 'string') {\n    throw new TypeError('once ID must be a string');\n  }\n  if (id === '' || wsRE.test(id)) {\n    throw new RangeError('once ID must not be empty or contain spaces');\n  }\n  // The id is valid, return the full CSS selector.\n  return `[${attrName}~=\"${id}\"]`;\n}\n\n/**\n * Verifies that an item is an instance of Element.\n *\n * This function is used during filtering to ensure only DOM elements are\n * processed. once() makes use of get/setAttribute, which are methods\n * inherited from the Element object, so only of Element can be used.\n *\n * @private\n *\n * @param {*} itemToCheck\n *   The item to check.\n *\n * @return {boolean}\n *   True if the item is an instance of Element\n *\n * @throws {TypeError}\n */\nfunction checkElement(itemToCheck) {\n  if (!(itemToCheck instanceof Element)) {\n    throw new TypeError('The element must be an instance of Element');\n  }\n  return true;\n}\n\n/**\n * Process arguments, query the DOM if necessary.\n *\n * @private\n *\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   An element or document object to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   An array with the processed Id and the list of elements to process.\n */\nfunction getElements(selector, context = doc) {\n  // Assume selector is an array-like value.\n  let elements = selector;\n\n  // If selector is null it is most likely because of a call to querySelector\n  // that didn't return a result.\n  if (selector === null) {\n    elements = [];\n  }\n  // The selector is undefined, error out.\n  else if (!selector) {\n    throw new TypeError('Selector must not be empty');\n  }\n  // Context doesn't implement querySelectorAll, error out.\n  else if (\n    !(\n      context instanceof Document ||\n      context instanceof DocumentFragment ||\n      context instanceof Element\n    )\n  ) {\n    throw new TypeError(\n      'Context must be an object of type \"Document\", \"DocumentFragment\", or \"Element\".',\n    );\n  }\n  // This is a selector, query the elements.\n  else if (typeof selector === 'string') {\n    elements = context.querySelectorAll(selector);\n  }\n  // This is a single element.\n  else if (selector instanceof Element) {\n    elements = [selector];\n  }\n\n  // Make sure an array is returned and not a NodeList or an Array-like object.\n  return Array.prototype.slice.call(elements);\n}\n\n/**\n * A helper for applying DOM changes to a filtered set of elements.\n *\n * This makes it possible to filter items that are not instances of Element,\n * then modify their DOM attributes in a single array traversal.\n *\n * @private\n *\n * @param {string} selector\n *   A CSS selector to check against to each element in the array.\n * @param {Array.<Element>} elements\n *   A NodeList or array of elements passed by a call to a once() function.\n * @param {function} [apply]\n *   An optional function to apply on all matched elements.\n *\n * @return {Array.<Element>}\n *   The array of elements that match the CSS selector.\n */\nfunction filterAndModify(selector, elements, apply) {\n  return elements.filter((element) => {\n    const selected = checkElement(element) && element.matches(selector);\n    if (selected && apply) {\n      apply(element);\n    }\n    return selected;\n  });\n}\n\n/**\n * Add or remove an item from a list of once values.\n *\n * This function removes duplicates while adding or removing a once id in a\n * single array traversal.\n *\n * @private\n *\n * @param {Element} element\n *   A space separated string of once ids from a data-drupal-once attribute.\n * @param {string} [add]\n *   The once id to add to the list of values.\n * @param {string} [remove]\n *   The once id to remove from the list of values.\n *\n * @return {undefined}\n *   Nothing to return this is a callback in a foreach.\n */\nfunction updateAttribute(element, { add, remove }) {\n  const result = [];\n  if (attr(element, 'has')) {\n    attr(element, 'get')\n      .trim()\n      .split(wsRE)\n      .forEach((item) => {\n        if (result.indexOf(item) < 0 && item !== remove) {\n          result.push(item);\n        }\n      });\n  }\n  if (add) {\n    result.push(add);\n  }\n  const attribute = result.join(' ');\n  attr(element, attribute === '' ? 'remove' : 'set', attribute);\n}\n\n/**\n * Ensures a JavaScript callback is only executed once on a set of elements.\n *\n * Filters a NodeList or array of elements, removing those already processed\n * by a callback with a given id.\n * This method adds a `data-once` attribute on DOM elements. The value of\n * this attribute identifies if a given callback has been executed on that\n * element.\n *\n * @global\n *\n * @example <caption>Basic usage</caption>\n * const elements = once('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once('my-once-id', document.querySelector('#some-id'));\n * @example <caption>Using a single element</caption>\n * // Once always returns an array, even when passing a single element. Some\n * // forms that can be used to keep code readable.\n * // Destructuring:\n * const [myElement] = once('my-once-id', document.body);\n * // By changing the resulting array, es5 compatible.\n * const myElement = once('my-once-id', document.body).shift();\n *\n * @param {string} id\n *   The id of the once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   An element or document object to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   An array of elements that have not yet been processed by a once call\n *   with a given id.\n */\nfunction once(id, selector, context) {\n  return filterAndModify(\n    `:not(${attrSelector(id)})`,\n    getElements(selector, context),\n    (element) => updateAttribute(element, { add: id }),\n  );\n}\n\n/**\n * Removes a once id from an element's data-drupal-once attribute value.\n *\n * If a once id is removed from an element's data-drupal-once attribute value,\n * the JavaScript callback associated with that id can be executed on that\n * element again.\n *\n * @method once.remove\n *\n * @example <caption>Basic usage</caption>\n * const elements = once.remove('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once.remove('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once.remove('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once.remove('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once.remove('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once.remove('my-once-id', document.querySelector('#some-id'));\n *\n * @param {string} id\n *   The id of a once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements to remove the once id from.\n * @param {Document|Element} [context=document]\n *   An element to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that had been processed by the provided id,\n *   and are now able to be processed again.\n */\nonce.remove = (id, selector, context) => {\n  return filterAndModify(\n    attrSelector(id),\n    getElements(selector, context),\n    (element) => updateAttribute(element, { remove: id }),\n  );\n};\n\n/**\n * Finds elements that have been processed by a given once id.\n *\n * Behaves like {@link once} and {@link once.remove} without changing the DOM.\n * To select all DOM nodes processed by a given id, use {@link once.find}.\n *\n * @method once.filter\n *\n * @example <caption>Basic usage</caption>\n * const filteredElements = once.filter('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once.filter('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once.filter('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once.filter('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once.filter('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once.filter('my-once-id', document.querySelector('#some-id'));\n *\n * @param {string} id\n *   The id of the once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements to remove the once id from.\n * @param {Document|Element} [context=document]\n *   An element to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that have already been processed by the\n *   provided once id.\n */\nonce.filter = (id, selector, context) =>\n  filterAndModify(attrSelector(id), getElements(selector, context));\n\n/**\n * Finds elements that have been processed by a given once id.\n *\n * Query the 'context' element for elements that already have the\n * corresponding once id value.\n *\n * @method once.find\n *\n * @example <caption>Basic usage</caption>\n * const oncedElements = once.find('my-once-id');\n * @example <caption>Input parameters accepted</caption>\n * // Call without parameters, return all elements with a `data-once` attribute.\n * once.find();\n * // Call without a context.\n * once.find('my-once-id');\n * // Call with a context.\n * once.find('my-once-id', document.head);\n *\n * @param {string} [id]\n *   The id of the once call.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   Scope of the search for matching elements.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that have already been processed by the\n *   provided once id.\n */\nonce.find = (id, context) =>\n  getElements(!id ? `[${attrName}]` : attrSelector(id), context);\n\nexport default once;\n","import storage from \"../storage.js\";\nimport once from \"@drupal/once\";\n\nconst generate = (\n  options = {},\n  context = document,\n  navigationSelector = \".navigation\"\n) => {\n  once(\"graupl-navigation-generator\", navigationSelector, context).forEach(\n    (navigationElement) => {\n      const MenuConstructor =\n        navigationElement.dataset.grauplMenuType || DisclosureMenu;\n\n      if (window[MenuConstructor] === undefined) {\n        console.warn(\n          `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`\n        );\n\n        return;\n      }\n\n      const menuOptions = navigationElement.dataset.grauplMenuOptions\n        ? JSON.parse(\n            navigationElement.dataset.grauplMenuOptions.replace(/'/g, '\"')\n          ) || {}\n        : {};\n      const menuElement = navigationElement.querySelector(\".menu\");\n      const controllerElement =\n        navigationElement.querySelector(\".navigation-toggle\") || null;\n      const containerElement = controllerElement ? navigationElement : null;\n      const menu = new window[MenuConstructor]({\n        menuElement,\n        menuItemSelector: \".menu-item\",\n        menuLinkSelector: \".menu-link\",\n        submenuItemSelector: \".submenu-item\",\n        submenuToggleSelector: \".submenu-toggle\",\n        controllerElement,\n        containerElement,\n        ...options,\n        ...menuOptions,\n      });\n\n      storage.initializeStorage(\"menus\");\n      storage.pushToStorage(\"menus\", menu.dom.menu.id, menu);\n    }\n  );\n};\n\nexport default generate;\n","import generate from \"./generator.js\";\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  generate();\n});\n"],"x_google_ignoreList":[2],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/core",
-  "version": "1.0.0-beta.19",
+  "version": "1.0.0-beta.21",
   "description": "The core module of Graupl, providing essential styles and utilities.",
   "main": "dist/js/graupl.cjs.js",
   "module": "dist/js/graupl.es.js",

package/scss/component/badge.scss

@@ -0,0 +1,3 @@
+// @graupl/core badge component.
+
+@forward "../../src/scss/component/badge";

package/scss/component/disclosure.scss

@@ -0,0 +1,3 @@
+// @graupl/core disclosure component.
+
+@forward "../../src/scss/component/disclosure";

package/src/js/TransactionalValue.js

@@ -0,0 +1,140 @@
+/**
+ * A utility class that maintains a "current" value and a "committed" value.
+ *
+ * Useful when you need to:
+ * - Track in-progress edits and revert to the last saved state.
+ * - Compare pending and committed states.
+ * - Know if a value has changed since last commit.
+ *
+ * @example
+ * // Managing a form field
+ * const username = new TransactionalValue("Nick");
+ * username.value = "NickDJM";
+ * if (username.isDirty) {
+ *   console.log("Unsaved changes detected");
+ *   username.commit(); // saves the new value
+ * }
+ *
+ * @example
+ * // Reverting edits
+ * const counter = new TransactionalValue(10);
+ * counter.value = 15;
+ * counter.reset(); // reverts to 10
+ */
+export class TransactionalValue {
+  /**
+   * Creates a new TransactionalValue instance.
+   *
+   * @param {*} initialValue - The starting (and initially committed) value.
+   * @param {{ equals?: function(*, *): boolean }} [options] - Optional config.
+   * @param {function(*, *): boolean} [options.equals] - Custom equality comparator. Defaults to `Object.is`.
+   */
+  constructor(initialValue, options = {}) {
+    /**
+     * A comparator function used to check equality between
+     * the current and committed values.
+     *
+     * @private
+     *
+     * @type {function(*, *): boolean}
+     */
+    this._equals = options.equals || Object.is;
+
+    /**
+     * The current, editable value.
+     *
+     * @private
+     *
+     * @type {*}
+     */
+    this._current = initialValue;
+
+    /**
+     * The last committed (baseline) value.
+     *
+     * @private
+     *
+     * @type {*}
+     */
+    this._committed = initialValue;
+  }
+
+  /**
+   * Gets the current editable value.
+   *
+   * @return {*} The current value.
+   *
+   * @see _current
+   */
+  get value() {
+    return this._current;
+  }
+
+  /**
+   * Sets the current editable value.
+   *
+   * @param {*} val - The new value.
+   */
+  set value(val) {
+    this._current = val;
+  }
+
+  /**
+   * Gets the last committed (baseline) value.
+   *
+   * @readonly
+   *
+   * @return {*} The last committed value.
+   *
+   * @see _committed
+   */
+  get committed() {
+    return this._committed;
+  }
+
+  /**
+   * Checks whether the current value differs from the committed one.
+   *
+   * @readonly
+   *
+   * @return {boolean} `true` if current and committed values differ.
+   */
+  get isDirty() {
+    return !this._equals(this._current, this._committed);
+  }
+
+  /**
+   * Commits the current value, setting it as the new baseline.
+   *
+   * @return {TransactionalValue} The current instance.
+   */
+  commit() {
+    this._committed = this._current;
+    return this;
+  }
+
+  /**
+   * Resets the current value to the committed baseline.
+   *
+   * @return {TransactionalValue} The current instance.
+   */
+  reset() {
+    this._current = this._committed;
+    return this;
+  }
+
+  /**
+   * Applies a functional update to the current value.
+   *
+   * @param {function(*): *} fn - A function that receives the previous value and returns the new one.
+   * @return {TransactionalValue} The current instance.
+   *
+   * @example
+   * const t = new TransactionalValue(1);
+   * t.update(n => n + 1); // 2
+   */
+  update(fn) {
+    this._current = fn(this._current);
+    return this;
+  }
+}

package/src/js/accordion/Accordion.js

@@ -658,7 +658,7 @@ class Accordion {
     if (typeof this.selectors[elementType] === "string") {
       if (this._domLock.includes(elementType)) {
         throw new Error(
-          `Graupl ${this.contructor.name}: "${elementType}" element cannot be set through _setDOMElementType.`
+          `Graupl ${this.constructor.name}: "${elementType}" element cannot be set through _setDOMElementType.`
         );
       }
 
@@ -684,7 +684,7 @@ class Accordion {
       }
     } else {
       throw new Error(
-        `Graupl ${this.contructor.name}: "${elementType}" is not a valid element type.`
+        `Graupl ${this.constructor.name}: "${elementType}" is not a valid element type.`
       );
     }
   }
@@ -702,7 +702,7 @@ class Accordion {
     if (typeof this.selectors[elementType] === "string") {
       if (this._domLock.includes(elementType)) {
         throw new Error(
-          `Graupl ${this.contructor.name}: "${elementType}" element cannot be reset through _resetDOMElementType.`
+          `Graupl ${this.constructor.name}: "${elementType}" element cannot be reset through _resetDOMElementType.`
         );
       }
 
@@ -713,7 +713,7 @@ class Accordion {
       }
     } else {
       throw new Error(
-        `Graupl ${this.contructor.name}: "${elementType}" is not a valid element type.`
+        `Graupl ${this.constructor.name}: "${elementType}" is not a valid element type.`
       );
     }
   }

package/src/js/carousel/Carousel.js

@@ -220,7 +220,7 @@ class Carousel {
   _errors = [];
 
   /**
-   * Contructs a new `Carousel`.
+   * Constructs a new `Carousel`.
    *
    * @param {object}             options                                                                  - The options for the generated carousel.
    * @param {HTMLElement}        options.carouselElement                                                  - The carousel element in the DOM.