@cbpds/web-components/dist/cjs/cbp-panel.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-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');

const cbpPanelCss = ":root{--cbp-panel-header-color:var(--cbp-color-text-lighter);--cbp-panel-header-color-bg:var(--cbp-color-base-neutral-dark);--cbp-panel-header-color-bottom-border:var(--cbp-color-gray-cool-70);--cbp-panel-content-color:var(--cbp-color-text-darkest);--cbp-panel-content-color-bg:var(--cbp-color-white);--cbp-panel-content-color-border:var(--cbp-color-gray-cool-10);--cbp-panel-header-color-dark:var(--cbp-color-text-darker);--cbp-panel-header-color-bg-dark:var(--cbp-color-gray-cool-10);--cbp-panel-header-color-bottom-border-dark:var(--cbp-color-gray-cool-40);--cbp-panel-content-color-dark:var(--cbp-color-text-lightest);--cbp-panel-content-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-panel-content-color-border-dark:var(--cbp-color-gray-cool-60);--cbp-panel-border-radius:var(--cbp-border-radius-soft);--cbp-panel-border-width:var(--cbp-border-size-md)}[data-cbp-theme=light] cbp-panel[context*=dark],[data-cbp-theme=dark] cbp-panel:not([context=dark-inverts]):not([context=light-always]){--cbp-panel-header-color:var(--cbp-panel-header-color-dark);--cbp-panel-header-color-bg:var(--cbp-panel-header-color-bg-dark);--cbp-panel-header-color-bottom-border:var(--cbp-panel-header-color-bottom-border-dark);--cbp-panel-content-color:var(--cbp-panel-content-color-dark);--cbp-panel-content-color-bg:var(--cbp-panel-content-color-bg-dark);--cbp-panel-content-color-border:var(--cbp-panel-content-color-border-dark)}cbp-panel{display:block}cbp-panel .cbp-panel__header{color:var(--cbp-panel-header-color);background-color:var(--cbp-panel-header-color-bg);padding:var(--cbp-space-5x);border-bottom:solid var(--cbp-border-size-xl) var(--cbp-panel-header-color-bottom-border);border-radius:var(--cbp-panel-border-radius) var(--cbp-panel-border-radius) 0 0}cbp-panel .cbp-panel__header cbp-typography :where(h1,h2,h3,h4,h5,h6){color:inherit;font-size:var(--cbp-font-size-heading-lg);font-weight:var(--cbp-font-weight-medium);line-height:var(--cbp-space-7x)}cbp-panel .cbp-panel__header cbp-icon{--cbp-icon-size:var(--cbp-space-6x)}cbp-panel .cbp-panel__content{color:var(--cbp-panel-content-color);background-color:var(--cbp-panel-content-color-bg);padding:var(--cbp-space-5x);border:solid var(--cbp-panel-border-width) var(--cbp-panel-content-color-border);border-block-start-style:none;border-radius:0 0 var(--cbp-panel-border-radius) var(--cbp-panel-border-radius)}cbp-panel .cbp-panel__content>:last-child{margin-bottom:0;padding-bottom:0}";
const CbpPanelStyle0 = cbpPanelCss;

const CbpPanel = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.context = undefined;
        this.sx = {};
    }
    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: 'd9ee3fc3a00236cb0b428ed145e98b5f39d32342' }, index.h("div", { key: '103d9f5641bfbaa7b455d018f52259834705f91e', class: "cbp-panel__header" }, index.h("slot", { key: 'ce50005b3aceca367e322991d49d9667931dd0e5', name: "cbp-panel-header" })), index.h("div", { key: 'a885bc5ff1a57496d28eed654f09fe81c6d900f6', class: "cbp-panel__content" }, index.h("slot", { key: 'c93d1cefaff9b953369e0310ef2c6e27c87d7230' }))));
    }
    get host() { return index.getElement(this); }
};
CbpPanel.style = CbpPanelStyle0;

exports.cbp_panel = CbpPanel;

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