@cbpds/web-components
Version:
Web components for the CBP Design System.
36 lines (30 loc) • 2.53 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.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) {
index.registerInstance(this, hostRef);
this.variant = 'inline';
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: 'c7567f55be6ab46b58ccc6c5ada38dc5269a0e46' }, index.h("slot", { key: 'fad380f830f756bcc5958d24acff68c934311fcb', name: "cbp-action-bar-info" }), index.h("slot", { key: 'ef001c72af94d9ec44cd272f4a791402a517a4cc' })));
}
get host() { return index.getElement(this); }
};
CbpActionBar.style = CbpActionBarStyle0;
exports.cbp_action_bar = CbpActionBar;
//# sourceMappingURL=cbp-action-bar.cjs.entry.js.map