| 1 | customElements.define('eap-tab-switcher', class extends HTMLElement {}); |
| 2 | customElements.define('eap-tab-list', class extends HTMLElement { |
| 3 | connectedCallback() { |
| 4 | this.buttonTabs = this.querySelectorAll('button'); |
| 5 | for(let button of this.buttonTabs) { |
| 6 | button.addEventListener('click', clickEvent => { |
| 7 | const activeButton = this.querySelector('button[aria-selected="true"]'); |
| 8 | const activePanelId = activeButton.dataset.panel; |
| 9 | const panelToDisplayId = button.dataset.panel; |
| 10 | const panelToDisplay = document.querySelector(`#${panelToDisplayId}`); |
| 11 | const activePanel = document.querySelector(`#${activePanelId}`); |
| 12 | if(activeButton.id !== button.id) { |
| 13 | button.setAttribute('aria-selected', true); |
| 14 | activeButton.setAttribute('aria-selected', false); |
| 15 | panelToDisplay.classList.add('block'); |
| 16 | panelToDisplay.classList.remove('hidden'); |
| 17 | activePanel.classList.remove('block'); |
| 18 | activePanel.classList.add('hidden'); |
| 19 | } |
| 20 | }); |
| 21 | } |
| 22 | } |
| 23 | }); |
| 24 | customElements.define('eap-tab-panel-list', class extends HTMLElement {}); |
| 25 | customElements.define('eap-tab-panel', class extends HTMLElement { }); |