/*!
 * Built with Stencil
 * By PostNord.
 */
import{t,r as n,g as o,h as i,a as e}from"./p-CAEP792y.js";import{uuidv4 as d}from"./index.esm.js";const r=class{constructor(t){n(this,t)}id=`pn-button-${d()}`;focusableElements;container;dropdownButtonId=`${this.id}-dropdown`;dropdownContentId=`${this.id}-content`;get hostElement(){return o(this)}right=!1;top=!1;label;icon;appearance="";variant="";small=!1;tooltip;open=!1;openHandler(){this.toggleDropdown(),this.open?(document.addEventListener("click",this.globalHandler),document.addEventListener("keyup",this.globalHandler)):(document.removeEventListener("click",this.globalHandler),document.removeEventListener("keyup",this.globalHandler))}componentDidLoad(){this.open&&this.openHandler()}getRect(t){return t.getBoundingClientRect()}globalHandler=t=>{this.hostElement.contains(t.target)&&"Escape"!==t?.key||(this.open=!1)};toggleDropdown(){this.right=this.hostElement.offsetLeft>window.innerWidth/2,requestAnimationFrame((()=>{this.open&&(this.container.style.transition="none",this.container.style.transform="none");const t=this.getRect(this.container),n=this.getRect(this.hostElement),o=n.top>t.height+.025*window.innerWidth;this.top=o&&n.top+n.height+t.height>window.innerHeight-.025*window.innerWidth;let i=0;(t.right>window.innerWidth||t.x<0)&&(i=t.x+t.width+.025*window.innerWidth-window.innerWidth),this.container.style.transform="",requestAnimationFrame((()=>{this.container.style.transition="",this.container.style.transform=this.open?`scale(1) translateX(-${i}px)`:"",requestAnimationFrame((()=>{this.hostElement.querySelector(".pn-button-dropdown").dataset.open=`${this.open}`}))}))}))}toggle=()=>{this.open=!this.open};render(){return i(e,{key:"0b6deb752a9f01bea9571627205b5cd3efbc1c66"},i("div",{key:"c7833d539d682a980bb7cc529f17d9942ffd7eb2",class:"pn-button-dropdown"},i("pn-button",{key:"42d252b99f98b0c3f51795c894e899c6489839c2",label:this.label,buttonId:this.dropdownButtonId,class:"pn-button-dropdown-label",appearance:this.appearance,variant:this.variant,small:this.small,icon:this.icon,iconOnly:!!this.tooltip&&!!this.icon&&!this.label,ariacontrols:this.dropdownContentId,ariahaspopup:"true",ariaexpanded:this.open.toString(),tooltip:this.tooltip,tooltipUp:!this.top,onPnClick:this.toggle}),i("div",{key:"dd494c992ef2b51f31ed5c48d87fb3044ed40009",ref:t=>this.container=t,id:this.dropdownContentId,class:"pn-button-dropdown-container",role:"region","aria-labelledby":this.dropdownButtonId,"data-right":this.right,"data-top":this.top},i("div",{key:"e217ae843fa641335ce0714272f68f9a080afe7d",class:"pn-button-dropdown-content"},i("slot",{key:"f52ad763a52e9ee17d9a95a1e3a959d61fae2fe1"})))))}static get watchers(){return{open:[{openHandler:0}]}}};r.style=`${t("pn-button-dropdown")}{display:inline-block;position:relative}${t("pn-button-dropdown")} .pn-button-dropdown-container{z-index:10;position:absolute;top:130%;left:0;background-color:#ffffff;border-radius:1em;box-shadow:0 0.125em 1em rgba(0, 0, 0, 0.2);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;transform:scale(0);transform-origin:top left;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-button-dropdown")} .pn-button-dropdown-container{transition-duration:0s;transition-delay:0s}}${t("pn-button-dropdown")} .pn-button-dropdown-container{transition-delay:0.2s}${t("pn-button-dropdown")} .pn-button-dropdown-container[data-right]{left:unset;right:0;transform-origin:top right}${t("pn-button-dropdown")} .pn-button-dropdown-container[data-top]{top:unset;bottom:130%;transform-origin:bottom left}${t("pn-button-dropdown")} .pn-button-dropdown-content{position:relative;padding:1em;opacity:0;width:max-content;max-width:100%;visibility:hidden;transition-property:opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-button-dropdown")} .pn-button-dropdown-content{transition-duration:0s;transition-delay:0s}}${t("pn-button-dropdown")} .pn-button-dropdown-content{transition-delay:0s, 0.2s}${t("pn-button-dropdown")} .pn-button-dropdown[data-open=true] .pn-button-dropdown-container{transition-delay:0s}${t("pn-button-dropdown")} .pn-button-dropdown[data-open=true] .pn-button-dropdown-content{opacity:1;visibility:visible}`;export{r as pn_button_dropdown}