@scania/tegel
Version:
Tegel Design System
1 lines • 3.65 kB
JavaScript
import{r as e,c as s,h as a,H as o,a as t}from"./p-9xxNGlso.js";import{g as n}from"./p-Cn4f8w1e.js";import{h as d}from"./p-DDX6uFcm.js";const r=class{constructor(a){e(this,a),this.tdsClose=s(this,"tdsClose",7),this.variant="default",this.bannerId=n(),this.hidden=!1,this.roleType="banner",this.handleClose=()=>{this.tdsClose.emit({bannerId:this.bannerId}).defaultPrevented||(this.hidden=!0)}}async hideBanner(){this.hidden=!0}async showBanner(){this.hidden=!1}connectedCallback(){"error"===this.variant?this.icon="error":"information"===this.variant&&(this.icon="info")}render(){const e=d("subheader",this.host),s=d("subheader",this.host),t=d("actions",this.host);return a(o,{key:"5b89bedb919ed799da1701cae1c152e310865b43",role:this.roleType,"aria-hidden":`${this.hidden}`,"aria-live":"alert"===this.roleType?"assertive":"polite","aria-atomic":this.host.getAttribute("aria-atomic"),class:{[this.variant]:!0,hide:this.hidden,show:!this.hidden}},this.icon&&a("div",{key:"b17e4c4986ccb9afde8ad9609465fdad1f5f78fe",class:`banner-icon ${this.variant}`},a("tds-icon",{key:"2d43b52d72b874809d48b40ab2faae796e3c7d08",name:this.icon,size:"20px",svgTitle:this.icon})),a("div",{key:"3f1d0b8493aaf41e1fe78837c937d56bb4d4d6af",class:"content"},a("div",{key:"3fd4dac5928d5f588eff7cc9cf8a64c401b75875",class:"header-subheader"},this.header&&a("div",{key:"f356b4218fba0c42c97e728fe6fc91bb14c8a3d7",class:"header"},this.header),e&&a("slot",{key:"74659c5c0b33bbc81f90d79c9cb80d3dcd1839fa",name:"header"}),this.subheader&&a("div",{key:"b91ba944f6c41ccf62002a2dade85968dd5b34f4",class:"subheader"},this.subheader),s&&a("slot",{key:"e8854a51dc158cba747abca51d79828ee419732e",name:"subheader"})),t&&a("slot",{key:"60fe1b1b75a7cc169d71b97d5d91086d7ae96a07",name:"actions"})),a("div",{key:"bf664cd50d34e9ac4c3061d1670d0607cd326bef",class:"banner-close"},a("button",{key:"0ddfadbfe00ecf7ec1376fdfbc2d70ff0cffb919","aria-label":"Close banner",onClick:this.handleClose},a("tds-icon",{key:"7e45115cd682e035227b486442c4fe4c67dfec4b",name:"cross",size:"20px",svgTitle:"Close"}))))}get host(){return t(this)}};r.style=":host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400;padding-left:16px}:host .banner-icon{padding-left:4px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;padding-top:12px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}";export{r as tds_banner}