@flexilla/collapse/dist/index.cjs

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

Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@flexilla/utilities`),t=require(`@flexilla/collapsible`),n=require(`@flexilla/manager`);var r=class r{element;defaultState;collapseId;collapseTrigger;options;closeHeight;constructor(t,r={},i){let a;if(a=typeof t==`string`?(0,e.$)(`${t}`):t,typeof t==`string`&&!a)throw Error(`No element found matching selector: ${t}`);if(!(a instanceof HTMLElement))throw Error(`Provided element must be a valid HTMLElement or selector`);this.element=a;let o=n.FlexillaManager.getInstance(`collapse`,this.element);if(o)return o;this.collapseId=this.element.getAttribute(`id`),this.collapseTrigger=(0,e.$)(`${i}`)||(0,e.$)(`[data-collapse-trigger][data-target*='${this.collapseId}']`),this.options=r,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(),n.FlexillaManager.register(`collapse`,this.element,this)}show=()=>{(0,e.dispatchCustomEvent)(this.element,`before-expand`,{isExpanded:!1}),this.collapseTrigger&&(this.collapseTrigger.ariaExpanded=`true`),(0,t.expandElement)(this.element),this.options.onToggle?.({isExpanded:!0}),(0,e.dispatchCustomEvent)(this.element,`expanded`,{isExpanded:!1})};hide=()=>{this.collapseTrigger&&(this.collapseTrigger.ariaExpanded=`false`),(0,t.collapseElement)(this.element,`${this.closeHeight}px`),this.options.onToggle?.({isExpanded:!1}),(0,e.dispatchCustomEvent)(this.element,`collapsed`,{isExpanded:!1})};toggle=()=>{let e=this.element.dataset.state===`open`;e?this.hide():this.show(),this.options.onToggle?.({isExpanded:!e})};setCloseHeight=e=>{this.closeHeight=e};initCollapse(){this.collapseTrigger instanceof HTMLElement&&(this.collapseTrigger.addEventListener(`click`,this.toggle),this.collapseTrigger.ariaExpanded=this.defaultState===`open`?`true`:`false`),(0,t.initCollapsible)(this.element,this.defaultState,`${this.closeHeight}px`)}cleanup(){this.collapseTrigger instanceof HTMLElement&&this.collapseTrigger.removeEventListener(`click`,this.toggle),n.FlexillaManager.removeInstance(`collapse`,this.element)}static init=(e,t={},n)=>new r(e,t,n);static autoInit=(t=`[data-fx-collapse]`)=>{let n=(0,e.$$)(t);for(let e of n)new r(e)}};exports.Collapse=r;