@flexilla/collapse/dist/collapse.umd.cjs

A versatile and interactive collapse component for creating collapsible sections in web applications, conserving space and improving user experience.

(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a["@flexilla/collapse"]={}))})(this,function(a){"use strict";var T=Object.defineProperty;var I=(a,l,r)=>l in a?T(a,l,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[l]=r;var n=(a,l,r)=>I(a,typeof l!="symbol"?l+"":l,r);const l=(t,e=document.body)=>e.querySelector(t),r=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),x=({element:t,callback:e,type:s,keysCheck:i})=>{const o=getComputedStyle(t),c=o.transition;if(c!=="none"&&c!==""&&!i.includes(c)){const u="transitionend",m=()=>{t.removeEventListener(u,m),e()};t.addEventListener(u,m,{once:!0})}else e()},w=({element:t,callback:e})=>{x({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},d=(t,e,s)=>{const i=new CustomEvent(e,{detail:s});t.dispatchEvent(i)},g=(t,e)=>{t.setAttribute("aria-hidden",e==="open"?"false":"true"),t.setAttribute("data-state",e)},y=(t,e="close",s="0px")=>{t.style.height=e==="open"?"auto":s,g(t,e)},E=t=>{if(t.getAttribute("data-state")==="open")return;g(t,"open");const e=t.scrollHeight;t.style.height=`${e}px`,w({element:t,callback:()=>{t.getAttribute("data-state")==="open"&&(t.style.height="auto")}})},b=(t,e="0px")=>{t.getAttribute("data-state")!=="close"&&(t.style.height=`${t.scrollHeight}px`,t.offsetHeight,t.style.height=e,g(t,"close"))};class p{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,s,i){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,s)||(window.$flexillaInstances[e].push({element:s,instance:i}),i)}static getInstance(e,s){var i,o;return this.initGlobalRegistry(),(o=(i=window.$flexillaInstances[e])==null?void 0:i.find(c=>c.element===s))==null?void 0:o.instance}static removeInstance(e,s){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(i=>i.element!==s))}}const h=class h{constructor(e,s={},i){n(this,"element");n(this,"defaultState");n(this,"collapseId");n(this,"collapseTrigger");n(this,"options");n(this,"closeHeight");n(this,"show",()=>{var e,s;d(this.element,"before-expand",{isExpanded:!1}),this.collapseTrigger&&(this.collapseTrigger.ariaExpanded="true"),E(this.element),(s=(e=this.options).onToggle)==null||s.call(e,{isExpanded:!0}),d(this.element,"expanded",{isExpanded:!1})});n(this,"hide",()=>{var e,s;this.collapseTrigger&&(this.collapseTrigger.ariaExpanded="false"),b(this.element,`${this.closeHeight}px`),(s=(e=this.options).onToggle)==null||s.call(e,{isExpanded:!1}),d(this.element,"collapsed",{isExpanded:!1})});n(this,"toggle",()=>{var s,i;const e=this.element.dataset.state==="open";e?this.hide():this.show(),(i=(s=this.options).onToggle)==null||i.call(s,{isExpanded:!e})});n(this,"setCloseHeight",e=>{this.closeHeight=e});let o;if(o=typeof e=="string"?l(`${e}`):e,typeof e=="string"&&!o)throw new Error(`No element found matching selector: ${e}`);if(!(o instanceof HTMLElement))throw new Error("Provided element must be a valid HTMLElement or selector");this.element=o;const c=p.getInstance("collapse",this.element);if(c)return c;this.collapseId=this.element.getAttribute("id"),this.collapseTrigger=l(`${i}`)||l(`[data-collapse-trigger][data-target*='${this.collapseId}']`),this.options=s,this.defaultState=this.element.dataset.state?this.element.dataset.state==="open"?"open":"close":this.options.defaultState||"close",this.closeHeight=this.element.dataset.closeHeight?parseInt(this.element.dataset.closeHeight||"0"):this.options.closeHeight||0,this.initCollapse(),p.register("collapse",this.element,this)}initCollapse(){this.collapseTrigger instanceof HTMLElement&&(this.collapseTrigger.addEventListener("click",this.toggle),this.collapseTrigger.ariaExpanded=this.defaultState==="open"?"true":"false"),y(this.element,this.defaultState,`${this.closeHeight}px`)}cleanup(){this.collapseTrigger instanceof HTMLElement&&this.collapseTrigger.removeEventListener("click",this.toggle),p.removeInstance("collapse",this.element)}};n(h,"init",(e,s={},i)=>new h(e,s,i)),n(h,"autoInit",(e="[data-fx-collapse]")=>{const s=r(e);for(const i of s)new h(i)});let f=h;a.Collapse=f,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});