@iamproperty/components 5.0.0 → 5.1.0-beta2

package/assets/js/modules/tabs.js

@@ -1,6 +1,7 @@
 // @ts-nocheck
 export const createTabsLinks = function (tabsElement) {
     const details = tabsElement.querySelectorAll(':scope > details');
+    const detailsORLinks = tabsElement.querySelectorAll(':scope > details, :scope > a');
     let summaries = tabsElement.querySelectorAll(':scope > details > summary');
     let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
     if (tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
@@ -14,34 +15,40 @@ export const createTabsLinks = function (tabsElement) {
         tabsElement.prepend(tabLinksWrapper);
     }
     // Create the tab buttons from the summary titles
-    details.forEach((detail, index) => {
-        let summary = detail.querySelector(':scope > summary');
-        let isDisabled = summary.classList.contains('disabled');
-        summary.classList.add('visually-hidden');
+    let tabindex = 0;
+    detailsORLinks.forEach((element, index) => {
         let button = document.createElement('button');
-        if (detail.hasAttribute('id')) {
-            button = document.createElement('a');
-            button.setAttribute('href', `#${detail.getAttribute('id')}`);
+        if (element.matches('details')) {
+            let summary = element.querySelector(':scope > summary');
+            let isDisabled = summary.classList.contains('disabled');
+            summary.classList.add('visually-hidden');
+            if (element.hasAttribute('id'))
+                button.setAttribute('data-id', `${element.getAttribute('id')}`);
+            if (element.hasAttribute('open')) {
+                button.setAttribute('aria-pressed', true);
+            }
+            button.innerHTML = `${summary.innerText}`;
+            button.classList.add('link');
+            button.setAttribute('data-index', tabindex);
+            element.setAttribute('tabindex', '-1');
+            if (isDisabled) {
+                button.classList.add('disabled');
+            }
+            tabindex++;
         }
-        if (detail.hasAttribute('open')) {
-            button.setAttribute('aria-pressed', true);
+        else if (element.matches('a')) {
+            button = element;
         }
-        button.innerHTML = `${summary.innerText}`;
         button.classList.add('link');
-        button.setAttribute('data-index', index);
-        button.setAttribute('tabindex', '-1');
-        if (isDisabled) {
-            button.classList.add('disabled');
-        }
         tabLinks.appendChild(button);
     });
 };
 export const setTabsEventHandlers = function (tabsElement) {
     let details = tabsElement.querySelectorAll(':scope > details');
     let summaries = tabsElement.querySelectorAll(':scope > details > summary');
-    let buttons = tabsElement.querySelectorAll(':scope .tabs__links > .link');
+    let buttons = tabsElement.querySelectorAll(':scope .tabs__links > button');
     if (tabsElement.shadowRoot)
-        buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > .link');
+        buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
     // Set the on click for the tab buttons, these will open the details box it matches too
     buttons.forEach((button) => {
         button.addEventListener("click", (e) => {
@@ -59,8 +66,6 @@ export const setTabsEventHandlers = function (tabsElement) {
                 else
                     detail.removeAttribute('open');
             });
-            if (button.hasAttribute('href'))
-                history.pushState(undefined, undefined, button.getAttribute('href'));
             // Data layer Open Event
             window.dataLayer = window.dataLayer || [];
             window.dataLayer.push({
@@ -71,13 +76,6 @@ export const setTabsEventHandlers = function (tabsElement) {
     });
     // Make sure we dont loose existing summary functionality
     summaries.forEach((summary, index) => {
-        // Maintain the focus on the summary element but visually highlight the tab button
-        summary.addEventListener("focus", (e) => {
-            buttons.forEach((button) => {
-                button.classList.remove('focus');
-            });
-            buttons[index].classList.add('focus');
-        });
         summary.addEventListener("click", (e) => {
             e.preventDefault();
             buttons[index].click();
@@ -85,12 +83,12 @@ export const setTabsEventHandlers = function (tabsElement) {
     });
 };
 export const openFirstTab = function (tabsElement) {
+    if (!tabsElement.querySelector(':scope > details'))
+        return false;
     let details = tabsElement.querySelectorAll(':scope > details');
-    let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
-    if (tabsElement.shadowRoot)
-        buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
-    if (location.hash && tabsElement.querySelector(`.tabs__links [href="${location.hash}"]`)) {
-        tabsElement.querySelector(`[href="${location.hash}"]`).setAttribute('open', true);
+    let buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
+    if (location.hash && tabsElement.shadowRoot.querySelector(`.tabs__links [data-id="${location.hash.replace('#', '')}"]`)) {
+        tabsElement.shadowRoot.querySelector(`[data-id="${location.hash.replace('#', '')}"]`).setAttribute('aria-pressed', true);
         tabsElement.querySelector(`details[id="${location.hash.replace('#', '')}"]`).setAttribute('open', true);
     }
     else if (!tabsElement.querySelector(`details[open]`)) {