@iamproperty/components 5.6.1-beta9 → 5.7.0

package/assets/js/modules/fileupload.js

@@ -4,13 +4,26 @@ function fileupload(fileupload, wrapper) {
     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')) {
             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();
         }
@@ -26,14 +39,8 @@ function fileupload(fileupload, wrapper) {
                     dt.items.add(file); // here you exclude the file. thus removing it.
             }
             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);
         }
     });
     // Buffer input change event
@@ -45,8 +52,14 @@ function fileupload(fileupload, wrapper) {
             for (let i = 0; i < filesArray.length; i++) {
                 const file = filesArray[i];
                 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);
             }
             input.files = dt.files;
@@ -56,8 +69,6 @@ function fileupload(fileupload, wrapper) {
         }
         const changeEvent = new Event('change');
         input.dispatchEvent(changeEvent);
-        const elementChangeEvent = new Event('elementChange');
-        fileupload.dispatchEvent(elementChangeEvent);
     });
     cloneInput.addEventListener('dragenter', (event) => {
         cloneInput.classList.add('focus');
@@ -69,15 +80,36 @@ function fileupload(fileupload, wrapper) {
         cloneInput.classList.remove('focus');
     });
     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')) {
         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;

package/assets/js/modules/helpers.js

@@ -114,3 +114,33 @@ export const numberOfDays = function (startDateString, endDateString) {
 // 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);
+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/js/modules/inputs.js

@@ -3,7 +3,7 @@ import hibpCheck from '../vendor/hibp.js';
 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/js/modules/table.js

@@ -108,7 +108,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     var timer;
     // 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;
         Array.from(form.querySelectorAll('iam-applied-filters')).forEach((element, index) => {
@@ -609,6 +611,9 @@ 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]');
         let newPage = event.detail.page;

package/assets/js/modules/tabs.js

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { getSwipeDirection } from './helpers.js';
 export const createTabsLinks = function (tabsElement) {
     const details = tabsElement.querySelectorAll(':scope > details');
     const detailsORLinks = tabsElement.querySelectorAll(':scope > details, :scope > a');
@@ -46,19 +47,56 @@ export const createTabsLinks = function (tabsElement) {
 export const setTabsEventHandlers = function (tabsElement) {
     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) => {
         button.addEventListener("click", (e) => {
             e.preventDefault();
+            isClicked = true;
             if (button.classList.contains('disabled'))
                 return false;
             buttons.forEach((buttonLoopItem) => {
                 let buttonPressed = buttonLoopItem == button ? true : false;
                 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;
                 if (detailsOpen)
@@ -66,6 +104,12 @@ export const setTabsEventHandlers = function (tabsElement) {
                 else
                     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({
@@ -81,6 +125,45 @@ export const setTabsEventHandlers = function (tabsElement) {
             buttons[index].click();
         });
     });
+    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) {
     if (!tabsElement.querySelector(':scope > details'))