@postnord/web-components/components/pn-button-dropdown.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as n,HTMLElement as o,h as i,Host as e}from"@stencil/core/internal/client";import{u as r}from"./helpers.js";import{d as s}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as a}from"./pn-spinner2.js";const p=n(class extends o{constructor(t){super(),!1!==t&&this.__registerHost()}id="pn-button-"+r();focusableElements;container;dropdownButtonId=this.id+"-dropdown";dropdownContentId=this.id+"-content";get hostElement(){return 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,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}]}}static get style(){return`${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}`}},[772,"pn-button-dropdown",{label:[1],icon:[1],appearance:[1],variant:[1],small:[4],tooltip:[1],open:[1540],right:[32],top:[32]},void 0,{open:[{openHandler:0}]}]),c=p,u=function(){"undefined"!=typeof customElements&&["pn-button-dropdown","pn-button","pn-icon","pn-spinner"].forEach((n=>{switch(n){case"pn-button-dropdown":customElements.get(t(t(n)))||customElements.define(t(t(n)),p);break;case"pn-button":customElements.get(t(t(n)))||s();break;case"pn-icon":customElements.get(t(t(n)))||d();break;case"pn-spinner":customElements.get(t(t(n)))||a()}}))};export{c as PnButtonDropdown,u as defineCustomElement}