@postnord/web-components/components/pn-toast.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as a,Mixin as o,createEvent as e,h as n,Host as s}from"@stencil/core/internal/client";import{a as i}from"./index2.js";import{k as r,o as p,e as c}from"./helpers.js";import{a as l}from"./alert_exclamation_circle.js";import{a as d}from"./alert_info_circle.js";import{c as u}from"./check_circle.js";import{c as h}from"./close.js";import{d as f}from"./pn-icon2.js";import{d as b}from"./pn-illustration2.js";const m={HIDE:{sv:"Stäng meddelande",en:"Dismiss message",da:"Afvis besked",fi:"Hylkää viesti",no:"Avvis meldingen"}},g=a(class extends(o(i)){constructor(t){super(!1),!1!==t&&this.__registerHost(),this.close=e(this,"close",7),this.hidden=e(this,"hidden",7)}toast;button;get hostElement(){return this}hasSlottedContent=!1;heading="";text="";toastId;appearance;temporary=!1;icon;illustration;hide=!1;closable=!1;language=null;handleHide(){this.hostElement.style.overflow="hidden",requestAnimationFrame((()=>this.toggleToastVisibility()))}close;hidden;async componentWillLoad(){this.hide&&(this.hostElement.style.height="0",this.hostElement.style.overflow="hidden"),this.hasSlottedContent=!!this.hostElement.textContent,null===this.language&&await r(this.hostElement)}componentDidLoad(){!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")}toggleToastVisibility(){this.hide?this.closeDropdown(this.hostElement,this.toast.clientHeight):this.openDropdown(this.hostElement,this.toast.clientHeight)}handleClick(t){this.hide=!0,this.close.emit(this.hide),p(t,this.toast)}getIcon(){return this.illustration?"":this.icon?this.icon:"success"===this.appearance?u:"warning"===this.appearance?'<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>':"error"===this.appearance?l:d}getRole(){return"error"===this.appearance?"alert":"status"}showIcon(){return!this.illustration}showIllustration(){return!this.showIcon()}showTitle(){return(this.hasSlottedContent||!!this.text)&&!!this.heading}translate(t){return m?.[t]?.[this.language||c]||t}hideToast(){return this.hide&&!this.isMoving()}render(){return n(s,{key:"5c3fee615535723fb1f866ad2e5bc955289abe6e"},n("div",{key:"4de5c242cce6bd2e77c355030c53e1161495f2aa",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()&&n("pn-icon",{key:"69348635c02e8108503dbf588e65d522405fd08f",class:"pn-toast-icon",icon:this.getIcon()}),n("div",{key:"a4a2bbd367ff30405a305e4c56da05575e2765bd",class:"pn-toast-content"},this.showTitle()&&n("h4",{key:"0e847dd42ed4d0e1c518b69519f27f23d491e11c",class:"pn-toast-heading"},this.heading),this.text&&n("p",{key:"c423eb0872592844f4d583839b438442f65c1ab9",class:"pn-toast-text"},this.text),n("slot",{key:"4e743ba3362107a4b5f585e12b2ad2879ffef5bf"})),this.showIllustration()&&n("pn-illustration",{key:"1330548a89218ee19a73ff83f94df180a7b2cc98",illustration:this.illustration,width:"5.5em",height:"5.5em"}),this.closable&&n("button",{key:"321c57a9103fa0b4abedd2429420f94faa9fd5fc",class:"pn-toast-button",type:"button","aria-label":this.translate("HIDE"),onClick:t=>this.handleClick(t),ref:t=>this.button=t},n("pn-icon",{key:"3d68d08f2cca035840acd466accbe0d66da65153",icon:h}))))}static get watchers(){return{hide:[{handleHide:0}]}}static get style(){return`${t("pn-toast")}{position:relative;display:block}${t("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){${t("pn-toast")} .pn-toast{transition-duration:0s;transition-delay:0s}}${t("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}}${t("pn-toast")} .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}${t("pn-toast")} .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}${t("pn-toast")} .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}${t("pn-toast")} .pn-toast-text:last-child{margin-bottom:0}${t("pn-toast")} .pn-toast-icon .pn-icon-svg path{fill:#2d2013}${t("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}${t("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)}@media (prefers-reduced-motion: reduce){${t("pn-toast")} .pn-toast-button{transition-duration:0s;transition-delay:0s}}${t("pn-toast")} .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}${t("pn-toast")} .pn-toast-button:hover{background-color:#8eddf9}${t("pn-toast")} .pn-toast[data-appearance=success]{background-color:#dcf6e7}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}${t("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}${t("pn-toast")} .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}${t("pn-toast")} .pn-toast[data-appearance=warning]{background-color:#fff1e3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}${t("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}${t("pn-toast")} .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}${t("pn-toast")} .pn-toast[data-appearance=error]{background-color:#fdefee}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}${t("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}${t("pn-toast")} .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}${t("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)}`}},[772,"pn-toast",{heading:[1],text:[1],toastId:[1,"toast-id"],appearance:[1],temporary:[4],icon:[1],illustration:[1],hide:[1540],closable:[4],language:[1025],isClosing:[32],isExpanding:[32],hasSlottedContent:[32]},void 0,{hide:[{handleHide:0}]}]),y=g,k=function(){"undefined"!=typeof customElements&&["pn-toast","pn-icon","pn-illustration"].forEach((a=>{switch(a){case"pn-toast":customElements.get(t(t(a)))||customElements.define(t(t(a)),g);break;case"pn-icon":customElements.get(t(t(a)))||f();break;case"pn-illustration":customElements.get(t(t(a)))||b()}}))};export{y as PnToast,k as defineCustomElement}