primevue/overlaypanel/overlaypanel.cjs.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)

"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),n=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},data:()=>({visible:!1}),selfClick:!1,target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,beforeUnmount(){this.restoreAppend(),this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.unbindResizeListener(),this.target=null,this.container=null},methods:{toggle(e){this.visible?this.hide():this.show(e)},show(e){this.visible=!0,this.target=e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(){this.appendContainer(),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&(this.container.style.zIndex=String(this.baseZIndex+e.DomHandler.generateZIndex()))},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener()},alignOverlay(){e.DomHandler.absolutePosition(this.container,this.target);const t=e.DomHandler.getOffset(this.container),n=e.DomHandler.getOffset(this.target);let i=0;t.left<n.left&&(i=n.left-t.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),t.top<n.top&&e.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(){return this.target&&(this.target===event.target||this.target.contains(event.target))},appendContainer(){this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.container):document.getElementById(this.appendTo).appendChild(this.container))},restoreAppend(){this.container&&this.appendTo&&("body"===this.appendTo?document.body.removeChild(this.container):document.getElementById(this.appendTo).removeChild(this.container))},containerRef(e){this.container=e}},directives:{ripple:i(t).default}};const s=n.createVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1);!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent\n}\n'),r.render=function(e,t,i,r,l,o){const a=n.resolveDirective("ripple");return n.openBlock(),n.createBlock(n.Transition,{name:"p-overlaypanel",onEnter:o.onEnter,onLeave:o.onLeave},{default:n.withCtx((()=>[l.visible?(n.openBlock(),n.createBlock("div",{key:0,class:"p-overlaypanel p-component",ref:o.containerRef},[n.createVNode("div",{class:"p-overlaypanel-content",onClick:t[1]||(t[1]=(...e)=>o.onContentClick&&o.onContentClick(...e))},[n.renderSlot(e.$slots,"default")]),i.showCloseIcon?n.withDirectives((n.openBlock(),n.createBlock("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>o.hide&&o.hide(...e)),"aria-label":i.ariaCloseLabel,type:"button"},[s],8,["aria-label"])),[[a]]):n.createCommentVNode("",!0)],512)):n.createCommentVNode("",!0)])),_:1},8,["onEnter","onLeave"])},module.exports=r;