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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as a,g as s,h as e,a as o}from"./p-43660913.js";import{j as n,r as i,e as r}from"./p-c511b4fb.js";import{a as p}from"./p-9a18b612.js";import{a as c}from"./p-fc06684e.js";import{c as l}from"./p-ffa37a87.js";import{c as d}from"./p-92b0338a.js";const h='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>';const f=h;const u={HIDE:{sv:"Stäng meddelande",en:"Dismiss message",da:"Afvis besked",fi:"Hylkää viesti",no:"Avvis meldingen"}};const b="pn-toast{position:relative;display:block;overflow:hidden}pn-toast .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-toast .pn-toast .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;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-toast .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}pn-toast .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}pn-toast .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}pn-toast .pn-toast-text:last-child{margin-bottom:0}pn-toast .pn-toast-icon .pn-icon-svg path{fill:#2d2013}pn-toast .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}pn-toast .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-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-toast .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}pn-toast .pn-toast-button:hover{background-color:#8eddf9}pn-toast .pn-toast[data-appearance=success]{background-color:#dcf6e7}pn-toast .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}pn-toast .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}pn-toast .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}pn-toast .pn-toast[data-appearance=warning]{background-color:#fff1e3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}pn-toast .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}pn-toast .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}pn-toast .pn-toast[data-appearance=error]{background-color:#fdefee}pn-toast .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}pn-toast .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}pn-toast .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}pn-toast .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}";const m=b;const g=class{constructor(s){t(this,s);this.close=a(this,"close",7);this.hidden=a(this,"hidden",7);this.isClosing=false;this.isExpanding=false;this.hasSlottedContent=false;this.heading="";this.text="";this.toastId=undefined;this.appearance=undefined;this.temporary=false;this.icon=undefined;this.illustration=undefined;this.hide=false;this.closable=false;this.language=null}toast;button;animation;get hostElement(){return s(this)}handleHide(){const{matches:t}=window.matchMedia("(prefers-reduced-motion: reduce)");if(t)return this.hidden.emit(this.hide);if(this.hide)this.closeToast();else this.openToast()}close;hidden;async componentWillLoad(){if(this.hide)this.hostElement.style.height="0";if(this.language===null)await n(this.hostElement);this.hasSlottedContent=!!this.hostElement.textContent}componentDidLoad(){if(!!this.heading&&!this.text&&!this.hasSlottedContent)console.warn("The %s prop is only available if you use the %s prop or slotted content.","heading","text")}getRect(t){return t.getBoundingClientRect()}openToast(){requestAnimationFrame((()=>{const{scrollHeight:t}=this.hostElement;const{height:a}=this.getRect(this.hostElement);this.hostElement.style.height=`${a}px`;this.isExpanding=true;this.animateToast(true,`${a}px`,`${t}px`)}))}closeToast(){const{scrollHeight:t,clientHeight:a}=this.hostElement;const s=this.isExpanding?a:t;this.hostElement.style.height=`0px`;this.isClosing=true;this.animateToast(false,`${s}px`,`0px`)}animateToast(t,a,s){this.cancelAnimations();this.animation=this.hostElement.animate({height:[a,s]},{duration:400,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish();this.animation.oncancel=()=>t?this.isExpanding=false:this.isClosing=false}animationFinish(){this.cancelAnimations();if(!this.hide)this.hostElement.style.height="";else this.hidden.emit(this.hide);this.isClosing=false;this.isExpanding=false}cancelAnimations(){if(this.animation)this.animation.cancel()}handleClick(t){this.hide=true;this.close.emit(this.hide);i(t,this.toast)}getIcon(){if(this.illustration)return"";if(this.icon)return this.icon;if(this.appearance==="success")return l;if(this.appearance==="warning")return f;if(this.appearance==="error")return p;return c}getRole(){return this.appearance==="error"?"alert":"status"}showIcon(){return!this.illustration}showIllustration(){return!this.showIcon()}showTitle(){return(this.hasSlottedContent||!!this.text)&&!!this.heading}translate(t){return u?.[t]?.[this.language||r]||t}hideToast(){return this.hide&&!(this.isClosing||this.isExpanding)}render(){return e(o,{key:"4d7cc11bfc2d8a2f0a1b42cf291bcf09e810d4a8"},e("output",{key:"a1d2e02c4936c863efba2e3b4744260096b966b0",id:this.toastId,class:"pn-toast",role:this.getRole(),"data-appearance":this.appearance,"data-temporary":this.temporary,"data-hide":this.hideToast(),ref:t=>this.toast=t},this.showIcon()&&e("pn-icon",{key:"b4aac661b5f62cec6205aa81374c82d259186d32",class:"pn-toast-icon",icon:this.getIcon()}),e("div",{key:"afd8f78fab826cfe2a8d00a02158c6504f77ec3c",class:"pn-toast-content"},this.showTitle()&&e("h4",{key:"6d32326637df6723c3d7e68b84f9190b59fa5765",class:"pn-toast-heading"},this.heading),this.text&&e("p",{key:"abdbb69a78692b81105f5b3134afdf4be1e27b55",class:"pn-toast-text"},this.text),e("slot",{key:"45c3b143b92ec4350542d17f3a4295028d00631c"})),this.showIllustration()&&e("pn-illustration",{key:"e9569b033e296e7c7310521ca4a67517553f1355",illustration:this.illustration,width:"5.5em",height:"5.5em"}),this.closable&&e("button",{key:"8c4fb6be7e19db8f9889eb44c765f115d026cd9c",class:"pn-toast-button",type:"button","aria-label":this.translate("HIDE"),onClick:t=>this.handleClick(t),ref:t=>this.button=t},e("pn-icon",{key:"3865a38e56f96cccd7e22df16d21913bfcdd3e78",icon:d}))))}static get watchers(){return{hide:["handleHide"]}}};g.style=m;export{g as pn_toast};
//# sourceMappingURL=p-a5dd8459.entry.js.map