@postnord/web-components/postnord-web-components/p-244db205.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,g as o,h as n}from"./p-C247oTEA.js";import{a as i}from"./p-B88w-Zxn.js";const e='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.015 7.207c.14-.422.536-.707.981-.707h.18a.87.87 0 0 1 .854.871c0 .313-.179.6-.447.735A2.81 2.81 0 0 0 11 12.618V13a1 1 0 1 0 2 0v-.382a.81.81 0 0 1 .447-.724A2.83 2.83 0 0 0 15 9.371C15 7.807 13.734 6.5 12.146 6.5h-.18a3.03 3.03 0 0 0-2.878 2.075l-.037.109a1 1 0 1 0 1.898.632zM12 17.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';const r=e;const a='pn-tooltip{display:inline-block;font-size:1em}pn-tooltip .pn-tooltip{background:none;background-color:transparent;border:none;position:relative;padding:0;border-radius:50%;transition-property:outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip{cursor:pointer;font-size:inherit;outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tooltip .pn-tooltip:focus-visible{outline-color:#005d92;background-color:#e0f8ff}pn-tooltip .pn-tooltip:hover{background-color:#e0f8ff}pn-tooltip .pn-tooltip[data-light] pn-icon .pn-icon-svg path{fill:#ffffff}pn-tooltip .pn-tooltip[data-light]:focus,pn-tooltip .pn-tooltip[data-light]:hover{background-color:rgba(255, 255, 255, 0.2)}pn-tooltip .pn-tooltip[data-warning] pn-icon .pn-icon-svg path{fill:#a70707}pn-tooltip .pn-tooltip[data-warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tooltip .pn-tooltip[data-warning]:focus-visible{outline-color:#a70707;background-color:#fdefee}pn-tooltip .pn-tooltip[data-warning]:hover{background-color:#fdefee}pn-tooltip .pn-tooltip-content{position:absolute;text-align:left;bottom:calc(100% + 0.75em);left:50%;background:#ffffff;padding:1em;border-radius:0.8rem;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:1;max-width:min(95vw, 40em);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip-content{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip-content{transition-delay:0.15s;transform:scale(0) translateX(-50%);transform-origin:bottom left;width:max-content;color:#2d2013}pn-tooltip .pn-tooltip-content[data-simple]{background:#0d234b;color:#ffffff;border-radius:10em;padding:0.5em 0.85em;bottom:100%;font-size:0.875em;font-weight:300;margin-bottom:0.1em;margin-top:0.1em}pn-tooltip .pn-tooltip>pn-icon{position:relative;pointer-events:none}pn-tooltip .pn-tooltip>pn-icon:before{content:"";pointer-events:none;width:0;height:0;border-left:0.75em solid transparent;border-right:0.75em solid transparent;border-top:0.75em solid #ffffff;filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));bottom:102%;left:50%;position:absolute;z-index:2;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip>pn-icon:before{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip>pn-icon:before{transition-delay:0;transform:scale(0) translateX(-50%);transform-origin:top left}pn-tooltip .pn-tooltip>pn-icon[data-simple]:before{content:none}pn-tooltip .pn-tooltip[data-open] .pn-tooltip-content{transition-delay:0}pn-tooltip .pn-tooltip[data-open] pn-icon:before{transform:scale(1) translateX(-50%);transition-delay:0.15s;pointer-events:auto}pn-tooltip .pn-tooltip[data-downwards] .pn-tooltip-content{bottom:unset;top:calc(100% + 0.75em);transform-origin:top left}pn-tooltip .pn-tooltip[data-downwards] pn-icon:before{top:102%;transform-origin:bottom left;filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));border-top:none;border-bottom:0.75em solid #ffffff}';const s=class{constructor(o){t(this,o)}content;button;openEvents=["mouseover","focus"];closeEvents=["mouseleave","blur","touchcancel","touchleave"];eventListeners=[...this.openEvents,...this.closeEvents];timeout;get hostElement(){return o(this)}downwards=false;open=false;deltaX="0";warning=false;light=false;tooltip;openHandler(){if(this.open)this.checkPosition();else this.setTransform()}componentDidLoad(){this.initTooltip()}setTransform(){this.content.style.transform=`scale(${Number(this.open)}) translateX(-50%) translateX(${this.deltaX}px)`}getSymbol(){return this.warning?i:r}checkPosition(){this.content.style.transition="none";this.content.style.transform="scale(1) translateX(-50%)";this.downwards=false;requestAnimationFrame((()=>{const{x:t,y:o,right:n}=this.content.getBoundingClientRect();const i=8;this.deltaX="0";this.downwards=o<0;this.content.style.transform="";if(t<0)this.deltaX=`${t*-1+i}`;if(n>window.innerWidth)this.deltaX=`${window.innerWidth-n-i}`;requestAnimationFrame((()=>{this.content.style.transition="";this.setTransform()}))}))}initTooltip(){this.eventListeners.forEach((t=>this.button.addEventListener(t,(t=>this.toggleTooltip(t)))))}toggleTooltip(t){const o=this.openEvents.includes(t.type);let n=500;if(o)n=0;clearTimeout(this.timeout);this.timeout=setTimeout((()=>{this.open=o}),n)}render(){return n("button",{key:"1898e87fa0848bb546807416112feb7ee9f8c5a5",class:"pn-tooltip","data-light":this.light,"data-warning":this.warning,"data-downwards":this.downwards,"data-open":this.open,ref:t=>this.button=t},n("pn-icon",{key:"d4a28061a6c69ffa41cb69c4fd39961b4927949c",icon:this.getSymbol(),"data-simple":!!this.tooltip}),n("div",{key:"cc7ae46d8c228136a29356083734104bfbb2a30d",class:"pn-tooltip-content","data-simple":!!this.tooltip,ref:t=>this.content=t},this.tooltip,n("div",{key:"9ccae396edf92999920b99bf97d0818541a44bf1",hidden:!!this.tooltip},n("slot",{key:"61b67be4486d95208e09630d58a3dc3b344c5354"}))))}static get watchers(){return{open:["openHandler"]}}};s.style=a;export{s as pn_tooltip};
//# sourceMappingURL=p-244db205.entry.js.map