@iamproperty/components 5.1.0-beta → 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

@@ -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/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