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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as n,g as o,h as a,a as e}from"./p-C247oTEA.js";import{ripple as i}from"./index.esm.js";const r='pn-button{display:inline-block}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)}@media (prefers-reduced-motion: reduce){pn-button .pn-button{transition-duration:0s;transition-delay:0s}}pn-button .pn-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-button .pn-button:focus-visible{outline-color:#005d92}pn-button .pn-button:disabled,pn-button .pn-button[aria-disabled]{cursor:auto;pointer-events:none}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)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-content{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-content{transition-delay:0.2s}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)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-bg{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-bg{transition-delay:0.2s, 0s, 0s}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)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-bg::after{transition-duration:0s;transition-delay:0s}}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}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}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)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-tooltip{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-tooltip-text{font-size:0.875em;font-weight:300}pn-button .pn-button pn-icon{flex-shrink:0}pn-button .pn-button pn-icon .pn-icon-svg path{fill:#ffffff}pn-button .pn-button pn-spinner{position:absolute;transform:scale(0)}pn-button .pn-button:hover .pn-button-bg:after,pn-button .pn-button:focus .pn-button-bg:after{transform:translateX(0)}pn-button .pn-button[data-appearance=light]{color:#005d92}pn-button .pn-button[data-appearance=light] pn-icon .pn-icon-svg path{fill:#005d92}pn-button .pn-button[data-appearance=light] pn-spinner .pn-spinner-circle{stroke:#005d92}pn-button .pn-button[data-appearance=light] pn-spinner .pn-spinner-dot{fill:#005d92}pn-button .pn-button[data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}pn-button .pn-button[data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}pn-button .pn-button[data-appearance=light] .pn-button-bg .pn-ripple{background-color:#005d92}pn-button .pn-button[data-appearance=warning]{color:#a70707}pn-button .pn-button[data-appearance=warning] pn-icon .pn-icon-svg path{fill:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .pn-spinner-circle{stroke:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .pn-spinner-dot{fill:#a70707}pn-button .pn-button[data-appearance=warning] .pn-button-bg{border:0.0625em solid #a70707;background-color:#fdefee}pn-button .pn-button[data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-appearance=warning]:hover,pn-button .pn-button[data-appearance=warning]:focus{color:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-icon .pn-icon-svg path,pn-button .pn-button[data-appearance=warning]:focus pn-icon .pn-icon-svg path{fill:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .pn-spinner-circle,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .pn-spinner-circle{stroke:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .pn-spinner-dot,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .pn-spinner-dot{fill:#ffffff}pn-button .pn-button[data-appearance=warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-button .pn-button[data-appearance=warning]:focus-visible{outline-color:#a70707}pn-button .pn-button[data-variant=borderless] .pn-button-bg{border:none;background-color:transparent}pn-button .pn-button[data-variant=borderless] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}pn-button .pn-button[data-variant=borderless][data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}pn-button .pn-button[data-variant=borderless][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-variant=outlined] .pn-button-bg{border:0.0625em solid #ffffff;background-color:transparent}pn-button .pn-button[data-variant=outlined] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg:after{background-color:#00a0d6;opacity:0.1}pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg{border-color:#a70707}pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-left-icon] .pn-button-content{flex-direction:row-reverse}pn-button .pn-button[data-icon-only]{width:3em;min-width:0}pn-button .pn-button[data-icon-only][data-small]{width:2em;min-width:0;padding:0}pn-button .pn-button[data-small]{padding:0.375em 1em;min-height:2em;min-width:unset;line-height:1.25em}pn-button .pn-button[data-small] .pn-button-content{gap:0.25em}pn-button .pn-button[data-small] .pn-button-text{font-size:0.875em}pn-button .pn-button[data-small] pn-icon .pn-icon-svg{height:1.25em;width:1.25em}pn-button .pn-button[data-tooltip-open] .pn-button-tooltip{opacity:1}pn-button .pn-button[data-tooltip-upwards] .pn-button-tooltip{top:auto;bottom:calc(100% + 0.35em)}pn-button .pn-button[data-loading] pn-spinner{transform:scale(1);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button[data-loading] pn-spinner{transition-duration:0s;transition-delay:0s}}pn-button .pn-button[data-loading] pn-spinner{transition-delay:0.2s}pn-button .pn-button[data-loading] .pn-button-content{pointer-events:none;opacity:0;transition-delay:0s;transform:translateY(100%)}pn-button .pn-button[data-loading] .pn-button-bg{width:3em}pn-button .pn-button[data-loading][data-small] .pn-button-bg{width:2em}';const p=class{constructor(o){t(this,o);this.pnClick=n(this,"pnClick")}buttonEl;tooltipEl;tooltipDx;openEvents=["mouseover","focus"];closeEvents=["mouseleave","blur","touchcancel","touchleave"];eventListeners=[...this.openEvents,...this.closeEvents];get hostElement(){return o(this)}tooltipOpen=false;tooltipUpwards=false;label="";appearance="";variant="";small=false;loading=false;icon;iconOnly=false;leftIcon=false;tooltip;tooltipUp=false;type="button";form;href;rel;target;download;buttonId=null;arialabel=null;arialabelledby=null;ariacurrent=null;ariacontrols=null;ariapressed=null;ariahaspopup=null;ariaexpanded=null;noTab=false;openHandler(){if(this.tooltipOpen)this.checkTooltipPosition()}iconOnlyHandler(){this.checkTooltipPosition();if(this.tooltip)this.initTooltip();else 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:e}=this.getRect(this.tooltipEl);const i=16;this.tooltipDx=0;this.tooltipUpwards=this.tooltipUp?t>e:o+e>window.innerHeight;this.tooltipEl.style.transform="";if(n<0)this.tooltipDx=n*-1+i;if(a>window.innerWidth)this.tooltipDx=window.innerWidth-a-i-8;requestAnimationFrame((()=>this.setTooltipOffset()))}))}getAttributes(){const t=this.href?{href:this.href,rel:!this.rel&&this.target==="_blank"?"noopener":this.rel,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};const n=["light","warning"];const o=["borderless","outlined"];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":n.includes(this.appearance)?this.appearance:null,"data-variant":o.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){i(t,this.hostElement,".pn-button-bg");this.pnClick.emit(t)}render(){const t=this.getTagName();return a(e,{key:"9fd62df52e09b5f7915c1652c3bd23c47c40db42"},a(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},a("div",{key:"9cb56181926a77cd985be9447dd5277720370bf6",class:"pn-button-bg"}),a("div",{key:"f81963c493162009d2219d72171f753c3ba5dcb8",class:"pn-button-content"},a("div",{key:"d6cc476c9bb3eaa59ae9cf80700b33e4bc836494",class:"pn-button-text",hidden:this.showIconOnly()},this.label,a("slot",{key:"83b07110e17088f980e4a7f0094f5330f7dcc17b"})),!!this.icon&&a("pn-icon",{key:"6d352caac885f7f5cf3819a7b555e278e7761259",icon:this.icon})),a("pn-spinner",{key:"3176c1f592b5e48c14f7baccc9366bf0fc0187dd",light:true}),a("div",{key:"b97ecf99cdf1c4fa0c8db3b26c2eac33c5c9bba4",class:"pn-button-tooltip",hidden:!this.tooltip,ref:t=>this.tooltipEl=t},a("span",{key:"7825cd9635f5897db28ee4b32d2ac56a8c9a9b0d",class:"pn-button-tooltip-text"},this.tooltip))))}static get watchers(){return{tooltipOpen:["openHandler"],tooltip:["iconOnlyHandler"]}}};p.style=r;const s="pn-spinner{display:inline-block}pn-spinner .pn-spinner{--pn-spinner-size:1.5em;--pn-spinner-color:main.$blue700;height:var(--pn-spinner-size);width:var(--pn-spinner-size);display:block;animation:rotate 1s infinite;animation-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-spinner .pn-spinner{animation-duration:2s}}pn-spinner .pn-spinner-circle{stroke:var(--pn-spinner-color);transform-origin:center center;transform:rotate(-310deg);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:64;animation:loading 2s infinite;animation-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-spinner .pn-spinner-circle{animation-duration:4s}}pn-spinner .pn-spinner-dot{fill:var(--pn-spinner-color)}@keyframes loading{0%{stroke-dashoffset:55}50%{stroke-dashoffset:12}100%{stroke-dashoffset:55}}@keyframes rotate{from{transform:rotate(-180deg) scaleX(-1)}to{transform:rotate(180deg) scaleX(-1)}}";const b=class{constructor(n){t(this,n)}get hostElement(){return o(this)}light=false;size=1.5;getColor(){if(this.light)return"#fff";return"#005d92"}getSize(){return`${this.size}em`}render(){return a(e,{key:"a9ecba01b5b30a660a44439c714b7ad57cf02a88"},a("svg",{key:"03fbe990bf1ae0402fcb27707e0c1712d8a84492",class:"pn-spinner",style:{"--pn-spinner-size":this.getSize(),"--pn-spinner-color":this.getColor()},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},a("circle",{key:"c48784865cd9c8c3d55cd9b1bd3e0dff7a4ebe35",class:"pn-spinner-circle",cx:"12",cy:"12",r:"10","stroke-width":"3"}),a("circle",{key:"5f69d1bbbf864842f9ae54dc9a29b61603a83bff",class:"pn-spinner-dot",cx:"21.3",cy:"16",r:"1.48"})))}};b.style=s;export{p as pn_button,b as pn_spinner};
//# sourceMappingURL=p-e3706f51.entry.js.map