@graupl/core 1.0.0-beta.15 → 1.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/core",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.9",
   "description": "The core module of Graupl, providing essential styles and utilities.",
   "main": "dist/js/graupl.cjs.js",
   "module": "dist/js/graupl.es.js",
@@ -22,36 +22,14 @@
     "./src/*.scss": {
       "sass": "./src/scss/*.scss"
     },
-    "./src/*.js": {
-      "import": "./src/js/*.js"
-    },
     "./accordion": {
-      "import": "./dist/js/component/accordion.es.js",
-      "require": "./dist/js/component/accordion.cjs.js"
-    },
-    "./accordion/generator": {
-      "import": "./dist/js/generator/accordion.es.js",
-      "require": "./dist/js/generator/accordion.cjs.js"
+      "import": "./src/js/Accordion.js"
     },
     "./alert": {
-      "import": "./dist/js/component/alert.es.js",
-      "require": "./dist/js/component/alert.cjs.js"
-    },
-    "./alert/generator": {
-      "import": "./dist/js/generator/alert.es.js",
-      "require": "./dist/js/generator/alert.cjs.js"
+      "import": "./src/js/Alert.js"
     },
     "./carousel": {
-      "import": "./dist/js/component/carousel.es.js",
-      "require": "./dist/js/component/carousel.cjs.js"
-    },
-    "./carousel/generator": {
-      "import": "./dist/js/generator/carousel.es.js",
-      "require": "./dist/js/generator/carousel.cjs.js"
-    },
-    "./navigation/generator": {
-      "import": "./dist/js/generator/navigation.es.js",
-      "require": "./dist/js/generator/navigation.cjs.js"
+      "import": "./src/js/Carousel.js"
     }
   },
   "repository": {
@@ -74,14 +52,7 @@
   },
   "license": "ISC",
   "homepage": "https://github.com/Graupl/graupl/tree/main/packages/core#readme",
-  "scripts": {
-    "presass": "rm -rf dist/css/*",
-    "sass": "sass scss:dist/css --pkg-importer=node",
-    "postcss": "postcss 'dist/css/**/*.css' --replace --config ./postcss.config.cjs",
-    "prerolldown": "rm -rf dist/js/*",
-    "rolldown": "rolldown --config ./rolldown.config.js",
-    "build": "npm-run-all build:*",
-    "build:css": "npm run sass && npm run postcss",
-    "build:js": "npm run rolldown"
+  "devDependencies": {
+    "sass": "^1.89.2"
   }
 }

package/src/js/accordion/Accordion.js

@@ -234,7 +234,7 @@ class Accordion {
     optionalKeySupport = false,
     allowMultipleExpand = true,
     allowNoExpand = true,
-    prefix = "graupl-",
+    prefix = "am-",
     key = null,
     initialize = false,
   }) {

package/src/js/accordion/index.js

@@ -1,5 +1,10 @@
-import generate from "./generator.js";
+import Accordion from "./Accordion.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  generate();
+  document.querySelectorAll(".accordion").forEach((accordionElement) => {
+    new Accordion({
+      accordionElement,
+      initialize: true,
+    });
+  });
 });

package/src/js/alert/index.js

@@ -1,5 +1,11 @@
-import generate from "./generator.js";
+import Alert from "./Alert.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  generate();
+  document.querySelectorAll(".alert").forEach((alertElement) => {
+    new Alert({
+      alertElement,
+      controllerElement: alertElement.querySelector(".alert-dismisser") || null,
+      initialize: true,
+    });
+  });
 });

package/src/js/carousel/index.js

@@ -1,5 +1,10 @@
-import generate from "./generator.js";
+import Carousel from "./Carousel.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  generate();
+  document.querySelectorAll(".carousel").forEach((carouselElement) => {
+    new Carousel({
+      carouselElement,
+      initialize: true,
+    });
+  });
 });

package/src/js/domHelpers.js

@@ -35,79 +35,3 @@ export function removeClass(className, element) {
     element.classList.remove(...className);
   }
 }
