@cbpds/web-components
Version:
Web components for the CBP Design System.
36 lines (30 loc) • 3.42 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpNoticeCss = ":root{--cbp-notice-color-text:var(--cbp-color-text-darkest);--cbp-notice-color-text-dark:var(--cbp-color-text-lightest);--cbp-notice-color-title:var(--cbp-color-text-darker);--cbp-notice-color-title-dark:var(--cbp-color-text-lighter);--cbp-notice-color-background:var(--cbp-color-info-lighter);--cbp-notice-color-background-dark:var(--cbp-color-info-dark);--cbp-notice-color-border:var(--cbp-color-info-base);--cbp-notice-color-border-dark:var(--cbp-color-info-light)}[data-cbp-theme=light] cbp-notice[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-notice:not([context=dark-inverts]):not([context=light-always]){--cbp-notice-color-text:var(--cbp-notice-color-text-dark);--cbp-notice-color-title:var(--cbp-notice-color-title-dark);--cbp-notice-color-background:var(--cbp-notice-color-background-dark);--cbp-notice-color-border:var(--cbp-notice-color-border-dark)}cbp-notice{display:block;background-color:var(--cbp-notice-color-background);border-left:var(--cbp-space-2x) solid var(--cbp-notice-color-border);border-radius:var(--cbp-border-radius-softer);color:var(--cbp-notice-color-text);padding:var(--cbp-space-3x)}cbp-notice [slot=cbp-notice-title]{--cbp-icon-size:var(--cbp-space-5x);display:inline-block;margin-block-end:var(--cbp-space-2x)}cbp-notice [slot=cbp-notice-title] *{font-weight:var(--cbp-font-weight-bold);color:var(--cbp-notice-color-title);margin-bottom:0}cbp-notice[color=success]{--cbp-notice-color-background:var(--cbp-color-success-lighter);--cbp-notice-color-background-dark:var(--cbp-color-success-dark);--cbp-notice-color-border:var(--cbp-color-success-base);--cbp-notice-color-border-dark:var(--cbp-color-success-light)}cbp-notice[color=warning]{--cbp-notice-color-background:var(--cbp-color-warning-lighter);--cbp-notice-color-background-dark:var(--cbp-color-warning-darker);--cbp-notice-color-border:var(--cbp-color-warning-base);--cbp-notice-color-border-dark:var(--cbp-color-warning-base)}cbp-notice[color=danger]{--cbp-notice-color-background:var(--cbp-color-danger-lighter);--cbp-notice-color-background-dark:var(--cbp-color-danger-dark);--cbp-notice-color-border:var(--cbp-color-danger-base);--cbp-notice-color-border-dark:var(--cbp-color-danger-light)}";
const CbpNoticeStyle0 = cbpNoticeCss;
const CbpNotice = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.color = 'info';
this.sx = {};
this.context = undefined;
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
render() {
return (index.h(index.Host, { key: 'd9396a0ab959b5f07679cad5d86d79461e4a465c' }, index.h("slot", { key: '9fc30f78d8141c5344d3d93e5eaac45f7cdc81a7', name: "cbp-notice-title" }), index.h("div", { key: 'eafec1370de5ffc455b3f7110d741bd9ffec3d7d' }, index.h("slot", { key: '3b0800e34ef8f6aa10f6f3a85be76021063f45d5' }))));
}
get host() { return index.getElement(this); }
};
CbpNotice.style = CbpNoticeStyle0;
exports.cbp_notice = CbpNotice;
//# sourceMappingURL=cbp-notice.cjs.entry.js.map