@cbpds/web-components
Version:
Web components for the CBP Design System.
32 lines (28 loc) • 2.03 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { s as setCSSProps } from './utils-475ba472.js';
const cbpBadgeCss = ":root{--cbp-badge-color:var(--cbp-color-text-lightest);--cbp-badge-color-dark:var(--cbp-color-info-darker);--cbp-badge-color-background:var(--cbp-color-info-base);--cbp-badge-color-background-dark:var( --cbp-color-interactive-secondary-lighter)}[data-cbp-theme=light] cbp-badge[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-badge:not([context=dark-inverts]):not([context=light-always]){--cbp-badge-color:var(--cbp-badge-color-dark);--cbp-badge-color-background:var(--cbp-badge-color-background-dark)}cbp-badge{display:inline-block;width:var(--cbp-space-6x);height:var(--cbp-space-6x);color:var(--cbp-badge-color);background-color:var(--cbp-badge-color-background);border-radius:var(--cbp-border-radius-pill);cursor:default;font-size:0.625rem;font-weight:var(--cbp-font-weight-black);text-align:center;line-height:var(--cbp-space-6x)}cbp-badge[color=danger]{--cbp-badge-color-dark:var(--cbp-color-danger-darker);--cbp-badge-color-background:var(--cbp-color-danger-dark);--cbp-badge-color-background-dark:var(--cbp-color-danger-light)}";
const CbpBadgeStyle0 = cbpBadgeCss;
const CbpBadge = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.color = undefined;
this.context = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
render() {
return (h(Host, { key: '82bdb09f322ef6d4fedb7cc1bff6a854ffe7af67' }, h("slot", { key: '37de2b5506ac3812a8fe85f908cd67d3b41f5d9f' })));
}
get host() { return getElement(this); }
};
CbpBadge.style = CbpBadgeStyle0;
export { CbpBadge as cbp_badge };
//# sourceMappingURL=cbp-badge.entry.js.map