@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 2.44 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as c,H as e,d as n,h as a,c as r}from"./p-c5a784ab.js";import{d as o}from"./p-7abe098c.js";import{d as t}from"./p-62fdbefd.js";const b=":root{--cbp-banner-color:var(--cbp-color-text-lightest);--cbp-banner-color-bg:var(--cbp-color-info-dark)}cbp-banner{display:flex;flex-direction:row;gap:var(--cbp-space-4x);padding:var(--cbp-space-4x) var(--cbp-responsive-spacing-outer);background-color:var(--cbp-banner-color-bg)}cbp-banner .cbp-banner-icon-container{align-content:center}cbp-banner .cbp-banner-text-container{display:flex;flex-grow:1;flex-direction:column;color:var(--cbp-banner-color)}cbp-banner .cbp-banner-text-container>p{margin-block-end:var(--cbp-space-3x)}cbp-banner[color=info]{--cbp-banner-color-bg:var(--cbp-color-info-dark);--cbp-banner-color:var(--cbp-color-text-lightest)}";const s=b;const i=c(class c extends e{constructor(){super();this.__registerHost();this.bannerDismiss=n(this,"bannerDismiss",7);this.color="info"}handleDismiss(){this.host.setAttribute("hidden","");this.bannerDismiss.emit({host:this.host})}render(){return a(r,{key:"27a800366e83047f42f66d52967e167c8f1ab51e"},a("cbp-icon",{key:"0aba337097e9db035326eb0e0bdf6f18c469d91c",class:"cbp-banner-icon-container",name:"exclamation-circle",color:"var(--cbp-color-text-lighter)",size:"3rem"}),a("div",{key:"8c44b69637f8c432dad50740f450ff927549dbed",class:"cbp-banner-text-container"},a("slot",{key:"a1d60d1f5294b1d6d552e2bc3362e2b573c592a3",name:"cbp-banner-title"}),a("p",{key:"2f6d6d6be4f8b1046cccd4f7bdbef3bc02571957"},a("slot",{key:"90293551a75d943c9c7e853b81e6c316d4ce9d1f"})),a("cbp-button",{key:"c2787a35fb94daf46f0467caa12e4bae431fccfe",type:"button",fill:"solid",color:"primary",context:"dark-always",onButtonClick:()=>{this.handleDismiss()}},a("cbp-icon",{key:"04a55820ff262295aa3944422bccd9c4303ad47d",name:"circle-xmark",size:"var(--cbp-space-5x)"}),"Dismiss")))}get host(){return this}static get style(){return s}},[4,"cbp-banner",{color:[513]}]);function p(){if(typeof customElements==="undefined"){return}const c=["cbp-banner","cbp-button","cbp-icon"];c.forEach((c=>{switch(c){case"cbp-banner":if(!customElements.get(c)){customElements.define(c,i)}break;case"cbp-button":if(!customElements.get(c)){o()}break;case"cbp-icon":if(!customElements.get(c)){t()}break}}))}const l=i;const d=p;export{l as CbpBanner,d as defineCustomElement};
//# sourceMappingURL=cbp-banner.js.map