Mike Phares
5c9f0d1aff
Remove GetEngineeringSpcReview Better error message EnforceCodeStyleInBuild NginxFileSystem Remove Reactors and Working Directory AppSettings Delete self contained Thunder Tests Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter
197 lines
8.7 KiB
JavaScript
197 lines
8.7 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
const index = require('./index-ca0e0765.js');
|
|
|
|
const tabsCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family)}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:\"\";position:absolute;transition:left 0.3s ease-in-out, width 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tab-item{padding:8px 16px;cursor:pointer;position:relative}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}";
|
|
|
|
const IfxTabs = class {
|
|
constructor(hostRef) {
|
|
index.registerInstance(this, hostRef);
|
|
this.ifxTabChange = index.createEvent(this, "ifxTabChange", 7);
|
|
this.tabs = [];
|
|
this.orientation = "horizontal";
|
|
this.activeTabIndex = 0;
|
|
this.internalOrientation = undefined;
|
|
this.internalActiveTabIndex = 0;
|
|
this.internalFocusedTabIndex = 0;
|
|
this.tabRefs = [];
|
|
this.tabHeaderRefs = [];
|
|
this.disabledTabs = [];
|
|
this.tabObjects = [];
|
|
}
|
|
setActiveAndFocusedTab(index) {
|
|
this.internalActiveTabIndex = index;
|
|
this.internalFocusedTabIndex = index;
|
|
}
|
|
activeTabIndexChanged(newValue, oldValue) {
|
|
if (newValue !== oldValue) {
|
|
this.setActiveAndFocusedTab(newValue);
|
|
}
|
|
}
|
|
componentWillLoad() {
|
|
this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
|
|
if (this.internalActiveTabIndex !== this.activeTabIndex) {
|
|
this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
|
|
}
|
|
// this.internalActiveTabIndex = this.activeTabIndex;
|
|
this.internalFocusedTabIndex = this.internalActiveTabIndex;
|
|
this.updateTabStyles();
|
|
this.onSlotChange();
|
|
}
|
|
updateTabStyles() {
|
|
this.tabHeaderRefs.forEach((tab, index) => {
|
|
tab.classList.toggle('active', index === this.internalActiveTabIndex);
|
|
tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false');
|
|
});
|
|
}
|
|
// needed for smooth border transition
|
|
reRenderBorder() {
|
|
const borderElement = this.el.shadowRoot.querySelector('.active-border');
|
|
if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {
|
|
if (this.orientation === 'horizontal') {
|
|
borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;
|
|
borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;
|
|
borderElement.style.top = '';
|
|
borderElement.style.height = '';
|
|
}
|
|
else {
|
|
borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;
|
|
borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;
|
|
borderElement.style.left = '';
|
|
borderElement.style.width = '';
|
|
}
|
|
}
|
|
}
|
|
// when a slot is removed / added
|
|
onSlotChange() {
|
|
const tabs = this.el.querySelectorAll('ifx-tab');
|
|
this.tabObjects = Array.from(tabs).map((tab) => {
|
|
return {
|
|
header: tab === null || tab === void 0 ? void 0 : tab.header,
|
|
disabled: (tab === null || tab === void 0 ? void 0 : tab.disabled) === true
|
|
};
|
|
});
|
|
this.tabRefs = Array.from(tabs);
|
|
this.tabRefs.forEach((tab, index) => {
|
|
tab.setAttribute('slot', `tab-${index}`);
|
|
});
|
|
}
|
|
setDefaultOrientation() {
|
|
const validOrientations = ['horizontal', 'vertical'];
|
|
const lowercaseOrientation = this.orientation.toLowerCase();
|
|
if (!validOrientations.includes(lowercaseOrientation)) {
|
|
this.internalOrientation = 'horizontal';
|
|
}
|
|
else
|
|
this.internalOrientation = this.orientation;
|
|
}
|
|
componentDidLoad() {
|
|
this.updateBorderAndFocus();
|
|
// Add keyboard event listeners for each tab header
|
|
this.tabHeaderRefs.forEach((tab, index) => {
|
|
tab.addEventListener('focus', this.onTabFocus(index));
|
|
});
|
|
}
|
|
onTabFocus(index) {
|
|
return () => {
|
|
this.internalFocusedTabIndex = index;
|
|
};
|
|
}
|
|
disconnectedCallback() {
|
|
// Remove keyboard event listeners when component is unmounted
|
|
this.tabHeaderRefs.forEach((tab, index) => {
|
|
tab.removeEventListener('focus', this.onTabFocus(index));
|
|
});
|
|
}
|
|
componentDidUpdate() {
|
|
this.updateBorderAndFocus();
|
|
}
|
|
updateBorderAndFocus() {
|
|
this.reRenderBorder();
|
|
this.updateTabFocusability();
|
|
}
|
|
updateTabFocusability() {
|
|
this.tabHeaderRefs.forEach((tab, index) => {
|
|
tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;
|
|
});
|
|
}
|
|
focusNextTab() {
|
|
let nextIndex = this.internalFocusedTabIndex + 1;
|
|
while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {
|
|
nextIndex++;
|
|
}
|
|
if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {
|
|
this.internalFocusedTabIndex = nextIndex;
|
|
this.tabHeaderRefs[nextIndex].focus();
|
|
}
|
|
}
|
|
focusPreviousTab() {
|
|
let prevIndex = this.internalFocusedTabIndex - 1;
|
|
while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {
|
|
prevIndex--;
|
|
}
|
|
if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {
|
|
this.internalFocusedTabIndex = prevIndex;
|
|
this.tabHeaderRefs[prevIndex].focus();
|
|
}
|
|
}
|
|
getTabItemClass(index) {
|
|
const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;
|
|
const isDisabled = this.tabObjects[index].disabled;
|
|
return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
|
|
}
|
|
handleClick(tab, index) {
|
|
this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
|
|
if (!tab.disabled)
|
|
this.internalActiveTabIndex = index;
|
|
}
|
|
handleKeyDown(ev) {
|
|
if (ev.key === 'Tab') {
|
|
if (ev.shiftKey) {
|
|
// Shift + Tab
|
|
if (this.internalFocusedTabIndex === 0) {
|
|
// Allow default behavior to move focus out of component
|
|
return;
|
|
}
|
|
else {
|
|
ev.preventDefault();
|
|
this.focusPreviousTab();
|
|
}
|
|
}
|
|
else {
|
|
// Tab
|
|
if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {
|
|
// Allow default behavior to move focus out of component
|
|
return;
|
|
}
|
|
else {
|
|
ev.preventDefault();
|
|
this.focusNextTab();
|
|
}
|
|
}
|
|
}
|
|
else if (ev.key === 'Enter') {
|
|
if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {
|
|
const previouslyActiveTabIndex = this.internalActiveTabIndex;
|
|
this.internalActiveTabIndex = this.internalFocusedTabIndex;
|
|
this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex });
|
|
}
|
|
}
|
|
}
|
|
render() {
|
|
var _a;
|
|
return (index.h("div", { "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, index.h("ul", { role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
|
|
_a.map((tab, index$1) => (index.h("li", { class: this.getTabItemClass(index$1), ref: (el) => (this.tabHeaderRefs[index$1] = el), tabindex: "0", onClick: () => this.handleClick(tab, index$1), "aria-selected": index$1 === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), index.h("div", { class: "active-border" })), index.h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.internalActiveTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
|
|
}
|
|
get el() { return index.getElement(this); }
|
|
static get watchers() { return {
|
|
"activeTabIndex": ["activeTabIndexChanged"]
|
|
}; }
|
|
};
|
|
IfxTabs.style = tabsCss;
|
|
|
|
exports.ifx_tabs = IfxTabs;
|
|
|
|
//# sourceMappingURL=ifx-tabs.cjs.entry.js.map
|