@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-507f2a89.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: 'c14304174d8b3165a722379de087612d6d9bb836' }, index.h("slot", { key: '360d600864cda5f8a89163220d342c47b1dddc92', name: "cbp-notice-title" }), index.h("div", { key: '5d4030c04c354b05abc7b61d66b7aefe965b27f1' }, index.h("slot", { key: '44beef05d557bedf813e2a8fbc6bdbfae4a940c3' }))));
}
get host() { return index.getElement(this); }
};
CbpNotice.style = CbpNoticeStyle0;
exports.cbp_notice = CbpNotice;
//# sourceMappingURL=cbp-notice.cjs.entry.js.map