@postnord/web-components/postnord-web-components/p-a04a2872.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,g as n,h as o,a as e}from"./p-c2c6299e.js";import{j as i}from"./p-c511b4fb.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;transition:color 0.3s;-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 pn-icon .pn-icon-svg path{fill:#5e554a;transition:fill 0.3s}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);transition:opacity 0.15s cubic-bezier(0.7, 0, 0.3, 1);transform:translateX(-50%);width:max-content;opacity:0;pointer-events:none}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=a;const l=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:"1e29735dfe7c0036e154cd8c437d88545c9e1d15",class:"pn-read-only-button"},o("button",{key:"1e7a05e95d74a546d99eecba43dda304cf06109a",class:this.getClassNames(),"data-tooltip-open":this.tooltipOpen,disabled:true},!this.iconOnly&&o("slot",{key:"9dfde2d830a8ddb3598621d0da2823b56c7ad179"}),this.icon&&o("pn-icon",{key:"a2e4e9233183d14069c36301f3c137d6924dc999",icon:this.icon}),this.iconOnly&&o("span",{key:"3b55118ec825dbdaef6c4c01985ad9b1d7bd4258",class:"read-only-icon-only"},o("slot",{key:"34145eedc9f229ee2a46ce774d28152ec7f83189"})),o("div",{key:"6ff21cdb9856d2f8d2c9958ef08fe31662a3885d",class:"button-tooltip"},this.readOnlyModeText)))}static get watchers(){return{language:["setReadOnlyModeText"],tooltipOpen:["openHandler"]}}};l.style=s;export{l as pn_read_only_button};
//# sourceMappingURL=p-a04a2872.entry.js.map