@postnord/web-components/postnord-web-components/p-514107a5.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{r as n,k as i,o as r,e as p}from"./p-f64d17a6.js";import{a as c}from"./p-9a18b612.js";import{a as l}from"./p-fc06684e.js";import{c as d}from"./p-ffa37a87.js";import{c as h}from"./p-92b0338a.js";const u='<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=u;const b={HIDE:{sv:"Stäng meddelande",en:"Dismiss message",da:"Afvis besked",fi:"Hylkää viesti",no:"Avvis meldingen"}};const m="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)}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast{transition-duration:0s;transition-delay:0s}}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}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast-button{transition-duration:0s;transition-delay:0s}}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=m;const y=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;duration=400;animationDuration=this.duration;animation;get hostElement(){return s(this)}handleHide(){if(n())this.animationDuration=0;else this.animationDuration=this.duration;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 i(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:this.animationDuration,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);r(t,this.toast)}getIcon(){if(this.illustration)return"";if(this.icon)return this.icon;if(this.appearance==="success")return d;if(this.appearance==="warning")return f;if(this.appearance==="error")return c;return l}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 b?.[t]?.[this.language||p]||t}hideToast(){return this.hide&&!(this.isClosing||this.isExpanding)}render(){return e(o,{key:"c735e200d6cf3061569c3e55caf583abed738725"},e("output",{key:"7911e4ca88367ea8130a20abda58449a1f7e3098",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:"b064b710d21583eaba8d5ce1c3b162fb1c71f4e4",class:"pn-toast-icon",icon:this.getIcon()}),e("div",{key:"6e24b6771be924b56e2406ac92c5639f7da4b0b6",class:"pn-toast-content"},this.showTitle()&&e("h4",{key:"eb24bcbbd70b1b77e86c2598569f443bd7d1bdfb",class:"pn-toast-heading"},this.heading),this.text&&e("p",{key:"713b372860897ef9bc55f401282765bc5684b6f6",class:"pn-toast-text"},this.text),e("slot",{key:"e567f676f28d20370407fc481c52c92bc34a06e1"})),this.showIllustration()&&e("pn-illustration",{key:"6b0b4f9c1f588f71eb1154b6170994f59aaaae4a",illustration:this.illustration,width:"5.5em",height:"5.5em"}),this.closable&&e("button",{key:"4111381fb279dc2d5abe520188869133aa948246",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:"020fe8b66ce1d955dcb5420c44b0b4b5b1845ab9",icon:h}))))}static get watchers(){return{hide:["handleHide"]}}};y.style=g;export{y as pn_toast};
//# sourceMappingURL=p-514107a5.entry.js.map