@postnord/web-components
Version:
PostNord Web Components
5 lines • 13.8 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{transformTag as t,proxyCustomElement as n,HTMLElement as o,createEvent as a,h as i,Host as e}from"@stencil/core/internal/client";import{o as r}from"./helpers.js";import{d as p}from"./pn-icon2.js";import{d as s}from"./pn-spinner2.js";const b=n(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.pnClick=a(this,"pnClick",7)}buttonEl;tooltipEl;tooltipDx;openEvents=["mouseover","focus"];closeEvents=["mouseleave","blur","touchcancel","touchleave"];eventListeners=[...this.openEvents,...this.closeEvents];get hostElement(){return this}tooltipOpen=!1;tooltipUpwards=!1;label="";appearance="";variant="";small=!1;loading=!1;icon;iconOnly=!1;leftIcon=!1;tooltip;tooltipUp=!1;type="button";form;href;rel;target;download;buttonId=null;arialabel=null;arialabelledby=null;ariacurrent=null;ariacontrols=null;ariapressed=null;ariahaspopup=null;ariaexpanded=null;noTab=!1;openHandler(){this.tooltipOpen&&this.checkTooltipPosition()}iconOnlyHandler(){this.checkTooltipPosition(),this.tooltip?this.initTooltip():this.removeTooltip()}pnClick;componentWillLoad(){this.tooltipUpwards=this.tooltipUp}componentDidLoad(){this.iconOnlyHandler()}getRect(t){return t.getBoundingClientRect()}initTooltip(){this.eventListeners.forEach((t=>this.buttonEl.addEventListener(t,this.toggleTooltip)))}removeTooltip(){this.eventListeners.forEach((t=>this.buttonEl.removeEventListener(t,this.toggleTooltip)))}toggleTooltip=t=>{this.tooltipOpen=this.openEvents.includes(t.type)};setTooltipOffset(){this.tooltipEl.style.setProperty("--pn-dx",`${this.tooltipDx}px`)}checkTooltipPosition(){this.tooltipEl.style.transform="translateX(-50%)",this.tooltipUpwards=this.tooltipUp,requestAnimationFrame((()=>{const{top:t,x:n,y:o,right:a,height:i}=this.getRect(this.tooltipEl);this.tooltipDx=0,this.tooltipUpwards=this.tooltipUp?t>i:o+i>window.innerHeight,this.tooltipEl.style.transform="",n<0&&(this.tooltipDx=-1*n+16),a>window.innerWidth&&(this.tooltipDx=window.innerWidth-a-16-8),requestAnimationFrame((()=>this.setTooltipOffset()))}))}getAttributes(){const t=this.href?{href:this.href,rel:this.rel||"_blank"!==this.target?this.rel:"noopener",target:this.target??null,download:this.download??null,"aria-current":this.ariacurrent,"aria-disabled":this.loading?"true":null}:{type:this.type,form:this.form,disabled:this.loading,"aria-pressed":this.ariapressed,"aria-controls":this.ariacontrols,"aria-haspopup":this.ariahaspopup,"aria-expanded":this.ariaexpanded};return{tabindex:this.noTab||this.href&&this.loading?"-1":null,"data-small":this.small,"data-loading":this.loading,"data-tooltip-open":this.tooltipOpen,"data-tooltip-upwards":this.tooltipUpwards,"data-icon-only":this.showIconOnly(),"data-left-icon":this.leftIcon,"data-appearance":["light","warning"].includes(this.appearance)?this.appearance:null,"data-variant":["borderless","outlined"].includes(this.variant)?this.variant:null,...t}}getTagName(){return this.href?"a":"button"}showIconOnly(){return!!this.icon&&this.iconOnly&&!!(this.tooltip||this.arialabel||this.arialabelledby)}handleClick(t){r(t,this.hostElement,".pn-button-bg"),this.pnClick.emit(t)}render(){const t=this.getTagName();return i(e,{key:"9fd62df52e09b5f7915c1652c3bd23c47c40db42"},i(t,{key:"aecef05e4c20bb9c501399f18b7290a33e5d82e7",class:"pn-button",id:this.buttonId,"aria-label":this.arialabel,"aria-labelledby":this.arialabelledby,onClick:t=>this.handleClick(t),...this.getAttributes(),ref:t=>this.buttonEl=t},i("div",{key:"9cb56181926a77cd985be9447dd5277720370bf6",class:"pn-button-bg"}),i("div",{key:"f81963c493162009d2219d72171f753c3ba5dcb8",class:"pn-button-content"},i("div",{key:"d6cc476c9bb3eaa59ae9cf80700b33e4bc836494",class:"pn-button-text",hidden:this.showIconOnly()},this.label,i("slot",{key:"83b07110e17088f980e4a7f0094f5330f7dcc17b"})),!!this.icon&&i("pn-icon",{key:"6d352caac885f7f5cf3819a7b555e278e7761259",icon:this.icon})),i("pn-spinner",{key:"3176c1f592b5e48c14f7baccc9366bf0fc0187dd",light:!0}),i("div",{key:"b97ecf99cdf1c4fa0c8db3b26c2eac33c5c9bba4",class:"pn-button-tooltip",hidden:!this.tooltip,ref:t=>this.tooltipEl=t},i("span",{key:"7825cd9635f5897db28ee4b32d2ac56a8c9a9b0d",class:"pn-button-tooltip-text"},this.tooltip))))}static get watchers(){return{tooltipOpen:[{openHandler:0}],tooltip:[{iconOnlyHandler:0}]}}static get style(){return`${t("pn-button")}{display:inline-block}${t("pn-button")} .pn-button{position:relative;cursor:pointer;padding:0.75em 1.5em;width:round(up, 100%, 1px);min-height:3em;min-width:5.5em;border:none;border-radius:3em;font-family:inherit;font-size:1em;font-weight:500;color:#ffffff;background-color:transparent;display:flex;justify-content:center;align-items:center;text-decoration:none;line-height:1.5em;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-button")} .pn-button:focus-visible{outline-color:#005d92}${t("pn-button")} .pn-button:disabled,${t("pn-button")} .pn-button[aria-disabled]{cursor:auto;pointer-events:none}${t("pn-button")} .pn-button-content{z-index:2;display:flex;justify-content:center;align-items:center;gap:0.5em;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button-content{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button-content{transition-delay:0.2s}${t("pn-button")} .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;transform:translateX(-50%) translateY(0);border-radius:3em;border:none;background-color:#005d92;overflow:hidden;transition-property:width, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button-bg{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button-bg{transition-delay:0.2s, 0s, 0s}${t("pn-button")} .pn-button-bg::after{content:"";position:absolute;will-change:transform;width:100%;height:100%;background-color:#0d234b;border-radius:inherit;left:0;transform:translateX(-103%);opacity:0.5;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button-bg::after{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#ffffff;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3} ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-button")} .pn-button-tooltip{z-index:5;position:absolute;top:calc(100% + 0.35em);left:50%;pointer-events:none;color:#ffffff;background-color:#0d234b;box-shadow:0 0.075em 0.225em rgba(0, 0, 0, 0.1), 0 0.4em 0.9em rgba(0, 0, 0, 0.13);padding:0.25em 0.75em;border-radius:inherit;max-width:min(95vw, 40em);transform:translateX(-50%) translateX(var(--pn-dx));width:max-content;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button-tooltip{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button-tooltip-text{font-size:0.875em;font-weight:300}${t("pn-button")} .pn-button ${t("pn-icon")}{flex-shrink:0}${t("pn-button")} .pn-button ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}${t("pn-button")} .pn-button ${t("pn-spinner")}{position:absolute;transform:scale(0)}${t("pn-button")} .pn-button:hover .pn-button-bg:after,${t("pn-button")} .pn-button:focus .pn-button-bg:after{transform:translateX(0)}${t("pn-button")} .pn-button[data-appearance=light]{color:#005d92}${t("pn-button")} .pn-button[data-appearance=light] ${t("pn-icon")} .pn-icon-svg path{fill:#005d92}${t("pn-button")} .pn-button[data-appearance=light] ${t("pn-spinner")} .pn-spinner-circle{stroke:#005d92}${t("pn-button")} .pn-button[data-appearance=light] ${t("pn-spinner")} .pn-spinner-dot{fill:#005d92}${t("pn-button")} .pn-button[data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}${t("pn-button")} .pn-button[data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}${t("pn-button")} .pn-button[data-appearance=light] .pn-button-bg .pn-ripple{background-color:#005d92}${t("pn-button")} .pn-button[data-appearance=warning]{color:#a70707}${t("pn-button")} .pn-button[data-appearance=warning] ${t("pn-icon")} .pn-icon-svg path{fill:#a70707}${t("pn-button")} .pn-button[data-appearance=warning] ${t("pn-spinner")} .pn-spinner-circle{stroke:#a70707}${t("pn-button")} .pn-button[data-appearance=warning] ${t("pn-spinner")} .pn-spinner-dot{fill:#a70707}${t("pn-button")} .pn-button[data-appearance=warning] .pn-button-bg{border:0.0625em solid #a70707;background-color:#fdefee}${t("pn-button")} .pn-button[data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${t("pn-button")} .pn-button[data-appearance=warning]:hover,${t("pn-button")} .pn-button[data-appearance=warning]:focus{color:#ffffff}${t("pn-button")} .pn-button[data-appearance=warning]:hover ${t("pn-icon")} .pn-icon-svg path,${t("pn-button")} .pn-button[data-appearance=warning]:focus ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}${t("pn-button")} .pn-button[data-appearance=warning]:hover ${t("pn-spinner")} .pn-spinner-circle,${t("pn-button")} .pn-button[data-appearance=warning]:focus ${t("pn-spinner")} .pn-spinner-circle{stroke:#ffffff}${t("pn-button")} .pn-button[data-appearance=warning]:hover ${t("pn-spinner")} .pn-spinner-dot,${t("pn-button")} .pn-button[data-appearance=warning]:focus ${t("pn-spinner")} .pn-spinner-dot{fill:#ffffff}${t("pn-button")} .pn-button[data-appearance=warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-button")} .pn-button[data-appearance=warning]:focus-visible{outline-color:#a70707}${t("pn-button")} .pn-button[data-variant=borderless] .pn-button-bg{border:none;background-color:transparent}${t("pn-button")} .pn-button[data-variant=borderless] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}${t("pn-button")} .pn-button[data-variant=borderless][data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}${t("pn-button")} .pn-button[data-variant=borderless][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${t("pn-button")} .pn-button[data-variant=outlined] .pn-button-bg{border:0.0625em solid #ffffff;background-color:transparent}${t("pn-button")} .pn-button[data-variant=outlined] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}${t("pn-button")} .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}${t("pn-button")} .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg:after{background-color:#00a0d6;opacity:0.1}${t("pn-button")} .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg{border-color:#a70707}${t("pn-button")} .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}${t("pn-button")} .pn-button[data-left-icon] .pn-button-content{flex-direction:row-reverse}${t("pn-button")} .pn-button[data-icon-only]{width:3em;min-width:0}${t("pn-button")} .pn-button[data-icon-only][data-small]{width:2em;min-width:0;padding:0}${t("pn-button")} .pn-button[data-small]{padding:0.375em 1em;min-height:2em;min-width:unset;line-height:1.25em}${t("pn-button")} .pn-button[data-small] .pn-button-content{gap:0.25em}${t("pn-button")} .pn-button[data-small] .pn-button-text{font-size:0.875em}${t("pn-button")} .pn-button[data-small] ${t("pn-icon")} .pn-icon-svg{height:1.25em;width:1.25em}${t("pn-button")} .pn-button[data-tooltip-open] .pn-button-tooltip{opacity:1}${t("pn-button")} .pn-button[data-tooltip-upwards] .pn-button-tooltip{top:auto;bottom:calc(100% + 0.35em)}${t("pn-button")} .pn-button[data-loading] ${t("pn-spinner")}{transform:scale(1);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${t("pn-button")} .pn-button[data-loading] ${t("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${t("pn-button")} .pn-button[data-loading] ${t("pn-spinner")}{transition-delay:0.2s}${t("pn-button")} .pn-button[data-loading] .pn-button-content{pointer-events:none;opacity:0;transition-delay:0s;transform:translateY(100%)}${t("pn-button")} .pn-button[data-loading] .pn-button-bg{width:3em}${t("pn-button")} .pn-button[data-loading][data-small] .pn-button-bg{width:2em}`}},[772,"pn-button",{label:[1],appearance:[1],variant:[1],small:[4],loading:[516],icon:[1],iconOnly:[4,"icon-only"],leftIcon:[4,"left-icon"],tooltip:[1],tooltipUp:[4,"tooltip-up"],type:[1],form:[1],href:[1],rel:[1],target:[1],download:[1],buttonId:[1,"button-id"],arialabel:[1],arialabelledby:[1],ariacurrent:[1],ariacontrols:[1],ariapressed:[1],ariahaspopup:[1],ariaexpanded:[1],noTab:[4,"no-tab"],tooltipOpen:[32],tooltipUpwards:[32]},void 0,{tooltipOpen:[{openHandler:0}],tooltip:[{iconOnlyHandler:0}]}]);function u(){"undefined"!=typeof customElements&&["pn-button","pn-icon","pn-spinner"].forEach((n=>{switch(n){case"pn-button":customElements.get(t(t(n)))||customElements.define(t(t(n)),b);break;case"pn-icon":customElements.get(t(t(n)))||p();break;case"pn-spinner":customElements.get(t(t(n)))||s()}}))}export{b as P,u as d}