@postnord/web-components/postnord-web-components/p-0a0c5587.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,g as n,h as o,a as i}from"./p-C247oTEA.js";import{uuidv4 as e}from"./index.esm.js";const d="pn-button-dropdown{display:inline-block;position:relative}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){pn-button-dropdown .pn-button-dropdown-container{transition-duration:0s;transition-delay:0s}}pn-button-dropdown .pn-button-dropdown-container{transition-delay:0.2s}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{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){pn-button-dropdown .pn-button-dropdown-content{transition-duration:0s;transition-delay:0s}}pn-button-dropdown .pn-button-dropdown-content{transition-delay:0s, 0.2s}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 r=class{constructor(n){t(this,n)}id=`pn-button-${e()}`;focusableElements;container;dropdownButtonId=`${this.id}-dropdown`;dropdownContentId=`${this.id}-content`;get hostElement(){return n(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 n=this.getRect(this.hostElement);const o=n.top>t.height+window.innerWidth*.025;this.top=o&&n.top+n.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 o(i,{key:"0b6deb752a9f01bea9571627205b5cd3efbc1c66"},o("div",{key:"c7833d539d682a980bb7cc529f17d9942ffd7eb2",class:"pn-button-dropdown"},o("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}),o("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},o("div",{key:"e217ae843fa641335ce0714272f68f9a080afe7d",class:"pn-button-dropdown-content"},o("slot",{key:"f52ad763a52e9ee17d9a95a1e3a959d61fae2fe1"})))))}static get watchers(){return{open:["openHandler"]}}};r.style=d;export{r as pn_button_dropdown};
//# sourceMappingURL=p-0a0c5587.entry.js.map