@iamproperty/components 7.2.0 → 7.2.1--beta2

package/assets/ts/modules/tabs.ts

@@ -3,6 +3,7 @@ import { getSwipeDirection } from './helpers';
 export const createTabsLinks = function (tabsElement: Element): void {
   const detailsORLinks = tabsElement.querySelectorAll(':scope > details, :scope > a');
   let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
+  let tabDropdown = tabsElement.querySelector(':scope .tabs__dropdown');
 
   if (tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
     tabLinks = tabsElement.shadowRoot.querySelector('.tabs__links');
@@ -18,10 +19,19 @@ export const createTabsLinks = function (tabsElement: Element): void {
     tabsElement.prepend(tabLinksWrapper);
   }
 
+  if (!tabDropdown) {
+    tabDropdown = document.createElement('select');
+
+    tabDropdown.classList.add('tabs__dropdown');
+
+    tabsElement.prepend(tabDropdown);
+  }
+
   // Create the tab buttons from the summary titles
   let tabindex = 0;
   detailsORLinks.forEach((element) => {
     let button = document.createElement('button');
+    const dropdownOpt = document.createElement('option');
 
     if (element.matches('details')) {
       const summary = element.querySelector(':scope > summary');
@@ -38,6 +48,11 @@ export const createTabsLinks = function (tabsElement: Element): void {
       button.classList.add('link');
       button.setAttribute('data-index', tabindex);
       button.setAttribute('part', 'tab-link');
+
+      dropdownOpt.innerHTML = `${summary.innerText}`;
+      dropdownOpt.value = summary.innerText.replace(/\s+/g, '-').toLowerCase();
+      dropdownOpt.setAttribute('data-index', tabindex);
+
       element.setAttribute('tabindex', '-1');
 
       if (isDisabled) {
@@ -51,6 +66,8 @@ export const createTabsLinks = function (tabsElement: Element): void {
 
     button.classList.add('link');
     tabLinks.appendChild(button);
+
+    tabDropdown.appendChild(dropdownOpt);
   });
 };
 
@@ -59,6 +76,7 @@ export const setTabsEventHandlers = function (tabsElement: Element): void {
   const summaries = tabsElement.querySelectorAll(':scope > details > summary');
   let buttonWrapper = tabsElement.querySelector(':scope .tabs__links');
   let buttons = tabsElement.querySelectorAll(':scope .tabs__links > button');
+  const tabDropdown = tabsElement.querySelector(':scope .tabs__dropdown');
 
   let nextButton = tabsElement.querySelector(':scope .tabs__next');
 
@@ -69,7 +87,7 @@ export const setTabsEventHandlers = function (tabsElement: Element): void {
   if (tabsElement.shadowRoot) {
     buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
     buttonWrapper = tabsElement.shadowRoot.querySelector('.tabs__links');
-    nextButton = tabsElement.shadowRoot.querySelector(':scope .tabs__next');
+    nextButton = tabsElement.shadowRoot.querySelector('.tabs__next');
   }
 
   // Set the on click for the tab buttons, these will open the details box it matches too
@@ -92,11 +110,14 @@ export const setTabsEventHandlers = function (tabsElement: Element): void {
         behavior: 'smooth',
       });
 
-      details.forEach((detail, detailsIndex) => {
-        const detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
+      //Handles showing correct content
+      toggleTab(details, button);
 
-        if (detailsOpen) detail.setAttribute('open', detailsOpen);
-        else detail.removeAttribute('open');
+      // Data layer Open Event
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: 'openTab',
+        tabTitle: button.textContent,
       });
 
       if (button.matches(':last-child')) {
@@ -104,14 +125,9 @@ export const setTabsEventHandlers = function (tabsElement: Element): void {
       } else {
         nextButton?.removeAttribute('disabled');
       }
-
-      // Data layer Open Event
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({
-        event: 'openTab',
-        tabTitle: button.textContent,
-      });
     });
+
+    dropdownTabSelector(details, tabDropdown);
   });
 
   buttonWrapper.addEventListener('scrollend', () => {
@@ -151,6 +167,7 @@ export const setTabsEventHandlers = function (tabsElement: Element): void {
 
     const currentTab = buttonWrapper.querySelector('[aria-pressed="true"]');
     const nextTab = currentTab.nextSibling;
+
     if (nextTab) nextTab.click();
   });
 
@@ -192,6 +209,31 @@ export const setTabsEventHandlers = function (tabsElement: Element): void {
   }
 };
 
+export const toggleTab = function (details: Array, button: Element): boolean | void {
+  details.forEach((detail, detailsIndex) => {
+    const detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
+
+    if (detailsOpen) detail.setAttribute('open', detailsOpen);
+    else detail.removeAttribute('open');
+  });
+};
+
+export const dropdownTabSelector = function (details: Array, dropdown: Element): boolean | void {
+  dropdown.addEventListener('change', (e) => {
+    e.preventDefault();
+    const selected = dropdown.options[dropdown.selectedIndex];
+
+    toggleTab(details, selected);
+
+    // Data layer Open Event
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      event: 'openTab',
+      tabTitle: selected.innerText,
+    });
+  });
+};
+
 export const openFirstTab = function (tabsElement: Element): boolean | void {
   if (!tabsElement.querySelector(':scope > details')) return false;
 

package/assets/ts/scripts.ts

@@ -9,6 +9,8 @@ const components = [
   'accordion',
   'header',
   'table',
+  'table-basic',
+  'table-no-submit',
   'tabs',
   'card',
   'filter-card',
@@ -47,7 +49,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   extendDialogs(document.body);
   extendInputs(document.body);
-
+/*
   const prefix = 'iam';
   const options = {
     rootMargin: '50px',
@@ -62,9 +64,8 @@ document.addEventListener('DOMContentLoaded', function () {
     const callback = (entries: any): void => {
       entries.forEach((entry: any) => {
         if (entry.intersectionRatio > 0) {
-          console.log(component);
 
-          import(/* @vite-ignore */ `../js/components/${component}/${component}${componentExt}`)
+          import(`../js/components/${component}/${component}${componentExt}`)
             .then((module) => {
               if (!window.customElements.get(`${prefix}-${component}`))
                 window.customElements.define(`${prefix}-${component}`, module.default);
@@ -81,4 +82,5 @@ document.addEventListener('DOMContentLoaded', function () {
     const intObserver = new IntersectionObserver(callback, options);
     intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
   });
+  */
 });

package/assets/ts/tests/table.spec.ts

@@ -66,30 +66,6 @@ describe('addDataAttributes', () => {
   });
 });
 
