@scania/tegel/dist/components/tds-toast.js

Tegel Design System

import{t,p as s,H as e,c as o,h as a,a as r}from"./index.js";import{g as d}from"./p-Cn4f8w1e.js";import{h as i}from"./p-DDX6uFcm.js";import{d as n}from"./p-CIt4YhvL.js";const c=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsClose=o(this,"tdsClose",7),this.toastId=d(),this.variant="information",this.hidden=!1,this.closable=!0,this.toastRole="alert",this.tdsAriaLive="polite",this.getIconName=()=>{switch(this.variant){case"information":default:return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick"}},this.handleClose=()=>{this.tdsClose.emit({toastId:this.toastId}).defaultPrevented||(this.hidden=!0)},this.handleShow=()=>{this.tdsClose.emit({toastId:this.toastId}).defaultPrevented||(this.hidden=!1)}}async hideToast(){this.hidden=!0}async showToast(){this.hidden=!1}connectedCallback(){this.tdsCloseAriaLabel||console.warn("tds-toast: tdsCloseAriaLabel is required")}render(){const t=i("header",this.host),s=i("subheader",this.host),e=i("actions",this.host);return a(r,{key:"05cfab6acac4bf8a86b3bfede4ddfa80d9f1a304","aria-live":this.tdsAriaLive,toastRole:this.toastRole,"aria-describedby":this.host.getAttribute("aria-describedby"),class:{hide:this.hidden,show:!this.hidden}},a("div",{key:"32583b47e144a437be6c194445b22f4a0aa00ba8",class:"\n            wrapper\n            "+this.variant},a("tds-icon",{key:"0a3b7c306323b02ae1b1ef67cbe339f51404dade",name:this.getIconName(),size:"20px",svgTitle:this.getIconName()}),a("div",{key:"f8759ce8357c526cfedc218220c950b1b5e637c7",class:"content"},a("div",{key:"bb4487290f95f36554afc7f6b2ce672eda8eaebc",class:"header-subheader"},this.header&&a("div",{key:"ff99a04a22409cd318710d013e8d25b8a0aa3861",class:"header"},this.header),t&&a("slot",{key:"101a2ada1599fdc15b90ccc658e508b51dee2900",name:"header"}),this.subheader&&a("div",{key:"2edc1acb846a8a364bc589f90891b07722d558c9",class:"subheader"},this.subheader),s&&a("slot",{key:"572ff0654cd2eda217ff0f124e8599748b71d151",name:"subheader"})),e&&a("div",{key:"efb4061f8574866c8944d1349d37cae8d7348993",class:"toast-bottom "+(s||this.subheader?"subheader":"no-subheader")},a("slot",{key:"ae41441a2d602ae150ec685725a7ee6722e84a4e",name:"actions"}))),this.closable&&a("button",{key:"52f934fb79a07225a393ff799e6189aa51052b6c",id:"my-button","aria-label":this.tdsCloseAriaLabel,onClick:this.handleClose,class:"close"},a("tds-icon",{key:"c208a433f3be14c1ad2e38a74ef9945ab05bbf7d",name:"cross",size:"20px",svgTitle:"cross"}))))}get host(){return this}static get style(){return":host(.hide){display:none;visibility:hidden}:host{z-index:800}:host .wrapper{display:flex;width:348px;background-color:var(--tds-toast-background-color);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-toast-color-info)}:host .wrapper.information tds-icon{color:var(--tds-toast-color-info)}:host .wrapper.success{border-left:4px solid var(--tds-toast-color-success)}:host .wrapper.success tds-icon{color:var(--tds-toast-color-success)}:host .wrapper.error{border-left:4px solid var(--tds-toast-color-error)}:host .wrapper.error tds-icon{color:var(--tds-toast-color-error)}:host .wrapper.warning{border-left:4px solid var(--tds-toast-color-warning)}:host .wrapper.warning tds-icon{color:var(--tds-toast-icon-color-warning)}:host .wrapper button.close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 22px;border:none;background:transparent}:host .wrapper button.close:hover{cursor:pointer}:host .wrapper button.close:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .wrapper button.close tds-icon{color:var(--tds-toast-dissmiss-color);padding:0}:host tds-icon{padding:14px 0 0 12px}:host .content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1;max-width:250px;word-break:break-word}:host .content .header-subheader{display:flex;flex-direction:column;gap:4px}:host .content .header,:host .content slot[name=header]::slotted(*){font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-toast-headline-color)}:host .content .subheader,:host .content slot[name=subheader]::slotted(*){color:var(--tds-toast-subheadline-color);font:var(--tds-detail-02) !important;letter-spacing:var(--tds-detail-02-ls) !important}:host .content .subheader.no-link slot::slotted(*),:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*){padding-bottom:0}:host .content .toast-bottom{padding-top:12px}:host .tds-mode-variant-primary{--tds-toast-background:var(--tds-toast-background-primary)}:host .tds-mode-variant-secondary{--tds-toast-background:var(--tds-toast-background-secondary)}"}},[257,"tds-toast",{toastId:[1,"toast-id"],header:[1],subheader:[1],variant:[1],hidden:[516],closable:[4],toastRole:[1,"toast-role"],tdsCloseAriaLabel:[1,"tds-close-aria-label"],tdsAriaLive:[1,"tds-aria-live"],hideToast:[64],showToast:[64]}]);function l(){"undefined"!=typeof customElements&&["tds-toast","tds-icon"].forEach((s=>{switch(s){case"tds-toast":customElements.get(t(s))||customElements.define(t(s),c);break;case"tds-icon":customElements.get(t(s))||n()}}))}l();const h=c,p=l;export{h as TdsToast,p as defineCustomElement}