@scania/tegel
Version:
Tegel Design System
1 lines • 4.79 kB
JavaScript
import{r as t,c as s,h as o,H as e,g as a}from"./p-2049fab2.js";import{g as r}from"./p-11648030.js";import{h as i}from"./p-ae110fc2.js";const d=class{constructor(o){t(this,o),this.tdsClose=s(this,"tdsClose",7),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)},this.toastId=r(),this.header=void 0,this.subheader=void 0,this.variant="information",this.hidden=!1,this.closable=!0,this.toastRole="alert",this.tdsCloseAriaLabel=void 0,this.tdsAriaLive="polite"}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),a=i("actions",this.host);return o(e,{key:"433c25165487688ff40c78a0455d30cedd08c76f","aria-live":this.tdsAriaLive,toastRole:this.toastRole,"aria-describedby":this.host.getAttribute("aria-describedby"),class:{hide:this.hidden,show:!this.hidden}},o("div",{key:"2734573a413d9cdf1a329675fe0e0db374243cbf",class:`\n wrapper\n ${this.variant}`},o("tds-icon",{key:"88d4ab6fd55d64c93ad3089c695d0fa4075208a6",name:this.getIconName(),size:"20px",svgTitle:this.getIconName()}),o("div",{key:"02de15f884420946530d2e04c330987f73c9ca44",class:"content"},o("div",{key:"4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc",class:"header-subheader"},this.header&&o("div",{key:"1b707e29cdd68a5cc73a2b694b8b93698cbac661",class:"header"},this.header),t&&o("slot",{key:"ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478",name:"header"}),this.subheader&&o("div",{key:"8164b591452e4a6f025f752951c678a15443fff9",class:"subheader"},this.subheader),s&&o("slot",{key:"2bca8428e8eb128cf8c0f62b31a0da54ef555df3",name:"subheader"})),a&&o("div",{key:"de84bc19257b09127b861b357240509a7346f2e7",class:"toast-bottom "+(s||this.subheader?"subheader":"no-subheader")},o("slot",{key:"b85a46c5dc97dc7d3b95feb816145731887711fb",name:"actions"}))),this.closable&&o("button",{key:"69adb03d815ece9e50cf436957927c5dcd4d3ab8",id:"my-button","aria-label":this.tdsCloseAriaLabel,onClick:this.handleClose,class:"close"},o("tds-icon",{key:"9b4f062079caa32c5900202aaf1c2a7a5ef8e18c",name:"cross",size:"20px",svgTitle:"cross"}))))}get host(){return a(this)}};d.style=":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-icon-color-info)}:host .wrapper.information tds-icon{color:var(--tds-toast-icon-color-info)}:host .wrapper.success{border-left:4px solid var(--tds-toast-icon-color-success)}:host .wrapper.success tds-icon{color:var(--tds-toast-icon-color-success)}:host .wrapper.error{border-left:4px solid var(--tds-toast-icon-color-error)}:host .wrapper.error tds-icon{color:var(--tds-toast-icon-color-error)}:host .wrapper.warning{border-left:4px solid var(--tds-toast-icon-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)}";export{d as tds_toast}