@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/modules/tabs.ts

@@ -1,23 +1,22 @@
 // @ts-nocheck
-import { getSwipeDirection } from './helpers'
-
-export const createTabsLinks = function(tabsElement: Element) {
+import { getSwipeDirection } from './helpers';
 
+export const createTabsLinks = function (tabsElement: Element) {
   const details = tabsElement.querySelectorAll(':scope > details');
   const detailsORLinks = tabsElement.querySelectorAll(':scope > details, :scope > a');
-  let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+  const summaries = tabsElement.querySelectorAll(':scope > details > summary');
   let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
 
-  if(tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
+  if (tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
     tabLinks = tabsElement.shadowRoot.querySelector('.tabs__links');
 
-  if(!tabLinks){
+  if (!tabLinks) {
     tabLinks = document.createElement('div');
     tabLinks.classList.add('tabs__links');
 
-    let tabLinksWrapper = document.createElement('div');
+    const tabLinksWrapper = document.createElement('div');
     tabLinksWrapper.classList.add('tabs__links__wrapper');
-    
+
     tabLinksWrapper.prepend(tabLinks);
     tabsElement.prepend(tabLinksWrapper);
   }
@@ -25,236 +24,212 @@ export const createTabsLinks = function(tabsElement: Element) {
   // Create the tab buttons from the summary titles
   let tabindex = 0;
   detailsORLinks.forEach((element, index) => {
-  
     let button = document.createElement('button');
-    
-    if(element.matches('details')){
 
-      let summary = element.querySelector(':scope > summary');
-      let isDisabled = summary.classList.contains('disabled')
+    if (element.matches('details')) {
+      const summary = element.querySelector(':scope > summary');
+      const isDisabled = summary.classList.contains('disabled');
 
       summary.classList.add('visually-hidden');
 
-      if (element.hasAttribute('id'))
-        button.setAttribute('data-id',`${element.getAttribute('id')}`);
+      if (element.hasAttribute('id')) button.setAttribute('data-id', `${element.getAttribute('id')}`);
 
       if (element.hasAttribute('open')) {
-        button.setAttribute('aria-pressed',true);
+        button.setAttribute('aria-pressed', true);
       }
       button.innerHTML = `${summary.innerText}`;
       button.classList.add('link');
-      button.setAttribute('data-index',tabindex);
-      element.setAttribute('tabindex','-1');
+      button.setAttribute('data-index', tabindex);
+      element.setAttribute('tabindex', '-1');
 
       if (isDisabled) {
-        button.classList.add('disabled')
+        button.classList.add('disabled');
       }
 
       tabindex++;
-    }
-    else if(element.matches('a')){
-
-      button = element;      
+    } else if (element.matches('a')) {
+      button = element;
     }
 
     button.classList.add('link');
     tabLinks.appendChild(button);
   });
+};
 
-}
-
-export const setTabsEventHandlers = function(tabsElement: Element){
-
-  let details = tabsElement.querySelectorAll(':scope > details');
-  let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+export const setTabsEventHandlers = function (tabsElement: Element) {
+  const details = tabsElement.querySelectorAll(':scope > details');
+  const summaries = tabsElement.querySelectorAll(':scope > details > summary');
   let buttonWrapper = tabsElement.querySelector(':scope .tabs__links');
   let buttons = tabsElement.querySelectorAll(':scope .tabs__links > button');
 
   let nextButton = tabsElement.querySelector(':scope .tabs__next');
 
   var scrollTimeout;
-  let isScrolled = false;
-  let isClicked = false;
+  window.isClicked = false;
+  window.isScrolling = false;
 
-  if(tabsElement.shadowRoot){
+  if (tabsElement.shadowRoot) {
     buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
     buttonWrapper = tabsElement.shadowRoot.querySelector('.tabs__links');
     nextButton = tabsElement.shadowRoot.querySelector(':scope .tabs__next');
   }
 
-  buttonWrapper.addEventListener('scroll', function(e){
-
-    if(isClicked){
-      isClicked = false;
-      return false;
-    }
-
-    clearTimeout(scrollTimeout);
-    let buttonToClick = buttons[0];
-
-    scrollTimeout = setTimeout(function(){
-      
-      let closestOffset = Math.abs(buttonToClick.getBoundingClientRect().left);
-
-      buttons.forEach((button) => {
-
-        if(Math.abs(button.getBoundingClientRect().left) < closestOffset){
-          closestOffset = Math.abs(button.getBoundingClientRect().left);
-          buttonToClick = button;
-        }
-      });
-
-      isScrolled = true;
-      buttonToClick.click();
-      buttonToClick.focus();
-      
-    }, 100);
-
-  }, false);
-
-
   // Set the on click for the tab buttons, these will open the details box it matches too
   buttons.forEach((button) => {
-
-    button.addEventListener("click", (e) => {
+    button.addEventListener('click', (e) => {
       e.preventDefault();
 
-      isClicked = true;
+      if (window.isScrolling) return;
 
-      if (button.classList.contains('disabled'))
-        return false
+      if (!window.triggered) window.isClicked = true;
+
+      if (button.classList.contains('disabled')) return false;
 
       buttons.forEach((buttonLoopItem) => {
-        let buttonPressed = buttonLoopItem == button ? true : false;
+        const buttonPressed = buttonLoopItem == button ? true : false;
         buttonLoopItem.setAttribute('aria-pressed', buttonPressed);
       });
 
-      if(!isScrolled){
-          
-        buttonWrapper.scroll({
-          top: 0,
-          left: button.offsetLeft, 
-          behavior: 'smooth'
-        });
-      }
-      isScrolled = false;
+      buttonWrapper.scroll({
+        top: 0,
+        left: button.offsetLeft,
+        behavior: 'smooth',
+      });
 
       details.forEach((detail, detailsIndex) => {
-        let detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
+        const detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
 
-        if(detailsOpen)
-          detail.setAttribute('open', detailsOpen);
-        else
-          detail.removeAttribute('open')
+        if (detailsOpen) detail.setAttribute('open', detailsOpen);
+        else detail.removeAttribute('open');
       });
-      
-      if(button.matches(':last-child')){
-        nextButton.setAttribute('disabled','disabled');
-      }
-      else {
+
+      if (button.matches(':last-child')) {
+        nextButton.setAttribute('disabled', 'disabled');
+      } else {
         nextButton.removeAttribute('disabled');
       }
 
       // Data layer Open Event
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
-        "event": "openTab",
-        "tabTitle": button.textContent
+        event: 'openTab',
+        tabTitle: button.textContent,
       });
     });
+  });
 
+  buttonWrapper.addEventListener('scroll', (event) => {
+    if (window.isScrolling) return;
+
+    clearTimeout(scrollTimeout);
+    window.isScrolling = true;
+  });
+
+  buttonWrapper.addEventListener('scrollend', (event) => {
+    window.isScrolling = false;
+    clearTimeout(scrollTimeout);
+
+    scrollTimeout = setTimeout(function () {
+      if (window.isClicked) {
+        window.isClicked = false;
+        return false;
+      }
+
+      let buttonToClick = buttons[0];
+      let closestOffset = Math.abs(buttonToClick.getBoundingClientRect().left);
+
+      buttons.forEach((button) => {
+        if (Math.abs(button.getBoundingClientRect().left) < closestOffset) {
+          closestOffset = Math.abs(button.getBoundingClientRect().left);
+          buttonToClick = button;
+        }
+      });
+
+      window.triggered = true;
+      buttonToClick.focus();
+      buttonToClick.click();
+      window.triggered = false;
+    }, 200);
   });
-  
-  // Make sure we dont loose existing summary functionality
-  summaries.forEach((summary, index) => { 
-    summary.addEventListener("click", (e) => {
 
+  // Make sure we dont loose existing summary functionality
+  summaries.forEach((summary, index) => {
+    summary.addEventListener('click', (e) => {
       e.preventDefault();
       buttons[index].click();
     });
   });
 
-  nextButton.addEventListener("click", (e) => {
+  nextButton.addEventListener('click', (e) => {
     e.preventDefault();
 
-    let currentTab = buttonWrapper.querySelector('[aria-pressed="true"]');
-    let nextTab = currentTab.nextSibling;
-    if(nextTab)
-      nextTab.click();
+    const currentTab = buttonWrapper.querySelector('[aria-pressed="true"]');
+    const nextTab = currentTab.nextSibling;
+    if (nextTab) nextTab.click();
   });
 
-
-  if(tabsElement.classList.contains('tabs--guided')){
-      
-    var touchstartX = 0;
-    var touchstartY = 0;
-    var touchendX = 0;
-    var touchendY = 0;
+  if (tabsElement.classList.contains('tabs--guided')) {
+    let touchstartX = 0;
+    let touchstartY = 0;
+    let touchendX = 0;
+    let touchendY = 0;
 
     details.forEach((detail) => {
-
-      detail.addEventListener("touchstart", (event) => {
+      detail.addEventListener('touchstart', (event) => {
         event.stopPropagation();
 
         touchstartX = event.changedTouches[0].screenX;
         touchstartY = event.changedTouches[0].screenY;
       });
 
-      detail.addEventListener("touchend", (event) => {
-
+      detail.addEventListener('touchend', (event) => {
         event.stopPropagation();
         touchendX = event.changedTouches[0].screenX;
         touchendY = event.changedTouches[0].screenY;
-        let direction = getSwipeDirection(touchstartX,touchstartY,touchendX,touchendY);
-        let currentTab = buttonWrapper.querySelector('[aria-pressed="true"]');
+        const direction = getSwipeDirection(touchstartX, touchstartY, touchendX, touchendY);
+        const currentTab = buttonWrapper.querySelector('[aria-pressed="true"]');
+        const nextTab = currentTab.nextSibling;
+        const prevTab = currentTab.previousSibling;
 
         switch (direction) {
           case 'left':
-            
-            let nextTab = currentTab.nextSibling;
-            if(nextTab)
-              nextTab.click();
-          
+            if (nextTab) nextTab.click();
+
             break;
           case 'right':
-              
-            let prevTab = currentTab.previousSibling;
-            if(prevTab)
-              prevTab.click();
+            if (prevTab) prevTab.click();
 
-          break;
+            break;
         }
       });
     });
   }
-}
-
-export const openFirstTab = function(tabsElement: Element){
-
-  if(!tabsElement.querySelector(':scope > details'))
-    return false;
-
-  let details = tabsElement.querySelectorAll(':scope > details');
-  let buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
+};
 
+export const openFirstTab = function (tabsElement: Element): boolean | void {
+  if (!tabsElement.querySelector(':scope > details')) return false;
 
-  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]`)) {
-
-    details[0].setAttribute('open',true);
-    buttons[0].setAttribute('aria-pressed',true);
+  const details = tabsElement.querySelectorAll(':scope > details');
+  const 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]`)) {
+    details[0].setAttribute('open', true);
+    buttons[0].setAttribute('aria-pressed', true);
   }
+};
 
-}
-
-const tabs = function(tabsElement: Element){
+const tabs = function (tabsElement: Element): void {
   createTabsLinks(tabsElement);
   setTabsEventHandlers(tabsElement);
   openFirstTab(tabsElement);
-}
+};
 
-export default tabs
+export default tabs;

package/assets/ts/modules/testimonial.ts

@@ -1,84 +1,79 @@
-// @ts-nocheck
-function testimonial(testimonialElement) {
-
-  var scrollTimeout;
+function testimonial(testimonialElement): boolean | void {
+  let scrollTimeout;
   const imagesCarousel = testimonialElement.querySelector('.testimonial__images');
   const itemCount = imagesCarousel.querySelectorAll('img').length;
 
   // If we only have 1 item lets not bother doing anything else
-  if(itemCount == 1){
+  if (itemCount == 1) {
     return false;
   }
 
-  testimonialElement.classList.add('testimonial--multi')
+  testimonialElement.classList.add('testimonial--multi');
 
   // Set where the buttons go to
-  const setButtons = function(scrollTo){
-
+  const setButtons = function (scrollTo): void {
     const nextButton = testimonialElement.querySelector('.btn-next');
     const prevButton = testimonialElement.querySelector('.btn-prev');
 
-    nextButton.setAttribute('data-go',scrollTo+1);
-    prevButton.setAttribute('data-go',scrollTo-1);
-    nextButton.removeAttribute('disabled')
-    prevButton.removeAttribute('disabled')
+    nextButton.setAttribute('data-go', scrollTo + 1);
+    prevButton.setAttribute('data-go', scrollTo - 1);
+    nextButton.removeAttribute('disabled');
+    prevButton.removeAttribute('disabled');
 
-    if(scrollTo == 1)
-      prevButton.setAttribute('disabled',true);
-    else if(scrollTo == itemCount)
-      nextButton.setAttribute('disabled',true);
-  }
+    if (scrollTo == 1) prevButton.setAttribute('disabled', true);
+    else if (scrollTo == itemCount) nextButton.setAttribute('disabled', true);
+  };
 
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
-  imagesCarousel.addEventListener('scroll', function(e){
-    clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function(){ 
-        
-      let scrollWidth = imagesCarousel.scrollWidth;
-      let scrollHeight = imagesCarousel.scrollHeight;
-      let scrollLeft = imagesCarousel.scrollLeft;
-      let scrollDown = imagesCarousel.scrollTop;
-      let scrollTo = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-
-      // Change in scroll direction
-      if(scrollLeft == 0 && scrollDown != 0)
-        scrollTo = Math.round((scrollDown / scrollHeight) * itemCount) + 1;
-
-      testimonialElement.setAttribute('data-show',scrollTo)
-      setButtons(scrollTo);
-    }, 300); 
-
-  }, false);
+  imagesCarousel.addEventListener(
+    'scroll',
+    function () {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(function () {
+        const scrollWidth = imagesCarousel.scrollWidth;
+        const scrollHeight = imagesCarousel.scrollHeight;
+        const scrollLeft = imagesCarousel.scrollLeft;
+        const scrollDown = imagesCarousel.scrollTop;
+        let scrollTo = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
+
+        // Change in scroll direction
+        if (scrollLeft == 0 && scrollDown != 0) scrollTo = Math.round((scrollDown / scrollHeight) * itemCount) + 1;
+
+        testimonialElement.setAttribute('data-show', scrollTo);
+        setButtons(scrollTo);
+      }, 300);
+    },
+    false
+  );
 
   // when the buttons are used we need to make sure the carousel scrolls to the correct place
-  testimonialElement.addEventListener('click', function(e){
-
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-
-      if (target.matches('[data-go]')) {
-        
-        let scrollTo = parseInt(target.getAttribute('data-go'));
-        let scrollDown = 0;
-        let scrollLeft = 0
-        let scrollWidth = imagesCarousel.scrollWidth;
-        let scrollHeight = imagesCarousel.scrollHeight;
-        
-        if(scrollWidth > scrollHeight)
-          scrollLeft = Math.floor(scrollWidth * ((scrollTo-1) / itemCount))
-        else 
-          scrollDown = Math.floor(scrollHeight * ((scrollTo-1) / itemCount))
-        
-        // Trigger the scroll
-        imagesCarousel.scroll({
-          top: scrollDown,
-          left: scrollLeft, 
-          behavior: 'smooth'
-        });
-
-        break;
+  testimonialElement.addEventListener(
+    'click',
+    function (e) {
+      for (let target = e.target; target && target != this; target = target.parentNode) {
+        if (target.matches('[data-go]')) {
+          const scrollTo = parseInt(target.getAttribute('data-go'));
+          let scrollDown = 0;
+          let scrollLeft = 0;
+          const scrollWidth = imagesCarousel.scrollWidth;
+          const scrollHeight = imagesCarousel.scrollHeight;
+
+          if (scrollWidth > scrollHeight) scrollLeft = Math.floor(scrollWidth * ((scrollTo - 1) / itemCount));
+          else scrollDown = Math.floor(scrollHeight * ((scrollTo - 1) / itemCount));
+
+          // Trigger the scroll
+          imagesCarousel.scroll({
+            top: scrollDown,
+            left: scrollLeft,
+            behavior: 'smooth',
+          });
+
+          break;
+        }
       }
-    }
-  }, false);
+    },
+    false
+  );
 }
 
-export default testimonial
+export default testimonial;

package/assets/ts/scripts.ts

@@ -1,22 +1,20 @@
 // @ts-nocheck
 // Modules
-import * as helpers from '../js/modules/helpers'
-import extendDialogs from '../js/modules/dialogs'
-import createDataLayer from '../js/modules/data-layer'
+import * as helpers from '../js/modules/helpers';
+import extendDialogs from '../js/modules/dialogs';
+import createDataLayer from '../js/modules/data-layer';
 import extendInputs from '../js/modules/inputs';
-import createDynamicEvents from '../js/modules/dynamicEvents'
+import createDynamicEvents from '../js/modules/dynamicEvents';
 
 // Attach classes to dom elements
-document.addEventListener("DOMContentLoaded", function() {
-
+document.addEventListener('DOMContentLoaded', function () {
   createDataLayer();
   createDynamicEvents();
-  
+
   // Global stuff
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
-  
+
   extendDialogs(document.body);
   extendInputs(document.body);
-
 });

package/assets/ts/tests/chart.spec.ts

@@ -1,18 +1,15 @@
 // @ts-nocheck
-import '@testing-library/jest-dom'
-import {getChartData} from "../modules/chart.module";
+import '@testing-library/jest-dom';
+import { getChartData } from '../modules/chart.module';
 import puppeteer from 'puppeteer';
-import "expect-puppeteer";
+import 'expect-puppeteer';
 
-
-import iamBarChart from "../components/barchart/barchart.component";
+import iamBarChart from '../components/barchart/barchart.component';
 
 describe('The bar chart component', () => {
+  if (!window.customElements.get(`iam-barchart`)) window.customElements.define(`iam-barchart`, iamBarChart);
 
-  if (!window.customElements.get(`iam-barchart`))
-    window.customElements.define(`iam-barchart`, iamBarChart);
-
-document.body.innerHTML = `
+  document.body.innerHTML = `
 <iam-barchart>
 <table>
   <thead>
@@ -39,39 +36,33 @@ document.body.innerHTML = `
 </iam-barchart>`;
 
   test('should create the min attribute as 0', () => {
-
     let component = document.querySelector('iam-barchart');
-    let {min} = getChartData(component);
+    let { min } = getChartData(component);
 
     expect(min).toEqual(0);
   });
 
   test('should equal the largest single value', () => {
-
     let component = document.querySelector('iam-barchart');
-    let {max} = getChartData(component);
+    let { max } = getChartData(component);
 
     expect(max).toEqual(300);
   });
 
   test('should equal the largest single value', () => {
-
     let component = document.querySelector('iam-barchart');
-    let {max} = getChartData(component);
+    let { max } = getChartData(component);
 
     expect(max).toEqual(300);
   });
 
   test('should have the class of .chart--fit-content added as there is less than 10 bars', () => {
-
     let component = document.querySelector('iam-barchart');
-    expect(component.classList).toContain("chart--fit-content");
+    expect(component.classList).toContain('chart--fit-content');
   });
 
   test('should have the class of .chart--no-scale added as there is less than 5 bars', () => {
-
     let component = document.querySelector('iam-barchart');
-    expect(component.classList).toContain("chart--no-scale");
+    expect(component.classList).toContain('chart--no-scale');
   });
-
 });

package/assets/ts/tests/data-layer.spec.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import '@testing-library/jest-dom'
-import createDataLayer from "../modules/data-layer";
+import '@testing-library/jest-dom';
+import createDataLayer from '../modules/data-layer';
 
 describe('createDataLayer', () => {
   // Mocking the window object for testing
@@ -62,8 +62,7 @@ describe('createDataLayer', () => {
         detailsTitle: 'Summary Text',
       },
     ]);
-
   });
 
   // More test cases for other scenarios can be added here...
-});
+});

package/assets/ts/tests/filterlist.spec.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck
-import '@testing-library/jest-dom'
-import { filterTheList } from "../modules/filterlist";
-
+import '@testing-library/jest-dom';
+import { filterTheList } from '../modules/filterlist';
 
 const listHTML = `
 <li class="lead text-primary pb-1">Olivia Anderson</li>
@@ -15,14 +14,12 @@ const listHTML = `
 `;
 
 describe('addDataAttributes', () => {
-
   let list = document.createElement('div');
   list.innerHTML = listHTML;
 
-  filterTheList(list, "Lucas");
+  filterTheList(list, 'Lucas');
 
   test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
-
     expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
     expect(list.querySelector('li:not(.d-none)').textContent).toEqual('Lucas Myers');
   });