@iamproperty/components 5.6.1-beta9 → 5.7.0

package/assets/ts/components/tabs/tabs.component.ts

@@ -30,11 +30,13 @@ class iamTabs extends HTMLElement {
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <div class="tabs">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="tabs" part="tabs">
       <div class="tabs__links__wrapper">
         <div class="tabs__links"></div>
       </div>
       <slot></slot>
+      <button part="next-button" class="btn btn-secondary btn-sm btn-compact fa-regular fa-chevron-right tabs__next">Next</button>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

package/assets/ts/modules/carousel.ts

@@ -5,8 +5,8 @@ function carousel(carouselElement, row) {
 
   let carouselInner = carouselElement.querySelector('.carousel__inner');
   let carouselControls = carouselElement.querySelector('.carousel__controls');
-  let itemCount = row.querySelectorAll('.col').length;
-
+  let itemCount = row.querySelectorAll(':scope > .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);
@@ -16,11 +16,21 @@ function carousel(carouselElement, row) {
       let scrollWidth = carouselInner.scrollWidth;
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-      let lastItemOffset = row.querySelector('.col:last-child').offsetLeft + 50;
+     
+      let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+      let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+      //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
+      let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
+
+      let visibleItems = Math.round(scrollArea / itemWidth);
 
-      if(carouselInner.scrollLeft + scrollArea >= lastItemOffset)
-        targetSlide = itemCount;
+      //Check if theres room for more slides than we have
+      let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
 
+      if(leftOverSpace > 0 && lastItemInView){
+        targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;
+      } 
+      
       Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
         button.removeAttribute('aria-current');
       });
@@ -34,7 +44,7 @@ function carousel(carouselElement, row) {
         carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
 
       // Disable the next button if the last item is in view
-      if(targetSlide == itemCount)
+      if(targetSlide > (itemCount - visibleItems))
         carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
       else
         carouselElement.querySelector('.btn-next').removeAttribute('disabled');
@@ -56,11 +66,11 @@ function carousel(carouselElement, row) {
         });
         target.setAttribute('aria-current', true);
         
-        const el = row.querySelector(`*:nth-child(${target.getAttribute('data-slide')})`);
+        const el = row.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
 
         carouselInner.scroll({
           top: 0,
-          left: el.offsetLeft, 
+          left: el.offsetLeft - carouselInner.getBoundingClientRect().left, 
           behavior: 'smooth'
         });
 
@@ -71,11 +81,32 @@ function carousel(carouselElement, row) {
   
   carouselElement.addEventListener('click', function(e){
 
+    let scrollArea = carouselInner.clientWidth;
+    let scrollWidth = carouselInner.scrollWidth;
+    let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+
+    let visibleItems = Math.round(scrollArea / itemWidth);
+
+    let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+    let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
+
+    //Check if theres room for more slides than we have
+    let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
+
+    /* 
+      When the last slide isn't filled with items, we only want to move back the number of items on the slide, 
+      rather than the total number of possible visible items
+    */
+    let spacesToMove = visibleItems - leftOverSpace;
+
+    //Only want to change the amount of movement if the last item is visible
+    let movement = lastItemInView && leftOverSpace > 0 ? spacesToMove * itemWidth : carouselInner.clientWidth;
+
     for (var target = e.target; target && target != this; target = target.parentNode) {
       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;
+        let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - movement : carouselInner.scrollLeft + carouselInner.clientWidth;
         
         carouselInner.scroll({
           top: 0,

package/assets/ts/modules/dialogs.ts

@@ -72,6 +72,14 @@ const extendDialogs = (body) => {
         btnElement.classList.remove('active');
       });
 
+      let closeEvent = new CustomEvent('dialog-closed', {
+        bubbles: true,
+        cancelable: true,
+        detail: { modalId: dialog.id }
+      });
+
+      event.target.dispatchEvent(closeEvent);
+
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         "event": "closeModal",

package/assets/ts/modules/fileupload.ts

@@ -5,11 +5,27 @@ function fileupload(fileupload: Element, wrapper: Element) {
   const dropArea = wrapper.querySelector('.drop-area');
   const input = fileupload.querySelector('input');
   const maxSize = fileupload.hasAttribute('data-maxsize') ? fileupload.getAttribute('data-maxsize') : 0;
+  const errorMsgSize = wrapper.querySelector('.invalid-feedback.size');
+  const errorMsgExt = wrapper.querySelector('.invalid-feedback.ext');
 
   // We clone the input field to work as a buffer input field, this allows us to add new files without losing the old ones
   const cloneInput = input.cloneNode();
   dropArea.append(cloneInput);
 
+  let checkFileExt = function(filename){
+
+    if(!input.hasAttribute('accept'))
+      return true;
+
+    const nameExtension = filename.split('.').pop();
+    const acceptedTypes = input.getAttribute('accept');
+
+    if(acceptedTypes.includes(nameExtension))
+      return true;
+  
+    return false;
+  }
+
   wrapper.addEventListener('click', (event) => {
 
     if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')){
@@ -17,6 +33,9 @@ function fileupload(fileupload: Element, wrapper: Element) {
       const button = event.target.closest('.btn-primary');
 
       // If the input allows multiples then use the buffer clone input
+      
+      errorMsgExt.classList.remove('d-block');
+      errorMsgSize.classList.remove('d-block');
       const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;
 
       inputTrigger.click();
@@ -27,7 +46,6 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
     if (event && event.target instanceof HTMLElement && event.target.closest('.files button')){
 
-
       const dt = new DataTransfer();
       const { files } = input;
       const button = event.target.closest('.files button');
@@ -42,17 +60,8 @@ function fileupload(fileupload: Element, wrapper: Element) {
       
       input.files = dt.files // Assign the updates list
 
-
-      if(input.files.length == 0){
-        const emptyEvent = new Event('empty');
-        fileupload.dispatchEvent(emptyEvent);
-      }
-
       const changeEvent = new Event('change');
       input.dispatchEvent(changeEvent);
-      
-      const elementChangeEvent = new Event('elementChange');
-      fileupload.dispatchEvent(elementChangeEvent);
     }
   });
 
@@ -60,6 +69,7 @@ function fileupload(fileupload: Element, wrapper: Element) {
   cloneInput.addEventListener('change', (event) => {
 
     if(input.hasAttribute('multiple')){
+
       const filesArray = [...input.files, ...cloneInput.files];
       
       let fileNames = [];
@@ -71,8 +81,17 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
         const size = file.size/1000;
 
-        if(!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize))
+        if(!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize) && checkFileExt(file.name))
           dt.items.add(file) // here you exclude the file. thus removing it.
+  
+  
+        if(!checkFileExt(file.name)){
+          errorMsgExt.classList.add('d-block');
+        }
+  
+        if(size > maxSize){
+          errorMsgSize.classList.add('d-block');
+        }
 
         fileNames.push(file.name);
       }
@@ -83,12 +102,9 @@ function fileupload(fileupload: Element, wrapper: Element) {
       
       input.files = cloneInput.files;
     }
-    
+
     const changeEvent = new Event('change');
     input.dispatchEvent(changeEvent);
-
-    const elementChangeEvent = new Event('elementChange');
-    fileupload.dispatchEvent(elementChangeEvent);
   });
 
 
@@ -109,11 +125,40 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
   input.addEventListener('change', (event) => {
 
+    if(input.files.length == 1) {
+
+      let file = input.files[0];
+
+      const size = file.size/1000;
+
+      if(!checkFileExt(file.name)){
+        errorMsgExt.classList.add('d-block');
+
+        const dt = new DataTransfer();
+        input.files = dt.files;
+      }
+      if(size > maxSize){
+        errorMsgSize.classList.add('d-block');
+
+        const dt = new DataTransfer();
+        input.files = dt.files;
+      }
+    }
+    
     // Reset
     filesWrapper.innerHTML = '';
 
-    for (const file of input.files)
-      filesWrapper.innerHTML += `<span class="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
+    for (const file of input.files){
+      filesWrapper.innerHTML += `<span class="file" part="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
+    }
+
+    const elementChangeEvent = new CustomEvent('elementchange', {detail: {"files": input.files}});
+    fileupload.dispatchEvent(elementChangeEvent);
+
+    if(input.files.length == 0){
+      const emptyEvent = new CustomEvent('empty');
+      fileupload.dispatchEvent(emptyEvent);
+    }
   });
 
   if(fileupload.hasAttribute('data-filename')){
@@ -121,9 +166,8 @@ function fileupload(fileupload: Element, wrapper: Element) {
     let filename = fileupload.getAttribute('data-filename');
 
     if(filename)
-      filesWrapper.innerHTML += `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
+      filesWrapper.innerHTML = `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
   }
-
 }
 
-export default fileupload;
+export default fileupload;

package/assets/ts/modules/helpers.ts

@@ -157,3 +157,32 @@ export const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'
 
 
 export const isTraversable = o => Array.isArray(o) || o !== null && ['function', 'object'].includes(typeof o);
+
+export const getSwipeDirection = (touchstartX,touchstartY,touchendX,touchendY) => {
+    
+  const limit = Math.tan(45 * 1.5 / 180 * Math.PI);  
+  let pageWidth = window.innerWidth || document.body.clientWidth;
+  let treshold = Math.max(1,Math.floor(0.01 * (pageWidth)));
+  let x = touchendX - touchstartX;
+  let y = touchendY - touchstartY;
+  let xy = Math.abs(x / y);
+  let yx = Math.abs(y / x);
+  if (Math.abs(x) > treshold || Math.abs(y) > treshold) {
+      if (yx <= limit) {
+          if (x < 0) {
+              return "left";
+          } else {
+            return "right";
+          }
+      }
+      if (xy <= limit) {
+          if (y < 0) {
+            return "top";
+          } else {
+            return "bottom";
+          }
+      }
+  } else {
+    return "tap";
+  }
+}

package/assets/ts/modules/inputs.ts

@@ -5,7 +5,7 @@ const extendInputs = (body) => {
 
   function loadInput(){
     // maxlength counter init
-    Array.from(document.querySelectorAll('input[maxlength]')).forEach((input,index) => {
+    Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input,index) => {
       let wrapper = input.parentElement;
       setMaxlengthVars(input,wrapper);
     });

package/assets/ts/modules/table.ts

@@ -149,7 +149,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
   // Check what conditions are set on the table to see what the form actions are
   let formSubmit = function(event, paginate = false){
 
-    console.log('submit');
+    if(wrapper.hasAttribute('data-no-submit')){
+      return false;
+    }
 
     if(form.classList.contains('processing'))
       return false;
@@ -848,6 +850,10 @@ export const populateDataQueries = (table,form,wrapper) => {
 // Pagination
 export const addPaginationEventListeners = function(table, form, pagination, wrapper){
 
+  if(wrapper.hasAttribute('data-no-submit')){
+    return false;
+  }
+
   pagination.addEventListener('update-page', (event) => {
 
     let paginationInput = form.querySelector('[data-pagination]');
@@ -1007,7 +1013,7 @@ const filterFilters = function(form){
 }
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
-
+  
   let formData = new FormData(form);
   let queryString = new URLSearchParams(formData).toString();
   let columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');

package/assets/ts/modules/tabs.ts

@@ -1,4 +1,6 @@
 // @ts-nocheck
+import { getSwipeDirection } from './helpers'
+
 export const createTabsLinks = function(tabsElement: Element) {
 
   const details = tabsElement.querySelectorAll(':scope > details');
@@ -65,10 +67,51 @@ export const setTabsEventHandlers = function(tabsElement: Element){
 
   let details = tabsElement.querySelectorAll(':scope > details');
   let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+  let buttonWrapper = tabsElement.querySelector(':scope .tabs__links');
   let buttons = tabsElement.querySelectorAll(':scope .tabs__links > button');
 
-  if(tabsElement.shadowRoot)
+  let nextButton = tabsElement.querySelector(':scope .tabs__next');
+
+  var scrollTimeout;
+  let isScrolled = false;
+  let isClicked = false;
+
+  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) => {
@@ -76,6 +119,8 @@ export const setTabsEventHandlers = function(tabsElement: Element){
     button.addEventListener("click", (e) => {
       e.preventDefault();
 
+      isClicked = true;
+
       if (button.classList.contains('disabled'))
         return false
 
@@ -84,6 +129,16 @@ export const setTabsEventHandlers = function(tabsElement: Element){
         buttonLoopItem.setAttribute('aria-pressed', buttonPressed);
       });
 
+      if(!isScrolled){
+          
+        buttonWrapper.scroll({
+          top: 0,
+          left: button.offsetLeft, 
+          behavior: 'smooth'
+        });
+      }
+      isScrolled = false;
+
       details.forEach((detail, detailsIndex) => {
         let detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
 
@@ -93,6 +148,13 @@ export const setTabsEventHandlers = function(tabsElement: Element){
           detail.removeAttribute('open')
       });
       
+      if(button.matches(':last-child')){
+        nextButton.setAttribute('disabled','disabled');
+      }
+      else {
+        nextButton.removeAttribute('disabled');
+      }
+
       // Data layer Open Event
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
@@ -112,6 +174,59 @@ export const setTabsEventHandlers = function(tabsElement: Element){
     });
   });
 
+  nextButton.addEventListener("click", (e) => {
+    e.preventDefault();
+
+    let currentTab = buttonWrapper.querySelector('[aria-pressed="true"]');
+    let 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;
+
+    details.forEach((detail) => {
+
+      detail.addEventListener("touchstart", (event) => {
+        event.stopPropagation();
+
+        touchstartX = event.changedTouches[0].screenX;
+        touchstartY = event.changedTouches[0].screenY;
+      });
+
+      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"]');
+
+        switch (direction) {
+          case 'left':
+            
+            let nextTab = currentTab.nextSibling;
+            if(nextTab)
+              nextTab.click();
+          
+            break;
+          case 'right':
+              
+            let prevTab = currentTab.previousSibling;
+            if(prevTab)
+              prevTab.click();
+
+          break;
+        }
+      });
+    });
+  }
 }
 
 export const openFirstTab = function(tabsElement: Element){