@postnord/web-components/components/pn-read-only-button.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as n,HTMLElement as o,h as e,Host as i}from"@stencil/core/internal/client";import{k as a}from"./helpers.js";import{d as s}from"./pn-icon2.js";const l=n(class extends o{constructor(t){super(),!1!==t&&this.__registerHost()}get hostElement(){return this}readOnlyModeText="";tooltipOpen=!1;tooltipEl;tooltipDx;icon;leftIcon=!1;iconOnly=!1;small=!1;language=null;setReadOnlyModeText(){this.readOnlyModeText={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.language]}async componentWillLoad(){this.setReadOnlyModeText(),this.language||await a(this.hostElement)}componentDidLoad(){this.initTooltip()}openHandler(){this.tooltipOpen?this.checkTooltipPosition():this.setTooltipOffset()}initTooltip(){this.tooltipEl=this.hostElement.querySelector(".button-tooltip");const t=this.hostElement,n=["mouseenter","focus"],o=["mouseleave","blur"];[...n,...o].forEach((e=>{t.addEventListener(e,(t=>{n.includes(t.type)?this.tooltipOpen=!0:o.includes(t.type)&&(this.tooltipOpen=!1)}))}))}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();this.tooltipDx="0",this.tooltipEl.style.transform="",t<0&&(this.tooltipDx=""+(-1*t+8)),n>window.innerWidth&&(this.tooltipDx=""+(window.innerWidth-n-8)),requestAnimationFrame((()=>{this.setTooltipOffset()}))}))}getClassNames(){let t="pn-button ";return this.small&&(t+="pn-button-small "),this.leftIcon&&(t+="pn-button-left-icon "),this.iconOnly&&(t+="icon-only "),t}render(){return e(i,{key:"050c438370b6d5c86e327be03d206880f2f572e5",class:"pn-read-only-button"},e("button",{key:"a6cd36bc8f112d3ff7cb6ea65768339dd789813c",class:this.getClassNames(),"data-tooltip-open":this.tooltipOpen,disabled:!0},!this.iconOnly&&e("slot",{key:"94979edec979712e7ecc1f683dcf2f32a7889f48"}),this.icon&&e("pn-icon",{key:"14012e9a320767c993fab05c614c659f188783e3",icon:this.icon,color:"gray700"}),this.iconOnly&&e("span",{key:"4f75372bf50ec504504ecbd808d3bf1e746c1418",class:"read-only-icon-only"},e("slot",{key:"a12bca58ae471729cbb2442b1791bb4ee16c7db5"})),e("div",{key:"3ec03d46dc7c44229112a90b0df8ea4737a09e79",class:"button-tooltip"},this.readOnlyModeText)))}static get watchers(){return{language:[{setReadOnlyModeText:0}],tooltipOpen:[{openHandler:0}]}}static get style(){return`${t("pn-read-only-button")}{display:inline-block}${t("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}${t("pn-read-only-button")} button ${t("pn-icon")}{flex-shrink:0;margin:0 0 0 0.5em}${t("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){${t("pn-read-only-button")} button .button-tooltip{transition-duration:0s;transition-delay:0s}}${t("pn-read-only-button")} button[data-tooltip-open] .button-tooltip{opacity:1}${t("pn-read-only-button")} button.pn-button-left-icon{flex-direction:row-reverse}${t("pn-read-only-button")} button.pn-button-left-icon ${t("pn-icon")}{margin:0 0.5em 0 0}${t("pn-read-only-button")} button.icon-only{width:3em;min-width:0}${t("pn-read-only-button")} button.icon-only ${t("pn-icon")}{margin:0}${t("pn-read-only-button")} button.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}${t("pn-read-only-button")} button.icon-only span.read-only-icon-only{display:none}${t("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}${t("pn-read-only-button")} button.pn-button-small ${t("pn-icon")} .pn-icon-svg{height:1.28em;width:1.28em}`}},[772,"pn-read-only-button",{icon:[1],leftIcon:[4,"left-icon"],iconOnly:[4,"icon-only"],small:[4],language:[1],readOnlyModeText:[32],tooltipOpen:[32],tooltipEl:[32],tooltipDx:[32]},void 0,{language:[{setReadOnlyModeText:0}],tooltipOpen:[{openHandler:0}]}]),r=l,d=function(){"undefined"!=typeof customElements&&["pn-read-only-button","pn-icon"].forEach((n=>{switch(n){case"pn-read-only-button":customElements.get(t(t(n)))||customElements.define(t(t(n)),l);break;case"pn-icon":customElements.get(t(t(n)))||s()}}))};export{r as PnReadOnlyButton,d as defineCustomElement}