flexipop/dist/create-overlay.cjs

"use strict";var c=Object.defineProperty;var m=(n,e,t)=>e in n?c(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var i=(n,e,t)=>m(n,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./flexipop.cjs"),d=(n,e=document.body)=>e.querySelector(n),g=(n,e)=>{for(const[t,s]of Object.entries(e))n.setAttribute(t,s)},E=({element:n,callback:e,type:t,keysCheck:s})=>{const o=getComputedStyle(n),r=o.transition;if(r!=="none"&&r!==""&&!s.includes(r)){const h="transitionend",l=()=>{n.removeEventListener(h,l),e()};n.addEventListener(h,l,{once:!0})}else e()},f=({element:n,callback:e})=>{E({element:n,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},a=({state:n,trigger:e,popper:t})=>{const s=n==="open";g(t,{"data-state":n}),g(e,{"aria-expanded":`${s}`})};class u{constructor({trigger:e,content:t,options:s={}}){i(this,"triggerElement");i(this,"contentElement");i(this,"triggerStrategy");i(this,"placement");i(this,"offsetDistance");i(this,"preventFromCloseOutside");i(this,"preventFromCloseInside");i(this,"options");i(this,"defaultState");i(this,"popper");i(this,"eventEffect");i(this,"getElement",e=>typeof e=="string"?d(e):e instanceof HTMLElement?e:void 0);i(this,"handleDocumentClick",e=>{this.contentElement.getAttribute("data-state")==="open"&&(!this.triggerElement.contains(e.target)&&!this.preventFromCloseInside&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(e.target)&&!this.contentElement.contains(e.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(e.target)&&!this.contentElement.contains(e.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(e.target)&&this.contentElement.contains(e.target)&&!this.preventFromCloseInside&&this.hide())});i(this,"handleKeyDown",e=>{e.preventDefault(),this.triggerStrategy!=="hover"&&e.key==="Escape"&&this.contentElement.getAttribute("data-state")==="open"&&(this.preventFromCloseOutside||this.hide())});i(this,"toggleStateOnClick",()=>{(this.contentElement.dataset.state||"close")==="close"?(this.show(),this.triggerStrategy==="hover"&&this.addEventOnMouseEnter()):this.hide()});i(this,"hideOnMouseLeaseTrigger",()=>{setTimeout(()=>{this.contentElement.matches(":hover")||this.hide()},150)});i(this,"hideOnMouseLeave",()=>{setTimeout(()=>{this.triggerElement.matches(":hover")||this.hide()},150)});i(this,"addEventOnMouseEnter",()=>{this.triggerElement.addEventListener("mouseleave",this.hideOnMouseLeaseTrigger),this.contentElement.addEventListener("mouseleave",this.hideOnMouseLeave)});i(this,"showOnMouseEnter",()=>{this.show(),this.addEventOnMouseEnter()});i(this,"setShowOptions",({placement:e,offsetDistance:t})=>{var s,o,r,h;this.popper.setOptions({placement:e,offsetDistance:t}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(o=(s=this.options).beforeShow)==null||o.call(s),a({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(h=(r=this.options).onShow)==null||h.call(r)});i(this,"setPopperOptions",({placement:e,offsetDistance:t})=>{this.popper.setOptions({placement:e,offsetDistance:t||this.offsetDistance})});i(this,"setPopperTrigger",(e,t)=>{this.cleanup(),this.popper.setOptions({placement:t.placement||this.placement,offsetDistance:t.offsetDistance||this.offsetDistance}),this.triggerElement=e,this.triggerElement.addEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.addEventListener("mouseenter",this.showOnMouseEnter)});i(this,"cleanup",()=>{this.triggerElement.removeEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.removeEventListener("mouseenter",this.showOnMouseEnter)});var o;if(this.contentElement=this.getElement(t),this.triggerElement=this.getElement(e),!(this.triggerElement instanceof HTMLElement))throw new Error("Trigger element must be a valid HTML element");if(!(this.contentElement instanceof HTMLElement))throw new Error("Content element must be a valid HTML element");this.options=s,this.triggerStrategy=this.options.triggerStrategy||"click",this.placement=this.options.placement||"bottom",this.offsetDistance=this.options.offsetDistance||6,this.preventFromCloseOutside=this.options.preventFromCloseOutside||!1,this.preventFromCloseInside=this.options.preventCloseFromInside||!1,this.defaultState=this.options.defaultState||"close",this.eventEffect=(o=this.options.popper)==null?void 0:o.eventEffect,this.popper=new p.CreatePopper(this.triggerElement,this.contentElement,{placement:this.placement,offsetDistance:this.offsetDistance,eventEffect:this.eventEffect}),this.initInstance()}onToggleState(e){var t,s;(s=(t=this.options).onToggle)==null||s.call(t,{isHidden:e})}show(){var e,t,s,o;this.popper.updatePosition(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(t=(e=this.options).beforeShow)==null||t.call(e),a({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(o=(s=this.options).onShow)==null||o.call(s)}hide(){var e,t;(t=(e=this.options).beforeHide)==null||t.call(e),a({state:"close",popper:this.contentElement,trigger:this.triggerElement}),this.triggerStrategy==="click"&&document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeyDown),this.triggerStrategy==="hover"&&(this.triggerElement.removeEventListener("mouseleave",this.hideOnMouseLeaseTrigger),this.contentElement.removeEventListener("mouseleave",this.hideOnMouseLeave)),f({element:this.contentElement,callback:()=>{var s,o;this.onToggleState(!0),this.popper.cleanupEvents(),(o=(s=this.options).onHide)==null||o.call(s)}})}initInstance(){a({state:this.defaultState,popper:this.contentElement,trigger:this.triggerElement}),this.defaultState==="open"?this.show():a({state:"close",popper:this.contentElement,trigger:this.triggerElement}),this.triggerElement.addEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.addEventListener("mouseenter",this.showOnMouseEnter)}}exports.CreateOverlay=u;