@flexilla/collapse/dist/index.js

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

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