@postnord/web-components/postnord-web-components/p-c57c3520.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-c2c6299e.js";import{r as i}from"./p-c511b4fb.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);outline:0.2rem solid transparent;outline-offset:0.2rem}pn-button .pn-button:focus-visible{outline-color:#005d92}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);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;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);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)}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)}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;transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}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 .circle{stroke:#005d92}pn-button .pn-button[data-appearance=light] 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;outline:0.2rem solid transparent;outline-offset:0.2rem}pn-button .pn-button[data-appearance=warning] pn-icon .pn-icon-svg path{fill:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .circle{stroke:#a70707}pn-button .pn-button[data-appearance=warning] 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 .circle,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .circle{stroke:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .dot,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .dot{fill:#ffffff}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);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=r;const s=class{constructor(o){t(this,o);this.pnClick=n(this,"pnClick",7)}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;ariacontrols=null;ariapressed=null;ariahaspopup=null;ariaexpanded=null;noTab=false;openHandler(){if(this.tooltipOpen)this.checkTooltipPosition()}iconOnlyHandler(){if(this.tooltip)this.initTooltip();else this.removeTooltip()}pnClick;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}:{type:this.type,form:this.form};const n=["light","warning"];const o=["borderless","outlined"];return{"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:"6df57559dfae0ccfd179c0e1ba6a1127e2d31e45"},a(t,{key:"9a4b060b2ace1b2d42e28560ba06be61f67250c6",class:"pn-button",id:this.buttonId,disabled:this.loading,tabindex:this.noTab?"-1":null,"aria-label":this.arialabel,"aria-labelledby":this.arialabelledby,"aria-controls":this.ariacontrols,"aria-pressed":this.ariapressed,"aria-haspopup":this.ariahaspopup,"aria-expanded":this.ariaexpanded,onClick:t=>this.handleClick(t),...this.getAttributes(),ref:t=>this.buttonEl=t},a("div",{key:"47ab9661d9cc77c5c569af559428238c20aa3de6",class:"pn-button-bg"}),a("div",{key:"8019b0b1b70148e936d070ce397a2f238e70d9bd",class:"pn-button-content"},a("div",{key:"f7b176916c2fb54d82a2d4b4554d0fe940cbd633",class:"pn-button-text",hidden:this.showIconOnly()},this.label,a("slot",{key:"6bb477f05c09707783f517acd18f5168f9b2d661"})),!!this.icon&&a("pn-icon",{key:"cf52034b28a50d24976c7e4835c8f8db04909b69",icon:this.icon})),a("pn-spinner",{key:"ee113ab69e861b33896f14fb32371f7e16c0be82",light:true}),a("div",{key:"b942fcdcadf391e01c5b18b92e8d648c2916d976",class:"pn-button-tooltip",hidden:!this.tooltip,ref:t=>this.tooltipEl=t},a("span",{key:"a1cbc12dcc5f44e9c2fb35d403aa103937290b79",class:"pn-button-tooltip-text"},this.tooltip))))}static get watchers(){return{tooltipOpen:["openHandler"],tooltip:["iconOnlyHandler"]}}};s.style=p;const l="pn-spinner{height:var(--size);width:var(--size);display:block}pn-spinner svg{animation:rotate 1s infinite;display:block}pn-spinner svg .circle{stroke:#005d92;transform-origin:center center;transform:rotate(-310deg);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:64;animation:loading 2s infinite}pn-spinner svg .dot{fill:#005d92}pn-spinner.light .circle{stroke:#ffffff}pn-spinner.light .dot{fill:#ffffff}pn-spinner svg,pn-spinner svg .circle{animation-timing-function:cubic-bezier(0.5, 0, 0.5, 1)}@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=l;const c=class{constructor(n){t(this,n)}get hostElement(){return o(this)}light=false;size=1.5;render(){return a(e,{key:"c3aefa642631aafc5356a6d07db7ef7b57b14857",class:this.light?"light":"",style:{"--size":this.size+"em"}},a("svg",{key:"bdb72cf0bf961bc9e8fcb66f47849025e5bc5481",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},a("circle",{key:"9fc2108ee526f4a743ed23f42ee31a2aaa1b6ddd",class:"circle",cx:"12",cy:"12",r:"10","stroke-width":"3"}),a("circle",{key:"aa7133f6a1752e8834d32e270c62b77e96049930",class:"dot",cx:"21.3",cy:"16",r:"1.48"})))}};c.style=b;export{s as pn_button,c as pn_spinner};
//# sourceMappingURL=p-c57c3520.entry.js.map