@cbpds/web-components
Version:
Web components for the CBP Design System.
30 lines (26 loc) • 2.32 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0f6e3adc.js';
const cbpBannerCss = ":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 CbpBannerStyle0 = cbpBannerCss;
const CbpBanner = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.bannerDismiss = createEvent(this, "bannerDismiss", 7);
this.color = "info";
}
handleDismiss() {
this.host.setAttribute("hidden", "");
this.bannerDismiss.emit({
host: this.host
});
}
render() {
return (h(Host, { key: '27a800366e83047f42f66d52967e167c8f1ab51e' }, h("cbp-icon", { key: '0aba337097e9db035326eb0e0bdf6f18c469d91c', class: "cbp-banner-icon-container", name: "exclamation-circle", color: "var(--cbp-color-text-lighter)", size: "3rem" }), h("div", { key: '8c44b69637f8c432dad50740f450ff927549dbed', class: "cbp-banner-text-container" }, h("slot", { key: 'a1d60d1f5294b1d6d552e2bc3362e2b573c592a3', name: "cbp-banner-title" }), h("p", { key: '2f6d6d6be4f8b1046cccd4f7bdbef3bc02571957' }, h("slot", { key: '90293551a75d943c9c7e853b81e6c316d4ce9d1f' })), h("cbp-button", { key: 'c2787a35fb94daf46f0467caa12e4bae431fccfe', type: "button", fill: "solid", color: "primary", context: "dark-always", onButtonClick: () => { this.handleDismiss(); } }, h("cbp-icon", { key: '04a55820ff262295aa3944422bccd9c4303ad47d', name: "circle-xmark", size: "var(--cbp-space-5x)" }), "Dismiss"))));
}
get host() { return getElement(this); }
};
CbpBanner.style = CbpBannerStyle0;
export { CbpBanner as cbp_banner };
//# sourceMappingURL=cbp-banner.entry.js.map