@iamproperty/components 5.0.0 → 5.1.0-beta10

package/assets/ts/modules/carousel.ts

@@ -1,33 +1,32 @@
 // @ts-nocheck
-function carousel(carouselElement) {
+function carousel(carouselElement, row) {
 
   var scrollTimeout;
 
   let carouselInner = carouselElement.querySelector('.carousel__inner');
-  let itemCount = carouselElement.querySelectorAll('.carousel__item').length;
-  let cols = carouselElement.getAttribute('data-cols');
-  let smCols = carouselElement.getAttribute('data-sm-cols');
-  let mdCols = carouselElement.getAttribute('data-md-cols');
-
-  carouselElement.querySelector('.carousel__controls a').setAttribute('aria-current', true);
+  let carouselControls = carouselElement.querySelector('.carousel__controls');
+  let itemCount = row.querySelectorAll('.col').length;
 
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
   carouselInner.addEventListener('scroll', function(e){
     clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function(){ 
+    scrollTimeout = setTimeout(function(){
 
       let scrollArea = carouselInner.clientWidth;
       let scrollWidth = carouselInner.scrollWidth;
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-      let lastItemOffset = carouselElement.querySelector('.carousel__item:last-child').offsetLeft;
+      let lastItemOffset = row.querySelector('.col:last-child').offsetLeft + 50;
+
+      if(carouselInner.scrollLeft + scrollArea >= lastItemOffset)
+        targetSlide = itemCount;
 
-      Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-        link.removeAttribute('aria-current');
+      Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
+        button.removeAttribute('aria-current');
       });
 
       carouselElement.querySelector('.control-'+targetSlide).setAttribute('aria-current', true);
-      
+
       // Disable the previous button
       if(targetSlide == 1)
         carouselElement.querySelector('.btn-prev').setAttribute('disabled','disabled');
@@ -35,29 +34,29 @@ function carousel(carouselElement) {
         carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
 
       // Disable the next button if the last item is in view
-      if(carouselInner.scrollLeft + scrollArea > lastItemOffset)
+      if(targetSlide == itemCount)
         carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
       else
         carouselElement.querySelector('.btn-next').removeAttribute('disabled');
-
+      
     }, 100); 
 
   }, false);
 
   // when the buttons are used we need to make sure the carousel scrolls to the correct place
-  carouselElement.addEventListener('click', function(e){
+  carouselControls.addEventListener('click', function(e){
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.carousel__controls a')) {
+      if (typeof target.matches == "function" && target.matches('button')) {
         
         e.preventDefault();
 
-        Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-          link.removeAttribute('aria-current');
+        Array.from(carouselControls.querySelectorAll('button')).forEach((button, index) => {
+          button.removeAttribute('aria-current');
         });
         target.setAttribute('aria-current', true);
-
-        const el = document.querySelector(target.getAttribute('href'));
+        
+        const el = row.querySelector(`*:nth-child(${target.getAttribute('data-slide')})`);
 
         carouselInner.scroll({
           top: 0,
@@ -69,11 +68,11 @@ function carousel(carouselElement) {
       }
     }
   }, false);
-
+  
   carouselElement.addEventListener('click', function(e){
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.btn-next, .btn-prev')) {
+      if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {
         
         e.preventDefault();
         let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
@@ -87,17 +86,6 @@ function carousel(carouselElement) {
       }
     }
   }, false);
-
-
-  // Add responsive hide button classes
-  if(itemCount == 1)
-    carouselElement.classList.add('hide-btns');
-
-  if(smCols >= itemCount)
-    carouselElement.classList.add('hide-sm-btns');
-
-  if(mdCols >= itemCount)
-    carouselElement.classList.add('hide-md-btns');
 }
 
 export default carousel

package/assets/ts/modules/dynamicEvents.ts

@@ -77,43 +77,63 @@ const runEvent = (element,event,eventType) => {
   switch (event[eventType]){
     case "hide":
 
-      let hideElement =  document.querySelector(event['target'])
-      hideElement.classList.add('js-hide');
-
-      Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
-        
-          input.removeAttribute('required');
-      });
+      if(document.querySelector(event['target'])){
+          
+        let hideElement =  document.querySelector(event['target']);
+        hideElement.classList.add('js-hide');
+
+        Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+          
+            input.removeAttribute('required');
+        });
+      }
       break;
     case "show":
 
-      let showElement =  document.querySelector(event['target'])
-      showElement.classList.remove('js-hide');
-
-      Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
-        
-        if(!input.closest('.js-hide'))
-          input.setAttribute('required','true');
-      });
+      if(document.querySelector(event['target'])){
+            
+        let showElement =  document.querySelector(event['target']);
+        showElement.classList.remove('js-hide');
+
+        Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+          
+          if(!input.closest('.js-hide'))
+            input.setAttribute('required','true');
+        });
+      }
+      break;
+    case "populate-form":
+      populateForm(element,event);
+      break;
+    case "dispatchEvent":
+      let theEvent = new Event(event['value']);
+      document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
       break;
