@sky.ui/core 0.0.53 → 0.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +3785 -3679
- package/dist/helper/controllers/popover-controller.js +1 -1
- package/dist/helper/controllers/popover-controller.js.map +1 -1
- package/dist/helper/index.js +1 -1
- package/dist/helper/utils/index.d.ts +1 -0
- package/dist/helper/utils/index.js +1 -1
- package/dist/helper/utils/stable-array.d.ts +6 -0
- package/dist/helper/utils/stable-array.js +2 -0
- package/dist/helper/utils/stable-array.js.map +1 -0
- package/dist/index.js +1 -1
- package/dist/sky-avatar/sky-avatar.js +5 -5
- package/dist/sky-avatar/sky-avatar.js.map +1 -1
- package/dist/sky-chip/sky-chip.d.ts +8 -2
- package/dist/sky-chip/sky-chip.js +10 -10
- package/dist/sky-chip/sky-chip.js.map +1 -1
- package/dist/sky-combobox/sky-combobox.d.ts +2 -0
- package/dist/sky-combobox/sky-combobox.js +16 -16
- package/dist/sky-combobox/sky-combobox.js.map +1 -1
- package/dist/sky-flexbox/sky-flexbox.d.ts +2 -0
- package/dist/sky-flexbox/sky-flexbox.js +3 -3
- package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
- package/dist/sky-form/sky-form.js +7 -7
- package/dist/sky-form/sky-form.js.map +1 -1
- package/dist/sky-image/sky-image.js +5 -5
- package/dist/sky-image/sky-image.js.map +1 -1
- package/dist/sky-input/sky-input.js +6 -6
- package/dist/sky-input/sky-input.js.map +1 -1
- package/dist/sky-list/sky-list.js +3 -3
- package/dist/sky-list/sky-list.js.map +1 -1
- package/dist/sky-listitem/sky-listitem.d.ts +1 -0
- package/dist/sky-listitem/sky-listitem.js +4 -2
- package/dist/sky-listitem/sky-listitem.js.map +1 -1
- package/dist/sky-radio/sky-radio.js +1 -1
- package/dist/sky-radio/sky-radio.js.map +1 -1
- package/dist/sky-simple-table/sky-simple-table.d.ts +7 -2
- package/dist/sky-simple-table/sky-simple-table.js +9 -9
- package/dist/sky-simple-table/sky-simple-table.js.map +1 -1
- package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
- package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class e{constructor(t,i){this._open=!1,this.raf=0,this.boundScrollParents=[],this._listenersAttached=!1,this.lastCloseReason="toggle",this.lastFocusedEl=null,this.hasEverOpened=!1,this._skipNextReposition=!1,this.lastMeta={place:"bottom",arrowAlign:"center"},this._phase="idle",this.onToggle=e=>{if("light-dismiss"===this.lastCloseReason)return void(this.lastCloseReason="toggle");const t=this.opts.getPopover(),i=e;let s=null;if("string"==typeof i?.newState&&(s="open"===i.newState),null===s&&t&&(s=t.matches?.(":popover-open")??!1),null!==s){if(!s)return this._open=!1,this.detachGlobalListenersIfAttached(),this.opts.onOpenChange?.(!1,{reason:this.lastCloseReason}),void(this.opts.getRestoreFocusOnClose()&&this.restoreFocus());this._open=!0,this.attachGlobalListeners(),this.opts.onOpenChange?.(!0,{reason:"toggle"}),this.position(),this.raf=requestAnimationFrame(()=>this.opts.focusOnOpen?.())}},this.onDocumentPointerDown=e=>{if(!this._open)return;if(!this.opts.getCloseOnOutside())return;const t=this.opts.getPopover(),i=this.opts.getAnchor();if(!t||!i)return;if("number"==typeof e.button&&0!==e.button)return;const s=e.composedPath?.()??[],r=s.includes(t),n=s.includes(i);if(r||n)return;for(const e of s){if(!(e instanceof Element))continue;if("function"==typeof e.matches&&e.matches(":popover-open"))return;const i=e.closest?.(":popover-open");if(i&&i!==t)return}const o=e.clientX,a=e.clientY;if(o>=window.innerWidth||a>=window.innerHeight)return;const c=this.opts.getIgnoreOutsideAttr(),l=(this.opts.getIgnoreOutsideSelector()||"").trim();for(const e of s)if(e instanceof HTMLElement){if(c&&e.hasAttribute(c))return;if(l){if(e.matches(l))return;if(e.closest(l))return}}this.closePopover("light-dismiss")},this.onViewportMove=()=>{this._open&&this.position()},this.onKeydown=e=>{if(!this._open)return;if("Escape"!==e.key)return;if(!this.opts.getCloseOnEscape())return;const t=this.opts.getPopover(),i=this.opts.getAnchor(),s=document.activeElement,r=!!(t&&s&&t.contains(s)),n=!!(i&&s&&i.contains(s));(r||n)&&(e.preventDefault(),e.stopPropagation(),this.closePopover("escape"))},this.onGroupOpen=e=>{const t=e.detail?.id;t!==(this.opts.groupId??this.host)&&this._open&&this.closePopover("group")},this.host=t,t.addController(this);const s=i.duration??220,r=i.closeDuration??Math.min(180,s);this.opts={getAnchor:i.getAnchor,getPopover:i.getPopover,getPlacement:e.createGetter(i.getPlacement,i.placement,"auto"),getAlign:e.createGetter(i.getAlign,i.align,"start"),getGap:e.createGetter(i.getGap,i.gap,6),getPadding:e.createGetter(i.getPadding,i.padding,8),getMatchAnchorWidth:e.createGetter(i.getMatchAnchorWidth,i.matchAnchorWidth,!0),getMaxWidthToViewport:e.createGetter(i.getMaxWidthToViewport,i.maxWidthToViewport,!0),getMaxWidthMode:e.createGetter(i.getMaxWidthMode,i.maxWidthMode,"cap"),getFlip:e.createGetter(i.getFlip,i.flip,!0),getFlipOrder:e.createGetter(i.getFlipOrder,i.flipOrder,[]),getPreset:e.createGetter(i.getPreset,i.preset,"slide"),getDuration:e.createGetter(i.getDuration,i.duration,s),getCloseDuration:e.createGetter(i.getCloseDuration,i.closeDuration,r),getAnimateReposition:e.createGetter(i.getAnimateReposition,i.animateReposition,!0),getRepositionMs:e.createGetter(i.getRepositionMs,i.repositionMs,160),getCloseOnEscape:e.createGetter(i.getCloseOnEscape,i.closeOnEscape,!0),getCloseOnOutside:e.createGetter(i.getCloseOnOutside,i.closeOnOutside,!1),getIgnoreOutsideSelector:e.createGetter(i.getIgnoreOutsideSelector,i.ignoreOutsideSelector,""),getIgnoreOutsideAttr:e.createGetter(i.getIgnoreOutsideAttr,i.ignoreOutsideAttr,"data-popover-ignore-outside"),getRestoreFocusOnClose:e.createGetter(i.getRestoreFocusOnClose,i.restoreFocusOnClose,!0),cssVarLeft:i.cssVarLeft??"--sky-pop-left",cssVarTop:i.cssVarTop??"--sky-pop-top",cssVarWidth:i.cssVarWidth??"--sky-pop-width",focusOnOpen:i.focusOnOpen,scrollContainer:i.scrollContainer??"auto",groupEventName:i.groupEventName,groupId:i.groupId,onOpenChange:i.onOpenChange,getFocusTarget:i.getFocusTarget,sideAttr:i.sideAttr??"data-side",respectReducedMotion:i.respectReducedMotion??!0}}static createGetter(e,t,i){return e||(()=>t??i)}get open(){return this._open}get meta(){return this.lastMeta}hostConnected(){"undefined"!=typeof window&&(this.visualViewport=window.visualViewport??void 0)}hostDisconnected(){this.detachGlobalListenersIfAttached(),this.raf&&cancelAnimationFrame(this.raf)}attachGlobalListeners(){"undefined"==typeof window||this._listenersAttached||(this._listenersAttached=!0,this.visualViewport&&(this.visualViewport.addEventListener("resize",this.onViewportMove,{passive:!0}),this.visualViewport.addEventListener("scroll",this.onViewportMove,{passive:!0})),window.addEventListener("resize",this.onViewportMove,{passive:!0}),window.addEventListener("scroll",this.onViewportMove,{passive:!0,capture:!0}),this.opts.groupEventName&&window.addEventListener(this.opts.groupEventName,this.onGroupOpen),this.opts.getCloseOnEscape()&&window.addEventListener("keydown",this.onKeydown,!0),document.addEventListener("pointerdown",this.onDocumentPointerDown,!0),this.setupObserversAndScrollParents())}detachGlobalListenersIfAttached(){this._listenersAttached&&(this._listenersAttached=!1,"undefined"!=typeof window&&(window.removeEventListener("resize",this.onViewportMove),window.removeEventListener("scroll",this.onViewportMove,!0),this.visualViewport&&(this.visualViewport.removeEventListener("resize",this.onViewportMove),this.visualViewport.removeEventListener("scroll",this.onViewportMove)),this.opts.groupEventName&&window.removeEventListener(this.opts.groupEventName,this.onGroupOpen),window.removeEventListener("keydown",this.onKeydown,!0)),document.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.teardownScrollParents(),this.anchorRO?.disconnect(),this.anchorRO=void 0,this.popoverRO?.disconnect(),this.popoverRO=void 0)}refreshTargets(){this._listenersAttached&&this.setupObserversAndScrollParents(),this._open&&this.position()}toggle(){this._open?this.closePopover("api"):this.openPopover()}openPopover(){this.raf&&cancelAnimationFrame(this.raf),this.raf=0;const e=this.opts.getPopover();if(!e)return;"undefined"!=typeof window&&this.opts.groupEventName&&window.dispatchEvent(new CustomEvent(this.opts.groupEventName,{detail:{id:this.opts.groupId??this.host}})),this.captureFocusBeforeOpen(),this.ensurePopoverMarginZero(),this._open=!0,this.attachGlobalListeners(),this.opts.onOpenChange?.(!0,{reason:"api"});const t=e.style.visibility;e.style.visibility="hidden",e.showPopover?.();const i=this.hasEverOpened;this.hasEverOpened=!0,this._skipNextReposition=!i,this.position(),e.getBoundingClientRect();const s=this.lastMeta.place;this.setSideAttr(s),this.raf=requestAnimationFrame(()=>{e.style.visibility=t||"visible",this.playPreset(e,s,"open").then(()=>this.opts.focusOnOpen?.())})}async closePopover(e="api"){const t=this.opts.getPopover();if(!t)return;if(this.lastCloseReason=e,!this._open)return void t.hidePopover?.();this._open=!1,this.opts.getRestoreFocusOnClose()&&this.restoreFocus(),this.detachGlobalListenersIfAttached(),this.opts.onOpenChange?.(!1,{reason:e});const i=this.lastMeta.place;this.setSideAttr(i),this.raf&&cancelAnimationFrame(this.raf),this.raf=0,this.moveAnim?.cancel(),await this.playPreset(t,i,"close"),t.hidePopover?.()}normalizeFlipOrder(e){const t=["bottom","top","right","left"];if(!e||!e.length)return t;const i=new Set(["top","bottom","left","right"]),s=[];for(const t of e)i.has(t)&&!s.includes(t)&&s.push(t);for(const e of t)s.includes(e)||s.push(e);return s}defaultOrderFromPlacement(e){switch(e){case"top":return["top","bottom","right","left"];case"bottom":default:return["bottom","top","right","left"];case"left":return["left","right","bottom","top"];case"right":return["right","left","bottom","top"]}}position(){if("undefined"==typeof window)return;const e=this.opts.getAnchor(),t=this.opts.getPopover();if(!e||!t)return;this.ensurePopoverMarginZero();const i=t.matches?.(":popover-open")&&null!==t.offsetParent,s=this._open&&i?t.getBoundingClientRect():null,r=this.opts.getPadding(),n=this.opts.getGap(),o=e.getBoundingClientRect(),a=window.visualViewport??null,c=a?.width??window.innerWidth,l=a?.height??window.innerHeight,p=a?.offsetLeft??0,h=a?.offsetTop??0;if(this.opts.getMaxWidthToViewport()){const e=Math.max(0,c-2*r);t.style.maxWidth=`${e}px`,t.style.boxSizing="border-box"}const x=t.getBoundingClientRect(),u=x.width||220,d=x.height||50,g={top:o.top-n-h,bottom:l-(o.bottom-h)-n,left:o.left-n-p,right:c-(o.right-p)-n},f=e=>"top"===e?g.top>=d:"bottom"===e?g.bottom>=d:"left"===e?g.left>=u:g.right>=u,P=this.opts.getPlacement(),b=this.opts.getFlip(),v=this.opts.getFlipOrder()?.length?this.normalizeFlipOrder(this.opts.getFlipOrder()):this.normalizeFlipOrder(this.defaultOrderFromPlacement(P));let m;if("auto"===P){m=v.find(f)??v.map(e=>[e,g[e]]).sort((e,t)=>t[1]-e[1])[0][0]}else if(b){const e=P,t=v.includes(e)?[e,...v.filter(t=>t!==e)]:[e,...v];m=t.find(f)??t.map(e=>[e,g[e]]).sort((e,t)=>t[1]-e[1])[0][0]}else m=P;let $=0,y=0,O="center";const D="rtl"===getComputedStyle(e).direction;let S=this.opts.getAlign();D&&("start"===S?S="end":"end"===S&&(S="start"));const k=o.left-p,w=o.right-p,C=o.top-h,A=o.bottom-h,z=o.width,M=o.height;if("top"===m||"bottom"===m){y="start"===S?k:"end"===S?w-u:k+z/2-u/2,$="top"===m?C-d-n:A+n;const e=Math.max(r,Math.min(c-u-r,y));e!==y&&(O=e<=r+.5?"start":"end"),y=e,$=Math.max(r,Math.min(l-d-r,$))}else{y="left"===m?k-u-n:w+n,$=C+M/2-d/2;const e=Math.max(r,Math.min(l-d-r,$));e!==$&&(O=e<=r+.5?"start":"end"),$=e,y=Math.max(r,Math.min(c-u-r,y))}y+=p,$+=h;const I=this.host;if(this.opts.getMatchAnchorWidth()){const e=Math.max(0,c-2*r),t=Math.min(o.width,e);I.style.setProperty(this.opts.cssVarWidth,`${t}px`)}else I.style.removeProperty(this.opts.cssVarWidth);I.style.setProperty(this.opts.cssVarLeft,`${y}px`),I.style.setProperty(this.opts.cssVarTop,`${$}px`),this.lastMeta.place,this.lastMeta={place:m,arrowAlign:O},this.setSideAttr(m);this._open&&this.opts.getAnimateReposition()&&s&&!this._skipNextReposition&&t.matches?.(":popover-open")&&i&&"open"===this._phase&&!this.presetAnim&&(this.raf&&cancelAnimationFrame(this.raf),this.raf=requestAnimationFrame(()=>{const e=t.getBoundingClientRect();this.animateMove(t,s,e)})),this._skipNextReposition=!1}vec(e,t){return"top"===e?{x:0,y:+t}:"bottom"===e?{x:0,y:-t}:"left"===e?{x:+t,y:0}:{x:-t,y:0}}prefersReducedMotion(){return!!this.opts.respectReducedMotion&&("undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches)}computeOrigin(e,t){return"center"===t?"50% 50%":"top"===e?"50% 100%":"bottom"===e?"50% 0%":"left"===e?"100% 50%":"0% 50%"}kf(e,t,i){const s={opacity:e,transform:t};return i&&(s.filter=i),s}presetRegistry(){return{none:{name:"none",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.16, 1, 0.3, 1)",easingClose:"cubic-bezier(0.2, 0, 0, 1)",enterDuration:220,exitDuration:180},getKeyframes:()=>[{opacity:1}]},fade:{name:"fade",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.4, 0, 0.2, 1)",easingClose:"cubic-bezier(0.4, 0, 0.2, 1)",enterDuration:180,exitDuration:150},getKeyframes:({phase:e})=>"open"===e?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}]},scale:{name:"scale",defaults:{enterPx:0,exitPx:0,enterScale:.9,exitScale:.95,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.36, 0, 0.66, -0.56)",enterDuration:200,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},slide:{name:"slide",defaults:{enterPx:12,exitPx:8,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.23, 1, 0.32, 1)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:250,exitDuration:220},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px, 0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px, 0)`)]}},iosMenu:{name:"iosMenu",defaults:{enterPx:12,exitPx:8,enterScale:.98,exitScale:.99,blurInPx:6,blurOutPx:3,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",easingClose:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",enterDuration:250,exitDuration:220},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px, 0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px, 0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},iosSheet:{name:"iosSheet",defaults:{enterPx:16,exitPx:12,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.36, 0, 0.66, -0.56)",easingClose:"cubic-bezier(0.34, 1.56, 0.64, 1)",enterDuration:200,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},materialMenu:{name:"materialMenu",defaults:{enterPx:10,exitPx:6,enterScale:.96,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.2, 0, 0, 1)",easingClose:"cubic-bezier(0.4, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},materialSheet:{name:"materialSheet",defaults:{enterPx:18,exitPx:14,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.05, 0.7, 0.1, 1)",easingClose:"cubic-bezier(0.3, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},floaty:{name:"floaty",defaults:{enterPx:14,exitPx:10,enterScale:.985,exitScale:.99,blurInPx:10,blurOutPx:6,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.22, 0.61, 0.36, 1)",easingClose:"cubic-bezier(0.55, 0.06, 0.68, 0.19)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},soft:{name:"soft",defaults:{enterPx:10,exitPx:8,enterScale:.97,exitScale:.98,blurInPx:4,blurOutPx:2,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.33, 1, 0.68, 1)",easingClose:"cubic-bezier(0.32, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},sharp:{name:"sharp",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.12, 0.9, 0.2, 1)",easingClose:"cubic-bezier(0.4, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},blurIn:{name:"blurIn",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:12,blurOutPx:8,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.5, 0, 0.75, 0)",easingClose:"cubic-bezier(0.33, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,"translate3d(0,0,0)",`blur(${t.blurInPx}px)`),this.kf(1,"translate3d(0,0,0)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0)","blur(0px)"),this.kf(0,"translate3d(0,0,0)",`blur(${t.blurOutPx}px)`)]},blurFade:{name:"blurFade",defaults:{enterPx:10,exitPx:8,enterScale:.99,exitScale:.99,blurInPx:10,blurOutPx:6,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.45, 0, 0.55, 1)",easingClose:"cubic-bezier(0.3, 0, 0.7, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`,`blur(${i.blurOutPx}px)`)]}},zoomFromAnchor:{name:"zoomFromAnchor",defaults:{enterPx:6,exitPx:4,enterScale:.92,exitScale:.96,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},zoomFromCorner:{name:"zoomFromCorner",defaults:{enterPx:0,exitPx:0,enterScale:.88,exitScale:.94,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.18, 0.89, 0.32, 1.28)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},flip3d:{name:"flip3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:14,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.5, 0, 0.75, 0)",easingClose:"cubic-bezier(0.33, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i,origin:s})=>{const r=this.vec(t,i.enterPx),n="left"===t||"right"===t?"Y":"X",o="top"===t||"left"===t?1:-1,a=i.rotateDeg*o;if("open"===e)return[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${r.x}px, ${r.y}px, 0) rotate${n}(${a}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${n}(0deg) scale(1)`)];const c=this.vec(t,i.exitPx);return[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${n}(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${c.x}px, ${c.y}px, 0) rotate${n}(${.7*a}deg) scale(${i.exitScale})`)]}},card3d:{name:"card3d",defaults:{enterPx:10,exitPx:8,enterScale:.96,exitScale:.98,blurInPx:6,blurOutPx:3,perspectivePx:1e3,rotateDeg:10,tiltDeg:10,origin:"anchor",easingOpen:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",easingClose:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="left"===t||"right"===t?"Y":"X",n="top"===t||"left"===t?1:-1,o=i.tiltDeg*n;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotate${r}(${o}deg) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${r}(0deg) scale(1)`,"blur(0px)")]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${r}(0deg) scale(1)`,"blur(0px)"),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotate${r}(${.7*o}deg) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},tilt3d:{name:"tilt3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:12,origin:"corner",easingOpen:"cubic-bezier(0.23, 1, 0.32, 1)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="top"===t?i.tiltDeg:"bottom"===t?-i.tiltDeg:0,n="left"===t?i.tiltDeg:"right"===t?-i.tiltDeg:0;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotateX(${r}deg) rotateY(${n}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1)`)]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotateX(${.6*r}deg) rotateY(${.6*n}deg) scale(${i.exitScale})`)]}},depth3d:{name:"depth3d",defaults:{enterPx:0,exitPx:0,enterScale:.9,exitScale:.94,blurInPx:8,blurOutPx:5,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.22, 0.61, 0.36, 1)",easingClose:"cubic-bezier(0.55, 0.06, 0.68, 0.19)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`perspective(${t.perspectivePx}px) translate3d(0,0,-40px) scale(${t.enterScale})`,`blur(${t.blurInPx}px)`),this.kf(1,`perspective(${t.perspectivePx}px) translate3d(0,0,0) scale(1)`,"blur(0px)")]:[this.kf(1,`perspective(${t.perspectivePx}px) translate3d(0,0,0) scale(1)`,"blur(0px)"),this.kf(0,`perspective(${t.perspectivePx}px) translate3d(0,0,-30px) scale(${t.exitScale})`,`blur(${t.blurOutPx}px)`)]},rotate3d:{name:"rotate3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:12,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.36, 0, 0.66, -0.56)",easingClose:"cubic-bezier(0.34, 1.56, 0.64, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="top"===t||"left"===t?1:-1,n=i.rotateDeg*r;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotateZ(${n}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateZ(0deg) scale(1)`)]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateZ(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotateZ(${.7*n}deg) scale(${i.exitScale})`)]}},springy:{name:"springy",defaults:{enterPx:12,exitPx:8,enterScale:.94,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1.15)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx);if("open"===e)return[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1.02)"),this.kf(1,"translate3d(0,0,0) scale(1)")];const r=this.vec(t,i.exitPx);return[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},bouncy:{name:"bouncy",defaults:{enterPx:14,exitPx:10,enterScale:.9,exitScale:.96,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1.15)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx);if("open"===e)return[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1.03)"),this.kf(1,"translate3d(0,0,0) scale(1)")];const r=this.vec(t,i.exitPx);return[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},glide:{name:"glide",defaults:{enterPx:18,exitPx:12,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.08, 0.82, 0.17, 1)",easingClose:"cubic-bezier(0.3, 0, 1, 1)",enterDuration:220,exitDuration:200},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},pop:{name:"pop",defaults:{enterPx:0,exitPx:0,enterScale:.85,exitScale:.95,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.18, 0.89, 0.32, 1.28)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1.03)"),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},drop:{name:"drop",defaults:{enterPx:22,exitPx:14,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1)",easingClose:"cubic-bezier(0.45, 0, 0.55, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},grow:{name:"grow",defaults:{enterPx:6,exitPx:4,enterScale:.95,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}}}}getPresetKeyframes(e,t,i,s){const r=this.presetRegistry(),n=r[e]??r.iosMenu;this.getBaseDefaults();const o={...n.defaults,...s??{}},a=this.computeOrigin(t,o.origin);return{keyframes:n.getKeyframes({side:t,phase:i,cfg:o,origin:a}),cfg:o,origin:a}}getBaseDefaults(){return{enterPx:12,exitPx:8,enterScale:.98,exitScale:.99,blurInPx:6,blurOutPx:3,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.16, 1, 0.3, 1)",easingClose:"cubic-bezier(0.2, 0, 0, 1)",enterDuration:220,exitDuration:180}}async playPreset(e,t,i){if(this.checkForConflictingCSS(e),this.prefersReducedMotion())return;const s=this.opts.getPreset();if("none"===s)return;this.moveAnim?.cancel(),this.presetAnim?.cancel(),this._phase="open"===i?"opening":"closing",e.style.transition="none";const{keyframes:r,cfg:n,origin:o}=this.getPresetKeyframes(s,t,i),a="open"===i?n.enterDuration:n.exitDuration,c=this.is3dPreset(s);c?(e.style.transformStyle="preserve-3d",e.style.backfaceVisibility="hidden"):(e.style.transformStyle="",e.style.backfaceVisibility=""),e.style.transformOrigin=o;const l="open"===i?n.easingOpen:n.easingClose,p=e.animate(r,{duration:a,easing:l,fill:"both"});this.presetAnim=p;try{await p.finished}catch{}finally{this.presetAnim===p&&(this.presetAnim=void 0),e.style.transition="",c&&(e.style.transformStyle="",e.style.backfaceVisibility=""),this._phase="open"===i?"open":"idle"}}checkForConflictingCSS(e){const t=e.style.transition||"";t.includes("transform")&&t.includes("opacity")&&console.warn("Warning: Using 3D animation (WAAPI) alongside CSS transitions on 'transform' or 'opacity' can cause conflicts. Consider removing CSS transitions on these properties."),(t.includes("margin")||t.includes("padding"))&&console.warn("Warning: Animating 'margin' or 'padding' alongside 3D animation (WAAPI) may cause visual glitches. Please avoid transitioning these properties during WAAPI animations.")}animateMove(e,t,i){if("open"!==this._phase)return;const s=t.left-i.left,r=t.top-i.top;if(Math.abs(s)<.5&&Math.abs(r)<.5)return;this.moveAnim?.cancel();const n=this.opts.getRepositionMs(),o=e.animate([{transform:`translate3d(${s}px, ${r}px, 0)`},{transform:"translate3d(0, 0, 0)"}],{duration:n,easing:"cubic-bezier(0.16, 1, 0.3, 1)",fill:"both"});this.moveAnim=o,o.finished.finally(()=>{this.moveAnim===o&&(this.moveAnim=void 0)})}is3dPreset(e){return"flip3d"===e||"card3d"===e||"tilt3d"===e||"depth3d"===e||"rotate3d"===e}setSideAttr(e){const t=this.opts.getPopover();t&&t.setAttribute(this.opts.sideAttr,e)}setupObserversAndScrollParents(){if("undefined"==typeof window)return;const e=this.opts.getAnchor(),t=this.opts.getPopover();e&&"ResizeObserver"in window&&(this.anchorRO?.disconnect(),this.anchorRO=new ResizeObserver(()=>{this._open&&this.position()}),this.anchorRO.observe(e)),t&&"ResizeObserver"in window&&(this.popoverRO?.disconnect(),this.popoverRO=new ResizeObserver(()=>{this._open&&this.position()}),this.popoverRO.observe(t)),this.teardownScrollParents();const i=this.opts.scrollContainer;if("window"!==i)if(i instanceof HTMLElement)this.bindScroll(i);else if(e)for(const t of this.getScrollParents(e))this.bindScroll(t)}bindScroll(e){const t=this.onViewportMove;e.addEventListener("scroll",t,{passive:!0}),this.boundScrollParents.push({el:e,fn:t})}teardownScrollParents(){for(const{el:e,fn:t}of this.boundScrollParents)e.removeEventListener?.("scroll",t);this.boundScrollParents=[]}getScrollParents(e){const t=[];let i=e.parentElement;for(;i&&i!==document.body;){const e=getComputedStyle(i),s=e.overflowY,r=e.overflowX,n=("auto"===s||"scroll"===s||"overlay"===s)&&i.scrollHeight>i.clientHeight,o=("auto"===r||"scroll"===r||"overlay"===r)&&i.scrollWidth>i.clientWidth;(n||o)&&t.push(i),i=i.parentElement}return t}captureFocusBeforeOpen(){this.lastFocusedEl=document.activeElement}elementIsTriggerRelated(e){if(!(e instanceof HTMLElement))return!1;const t=this.opts.getAnchor(),i=this.opts.getFocusTarget?.()??null;return!(!i||e!==i&&!i.contains(e))||!!t&&(!(e!==t&&!t.contains(e))||!!t.shadowRoot?.contains(e))}restoreFocus(){if(!this.opts.getRestoreFocusOnClose())return;const e=this.opts.getAnchor();if(!e)return;const t=this.opts.getFocusTarget?.()??e,i=document.activeElement,s=this.lastFocusedEl,r=this.opts.getPopover(),n=!!(r&&s&&r.contains(s)),o=this.elementIsTriggerRelated(s);(!!(r&&i&&r.contains(i))||n||o)&&t.focus?.({preventScroll:!0})}ensurePopoverMarginZero(){const e=this.opts.getPopover();e&&(e.style.margin||(e.style.margin="0"))}updateOption(e,t){this.opts[e]="function"==typeof t?t:()=>t,this._open&&e.startsWith("get")&&this.position()}}export{e as PopoverController};
|
|
1
|
+
class e{constructor(t,i){this._open=!1,this.raf=0,this.boundScrollParents=[],this._listenersAttached=!1,this.lastCloseReason="toggle",this.lastFocusedEl=null,this.hasEverOpened=!1,this._skipNextReposition=!1,this.lastMeta={place:"bottom",arrowAlign:"center"},this._phase="idle",this.onToggle=e=>{if("light-dismiss"===this.lastCloseReason)return void(this.lastCloseReason="toggle");const t=this.opts.getPopover(),i=e;let s=null;if("string"==typeof i?.newState&&(s="open"===i.newState),null===s&&t&&(s=t.matches?.(":popover-open")??!1),null!==s){if(!s)return this._open=!1,this.detachGlobalListenersIfAttached(),this.opts.onOpenChange?.(!1,{reason:this.lastCloseReason}),void(this.opts.getRestoreFocusOnClose()&&this.restoreFocus());this._open=!0,this.attachGlobalListeners(),this.opts.onOpenChange?.(!0,{reason:"toggle"}),this.position(),this.raf=requestAnimationFrame(()=>this.opts.focusOnOpen?.())}},this.onDocumentPointerDown=e=>{if(!this._open)return;if(!this.opts.getCloseOnOutside())return;const t=this.opts.getPopover(),i=this.opts.getAnchor();if(!t||!i)return;if("number"==typeof e.button&&0!==e.button)return;const s=e.composedPath?.()??[],r=s.includes(t),n=s.includes(i);if(r||n)return;for(const e of s){if(!(e instanceof Element))continue;if("function"==typeof e.matches&&e.matches(":popover-open"))return;const i=e.closest?.(":popover-open");if(i&&i!==t)return}const o=e.clientX,a=e.clientY;if(o>=window.innerWidth||a>=window.innerHeight)return;const c=this.opts.getIgnoreOutsideAttr(),l=(this.opts.getIgnoreOutsideSelector()||"").trim();for(const e of s)if(e instanceof HTMLElement){if(c&&e.hasAttribute(c))return;if(l){if(e.matches(l))return;if(e.closest(l))return}}this.closePopover("light-dismiss")},this.onViewportMove=()=>{this._open&&this.position()},this.onKeydown=e=>{if(!this._open)return;if("Escape"!==e.key)return;if(!this.opts.getCloseOnEscape())return;const t=this.opts.getPopover(),i=this.opts.getAnchor(),s=document.activeElement,r=!!(t&&s&&t.contains(s)),n=!!(i&&s&&i.contains(s));(r||n)&&(e.preventDefault(),e.stopPropagation(),this.closePopover("escape"))},this.onGroupOpen=e=>{const t=e.detail?.id;t!==(this.opts.groupId??this.host)&&this._open&&this.closePopover("group")},this.host=t,t.addController(this);const s=i.duration??220,r=i.closeDuration??Math.min(180,s);this.opts={getAnchor:i.getAnchor,getPopover:i.getPopover,getPlacement:e.createGetter(i.getPlacement,i.placement,"auto"),getAlign:e.createGetter(i.getAlign,i.align,"start"),getGap:e.createGetter(i.getGap,i.gap,6),getPadding:e.createGetter(i.getPadding,i.padding,8),getMatchAnchorWidth:e.createGetter(i.getMatchAnchorWidth,i.matchAnchorWidth,!0),getMaxWidthToViewport:e.createGetter(i.getMaxWidthToViewport,i.maxWidthToViewport,!0),getMaxWidthMode:e.createGetter(i.getMaxWidthMode,i.maxWidthMode,"cap"),getFlip:e.createGetter(i.getFlip,i.flip,!0),getFlipOrder:e.createGetter(i.getFlipOrder,i.flipOrder,[]),getPreset:e.createGetter(i.getPreset,i.preset,"slide"),getDuration:e.createGetter(i.getDuration,i.duration,s),getCloseDuration:e.createGetter(i.getCloseDuration,i.closeDuration,r),getAnimateReposition:e.createGetter(i.getAnimateReposition,i.animateReposition,!0),getRepositionMs:e.createGetter(i.getRepositionMs,i.repositionMs,160),getCloseOnEscape:e.createGetter(i.getCloseOnEscape,i.closeOnEscape,!0),getCloseOnOutside:e.createGetter(i.getCloseOnOutside,i.closeOnOutside,!1),getIgnoreOutsideSelector:e.createGetter(i.getIgnoreOutsideSelector,i.ignoreOutsideSelector,""),getIgnoreOutsideAttr:e.createGetter(i.getIgnoreOutsideAttr,i.ignoreOutsideAttr,"data-popover-ignore-outside"),getRestoreFocusOnClose:e.createGetter(i.getRestoreFocusOnClose,i.restoreFocusOnClose,!0),cssVarLeft:i.cssVarLeft??"--sky-pop-left",cssVarTop:i.cssVarTop??"--sky-pop-top",cssVarWidth:i.cssVarWidth??"--sky-pop-width",focusOnOpen:i.focusOnOpen,scrollContainer:i.scrollContainer??"auto",groupEventName:i.groupEventName,groupId:i.groupId,onOpenChange:i.onOpenChange,getFocusTarget:i.getFocusTarget,sideAttr:i.sideAttr??"data-side",respectReducedMotion:i.respectReducedMotion??!0}}static createGetter(e,t,i){return e||(()=>t??i)}get open(){return this._open}get meta(){return this.lastMeta}hostConnected(){"undefined"!=typeof window&&(this.visualViewport=window.visualViewport??void 0)}hostDisconnected(){this.detachGlobalListenersIfAttached(),this.raf&&cancelAnimationFrame(this.raf)}attachGlobalListeners(){"undefined"==typeof window||this._listenersAttached||(this._listenersAttached=!0,this.visualViewport&&(this.visualViewport.addEventListener("resize",this.onViewportMove,{passive:!0}),this.visualViewport.addEventListener("scroll",this.onViewportMove,{passive:!0})),window.addEventListener("resize",this.onViewportMove,{passive:!0}),window.addEventListener("scroll",this.onViewportMove,{passive:!0,capture:!0}),this.opts.groupEventName&&window.addEventListener(this.opts.groupEventName,this.onGroupOpen),this.opts.getCloseOnEscape()&&window.addEventListener("keydown",this.onKeydown,!0),document.addEventListener("pointerdown",this.onDocumentPointerDown,!0),this.setupObserversAndScrollParents())}detachGlobalListenersIfAttached(){this._listenersAttached&&(this._listenersAttached=!1,"undefined"!=typeof window&&(window.removeEventListener("resize",this.onViewportMove),window.removeEventListener("scroll",this.onViewportMove,!0),this.visualViewport&&(this.visualViewport.removeEventListener("resize",this.onViewportMove),this.visualViewport.removeEventListener("scroll",this.onViewportMove)),this.opts.groupEventName&&window.removeEventListener(this.opts.groupEventName,this.onGroupOpen),window.removeEventListener("keydown",this.onKeydown,!0)),document.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.teardownScrollParents(),this.anchorRO?.disconnect(),this.anchorRO=void 0,this.popoverRO?.disconnect(),this.popoverRO=void 0)}refreshTargets(){this._listenersAttached&&this.setupObserversAndScrollParents(),this._open&&this.position()}toggle(){this._open?this.closePopover("api"):this.openPopover()}openPopover(){this.raf&&cancelAnimationFrame(this.raf),this.raf=0;const e=this.opts.getPopover();if(!e)return;"undefined"!=typeof window&&this.opts.groupEventName&&window.dispatchEvent(new CustomEvent(this.opts.groupEventName,{detail:{id:this.opts.groupId??this.host}})),this.captureFocusBeforeOpen(),this.ensurePopoverMarginZero(),this._open=!0,this.attachGlobalListeners(),this.opts.onOpenChange?.(!0,{reason:"api"});const t=e.style.visibility;e.style.visibility="hidden",e.showPopover?.();const i=this.hasEverOpened;this.hasEverOpened=!0,this._skipNextReposition=!i,this.position(),e.getBoundingClientRect();const s=this.lastMeta.place;this.setSideAttr(s),this.raf=requestAnimationFrame(()=>{e.style.visibility=t||"visible",this.playPreset(e,s,"open").then(()=>this.opts.focusOnOpen?.())})}async closePopover(e="api"){const t=this.opts.getPopover();if(!t)return;if(this.lastCloseReason=e,!this._open)return void t.hidePopover?.();this._open=!1,this.opts.getRestoreFocusOnClose()&&this.restoreFocus(),this.detachGlobalListenersIfAttached(),this.opts.onOpenChange?.(!1,{reason:e});const i=this.lastMeta.place;this.setSideAttr(i),this.raf&&cancelAnimationFrame(this.raf),this.raf=0,this.moveAnim?.cancel(),await this.playPreset(t,i,"close"),t.hidePopover?.()}normalizeFlipOrder(e){const t=["bottom","top","right","left"];if(!e||!e.length)return t;const i=new Set(["top","bottom","left","right"]),s=[];for(const t of e)i.has(t)&&!s.includes(t)&&s.push(t);for(const e of t)s.includes(e)||s.push(e);return s}defaultOrderFromPlacement(e){switch(e){case"top":return["top","bottom","right","left"];case"bottom":default:return["bottom","top","right","left"];case"left":return["left","right","bottom","top"];case"right":return["right","left","bottom","top"]}}position(){if("undefined"==typeof window)return;const e=this.opts.getAnchor(),t=this.opts.getPopover();if(!e||!t)return;this.ensurePopoverMarginZero();const i=t.matches?.(":popover-open")&&null!==t.offsetParent,s=this._open&&i?t.getBoundingClientRect():null,r=this.opts.getPadding(),n=this.opts.getGap(),o=e.getBoundingClientRect(),a=window.visualViewport??null,c=a?.width??window.innerWidth,l=a?.height??window.innerHeight,p=a?.offsetLeft??0,h=a?.offsetTop??0;if(this.opts.getMaxWidthToViewport()){const e=Math.max(0,c-2*r);t.style.maxWidth=`${e}px`,t.style.boxSizing="border-box"}const x=t.getBoundingClientRect(),u=x.width||220,d=x.height||50,g={top:o.top-n-h,bottom:l-(o.bottom-h)-n,left:o.left-n-p,right:c-(o.right-p)-n},f=e=>"top"===e?g.top>=d:"bottom"===e?g.bottom>=d:"left"===e?g.left>=u:g.right>=u,P=this.opts.getPlacement(),b=this.opts.getFlip(),v=this.opts.getFlipOrder()?.length?this.normalizeFlipOrder(this.opts.getFlipOrder()):this.normalizeFlipOrder(this.defaultOrderFromPlacement(P));let m;if("auto"===P){m=v.find(f)??v.map(e=>[e,g[e]]).sort((e,t)=>t[1]-e[1])[0][0]}else if(b){const e=P,t=v.includes(e)?[e,...v.filter(t=>t!==e)]:[e,...v];m=t.find(f)??t.map(e=>[e,g[e]]).sort((e,t)=>t[1]-e[1])[0][0]}else m=P;let $=0,y=0,O="center";const D="rtl"===getComputedStyle(e).direction;let S=this.opts.getAlign();D&&("start"===S?S="end":"end"===S&&(S="start"));const k=o.left-p,w=o.right-p,C=o.top-h,A=o.bottom-h,z=o.width,M=o.height;if("top"===m||"bottom"===m){y="start"===S?k:"end"===S?w-u:k+z/2-u/2,$="top"===m?C-d-n:A+n;const e=Math.max(r,Math.min(c-u-r,y));e!==y&&(O=e<=r+.5?"start":"end"),y=e,$=Math.max(r,Math.min(l-d-r,$))}else{y="left"===m?k-u-n:w+n,$=C+M/2-d/2;const e=Math.max(r,Math.min(l-d-r,$));e!==$&&(O=e<=r+.5?"start":"end"),$=e,y=Math.max(r,Math.min(c-u-r,y))}y+=p,$+=h;const I=this.host;if(this.opts.getMatchAnchorWidth()){const e=Math.max(0,c-2*r),t=Math.min(o.width,e);I.style.setProperty(this.opts.cssVarWidth,`${t}px`)}else I.style.removeProperty(this.opts.cssVarWidth);if(I.style.setProperty(this.opts.cssVarLeft,`${y}px`),I.style.setProperty(this.opts.cssVarTop,`${$}px`),t.style.setProperty(this.opts.cssVarLeft,`${y}px`),t.style.setProperty(this.opts.cssVarTop,`${$}px`),this.opts.getMatchAnchorWidth()){const e=I.style.getPropertyValue(this.opts.cssVarWidth);e&&t.style.setProperty(this.opts.cssVarWidth,e)}else t.style.removeProperty(this.opts.cssVarWidth);this.lastMeta.place,this.lastMeta={place:m,arrowAlign:O},this.setSideAttr(m);this._open&&this.opts.getAnimateReposition()&&s&&!this._skipNextReposition&&t.matches?.(":popover-open")&&i&&"open"===this._phase&&!this.presetAnim&&(this.raf&&cancelAnimationFrame(this.raf),this.raf=requestAnimationFrame(()=>{const e=t.getBoundingClientRect();this.animateMove(t,s,e)})),this._skipNextReposition=!1}vec(e,t){return"top"===e?{x:0,y:+t}:"bottom"===e?{x:0,y:-t}:"left"===e?{x:+t,y:0}:{x:-t,y:0}}prefersReducedMotion(){return!!this.opts.respectReducedMotion&&("undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches)}computeOrigin(e,t){return"center"===t?"50% 50%":"top"===e?"50% 100%":"bottom"===e?"50% 0%":"left"===e?"100% 50%":"0% 50%"}kf(e,t,i){const s={opacity:e,transform:t};return i&&(s.filter=i),s}presetRegistry(){return{none:{name:"none",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.16, 1, 0.3, 1)",easingClose:"cubic-bezier(0.2, 0, 0, 1)",enterDuration:220,exitDuration:180},getKeyframes:()=>[{opacity:1}]},fade:{name:"fade",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.4, 0, 0.2, 1)",easingClose:"cubic-bezier(0.4, 0, 0.2, 1)",enterDuration:180,exitDuration:150},getKeyframes:({phase:e})=>"open"===e?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}]},scale:{name:"scale",defaults:{enterPx:0,exitPx:0,enterScale:.9,exitScale:.95,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.36, 0, 0.66, -0.56)",enterDuration:200,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},slide:{name:"slide",defaults:{enterPx:12,exitPx:8,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.23, 1, 0.32, 1)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:250,exitDuration:220},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px, 0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px, 0)`)]}},iosMenu:{name:"iosMenu",defaults:{enterPx:12,exitPx:8,enterScale:.98,exitScale:.99,blurInPx:6,blurOutPx:3,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",easingClose:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",enterDuration:250,exitDuration:220},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px, 0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px, 0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},iosSheet:{name:"iosSheet",defaults:{enterPx:16,exitPx:12,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.36, 0, 0.66, -0.56)",easingClose:"cubic-bezier(0.34, 1.56, 0.64, 1)",enterDuration:200,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},materialMenu:{name:"materialMenu",defaults:{enterPx:10,exitPx:6,enterScale:.96,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.2, 0, 0, 1)",easingClose:"cubic-bezier(0.4, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},materialSheet:{name:"materialSheet",defaults:{enterPx:18,exitPx:14,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.05, 0.7, 0.1, 1)",easingClose:"cubic-bezier(0.3, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},floaty:{name:"floaty",defaults:{enterPx:14,exitPx:10,enterScale:.985,exitScale:.99,blurInPx:10,blurOutPx:6,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.22, 0.61, 0.36, 1)",easingClose:"cubic-bezier(0.55, 0.06, 0.68, 0.19)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},soft:{name:"soft",defaults:{enterPx:10,exitPx:8,enterScale:.97,exitScale:.98,blurInPx:4,blurOutPx:2,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.33, 1, 0.68, 1)",easingClose:"cubic-bezier(0.32, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},sharp:{name:"sharp",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.12, 0.9, 0.2, 1)",easingClose:"cubic-bezier(0.4, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},blurIn:{name:"blurIn",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:12,blurOutPx:8,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.5, 0, 0.75, 0)",easingClose:"cubic-bezier(0.33, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,"translate3d(0,0,0)",`blur(${t.blurInPx}px)`),this.kf(1,"translate3d(0,0,0)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0)","blur(0px)"),this.kf(0,"translate3d(0,0,0)",`blur(${t.blurOutPx}px)`)]},blurFade:{name:"blurFade",defaults:{enterPx:10,exitPx:8,enterScale:.99,exitScale:.99,blurInPx:10,blurOutPx:6,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.45, 0, 0.55, 1)",easingClose:"cubic-bezier(0.3, 0, 0.7, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`,`blur(${i.blurOutPx}px)`)]}},zoomFromAnchor:{name:"zoomFromAnchor",defaults:{enterPx:6,exitPx:4,enterScale:.92,exitScale:.96,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},zoomFromCorner:{name:"zoomFromCorner",defaults:{enterPx:0,exitPx:0,enterScale:.88,exitScale:.94,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.18, 0.89, 0.32, 1.28)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},flip3d:{name:"flip3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:14,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.5, 0, 0.75, 0)",easingClose:"cubic-bezier(0.33, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i,origin:s})=>{const r=this.vec(t,i.enterPx),n="left"===t||"right"===t?"Y":"X",o="top"===t||"left"===t?1:-1,a=i.rotateDeg*o;if("open"===e)return[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${r.x}px, ${r.y}px, 0) rotate${n}(${a}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${n}(0deg) scale(1)`)];const c=this.vec(t,i.exitPx);return[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${n}(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${c.x}px, ${c.y}px, 0) rotate${n}(${.7*a}deg) scale(${i.exitScale})`)]}},card3d:{name:"card3d",defaults:{enterPx:10,exitPx:8,enterScale:.96,exitScale:.98,blurInPx:6,blurOutPx:3,perspectivePx:1e3,rotateDeg:10,tiltDeg:10,origin:"anchor",easingOpen:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",easingClose:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="left"===t||"right"===t?"Y":"X",n="top"===t||"left"===t?1:-1,o=i.tiltDeg*n;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotate${r}(${o}deg) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${r}(0deg) scale(1)`,"blur(0px)")]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${r}(0deg) scale(1)`,"blur(0px)"),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotate${r}(${.7*o}deg) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},tilt3d:{name:"tilt3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:12,origin:"corner",easingOpen:"cubic-bezier(0.23, 1, 0.32, 1)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="top"===t?i.tiltDeg:"bottom"===t?-i.tiltDeg:0,n="left"===t?i.tiltDeg:"right"===t?-i.tiltDeg:0;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotateX(${r}deg) rotateY(${n}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1)`)]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotateX(${.6*r}deg) rotateY(${.6*n}deg) scale(${i.exitScale})`)]}},depth3d:{name:"depth3d",defaults:{enterPx:0,exitPx:0,enterScale:.9,exitScale:.94,blurInPx:8,blurOutPx:5,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.22, 0.61, 0.36, 1)",easingClose:"cubic-bezier(0.55, 0.06, 0.68, 0.19)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`perspective(${t.perspectivePx}px) translate3d(0,0,-40px) scale(${t.enterScale})`,`blur(${t.blurInPx}px)`),this.kf(1,`perspective(${t.perspectivePx}px) translate3d(0,0,0) scale(1)`,"blur(0px)")]:[this.kf(1,`perspective(${t.perspectivePx}px) translate3d(0,0,0) scale(1)`,"blur(0px)"),this.kf(0,`perspective(${t.perspectivePx}px) translate3d(0,0,-30px) scale(${t.exitScale})`,`blur(${t.blurOutPx}px)`)]},rotate3d:{name:"rotate3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:12,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.36, 0, 0.66, -0.56)",easingClose:"cubic-bezier(0.34, 1.56, 0.64, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="top"===t||"left"===t?1:-1,n=i.rotateDeg*r;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotateZ(${n}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateZ(0deg) scale(1)`)]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateZ(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotateZ(${.7*n}deg) scale(${i.exitScale})`)]}},springy:{name:"springy",defaults:{enterPx:12,exitPx:8,enterScale:.94,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1.15)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx);if("open"===e)return[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1.02)"),this.kf(1,"translate3d(0,0,0) scale(1)")];const r=this.vec(t,i.exitPx);return[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},bouncy:{name:"bouncy",defaults:{enterPx:14,exitPx:10,enterScale:.9,exitScale:.96,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1.15)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx);if("open"===e)return[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1.03)"),this.kf(1,"translate3d(0,0,0) scale(1)")];const r=this.vec(t,i.exitPx);return[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},glide:{name:"glide",defaults:{enterPx:18,exitPx:12,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.08, 0.82, 0.17, 1)",easingClose:"cubic-bezier(0.3, 0, 1, 1)",enterDuration:220,exitDuration:200},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},pop:{name:"pop",defaults:{enterPx:0,exitPx:0,enterScale:.85,exitScale:.95,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.18, 0.89, 0.32, 1.28)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1.03)"),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},drop:{name:"drop",defaults:{enterPx:22,exitPx:14,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1)",easingClose:"cubic-bezier(0.45, 0, 0.55, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},grow:{name:"grow",defaults:{enterPx:6,exitPx:4,enterScale:.95,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}}}}getPresetKeyframes(e,t,i,s){const r=this.presetRegistry(),n=r[e]??r.iosMenu;this.getBaseDefaults();const o={...n.defaults,...s??{}},a=this.computeOrigin(t,o.origin);return{keyframes:n.getKeyframes({side:t,phase:i,cfg:o,origin:a}),cfg:o,origin:a}}getBaseDefaults(){return{enterPx:12,exitPx:8,enterScale:.98,exitScale:.99,blurInPx:6,blurOutPx:3,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.16, 1, 0.3, 1)",easingClose:"cubic-bezier(0.2, 0, 0, 1)",enterDuration:220,exitDuration:180}}async playPreset(e,t,i){if(this.checkForConflictingCSS(e),this.prefersReducedMotion())return;const s=this.opts.getPreset();if("none"===s)return;this.moveAnim?.cancel(),this.presetAnim?.cancel(),this._phase="open"===i?"opening":"closing",e.style.transition="none";const{keyframes:r,cfg:n,origin:o}=this.getPresetKeyframes(s,t,i),a="open"===i?n.enterDuration:n.exitDuration,c=this.is3dPreset(s);c?(e.style.transformStyle="preserve-3d",e.style.backfaceVisibility="hidden"):(e.style.transformStyle="",e.style.backfaceVisibility=""),e.style.transformOrigin=o;const l="open"===i?n.easingOpen:n.easingClose,p=e.animate(r,{duration:a,easing:l,fill:"both"});this.presetAnim=p;try{await p.finished}catch{}finally{this.presetAnim===p&&(this.presetAnim=void 0),e.style.transition="",c&&(e.style.transformStyle="",e.style.backfaceVisibility=""),this._phase="open"===i?"open":"idle"}}checkForConflictingCSS(e){const t=e.style.transition||"";t.includes("transform")&&t.includes("opacity")&&console.warn("Warning: Using 3D animation (WAAPI) alongside CSS transitions on 'transform' or 'opacity' can cause conflicts. Consider removing CSS transitions on these properties."),(t.includes("margin")||t.includes("padding"))&&console.warn("Warning: Animating 'margin' or 'padding' alongside 3D animation (WAAPI) may cause visual glitches. Please avoid transitioning these properties during WAAPI animations.")}animateMove(e,t,i){if("open"!==this._phase)return;const s=t.left-i.left,r=t.top-i.top;if(Math.abs(s)<.5&&Math.abs(r)<.5)return;this.moveAnim?.cancel();const n=this.opts.getRepositionMs(),o=e.animate([{transform:`translate3d(${s}px, ${r}px, 0)`},{transform:"translate3d(0, 0, 0)"}],{duration:n,easing:"cubic-bezier(0.16, 1, 0.3, 1)",fill:"both"});this.moveAnim=o,o.finished.finally(()=>{this.moveAnim===o&&(this.moveAnim=void 0)})}is3dPreset(e){return"flip3d"===e||"card3d"===e||"tilt3d"===e||"depth3d"===e||"rotate3d"===e}setSideAttr(e){const t=this.opts.getPopover();t&&t.setAttribute(this.opts.sideAttr,e)}setupObserversAndScrollParents(){if("undefined"==typeof window)return;const e=this.opts.getAnchor(),t=this.opts.getPopover();e&&"ResizeObserver"in window&&(this.anchorRO?.disconnect(),this.anchorRO=new ResizeObserver(()=>{this._open&&this.position()}),this.anchorRO.observe(e)),t&&"ResizeObserver"in window&&(this.popoverRO?.disconnect(),this.popoverRO=new ResizeObserver(()=>{this._open&&this.position()}),this.popoverRO.observe(t)),this.teardownScrollParents();const i=this.opts.scrollContainer;if("window"!==i)if(i instanceof HTMLElement)this.bindScroll(i);else if(e)for(const t of this.getScrollParents(e))this.bindScroll(t)}bindScroll(e){const t=this.onViewportMove;e.addEventListener("scroll",t,{passive:!0}),this.boundScrollParents.push({el:e,fn:t})}teardownScrollParents(){for(const{el:e,fn:t}of this.boundScrollParents)e.removeEventListener?.("scroll",t);this.boundScrollParents=[]}getScrollParents(e){const t=[];let i=e.parentElement;for(;i&&i!==document.body;){const e=getComputedStyle(i),s=e.overflowY,r=e.overflowX,n=("auto"===s||"scroll"===s||"overlay"===s)&&i.scrollHeight>i.clientHeight,o=("auto"===r||"scroll"===r||"overlay"===r)&&i.scrollWidth>i.clientWidth;(n||o)&&t.push(i),i=i.parentElement}return t}captureFocusBeforeOpen(){this.lastFocusedEl=document.activeElement}elementIsTriggerRelated(e){if(!(e instanceof HTMLElement))return!1;const t=this.opts.getAnchor(),i=this.opts.getFocusTarget?.()??null;return!(!i||e!==i&&!i.contains(e))||!!t&&(!(e!==t&&!t.contains(e))||!!t.shadowRoot?.contains(e))}restoreFocus(){if(!this.opts.getRestoreFocusOnClose())return;const e=this.opts.getAnchor();if(!e)return;const t=this.opts.getFocusTarget?.()??e,i=document.activeElement,s=this.lastFocusedEl,r=this.opts.getPopover(),n=!!(r&&s&&r.contains(s)),o=this.elementIsTriggerRelated(s);(!!(r&&i&&r.contains(i))||n||o)&&t.focus?.({preventScroll:!0})}ensurePopoverMarginZero(){const e=this.opts.getPopover();e&&(e.style.margin||(e.style.margin="0"))}updateOption(e,t){this.opts[e]="function"==typeof t?t:()=>t,this._open&&e.startsWith("get")&&this.position()}}export{e as PopoverController};
|
|
2
2
|
//# sourceMappingURL=popover-controller.js.map
|