@cbpds/web-components
Version:
Web components for the CBP Design System.
125 lines (121 loc) • 9.06 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 cbpTabsCss = ":root{--cbp-tabs-color-border:var(--cbp-color-gray-cool-30);--cbp-tabs-color-border-dark:var(--cbp-color-gray-cool-60);--cbp-tab-color:var(--cbp-color-interactive-secondary-darker);--cbp-tab-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-tab-color-focus:var(--cbp-color-text-lightest);--cbp-tab-color-active:var(--cbp-color-text-lightest);--cbp-tab-color-selected:var(--cbp-color-interactive-active-dark);--cbp-tab-color-bg:transparent;--cbp-tab-color-bg-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-tab-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-tab-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-tab-color-bg-selected:transparent;--cbp-tab-color-border:transparent;--cbp-tab-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-tab-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-tab-color-border-active:var(--cbp-color-interactive-active-dark);--cbp-tab-color-border-selected:var(--cbp-color-interactive-active-dark);--cbp-tab-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-tab-color-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-tab-color-focus-dark:var(--cbp-color-text-darkest);--cbp-tab-color-active-dark:var(--cbp-color-text-darkest);--cbp-tab-color-selected-dark:var(--cbp-color-interactive-active-light);--cbp-tab-color-bg-dark:transparent;--cbp-tab-color-bg-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-tab-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-tab-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-tab-color-bg-selected-dark:transparent;--cbp-tab-color-border-dark:transparent;--cbp-tab-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-tab-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-tab-color-border-active-dark:var(--cbp-color-interactive-active-light);--cbp-tab-color-border-selected-dark:var(--cbp-color-interactive-active-light);--cbp-tab-border-radius:0;--cbp-tab-color-outline-focus:var(--cbp-color-white);--cbp-tab-color-outline-focus-dark:var(--cbp-color-black)}[data-cbp-theme=light] cbp-tabs[context*=dark],[data-cbp-theme=dark] cbp-tabs:not([context=dark-inverts]):not([context=light-always]){--cbp-tabs-color-border:var(--cbp-tabs-color-border-dark)}cbp-tabs{display:flex;max-width:100%;overflow:hidden;background:linear-gradient(to top, var(--cbp-tabs-color-border) var(--cbp-border-size-md), transparent var(--cbp-border-size-md));margin-bottom:var(--cbp-space-4x)}cbp-tabs cbp-button[fill][color]{align-self:flex-start;--cbp-button-color:var(--cbp-tab-color);--cbp-button-color-dark:var(--cbp-tab-color-dark);--cbp-button-color-bg:var(--cbp-color-background-light);--cbp-button-color-bg-dark:var(--cbp-color-background-dark);--cbp-button-color-border:var(--cbp-color-gray-cool-30);--cbp-button-color-border-dark:var(--cbp-color-gray-cool-60);--cbp-button-border-radius:0}cbp-tabs .cbp-tabs-wrapper{display:flex;align-items:flex-end;flex-grow:5;flex-shrink:5;overflow:hidden;scroll-snap-align:start}";
const CbpTabsStyle0 = cbpTabsCss;
const CbpTabs = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tabs = [];
this.selectedIndex = 0;
this.focusIndex = 0;
this.accessibilityText = undefined;
this.context = undefined;
this.sx = {};
}
initTabset() {
let activeTab = this.tabs[0];
this.tabs.forEach(tab => {
if (tab.selected === true)
activeTab = tab;
});
this.setActiveTab(activeTab);
}
setActiveTab(activatedTab) {
this.tabs.forEach((tab, index) => {
let button = tab.querySelector('button');
let panelid = tab.name;
let panel = document.querySelector(`#${panelid}`);
if (!panel) {
console === null || console === void 0 ? void 0 : console.warn(`Warning: cbp-tab does not reference valid tab panel with id ${panelid}`);
return;
}
if (activatedTab == tab) {
tab.selected = true;
this.selectedIndex = this.focusIndex = index;
panel.selected = true;
button === null || button === void 0 ? void 0 : button.scrollIntoView({ behavior: "smooth", inline: 'start' });
}
else {
tab.selected = false;
panel.selected = false;
}
});
}
keyboardNav(key) {
const l = this.tabs.length - 1;
const n = {
Home: 0,
ArrowLeft: -1 < this.focusIndex + -1 ? this.focusIndex + -1 : l,
ArrowRight: l + 1 > this.focusIndex + 1 ? this.focusIndex + 1 : 0,
End: l,
Tab: this.focusIndex = this.selectedIndex,
}[key];
const d = (key == 'ArrowLeft') ? 'end' : 'start';
if (n !== undefined && key !== 'Tab') {
this.tabs[n].scrollIntoView({ behavior: "smooth", inline: d });
setTimeout(() => {
this.tabs[n].querySelector('button').focus();
}, 20);
this.focusIndex = n;
}
}
responsiveNav(direction) {
const l = this.tabs.length - 1;
if (direction == 'next') {
this.focusIndex = l + 1 > this.focusIndex + 1 ? this.focusIndex + 1 : 0;
this.tabs[this.focusIndex].scrollIntoView({ behavior: "smooth", inline: "start" });
setTimeout(() => {
this.tabs[this.focusIndex].querySelector('button').focus();
}, 20);
}
if (direction == 'previous') {
this.focusIndex = -1 < this.focusIndex + -1 ? this.focusIndex + -1 : l;
this.tabs[this.focusIndex].scrollIntoView({ behavior: "smooth", inline: "end" });
setTimeout(() => {
this.tabs[this.focusIndex].querySelector('button').focus();
}, 20);
}
}
componentWillLoad() {
this.tabs = Array.from(this.host.querySelectorAll('cbp-tab')).filter(tab => tab.closest('cbp-tabs') == this.host);
this.tabs.forEach(tab => {
tab.addEventListener('tabClicked', e => this.setActiveTab(e.detail.host));
});
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.initTabset();
this.observer = new ResizeObserver(([{ contentRect: { width } }]) => {
if (width + 1 > this.wrapper.scrollWidth) {
this.previousControl.setAttribute('hidden', '');
this.nextControl.setAttribute('hidden', '');
}
else {
this.previousControl.removeAttribute('hidden');
this.nextControl.removeAttribute('hidden');
}
});
this.observedEl = this.host;
this.observer.observe(this.observedEl);
}
disconnectedCallback() {
if (this.observer) {
this.observer.unobserve(this.observedEl);
}
}
render() {
return (h(Host, { key: 'd8c30c4f02bf6e1ffe9296bb3359a606f560517d', role: "tablist", "aria-label": this.accessibilityText, onKeydown: ({ key }) => {
this.keyboardNav(key);
} }, h("cbp-button", { key: 'ad5f3675b044aa2407aab4be6c0a370d5ce73085', color: "secondary", fill: "outline", variant: "square", width: "3.5rem", height: "3.5rem", context: this.context, onClick: () => this.responsiveNav('previous'), ref: el => (this.previousControl = el) }, h("button", { key: '6b76aa16588e9eda09379bff1efef0da4d3e9293', type: "button", tabindex: "-1", "aria-label": "Previous Tab", slot: "cbp-button-custom" }, h("cbp-icon", { key: '99b02b39e5fde5c5a31769fa876287ed100592e3', name: "chevron-right", size: "var(--cbp-space-5x)", rotate: 180 }))), h("div", { key: '6da16b09dc07586593eab53217563d17ccc5f0fe', class: "cbp-tabs-wrapper", ref: el => (this.wrapper = el) }, h("slot", { key: 'cf87e757b666a58c80633562f25fc85611193d43' })), h("cbp-button", { key: 'b38c7a468e354a79c0e65117012354bb86db73ee', color: "secondary", fill: "outline", variant: "square", width: "3.5rem", height: "3.5rem", context: this.context, onClick: () => this.responsiveNav('next'), ref: el => (this.nextControl = el) }, h("button", { key: '9661ad148e719f21cab57f2808cd64f7718e1d70', type: "button", tabindex: "-1", "aria-label": "Next Tab", slot: "cbp-button-custom" }, h("cbp-icon", { key: 'c927b98570d5c1d5ae3eb5c8a0aa937ba7574952', name: "chevron-right", size: "var(--cbp-space-5x)" })))));
}
get host() { return getElement(this); }
};
CbpTabs.style = CbpTabsStyle0;
export { CbpTabs as cbp_tabs };
//# sourceMappingURL=cbp-tabs.entry.js.map