-      case "populate-form":
-        populateForm(element,event);
-        break;
-      case "dispatchEvent":
-        let theEvent = new Event(event['value']);
-        document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
-        break;
     case "setAttribute":
-      document.querySelector(`${event['target']}`).setAttribute(event['attribute'],event['value']);
+
+      Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
+        element.setAttribute(event['attribute'],event['value']);
+      });
       break;
     case "removeAttribute":
-      document.querySelector(`${event['target']}`).removeAttribute(event['attribute']);
+      Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
+        element.removeAttribute(event['attribute']);
+      });
       break;
     case "updateValue":
       document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : "";
       
       let changeEvent = new Event('change');
       document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);
+      break;
+    case "submitForm":
+      document.querySelector(`${event['target']}`).submit();
+      break;
+    case "openLink":
+
+      if(document.querySelector(`${event['target']}`).value)
+        window.location.href = document.querySelector(`${event['target']}`).value;
+
       break;
     default:
       break;

package/assets/ts/modules/helpers.ts

@@ -47,7 +47,7 @@ export const addGlobalEvents = (body) => {
 
   addEventListener("popstate", (event) => {
 
-    if(event && event.state.type && event.state.type == "pagination"){
+    if(event && event.state && event.state.type && event.state.type == "pagination"){
       let form = document.querySelector(`#${event.state.form}`);
       let pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
       
@@ -97,4 +97,10 @@ export const safeID = function(str){
   str = str.replace(/\W/g,'');
 
   return str;
-}
+}
+
+// Used to get values from nested json objects
+export const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
+
+
+export const isTraversable = o => Array.isArray(o) || o !== null && ['function', 'object'].includes(typeof o);

package/assets/ts/modules/inputs.ts

@@ -1,14 +1,71 @@
 // @ts-nocheck
 const extendInputs = (body) => {
 
-  document.addEventListener("load", function() {
-
+  function loadInput(){
     // maxlength counter init
-    Array.from(document.querySelectorAll('input')).forEach((input,index) => {
+    Array.from(document.querySelectorAll('input[maxlength]')).forEach((input,index) => {
       let wrapper = input.parentElement;
       setMaxlengthVars(input,wrapper);
     });
-  });
+
+    // Date restrictions 
+    if(document.querySelector('input[type="date"]')){
+
+      const today = new Date();
+      
+      function formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      }
+
+      Array.from(document.querySelectorAll('input[type="date"]')).forEach((input,index) => {
+        
+        let startDate = today;
+
+        if(input.hasAttribute('data-start')){
+
+          startDate.setDate(startDate.getDate() + parseInt(input.getAttribute('data-start')));
+          input.setAttribute('min', formatDate(startDate));
+        }
+
+        if(input.hasAttribute('data-period')){
+
+          let timePeriod = parseInt(input.getAttribute('data-period'));
+
+          let endDate = new Date();
+          endDate.setDate(startDate.getDate() + timePeriod);
+
+          input.setAttribute('max', formatDate(endDate));
+        }
+
+        if(input.hasAttribute('data-allowed-days')){
+
+          let allowedDays = JSON.parse(`[${input.getAttribute('data-allowed-days')}]`);
+          
+          input.addEventListener('input', function(e){
+            var day = new Date(this.value).getUTCDay();
+
+            if(allowedDays.includes(day))
+              input.setCustomValidity("");
+            else
+              input.setCustomValidity("That day of the week is not allowed");
+          });
+        }
+      });
+    }
+  }
+
+  if(document.readyState === 'complete') {
+    loadInput();
+  }
+
+  document.onreadystatechange = () => {
+    if (document.readyState === "complete") {
+      loadInput();
+    }
+  };
 
   body.addEventListener('input', (event) => {
     if (event && event.target instanceof HTMLElement && event.target.closest('input,textarea,select')){

package/assets/ts/modules/table.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { zeroPad, isNumeric, ucfirst } from "./helpers";
+import { zeroPad, isNumeric, ucfirst, resolvePath } from "./helpers";
 
 // Basic functionality needed
 export const addDataAttributes = (table) => {
@@ -61,20 +61,20 @@ export const getLargestLastColWidth = (table) => {
 
 export const createMobileButton = (table, wrapper) => {
 
-
-  if(wrapper.classList.contains('.table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
+  if(wrapper.classList.contains('table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
     return false;
 
   if(table.querySelectorAll('thead tr th').length < 4 && !wrapper.hasAttribute('data-expandable'))
     return false;
 
-
+  //If the expand column already exists we don't need to add a new one.
   Array.from(table.querySelectorAll('thead tr')).forEach((row,index) => {
-        
-    row.insertAdjacentHTML(
-      'afterbegin',
-      `<th class="th--fixed expand-button-heading"></th>`
-    );
+    if(!table.querySelectorAll('thead tr th.expand-button-heading').length){
+      row.insertAdjacentHTML(
+        'afterbegin',
+        `<th class="th--fixed expand-button-heading"></th>`
+      );    
+    }
   });
 
   Array.from(table.querySelectorAll('tbody tr')).forEach((row,index) => {
@@ -690,7 +690,7 @@ export const populateDataQueries = (table,form,wrapper) => {
   dataQueries.forEach((queryElement, index) => {
 
     let query = queryElement.getAttribute('data-query');
-    let numberOfMatchedRows: 0;
+    let numberOfMatchedRows = 0;
 
     if(query == 'total'){
       if(wrapper.hasAttribute('data-total'))
@@ -903,11 +903,9 @@ const filterFilters = function(form){
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
-  const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
-
   let formData = new FormData(form);
   let queryString = new URLSearchParams(formData).toString();
-  let columns = table.querySelectorAll('thead tr th');
+  let columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');
   let tbody = table.querySelector('tbody');
   let ajaxURL = form.getAttribute('data-ajax');
 
@@ -985,7 +983,6 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
           var table_row = document.createElement('tr');
 
           columns.forEach((col, index) => {
-
             let cellOutput = '';
             var table_cell  = document.createElement('td');
             // Add some data to help with the mobile layout design

package/assets/ts/modules/tabs.ts

@@ -2,6 +2,7 @@
 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');
   let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
 
@@ -20,33 +21,41 @@ export const createTabsLinks = function(tabsElement: Element) {
   }
 
   // Create the tab buttons from the summary titles
-  details.forEach((detail, index) => {
+  let tabindex = 0;
+  detailsORLinks.forEach((element, index) => {
+  
+    let button = document.createElement('button');
     
-    let summary = detail.querySelector(':scope > summary');
-    let isDisabled = summary.classList.contains('disabled')
+    if(element.matches('details')){
 
-    summary.classList.add('visually-hidden');
-    
-    let button = document.createElement('button');
+      let summary = element.querySelector(':scope > summary');
+      let isDisabled = summary.classList.contains('disabled')
 
-    if (detail.hasAttribute('id')) {
-      button = document.createElement('a');
-      button.setAttribute('href',`#${detail.getAttribute('id')}`);
-    }
+      summary.classList.add('visually-hidden');
+
+      if (element.hasAttribute('id'))
+        button.setAttribute('data-id',`${element.getAttribute('id')}`);
 
-    if (detail.hasAttribute('open')) {
-      button.setAttribute('aria-pressed',true);
+      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++;
     }
-    
-    button.innerHTML = `${summary.innerText}`;
-    button.classList.add('link');
-    button.setAttribute('data-index',index);
-    button.setAttribute('tabindex','-1');
+    else if(element.matches('a')){
 
-    if (isDisabled) {
-      button.classList.add('disabled')
+      button = element;      
     }
 
+    button.classList.add('link');
     tabLinks.appendChild(button);
   });
 
@@ -56,10 +65,10 @@ export const setTabsEventHandlers = function(tabsElement: Element){
 
   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) => {
@@ -83,9 +92,6 @@ export const setTabsEventHandlers = function(tabsElement: Element){
         else
           detail.removeAttribute('open')
       });
-
-      if(button.hasAttribute('href'))
-        history.pushState(undefined, undefined, button.getAttribute('href'));
       
       // Data layer Open Event
       window.dataLayer = window.dataLayer || [];
@@ -99,18 +105,8 @@ export const setTabsEventHandlers = function(tabsElement: Element){
   
   // 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();
     });
@@ -120,15 +116,16 @@ export const setTabsEventHandlers = function(tabsElement: Element){
 
 export const openFirstTab = function(tabsElement: Element){
 
+  if(!tabsElement.querySelector(':scope > details'))
+    return false;
+
   let details = tabsElement.querySelectorAll(':scope > details');
-  let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+  let buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
 
-  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);
+  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]`)) {

package/assets/ts/tests/slider.spec.ts

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import * as tableModule from "../modules/table";
+import puppeteer from 'puppeteer';
+import "expect-puppeteer";
+
+
+import iamSlider from "../components/slider/slider.component";
+
+describe('The slider component', () => {
+
+  if (!window.customElements.get(`iam-slider`))
+    window.customElements.define(`iam-slider`, iamSlider);
+
+  test('should always show the minimum and maximum values that it can be set', () => {
+
+    document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
+    let component = document.querySelector('iam-slider');
+
+    expect(component.shadowRoot.innerHTML).toContain('<div class="col min pe-2">0</div>')
+    expect(component.shadowRoot.innerHTML).toContain('<div class="col max ps-2">100</div>')
+  });
+
+  test('should always have a secondary way of inputing the value i.e. a number input field', () => {
+
+    document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
+    let component = document.querySelector('iam-slider');
+
+    expect(component.querySelectorAll('input[type="number"]').length).toEqual(1)
+    expect(component.shadowRoot.querySelectorAll('input[type="range"]').length).toEqual(1)
+  });
+    
+});