@cbpds/web-components
Version:
Web components for the CBP Design System.
31 lines (27 loc) • 3.66 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 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) {
registerInstance(this, hostRef);
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: 'd9ee3fc3a00236cb0b428ed145e98b5f39d32342' }, h("div", { key: '103d9f5641bfbaa7b455d018f52259834705f91e', class: "cbp-panel__header" }, h("slot", { key: 'ce50005b3aceca367e322991d49d9667931dd0e5', name: "cbp-panel-header" })), h("div", { key: 'a885bc5ff1a57496d28eed654f09fe81c6d900f6', class: "cbp-panel__content" }, h("slot", { key: 'c93d1cefaff9b953369e0310ef2c6e27c87d7230' }))));
}
get host() { return getElement(this); }
};
CbpPanel.style = CbpPanelStyle0;
export { CbpPanel as cbp_panel };
//# sourceMappingURL=cbp-panel.entry.js.map