@cbpds/web-components
Version:
Web components for the CBP Design System.
184 lines (183 loc) • 8.17 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpTabs {
constructor() {
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)" })))));
}
static get is() { return "cbp-tabs"; }
static get originalStyleUrls() {
return {
"$": ["cbp-tabs.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-tabs.css"]
};
}
static get properties() {
return {
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The accessible label of the tablist. Required unless `aria-labelledby` is specified on the host tag directly."
},
"attribute": "accessibility-text",
"reflect": false
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-tabs.js.map