@cbpds/web-components
Version:
Web components for the CBP Design System.
32 lines (28 loc) • 2.47 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 cbpActionBarCss = ":root{--cbp-action-bar-color:var(--cbp-color-text-darkest);--cbp-action-bar-color-dark:var(--cbp-color-text-lightest);--cbp-action-bar-color-bg:var(--cbp-color-gray-cool-5);--cbp-action-bar-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-action-bar-floating-color-bg:var(--cbp-color-white);--cbp-action-bar-floating-color-bg-dark:var(--cbp-color-gray-cool-90)}[data-cbp-theme=light] cbp-action-bar[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-action-bar:not([context=dark-inverts]):not([context=light-always]){--cbp-action-bar-color:var(--cbp-action-bar-color-dark);--cbp-action-bar-color-bg:var(--cbp-action-bar-color-bg-dark);--cbp-action-bar-floating-color-bg:var(--cbp-action-bar-floating-color-bg-dark)}cbp-action-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:right;min-height:var(--cbp-space-14x);width:100%;padding:var(--cbp-space-3x);color:var(--cbp-action-bar-color);background-color:var(--cbp-action-bar-color-bg);gap:var(--cbp-space-3x)}cbp-action-bar>*[slot=cbp-action-bar-info]{margin-inline-end:auto}cbp-action-bar[variant=floating]{--cbp-action-bar-color-bg:var(--cbp-action-bar-floating-color-bg);--cbp-action-bar-color-bg-dark:var(--cbp-action-bar-floating-color-bg-dark);position:fixed;bottom:0;left:0;padding-inline:var(--cbp-responsive-spacing-outer);box-shadow:var(--cbp-shadow-level-3-up)}";
const CbpActionBarStyle0 = cbpActionBarCss;
const CbpActionBar = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.variant = 'inline';
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: 'c7567f55be6ab46b58ccc6c5ada38dc5269a0e46' }, h("slot", { key: 'fad380f830f756bcc5958d24acff68c934311fcb', name: "cbp-action-bar-info" }), h("slot", { key: 'ef001c72af94d9ec44cd272f4a791402a517a4cc' })));
}
get host() { return getElement(this); }
};
CbpActionBar.style = CbpActionBarStyle0;
export { CbpActionBar as cbp_action_bar };
//# sourceMappingURL=cbp-action-bar.entry.js.map