@postnord/web-components/postnord-web-components/p-63b3b6da.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,g as o,h as n,a as i}from"./p-c2c6299e.js";import{u as e}from"./p-c511b4fb.js";const s="pn-button-dropdown{display:inline-block;position:relative}pn-button-dropdown .pn-button-dropdown-container{position:absolute;top:130%;left:0;border-radius:1em;box-shadow:0 0.125em 1em rgba(0, 0, 0, 0.2);transform-origin:top left;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.15s;transform:scale(0);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;z-index:10;background:#ffffff}pn-button-dropdown .pn-button-dropdown-container[data-right]{left:unset;right:0;transform-origin:top right}pn-button-dropdown .pn-button-dropdown-container[data-top]{top:unset;bottom:130%;transform-origin:bottom left}pn-button-dropdown .pn-button-dropdown-content{padding:1em;opacity:0;transition:opacity 0.2s cubic-bezier(0.7, 0, 0.3, 1), visibility 0.2s;transition-delay:0s;position:relative;width:max-content;max-width:100%;visibility:hidden}pn-button-dropdown .pn-button-dropdown[data-open=true] .pn-button-dropdown-container{transition-delay:0s}pn-button-dropdown .pn-button-dropdown[data-open=true] .pn-button-dropdown-content{opacity:1;visibility:visible}";const a=s;const d=class{constructor(o){t(this,o)}id=`pn-button-${e()}`;focusableElements;container;dropdownButtonId=`${this.id}-dropdown`;dropdownContentId=`${this.id}-content`;get hostElement(){return o(this)}right=false;top=false;label;icon;appearance="";variant="";small=false;tooltip;open=false;openHandler(){this.toggleDropdown();if(this.open){document.addEventListener("click",this.globalHandler);document.addEventListener("keyup",this.globalHandler)}else{document.removeEventListener("click",this.globalHandler);document.removeEventListener("keyup",this.globalHandler)}}componentDidLoad(){if(this.open)this.openHandler()}getRect(t){return t.getBoundingClientRect()}globalHandler=t=>{if(!this.hostElement.contains(t.target)||t?.key==="Escape"){this.open=false}};toggleDropdown(){this.right=this.hostElement.offsetLeft>window.innerWidth/2;requestAnimationFrame((()=>{if(this.open){this.container.style.transition="none";this.container.style.transform="none"}const t=this.getRect(this.container);const o=this.getRect(this.hostElement);const n=o.top>t.height+window.innerWidth*.025;this.top=n&&o.top+o.height+t.height>window.innerHeight-window.innerWidth*.025;let i=0;if(t.right>window.innerWidth||t.x<0){i=t.x+t.width+window.innerWidth*.025-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 n(i,{key:"7398ec85382fc0abe7b81849e739a7bc26bdd084"},n("div",{key:"6ca6e2a0f28ce2fb03e0a2eca02309dbc50cbabb",class:"pn-button-dropdown"},n("pn-button",{key:"629cec46e4cdf9cd346ff4160596cf255dea6187",label:this.label,buttonId:this.dropdownButtonId,class:"pn-button-dropdown-label",appearance:this.appearance,variant:this.variant,small:this.small,icon:this.icon,ariacontrols:this.dropdownContentId,ariahaspopup:"true",ariaexpanded:this.open.toString(),onPnClick:this.toggle,tooltip:this.tooltip,tooltipUp:!this.top,iconOnly:!!this.tooltip&&!!this.icon&&!this.label}),n("div",{key:"51c980101ab122802f27634488b2ae6ef6c59ced",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},n("div",{key:"e6d703cfcc8e123b4e84e98fb4e7471911bc28bb",class:"pn-button-dropdown-content"},n("slot",{key:"ee5450952fb2c7df077cb56debcd7873cfc86739"})))))}static get watchers(){return{open:["openHandler"]}}};d.style=a;export{d as pn_button_dropdown};
//# sourceMappingURL=p-63b3b6da.entry.js.map