@postnord/web-components/postnord-web-components/p-9faf3425.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as a,g as e,h as o,a as s}from"./p-c2c6299e.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;transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}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 g=b;const m=class{constructor(e){t(this,e);this.close=a(this,"close",7);this.hidden=a(this,"hidden",7)}toast;button;animation;get hostElement(){return e(this)}isClosing=false;isExpanding=false;hasSlottedContent=false;heading="";text="";toastId;appearance;temporary=false;icon;illustration;hide=false;closable=false;language=null;handleHide(){const{matches:t}=window.matchMedia("(prefers-reduced-motion: reduce)");if(t)return this.hidden.emit(this.hide);if(this.hide)this.closeGrid();else this.openGrid()}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()}openGrid(){requestAnimationFrame((()=>{const{scrollHeight:t}=this.hostElement;const{height:a}=this.getRect(this.hostElement);this.hostElement.style.height=`${a}px`;this.isExpanding=true;this.animate(true,`${a}px`,`${t}px`)}))}closeGrid(){const{scrollHeight:t,clientHeight:a}=this.hostElement;const e=this.isExpanding?a:t;this.hostElement.style.height=`0px`;this.isClosing=true;this.animate(false,`${e}px`,`0px`)}animate(t,a,e){this.cancelAnimations();this.animation=this.hostElement.animate({height:[a,e]},{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()}closeToast(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 o(s,{key:"e1d530ec1396c479685092dfdc6d668a80071b15"},o("output",{key:"9aae177ffec7556f30789964e1a1f6698d07b5e5",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()&&o("pn-icon",{key:"91a1f34ce7ca572f74a9f4bc90f102eefa84b7c2",class:"pn-toast-icon",icon:this.getIcon()}),o("div",{key:"1df901ec80ebf06265f517b97ed83e70aef4ec51",class:"pn-toast-content"},this.showTitle()&&o("h4",{key:"9e6b540a4eecc675bdcfeebeb1186b0f8834a769",class:"pn-toast-heading"},this.heading),this.text&&o("p",{key:"21c656c0af57f103c6b2ed734d79d2423399ce0c",class:"pn-toast-text"},this.text),o("slot",{key:"8b99e035f2c276480f71d7c8f428a259256e2f68"})),this.showIllustration()&&o("pn-illustration",{key:"b259e69da37e02e728f89596bc4beadb35220eab",illustration:this.illustration,width:"5.5em",height:"5.5em"}),this.closable&&o("button",{key:"c4e841ae4ec6a21f42e7de285837beda8884f86b",class:"pn-toast-button",type:"button","aria-label":this.translate("HIDE"),onClick:t=>this.closeToast(t),ref:t=>this.button=t},o("pn-icon",{key:"370667bd83527321a154a542761062e84704844a",icon:d}))))}static get watchers(){return{hide:["handleHide"]}}};m.style=g;export{m as pn_toast};
//# sourceMappingURL=p-9faf3425.entry.js.map