@graupl/graupl 1.0.0-beta.25 → 1.0.0-beta.26

package/dist/js/generator/tabs.cjs.js

@@ -1,5 +1,5 @@
-function h(t,e){t===""||t.length===0||(typeof t=="string"?e.classList.add(t):e.classList.add(...t))}function c(t,e){t===""||t.length===0||(typeof t=="string"?e.classList.remove(t):e.classList.remove(...t))}var O=class{constructor(t,e={}){this._equals=e.equals||Object.is,this._current=t,this._committed=t}get value(){return this._current}set value(t){this._current=t}get committed(){return this._committed}get isDirty(){return!this._equals(this._current,this._committed)}commit(){return this._committed=this._current,this}reset(){return this._current=this._committed,this}update(t){return this._current=t(this._current),this}},x=class{_dom={toggle:null,content:null};_elements={parent:null};_active=new O(!1);_activateEvent=new CustomEvent("grauplTabToggleActivate",{bubbles:!0,detail:{item:this}});_deactivateEvent=new CustomEvent("grauplTabToggleDeactivate",{bubbles:!0,detail:{item:this}});constructor({toggleElement:t,contentElement:e,parentTab:s}){this._dom.toggle=t,this._dom.content=e,this._elements.parent=s}initialize(){this._setIds(),this._setAriaAttributes(),this.dom.toggle.getAttribute("aria-selected")==="true"?this.show():this._deactivate({emit:!1,transition:!1})}get dom(){return this._dom}get elements(){return this._elements}get isActive(){return this._active.value}_setIds(){const{key:t}=this.elements.parent,e=this.elements.parent.dom.tabToggle.indexOf(this.dom.toggle);this.dom.toggle.id=this.dom.toggle.id||`tab-toggle-${t}-${e}`,this.dom.content.id=this.dom.content.id||`tab-content-${t}-${e}`}_setAriaAttributes(){this.dom.toggle.setAttribute("role","tab"),this.dom.toggle.getAttribute("aria-selected")!=="true"&&this.dom.toggle.setAttribute("aria-selected","false"),this.dom.toggle.setAttribute("aria-controls",this.dom.content.id),this.dom.content.setAttribute("role","tabpanel")}_activate({emit:t=!0,transition:e=!0}={}){const{closeClass:s,openClass:i,transitionClass:r,openDuration:o}=this.elements.parent;this.dom.toggle.setAttribute("aria-selected","true"),e&&r!==""?(h(r,this.dom.content),requestAnimationFrame(()=>{c(s,this.dom.content),requestAnimationFrame(()=>{h(i,this.dom.content),requestAnimationFrame(()=>{setTimeout(()=>{c(r,this.dom.content)},o)})})})):(h(i,this.dom.content),c(s,this.dom.content)),t&&this.dom.toggle.dispatchEvent(this._activateEvent)}_deactivate({emit:t=!0,transition:e=!0}={}){const{closeClass:s,openClass:i,transitionClass:r,closeDuration:o}=this.elements.parent;this.dom.toggle.setAttribute("aria-selected","false"),e&&r!==""?(h(r,this.dom.content),requestAnimationFrame(()=>{c(i,this.dom.content),requestAnimationFrame(()=>{h(s,this.dom.content),requestAnimationFrame(()=>{setTimeout(()=>{c(r,this.dom.content)},o)})})})):(h(s,this.dom.content),c(i,this.dom.content)),t&&this.dom.toggle.dispatchEvent(this._deactivateEvent)}show({force:t=!1,preserveState:e=!1}={}){this.isActive&&!t||(this.elements.parent.focusState="self",this._activate(),this._active.value=!0,e||this._active.commit(),this.dom.toggle.setAttribute("tabindex","0"),this.deactivateSiblings())}hide({force:t=!1,preserveState:e=!1}={}){!this.isActive&&!t||(this.elements.parent.focusState="none",this._deactivate(),this._active.value=!1,e||this._active.commit(),this.dom.toggle.setAttribute("tabindex","-1"))}focus(){this.dom.toggle.focus()}blur(){this.dom.toggle.blur()}deactivateSiblings(){this.elements.parent&&this.elements.parent.elements.tabToggle.forEach(t=>{t!==this&&t.hide()})}},q=x;function C(t,e){try{if(typeof e!="object"){const s=typeof e;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${s}" given.`)}for(const s in e)if(!(e[s]instanceof t)){const i=typeof e[s];throw new TypeError(`${s} must be an instance of ${t.name}. "${i}" given.`)}return{status:!0,error:null}}catch(s){return{status:!1,error:s}}}function n(t,e){try{if(typeof e!="object"){const s=typeof e;throw new TypeError(`Values given to isValidType() must be inside of an object. "${s}" given.`)}for(const s in e){const i=typeof e[s];if(i!==t)throw new TypeError(`${s} must be a ${t}. "${i}" given.`)}return{status:!0,error:null}}catch(s){return{status:!1,error:s}}}function T(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 m(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 s=typeof t[e];if(s!=="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. "${s}" given.`);else{const i={};i[e]=t[e],T(i)}}return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function F(t){try{if(typeof t!="object"){const s=typeof t;throw new TypeError(`Values given to isValidState() must be inside of an object. "${s}" given.`)}const e=["none","self","child"];for(const s in t)if(!e.includes(t[s]))throw new TypeError(`${s} must be one of the following values: ${e.join(", ")}. "${t[s]}" given.`);return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function G(t){try{if(typeof t!="object"){const s=typeof t;throw new TypeError(`Values given to isValidEvent() must be inside of an object. "${s}" given.`)}const e=["none","mouse","keyboard","character"];for(const s in t)if(!e.includes(t[s]))throw new TypeError(`${s} must be one of the following values: ${e.join(", ")}. "${t[s]}" given.`);return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function A(t){try{const e=t.key||t.keyCode,s={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(s).find(i=>s[i]===!0)||""}catch{return""}}function l(t){t.preventDefault(),t.stopPropagation()}function M(t=null){window.Graupl=window.Graupl||{},n("string",{type:t})&&(window.Graupl[t]=window.Graupl[t]||{})}function z(t=null){return n("string",{type:t})?window.Graupl[t]:window.Graupl}function V(t,e={}){n("string",{type:t})&&n("object",{data:e})&&(window.Graupl[t]=e)}function I(t){n("string",{type:t})&&(window.Graupl[t]={})}function P(t,e,s){n("string",{type:t,key:e})&&(window.Graupl[t][e]=s)}function R(t,e){return n("string",{type:t,key:e})?window.Graupl[t][e]:null}function H(t,e){n("string",{type:t,key:e})&&delete window.Graupl[t][e]}var $={initializeStorage:M,getStorage:z,setStorage:V,clearStorage:I,pushToStorage:P,getFromStorage:R,removeFromStorage:H},K=class{_dom={tabs:null,tabList:null,tabToggle:[],tabContent:[]};_domLock=["tab"];_selectors={tabList:"",tabToggle:"",tabContent:""};_elements={tabToggle:[]};_classes={open:"show",close:"hide",transition:"transitioning",initialize:"initializing"};_durations={transition:250,open:-1,close:-1};_focusState="none";_currentEvent="none";_automatic=!1;_currentChild=0;_prefix="graupl-";_key="";_errors=[];constructor({tabsElement:t,tabListSelector:e=".tab-list",tabToggleSelector:s=".tab-toggle",tabContentSelector:i=".tab-content",openClass:r="show",closeClass:o="hide",transitionClass:u=null,transitionDuration:f=300,openDuration:d=-1,closeDuration:g=-1,automaticActivation:a=!1,prefix:D="graupl-",key:S=null,initializeClass:L="initializing",initialize:j=!1}){this._dom.tabs=t,this._selectors.tabList=e,this._selectors.tabToggle=s,this._selectors.tabContent=i,this._classes.open=r||"",this._classes.close=o||"",this._classes.transition=u||"",this._classes.initialize=L||"",this._durations.transition=f,this._durations.open=d,this._durations.close=g,this._automatic=a,this._prefix=D||"",this._key=S||"",j&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Tab: cannot initialize tab. The following errors have been found:
+function a(t,e){t===""||t.length===0||(typeof t=="string"?e.classList.add(t):e.classList.add(...t))}function h(t,e){t===""||t.length===0||(typeof t=="string"?e.classList.remove(t):e.classList.remove(...t))}var z=class{constructor(t,e={}){this._equals=e.equals||Object.is,this._current=t,this._committed=t}get value(){return this._current}set value(t){this._current=t}get committed(){return this._committed}get isDirty(){return!this._equals(this._current,this._committed)}commit(){return this._committed=this._current,this}reset(){return this._current=this._committed,this}update(t){return this._current=t(this._current),this}};function _(t,e){try{if(typeof e!="object"){const s=typeof e;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${s}" given.`)}for(const s in e)if(!(e[s]instanceof t)){const i=typeof e[s];throw new TypeError(`${s} must be an instance of ${t.name}. "${i}" given.`)}return{status:!0,error:null}}catch(s){return{status:!1,error:s}}}function n(t,e){try{if(typeof e!="object"){const s=typeof e;throw new TypeError(`Values given to isValidType() must be inside of an object. "${s}" given.`)}for(const s in e){const i=typeof e[s];if(i!==t)throw new TypeError(`${s} must be a ${t}. "${i}" given.`)}return{status:!0,error:null}}catch(s){return{status:!1,error:s}}}function y(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 c(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 s=typeof t[e];if(s!=="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. "${s}" given.`);else{const i={};i[e]=t[e],y(i)}}return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function M(t){try{if(typeof t!="object"){const s=typeof t;throw new TypeError(`Values given to isValidState() must be inside of an object. "${s}" given.`)}const e=["none","self","child"];for(const s in t)if(!e.includes(t[s]))throw new TypeError(`${s} must be one of the following values: ${e.join(", ")}. "${t[s]}" given.`);return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function x(t){try{if(typeof t!="object"){const s=typeof t;throw new TypeError(`Values given to isValidEvent() must be inside of an object. "${s}" given.`)}const e=["none","mouse","keyboard","character"];for(const s in t)if(!e.includes(t[s]))throw new TypeError(`${s} must be one of the following values: ${e.join(", ")}. "${t[s]}" given.`);return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function F(t=null){window.Graupl=window.Graupl||{},n("string",{type:t})&&(window.Graupl[t]=window.Graupl[t]||{})}function Q(t=null){return n("string",{type:t})?window.Graupl[t]:window.Graupl}function q(t,e={}){n("string",{type:t})&&n("object",{data:e})&&(window.Graupl[t]=e)}function G(t){n("string",{type:t})&&(window.Graupl[t]={})}function V(t,e,s){n("string",{type:t,key:e})&&(window.Graupl[t][e]=s)}function I(t,e){return n("string",{type:t,key:e})?window.Graupl[t][e]:null}function K(t,e){n("string",{type:t,key:e})&&delete window.Graupl[t][e]}var m={initializeStorage:F,getStorage:Q,setStorage:q,clearStorage:G,pushToStorage:V,getFromStorage:I,removeFromStorage:K},P=class{_dom={};_protectedDOMElements=[];_selectors={};_elements={};_classes={initialize:""};_durations={};_delays={};_focusState="none";_currentEvent="none";_breakpoint="";_mediaQueryString="";_mediaQueryList=null;_mediaQueryListEventCallback=t=>{t.matches};_intervals={};_timeouts={};_listeners=[];_events={};_prefix="graupl-";_key="";_storageKey="components";_id="";_valid=!0;_errors=[];constructor({prefix:t="graupl-",key:e=null,initializeClass:s="initializing"}={}){this._classes.initialize=s||"",this._prefix=t||"",this._key=e||""}initialize(){try{if(!this._validate())throw new Error(`Graupl ${this.constructor.name}: Cannot initialize component. The following errors have been found:
  - ${this.errors.join(`
- - `)}`);h(this._classes.initialize,this.dom.tabs),this._generateKey(),this._setDOMElements(),this._setIds(),this._setAriaAttributes(),this._createChildElements(),this._handleFocus(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),this._setTransitionDurations(),$.initializeStorage("tabs"),$.pushToStorage("tabs",this.dom.tabs.id,this),this.elements.tabToggle.filter(t=>t.isActive).length===0&&this.elements.tabToggle[0].show(),requestAnimationFrame(()=>{c(this._classes.initialize,this.dom.tabs)})}catch(t){console.error(t)}}get dom(){return this._dom}get elements(){return this._elements}get selectors(){return this._selectors}get openClass(){return this._classes.open}set openClass(t){m({openClass:t}),this._classes.open!==t&&(this._classes.open=t)}get closeClass(){return this._classes.close}set closeClass(t){m({closeClass:t}),this._classes.close!==t&&(this._classes.close=t)}get transitionClass(){return this._classes.transition}set transitionClass(t){m({transitionClass:t}),this._classes.transition!==t&&(this._classes.transition=t)}get transitionDuration(){return this._durations.transition}set transitionDuration(t){n("number",{value:t}),this._durations.transition!==t&&(this._durations.transition=t,this._setTransitionDurations())}get openDuration(){return this._durations.open===-1?this.transitionDuration:this._durations.open}set openDuration(t){n("number",{value:t}),this._durations.open!==t&&(this._durations.open=t,this._setTransitionDurations())}get closeDuration(){return this._durations.close===-1?this.transitionDuration:this._durations.close}set closeDuration(t){n("number",{value:t}),this._durations.close!==t&&(this._durations.close=t,this._setTransitionDurations())}get isAutomatic(){return this._automatic}set isAutomatic(t){n("boolean",{value:t}),this._automatic!==t&&(this._automatic=t)}get currentChild(){return this._currentChild}set currentChild(t){n("number",{value:t}),this._currentChild!==t&&t>=0&&t<this.elements.tabToggle.length&&(this._currentChild=t)}get currentTabToggle(){return this.elements.tabToggle[this.currentChild]}get focusState(){return this._focusState}set focusState(t){F({value:t}),this._focusState!==t&&(this._focusState=t)}get currentEvent(){return this._currentEvent}set currentEvent(t){G({value:t}),this._currentEvent!==t&&(this._currentEvent=t)}get prefix(){return this._prefix}set prefix(t){n("string",{value:t}),this._prefix!==t&&(this._prefix=t)}get key(){return this._key}get errors(){return this._errors}_validate(){let t=!0;const e=C(HTMLElement,{tabsElement:this.dom.tabs});e||(this._errors.push(e.message),t=!1);const s={};for(const a of Object.keys(this._selectors))s[`${a}Selector`]=this._selectors[a];const i=T(s);i||(this._errors.push(i.message),t=!1);const r={};for(const a of Object.keys(this._classes))this._classes[a]!==""&&(r[`${a}Class`]=this._classes[a]);const o=m(r);o.status||(this._errors.push(o.error.message),t=!1);const u={};for(const a of Object.keys(this._durations))u[`${a}Duration`]=this._durations[a];const f=n("number",u);f.status||(this._errors.push(f.error.message),t=!1);const d=n("boolean",{automaticActivation:this._automatic});if(d.status||(this._errors.push(d.error.message),t=!1),this._key!==""){const a=n("string",{key:this._key});a.status||(this._errors.push(a.error.message),t=!1)}const g=n("string",{prefix:this._prefix});return g.status||(this._errors.push(g.error.message),t=!1),t}_generateKey({regenerate:t=!1}={}){(this.key===""||t)&&(this._key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.tabs.id=this.dom.tabs.id||`tabs-${this.key}`,this.dom.tabList.id=this.dom.tabList.id||`tab-list-${this.key}`}_setAriaAttributes(){this.dom.tabList.setAttribute("role","tablist")}_setTransitionDurations(){this.dom.tabs.style.setProperty(`--${this.prefix}tabs-transition-duration`,`${this.transitionDuration}ms`),this.dom.tabs.style.setProperty(`--${this.prefix}tabs-open-transition-duration`,`${this.openDuration}ms`),this.dom.tabs.style.setProperty(`--${this.prefix}tabs-close-transition-duration`,`${this.closeDuration}ms`)}_setDOMElementType(t,{base:e=this.dom.tabs,overwrite:s=!0,strict:i=!0}={}){if(typeof this.selectors[t]=="string"){if(this._domLock.includes(t))throw new Error(`Graupl ${this.constructor.name}: "${t}" element cannot be set through _setDOMElementType.`);e!==this.dom.tabs&&C(HTMLElement,{base:e});const r=Array.from(e.querySelectorAll(this.selectors[t])).filter(o=>i?o.parentElement===e:!0);s?Array.isArray(this._dom[t])?this._dom[t]=r:this._dom[t]=r[0]||null:Array.isArray(this._dom[t])?this._dom[t]=[...this._dom[t],...r]:this._dom[t]=r[0]||null}else throw new Error(`Graupl ${this.constructor.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.constructor.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.constructor.name}: "${t}" is not a valid element type.`)}_setDOMElements(){this._resetDOMElementType("tabList"),this._setDOMElementType("tabList"),this.dom.tabList&&(this._resetDOMElementType("tabToggle"),this._setDOMElementType("tabToggle",{base:this.dom.tabList})),this._resetDOMElementType("tabContent"),this._setDOMElementType("tabContent")}_createChildElements(){this.dom.tabToggle.forEach((t,e)=>{const s=new q({toggleElement:t,contentElement:this.dom.tabContent[e],parentTab:this});s.initialize(),this._elements.tabToggle.push(s)})}_handleFocus(){this.elements.tabToggle.forEach((t,e)=>{t.dom.toggle.addEventListener("focus",()=>{this.currentChild=e,this.isAutomatic&&this.currentTabToggle.show()})})}_handleClick(){this.elements.tabToggle.forEach((t,e)=>{t.dom.toggle.addEventListener("pointerup",()=>{this.currentChild=e,t.show()})})}_handleKeydown(){this.dom.tabToggle.forEach(t=>{t.addEventListener("keydown",e=>{const s=A(e);["Space","Enter","ArrowRight","ArrowLeft","Home","End"].includes(s)&&l(e)})})}_handleKeyup(){this.dom.tabToggle.forEach(t=>{t.addEventListener("keyup",e=>{switch(A(e)){case"Space":case"Enter":l(e),this.currentTabToggle.show();break;case"Home":l(e),this.focusFirstChild();break;case"End":l(e),this.focusLastChild();break;case"ArrowRight":l(e),this.focusNextChild();break;case"ArrowLeft":l(e),this.focusPreviousChild();break}})})}focusCurrentChild(){this.currentChild!==-1&&this.currentTabToggle.focus()}focusChild(t){this.blurCurrentChild(),this.currentChild=t,this.focusCurrentChild()}focusFirstChild(){this.focusChild(0)}focusLastChild(){this.focusChild(this.elements.tabToggle.length-1)}focusNextChild(){this.currentChild<this.elements.tabToggle.length-1?this.focusChild(this.currentChild+1):this.focusFirstChild()}focusPreviousChild(){this.currentChild>0?this.focusChild(this.currentChild-1):this.focusLastChild()}blurCurrentChild(){this.currentChild!==-1&&this.currentTabToggle.blur()}},U=K;const k=/[\11\12\14\15\40]+/,y="data-once",Q=document;function w(t,e,s){return t[`${e}Attribute`](y,s)}function _(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`[${y}~="${t}"]`}function J(t){if(!(t instanceof Element))throw new TypeError("The element must be an instance of Element");return!0}function b(t,e=Q){let s=t;if(t===null)s=[];else if(t)if(e instanceof Document||e instanceof DocumentFragment||e instanceof Element)typeof t=="string"?s=e.querySelectorAll(t):t instanceof Element&&(s=[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(s)}function E(t,e,s){return e.filter(i=>{const r=J(i)&&i.matches(t);return r&&s&&s(i),r})}function v(t,{add:e,remove:s}){const i=[];w(t,"has")&&w(t,"get").trim().split(k).forEach(o=>{i.indexOf(o)<0&&o!==s&&i.push(o)}),e&&i.push(e);const r=i.join(" ");w(t,r===""?"remove":"set",r)}function p(t,e,s){return E(`:not(${_(t)})`,b(e,s),i=>v(i,{add:t}))}p.remove=(t,e,s)=>E(_(t),b(e,s),i=>v(i,{remove:t})),p.filter=(t,e,s)=>E(_(t),b(e,s)),p.find=(t,e)=>b(t?_(t):`[${y}]`,e);var B=p;const W=({options:t={},context:e=document,selector:s=".tabs"}={})=>{B("graupl-tabs-generator",s,e).forEach(i=>{const r=i.dataset.grauplTabsOptions?JSON.parse(i.dataset.grauplTabsOptions.replace(/'/g,'"'))||{}:{};new U({tabsElement:i,initialize:!0,...t,...r})})};var X=W;module.exports=X;
+ - `)}`);this._generateKey()}catch(t){console.error(t)}}init(){this.initialize()}get dom(){return this._dom}get selectors(){return this._selectors}get elements(){return this._elements}get classes(){return this._classes}get durations(){return this._durations}get delays(){return this._delays}get intervals(){return this._intervals}get timeouts(){return this._timeouts}get listeners(){return this._listeners}get events(){return this._events}get initializeClass(){return this._classes.initialize}set initializeClass(t){c({initializeClass:t}),this._classes.initialize!==t&&(this._classes.initialize=t)}get focusState(){return this._focusState}set focusState(t){M({focusState:t}),this._focusState!==t&&(this._focusState=t)}get currentEvent(){return this._currentEvent}set currentEvent(t){x({currentEvent:t}),this._currentEvent!==t&&(this._currentEvent=t)}get breakpoint(){return this._breakpoint}set breakpoint(t){n("string",{breakpoint:t}),this._breakpoint!==t&&(this._breakpoint=t)}get mediaQuery(){return this._mediaQueryString!==""?this._mediaQueryString:`(width <= ${this._breakpoint})`}set mediaQuery(t){n("string",{mediaQuery:t}),this._mediaQueryString!==t&&(this._mediaQueryString=t)}get prefix(){return this._prefix}get key(){return this._key}get errors(){return this._errors}_validate(){if(Object.keys(this._dom).length>0){const t={};for(const s of Object.keys(this._dom))Array.isArray(this._dom[s])&&this._dom[s].forEach((i,r)=>{t[`${s}Element[${r}]`]=i}),t[`${s}Element`]=this._dom[s];const e=_(HTMLElement,t);e||(this._errors.push(e.message),this._valid=!1)}if(Object.keys(this._selectors).length>0){const t={};for(const s of Object.keys(this._selectors))t[`${s}Selector`]=this._selectors[s];const e=y(t);e||(this._errors.push(e.message),this._valid=!1)}if(Object.keys(this._classes).length>0){const t={};for(const s of Object.keys(this._classes))this._classes[s]!==""&&(t[`${s}Class`]=this._classes[s]);const e=c(t);e.status||(this._errors.push(e.error.message),this._valid=!1)}if(Object.keys(this._durations).length>0){const t={};for(const s of Object.keys(this._durations))t[`${s}Duration`]=this._durations[s];const e=n("number",t);e.status||(this._errors.push(e.error.message),this._valid=!1)}if(Object.keys(this.delays).length>0){const t={};for(const s of Object.keys(this.delays))t[`${s}Delay`]=this.delays[s];const e=n("number",t);e.status||(this._errors.push(e.error.message),this._valid=!1)}if(this._key!==""){const t=n("string",{key:this._key});t.status||(this._errors.push(t.error.message),this._valid=!1)}if(this._prefix!==""){const t=n("string",{prefix:this._prefix});t.status||(this._errors.push(t.error.message),this._valid=!1)}return this._valid}_generateKey(t=!1){(this._key===""||t)&&(this._key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){}_setAriaAttributes(){}_setCustomProps(){}_setDOMElementType(t,{context:e,overwrite:s=!0,strict:i=!0}={}){if(typeof this.selectors[t]!="string")throw new Error(`Graupl ${this.constructor.name}: "${t}" is not a valid element type.`);if(this._protectedDOMElements.includes(t))throw new Error(`Graupl ${this.constructor.name}: "${t}" element cannot be set through _setDOMElementType because it is a protected element.`);_(HTMLElement,{context:e});const r=Array.from(e.querySelectorAll(this.selectors[t])).filter(o=>i?o.parentElement===e:!0);Array.isArray(this._dom[t])?s?this._dom[t]=r:this._dom[t]=[...this._dom[t],...r]:this._dom[t]=r[0]||null}_resetDOMElementType(t){if(typeof this.selectors[t]!="string")throw new Error(`Graupl ${this.constructor.name}: "${t}" is not a valid element type.`);if(this._protectedDOMElements.includes(t))throw new Error(`Graupl ${this.constructor.name}: "${t}" element cannot be reset through _resetDOMElementType because it is a protected element.`);Array.isArray(this._dom[t])?this._dom[t]=[]:this._dom[t]=null}_setDOMElements(){}_createChildElements(){}_handleMediaMatch(){this._breakpointWidth!==""&&(this._mediaQueryList=window.matchMedia(this.mediaQuery),this._mediaQueryList.addEventListener("change",this._mediaQueryListEventCallback),this._mediaQueryListEventCallback(this._mediaQueryList))}_handleFocus(){}_handleClick(){}_handleKeydown(){}_handleKeyup(){}_store(){m.initializeStorage(this._storageKey),m.pushToStorage(this._storageKey,this._id!==""?this._id:this._key,this)}_unstore(){m.removeFromStorage(this._storageKey,this._id!==""?this._id:this._key)}_setInterval(t,e,s="_default"){this._clearInterval(s),this._intervals[s]=setInterval(t,e)}_clearInterval(t="_default"){clearInterval(this._intervals[t])}_setTimeout(t,e,s="_default"){this._clearTimeout(s),this._timeouts[s]=setTimeout(t,e)}_clearTimeout(t="_default"){clearTimeout(this._timeouts[t])}_dispatchEvent(t,e){if(!Object.keys(this.events).includes(t))throw new Error(`Graupl ${this.constructor.name}: "${t}" is not a valid event type.`);_(HTMLElement,{element:e}),e.dispatchEvent(this.events[t])}_addEventListener(t,e,s,i={}){e.addEventListener(t,s,i),this._listeners.push({type:t,element:e,listener:s,options:i})}_removeEventListener(t,e,s,i={}){e.removeEventListener(t,s,i);const r=this._listeners.indexOf({type:t,element:e,listener:s,options:i});r!==-1&&this._listeners.splice(r)}_removeEventListeners(){this._listeners.forEach(({type:t,element:e,listener:s,options:i})=>{this._removeEventListener(t,e,s,i)})}dispose(){this._removeEventListeners(),this._unstore(),delete this}},E=P,H=class extends E{_dom={toggle:null,content:null};_protectedDOMElements=["toggle","content"];_elements={parent:null};_active=new z(!1);_events={activate:new CustomEvent("grauplTabToggleActivate",{bubbles:!0,detail:{toggle:this}}),deactivate:new CustomEvent("grauplTabToggleDeactivate",{bubbles:!0,detail:{toggle:this}})};constructor({toggleElement:t,contentElement:e,parentTab:s}={}){super({prefix:s.prefix,key:s.key}),this._dom.toggle=t,this._dom.content=e,this._elements.parent=s}initialize(){this._setIds(),this._setAriaAttributes(),this.dom.toggle.getAttribute("aria-selected")==="true"?this.show({force:!0,emit:!1,transition:!1}):this.hide({force:!0,emit:!1,transition:!1})}get isActive(){return this._active.value}_setIds(){const{key:t}=this.elements.parent,e=this.elements.parent.dom.tabToggle.indexOf(this.dom.toggle);this.dom.toggle.id=this.dom.toggle.id||`tab-toggle-${t}-${e}`,this.dom.content.id=this.dom.content.id||`tab-content-${t}-${e}`,this._id=this.dom.toggle.id}_setAriaAttributes(){this.dom.toggle.setAttribute("role","tab"),this.dom.toggle.getAttribute("aria-selected")!=="true"&&this.dom.toggle.setAttribute("aria-selected","false"),this.dom.toggle.setAttribute("aria-controls",this.dom.content.id),this.dom.content.setAttribute("role","tabpanel")}_reveal({emit:t=!0,transition:e=!0}={}){const{closeClass:s,openClass:i,transitionClass:r,openDuration:o}=this.elements.parent;this.dom.toggle.setAttribute("aria-selected","true"),e&&r!==""?(a(r,this.dom.content),requestAnimationFrame(()=>{h(s,this.dom.content),requestAnimationFrame(()=>{a(i,this.dom.content),requestAnimationFrame(()=>{this._setTimeout(()=>h(r,this.dom.content),o)})})})):(a(i,this.dom.content),h(s,this.dom.content)),t&&this._dispatchEvent("activate",this.dom.toggle)}_conceal({emit:t=!0,transition:e=!0}={}){const{closeClass:s,openClass:i,transitionClass:r,closeDuration:o}=this.elements.parent;this.dom.toggle.setAttribute("aria-selected","false"),e&&r!==""?(a(r,this.dom.content),requestAnimationFrame(()=>{h(i,this.dom.content),requestAnimationFrame(()=>{a(s,this.dom.content),requestAnimationFrame(()=>{this._setTimeout(()=>h(r,this.dom.content),o)})})})):(a(s,this.dom.content),h(i,this.dom.content)),t&&this._dispatchEvent("deactivate",this.dom.toggle)}show({force:t=!1,preserveState:e=!1,emit:s=!0,transition:i=!0}={}){this.isActive&&!t||(this.elements.parent.focusState="self",this._reveal({emit:s,transition:i}),this._active.value=!0,e||this._active.commit(),this.dom.toggle.setAttribute("tabindex","0"),this.hideSiblings())}hide({force:t=!1,preserveState:e=!1,emit:s=!0,transition:i=!0}={}){!this.isActive&&!t||(this.elements.parent.focusState="none",this._conceal({emit:s,transition:i}),this._active.value=!1,e||this._active.commit(),this.dom.toggle.setAttribute("tabindex","-1"))}focus(){this.dom.toggle.focus()}blur(){this.dom.toggle.blur()}hideSiblings(){this.elements.parent&&this.elements.parent.elements.tabToggle.forEach(t=>{t!==this&&t.hide()})}},R=H;function w(t){try{const e=t.key||t.keyCode,s={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(s).find(i=>s[i]===!0)||""}catch{return""}}function l(t){t.preventDefault(),t.stopPropagation()}var U=class extends E{_dom={tabs:null,tabList:null,tabToggle:[],tabContent:[]};_protectedDOMElements=["tab"];_selectors={tabList:"",tabToggle:"",tabContent:""};_elements={tabToggle:[]};_classes={open:"show",close:"hide",transition:"transitioning",initialize:"initializing"};_durations={transition:250,open:-1,close:-1};_automatic=!1;_currentChild=0;_storageKey="tabs";constructor({tabsElement:t,tabListSelector:e=".tab-list",tabToggleSelector:s=".tab-toggle",tabContentSelector:i=".tab-content",openClass:r="show",closeClass:o="hide",transitionClass:T=null,transitionDuration:k=300,openDuration:A=-1,closeDuration:$=-1,automaticActivation:D=!1,prefix:L="graupl-",key:S=null,initializeClass:O="initializing",initialize:j=!1}){super({prefix:L,key:S,initializeClass:O}),this._dom.tabs=t,this._selectors.tabList=e,this._selectors.tabToggle=s,this._selectors.tabContent=i,this._classes.open=r||"",this._classes.close=o||"",this._classes.transition=T||"",this._durations.transition=k,this._durations.open=A,this._durations.close=$,this._automatic=D,j&&this.initialize()}initialize(){try{a(this.initializeClass,this.dom.tabs),super.initialize(),this._setDOMElements(),this._setIds(),this._setAriaAttributes(),this._setCustomProps(),this._createChildElements(),this._handleFocus(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),this._store(),this.elements.tabToggle.filter(t=>t.isActive).length===0&&this.elements.tabToggle[0].show()}catch(t){console.error(t)}finally{requestAnimationFrame(()=>{h(this.initializeClass,this.dom.tabs)})}}get openClass(){return this._classes.open}set openClass(t){c({openClass:t}),this._classes.open!==t&&(this._classes.open=t)}get closeClass(){return this._classes.close}set closeClass(t){c({closeClass:t}),this._classes.close!==t&&(this._classes.close=t)}get transitionClass(){return this._classes.transition}set transitionClass(t){c({transitionClass:t}),this._classes.transition!==t&&(this._classes.transition=t)}get transitionDuration(){return this._durations.transition}set transitionDuration(t){n("number",{transitionDuration:t}),this._durations.transition!==t&&(this._durations.transition=t,this._setTransitionDurations())}get openDuration(){return this._durations.open===-1?this.transitionDuration:this._durations.open}set openDuration(t){n("number",{openDuration:t}),this._durations.open!==t&&(this._durations.open=t,this._setTransitionDurations())}get closeDuration(){return this._durations.close===-1?this.transitionDuration:this._durations.close}set closeDuration(t){n("number",{closeDuration:t}),this._durations.close!==t&&(this._durations.close=t,this._setTransitionDurations())}get isAutomatic(){return this._automatic}set isAutomatic(t){n("boolean",{isAutomatic:t}),this._automatic!==t&&(this._automatic=t)}get currentChild(){return this._currentChild}set currentChild(t){n("number",{currentChild:t}),this._currentChild!==t&&t>=0&&t<this.elements.tabToggle.length&&(this._currentChild=t)}get currentTabToggle(){return this.elements.tabToggle[this.currentChild]}_validate(){super._validate();const t=n("boolean",{automaticActivation:this._automatic});return t||(this._errors.push(t.message),this._valid=!1),this._valid}_setIds(){this.dom.tabs.id=this.dom.tabs.id||`tabs-${this.key}`,this.dom.tabList.id=this.dom.tabList.id||`tab-list-${this.key}`,this._id=this.dom.tabs.id}_setAriaAttributes(){this.dom.tabList.setAttribute("role","tablist")}_setCustomProps(){this.dom.tabs.style.setProperty(`--${this.prefix}tabs-transition-duration`,`${this.transitionDuration}ms`),this.dom.tabs.style.setProperty(`--${this.prefix}tabs-open-transition-duration`,`${this.openDuration}ms`),this.dom.tabs.style.setProperty(`--${this.prefix}tabs-close-transition-duration`,`${this.closeDuration}ms`)}_setDOMElements(){this._resetDOMElementType("tabList"),this._setDOMElementType("tabList",{context:this.dom.tabs}),this.dom.tabList&&(this._resetDOMElementType("tabToggle"),this._setDOMElementType("tabToggle",{context:this.dom.tabList})),this._resetDOMElementType("tabContent"),this._setDOMElementType("tabContent",{context:this.dom.tabs})}_createChildElements(){this.dom.tabToggle.forEach((t,e)=>{const s=new R({toggleElement:t,contentElement:this.dom.tabContent[e],parentTab:this});s.initialize(),this._elements.tabToggle.push(s)})}_handleFocus(){this.elements.tabToggle.forEach((t,e)=>{this._addEventListener("focus",t.dom.toggle,()=>{this.currentChild=e,this.isAutomatic&&this.currentTabToggle.show()})})}_handleClick(){this.elements.tabToggle.forEach((t,e)=>{this._addEventListener("pointerup",t.dom.toggle,()=>{this.currentChild=e,t.show()})})}_handleKeydown(){this.dom.tabToggle.forEach(t=>{this._addEventListener("keydown",t,e=>{const s=w(e);["Space","Enter","ArrowRight","ArrowLeft","Home","End"].includes(s)&&l(e)})})}_handleKeyup(){this.dom.tabToggle.forEach(t=>{this._addEventListener("keyup",t,e=>{switch(w(e)){case"Space":case"Enter":l(e),this.currentTabToggle.show();break;case"Home":l(e),this.focusFirstChild();break;case"End":l(e),this.focusLastChild();break;case"ArrowRight":l(e),this.focusNextChild();break;case"ArrowLeft":l(e),this.focusPreviousChild();break}})})}focusCurrentChild(){this.currentChild!==-1&&this.currentTabToggle.focus()}focusChild(t){this.blurCurrentChild(),this.currentChild=t,this.focusCurrentChild()}focusFirstChild(){this.focusChild(0)}focusLastChild(){this.focusChild(this.elements.tabToggle.length-1)}focusNextChild(){this.currentChild<this.elements.tabToggle.length-1?this.focusChild(this.currentChild+1):this.focusFirstChild()}focusPreviousChild(){this.currentChild>0?this.focusChild(this.currentChild-1):this.focusLastChild()}blurCurrentChild(){this.currentChild!==-1&&this.currentTabToggle.blur()}},J=U;const C=/[\11\12\14\15\40]+/,g="data-once",W=document;function b(t,e,s){return t[`${e}Attribute`](g,s)}function u(t){if(typeof t!="string")throw new TypeError("once ID must be a string");if(t===""||C.test(t))throw new RangeError("once ID must not be empty or contain spaces");return`[${g}~="${t}"]`}function B(t){if(!(t instanceof Element))throw new TypeError("The element must be an instance of Element");return!0}function d(t,e=W){let s=t;if(t===null)s=[];else if(t)if(e instanceof Document||e instanceof DocumentFragment||e instanceof Element)typeof t=="string"?s=e.querySelectorAll(t):t instanceof Element&&(s=[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(s)}function p(t,e,s){return e.filter(i=>{const r=B(i)&&i.matches(t);return r&&s&&s(i),r})}function v(t,{add:e,remove:s}){const i=[];b(t,"has")&&b(t,"get").trim().split(C).forEach(o=>{i.indexOf(o)<0&&o!==s&&i.push(o)}),e&&i.push(e);const r=i.join(" ");b(t,r===""?"remove":"set",r)}function f(t,e,s){return p(`:not(${u(t)})`,d(e,s),i=>v(i,{add:t}))}f.remove=(t,e,s)=>p(u(t),d(e,s),i=>v(i,{remove:t})),f.filter=(t,e,s)=>p(u(t),d(e,s)),f.find=(t,e)=>d(t?u(t):`[${g}]`,e);var X=f;const Y=({options:t={},context:e=document,selector:s=".tabs"}={})=>{X("graupl-tabs-generator",s,e).forEach(i=>{const r=i.dataset.grauplTabsOptions?JSON.parse(i.dataset.grauplTabsOptions.replace(/'/g,'"'))||{}:{};new J({tabsElement:i,initialize:!0,...t,...r})})};var Z=Y;module.exports=Z;
 
 //# sourceMappingURL=tabs.cjs.js.map