@cbpds/web-components
Version:
Web components for the CBP Design System.
33 lines (29 loc) • 1.85 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 cbpContainerCss = ":root{--cbp-container-color-text:inherit;--cbp-container-color-background:transparent;--cbp-container-color-inner-background:var(--cbp-container-color-background);--cbp-container-content-padding:0;--cbp-container-inner-width:auto}cbp-container{display:block;color:var(--cbp-container-color-text);background:var(--cbp-container-color-background);padding:var(--cbp-container-content-padding);max-width:100%}cbp-container .cbp-container--inner{display:block;background:var(--cbp-container-color-inner-background);margin:auto;width:var(--cbp-container-inner-width)}";
const CbpContainerStyle0 = cbpContainerCss;
const CbpContainer = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.background = undefined;
this.textColor = undefined;
this.width = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ "--cbp-container-color-text": this.textColor, "--cbp-container-color-background": this.background, "--cbp-container-inner-width": this.width }, this.sx));
}
render() {
return (h(Host, { key: 'd3646c0825f62fbb3196c0b0ac4e1560dd83eeb3' }, h("div", { key: '2b43031637f1670ec2186c5184b20af8285235c9', class: "cbp-container--inner" }, h("slot", { key: '6ac0219fbca7b5afecd19ba85983a24ac732b85b' }))));
}
get host() { return getElement(this); }
};
CbpContainer.style = CbpContainerStyle0;
export { CbpContainer as cbp_container };
//# sourceMappingURL=cbp-container.entry.js.map