-
-/**
- * Select all focusable elements within a given context.
- *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement[]} - An array of focusable elements.
- */
-export function selectAllFocusableElements(context = document) {
-  const querySelector =
-    "a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),[tabindex]";
-  const elements = Array.from(context.querySelectorAll(querySelector));
-
-  const tabbableElements = elements.filter((element) => {
-    let check = true;
-
-    if (element.getAttribute("tabindex") === "-1") check = false;
-
-    return check;
-  });
-
-  return tabbableElements;
-}
-
-/**
- * Select the first focusable element within a given context.
- *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The first focusable element or false if none found.
- */
-export function selectFirstFocusableElement(context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
-
-  return tabbableElements[0] || false;
-}
-
-/**
- * Select the last focusable element within a given context.
- *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The last focusable element or false if none found.
- */
-export function selectLastFocusableElement(context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
-
-  return tabbableElements[tabbableElements.length - 1] || false;
-}
-
-/**
- * Select the next focusable element relative to the given element within a context.
- *
- * @param {HTMLElement} element - The reference element.
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The next focusable element or false if none found.
- */
-export function selectNextFocusableElement(element, context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
-  const index = tabbableElements.indexOf(element);
-
-  return index === tabbableElements.length - 1
-    ? false
-    : tabbableElements[index + 1];
-}
-
-/**
- * Select the previous focusable element relative to the given element within a context.
- *
- * @param {HTMLElement} element - The reference element.
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The previous focusable element or false if none found.
- */
-export function selectPreviousFocusableElement(element, context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
-  const index = tabbableElements.indexOf(element);
-
-  return index === 0 ? false : tabbableElements[index - 1];
-}

package/src/js/navigation/index.js

