@postnord/web-components
Version:
PostNord Web Components
6 lines • 4.59 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r as t,g as n,h as o,a as e}from"./p-C247oTEA.js";import{awaitTopbar as i}from"./index.esm.js";const a="pn-read-only-button{display:inline-block}pn-read-only-button button{cursor:not-allowed;color:#5e554a;background:#f3f2f2;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent}pn-read-only-button button pn-icon{flex-shrink:0;margin:0 0 0 0.5em}pn-read-only-button button .button-tooltip{position:absolute;bottom:calc(100% + 0.35em);left:50%;background:#a70707;color:#ffffff;padding:0.25em 0.75em;font-size:0.875em;font-weight:300;border-radius:1em;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:5;max-width:min(95vw, 40em);transform:translateX(-50%);width:max-content;pointer-events:none;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-read-only-button button .button-tooltip{transition-duration:0s;transition-delay:0s}}pn-read-only-button button[data-tooltip-open] .button-tooltip{opacity:1}pn-read-only-button button.pn-button-left-icon{flex-direction:row-reverse}pn-read-only-button button.pn-button-left-icon pn-icon{margin:0 0.5em 0 0}pn-read-only-button button.icon-only{width:3em;min-width:0}pn-read-only-button button.icon-only pn-icon{margin:0}pn-read-only-button button.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}pn-read-only-button button.icon-only span.read-only-icon-only{display:none}pn-read-only-button button.pn-button-small{font-size:0.875em;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}pn-read-only-button button.pn-button-small pn-icon .pn-icon-svg{height:1.28em;width:1.28em}";const s=class{constructor(n){t(this,n)}get hostElement(){return n(this)}readOnlyModeText="";tooltipOpen=false;tooltipEl;tooltipDx;icon;leftIcon=false;iconOnly=false;small=false;language=null;setReadOnlyModeText(){const t={en:"You cannot complete this action while in read only mode",sv:"Du kan inte utföra denna handling i skrivskyddat läge",da:"Du kan ikke gennemføre denne handling i skrivebeskyttet tilstand",fi:"Et voi suorittaa tätä toimintoa vain luku -tilassa",no:"Du kan ikke utføre denne handlingen i skrivebeskyttet modus"};this.readOnlyModeText=t[this.language]}async componentWillLoad(){this.setReadOnlyModeText();if(this.language)return;await i(this.hostElement)}componentDidLoad(){this.initTooltip()}openHandler(){if(this.tooltipOpen){this.checkTooltipPosition();return}this.setTooltipOffset()}initTooltip(){this.tooltipEl=this.hostElement.querySelector(".button-tooltip");const t=this.hostElement;const n=["mouseenter","focus"];const o=["mouseleave","blur"];const e=[...n,...o];e.forEach((e=>{t.addEventListener(e,(t=>{if(n.includes(t.type)){this.tooltipOpen=true;return}if(o.includes(t.type)){this.tooltipOpen=false}}))}))}setTooltipOffset(){this.tooltipEl.style.transform=`translateX(-50%) translateX(${this.tooltipDx}px)`}checkTooltipPosition(){this.tooltipEl.style.transform="translateX(-50%)";requestAnimationFrame((()=>{const{x:t,right:n}=this.tooltipEl.getBoundingClientRect();const o=8;this.tooltipDx="0";this.tooltipEl.style.transform="";if(t<0)this.tooltipDx=`${t*-1+o}`;if(n>window.innerWidth)this.tooltipDx=`${window.innerWidth-n-o}`;requestAnimationFrame((()=>{this.setTooltipOffset()}))}))}getClassNames(){let t="pn-button ";if(this.small)t+="pn-button-small ";if(this.leftIcon)t+="pn-button-left-icon ";if(this.iconOnly)t+="icon-only ";return t}render(){return o(e,{key:"050c438370b6d5c86e327be03d206880f2f572e5",class:"pn-read-only-button"},o("button",{key:"a6cd36bc8f112d3ff7cb6ea65768339dd789813c",class:this.getClassNames(),"data-tooltip-open":this.tooltipOpen,disabled:true},!this.iconOnly&&o("slot",{key:"94979edec979712e7ecc1f683dcf2f32a7889f48"}),this.icon&&o("pn-icon",{key:"14012e9a320767c993fab05c614c659f188783e3",icon:this.icon,color:"gray700"}),this.iconOnly&&o("span",{key:"4f75372bf50ec504504ecbd808d3bf1e746c1418",class:"read-only-icon-only"},o("slot",{key:"a12bca58ae471729cbb2442b1791bb4ee16c7db5"})),o("div",{key:"3ec03d46dc7c44229112a90b0df8ea4737a09e79",class:"button-tooltip"},this.readOnlyModeText)))}static get watchers(){return{language:["setReadOnlyModeText"],tooltipOpen:["openHandler"]}}};s.style=a;export{s as pn_read_only_button};
//# sourceMappingURL=p-1eaf9fc5.entry.js.map