https://www.parcum.be/frontend/dropdown.component-BDuc-clr.js

1import{D as l}from"./site-B0IjnxmE.js";import{a as d,c as a,f as u,b as m,s as c}from"./floating-ui.dom-CZ6Jgc9K.js";class b{constructor(){Array.from(document.querySelectorAll("[data-dropdown]")).forEach((e,n)=>{e.hasAttribute("data-dropdown-initialized")||new o(e,n)}),l.onDynamicContent(document.documentElement,"[data-dropdown]",e=>{e.forEach(n=>{n.hasAttribute("data-dropdown-initialized")||new o(n,e.length)})})}}class o{constructor(t,e,n="bottom-start"){if(this.strategy="absolute",!t.hasAttribute("data-dropdown-trigger")){console.error('Please add data-dropdown-trigger to the dropdown element. Example: <div data-dropdown data-dropdown-trigger="button-id"><button id="button-id">Toggle</button><div>Menu</div></div>',t);return}if(this.buttonElement=document.getElementById(t.getAttribute("data-dropdown-trigger")),!this.buttonElement){console.error("Dropdown triggerbutton not found");return}if(this.buttonElement.tagName!=="BUTTON"){console.error("Dropdown button must be a <button> element");return}this.menuElement=t;const i=t.getAttribute("data-dropdown-placement");if(this.placement=i||n,t.hasAttribute("data-dropdown-position-element")){if(this.positionElement=document.getElementById(t.getAttribute("data-dropdown-position-element")),!this.positionElement){console.error("Position element not found for dropdown");return}}else this.positionElement=this.buttonElement;if(t.hasAttribute("data-dropdown-strategy")){const s=t.getAttribute("data-dropdown-strategy");if(s==="absolute"||s==="fixed")this.strategy=s;else{console.error('Invalid data-dropdown-strategy value. Use "absolute" or "fixed".');return}}this.menuItems=Array.from(this.menuElement.querySelectorAll("a[href],button:not([disabled]),input:not([disabled]),textarea:not([disabled]),select:not([disabled])")),this.menuElement.classList.add("hidden"),this.menuElement.id===""&&(this.menuElement.id=`dropdown-menu-${e}`),this.buttonElement.setAttribute("aria-controls",this.menuElement.id),this.buttonElement.setAttribute("aria-expanded","false"),this.menuElement.classList.add(this.strategy),this.clickListener=this.clickAction.bind(this),this.keydownListener=this.keydownAction.bind(this),this.scrollListener=this.scrollAction.bind(this),this.clickOutsideListener=this.clickOutsideAction.bind(this),this.buttonElement.addEventListener("click",this.clickListener),this.menuElement.hasAttribute("open")&&(this.positionMenu(),this.buttonElement.setAttribute("aria-expanded","true"),document.addEventListener("click",this.clickOutsideListener),document.addEventListener("keydown",this.keydownListener),document.addEventListener("scroll",this.scrollListener)),t.setAttribute("data-dropdown-initialized","true")}toggleMenu(){this.menuElement.getAttribute("open")===null?(this.menuElement.setAttribute("open",""),this.buttonElement.setAttribute("aria-expanded","true"),this.positionMenu(),document.addEventListener("click",this.clickOutsideListener),document.addEventListener("keydown",this.keydownListener),document.addEventListener("scroll",this.scrollListener)):(this.menuElement.removeAttribute("open"),this.buttonElement.setAttribute("aria-expanded","false"),document.removeEventListener("click",this.clickOutsideListener),document.removeEventListener("keydown",this.keydownListener),document.removeEventListener("scroll",this.scrollListener))}clickAction(t){this.toggleMenu()}clickOutsideAction(t){!this.menuElement.contains(t.target)&&t.target!==this.buttonElement&&this.menuElement.hasAttribute("open")&&this.toggleMenu()}scrollAction(t){this.positionMenu()}keydownAction(t){if(t.key==="Escape"&&(t.preventDefault(),this.buttonElement.focus(),this.toggleMenu()),t.key==="ArrowUp"&&(t.preventDefault(),this.menuItems[0]!==document.activeElement)){const e=this.menuItems.findIndex(n=>n===document.activeElement);e>0&&this.menuItems[e-1].focus()}if(t.key==="ArrowDown"&&(t.preventDefault(),this.menuItems[this.menuItems.length-1]!==document.activeElement)){const e=this.menuItems.findIndex(n=>n===document.activeElement);e<this.menuItems.length-1&&this.menuItems[e+1].focus()}t.key==="Tab"&&t.shiftKey&&this.buttonElement===document.activeElement&&this.toggleMenu(),t.key==="Tab"&&!t.shiftKey&&this.menuItems[this.menuItems.length-1]===document.activeElement&&this.toggleMenu()}positionMenu(){const t=this;d(this.positionElement,this.menuElement,()=>{a(this.positionElement,this.menuElement,{strategy:t.strategy,placement:t.placement,middleware:[u(),m({padding:16}),c({apply({availableWidth:e,availableHeight:n,elements:i}){Object.assign(i.floating.style,{minWidth:`${Math.min(t.positionElement.clientWidth,e)}px`})}})]}).then(({x:e,y:n})=>{Object.assign(this.menuElement.style,{left:`${e}px`,top:`${n}px`})})})}}export{b as default};