@@ -1,5 +1,36 @@
-import generate from "./generator.js";
+import storage from "../storage.js";
 
 document.addEventListener("DOMContentLoaded", function () {
-  generate();
+  const navs = document.querySelectorAll(".navigation");
+
+  navs.forEach((nav) => {
+    const MenuConstructor = nav.dataset.grauplMenuType || DisclosureMenu;
+
+    if (window[MenuConstructor] === undefined) {
+      console.warn(
+        `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`
+      );
+
+      return;
+    }
+
+    const menuOptions =
+      JSON.parse(nav.dataset.grauplMenuOptions.replace(/'/g, '"')) || {};
+    const menuElement = nav.querySelector(".menu");
+    const controllerElement = nav.querySelector(".navigation-toggle") || null;
+    const containerElement = controllerElement ? nav : null;
+    const menu = new window[MenuConstructor]({
+      menuElement,
+      menuItemSelector: ".menu-item",
+      menuLinkSelector: ".menu-link",
+      submenuItemSelector: ".submenu-item",
+      submenuToggleSelector: ".submenu-toggle",
+      controllerElement,
+      containerElement,
+      ...menuOptions,
+    });
+
+    storage.initializeStorage("menus");
+    storage.pushToStorage("menus", menu.dom.menu.id, menu);
+  });
 });

package/src/js/validate.js

@@ -194,53 +194,6 @@ export function isValidClassList(values) {
   }
 }
 
-/**
- * Check to see if the provided values are valid hover types.
- *
- * Available types are: `"off"`, `"on"`, and `"dynamic"`.
- *
- * The values must be provided inside of an object
- * so the variable name can be retrieved in case of errors.
- *
- * Will return `{ status: true }` if the check is successful.
- *
- * @param  {Object<string>}          values - The value(s) to check.
- * @return {Object<boolean, string>}        - The result of the check.
- */
-export function isValidHoverType(values) {
-  try {
-    if (typeof values !== "object") {
-      const type = typeof values;
-
-      throw new TypeError(
-        `Values given to isValidHoverType() must be inside of an object. "${type}" given.`
-      );
-    }
-
-    const validTypes = ["off", "on", "dynamic"];
-
-    for (const key in values) {
-      if (!validTypes.includes(values[key])) {
-        throw new TypeError(
-          `${key} must be one of the following values: ${validTypes.join(
-            ", "
-          )}. "${values[key]}" given.`
-        );
-      }
-    }
-
-    return {
-      status: true,
-      error: null,
-    };
-  } catch (error) {
-    return {
-      status: false,
-      error,
-    };
-  }
-}
-
 /**
  * Checks to see if the provided elements are using a specific tag.
  *
@@ -270,97 +223,3 @@ export function isTag(tagName, elements) {
     return false;
   }
 }
-
-/**
- * Check to see if the provided values are valid focus states for a menu.
- *
- * Available states are: `"none"`, `"self"`, and `"child"`.
- *
- * The values must be provided inside of an object
- * so the variable name can be retrieved in case of errors.
- *
- * Will return `{ status: true }` if the check is successful.
- *
- * @param  {Object<string>}          values - The value(s) to check.
- * @return {Object<boolean, string>}        - The result of the check.
- */
-export function isValidState(values) {
-  try {
-    if (typeof values !== "object") {
-      const type = typeof values;
-
-      throw new TypeError(
-        `Values given to isValidState() must be inside of an object. "${type}" given.`
-      );
-    }
-
-    const validStates = ["none", "self", "child"];
-
-    for (const key in values) {
-      if (!validStates.includes(values[key])) {
-        throw new TypeError(
-          `${key} must be one of the following values: ${validStates.join(
-            ", "
-          )}. "${values[key]}" given.`
-        );
-      }
-    }
-
-    return {
-      status: true,
-      error: null,
-    };
-  } catch (error) {
-    return {
-      status: false,
-      error,
-    };
-  }
-}
-
-/**
- * Check to see if the provided values are valid event types for a menu.
- *
- * Available events are: `"none"`, `"mouse"`, `"keyboard"`, and `"character"`.
- *
- * The values must be provided inside of an object
- * so the variable name can be retrieved in case of errors.
- *
- * Will return `{ status: true }` if the check is successful.
- *
- * @param  {Object<string>}          values - The value(s) to check.
- * @return {Object<boolean, string>}        - The result of the check.
- */
-export function isValidEvent(values) {
-  try {
-    if (typeof values !== "object") {
-      const type = typeof values;
-
-      throw new TypeError(
-        `Values given to isValidEvent() must be inside of an object. "${type}" given.`
-      );
-    }
-
-    const validEvents = ["none", "mouse", "keyboard", "character"];
-
-    for (const key in values) {
-      if (!validEvents.includes(values[key])) {
-        throw new TypeError(
-          `${key} must be one of the following values: ${validEvents.join(
-            ", "
-          )}. "${values[key]}" given.`
-        );
-      }
-    }
-
-    return {
-      status: true,
-      error: null,
-    };
-  } catch (error) {
-    return {
-      status: false,
-      error,
-    };
-  }
-}

package/README.md

@@ -1,3 +0,0 @@
-# @graupl/core
-
-The core module of Graupl, providing essential styles and utilities.

package/dist/js/accordion.js

@@ -1,5 +0,0 @@
-(function(){function _(t,e){try{if(typeof e!="object"){const o=typeof e;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${o}" given.`)}for(const o in e)if(!(e[o]instanceof t)){const i=typeof e[o];throw new TypeError(`${o} must be an instance of ${t.name}. "${i}" given.`)}return{status:!0,error:null}}catch(o){return{status:!1,error:o}}}function r(t,e){try{if(typeof e!="object"){const o=typeof e;throw new TypeError(`Values given to isValidType() must be inside of an object. "${o}" given.`)}for(const o in e){const i=typeof e[o];if(i!==t)throw new TypeError(`${o} must be a ${t}. "${i}" given.`)}return{status:!0,error:null}}catch(o){return{status:!1,error:o}}}function E(t){try{if(typeof t!="object"){const e=typeof t;throw new TypeError(`Values given to isQuerySelector() must be inside of an object. "${e}" given.`)}for(const e in t)try{if(t[e]===null)throw new Error;document.querySelector(t[e])}catch{throw new TypeError(`${e} must be a valid query selector. "${t[e]}" given.`)}return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function l(t){try{if(typeof t!="object"||Array.isArray(t)){const e=typeof t;throw new TypeError(`Values given to isValidClassList() must be inside of an object. "${e}" given.`)}for(const e in t){const o=typeof t[e];if(o!=="string")if(Array.isArray(t[e]))t[e].forEach(i=>{if(typeof i!="string")throw new TypeError(`${e} must be a string or an array of strings. An array containing non-strings given.`)});else throw new TypeError(`${e} must be a string or an array of strings. "${o}" given.`);else{const i={};i[e]=t[e],E(i)}}return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function b(t,e){if(r("string",{tagName:t}).status&&_(HTMLElement,e).status){const o=t.toLowerCase();let i=!0;for(const s in e)e[s].tagName.toLowerCase()!==o&&(i=!1);return i}else return!1}function h(t,e){t===""||t.length===0||(typeof t=="string"?e.classList.add(t):e.classList.add(...t))}function d(t,e){t===""||t.length===0||(typeof t=="string"?e.classList.remove(t):e.classList.remove(...t))}var $=class{_dom={item:null,toggle:null,header:null,content:null};_elements={parentAccordion:null};_open=!1;_locked=!1;_expandEvent=new CustomEvent("grauplAccordionItemExpand",{bubbles:!0,detail:{item:this}});_collapseEvent=new CustomEvent("grauplAccordionItemCollapse",{bubbles:!0,detail:{item:this}});constructor({accordionItemElement:t,accordionItemToggleElement:e,accordionItemHeaderElement:o,accordionItemContentElement:i,parentAccordion:s=null}){this._dom.item=t,this._dom.toggle=e,this._dom.header=o,this._dom.content=i,this._elements.parentAccordion=s}initialize(){this._setIds(),this._setAriaAttributes(),this.dom.toggle.getAttribute("aria-expanded")==="true"?this.show(!1,!1):this.hide(!1,!1)}get dom(){return this._dom}get elements(){return this._elements}get isOpen(){return this._open}get isLocked(){return this._locked}set isOpen(t){r("boolean",{value:t}),this._open!==t&&(this._open=t)}_setIds(){const{key:t}=this.elements.parentAccordion,e=this.elements.parentAccordion.dom.accordionItems.indexOf(this.dom.item);this.dom.item.id=this.dom.item.id||`accordion-item-${t}-${e}`,this.dom.toggle.id=this.dom.toggle.id||`accordion-item-toggle-${t}-${e}`,this.dom.header.id=this.dom.header.id||`accordion-item-header-${t}-${e}`,this.dom.content.id=this.dom.content.id||`accordion-item-content-${t}-${e}`}_setAriaAttributes(){b("button",{toggle:this.dom.toggle})||this.dom.toggle.setAttribute("role","button"),this.dom.toggle.getAttribute("aria-expanded")!=="true"&&this.dom.toggle.setAttribute("aria-expanded","false"),this.dom.toggle.setAttribute("aria-controls",this.dom.content.id),b("section",{content:this.dom.content})||this.dom.content.setAttribute("role","region"),this.dom.content.setAttribute("aria-labelledby",this.dom.toggle.id)}show(t=!0,e=!0){if(this._open)return;const{closeClass:o,openClass:i,transitionClass:s,openDuration:n}=this.elements.parentAccordion;this.dom.toggle.setAttribute("aria-expanded","true"),e&&s!==""?(h(s,this.dom.item),requestAnimationFrame(()=>{d(o,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{h(i,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height+this.dom.content.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{setTimeout(()=>{d(s,this.dom.item),this.dom.item.style.height=""},n)})})})):(h(i,this.dom.item),d(o,this.dom.item)),this._open=!0,this.elements.parentAccordion.allowMultipleExpand||(this.unlockSiblings(),this.closeSiblings()),this.elements.parentAccordion.allowNoExpand||(this.elements.parentAccordion.openAccordionItems.length<=1?this.lock():this.unlockSiblings()),t&&this.dom.item.dispatchEvent(this._expandEvent)}hide(t=!0,e=!0){if(!this._open||!this.elements.parentAccordion.allowNoExpand&&this.elements.parentAccordion.openAccordionItems.length<=1)return;const{closeClass:o,openClass:i,transitionClass:s,closeDuration:n}=this.elements.parentAccordion;this.dom.toggle.setAttribute("aria-expanded","false"),e&&s!==""?(h(s,this.dom.item),this.dom.item.style.height=`${this.dom.item.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{d(i,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{h(o,this.dom.item),requestAnimationFrame(()=>{setTimeout(()=>{d(s,this.dom.item),this.dom.item.style.height=""},n)})})})):(h(o,this.dom.item),d(i,this.dom.item)),this._open=!1,!this.elements.parentAccordion.allowNoExpand&&this.elements.parentAccordion.openAccordionItems.length===1&&this.elements.parentAccordion.openAccordionItems[0].lock(),t&&this.dom.item.dispatchEvent(this._collapseEvent)}toggle(){this.isOpen?this.hide():this.show()}focus(){this.dom.toggle.focus()}blur(){this.dom.toggle.blur()}lock(){this._locked=!0,this.dom.toggle.setAttribute("disabled","true")}unlock(){this._locked=!1,this.dom.toggle.removeAttribute("disabled")}closeSiblings(){this.elements.parentAccordion&&this.elements.parentAccordion.elements.accordionItems.forEach(t=>{t!==this&&t.hide()})}unlockSiblings(){this.elements.parentAccordion&&this.elements.parentAccordion.elements.accordionItems.forEach(t=>{t!==this&&t.unlock()})}},A=$;function I(t){try{const e=t.key||t.keyCode,o={Enter:e==="Enter"||e===13,Space:e===" "||e==="Spacebar"||e===32,Escape:e==="Escape"||e==="Esc"||e===27,ArrowUp:e==="ArrowUp"||e==="Up"||e===38,ArrowRight:e==="ArrowRight"||e==="Right"||e===39,ArrowDown:e==="ArrowDown"||e==="Down"||e===40,ArrowLeft:e==="ArrowLeft"||e==="Left"||e===37,Home:e==="Home"||e===36,End:e==="End"||e===35,Tab:e==="Tab"||e===9};return Object.keys(o).find(i=>o[i]===!0)||""}catch{return""}}function c(t){t.preventDefault(),t.stopPropagation()}function T(t=null){window.Graupl=window.Graupl||{},r("string",{type:t})&&(window.Graupl[t]=window.Graupl[t]||{})}function S(t=null){return r("string",{type:t})?window.Graupl[t]:window.Graupl}function M(t,e={}){r("string",{type:t})&&r("object",{data:e})&&(window.Graupl[t]=e)}function L(t){r("string",{type:t})&&(window.Graupl[t]={})}function O(t,e,o){r("string",{type:t,key:e})&&(window.Graupl[t][e]=o)}function K(t,e){return r("string",{type:t,key:e})?window.Graupl[t][e]:null}function G(t,e){r("string",{type:t,key:e})&&delete window.Graupl[t][e]}var D={initializeStorage:T,getStorage:S,setStorage:M,clearStorage:L,pushToStorage:O,getFromStorage:K,removeFromStorage:G},j=class{_dom={accordion:null,accordionItems:[],accordionItemToggles:[],accordionItemHeaders:[],accordionItemContents:[]};_domLock=["accordion"];_selectors={accordionItems:"",accordionItemToggles:"",accordionItemHeaders:"",accordionItemContents:""};_elements={accordionItems:[]};_openClass="show";_closeClass="hide";_transitionClass="transitioning";_transitionDuration=300;_openDuration=-1;_closeDuration=-1;_optionalKeySupport=!0;_allowMultipleExpand=!0;_allowNoExpand=!0;_currentChild=0;_prefix="graupl-";_key="";_errors=[];constructor({accordionElement:t,accordionItemSelector:e=".accordion-item",accordionItemToggleSelector:o=".accordion-item-toggle",accordionItemHeaderSelector:i=".accordion-item-header",accordionItemContentSelector:s=".accordion-item-content",openClass:n="show",closeClass:u="hide",transitionClass:g="transitioning",transitionDuration:a=300,openDuration:V=-1,closeDuration:N=-1,optionalKeySupport:P=!1,allowMultipleExpand:B=!0,allowNoExpand:U=!0,prefix:v="graupl-",key:Q=null,initialize:J=!1}){this._dom.accordion=t,this._selectors.accordionItems=e,this._selectors.accordionItemToggles=o,this._selectors.accordionItemHeaders=i,this._selectors.accordionItemContents=s,this._openClass=n||"",this._closeClass=u||"",this._transitionClass=g||"",this._transitionDuration=a,this._openDuration=V,this._closeDuration=N,this._optionalKeySupport=P,this._allowMultipleExpand=B,this._allowNoExpand=U,this._prefix=v||"",this._key=Q||"",J&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Accordion: cannot initialize accordion. The following errors have been found:
- - ${this.errors.join(`
- - `)}`);this._generateKey(),this._setDOMElements(),this._setIds(),this._createChildElements(),this._handleFocus(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),this._setTransitionDurations(),D.initializeStorage("accordions"),D.pushToStorage("accordions",this.dom.accordion.id,this)}catch(t){console.error(t)}}get openClass(){return this._openClass}get closeClass(){return this._closeClass}get transitionClass(){return this._transitionClass}get transitionDuration(){return this._transitionDuration}get openDuration(){return this._openDuration===-1?this.transitionDuration:this._openDuration}get closeDuration(){return this._closeDuration===-1?this.transitionDuration:this._closeDuration}get currentChild(){return this._currentChild}get dom(){return this._dom}get elements(){return this._elements}get selectors(){return this._selectors}get optionalKeySupport(){return this._optionalKeySupport}get currentAccordionItem(){return this.elements.accordionItems[this.currentChild]}get openAccordionItems(){return this.elements.accordionItems.filter(t=>t.isOpen)}get allowMultipleExpand(){return this._allowMultipleExpand}get allowNoExpand(){return this._allowNoExpand}get prefix(){return this._prefix}get key(){return this._key}get errors(){return this._errors}set openClass(t){l({openClass:t}),this._openClass!==t&&(this._openClass=t)}set closeClass(t){l({closeClass:t}),this._closeClass!==t&&(this._closeClass=t)}set transitionClass(t){l({transitionClass:t}),this._transitionClass!==t&&(this._transitionClass=t)}set transitionDuration(t){r("number",{value:t}),this._transitionDuration!==t&&(this._transitionDuration=t,this._setTransitionDurations())}set openDuration(t){r("number",{value:t}),this._openDuration!==t&&(this._openDuration=t,this._setTransitionDurations())}set closeDuration(t){r("number",{value:t}),this._closeDuration!==t&&(this._closeDuration=t,this._setTransitionDurations())}set currentChild(t){r("number",{value:t}),this._currentChild!==t&&t>=0&&t<this.elements.accordionItems.length&&(this._currentChild=t)}set accordionItems(t){r("object",{value:t}),t?.isArray()&&t.every(e=>e instanceof A)&&(this._accordionItems=t)}set allowMultipleExpand(t){r("boolean",{value:t}),this._allowMultipleExpand!==t&&(this._allowMultipleExpand=t)}set allowNoExpand(t){r("boolean",{value:t}),this._allowNoExpand!==t&&(this._allowNoExpand=t)}set prefix(t){r("string",{value:t}),this._prefix!==t&&(this._prefix=t)}set key(t){r("string",{value:t}),this._key!==t&&(this._key=t)}_setDOMElementType(t,e=this.dom.accordion,o=!0,i=!1){if(typeof this.selectors[t]=="string"){if(this._domLock.includes(t))throw new Error(`Graupl ${this.contructor.name}: "${t}" element cannot be set through _setDOMElementType.`);e!==this.dom.accordion&&_(HTMLElement,{base:e});const n=Array.from(e.querySelectorAll(this.selectors[t])).filter(u=>i?u.parentElement===e:!0);o?this._dom[t]=n:this._dom[t]=[...this._dom[t],...n]}else throw new Error(`Graupl ${this.contructor.name}: "${t}" is not a valid element type.`)}_resetDOMElementType(t){if(typeof this.selectors[t]=="string"){if(this._domLock.includes(t))throw new Error(`Graupl ${this.contructor.name}: "${t}" element cannot be reset through _resetDOMElementType.`);Array.isArray(this._dom[t])?this._dom[t]=[]:this._dom[t]=null}else throw new Error(`Graupl ${this.contructor.name}: "${t}" is not a valid element type.`)}_setDOMElements(){this._setDOMElementType("accordionItems"),this._resetDOMElementType("accordionItemToggles"),this.dom.accordionItems.forEach(t=>{this._setDOMElementType("accordionItemToggles",t,!1),this._setDOMElementType("accordionItemHeaders",t,!1),this._setDOMElementType("accordionItemContents",t,!1)})}_generateKey(t=!1){(this.key===""||t)&&(this.key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.accordion.id=this.dom.accordion.id||`accordion-${this.key}`}_createChildElements(){this.dom.accordionItems.forEach((t,e)=>{const o=new A({accordionItemElement:t,accordionItemToggleElement:this.dom.accordionItemToggles[e],accordionItemHeaderElement:this.dom.accordionItemHeaders[e],accordionItemContentElement:this.dom.accordionItemContents[e],parentAccordion:this});o.initialize(),this.elements.accordionItems.push(o)})}_validate(){let t=!0;const e=_(HTMLElement,{accordionElement:this.dom.accordion});e||(this._errors.push(e.message),t=!1);const o=E({accordionItemSelector:this._selectors.accordionItems,accordionItemToggleSelector:this._selectors.accordionItemToggles,accordionItemHeaderSelector:this._selectors.accordionItemHeaders,accordionItemContentSelector:this._selectors.accordionItemContents});if(o||(this._errors.push(o.message),t=!1),this._openClass!==""){const a=l({openClass:this._openClass});a.status||(this._errors.push(a.error.message),t=!1)}if(this._closeClass!==""){const a=l({closeClass:this._closeClass});a.status||(this._errors.push(a.error.message),t=!1)}if(this._transitionClass!==""){const a=l({transitionClass:this._transitionClass});a.status||(this._errors.push(a.error.message),t=!1)}const i=r("number",{transitionDuration:this._transitionDuration});i.status||(this._errors.push(i.error.message),t=!1);const s=r("number",{openDuration:this._openDuration});s.status||(this._errors.push(s.error.message),t=!1);const n=r("number",{closeDuration:this._closeDuration});n.status||(this._errors.push(n.error.message),t=!1);const u=r("boolean",{optionalKeySupport:this._optionalKeySupport,allowMultipleExpand:this._allowMultipleExpand,allowNoExpand:this._allowNoExpand});if(u.status||(this._errors.push(u.error.message),t=!1),this._key!==""){const a=r("string",{key:this._key});a.status||(this._errors.push(a.error.message),t=!1)}const g=r("string",{prefix:this._prefix});return g.status||(this._errors.push(g.error.message),t=!1),t}_handleFocus(){this.elements.accordionItems.forEach((t,e)=>{t.dom.toggle.addEventListener("focus",()=>{this.currentChild=e})})}_handleClick(){this.elements.accordionItems.forEach((t,e)=>{t.dom.toggle.addEventListener("pointerup",()=>{this.currentChild=e,t.toggle()})})}_handleKeydown(){this.dom.accordionItemToggles.forEach(t=>{t.addEventListener("keydown",e=>{const o=I(e);(["Space","Enter"].includes(o)||this.optionalKeySupport&&["ArrowDown","ArrowUp","Home","End"].includes(o))&&c(e)})})}_handleKeyup(){this.dom.accordionItemToggles.forEach(t=>{t.addEventListener("keyup",e=>{const o=I(e);switch(o){case"Space":case"Enter":c(e),this.currentAccordionItem.toggle();break}if(this.optionalKeySupport)switch(o){case"Home":c(e),this.focusFirstChild();break;case"End":c(e),this.focusLastChild();break;case"ArrowDown":c(e),this.focusNextChild();break;case"ArrowUp":c(e),this.focusPreviousChild();break}})})}_setTransitionDurations(){this.dom.accordion.style.setProperty(`--${this.prefix}accordion-transition-duration`,`${this.transitionDuration}ms`),this.dom.accordion.style.setProperty(`--${this.prefix}accordion-open-transition-duration`,`${this.openDuration}ms`),this.dom.accordion.style.setProperty(`--${this.prefix}accordion-close-transition-duration`,`${this.closeDuration}ms`)}focusCurrentChild(){this.currentChild!==-1&&this.currentAccordionItem.focus()}focusChild(t){this.blurCurrentChild(),this.currentChild=t,this.focusCurrentChild()}focusFirstChild(){this.focusChild(0)}focusLastChild(){this.focusChild(this.elements.accordionItems.length-1)}focusNextChild(){this.currentChild<this.elements.accordionItems.length-1?this.focusChild(this.currentChild+1):this.focusCurrentChild()}focusPreviousChild(){this.currentChild>0?this.focusChild(this.currentChild-1):this.focusCurrentChild()}blurCurrentChild(){this.currentChild!==-1&&this.currentAccordionItem.blur()}openChildren(){this.elements.accordionItems.forEach(t=>t.show())}closeChildren(){this.elements.accordionItems.forEach(t=>t.hide())}},H=j;const k=/[\11\12\14\15\40]+/,C="data-once",F=document;function w(t,e,o){return t[`${e}Attribute`](C,o)}function m(t){if(typeof t!="string")throw new TypeError("once ID must be a string");if(t===""||k.test(t))throw new RangeError("once ID must not be empty or contain spaces");return`[${C}~="${t}"]`}function q(t){if(!(t instanceof Element))throw new TypeError("The element must be an instance of Element");return!0}function f(t,e=F){let o=t;if(t===null)o=[];else if(t)if(e instanceof Document||e instanceof DocumentFragment||e instanceof Element)typeof t=="string"?o=e.querySelectorAll(t):t instanceof Element&&(o=[t]);else throw new TypeError('Context must be an object of type "Document", "DocumentFragment", or "Element".');else throw new TypeError("Selector must not be empty");return Array.prototype.slice.call(o)}function y(t,e,o){return e.filter(i=>{const s=q(i)&&i.matches(t);return s&&o&&o(i),s})}function x(t,{add:e,remove:o}){const i=[];w(t,"has")&&w(t,"get").trim().split(k).forEach(n=>{i.indexOf(n)<0&&n!==o&&i.push(n)}),e&&i.push(e);const s=i.join(" ");w(t,s===""?"remove":"set",s)}function p(t,e,o){return y(`:not(${m(t)})`,f(e,o),i=>x(i,{add:t}))}p.remove=(t,e,o)=>y(m(t),f(e,o),i=>x(i,{remove:t})),p.filter=(t,e,o)=>y(m(t),f(e,o)),p.find=(t,e)=>f(t?m(t):`[${C}]`,e);var R=p,z=(t={},e=document,o=".accordion")=>{R("graupl-accordion-generator",o,e).forEach(i=>{const s=i.dataset.grauplAccordionOptions?JSON.parse(i.dataset.grauplAccordionOptions.replace(/'/g,'"'))||{}:{};new H({accordionElement:i,initialize:!0,...t,...s})})};document.addEventListener("DOMContentLoaded",()=>{z()})})();
-
-//# sourceMappingURL=accordion.js.map