@graupl/graupl 1.0.0-beta.31 → 1.0.0-beta.33
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/tabs.css +2 -0
- package/dist/css/component/tabs.css.map +1 -0
- package/dist/js/accordion.js +3 -3
- package/dist/js/accordion.js.map +1 -1
- package/dist/js/alert.js +3 -3
- package/dist/js/alert.js.map +1 -1
- package/dist/js/carousel.js +3 -3
- package/dist/js/carousel.js.map +1 -1
- package/dist/js/component/accordion.cjs.js +3 -3
- package/dist/js/component/accordion.cjs.js.map +1 -1
- package/dist/js/component/accordion.es.js +3 -3
- package/dist/js/component/accordion.es.js.map +1 -1
- package/dist/js/component/accordion.iife.js +3 -3
- package/dist/js/component/accordion.iife.js.map +1 -1
- package/dist/js/component/alert.cjs.js +3 -3
- package/dist/js/component/alert.cjs.js.map +1 -1
- package/dist/js/component/alert.es.js +3 -3
- package/dist/js/component/alert.es.js.map +1 -1
- package/dist/js/component/alert.iife.js +3 -3
- package/dist/js/component/alert.iife.js.map +1 -1
- package/dist/js/component/carousel.cjs.js +3 -3
- package/dist/js/component/carousel.cjs.js.map +1 -1
- package/dist/js/component/carousel.es.js +3 -3
- package/dist/js/component/carousel.es.js.map +1 -1
- package/dist/js/component/carousel.iife.js +3 -3
- package/dist/js/component/carousel.iife.js.map +1 -1
- package/dist/js/component/disclosure.cjs.js +3 -3
- package/dist/js/component/disclosure.cjs.js.map +1 -1
- package/dist/js/component/disclosure.es.js +3 -3
- package/dist/js/component/disclosure.es.js.map +1 -1
- package/dist/js/component/disclosure.iife.js +3 -3
- package/dist/js/component/disclosure.iife.js.map +1 -1
- package/dist/js/component/tabs.cjs.js +3 -3
- package/dist/js/component/tabs.cjs.js.map +1 -1
- package/dist/js/component/tabs.es.js +3 -3
- package/dist/js/component/tabs.es.js.map +1 -1
- package/dist/js/component/tabs.iife.js +3 -3
- package/dist/js/component/tabs.iife.js.map +1 -1
- package/dist/js/disclosure.js +3 -3
- package/dist/js/disclosure.js.map +1 -1
- package/dist/js/generator/accordion.cjs.js +3 -3
- package/dist/js/generator/accordion.cjs.js.map +1 -1
- package/dist/js/generator/accordion.es.js +3 -3
- package/dist/js/generator/accordion.es.js.map +1 -1
- package/dist/js/generator/accordion.iife.js +3 -3
- package/dist/js/generator/accordion.iife.js.map +1 -1
- package/dist/js/generator/alert.cjs.js +3 -3
- package/dist/js/generator/alert.cjs.js.map +1 -1
- package/dist/js/generator/alert.es.js +3 -3
- package/dist/js/generator/alert.es.js.map +1 -1
- package/dist/js/generator/alert.iife.js +3 -3
- package/dist/js/generator/alert.iife.js.map +1 -1
- package/dist/js/generator/carousel.cjs.js +3 -3
- package/dist/js/generator/carousel.cjs.js.map +1 -1
- package/dist/js/generator/carousel.es.js +3 -3
- package/dist/js/generator/carousel.es.js.map +1 -1
- package/dist/js/generator/carousel.iife.js +3 -3
- package/dist/js/generator/carousel.iife.js.map +1 -1
- package/dist/js/generator/disclosure.cjs.js +3 -3
- package/dist/js/generator/disclosure.cjs.js.map +1 -1
- package/dist/js/generator/disclosure.es.js +3 -3
- package/dist/js/generator/disclosure.es.js.map +1 -1
- package/dist/js/generator/disclosure.iife.js +3 -3
- package/dist/js/generator/disclosure.iife.js.map +1 -1
- package/dist/js/generator/navigation.cjs.js +1 -1
- package/dist/js/generator/navigation.cjs.js.map +1 -1
- package/dist/js/generator/navigation.es.js +1 -1
- package/dist/js/generator/navigation.es.js.map +1 -1
- package/dist/js/generator/navigation.iife.js +1 -1
- package/dist/js/generator/navigation.iife.js.map +1 -1
- package/dist/js/generator/tabs.cjs.js +3 -3
- package/dist/js/generator/tabs.cjs.js.map +1 -1
- package/dist/js/generator/tabs.es.js +3 -3
- package/dist/js/generator/tabs.es.js.map +1 -1
- package/dist/js/generator/tabs.iife.js +3 -3
- package/dist/js/generator/tabs.iife.js.map +1 -1
- package/dist/js/graupl.js +3 -3
- 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 +3 -3
- package/dist/js/tabs.js.map +1 -1
- package/package.json +1 -1
- package/scss/component/tabs.scss +3 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
function
|
|
2
|
-
- ${this.errors.map(t=>t.
|
|
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){u({initializeClass:t}),this._classes.initialize!==t&&(this._classes.initialize=t)}get focusState(){return this._focusState}set focusState(t){j({focusState:t}),this._focusState!==t&&(this._focusState=t)}get currentEvent(){return this._currentEvent}set currentEvent(t){z({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:this._breakpoint===""?"":`(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 id(){return this._id}get isValid(){return this._valid}get isInitialized(){return this._initialized}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}):this._dom[s]!==null&&(t[`${s}Element`]=this._dom[s]);const e=c(HTMLElement,t,{shouldThrow:!1});e.status||(this._errors=[...this._errors,...e.errors],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=f(t,{shouldThrow:!1});e.status||(this._errors=[...this._errors,...e.errors],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=u(t,{shouldThrow:!1});e.status||(this._errors=[...this._errors,...e.errors],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,{shouldThrow:!1});e.status||(this._errors=[...this._errors,...e.errors],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,{shouldThrow:!1});e.status||(this._errors=[...this._errors,...e.errors],this._valid=!1)}if(this._key!==""){const t=n("string",{key:this._key},{shouldThrow:!1});t.status||(this._errors=[...this._errors,...t.errors],this._valid=!1)}if(this._prefix!==""){const t=n("string",{prefix:this._prefix},{shouldThrow:!1});t.status||(this._errors=[...this._errors,...t.errors],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=!1}={}){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.`);c(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.mediaQuery!==""&&(this._mediaQueryList=window.matchMedia(this.mediaQuery),this._mediaQueryList.addEventListener("change",this._mediaQueryListEventCallback),this._mediaQueryListEventCallback(this._mediaQueryList))}_handleFocus(){}_handleClick(){}_handleKeydown(){}_handleKeyup(){}_store(){c(_,{storage:window.Graupl},{shouldThrow:!1}).status||new _({scope:"Graupl"}),window.Graupl.set({key:this.id!==""?this.id:this.key,type:this._storageKey,data:this})}_unstore(){c(_,{storage:window.Graupl},{shouldThrow:!1}).status&&window.Graupl.clear({key:this.id!==""?this.id:this.key,type:this._storageKey})}_setInterval(t,e,s="_default"){this._clearInterval(s),this._intervals[s]=setInterval(t,e)}_clearInterval(t="_default"){clearInterval(this._intervals[t])}_clearIntervals(){for(const t of Object.keys(this._intervals))this._clearInterval(t)}_setTimeout(t,e,s="_default"){this._clearTimeout(s),this._timeouts[s]=setTimeout(t,e)}_clearTimeout(t="_default"){clearTimeout(this._timeouts[t])}_clearTimeouts(){for(const t of Object.keys(this._timeouts))this._clearTimeout(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.`);c(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);let r=-1;this._listeners.forEach((o,d)=>{o.type===t&&o.element===e&&o.listener===s&&JSON.stringify(o.options)===JSON.stringify(i)&&(r=d)}),r!==-1&&this._listeners.splice(r,1)}_removeEventListeners({type:t=null,element:e=null}={}){[...this._listeners].forEach(s=>{t!==null&&s.type!==t||e!==null&&s.element!==e||this._removeEventListener(s.type,s.element,s.listener,s.options)})}dispose(){this._clearIntervals(),this._clearTimeouts(),this._removeEventListeners(),this._unstore(),delete this}},y=Q,N=class extends y{_dom={item:null,toggle:null,header:null,content:null};_protectedDOMElements=["item","toggle","header","content"];_elements={parent:null};_open=new g(!1);_locked=new g(!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:s,accordionItemContentElement:i,parentAccordion:r=null}){super({prefix:r.prefix,key:r.key}),this._dom.item=t,this._dom.toggle=e,this._dom.header=s,this._dom.content=i,this._elements.parent=r}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(){p("button",{toggle:this.dom.toggle},{shouldThrow:!1}).status||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),p("section",{content:this.dom.content},{shouldThrow:!1}).status||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:s,openClass:i,transitionClass:r,openDuration:o}=this.elements.parent;this.dom.toggle.setAttribute("aria-expanded","true"),e&&r!==""?(l(r,this.dom.item),requestAnimationFrame(()=>{h(s,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{l(i,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height+this.dom.content.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{this._setTimeout(()=>{h(r,this.dom.item),this.dom.item.style.height=""},o)})})})):(l(i,this.dom.item),h(s,this.dom.item)),this.dom.content.removeAttribute("inert"),t&&this._dispatchEvent("expand",this.dom.item)}_conceal({emit:t=!0,transition:e=!0}={}){const{closeClass:s,openClass:i,transitionClass:r,closeDuration:o}=this.elements.parent;this.dom.toggle.setAttribute("aria-expanded","false"),e&&r!==""?(l(r,this.dom.item),this.dom.item.style.height=`${this.dom.item.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{h(i,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{l(s,this.dom.item),requestAnimationFrame(()=>{this._setTimeout(()=>{h(r,this.dom.item),this.dom.item.style.height=""},o)})})})):(l(s,this.dom.item),h(i,this.dom.item)),this.dom.content.setAttribute("inert","true"),t&&this._dispatchEvent("collapse",this.dom.item)}show({force:t=!1,preserveState:e=!1,emit:s=!0,transition:i=!0}={}){this.isOpen&&!t||(this._reveal({emit:s,transition:i}),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:s=!0,transition:i=!0}={}){!this.isOpen&&!t||!this.elements.parent.allowNoExpand&&this.elements.parent.openAccordionItems.length<=1||(this._conceal({emit:s,transition:i}),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()})}},V=N;function m(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,Character:isNaN(e)&&!!e.match(/^[a-zA-Z]{1}$/),Tab:e==="Tab"||e===9,Asterisk:e==="*"||e===56};return Object.keys(s).find(i=>s[i]===!0)||""}catch{return""}}function a(t){t.preventDefault(),t.stopPropagation()}var q=class extends y{_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,accordionItemsSelector:e=".accordion-item",accordionItemTogglesSelector:s=".accordion-item-toggle",accordionItemHeadersSelector:i=".accordion-item-header",accordionItemContentsSelector:r=".accordion-item-content",accordionControlContainerSelector:o=".accordion-control-container",accordionControlsSelector:d=".accordion-control",expandControllerSelector:E=".expand-all",collapseControllerSelector:w=".collapse-all",openClass:C="show",closeClass:b="hide",transitionClass:k="transitioning",transitionDuration:v=300,openDuration:$=-1,closeDuration:x=-1,optionalKeySupport:A=!1,allowMultipleExpand:I=!0,allowNoExpand:S=!0,automaticActivation:T=!1,prefix:M="graupl-",key:D=null,initializeClass:O="initializing",initialize:L=!1}){super({prefix:M,key:D,initializeClass:O}),this._dom.accordion=t,this._selectors.accordionItems=e,this._selectors.accordionItemToggles=s,this._selectors.accordionItemHeaders=i,this._selectors.accordionItemContents=r,this._selectors.accordionControlContainer=o,this._selectors.accordionControls=d,this._selectors.expandController=E,this._selectors.collapseController=w,this._classes.open=C||"",this._classes.close=b||"",this._classes.transition=k||"",this._durations.transition=v,this._durations.open=$,this._durations.close=x,this._automatic=T,this._optionalKeySupport=A,this._allowMultipleExpand=I,this._allowNoExpand=S,L&&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(()=>{h(this._classes.initialize,this.dom.accordion)}),this.isValid&&(this._initialized=!0)}}get openClass(){return this._classes.open}set openClass(t){u({openClass:t}),this._classes.open!==t&&(this._classes.open=t)}get closeClass(){return this._classes.close}set closeClass(t){u({closeClass:t}),this._classes.close!==t&&(this._classes.close=t)}get transitionClass(){return this._classes.transition}set transitionClass(t){u({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 currentChild(){return this._currentChild}set currentChild(t){n("number",{currentChild:t}),this._currentChild!==t&&t>=0&&t<this.elements.accordionItems.length&&(this._currentChild=t)}get optionalKeySupport(){return this._optionalKeySupport}set optionalKeySupport(t){n("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){n("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){n("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=n("boolean",{automaticActivation:this._automatic,optionalKeySupport:this._optionalKeySupport,allowMultipleExpand:this._allowMultipleExpand,allowNoExpand:this._allowNoExpand});return t.status||(this._errors=[...this._errors,...t.errors],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 s=new V({accordionItemElement:t,accordionItemToggleElement:this.dom.accordionItemToggles[e],accordionItemHeaderElement:this.dom.accordionItemHeaders[e],accordionItemContentElement:this.dom.accordionItemContents[e],parentAccordion:this});s.initialize(),this.elements.accordionItems.push(s)})}_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("click",t.dom.toggle,()=>{this.currentChild=e,this.currentEvent="mouse",t.toggle()})}),this.dom.expandController.forEach(t=>{this._addEventListener("click",t,()=>{this.currentEvent="mouse",this.allowMultipleExpand&&this.openChildren()})}),this.dom.collapseController.forEach(t=>{this._addEventListener("click",t,()=>{this.currentEvent="mouse",this.allowNoExpand&&this.closeChildren()})})}_handleKeydown(){this.dom.accordionItemToggles.forEach(t=>{this._addEventListener("keydown",t,e=>{const s=m(e);["Space","Enter"].includes(s)?(a(e),this.currentEvent="keyboard"):this.optionalKeySupport&&["ArrowDown","ArrowUp","Home","End"].includes(s)&&(a(e),this.currentEvent="keyboard")})}),this.dom.accordionControls.forEach(t=>{this._addEventListener("keydown",t,e=>{const s=m(e);["Space","Enter"].includes(s)&&(a(e),this.currentEvent="keyboard")})})}_handleKeyup(){this.dom.accordionItemToggles.forEach(t=>{this._addEventListener("keyup",t,e=>{const s=m(e);switch(s){case"Space":case"Enter":a(e),this.currentEvent="keyboard",this.currentAccordionItem.toggle();break}if(this.optionalKeySupport)switch(s){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(m(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(m(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())}},H=q;module.exports=H;
|
|
1
|
+
function d(t,e,{shouldThrow:s=!0}={}){const i={status:!0,errors:[]};try{if(typeof e!="object"){const r=typeof e;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${r}" given.`)}for(const r in e)try{if(!(e[r]instanceof t)){const o=typeof e[r];throw new TypeError(`${r} must be an instance of ${t.name}. "${o}" given.`)}}catch(o){i.status=!1,i.errors.push(o)}}catch(r){i.status=!1,i.errors.push(r)}if(s&&!i.status)throw i.errors[0];return i}function n(t,e,{shouldThrow:s=!0}={}){const i={status:!0,errors:[]};try{if(typeof e!="object"){const r=typeof e;throw new TypeError(`Values given to isValidType() must be inside of an object. "${r}" given.`)}for(const r in e)try{const o=typeof e[r];if(o!==t)throw new TypeError(`${r} must be a ${t}. "${o}" given.`)}catch(o){i.status=!1,i.errors.push(o)}}catch(r){i.status=!1,i.errors.push(r)}if(s&&!i.status)throw i.errors[0];return i}function f(t,{shouldThrow:e=!0}={}){const s={status:!0,errors:[]};try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Values given to isQuerySelector() must be inside of an object. "${i}" given.`)}for(const i in t)try{try{if(t[i]===null)throw new Error;document.querySelector(t[i])}catch{throw new TypeError(`${i} must be a valid query selector. "${t[i]}" given.`)}}catch(r){s.status=!1,s.errors.push(r)}}catch(i){s.status=!1,s.errors.push(i)}if(e&&!s.status)throw s.errors[0];return s}function u(t,{shouldThrow:e=!0}={}){const s={status:!0,errors:[]};try{if(typeof t!="object"||Array.isArray(t)){const i=typeof t;throw new TypeError(`Values given to isValidClassList() must be inside of an object. "${i}" given.`)}for(const i in t)try{const r=typeof t[i];if(r!=="string")if(Array.isArray(t[i]))t[i].forEach(o=>{if(typeof o!="string")throw new TypeError(`${i} must be a string or an array of strings. An array containing non-strings given.`)});else throw new TypeError(`${i} must be a string or an array of strings. "${r}" given.`);else{const o={};o[i]=t[i],f(o)}}catch(r){s.status=!1,s.errors.push(r)}}catch(i){s.status=!1,s.errors.push(i)}if(e&&!s.status)throw s.errors[0];return s}function j(t,{shouldThrow:e=!0}={}){const s={status:!0,errors:[]};try{if(typeof t!="object"){const r=typeof t;throw new TypeError(`Values given to isValidState() must be inside of an object. "${r}" given.`)}const i=["none","self","child"];for(const r in t)try{if(!i.includes(t[r]))throw new TypeError(`${r} must be one of the following values: ${i.join(", ")}. "${t[r]}" given.`)}catch(o){s.status=!1,s.errors.push(o)}}catch(i){s.status=!1,s.errors.push(i)}if(e&&!s.status)throw s.errors[0];return s}function z(t,{shouldThrow:e=!0}={}){const s={status:!0,errors:[]};try{if(typeof t!="object"){const r=typeof t;throw new TypeError(`Values given to isValidEvent() must be inside of an object. "${r}" given.`)}const i=["none","mouse","keyboard","character"];for(const r in t)try{if(!i.includes(t[r]))throw new TypeError(`${r} must be one of the following values: ${i.join(", ")}. "${t[r]}" given.`)}catch(o){s.status=!1,s.errors.push(o)}}catch(i){s.status=!1,s.errors.push(i)}if(e&&!s.status)throw s.errors[0];return s}function p(t,e,{shouldThrow:s=!0}={}){const i={status:!0,errors:[]};try{if(n("string",{tagName:t},{shouldThrow:!0}).status&&d(HTMLElement,e,{shouldThrow:!0}).status){const r=t.toLowerCase();for(const o in e)try{if(e[o].tagName.toLowerCase()!==r)throw new TypeError(`${o} must be a <${r}> element. <${e[o].tagName.toLowerCase()}> given.`)}catch(l){i.status=!1,i.errors.push(l)}}}catch(r){i.status=!1,i.errors.push(r)}if(s&&!i.status)throw i.errors[0];return i}function K(t,e,{shouldThrow:s=!0}={}){const i={status:!0,errors:[]};try{if(!Object.prototype.hasOwnProperty.call(e.events,t))throw new TypeError(`Event type "${t}" is not valid for ${e.constructor.name}. Valid event types are: "${Object.keys(e.events).join('", ')}".`)}catch(r){i.status=!1,i.errors.push(r)}if(s&&!i.status)throw i.errors[0];return i}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 Q=class{_equals=Object.is;_current;_committed;constructor(t,{equals:e=Object.is}={}){this._equals=e||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}},g=Q,V=class{_scope;_type="_default";_storage={};constructor({scope:t,type:e=null,initialize:s=!0}={}){this._scope=t,this._type=e||"_default",s&&this.initialize()}initialize(){window[this.scope]=this}get scope(){return this._scope}get type(){return this._type}set type(t){n("string",{type:t})&&(this._type=t)}get storage(){return this._storage}get({type:t=this.type,key:e=null}={}){const s=n("string",{type:t});if(!s.status)throw new Error(`StorageManager (${this.scope}): ${s.message}`);if(!this.storage[t])throw new Error(`StorageManager (${this.scope}): Type "${t}" is not initialized.`);if(e!==null){const i=n("string",{key:e});if(!i.status)throw new Error(`StorageManager (${this.scope}): ${i.message}`);return this.storage[t][e]}return this.storage[t]}set({type:t=this.type,key:e=null,data:s={}}={}){const i=n("string",{type:t}),r=n("object",{data:s});if(!i.status)throw new Error(`StorageManager (${this.scope}): ${i.message}`);if(!r.status)throw new Error(`StorageManager (${this.scope}): ${r.message}`);if(e!==null){const o=n("string",{key:e});if(!o.status)throw new Error(`StorageManager (${this.scope}): ${o.message}`);this._storage[t]||(this._storage[t]={}),this._storage[t][e]=s}else this._storage[t]=s}clear({type:t=this.type,key:e=null}={}){const s=n("string",{type:t});if(!s.status)throw new Error(`StorageManager (${this.scope}): ${s.message}`);if(e!==null){const i=n("string",{key:e});if(!i.status)throw new Error(`StorageManager (${this.scope}): ${i.message}`);delete this.storage[t][e]}else delete this.storage[t]}dispose(){delete this._storage,delete this}},_=V,q=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;_initialized=!1;_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:
|
|
2
|
+
- ${this.errors.map(t=>t.message).join(`
|
|
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){u({initializeClass:t}),this._classes.initialize!==t&&(this._classes.initialize=t)}get focusState(){return this._focusState}set focusState(t){j({focusState:t}),this._focusState!==t&&(this._focusState=t)}get currentEvent(){return this._currentEvent}set currentEvent(t){z({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:this._breakpoint===""?"":`(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 id(){return this._id}get isValid(){return this._valid}get isInitialized(){return this._initialized}get errors(){return this._errors}_validate(){if(Object.keys(this._dom).length>0){const s={};for(const r of Object.keys(this._dom))Array.isArray(this._dom[r])?this._dom[r].forEach((o,l)=>{s[`${r}Element[${l}]`]=o}):this._dom[r]!==null&&(s[`${r}Element`]=this._dom[r]);const i=d(HTMLElement,s,{shouldThrow:!1});i.status||(this._errors=[...this._errors,...i.errors],this._valid=!1)}if(Object.keys(this._selectors).length>0){const s={};for(const r of Object.keys(this._selectors))s[`${r}Selector`]=this._selectors[r];const i=f(s,{shouldThrow:!1});i.status||(this._errors=[...this._errors,...i.errors],this._valid=!1)}if(Object.keys(this._classes).length>0){const s={};for(const r of Object.keys(this._classes))this._classes[r]!==""&&(s[`${r}Class`]=this._classes[r]);const i=u(s,{shouldThrow:!1});i.status||(this._errors=[...this._errors,...i.errors],this._valid=!1)}if(Object.keys(this._durations).length>0){const s={};for(const r of Object.keys(this._durations))s[`${r}Duration`]=this._durations[r];const i=n("number",s,{shouldThrow:!1});i.status||(this._errors=[...this._errors,...i.errors],this._valid=!1)}if(Object.keys(this.delays).length>0){const s={};for(const r of Object.keys(this.delays))s[`${r}Delay`]=this.delays[r];const i=n("number",s,{shouldThrow:!1});i.status||(this._errors=[...this._errors,...i.errors],this._valid=!1)}const t={_storageKey:this._storageKey,key:this._key,prefix:this._prefix,mediaQuery:this._mediaQueryString,breakpoint:this._breakpoint};this._protectedDOMElements.forEach(s=>{t[`_protectedDOMElementType[${s}]`]=s});const e=n("string",t,{shouldThrow:!1});return e.status||(this._errors=[...this._errors,...e.errors],this._valid=!1),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=!1}={}){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.`);d(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.mediaQuery!==""&&(this._mediaQueryList=window.matchMedia(this.mediaQuery),this._addEventListener("change",this._mediaQueryList,this._mediaQueryListEventCallback),this._mediaQueryListEventCallback(this._mediaQueryList))}_handleFocus(){}_handleClick(){}_handleKeydown(){}_handleKeyup(){}_store(){d(_,{storage:window.GrauplStorage},{shouldThrow:!1}).status||new _({scope:"GrauplStorage"}),window.GrauplStorage.set({key:this.id!==""?this.id:this.key,type:this._storageKey,data:this})}_unstore(){d(_,{storage:window.GrauplStorage},{shouldThrow:!1}).status&&window.GrauplStorage.clear({key:this.id!==""?this.id:this.key,type:this._storageKey})}_setInterval(t,e,s="_default"){this._clearInterval(s),this._intervals[s]=setInterval(t,e)}_clearInterval(t="_default"){clearInterval(this._intervals[t])}_clearIntervals(){for(const t of Object.keys(this._intervals))this._clearInterval(t)}_setTimeout(t,e,s="_default"){this._clearTimeout(s),this._timeouts[s]=setTimeout(t,e)}_clearTimeout(t="_default"){clearTimeout(this._timeouts[t])}_clearTimeouts(){for(const t of Object.keys(this._timeouts))this._clearTimeout(t)}_registerEvent(t,{bubbles:e=!0,detail:s={}}={}){n("string",{name:t}),n("boolean",{bubbles:e}),n("object",{detail:s});const i=`graupl${this.constructor.name}${t.charAt(0).toUpperCase()}${t.slice(1)}`;this._events[t]=new CustomEvent(i,{bubbles:e,detail:{component:this,...s}})}_dispatchEvent(t,e){K(t,this),d(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);let r=-1;this._listeners.forEach((o,l)=>{o.type===t&&o.element===e&&o.listener===s&&JSON.stringify(o.options)===JSON.stringify(i)&&(r=l)}),r!==-1&&this._listeners.splice(r,1)}_removeEventListeners({type:t=null,element:e=null}={}){[...this._listeners].forEach(s=>{t!==null&&s.type!==t||e!==null&&s.element!==e||this._removeEventListener(s.type,s.element,s.listener,s.options)})}dispose(){this._clearIntervals(),this._clearTimeouts(),this._removeEventListeners(),this._unstore(),delete this}},y=q,H=class extends y{_protectedDOMElements=["item","toggle","header","content"];_open=new g(!1);_locked=new g(!1);constructor({accordionItemElement:t,accordionItemToggleElement:e,accordionItemHeaderElement:s,accordionItemContentElement:i,parentAccordion:r=null}){super({prefix:r.prefix,key:r.key}),this._dom.item=t,this._dom.toggle=e,this._dom.header=s,this._dom.content=i,this._elements.parent=r,this._registerEvent("expand",{detail:{item:this}}),this._registerEvent("collapse",{detail:{item:this}})}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(){p("button",{toggle:this.dom.toggle},{shouldThrow:!1}).status||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),p("section",{content:this.dom.content},{shouldThrow:!1}).status||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:s,openClass:i,transitionClass:r,openDuration:o}=this.elements.parent;this.dom.toggle.setAttribute("aria-expanded","true"),e&&r!==""?(h(r,this.dom.item),requestAnimationFrame(()=>{c(s,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(()=>{this._setTimeout(()=>{c(r,this.dom.item),this.dom.item.style.height=""},o)})})})):(h(i,this.dom.item),c(s,this.dom.item)),this.dom.content.removeAttribute("inert"),t&&this._dispatchEvent("expand",this.dom.item)}_conceal({emit:t=!0,transition:e=!0}={}){const{closeClass:s,openClass:i,transitionClass:r,closeDuration:o}=this.elements.parent;this.dom.toggle.setAttribute("aria-expanded","false"),e&&r!==""?(h(r,this.dom.item),this.dom.item.style.height=`${this.dom.item.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{c(i,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{h(s,this.dom.item),requestAnimationFrame(()=>{this._setTimeout(()=>{c(r,this.dom.item),this.dom.item.style.height=""},o)})})})):(h(s,this.dom.item),c(i,this.dom.item)),this.dom.content.setAttribute("inert","true"),t&&this._dispatchEvent("collapse",this.dom.item)}show({force:t=!1,preserveState:e=!1,emit:s=!0,transition:i=!0}={}){this.isOpen&&!t||(this._reveal({emit:s,transition:i}),this._open.value=!0,e||this._open.commit(),this.elements.parent.allowExpandMultiple||(this.unlockSiblings(),this.closeSiblings()),this.elements.parent.allowCollapseAll||(this.elements.parent.openAccordionItems.length<=1?this.lock():this.unlockSiblings()))}hide({force:t=!1,preserveState:e=!1,emit:s=!0,transition:i=!0}={}){!this.isOpen&&!t||!this.elements.parent.allowCollapseAll&&this.elements.parent.openAccordionItems.length<=1||(this._conceal({emit:s,transition:i}),this._open.value=!1,e||this._open.commit(),!this.elements.parent.allowCollapseAll&&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()})}},F=H;function m(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,Character:isNaN(e)&&!!e.match(/^[a-zA-Z]{1}$/),Tab:e==="Tab"||e===9,Asterisk:e==="*"||e===56};return Object.keys(s).find(i=>s[i]===!0)||""}catch{return""}}function a(t){t.preventDefault(),t.stopPropagation()}var P=class extends y{_protectedDOMElements=["accordion"];_optionalKeySupport=!0;_expandMultiple=!0;_collapseAll=!0;_currentChild=0;_storageKey="accordions";constructor({accordionElement:t,accordionItemsSelector:e=".accordion-item",accordionItemTogglesSelector:s=".accordion-item-toggle",accordionItemHeadersSelector:i=".accordion-item-header",accordionItemContentsSelector:r=".accordion-item-content",accordionControlContainerSelector:o=".accordion-control-container",accordionControlsSelector:l=".accordion-control",expandControllerSelector:E=".expand-all",collapseControllerSelector:C=".collapse-all",openClass:w="show",closeClass:b="hide",transitionClass:k="transitioning",transitionDuration:A=300,openDuration:v=-1,closeDuration:$=-1,optionalKeySupport:S=!1,allowExpandMultiple:I=!0,allowCollapseAll:T=!0,automaticActivation:x=!1,prefix:M="graupl-",key:D=null,initializeClass:O="initializing",initialize:L=!1}){super({prefix:M,key:D,initializeClass:O}),this._dom.accordion=t,this._dom.accordionItems=[],this._dom.accordionItemToggles=[],this._dom.accordionItemHeaders=[],this._dom.accordionItemContents=[],this._dom.accordionControlContainer=null,this._dom.accordionControls=[],this._dom.expandController=[],this._dom.collapseController=[],this._selectors.accordionItems=e,this._selectors.accordionItemToggles=s,this._selectors.accordionItemHeaders=i,this._selectors.accordionItemContents=r,this._selectors.accordionControlContainer=o,this._selectors.accordionControls=l,this._selectors.expandController=E,this._selectors.collapseController=C,this._elements.accordionItems=[],this._classes.open=w||"",this._classes.close=b||"",this._classes.transition=k||"",this._durations.transition=A,this._durations.open=v,this._durations.close=$,this._automatic=x,this._optionalKeySupport=S,this._expandMultiple=I,this._collapseAll=T,L&&this.initialize()}initialize(){try{h(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.allowExpandMultiple&&this.dom.expandController.forEach(t=>{t.setAttribute("disabled","disabled")}),this.dom.collapseController.length>0&&!this.allowCollapseAll&&this.dom.collapseController.forEach(t=>{t.setAttribute("disabled","disabled")})}catch(t){console.error(t)}finally{requestAnimationFrame(()=>{c(this._classes.initialize,this.dom.accordion)}),this.isValid&&(this._initialized=!0)}}get openClass(){return this._classes.open}set openClass(t){u({openClass:t}),this._classes.open!==t&&(this._classes.open=t)}get closeClass(){return this._classes.close}set closeClass(t){u({closeClass:t}),this._classes.close!==t&&(this._classes.close=t)}get transitionClass(){return this._classes.transition}set transitionClass(t){u({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 currentChild(){return this._currentChild}set currentChild(t){n("number",{currentChild:t}),this._currentChild!==t&&t>=0&&t<this.elements.accordionItems.length&&(this._currentChild=t)}get optionalKeySupport(){return this._optionalKeySupport}set optionalKeySupport(t){n("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 allowExpandMultiple(){return this._expandMultiple}set allowExpandMultiple(t){n("boolean",{allowExpandMultiple:t}),this._expandMultiple!==t&&(this._expandMultiple=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 allowCollapseAll(){return this._collapseAll}set allowCollapseAll(t){n("boolean",{allowCollapseAll:t}),this._collapseAll!==t&&(this._collapseAll=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(){const t=n("boolean",{automaticActivation:this._automatic,optionalKeySupport:this._optionalKeySupport,allowExpandMultiple:this._expandMultiple,allowCollapseAll:this._collapseAll});return t.status||(this._errors=[...this._errors,...t.errors],this._valid=!1),super._validate()}_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 s=new F({accordionItemElement:t,accordionItemToggleElement:this.dom.accordionItemToggles[e],accordionItemHeaderElement:this.dom.accordionItemHeaders[e],accordionItemContentElement:this.dom.accordionItemContents[e],parentAccordion:this});s.initialize(),this.elements.accordionItems.push(s)})}_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("click",t.dom.toggle,()=>{this.currentChild=e,this.currentEvent="mouse",t.toggle()})}),this.dom.expandController.forEach(t=>{this._addEventListener("click",t,()=>{this.currentEvent="mouse",this.allowExpandMultiple&&this.openChildren()})}),this.dom.collapseController.forEach(t=>{this._addEventListener("click",t,()=>{this.currentEvent="mouse",this.allowCollapseAll&&this.closeChildren()})})}_handleKeydown(){this.dom.accordionItemToggles.forEach(t=>{this._addEventListener("keydown",t,e=>{const s=m(e);["Space","Enter"].includes(s)?(a(e),this.currentEvent="keyboard"):this.optionalKeySupport&&["ArrowDown","ArrowUp","Home","End"].includes(s)&&(a(e),this.currentEvent="keyboard")})}),this.dom.accordionControls.forEach(t=>{this._addEventListener("keydown",t,e=>{const s=m(e);["Space","Enter"].includes(s)&&(a(e),this.currentEvent="keyboard")})})}_handleKeyup(){this.dom.accordionItemToggles.forEach(t=>{this._addEventListener("keyup",t,e=>{const s=m(e);switch(s){case"Space":case"Enter":a(e),this.currentEvent="keyboard",this.currentAccordionItem.toggle();break}if(this.optionalKeySupport)switch(s){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(m(e)){case"Space":case"Enter":a(e),this.currentEvent="keyboard",this.allowExpandMultiple&&this.openChildren()}})}),this.dom.collapseController.forEach(t=>{this._addEventListener("keyup",t,e=>{switch(m(e)){case"Space":case"Enter":a(e),this.currentEvent="keyboard",this.allowCollapseAll&&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())}},G=P;module.exports=G;
|
|
4
4
|
|
|
5
5
|
//# sourceMappingURL=accordion.cjs.js.map
|