@postnord/web-components/components/pn-tooltip.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as o,HTMLElement as n,h as i}from"@stencil/core/internal/client";import{a as e}from"./alert_exclamation_circle.js";import{d as r}from"./pn-icon2.js";const a=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost()}content;button;openEvents=["mouseover","focus"];closeEvents=["mouseleave","blur","touchcancel","touchleave"];eventListeners=[...this.openEvents,...this.closeEvents];timeout;get hostElement(){return this}downwards=!1;open=!1;deltaX="0";warning=!1;light=!1;tooltip;openHandler(){this.open?this.checkPosition():this.setTransform()}componentDidLoad(){this.initTooltip()}setTransform(){this.content.style.transform=`scale(${Number(this.open)}) translateX(-50%) translateX(${this.deltaX}px)`}getSymbol(){return this.warning?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>'}checkPosition(){this.content.style.transition="none",this.content.style.transform="scale(1) translateX(-50%)",this.downwards=!1,requestAnimationFrame((()=>{const{x:t,y:o,right:n}=this.content.getBoundingClientRect();this.deltaX="0",this.downwards=o<0,this.content.style.transform="",t<0&&(this.deltaX=""+(-1*t+8)),n>window.innerWidth&&(this.deltaX=""+(window.innerWidth-n-8)),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;o&&(n=0),clearTimeout(this.timeout),this.timeout=setTimeout((()=>{this.open=o}),n)}render(){return i("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},i("pn-icon",{key:"d4a28061a6c69ffa41cb69c4fd39961b4927949c",icon:this.getSymbol(),"data-simple":!!this.tooltip}),i("div",{key:"cc7ae46d8c228136a29356083734104bfbb2a30d",class:"pn-tooltip-content","data-simple":!!this.tooltip,ref:t=>this.content=t},this.tooltip,i("div",{key:"9ccae396edf92999920b99bf97d0818541a44bf1",hidden:!!this.tooltip},i("slot",{key:"61b67be4486d95208e09630d58a3dc3b344c5354"}))))}static get watchers(){return{open:[{openHandler:0}]}}static get style(){return`${t("pn-tooltip")}{display:inline-block;font-size:1em}${t("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){${t("pn-tooltip")} .pn-tooltip{transition-duration:0s;transition-delay:0s}}${t("pn-tooltip")} .pn-tooltip{cursor:pointer;font-size:inherit;outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-tooltip")} .pn-tooltip:focus-visible{outline-color:#005d92;background-color:#e0f8ff}${t("pn-tooltip")} .pn-tooltip:hover{background-color:#e0f8ff}${t("pn-tooltip")} .pn-tooltip[data-light] ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}${t("pn-tooltip")} .pn-tooltip[data-light]:focus,${t("pn-tooltip")} .pn-tooltip[data-light]:hover{background-color:rgba(255, 255, 255, 0.2)}${t("pn-tooltip")} .pn-tooltip[data-warning] ${t("pn-icon")} .pn-icon-svg path{fill:#a70707}${t("pn-tooltip")} .pn-tooltip[data-warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-tooltip")} .pn-tooltip[data-warning]:focus-visible{outline-color:#a70707;background-color:#fdefee}${t("pn-tooltip")} .pn-tooltip[data-warning]:hover{background-color:#fdefee}${t("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){${t("pn-tooltip")} .pn-tooltip-content{transition-duration:0s;transition-delay:0s}}${t("pn-tooltip")} .pn-tooltip-content{transition-delay:0.15s;transform:scale(0) translateX(-50%);transform-origin:bottom left;width:max-content;color:#2d2013}${t("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}${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}{position:relative;pointer-events:none}${t("pn-tooltip")} .pn-tooltip>${t("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){${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}:before{transition-duration:0s;transition-delay:0s}}${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}:before{transition-delay:0;transform:scale(0) translateX(-50%);transform-origin:top left}${t("pn-tooltip")} .pn-tooltip>${t("pn-icon")}[data-simple]:before{content:none}${t("pn-tooltip")} .pn-tooltip[data-open] .pn-tooltip-content{transition-delay:0}${t("pn-tooltip")} .pn-tooltip[data-open] ${t("pn-icon")}:before{transform:scale(1) translateX(-50%);transition-delay:0.15s;pointer-events:auto}${t("pn-tooltip")} .pn-tooltip[data-downwards] .pn-tooltip-content{bottom:unset;top:calc(100% + 0.75em);transform-origin:top left}${t("pn-tooltip")} .pn-tooltip[data-downwards] ${t("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}`}},[772,"pn-tooltip",{warning:[4],light:[4],tooltip:[1],downwards:[32],open:[32],deltaX:[32]},void 0,{open:[{openHandler:0}]}]),p=a,s=function(){"undefined"!=typeof customElements&&["pn-tooltip","pn-icon"].forEach((o=>{switch(o){case"pn-tooltip":customElements.get(t(t(o)))||customElements.define(t(t(o)),a);break;case"pn-icon":customElements.get(t(t(o)))||r()}}))};export{p as PnTooltip,s as defineCustomElement}