@cbpds/web-components
Version:
Web components for the CBP Design System.
35 lines (29 loc) • 2.43 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.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) {
index.registerInstance(this, hostRef);
this.bannerDismiss = index.createEvent(this, "bannerDismiss", 7);
this.color = "info";
}
handleDismiss(e) {
this.host.setAttribute("hidden", "");
this.bannerDismiss.emit({
host: this.host,
nativeEvent: e
});
}
render() {
return (index.h(index.Host, { key: '2e2e03632003d083104407bb14a03f33d54345bc' }, index.h("cbp-icon", { key: '4ffe2e3f3954312ac203137d1a096f6539bf837d', class: "cbp-banner-icon-container", name: "exclamation-circle", color: "var(--cbp-color-text-lighter)", size: "3rem" }), index.h("div", { key: '2cd4dd5e0405ef4417cf93912385d760130d034f', class: "cbp-banner-text-container" }, index.h("slot", { key: 'c0dd3faab63328bc3803c52fe0cbaf6e70d590f5', name: "cbp-banner-title" }), index.h("p", { key: '011eccd72aba9253898c438c5a8fe9ce2c799bad' }, index.h("slot", { key: '57dae6bda3630407605691d805c701c00fd65e1b' })), index.h("cbp-button", { key: '282c0db7a814d211c6261e96d4fe849a3e970d4a', type: "button", fill: "solid", color: "primary", context: "dark-always", onButtonClick: e => this.handleDismiss(e) }, index.h("cbp-icon", { key: '286b26d3b65fbdceef46f8ecd34965a684e23743', name: "circle-xmark", size: "var(--cbp-space-5x)" }), "Dismiss"))));
}
get host() { return index.getElement(this); }
};
CbpBanner.style = CbpBannerStyle0;
exports.cbp_banner = CbpBanner;
//# sourceMappingURL=cbp-banner.cjs.entry.js.map