@graupl/graupl 1.0.0-beta.24 → 1.0.0-beta.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/component/accordion.css +1 -1
- package/dist/css/component/accordion.css.map +1 -1
- package/dist/css/component/list.css +1 -1
- package/dist/css/component/list.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/dist/js/accordion.js +2 -2
- package/dist/js/accordion.js.map +1 -1
- package/dist/js/alert.js +2 -2
- package/dist/js/alert.js.map +1 -1
- package/dist/js/carousel.js +2 -2
- package/dist/js/carousel.js.map +1 -1
- package/dist/js/component/accordion.cjs.js +2 -2
- package/dist/js/component/accordion.cjs.js.map +1 -1
- package/dist/js/component/accordion.es.js +2 -2
- package/dist/js/component/accordion.es.js.map +1 -1
- package/dist/js/component/accordion.iife.js +2 -2
- package/dist/js/component/accordion.iife.js.map +1 -1
- package/dist/js/component/alert.cjs.js +2 -2
- package/dist/js/component/alert.cjs.js.map +1 -1
- package/dist/js/component/alert.es.js +2 -2
- package/dist/js/component/alert.es.js.map +1 -1
- package/dist/js/component/alert.iife.js +2 -2
- package/dist/js/component/alert.iife.js.map +1 -1
- package/dist/js/component/carousel.cjs.js +2 -2
- package/dist/js/component/carousel.cjs.js.map +1 -1
- package/dist/js/component/carousel.es.js +2 -2
- package/dist/js/component/carousel.es.js.map +1 -1
- package/dist/js/component/carousel.iife.js +2 -2
- package/dist/js/component/carousel.iife.js.map +1 -1
- package/dist/js/component/disclosure.cjs.js +2 -2
- package/dist/js/component/disclosure.cjs.js.map +1 -1
- package/dist/js/component/disclosure.es.js +2 -2
- package/dist/js/component/disclosure.es.js.map +1 -1
- package/dist/js/component/disclosure.iife.js +2 -2
- package/dist/js/component/disclosure.iife.js.map +1 -1
- package/dist/js/component/tabs.cjs.js +2 -2
- package/dist/js/component/tabs.cjs.js.map +1 -1
- package/dist/js/component/tabs.es.js +2 -2
- package/dist/js/component/tabs.es.js.map +1 -1
- package/dist/js/component/tabs.iife.js +2 -2
- package/dist/js/component/tabs.iife.js.map +1 -1
- package/dist/js/disclosure.js +2 -2
- package/dist/js/disclosure.js.map +1 -1
- package/dist/js/generator/accordion.cjs.js +2 -2
- package/dist/js/generator/accordion.cjs.js.map +1 -1
- package/dist/js/generator/accordion.es.js +2 -2
- package/dist/js/generator/accordion.es.js.map +1 -1
- package/dist/js/generator/accordion.iife.js +2 -2
- package/dist/js/generator/accordion.iife.js.map +1 -1
- package/dist/js/generator/alert.cjs.js +2 -2
- package/dist/js/generator/alert.cjs.js.map +1 -1
- package/dist/js/generator/alert.es.js +2 -2
- package/dist/js/generator/alert.es.js.map +1 -1
- package/dist/js/generator/alert.iife.js +2 -2
- package/dist/js/generator/alert.iife.js.map +1 -1
- package/dist/js/generator/carousel.cjs.js +2 -2
- package/dist/js/generator/carousel.cjs.js.map +1 -1
- package/dist/js/generator/carousel.es.js +2 -2
- package/dist/js/generator/carousel.es.js.map +1 -1
- package/dist/js/generator/carousel.iife.js +2 -2
- package/dist/js/generator/carousel.iife.js.map +1 -1
- package/dist/js/generator/disclosure.cjs.js +2 -2
- package/dist/js/generator/disclosure.cjs.js.map +1 -1
- package/dist/js/generator/disclosure.es.js +2 -2
- package/dist/js/generator/disclosure.es.js.map +1 -1
- package/dist/js/generator/disclosure.iife.js +2 -2
- package/dist/js/generator/disclosure.iife.js.map +1 -1
- package/dist/js/generator/tabs.cjs.js +2 -2
- package/dist/js/generator/tabs.cjs.js.map +1 -1
- package/dist/js/generator/tabs.es.js +2 -2
- package/dist/js/generator/tabs.es.js.map +1 -1
- package/dist/js/generator/tabs.iife.js +2 -2
- package/dist/js/generator/tabs.iife.js.map +1 -1
- package/dist/js/graupl.js +2 -8
- package/dist/js/graupl.js.map +1 -1
- package/dist/js/navigation.js +1 -1
- package/dist/js/navigation.js.map +1 -1
- package/dist/js/tabs.js +2 -2
- package/dist/js/tabs.js.map +1 -1
- package/package.json +1 -1
package/dist/js/accordion.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(){function
|
|
1
|
+
(function(){function u(t,e){try{if(typeof e!="object"){const i=typeof e;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${i}" given.`)}for(const i in e)if(!(e[i]instanceof t)){const s=typeof e[i];throw new TypeError(`${i} must be an instance of ${t.name}. "${s}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function r(t,e){try{if(typeof e!="object"){const i=typeof e;throw new TypeError(`Values given to isValidType() must be inside of an object. "${i}" given.`)}for(const i in e){const s=typeof e[i];if(s!==t)throw new TypeError(`${i} must be a ${t}. "${s}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function C(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 h(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 i=typeof t[e];if(i!=="string")if(Array.isArray(t[e]))t[e].forEach(s=>{if(typeof s!="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. "${i}" given.`);else{const s={};s[e]=t[e],C(s)}}return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function w(t,e){if(r("string",{tagName:t}).status&&u(HTMLElement,e).status){const i=t.toLowerCase();let s=!0;for(const o in e)e[o].tagName.toLowerCase()!==i&&(s=!1);return s}else return!1}function x(t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Values given to isValidState() must be inside of an object. "${i}" given.`)}const e=["none","self","child"];for(const i in t)if(!e.includes(t[i]))throw new TypeError(`${i} must be one of the following values: ${e.join(", ")}. "${t[i]}" given.`);return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function $(t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Values given to isValidEvent() must be inside of an object. "${i}" given.`)}const e=["none","mouse","keyboard","character"];for(const i in t)if(!e.includes(t[i]))throw new TypeError(`${i} must be one of the following values: ${e.join(", ")}. "${t[i]}" given.`);return{status:!0,error:null}}catch(e){return{status:!1,error:e}}}function l(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 b=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 I(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 D(t,e={}){r("string",{type:t})&&r("object",{data:e})&&(window.Graupl[t]=e)}function T(t){r("string",{type:t})&&(window.Graupl[t]={})}function O(t,e,i){r("string",{type:t,key:e})&&(window.Graupl[t][e]=i)}function L(t,e){return r("string",{type:t,key:e})?window.Graupl[t][e]:null}function M(t,e){r("string",{type:t,key:e})&&delete window.Graupl[t][e]}var _={initializeStorage:I,getStorage:S,setStorage:D,clearStorage:T,pushToStorage:O,getFromStorage:L,removeFromStorage:M},j=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:i="initializing"}={}){this._classes.initialize=i||"",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:
|
|
2
2
|
- ${this.errors.join(`
|
|
3
|
-
- `)}`);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,i=!0,o=!1){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.accordion&&_(HTMLElement,{base:e});const s=Array.from(e.querySelectorAll(this.selectors[t])).filter(n=>o?n.parentElement===e:!0);i?this._dom[t]=s:this._dom[t]=[...this._dom[t],...s]}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._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 i=new A({accordionItemElement:t,accordionItemToggleElement:this.dom.accordionItemToggles[e],accordionItemHeaderElement:this.dom.accordionItemHeaders[e],accordionItemContentElement:this.dom.accordionItemContents[e],parentAccordion:this});i.initialize(),this.elements.accordionItems.push(i)})}_validate(){let t=!0;const e=_(HTMLElement,{accordionElement:this.dom.accordion});e||(this._errors.push(e.message),t=!1);const i=E({accordionItemSelector:this._selectors.accordionItems,accordionItemToggleSelector:this._selectors.accordionItemToggles,accordionItemHeaderSelector:this._selectors.accordionItemHeaders,accordionItemContentSelector:this._selectors.accordionItemContents});if(i||(this._errors.push(i.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 o=r("number",{transitionDuration:this._transitionDuration});o.status||(this._errors.push(o.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 p=r("boolean",{optionalKeySupport:this._optionalKeySupport,allowMultipleExpand:this._allowMultipleExpand,allowNoExpand:this._allowNoExpand});if(p.status||(this._errors.push(p.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 i=I(e);(["Space","Enter"].includes(i)||this.optionalKeySupport&&["ArrowDown","ArrowUp","Home","End"].includes(i))&&c(e)})})}_handleKeyup(){this.dom.accordionItemToggles.forEach(t=>{t.addEventListener("keyup",e=>{const i=I(e);switch(i){case"Space":case"Enter":c(e),this.currentAccordionItem.toggle();break}if(this.optionalKeySupport)switch(i){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())}},F=H;const k=/[\11\12\14\15\40]+/,C="data-once",K=document;function w(t,e,i){return t[`${e}Attribute`](C,i)}function u(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 m(t,e=K){let i=t;if(t===null)i=[];else if(t)if(e instanceof Document||e instanceof DocumentFragment||e instanceof Element)typeof t=="string"?i=e.querySelectorAll(t):t instanceof Element&&(i=[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(i)}function y(t,e,i){return e.filter(o=>{const s=q(o)&&o.matches(t);return s&&i&&i(o),s})}function x(t,{add:e,remove:i}){const o=[];w(t,"has")&&w(t,"get").trim().split(k).forEach(n=>{o.indexOf(n)<0&&n!==i&&o.push(n)}),e&&o.push(e);const s=o.join(" ");w(t,s===""?"remove":"set",s)}function f(t,e,i){return y(`:not(${u(t)})`,m(e,i),o=>x(o,{add:t}))}f.remove=(t,e,i)=>y(u(t),m(e,i),o=>x(o,{remove:t})),f.filter=(t,e,i)=>y(u(t),m(e,i)),f.find=(t,e)=>m(t?u(t):`[${C}]`,e);var R=f,z=(t={},e=document,i=".accordion")=>{R("graupl-accordion-generator",i,e).forEach(o=>{const s=o.dataset.grauplAccordionOptions?JSON.parse(o.dataset.grauplAccordionOptions.replace(/'/g,'"'))||{}:{};new F({accordionElement:o,initialize:!0,...t,...s})})};document.addEventListener("DOMContentLoaded",()=>{z()})})();
|
|
3
|
+
- `)}`);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){h({initializeClass:t}),this._classes.initialize!==t&&(this._classes.initialize=t)}get focusState(){return this._focusState}set focusState(t){x({focusState:t}),this._focusState!==t&&(this._focusState=t)}get currentEvent(){return this._currentEvent}set currentEvent(t){$({currentEvent:t}),this._currentEvent!==t&&(this._currentEvent=t)}get breakpoint(){return this._breakpoint}set breakpoint(t){r("string",{breakpoint:t}),this._breakpoint!==t&&(this._breakpoint=t)}get mediaQuery(){return this._mediaQueryString!==""?this._mediaQueryString:`(width <= ${this._breakpoint})`}set mediaQuery(t){r("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 i of Object.keys(this._dom))Array.isArray(this._dom[i])&&this._dom[i].forEach((s,o)=>{t[`${i}Element[${o}]`]=s}),t[`${i}Element`]=this._dom[i];const e=u(HTMLElement,t);e||(this._errors.push(e.message),this._valid=!1)}if(Object.keys(this._selectors).length>0){const t={};for(const i of Object.keys(this._selectors))t[`${i}Selector`]=this._selectors[i];const e=C(t);e||(this._errors.push(e.message),this._valid=!1)}if(Object.keys(this._classes).length>0){const t={};for(const i of Object.keys(this._classes))this._classes[i]!==""&&(t[`${i}Class`]=this._classes[i]);const e=h(t);e.status||(this._errors.push(e.error.message),this._valid=!1)}if(Object.keys(this._durations).length>0){const t={};for(const i of Object.keys(this._durations))t[`${i}Duration`]=this._durations[i];const e=r("number",t);e.status||(this._errors.push(e.error.message),this._valid=!1)}if(Object.keys(this.delays).length>0){const t={};for(const i of Object.keys(this.delays))t[`${i}Delay`]=this.delays[i];const e=r("number",t);e.status||(this._errors.push(e.error.message),this._valid=!1)}if(this._key!==""){const t=r("string",{key:this._key});t.status||(this._errors.push(t.error.message),this._valid=!1)}if(this._prefix!==""){const t=r("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:i=!0,strict:s=!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.`);u(HTMLElement,{context:e});const o=Array.from(e.querySelectorAll(this.selectors[t])).filter(n=>s?n.parentElement===e:!0);Array.isArray(this._dom[t])?i?this._dom[t]=o:this._dom[t]=[...this._dom[t],...o]:this._dom[t]=o[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(){_.initializeStorage(this._storageKey),_.pushToStorage(this._storageKey,this._id!==""?this._id:this._key,this)}_unstore(){_.removeFromStorage(this._storageKey,this._id!==""?this._id:this._key)}_setInterval(t,e,i="_default"){this._clearInterval(i),this._intervals[i]=setInterval(t,e)}_clearInterval(t="_default"){clearInterval(this._intervals[t])}_setTimeout(t,e,i="_default"){this._clearTimeout(i),this._timeouts[i]=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.`);u(HTMLElement,{element:e}),e.dispatchEvent(this.events[t])}_addEventListener(t,e,i,s={}){e.addEventListener(t,i,s),this._listeners.push({type:t,element:e,listener:i,options:s})}_removeEventListener(t,e,i,s={}){e.removeEventListener(t,i,s);const o=this._listeners.indexOf({type:t,element:e,listener:i,options:s});o!==-1&&this._listeners.splice(o)}_removeEventListeners(){this._listeners.forEach(({type:t,element:e,listener:i,options:s})=>{this._removeEventListener(t,e,i,s)})}dispose(){this._removeEventListeners(),this._unstore(),delete this}},k=j,z=class extends k{_dom={item:null,toggle:null,header:null,content:null};_protectedDOMElements=["item","toggle","header","content"];_elements={parent:null};_open=new b(!1);_locked=new b(!1);_events={expand:new CustomEvent("grauplAccordionItemExpand",{bubbles:!0,detail:{item:this}}),collapse:new CustomEvent("grauplAccordionItemCollapse",{bubbles:!0,detail:{item:this}})};constructor({accordionItemElement:t,accordionItemToggleElement:e,accordionItemHeaderElement:i,accordionItemContentElement:s,parentAccordion:o=null}){super({prefix:o.prefix,key:o.key}),this._dom.item=t,this._dom.toggle=e,this._dom.header=i,this._dom.content=s,this._elements.parent=o}initialize(){this._setIds(),this._setAriaAttributes(),this.dom.toggle.getAttribute("aria-expanded")==="true"?this.show({force:!0,emit:!1,transition:!1}):this.hide({force:!0,emit:!1,transition:!1})}get isOpen(){return this._open.value}get isLocked(){return this._locked.value}_setIds(){const{key:t}=this.elements.parent,e=this.elements.parent.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(){w("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),w("section",{content:this.dom.content})||this.dom.content.setAttribute("role","region"),this.dom.content.setAttribute("aria-labelledby",this.dom.toggle.id)}_reveal({emit:t=!0,transition:e=!0}={}){const{closeClass:i,openClass:s,transitionClass:o,openDuration:n}=this.elements.parent;this.dom.toggle.setAttribute("aria-expanded","true"),e&&o!==""?(l(o,this.dom.item),requestAnimationFrame(()=>{c(i,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{l(s,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height+this.dom.content.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{this._setTimeout(()=>{c(o,this.dom.item),this.dom.item.style.height=""},n)})})})):(l(s,this.dom.item),c(i,this.dom.item)),this.dom.content.removeAttribute("inert"),t&&this._dispatchEvent("expand",this.dom.item)}_conceal({emit:t=!0,transition:e=!0}={}){const{closeClass:i,openClass:s,transitionClass:o,closeDuration:n}=this.elements.parent;this.dom.toggle.setAttribute("aria-expanded","false"),e&&o!==""?(l(o,this.dom.item),this.dom.item.style.height=`${this.dom.item.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{c(s,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{l(i,this.dom.item),requestAnimationFrame(()=>{this._setTimeout(()=>{c(o,this.dom.item),this.dom.item.style.height=""},n)})})})):(l(i,this.dom.item),c(s,this.dom.item)),this.dom.content.setAttribute("inert","true"),t&&this._dispatchEvent("collapse",this.dom.item)}show({force:t=!1,preserveState:e=!1,emit:i=!0,transition:s=!0}={}){this.isOpen&&!t||(this._reveal({emit:i,transition:s}),this._open.value=!0,e||this._open.commit(),this.elements.parent.allowMultipleExpand||(this.unlockSiblings(),this.closeSiblings()),this.elements.parent.allowNoExpand||(this.elements.parent.openAccordionItems.length<=1?this.lock():this.unlockSiblings()))}hide({force:t=!1,preserveState:e=!1,emit:i=!0,transition:s=!0}={}){!this.isOpen&&!t||!this.elements.parent.allowNoExpand&&this.elements.parent.openAccordionItems.length<=1||(this._conceal({emit:i,transition:s}),this._open.value=!1,e||this._open.commit(),!this.elements.parent.allowNoExpand&&this.elements.parent.openAccordionItems.length===1&&this.elements.parent.openAccordionItems[0].lock())}toggle(){this.isOpen?this.hide():this.show()}focus(){this.dom.toggle.focus()}blur(){this.dom.toggle.blur()}lock(){this._locked.value=!0,this._locked.commit(),this.dom.toggle.setAttribute("disabled","true")}unlock(){this._locked.value=!1,this._locked.commit(),this.dom.toggle.removeAttribute("disabled")}closeSiblings(){this.elements.parent&&this.elements.parent.elements.accordionItems.forEach(t=>{t!==this&&t.hide()})}unlockSiblings(){this.elements.parent&&this.elements.parent.elements.accordionItems.forEach(t=>{t!==this&&t.unlock()})}},K=z;function d(t){try{const e=t.key||t.keyCode,i={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(i).find(s=>i[s]===!0)||""}catch{return""}}function a(t){t.preventDefault(),t.stopPropagation()}var Q=class extends k{_dom={accordion:null,accordionItems:[],accordionItemToggles:[],accordionItemHeaders:[],accordionItemContents:[],accordionControlContainer:null,accordionControls:[],expandController:[],collapseController:[]};_protectedDOMElements=["accordion"];_selectors={accordionItems:"",accordionItemToggles:"",accordionItemHeaders:"",accordionItemContents:"",accordionControlContainer:"",accordionControls:"",expandController:"",collapseController:""};_elements={accordionItems:[]};_classes={open:"show",close:"hide",transition:"transitioning",initialize:"initializing"};_durations={transition:250,open:-1,close:-1};_optionalKeySupport=!0;_allowMultipleExpand=!0;_allowNoExpand=!0;_currentChild=0;_storageKey="accordions";constructor({accordionElement:t,accordionItemSelector:e=".accordion-item",accordionItemToggleSelector:i=".accordion-item-toggle",accordionItemHeaderSelector:s=".accordion-item-header",accordionItemContentSelector:o=".accordion-item-content",accordionControlContainerSelector:n=".accordion-control-container",accordionControlsSelector:H=".accordion-control",expandControllerSelector:P=".expand-all",collapseControllerSelector:R=".collapse-all",openClass:B="show",closeClass:U="hide",transitionClass:J="transitioning",transitionDuration:W=300,openDuration:X=-1,closeDuration:Y=-1,optionalKeySupport:Z=!1,allowMultipleExpand:tt=!0,allowNoExpand:et=!0,automaticActivation:it=!1,prefix:st="graupl-",key:ot=null,initializeClass:rt="initializing",initialize:nt=!1}){super({prefix:st,key:ot,initializeClass:rt}),this._dom.accordion=t,this._selectors.accordionItems=e,this._selectors.accordionItemToggles=i,this._selectors.accordionItemHeaders=s,this._selectors.accordionItemContents=o,this._selectors.accordionControlContainer=n,this._selectors.accordionControls=H,this._selectors.expandController=P,this._selectors.collapseController=R,this._classes.open=B||"",this._classes.close=U||"",this._classes.transition=J||"",this._durations.transition=W,this._durations.open=X,this._durations.close=Y,this._automatic=it,this._optionalKeySupport=Z,this._allowMultipleExpand=tt,this._allowNoExpand=et,nt&&this.initialize()}initialize(){try{l(this._classes.initialize,this.dom.accordion),super.initialize(),this._setDOMElements(),this._setIds(),this._setCustomProps(),this._createChildElements(),this._handleFocus(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),this._store(),this.dom.expandController.length>0&&!this.allowMultipleExpand&&this.dom.expandController.forEach(t=>{t.setAttribute("disabled","disabled")}),this.dom.collapseController.length>0&&!this.allowNoExpand&&this.dom.collapseController.forEach(t=>{t.setAttribute("disabled","disabled")})}catch(t){console.error(t)}finally{requestAnimationFrame(()=>{c(this._classes.initialize,this.dom.accordion)})}}get openClass(){return this._classes.open}set openClass(t){h({openClass:t}),this._classes.open!==t&&(this._classes.open=t)}get closeClass(){return this._classes.close}set closeClass(t){h({closeClass:t}),this._classes.close!==t&&(this._classes.close=t)}get transitionClass(){return this._classes.transition}set transitionClass(t){h({transitionClass:t}),this._classes.transition!==t&&(this._classes.transition=t)}get transitionDuration(){return this._durations.transition}set transitionDuration(t){r("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){r("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){r("number",{closeDuration:t}),this._durations.close!==t&&(this._durations.close=t,this._setTransitionDurations())}get currentChild(){return this._currentChild}set currentChild(t){r("number",{currentChild:t}),this._currentChild!==t&&t>=0&&t<this.elements.accordionItems.length&&(this._currentChild=t)}get optionalKeySupport(){return this._optionalKeySupport}set optionalKeySupport(t){r("boolean",{optionalKeySupport:t}),this._optionalKeySupport!==t&&(this._optionalKeySupport=t)}get currentAccordionItem(){return this.elements.accordionItems[this.currentChild]}get openAccordionItems(){return this.elements.accordionItems.filter(t=>t.isOpen)}get allowMultipleExpand(){return this._allowMultipleExpand}set allowMultipleExpand(t){r("boolean",{allowMultipleExpand:t}),this._allowMultipleExpand!==t&&(this._allowMultipleExpand=t,this.dom.expandController.length>0&&(t?this.dom.expandController.forEach(e=>{e.removeAttribute("disabled")}):this.dom.expandController.forEach(e=>{e.setAttribute("disabled","disabled")})))}get allowNoExpand(){return this._allowNoExpand}set allowNoExpand(t){r("boolean",{allowNoExpand:t}),this._allowNoExpand!==t&&(this._allowNoExpand=t,this.dom.collapseController.length>0&&(t?this.dom.collapseController.forEach(e=>{e.removeAttribute("disabled")}):this.dom.collapseController.forEach(e=>{e.setAttribute("disabled","disabled")})))}_validate(){super._validate();const t=r("boolean",{automaticActivation:this._automatic,optionalKeySupport:this._optionalKeySupport,allowMultipleExpand:this._allowMultipleExpand,allowNoExpand:this._allowNoExpand});return t||(this._errors.push(t.message),this._valid=!1),this._valid}_setIds(){this.dom.accordion.id=this.dom.accordion.id||`accordion-${this.key}`,this._id=this.dom.accordion.id}_setCustomProps(){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`)}_setDOMElements(){this._setDOMElementType("accordionItems",{context:this.dom.accordion}),this._resetDOMElementType("accordionItemToggles"),this._setDOMElementType("accordionControlContainer",{context:this.dom.accordion}),this.dom.accordionControlContainer&&(this._setDOMElementType("accordionControls",{context:this.dom.accordionControlContainer}),this._setDOMElementType("expandController",{context:this.dom.accordionControlContainer}),this._setDOMElementType("collapseController",{context:this.dom.accordionControlContainer})),this.dom.accordionItems.forEach(t=>{this._setDOMElementType("accordionItemToggles",{context:t,overwrite:!1,strict:!1}),this._setDOMElementType("accordionItemHeaders",{context:t,overwrite:!1,strict:!1}),this._setDOMElementType("accordionItemContents",{context:t,overwrite:!1,strict:!1})})}_createChildElements(){this.dom.accordionItems.forEach((t,e)=>{const i=new K({accordionItemElement:t,accordionItemToggleElement:this.dom.accordionItemToggles[e],accordionItemHeaderElement:this.dom.accordionItemHeaders[e],accordionItemContentElement:this.dom.accordionItemContents[e],parentAccordion:this});i.initialize(),this.elements.accordionItems.push(i)})}_handleFocus(){this.elements.accordionItems.forEach((t,e)=>{this._addEventListener("focus",t.dom.toggle,()=>{this.currentChild=e})})}_handleClick(){this.elements.accordionItems.forEach((t,e)=>{this._addEventListener("pointerup",t.dom.toggle,()=>{this.currentChild=e,this.currentEvent="mouse",t.toggle()})}),this.dom.expandController.forEach(t=>{this._addEventListener("pointerup",t,()=>{this.currentEvent="mouse",this.allowMultipleExpand&&this.openChildren()})}),this.dom.collapseController.forEach(t=>{this._addEventListener("pointerup",t,()=>{this.currentEvent="mouse",this.allowNoExpand&&this.closeChildren()})})}_handleKeydown(){this.dom.accordionItemToggles.forEach(t=>{this._addEventListener("keydown",t,e=>{const i=d(e);["Space","Enter"].includes(i)?(a(e),this.currentEvent="keyboard"):this.optionalKeySupport&&["ArrowDown","ArrowUp","Home","End"].includes(i)&&(a(e),this.currentEvent="keyboard")})}),this.dom.accordionControls.forEach(t=>{this._addEventListener("keydown",t,e=>{const i=d(e);["Space","Enter"].includes(i)&&(a(e),this.currentEvent="keyboard")})})}_handleKeyup(){this.dom.accordionItemToggles.forEach(t=>{this._addEventListener("keyup",t,e=>{const i=d(e);switch(i){case"Space":case"Enter":a(e),this.currentEvent="keyboard",this.currentAccordionItem.toggle();break}if(this.optionalKeySupport)switch(i){case"Home":a(e),this.focusFirstChild();break;case"End":a(e),this.focusLastChild();break;case"ArrowDown":a(e),this.focusNextChild();break;case"ArrowUp":a(e),this.focusPreviousChild();break}})}),this.dom.expandController.forEach(t=>{this._addEventListener("keyup",t,e=>{switch(d(e)){case"Space":case"Enter":a(e),this.currentEvent="keyboard",this.allowMultipleExpand&&this.openChildren()}})}),this.dom.collapseController.forEach(t=>{this._addEventListener("keyup",t,e=>{switch(d(e)){case"Space":case"Enter":a(e),this.currentEvent="keyboard",this.allowNoExpand&&this.closeChildren()}})})}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())}},q=Q;const v=/[\11\12\14\15\40]+/,g="data-once",F=document;function y(t,e,i){return t[`${e}Attribute`](g,i)}function m(t){if(typeof t!="string")throw new TypeError("once ID must be a string");if(t===""||v.test(t))throw new RangeError("once ID must not be empty or contain spaces");return`[${g}~="${t}"]`}function G(t){if(!(t instanceof Element))throw new TypeError("The element must be an instance of Element");return!0}function f(t,e=F){let i=t;if(t===null)i=[];else if(t)if(e instanceof Document||e instanceof DocumentFragment||e instanceof Element)typeof t=="string"?i=e.querySelectorAll(t):t instanceof Element&&(i=[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(i)}function E(t,e,i){return e.filter(s=>{const o=G(s)&&s.matches(t);return o&&i&&i(s),o})}function A(t,{add:e,remove:i}){const s=[];y(t,"has")&&y(t,"get").trim().split(v).forEach(n=>{s.indexOf(n)<0&&n!==i&&s.push(n)}),e&&s.push(e);const o=s.join(" ");y(t,o===""?"remove":"set",o)}function p(t,e,i){return E(`:not(${m(t)})`,f(e,i),s=>A(s,{add:t}))}p.remove=(t,e,i)=>E(m(t),f(e,i),s=>A(s,{remove:t})),p.filter=(t,e,i)=>E(m(t),f(e,i)),p.find=(t,e)=>f(t?m(t):`[${g}]`,e);var N=p,V=(t={},e=document,i=".accordion")=>{N("graupl-accordion-generator",i,e).forEach(s=>{const o=s.dataset.grauplAccordionOptions?JSON.parse(s.dataset.grauplAccordionOptions.replace(/'/g,'"'))||{}:{};new q({accordionElement:s,initialize:!0,...t,...o})})};document.addEventListener("DOMContentLoaded",()=>{V()})})();
|
|
4
4
|
|
|
5
5
|
//# sourceMappingURL=accordion.js.map
|