-describe('createSearchDataList', () => {
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-  const form = document.createElement('form');
-  form.innerHTML += `<div><input name="search" id="search" type="text" class="form-control" data-search="Heading 1"></div>`;
-
-  tableModule.addDataAttributes(table);
-  tableModule.createSearchDataList(table, form);
-
-  test('should create a datalist populated by the defined columns in the data-search ', () => {
-    expect(form.querySelectorAll('datalist').length).toEqual(1);
-    expect(form.querySelectorAll('datalist option').length).toEqual(2);
-    expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
-    expect(form.querySelector('datalist option:nth-child(2)').value).toEqual('Different Cell 1');
-  });
-
-  test('should set the autocomplete attribute to off', () => {
-    expect(form.querySelectorAll('datalist').length).toEqual(1);
-    expect(form.querySelectorAll('datalist option').length).toEqual(2);
-    expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
-    expect(form.querySelector('input').getAttribute('autocomplete')).toEqual('off');
-  });
-});
-
 describe('sortTable', () => {
   const table = document.createElement('table');
   table.innerHTML = basicTable;
@@ -107,20 +83,6 @@ describe('sortTable', () => {
   });
 });
 
-describe('filterTable', () => {
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-  const form = document.createElement('form');
-  form.innerHTML += `<div><input type="text" name="filter" id="filter" data-filter="Heading 2" value="High" /></div>`;
-
-  tableModule.addDataAttributes(table);
-  tableModule.filterTable(table, form, document.createElement('div'));
-
-  test('should filter the table to only show high values', () => {
-    expect(table.querySelectorAll('tbody tr.filtered--matched').length).toEqual(1);
-  });
-});
-
 describe('formatCell', () => {
   test('should format the text correctly', () => {
     expect(tableModule.formatCell('date', '2023-05-15 12:10:45.000000')).toEqual('15 May 23');