@cbpds/web-components
Version:
Web components for the CBP Design System.
73 lines (72 loc) • 2.88 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { h, Host } from "@stencil/core";
export class CbpBanner {
constructor() {
this.color = "info";
}
handleDismiss(e) {
this.host.setAttribute("hidden", "");
this.bannerDismiss.emit({
host: this.host,
nativeEvent: e
});
}
render() {
return (h(Host, { key: '2e2e03632003d083104407bb14a03f33d54345bc' }, h("cbp-icon", { key: '4ffe2e3f3954312ac203137d1a096f6539bf837d', class: "cbp-banner-icon-container", name: "exclamation-circle", color: "var(--cbp-color-text-lighter)", size: "3rem" }), h("div", { key: '2cd4dd5e0405ef4417cf93912385d760130d034f', class: "cbp-banner-text-container" }, h("slot", { key: 'c0dd3faab63328bc3803c52fe0cbaf6e70d590f5', name: "cbp-banner-title" }), h("p", { key: '011eccd72aba9253898c438c5a8fe9ce2c799bad' }, h("slot", { key: '57dae6bda3630407605691d805c701c00fd65e1b' })), h("cbp-button", { key: '282c0db7a814d211c6261e96d4fe849a3e970d4a', type: "button", fill: "solid", color: "primary", context: "dark-always", onButtonClick: e => this.handleDismiss(e) }, h("cbp-icon", { key: '286b26d3b65fbdceef46f8ecd34965a684e23743', name: "circle-xmark", size: "var(--cbp-space-5x)" }), "Dismiss"))));
}
static get is() { return "cbp-banner"; }
static get originalStyleUrls() {
return {
"$": ["cbp-banner.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-banner.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"info\"",
"resolved": "\"info\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a color variant for the banner."
},
"attribute": "color",
"reflect": true,
"defaultValue": "\"info\""
}
};
}
static get events() {
return [{
"method": "bannerDismiss",
"name": "bannerDismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted with the Banner is dismissed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-banner.js.map