@cbpds/web-components/dist/cjs/cbp-container.cjs.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-507f2a89.js');
const utils = require('./utils-99c9e716.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) {
        index.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) || {};
        }
        utils.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 (index.h(index.Host, { key: 'a7dd4e2602aaca4db098b19fd5b61da062ef0b02' }, index.h("div", { key: '1e268cfba88dff2c68554791cabbc70f0c9cf84e', class: "cbp-container--inner" }, index.h("slot", { key: '05fc48c41e50e782d39fbf62b229d6a083fdf764' }))));
    }
    get host() { return index.getElement(this); }
};
CbpContainer.style = CbpContainerStyle0;

exports.cbp_container = CbpContainer;

//# sourceMappingURL=cbp-container.cjs.entry.js.map