@postnord/web-components/postnord-web-components/p-81f9f367.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,g as o,h as n}from"./p-43660913.js";import{a as i}from"./p-9a18b612.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);cursor:pointer;font-size:inherit;outline:0.2rem solid transparent;outline-offset:0.2rem}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip{transition-duration:0s;transition-delay:0s}}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]{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tooltip .pn-tooltip[data-warning] pn-icon .pn-icon-svg path{fill:#a70707}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);transition-delay:0.15s;transform:scale(0) translateX(-50%);transform-origin:bottom left;width:max-content;color:#2d2013}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip-content{transition-duration:0s;transition-delay:0s}}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);transition-delay:0;transform:scale(0) translateX(-50%);transform-origin:top left}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip>pn-icon:before{transition-duration:0s;transition-delay:0s}}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=a;const p=class{constructor(o){t(this,o);this.downwards=false;this.open=false;this.deltaX="0";this.warning=false;this.light=false;this.tooltip=undefined}content;button;openEvents=["mouseover","focus"];closeEvents=["mouseleave","blur","touchcancel","touchleave"];eventListeners=[...this.openEvents,...this.closeEvents];timeout;get hostElement(){return o(this)}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:"7b0253721fbc44e83afc6daa41d984e9dbf16c0b",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:"d6086755274289dad52757b42aa508927d0746d2",icon:this.getSymbol(),"data-simple":!!this.tooltip}),n("div",{key:"e155c88aa2ee2b33c5622741efa59bb07ba548c7",class:"pn-tooltip-content","data-simple":!!this.tooltip,ref:t=>this.content=t},this.tooltip,n("div",{key:"62a3db64ee0d4e3da5d3e2f414850f3792235f1c",hidden:!!this.tooltip},n("slot",{key:"e769400a4d5e1ceddc7fb6a953fe37eeea1b4218"}))))}static get watchers(){return{open:["openHandler"]}}};p.style=s;export{p as pn_tooltip};
//# sourceMappingURL=p-81f9f367.entry.js.map