@cbpds/web-components
Version:
Web components for the CBP Design System.
57 lines (51 loc) • 5.07 kB
JavaScript
/*!
* 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 cbpTabCss = "[data-cbp-theme=light] cbp-tabs[context*=dark] cbp-tab,[data-cbp-theme=dark] cbp-tabs:not([context=dark-inverts]):not([context=light-always]) cbp-tab{--cbp-tab-color:var(--cbp-tab-color-dark);--cbp-tab-color-hover:var(--cbp-tab-color-hover-dark);--cbp-tab-color-focus:var(--cbp-tab-color-focus-dark);--cbp-tab-color-active:var(--cbp-tab-color-active-dark);--cbp-tab-color-selected:var(--cbp-tab-color-selected-dark);--cbp-tab-color-bg:var(--cbp-tab-color-bg-dark);--cbp-tab-color-bg-hover:var(--cbp-tab-color-bg-hover-dark);--cbp-tab-color-bg-focus:var(--cbp-tab-color-bg-focus-dark);--cbp-tab-color-bg-active:var(--cbp-tab-color-bg-active-dark);--cbp-tab-color-bg-selected:var(--cbp-tab-color-bg-selected-dark);--cbp-tab-color-border:var(--cbp-tab-color-border-dark);--cbp-tab-color-border-hover:var(--cbp-tab-color-border-hover-dark);--cbp-tab-color-border-focus:var(--cbp-tab-color-border-focus-dark);--cbp-tab-color-border-active:var(--cbp-tab-color-border-active-dark);--cbp-tab-color-border-selected:var(--cbp-tab-color-border-selected-dark);--cbp-tab-color-outline-focus:var(--cbp-tab-color-outline-focus-dark)}cbp-tab button{all:unset;display:inline-flex;gap:var(--cbp-space-2x);align-items:center;color:var(--cbp-tab-color);background-color:var(--cbp-tab-color-bg);box-sizing:border-box;min-height:var(--cbp-space-14x);padding:0 var(--cbp-space-3x);font-size:var(--cbp-font-size-heading-xs);font-weight:var(--cbp-font-weight-medium);white-space:nowrap;border-bottom:var(--cbp-border-size-xl) solid var(--cbp-tab-color-border);border-radius:var(--cbp-tab-border-radius);outline-width:var(--cbp-border-size-md);outline-style:none;outline-color:var(--cbp-button-color-outline-focus);outline-offset:calc(-1 * var(--cbp-space-1x))}cbp-tab button:hover{--cbp-tab-color:var(--cbp-tab-color-hover);--cbp-tab-color-bg:var(--cbp-tab-color-bg-hover);--cbp-tab-color-border:var(--cbp-tab-color-border-hover)}cbp-tab button[aria-selected=true]{--cbp-tab-color:var(--cbp-tab-color-selected);--cbp-tab-color-bg:var(--cbp-tab-color-bg-selected);--cbp-tab-color-border:var(--cbp-tab-color-border-selected);font-style:italic}cbp-tab button:focus{--cbp-tab-color:var(--cbp-tab-color-focus);--cbp-tab-color-bg:var(--cbp-tab-color-bg-focus);--cbp-tab-color-border:var(--cbp-tab-color-border-focus);--cbp-button-color-outline-focus:var(--cbp-tab-color-outline-focus);outline-style:solid}cbp-tab button:active{--cbp-tab-color:var(--cbp-tab-color-active);--cbp-tab-color-bg:var(--cbp-tab-color-bg-active);--cbp-tab-color-border:var(--cbp-tab-color-border-active);outline:none}cbp-tab[color=danger]{--cbp-tab-color:var(--cbp-color-danger-dark);--cbp-tab-color-dark:var(--cbp-color-danger-light);--cbp-tab-color-hover:var(--cbp-color-danger-base);--cbp-tab-color-hover-dark:var(--cbp-color-danger-lighter);--cbp-tab-color-bg-hover:var(--cbp-color-danger-lighter);--cbp-tab-color-bg-hover-dark:var(--cbp-color-danger-darker);--cbp-tab-color-border-hover:var(--cbp-color-danger-dark);--cbp-tab-color-border-hover-dark:var(--cbp-color-danger-lighter)}";
const CbpTabStyle0 = cbpTabCss;
const CbpTab = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tabLoaded = index.createEvent(this, "tabLoaded", 7);
this.tabClicked = index.createEvent(this, "tabClicked", 7);
this.name = undefined;
this.selected = undefined;
this.color = undefined;
this.accessibilityText = undefined;
this.sx = {};
}
handleTabClick(e = undefined) {
this.selected = true;
this.tabClicked.emit({
host: this.host,
tab: this.button,
name: this.name,
nativeEvent: e
});
}
componentWillLoad() {
if (typeof this.sx == "string") {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
this.selected && this.handleTabClick();
}
componentDidLoad() {
this.tabLoaded.emit({
host: this.host,
tab: this.button,
parent: this.parent
});
}
render() {
return (index.h(index.Host, { key: 'abf5445faf3fc0919dc396855adbbd4f258b8716', role: "presentation" }, index.h("button", { key: '9c8784e1d56f2226e0ee90651017587ce4d7e565', type: "button", role: "tab", id: `${this.name}_tab`, "aria-label": this.accessibilityText, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.name, tabindex: this.selected ? 0 : -1, ref: (el) => this.button = el, onClick: e => this.handleTabClick(e) }, index.h("slot", { key: 'ccb5e67272336a4eb7d18a803e453fec04dd49fd' }))));
}
get host() { return index.getElement(this); }
};
CbpTab.style = CbpTabStyle0;
exports.cbp_tab = CbpTab;
//# sourceMappingURL=cbp-tab.cjs.entry.js.map