/* Originally written by Brian Kardell */
(function() {
class PanelSetTwo extends HTMLElement {
static get observedAttributes() { return [ "display" ]; }
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue == newValue) {
console.log('wat')
}
requestAnimationFrame(() => {
if (name === "display") {
if (newValue === "tabs") {
this.tabSources
.forEach(tabSource => tabSource.slot = tabSource.id);
} else {
this.tabSources
.forEach(tabSource => tabSource.setAttribute("slot", ""));
}
// This is bad side effect magic that tries to clean up
// orphans found at the end of balancing, triggered by
// slot change
this.shadowRoot.querySelectorAll('slot').forEach(slotEl => {
if (slotEl.assignedElements().length === 0) {
if (!this.querySelector(`#${slotEl.name}`)) {
slotEl.parentElement.remove()
}
}
})
}
});
}
get tabSources() {
return Array.from(this.querySelectorAll(":scope>[x-title]"));
}
get contentSources() {
return Array.from(this.querySelectorAll(":scope>[x-content]"));
}
set activeTab(tabSource) {
this.tabSources.forEach((source, i) => {
let relatedContent = this.querySelector(`#${source.getAttribute("aria-controls")}`);
if (source === tabSource) {
relatedContent.style.display = "block";
this.activeTabIndex = i;
source.tabIndex = 0;
if (this.matches(':focus-within')) {
requestAnimationFrame(() => source.focus());
}
} else {
source.tabIndex = -1;
relatedContent.style.display = "none";
}
});
this.shadowRoot.querySelectorAll('x-tab').forEach((el, i) => {
if (i===this.activeTabIndex) {
el.setAttribute('active','');
} else {
el.removeAttribute('active');
}
});
}
selectNextTab() {
let tabSources = this.tabSources;
this.activeTab =
this.activeTabIndex == tabSources.length - 1
? tabSources[0]
: tabSources[this.activeTabIndex + 1];
}
selectPreviousTab() {
let tabSources = this.tabSources;
this.activeTab =
this.activeTabIndex == 0
? tabSources[tabSources.length - 1]
: tabSources[this.activeTabIndex - 1];
}
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `