@flexilla/alpine-popover 0.1.1 → 0.2.0

package/dist/cdn.js

@@ -481,7 +481,7 @@
       const o = H.getInstance("popover", this.contentElement);
       if (o)
         return o;
-      this.triggerElement = A(`[data-popover-trigger][data-popover-id=${n.getAttribute("id")}]`), this.options = t, this.triggerStrategy = this.options.triggerStrategy || n.dataset.triggerStrategy || "click", this.placement = this.options.placement || n.dataset.placement || "bottom-middle", this.offsetDistance = this.options.offsetDistance || parseInt(`${n.dataset.offsetDistance}`) | 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || n.hasAttribute("data-prevent-close-outside") || false, this.preventFromCloseInside = this.options.preventCloseFromInside || n.hasAttribute("data-prevent-close-inside") || false, this.defaultState = this.options.defaultState || n.dataset.defaultState || "close", this.experimentalOptions = Object.assign({}, de, t.experimental), this.teleporter = ce(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.PopoverInstance = new he({
+      this.triggerElement = A(`[data-popover-trigger][data-popover-id=${n.getAttribute("id")}]`), this.options = t, this.triggerStrategy = n.dataset.triggerStrategy ?? this.options.triggerStrategy ?? "click", this.placement = n.dataset.placement ?? this.options.placement ?? "bottom-middle", this.offsetDistance = parseInt(`${n.dataset.offsetDistance}`) ?? this.options.offsetDistance ?? 6, this.preventFromCloseOutside = n.hasAttribute("data-prevent-close-outside") ?? this.options.preventFromCloseOutside ?? false, this.preventFromCloseInside = n.hasAttribute("data-close-inside") ? false : this.options.preventCloseFromInside ?? true, this.defaultState = n.dataset.defaultState ?? this.options.defaultState ?? "close", this.experimentalOptions = Object.assign({}, de, t.experimental), this.teleporter = ce(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.PopoverInstance = new he({
         trigger: this.triggerElement,
         content: this.contentElement,
         options: {

package/dist/cdn.min.js

@@ -1 +1 @@
-(()=>{var K=Object.defineProperty,U=(n,e,t)=>e in n?K(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,a=(n,e,t)=>U(n,typeof e!="symbol"?e+"":e,t),q=Object.defineProperty,J=(n,e,t)=>e in n?q(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,p=(n,e,t)=>J(n,typeof e!="symbol"?e+"":e,t),Q="bottom",V=({reference:n,popper:e})=>{if(!n||!e)throw new Error("Reference or popper element is null or undefined");let t=new WeakMap,i=o=>(t.has(o)||t.set(o,o.getBoundingClientRect()),t.get(o)),r=i(e),s=i(n);return{popperHeight:r.height,popperWidth:r.width,refHeight:s.height,refWidth:s.width,refLeft:s.left,refTop:s.top,refRight:s.right}},X=(n,e,t,i)=>{let r=t,s=i-(t+e);return r>=(n-e)/2&&s>=(n-e)/2},Y=(n,e,t,i)=>(n-e)/2<=t&&t+n/2+e/2<=i,Z=(n,e,t,i,r)=>t>r-i?e()?window.innerHeight-r:t-r:n()?0:t+i,_=(n,e,t,i)=>n<=i&&t-n<=e,ee=(n,e,t,i)=>t<=i&&-n<=e,te=(n,e,t,i,r,s)=>{let o=r-t-s,h=t-i,d=t+s-i+(r-t-s),c=o>=0?r-i:h>=0?t-i:t;return n()?0:e()?d:c},ne=(n,e,t,i)=>n<=t&&e-n-i>=n,ie=(n,e)=>n>=e,se=({placement:n,refWidth:e,refTop:t,refLeft:i,refHeight:r,popperWidth:s,popperHeight:o,windowHeight:h,windowWidth:d,offsetDistance:c})=>{let m=d-i-e,v=i,C=h-t-r,M=t,E=()=>Z(()=>ee(t,r,o,h),()=>_(t,r,o,h),t,r,o),u=()=>te(()=>ne(i,d,s,e),()=>ie(i,s),i,s,d,e),x=()=>X(s,e,i,d)?i+e/2-s/2:u(),H=()=>Y(o,r,t,h)?t+r/2-o/2:E(),P=()=>i+s<=d?i:u(),y=()=>i+e-s>=0?i+e-s:u(),O=()=>t+o<=h?t:E(),G=()=>t+r-o>=0?t+r-o:E(),g=0,f=0,T=t-o-c,S=t+r+c,L=i-s-c,I=i+e+c,R=M>=o+c,$=C>=o+c,N=v>=s+c,A=m>=s+c;switch(n.startsWith("top")?f=R?T:$?S:Math.max(T,S):n.startsWith("bottom")?f=$?S:R?T:Math.max(S):n.startsWith("left")?g=N?L:A?I:Math.max(L,I):n.startsWith("right")&&(g=A?I:N?L:Math.max(I,L)),n){case"bottom":case"bottom-middle":case"top":case"top-middle":g=x();break;case"left":case"left-middle":case"right":case"right-middle":f=H();break;case"bottom-start":case"top-start":g=P();break;case"bottom-end":case"top-end":g=y();break;case"left-start":case"right-start":f=O();break;case"left-end":case"right-end":f=G();break}return{x:g,y:f}},W=class{constructor(e,t,i={}){p(this,"reference"),p(this,"popper"),p(this,"offsetDistance"),p(this,"placement"),p(this,"disableOnResize"),p(this,"disableOnScroll"),p(this,"onUpdate"),p(this,"isWindowEventsRegistered"),p(this,"validateElements",()=>{if(!(this.reference instanceof HTMLElement))throw new Error("Invalid HTMLElement for Reference Element");if(!(this.popper instanceof HTMLElement))throw new Error("Invalid HTMLElement for Popper");if(typeof this.offsetDistance!="number")throw new Error("OffsetDistance must be a number")}),p(this,"setPopperStyleProperty",(m,v)=>{this.popper.style.setProperty("--fx-popper-placement-x",`${m}px`),this.popper.style.setProperty("--fx-popper-placement-y",`${v}px`)}),p(this,"setInitialStyles",()=>{this.popper.style.setProperty("--fx-popper-placement-x",""),this.popper.style.setProperty("--fx-popper-placement-y","")}),p(this,"initPlacement",()=>{var m;this.validateElements(),this.setInitialStyles();let v=window.innerWidth,C=window.innerHeight,{popperHeight:M,popperWidth:E,refHeight:u,refWidth:x,refLeft:H,refTop:P}=V({reference:this.reference,popper:this.popper}),{x:y,y:O}=se({placement:this.placement,refWidth:x,refTop:P,refLeft:H,popperWidth:E,refHeight:u,popperHeight:M,windowHeight:C,windowWidth:v,offsetDistance:this.offsetDistance});this.setPopperStyleProperty(y,O),(m=this.onUpdate)==null||m.call(this,{x:y,y:O,placement:this.placement})}),p(this,"removeWindowEvents",()=>{this.isWindowEventsRegistered&&(!this.disableOnResize&&window.removeEventListener("resize",this.updatePosition),!this.disableOnScroll&&window.removeEventListener("scroll",this.updatePosition),this.isWindowEventsRegistered=!1)}),p(this,"attachWindowEvent",()=>{this.isWindowEventsRegistered&&this.removeWindowEvents(),this.disableOnResize||window.addEventListener("resize",this.updatePosition),this.disableOnScroll||window.addEventListener("scroll",this.updatePosition),this.isWindowEventsRegistered=!0}),p(this,"resetPosition",()=>{this.setInitialStyles()}),p(this,"updatePosition",()=>{this.initPlacement(),this.attachWindowEvent()}),p(this,"cleanupEvents",()=>{this.setInitialStyles(),this.removeWindowEvents()});let{offsetDistance:r=10,placement:s=Q,eventEffect:o={},onUpdate:h}=i;if(!(e instanceof HTMLElement))throw new Error("Invalid HTMLElement for Reference Element");if(!(t instanceof HTMLElement))throw new Error("Invalid HTMLElement for Popper");if(i.offsetDistance&&typeof i.offsetDistance!="number")throw new Error("OffsetDistance must be a number");let{disableOnResize:d,disableOnScroll:c}=o;this.isWindowEventsRegistered=!1,this.reference=e,this.popper=t,this.offsetDistance=r,this.placement=s,this.disableOnResize=d||!1,this.disableOnScroll=c||!1,this.onUpdate=h}setOptions({placement:e,offsetDistance:t}){this.placement=e,this.offsetDistance=t||this.offsetDistance,this.initPlacement(),this.attachWindowEvent()}},oe=Object.defineProperty,re=(n,e,t)=>e in n?oe(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,l=(n,e,t)=>re(n,typeof e!="symbol"?e+"":e,t),ae=(n,e=document.body)=>e.querySelector(n),z=(n,e)=>{for(let[t,i]of Object.entries(e))n.setAttribute(t,i)},le=({element:n,callback:e,type:t,keysCheck:i})=>{let r=getComputedStyle(n),s=r.transition;if(s!=="none"&&s!==""&&!i.includes(s)){let o="transitionend",h=()=>{n.removeEventListener(o,h),e()};n.addEventListener(o,h,{once:!0})}else e()},he=({element:n,callback:e})=>{le({element:n,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},pe=(n,e,t)=>{let i=new CustomEvent(e,{detail:t});n.dispatchEvent(i)},w=({state:n,trigger:e,popper:t})=>{let i=n==="open";z(t,{"data-state":n}),z(e,{"aria-expanded":`${i}`})},F=class{constructor({trigger:e,content:t,options:i={}}){l(this,"triggerElement"),l(this,"contentElement"),l(this,"triggerStrategy"),l(this,"placement"),l(this,"offsetDistance"),l(this,"preventFromCloseOutside"),l(this,"preventFromCloseInside"),l(this,"options"),l(this,"defaultState"),l(this,"popper"),l(this,"eventEffect"),l(this,"getElement",s=>typeof s=="string"?ae(s):s instanceof HTMLElement?s:void 0),l(this,"handleDocumentClick",s=>{this.contentElement.getAttribute("data-state")==="open"&&(!this.triggerElement.contains(s.target)&&!this.preventFromCloseInside&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&!this.contentElement.contains(s.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&!this.contentElement.contains(s.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&this.contentElement.contains(s.target)&&!this.preventFromCloseInside&&this.hide())}),l(this,"handleKeyDown",s=>{s.preventDefault(),this.triggerStrategy!=="hover"&&s.key==="Escape"&&this.contentElement.getAttribute("data-state")==="open"&&(this.preventFromCloseOutside||this.hide())}),l(this,"toggleStateOnClick",()=>{(this.contentElement.dataset.state||"close")==="close"?(this.show(),this.triggerStrategy==="hover"&&this.addEventOnMouseEnter()):this.hide()}),l(this,"hideOnMouseLeaseTrigger",()=>{setTimeout(()=>{this.contentElement.matches(":hover")||this.hide()},150)}),l(this,"hideOnMouseLeave",()=>{setTimeout(()=>{this.triggerElement.matches(":hover")||this.hide()},150)}),l(this,"addEventOnMouseEnter",()=>{this.triggerElement.addEventListener("mouseleave",this.hideOnMouseLeaseTrigger),this.contentElement.addEventListener("mouseleave",this.hideOnMouseLeave)}),l(this,"showOnMouseEnter",()=>{this.show(),this.addEventOnMouseEnter()}),l(this,"setShowOptions",({placement:s,offsetDistance:o})=>{var h,d,c,m;this.popper.setOptions({placement:s,offsetDistance:o}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(d=(h=this.options).beforeShow)==null||d.call(h),w({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(m=(c=this.options).onShow)==null||m.call(c)}),l(this,"setPopperOptions",({placement:s,offsetDistance:o})=>{this.popper.setOptions({placement:s,offsetDistance:o||this.offsetDistance})}),l(this,"setPopperTrigger",(s,o)=>{this.cleanup(),this.popper.setOptions({placement:o.placement||this.placement,offsetDistance:o.offsetDistance||this.offsetDistance}),this.triggerElement=s,this.triggerElement.addEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.addEventListener("mouseenter",this.showOnMouseEnter)}),l(this,"cleanup",()=>{this.triggerElement.removeEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.removeEventListener("mouseenter",this.showOnMouseEnter)});var r;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=i,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=(r=this.options.popper)==null?void 0:r.eventEffect,this.popper=new W(this.triggerElement,this.contentElement,{placement:this.placement,offsetDistance:this.offsetDistance,eventEffect:this.eventEffect}),this.initInstance()}onToggleState(e){var t,i;(i=(t=this.options).onToggle)==null||i.call(t,{isHidden:e})}show(){var e,t,i,r;this.popper.updatePosition(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(t=(e=this.options).beforeShow)==null||t.call(e),w({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(r=(i=this.options).onShow)==null||r.call(i)}hide(){var e,t,i;let r=!1;pe(this.contentElement,"before-hide",{setExitAction:o=>{r=o}});let s=(i=(t=(e=this.options).beforeHide)==null?void 0:t.call(e))==null?void 0:i.cancelAction;r||s||(w({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)),he({element:this.contentElement,callback:()=>{var o,h;this.onToggleState(!0),this.popper.cleanupEvents(),(h=(o=this.options).onHide)==null||h.call(o)}}))}initInstance(){w({state:this.defaultState,popper:this.contentElement,trigger:this.triggerElement}),this.defaultState==="open"?this.show():w({state:"close",popper:this.contentElement,trigger:this.triggerElement}),this.triggerElement.addEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.addEventListener("mouseenter",this.showOnMouseEnter)}},j=(n,e=document.body)=>e.querySelector(n),ce=(n,e=document.body)=>Array.from(e.querySelectorAll(n)),k=(n,e,t)=>{let i=new CustomEvent(e,{detail:t});n.dispatchEvent(i)};function de(n,e,t="move"){if(!(n instanceof HTMLElement))throw new Error("Source element must be an HTMLElement");if(!(e instanceof HTMLElement))throw new Error("Target element must be an HTMLElement");if(!["move","detachable"].includes(t))throw new Error(`Invalid teleport mode: ${t}. Must be "move" or "detachable".`);let i=document.createComment("teleporter-placeholder"),r=n.parentNode;return r?r.insertBefore(i,n):console.warn("Element has no parent; placeholder not inserted."),t==="move"?(n.parentNode&&e.appendChild(n),{append(){n.parentNode!==e&&e.appendChild(n)},remove(){i!=null&&i.parentNode&&n.parentNode&&i.parentNode.insertBefore(n,i)},restore(){i!=null&&i.parentNode&&n.parentNode!==r&&i.parentNode.insertBefore(n,i)}}):(n.parentNode&&e.appendChild(n),{append(){e.contains(n)||e.appendChild(n)},remove(){n.parentNode&&n.remove()},restore(){i!=null&&i.parentNode&&!n.parentNode&&i.parentNode.insertBefore(n,i)}})}var b=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,t,i){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,t)||(window.$flexillaInstances[e].push({element:t,instance:i}),i)}static getInstance(e,t){var i,r;return this.initGlobalRegistry(),(r=(i=window.$flexillaInstances[e])==null?void 0:i.find(s=>s.element===t))==null?void 0:r.instance}static removeInstance(e,t){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(i=>i.element!==t))}},me={teleport:!0,teleportMode:"move"},D=class n{constructor(e,t={}){a(this,"triggerElement"),a(this,"contentElement"),a(this,"options"),a(this,"PopoverInstance"),a(this,"triggerStrategy"),a(this,"placement"),a(this,"offsetDistance"),a(this,"preventFromCloseOutside"),a(this,"preventFromCloseInside"),a(this,"defaultState"),a(this,"experimentalOptions"),a(this,"teleporter"),a(this,"moveElOnInit",()=>{this.experimentalOptions.teleport&&(this.experimentalOptions.teleportMode==="detachable"?this.teleporter.remove():this.teleporter.append())}),a(this,"moveEl",()=>{this.experimentalOptions.teleport&&this.experimentalOptions.teleportMode==="detachable"&&this.teleporter.remove()}),a(this,"restoreEl",()=>{this.experimentalOptions.teleport&&this.experimentalOptions.teleportMode==="detachable"&&this.teleporter.append()}),a(this,"beforeShow",()=>{this.restoreEl()}),a(this,"onHide",()=>{var s,o;(o=(s=this.options).onHide)==null||o.call(s),this.moveEl(),k(this.contentElement,"popover-hide",{isHidden:!0})}),a(this,"onShow",()=>{var s,o;(o=(s=this.options).onShow)==null||o.call(s),k(this.contentElement,"popover-show",{isHidden:!1})}),a(this,"setShowOptions",({placement:s,offsetDistance:o})=>{this.PopoverInstance.setShowOptions({placement:s,offsetDistance:o})}),a(this,"setOptions",({placement:s,offsetDistance:o})=>{this.PopoverInstance.setPopperOptions({placement:s,offsetDistance:o})}),a(this,"setPopperTrigger",(s,o)=>{this.PopoverInstance.setPopperTrigger(s,o)}),a(this,"show",()=>{this.PopoverInstance.show()}),a(this,"hide",()=>{this.PopoverInstance.hide()}),a(this,"cleanup",()=>{this.PopoverInstance.cleanup(),b.removeInstance("popover",this.contentElement)});let i=typeof e=="string"?j(e):e;this.contentElement=i;let r=b.getInstance("popover",this.contentElement);if(r)return r;this.triggerElement=j(`[data-popover-trigger][data-popover-id=${i.getAttribute("id")}]`),this.options=t,this.triggerStrategy=this.options.triggerStrategy||i.dataset.triggerStrategy||"click",this.placement=this.options.placement||i.dataset.placement||"bottom-middle",this.offsetDistance=this.options.offsetDistance||parseInt(`${i.dataset.offsetDistance}`)|6,this.preventFromCloseOutside=this.options.preventFromCloseOutside||i.hasAttribute("data-prevent-close-outside")||!1,this.preventFromCloseInside=this.options.preventCloseFromInside||i.hasAttribute("data-prevent-close-inside")||!1,this.defaultState=this.options.defaultState||i.dataset.defaultState||"close",this.experimentalOptions=Object.assign({},me,t.experimental),this.teleporter=de(this.contentElement,document.body,this.experimentalOptions.teleportMode),this.PopoverInstance=new F({trigger:this.triggerElement,content:this.contentElement,options:{placement:this.placement,offsetDistance:this.offsetDistance,triggerStrategy:this.triggerStrategy,preventFromCloseOutside:this.preventFromCloseOutside,preventCloseFromInside:this.preventFromCloseInside,defaultState:this.defaultState,beforeShow:this.beforeShow,onShow:this.onShow,onHide:this.onHide,onToggle:({isHidden:s})=>{var o,h;(h=(o=this.options).onToggle)==null||h.call(o,{isHidden:s}),k(this.contentElement,"popover-toggle",{isHidden:s})},popper:this.options.popper}}),this.moveElOnInit(),b.register("popover",this.contentElement,this)}static init(e,t){return new n(e,t)}static autoInit(e="[data-fx-popover]"){let t=ce(e);for(let i of t)new n(i)}};function ge(n){n.directive("popover",(e,{},{cleanup:t})=>{let i=new D(e);t(()=>{i.cleanup()})})}var B=ge;document.addEventListener("alpine:init",()=>{B(window.Alpine)});})();
+(()=>{var K=Object.defineProperty,U=(i,e,t)=>e in i?K(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,a=(i,e,t)=>U(i,typeof e!="symbol"?e+"":e,t),q=Object.defineProperty,J=(i,e,t)=>e in i?q(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,p=(i,e,t)=>J(i,typeof e!="symbol"?e+"":e,t),Q="bottom",V=({reference:i,popper:e})=>{if(!i||!e)throw new Error("Reference or popper element is null or undefined");let t=new WeakMap,n=o=>(t.has(o)||t.set(o,o.getBoundingClientRect()),t.get(o)),r=n(e),s=n(i);return{popperHeight:r.height,popperWidth:r.width,refHeight:s.height,refWidth:s.width,refLeft:s.left,refTop:s.top,refRight:s.right}},X=(i,e,t,n)=>{let r=t,s=n-(t+e);return r>=(i-e)/2&&s>=(i-e)/2},Y=(i,e,t,n)=>(i-e)/2<=t&&t+i/2+e/2<=n,Z=(i,e,t,n,r)=>t>r-n?e()?window.innerHeight-r:t-r:i()?0:t+n,_=(i,e,t,n)=>i<=n&&t-i<=e,ee=(i,e,t,n)=>t<=n&&-i<=e,te=(i,e,t,n,r,s)=>{let o=r-t-s,h=t-n,d=t+s-n+(r-t-s),c=o>=0?r-n:h>=0?t-n:t;return i()?0:e()?d:c},ie=(i,e,t,n)=>i<=t&&e-i-n>=i,ne=(i,e)=>i>=e,se=({placement:i,refWidth:e,refTop:t,refLeft:n,refHeight:r,popperWidth:s,popperHeight:o,windowHeight:h,windowWidth:d,offsetDistance:c})=>{let m=d-n-e,v=n,C=h-t-r,M=t,E=()=>Z(()=>ee(t,r,o,h),()=>_(t,r,o,h),t,r,o),u=()=>te(()=>ie(n,d,s,e),()=>ne(n,s),n,s,d,e),x=()=>X(s,e,n,d)?n+e/2-s/2:u(),H=()=>Y(o,r,t,h)?t+r/2-o/2:E(),P=()=>n+s<=d?n:u(),y=()=>n+e-s>=0?n+e-s:u(),O=()=>t+o<=h?t:E(),G=()=>t+r-o>=0?t+r-o:E(),g=0,f=0,T=t-o-c,S=t+r+c,L=n-s-c,I=n+e+c,R=M>=o+c,$=C>=o+c,N=v>=s+c,A=m>=s+c;switch(i.startsWith("top")?f=R?T:$?S:Math.max(T,S):i.startsWith("bottom")?f=$?S:R?T:Math.max(S):i.startsWith("left")?g=N?L:A?I:Math.max(L,I):i.startsWith("right")&&(g=A?I:N?L:Math.max(I,L)),i){case"bottom":case"bottom-middle":case"top":case"top-middle":g=x();break;case"left":case"left-middle":case"right":case"right-middle":f=H();break;case"bottom-start":case"top-start":g=P();break;case"bottom-end":case"top-end":g=y();break;case"left-start":case"right-start":f=O();break;case"left-end":case"right-end":f=G();break}return{x:g,y:f}},W=class{constructor(e,t,n={}){p(this,"reference"),p(this,"popper"),p(this,"offsetDistance"),p(this,"placement"),p(this,"disableOnResize"),p(this,"disableOnScroll"),p(this,"onUpdate"),p(this,"isWindowEventsRegistered"),p(this,"validateElements",()=>{if(!(this.reference instanceof HTMLElement))throw new Error("Invalid HTMLElement for Reference Element");if(!(this.popper instanceof HTMLElement))throw new Error("Invalid HTMLElement for Popper");if(typeof this.offsetDistance!="number")throw new Error("OffsetDistance must be a number")}),p(this,"setPopperStyleProperty",(m,v)=>{this.popper.style.setProperty("--fx-popper-placement-x",`${m}px`),this.popper.style.setProperty("--fx-popper-placement-y",`${v}px`)}),p(this,"setInitialStyles",()=>{this.popper.style.setProperty("--fx-popper-placement-x",""),this.popper.style.setProperty("--fx-popper-placement-y","")}),p(this,"initPlacement",()=>{var m;this.validateElements(),this.setInitialStyles();let v=window.innerWidth,C=window.innerHeight,{popperHeight:M,popperWidth:E,refHeight:u,refWidth:x,refLeft:H,refTop:P}=V({reference:this.reference,popper:this.popper}),{x:y,y:O}=se({placement:this.placement,refWidth:x,refTop:P,refLeft:H,popperWidth:E,refHeight:u,popperHeight:M,windowHeight:C,windowWidth:v,offsetDistance:this.offsetDistance});this.setPopperStyleProperty(y,O),(m=this.onUpdate)==null||m.call(this,{x:y,y:O,placement:this.placement})}),p(this,"removeWindowEvents",()=>{this.isWindowEventsRegistered&&(!this.disableOnResize&&window.removeEventListener("resize",this.updatePosition),!this.disableOnScroll&&window.removeEventListener("scroll",this.updatePosition),this.isWindowEventsRegistered=!1)}),p(this,"attachWindowEvent",()=>{this.isWindowEventsRegistered&&this.removeWindowEvents(),this.disableOnResize||window.addEventListener("resize",this.updatePosition),this.disableOnScroll||window.addEventListener("scroll",this.updatePosition),this.isWindowEventsRegistered=!0}),p(this,"resetPosition",()=>{this.setInitialStyles()}),p(this,"updatePosition",()=>{this.initPlacement(),this.attachWindowEvent()}),p(this,"cleanupEvents",()=>{this.setInitialStyles(),this.removeWindowEvents()});let{offsetDistance:r=10,placement:s=Q,eventEffect:o={},onUpdate:h}=n;if(!(e instanceof HTMLElement))throw new Error("Invalid HTMLElement for Reference Element");if(!(t instanceof HTMLElement))throw new Error("Invalid HTMLElement for Popper");if(n.offsetDistance&&typeof n.offsetDistance!="number")throw new Error("OffsetDistance must be a number");let{disableOnResize:d,disableOnScroll:c}=o;this.isWindowEventsRegistered=!1,this.reference=e,this.popper=t,this.offsetDistance=r,this.placement=s,this.disableOnResize=d||!1,this.disableOnScroll=c||!1,this.onUpdate=h}setOptions({placement:e,offsetDistance:t}){this.placement=e,this.offsetDistance=t||this.offsetDistance,this.initPlacement(),this.attachWindowEvent()}},oe=Object.defineProperty,re=(i,e,t)=>e in i?oe(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,l=(i,e,t)=>re(i,typeof e!="symbol"?e+"":e,t),ae=(i,e=document.body)=>e.querySelector(i),z=(i,e)=>{for(let[t,n]of Object.entries(e))i.setAttribute(t,n)},le=({element:i,callback:e,type:t,keysCheck:n})=>{let r=getComputedStyle(i),s=r.transition;if(s!=="none"&&s!==""&&!n.includes(s)){let o="transitionend",h=()=>{i.removeEventListener(o,h),e()};i.addEventListener(o,h,{once:!0})}else e()},he=({element:i,callback:e})=>{le({element:i,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},pe=(i,e,t)=>{let n=new CustomEvent(e,{detail:t});i.dispatchEvent(n)},w=({state:i,trigger:e,popper:t})=>{let n=i==="open";z(t,{"data-state":i}),z(e,{"aria-expanded":`${n}`})},F=class{constructor({trigger:e,content:t,options:n={}}){l(this,"triggerElement"),l(this,"contentElement"),l(this,"triggerStrategy"),l(this,"placement"),l(this,"offsetDistance"),l(this,"preventFromCloseOutside"),l(this,"preventFromCloseInside"),l(this,"options"),l(this,"defaultState"),l(this,"popper"),l(this,"eventEffect"),l(this,"getElement",s=>typeof s=="string"?ae(s):s instanceof HTMLElement?s:void 0),l(this,"handleDocumentClick",s=>{this.contentElement.getAttribute("data-state")==="open"&&(!this.triggerElement.contains(s.target)&&!this.preventFromCloseInside&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&!this.contentElement.contains(s.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&!this.contentElement.contains(s.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&this.contentElement.contains(s.target)&&!this.preventFromCloseInside&&this.hide())}),l(this,"handleKeyDown",s=>{s.preventDefault(),this.triggerStrategy!=="hover"&&s.key==="Escape"&&this.contentElement.getAttribute("data-state")==="open"&&(this.preventFromCloseOutside||this.hide())}),l(this,"toggleStateOnClick",()=>{(this.contentElement.dataset.state||"close")==="close"?(this.show(),this.triggerStrategy==="hover"&&this.addEventOnMouseEnter()):this.hide()}),l(this,"hideOnMouseLeaseTrigger",()=>{setTimeout(()=>{this.contentElement.matches(":hover")||this.hide()},150)}),l(this,"hideOnMouseLeave",()=>{setTimeout(()=>{this.triggerElement.matches(":hover")||this.hide()},150)}),l(this,"addEventOnMouseEnter",()=>{this.triggerElement.addEventListener("mouseleave",this.hideOnMouseLeaseTrigger),this.contentElement.addEventListener("mouseleave",this.hideOnMouseLeave)}),l(this,"showOnMouseEnter",()=>{this.show(),this.addEventOnMouseEnter()}),l(this,"setShowOptions",({placement:s,offsetDistance:o})=>{var h,d,c,m;this.popper.setOptions({placement:s,offsetDistance:o}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(d=(h=this.options).beforeShow)==null||d.call(h),w({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(m=(c=this.options).onShow)==null||m.call(c)}),l(this,"setPopperOptions",({placement:s,offsetDistance:o})=>{this.popper.setOptions({placement:s,offsetDistance:o||this.offsetDistance})}),l(this,"setPopperTrigger",(s,o)=>{this.cleanup(),this.popper.setOptions({placement:o.placement||this.placement,offsetDistance:o.offsetDistance||this.offsetDistance}),this.triggerElement=s,this.triggerElement.addEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.addEventListener("mouseenter",this.showOnMouseEnter)}),l(this,"cleanup",()=>{this.triggerElement.removeEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.removeEventListener("mouseenter",this.showOnMouseEnter)});var r;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=n,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=(r=this.options.popper)==null?void 0:r.eventEffect,this.popper=new W(this.triggerElement,this.contentElement,{placement:this.placement,offsetDistance:this.offsetDistance,eventEffect:this.eventEffect}),this.initInstance()}onToggleState(e){var t,n;(n=(t=this.options).onToggle)==null||n.call(t,{isHidden:e})}show(){var e,t,n,r;this.popper.updatePosition(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(t=(e=this.options).beforeShow)==null||t.call(e),w({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(r=(n=this.options).onShow)==null||r.call(n)}hide(){var e,t,n;let r=!1;pe(this.contentElement,"before-hide",{setExitAction:o=>{r=o}});let s=(n=(t=(e=this.options).beforeHide)==null?void 0:t.call(e))==null?void 0:n.cancelAction;r||s||(w({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)),he({element:this.contentElement,callback:()=>{var o,h;this.onToggleState(!0),this.popper.cleanupEvents(),(h=(o=this.options).onHide)==null||h.call(o)}}))}initInstance(){w({state:this.defaultState,popper:this.contentElement,trigger:this.triggerElement}),this.defaultState==="open"?this.show():w({state:"close",popper:this.contentElement,trigger:this.triggerElement}),this.triggerElement.addEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.addEventListener("mouseenter",this.showOnMouseEnter)}},j=(i,e=document.body)=>e.querySelector(i),ce=(i,e=document.body)=>Array.from(e.querySelectorAll(i)),k=(i,e,t)=>{let n=new CustomEvent(e,{detail:t});i.dispatchEvent(n)};function de(i,e,t="move"){if(!(i instanceof HTMLElement))throw new Error("Source element must be an HTMLElement");if(!(e instanceof HTMLElement))throw new Error("Target element must be an HTMLElement");if(!["move","detachable"].includes(t))throw new Error(`Invalid teleport mode: ${t}. Must be "move" or "detachable".`);let n=document.createComment("teleporter-placeholder"),r=i.parentNode;return r?r.insertBefore(n,i):console.warn("Element has no parent; placeholder not inserted."),t==="move"?(i.parentNode&&e.appendChild(i),{append(){i.parentNode!==e&&e.appendChild(i)},remove(){n!=null&&n.parentNode&&i.parentNode&&n.parentNode.insertBefore(i,n)},restore(){n!=null&&n.parentNode&&i.parentNode!==r&&n.parentNode.insertBefore(i,n)}}):(i.parentNode&&e.appendChild(i),{append(){e.contains(i)||e.appendChild(i)},remove(){i.parentNode&&i.remove()},restore(){n!=null&&n.parentNode&&!i.parentNode&&n.parentNode.insertBefore(i,n)}})}var b=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,t,n){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,t)||(window.$flexillaInstances[e].push({element:t,instance:n}),n)}static getInstance(e,t){var n,r;return this.initGlobalRegistry(),(r=(n=window.$flexillaInstances[e])==null?void 0:n.find(s=>s.element===t))==null?void 0:r.instance}static removeInstance(e,t){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(n=>n.element!==t))}},me={teleport:!0,teleportMode:"move"},D=class i{constructor(e,t={}){a(this,"triggerElement"),a(this,"contentElement"),a(this,"options"),a(this,"PopoverInstance"),a(this,"triggerStrategy"),a(this,"placement"),a(this,"offsetDistance"),a(this,"preventFromCloseOutside"),a(this,"preventFromCloseInside"),a(this,"defaultState"),a(this,"experimentalOptions"),a(this,"teleporter"),a(this,"moveElOnInit",()=>{this.experimentalOptions.teleport&&(this.experimentalOptions.teleportMode==="detachable"?this.teleporter.remove():this.teleporter.append())}),a(this,"moveEl",()=>{this.experimentalOptions.teleport&&this.experimentalOptions.teleportMode==="detachable"&&this.teleporter.remove()}),a(this,"restoreEl",()=>{this.experimentalOptions.teleport&&this.experimentalOptions.teleportMode==="detachable"&&this.teleporter.append()}),a(this,"beforeShow",()=>{this.restoreEl()}),a(this,"onHide",()=>{var s,o;(o=(s=this.options).onHide)==null||o.call(s),this.moveEl(),k(this.contentElement,"popover-hide",{isHidden:!0})}),a(this,"onShow",()=>{var s,o;(o=(s=this.options).onShow)==null||o.call(s),k(this.contentElement,"popover-show",{isHidden:!1})}),a(this,"setShowOptions",({placement:s,offsetDistance:o})=>{this.PopoverInstance.setShowOptions({placement:s,offsetDistance:o})}),a(this,"setOptions",({placement:s,offsetDistance:o})=>{this.PopoverInstance.setPopperOptions({placement:s,offsetDistance:o})}),a(this,"setPopperTrigger",(s,o)=>{this.PopoverInstance.setPopperTrigger(s,o)}),a(this,"show",()=>{this.PopoverInstance.show()}),a(this,"hide",()=>{this.PopoverInstance.hide()}),a(this,"cleanup",()=>{this.PopoverInstance.cleanup(),b.removeInstance("popover",this.contentElement)});let n=typeof e=="string"?j(e):e;this.contentElement=n;let r=b.getInstance("popover",this.contentElement);if(r)return r;this.triggerElement=j(`[data-popover-trigger][data-popover-id=${n.getAttribute("id")}]`),this.options=t,this.triggerStrategy=n.dataset.triggerStrategy??this.options.triggerStrategy??"click",this.placement=n.dataset.placement??this.options.placement??"bottom-middle",this.offsetDistance=parseInt(`${n.dataset.offsetDistance}`)??this.options.offsetDistance??6,this.preventFromCloseOutside=n.hasAttribute("data-prevent-close-outside")??this.options.preventFromCloseOutside??!1,this.preventFromCloseInside=n.hasAttribute("data-close-inside")?!1:this.options.preventCloseFromInside??!0,this.defaultState=n.dataset.defaultState??this.options.defaultState??"close",this.experimentalOptions=Object.assign({},me,t.experimental),this.teleporter=de(this.contentElement,document.body,this.experimentalOptions.teleportMode),this.PopoverInstance=new F({trigger:this.triggerElement,content:this.contentElement,options:{placement:this.placement,offsetDistance:this.offsetDistance,triggerStrategy:this.triggerStrategy,preventFromCloseOutside:this.preventFromCloseOutside,preventCloseFromInside:this.preventFromCloseInside,defaultState:this.defaultState,beforeShow:this.beforeShow,onShow:this.onShow,onHide:this.onHide,onToggle:({isHidden:s})=>{var o,h;(h=(o=this.options).onToggle)==null||h.call(o,{isHidden:s}),k(this.contentElement,"popover-toggle",{isHidden:s})},popper:this.options.popper}}),this.moveElOnInit(),b.register("popover",this.contentElement,this)}static init(e,t){return new i(e,t)}static autoInit(e="[data-fx-popover]"){let t=ce(e);for(let n of t)new i(n)}};function ge(i){i.directive("popover",(e,{},{cleanup:t})=>{let n=new D(e);t(()=>{n.cleanup()})})}var B=ge;document.addEventListener("alpine:init",()=>{B(window.Alpine)});})();

package/dist/module.cjs.js

@@ -446,6 +446,7 @@ var P = class _P {
    * });
    */
   constructor(e, t = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     a(this, "triggerElement");
     a(this, "contentElement");
     a(this, "options");
@@ -505,7 +506,7 @@ var P = class _P {
     const o = H.getInstance("popover", this.contentElement);
     if (o)
       return o;
-    this.triggerElement = A(`[data-popover-trigger][data-popover-id=${n.getAttribute("id")}]`), this.options = t, this.triggerStrategy = this.options.triggerStrategy || n.dataset.triggerStrategy || "click", this.placement = this.options.placement || n.dataset.placement || "bottom-middle", this.offsetDistance = this.options.offsetDistance || parseInt(`${n.dataset.offsetDistance}`) | 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || n.hasAttribute("data-prevent-close-outside") || false, this.preventFromCloseInside = this.options.preventCloseFromInside || n.hasAttribute("data-prevent-close-inside") || false, this.defaultState = this.options.defaultState || n.dataset.defaultState || "close", this.experimentalOptions = Object.assign({}, de, t.experimental), this.teleporter = ce(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.PopoverInstance = new he({
+    this.triggerElement = A(`[data-popover-trigger][data-popover-id=${n.getAttribute("id")}]`), this.options = t, this.triggerStrategy = (_b = (_a = n.dataset.triggerStrategy) != null ? _a : this.options.triggerStrategy) != null ? _b : "click", this.placement = (_d = (_c = n.dataset.placement) != null ? _c : this.options.placement) != null ? _d : "bottom-middle", this.offsetDistance = (_f = (_e = parseInt(`${n.dataset.offsetDistance}`)) != null ? _e : this.options.offsetDistance) != null ? _f : 6, this.preventFromCloseOutside = (_h = (_g = n.hasAttribute("data-prevent-close-outside")) != null ? _g : this.options.preventFromCloseOutside) != null ? _h : false, this.preventFromCloseInside = n.hasAttribute("data-close-inside") ? false : (_i = this.options.preventCloseFromInside) != null ? _i : true, this.defaultState = (_k = (_j = n.dataset.defaultState) != null ? _j : this.options.defaultState) != null ? _k : "close", this.experimentalOptions = Object.assign({}, de, t.experimental), this.teleporter = ce(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.PopoverInstance = new he({
       trigger: this.triggerElement,
       content: this.contentElement,
       options: {

package/dist/module.esm.js

@@ -480,7 +480,7 @@ var P = class _P {
     const o = H.getInstance("popover", this.contentElement);
     if (o)
       return o;
-    this.triggerElement = A(`[data-popover-trigger][data-popover-id=${n.getAttribute("id")}]`), this.options = t, this.triggerStrategy = this.options.triggerStrategy || n.dataset.triggerStrategy || "click", this.placement = this.options.placement || n.dataset.placement || "bottom-middle", this.offsetDistance = this.options.offsetDistance || parseInt(`${n.dataset.offsetDistance}`) | 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || n.hasAttribute("data-prevent-close-outside") || false, this.preventFromCloseInside = this.options.preventCloseFromInside || n.hasAttribute("data-prevent-close-inside") || false, this.defaultState = this.options.defaultState || n.dataset.defaultState || "close", this.experimentalOptions = Object.assign({}, de, t.experimental), this.teleporter = ce(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.PopoverInstance = new he({
+    this.triggerElement = A(`[data-popover-trigger][data-popover-id=${n.getAttribute("id")}]`), this.options = t, this.triggerStrategy = n.dataset.triggerStrategy ?? this.options.triggerStrategy ?? "click", this.placement = n.dataset.placement ?? this.options.placement ?? "bottom-middle", this.offsetDistance = parseInt(`${n.dataset.offsetDistance}`) ?? this.options.offsetDistance ?? 6, this.preventFromCloseOutside = n.hasAttribute("data-prevent-close-outside") ?? this.options.preventFromCloseOutside ?? false, this.preventFromCloseInside = n.hasAttribute("data-close-inside") ? false : this.options.preventCloseFromInside ?? true, this.defaultState = n.dataset.defaultState ?? this.options.defaultState ?? "close", this.experimentalOptions = Object.assign({}, de, t.experimental), this.teleporter = ce(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.PopoverInstance = new he({
       trigger: this.triggerElement,
       content: this.contentElement,
       options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexilla/alpine-popover",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "AlpineJS plugin for adding Popover functionality to your AlpineJS components",
   "type": "module",
   "private": false,
@@ -60,7 +60,7 @@
     "Flexilla"
   ],
   "dependencies": {
-    "@flexilla/popover": "^0.4.0"
+    "@flexilla/popover": "^1.0.0"
   },
-  "gitHead": "3284d6fd2a712b633d39a42d85792f730e2d7d55"
+  "gitHead": "869394b528d21d4842486a7396449aa9fbe3cbcb"
 }