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

Tegel Design System

import{t as e,p as t,H as s,c as a,h as o,a as n}from"./index.js";import{g as d}from"./p-Cn4f8w1e.js";import{h as r}from"./p-DDX6uFcm.js";import{d as i}from"./p-CIt4YhvL.js";const c=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.tdsClose=a(this,"tdsClose",7),this.variant="default",this.bannerId=d(),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=r("subheader",this.host),t=r("subheader",this.host),s=r("actions",this.host);return o(n,{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&&o("div",{key:"b17e4c4986ccb9afde8ad9609465fdad1f5f78fe",class:"banner-icon "+this.variant},o("tds-icon",{key:"2d43b52d72b874809d48b40ab2faae796e3c7d08",name:this.icon,size:"20px",svgTitle:this.icon})),o("div",{key:"3f1d0b8493aaf41e1fe78837c937d56bb4d4d6af",class:"content"},o("div",{key:"3fd4dac5928d5f588eff7cc9cf8a64c401b75875",class:"header-subheader"},this.header&&o("div",{key:"f356b4218fba0c42c97e728fe6fc91bb14c8a3d7",class:"header"},this.header),e&&o("slot",{key:"74659c5c0b33bbc81f90d79c9cb80d3dcd1839fa",name:"header"}),this.subheader&&o("div",{key:"b91ba944f6c41ccf62002a2dade85968dd5b34f4",class:"subheader"},this.subheader),t&&o("slot",{key:"e8854a51dc158cba747abca51d79828ee419732e",name:"subheader"})),s&&o("slot",{key:"60fe1b1b75a7cc169d71b97d5d91086d7ae96a07",name:"actions"})),o("div",{key:"bf664cd50d34e9ac4c3061d1670d0607cd326bef",class:"banner-close"},o("button",{key:"0ddfadbfe00ecf7ec1376fdfbc2d70ff0cffb919","aria-label":"Close banner",onClick:this.handleClose},o("tds-icon",{key:"7e45115cd682e035227b486442c4fe4c67dfec4b",name:"cross",size:"20px",svgTitle:"Close"}))))}get host(){return this}static get style(){return":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}"}},[257,"tds-banner",{icon:[1],header:[1],subheader:[1],variant:[1],bannerId:[1,"banner-id"],hidden:[516],roleType:[1,"role-type"],hideBanner:[64],showBanner:[64]}]);function l(){"undefined"!=typeof customElements&&["tds-banner","tds-icon"].forEach((t=>{switch(t){case"tds-banner":customElements.get(e(t))||customElements.define(e(t),c);break;case"tds-icon":customElements.get(e(t))||i()}}))}l();const h=c,b=l;export{h as TdsBanner,b as defineCustomElement}