@iamproperty/components 5.0.0 → 5.1.0-beta10

package/assets/js/modules/carousel.js

@@ -1,12 +1,9 @@
 // @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);
@@ -15,9 +12,11 @@ function carousel(carouselElement) {
             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;
-            Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-                link.removeAttribute('aria-current');
+            let lastItemOffset = row.querySelector('.col:last-child').offsetLeft + 50;
+            if (carouselInner.scrollLeft + scrollArea >= lastItemOffset)
+                targetSlide = itemCount;
+            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
@@ -26,22 +25,22 @@ function carousel(carouselElement) {
             else
                 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,
                     left: el.offsetLeft,
@@ -53,7 +52,7 @@ 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;
                 carouselInner.scroll({
@@ -65,12 +64,5 @@ 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/js/modules/dynamicEvents.js

@@ -59,19 +59,23 @@ const runEvent = (element, event, eventType) => {
         return false;
     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);
@@ -81,16 +85,27 @@ const runEvent = (element, event, eventType) => {
             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/js/modules/helpers.js

@@ -34,7 +34,7 @@ export const addGlobalEvents = (body) => {
         checkElements(location.hash);
     window.addEventListener('hashchange', function () { checkElements(location.hash); }, false);
     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]`);
             if (pageInput)
@@ -72,3 +72,6 @@ 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/js/modules/inputs.js

@@ -1,12 +1,53 @@
 // @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')) {
             const input = event.target.closest('input,textarea,select');

package/assets/js/modules/table.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 // @ts-nocheck
-import { zeroPad, isNumeric, ucfirst } from "./helpers.js";
+import { zeroPad, isNumeric, ucfirst, resolvePath } from "./helpers.js";
 // Basic functionality needed
 export const addDataAttributes = (table) => {
     const colHeadings = Array.from(table.querySelectorAll('thead th'));
@@ -51,12 +51,15 @@ export const getLargestLastColWidth = (table) => {
     return largestWidth;
 };
 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) => {
         const preExpanded = row.getAttribute('data-view') === 'full' ? 'aria-expanded' : '';
@@ -493,7 +496,7 @@ export const populateDataQueries = (table, form, wrapper) => {
     const dataQueries = Array.from(form.querySelectorAll('[data-query]'));
     dataQueries.forEach((queryElement, index) => {
         let query = queryElement.getAttribute('data-query');
-        let numberOfMatchedRows;
+        let numberOfMatchedRows = 0;
         if (query == 'total') {
             if (wrapper.hasAttribute('data-total'))
                 numberOfMatchedRows = wrapper.getAttribute('data-total');
@@ -648,10 +651,9 @@ const filterFilters = function (form) {
 };
 export const loadAjaxTable = function (table, form, pagination, wrapper) {
     return __awaiter(this, void 0, void 0, function* () {
-        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');
         wrapper.classList.add('table--loading');

package/assets/js/modules/tabs.js

@@ -1,6 +1,7 @@
 // @ts-nocheck
 export const createTabsLinks = function (tabsElement) {
     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');
     if (tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
@@ -14,34 +15,40 @@ export const createTabsLinks = function (tabsElement) {
         tabsElement.prepend(tabLinksWrapper);
     }
     // Create the tab buttons from the summary titles
-    details.forEach((detail, index) => {
-        let summary = detail.querySelector(':scope > summary');
-        let isDisabled = summary.classList.contains('disabled');
-        summary.classList.add('visually-hidden');
+    let tabindex = 0;
+    detailsORLinks.forEach((element, index) => {
         let button = document.createElement('button');
-        if (detail.hasAttribute('id')) {
-            button = document.createElement('a');
-            button.setAttribute('href', `#${detail.getAttribute('id')}`);
+        if (element.matches('details')) {
+            let summary = element.querySelector(':scope > summary');
+            let isDisabled = summary.classList.contains('disabled');
+            summary.classList.add('visually-hidden');
+            if (element.hasAttribute('id'))
+                button.setAttribute('data-id', `${element.getAttribute('id')}`);
+            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++;
         }
-        if (detail.hasAttribute('open')) {
-            button.setAttribute('aria-pressed', true);
+        else if (element.matches('a')) {
+            button = element;
         }
-        button.innerHTML = `${summary.innerText}`;
         button.classList.add('link');
-        button.setAttribute('data-index', index);
-        button.setAttribute('tabindex', '-1');
-        if (isDisabled) {
-            button.classList.add('disabled');
-        }
         tabLinks.appendChild(button);
     });
 };
 export const setTabsEventHandlers = function (tabsElement) {
     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) => {
         button.addEventListener("click", (e) => {
@@ -59,8 +66,6 @@ export const setTabsEventHandlers = function (tabsElement) {
                 else
                     detail.removeAttribute('open');
             });
-            if (button.hasAttribute('href'))
-                history.pushState(undefined, undefined, button.getAttribute('href'));
             // Data layer Open Event
             window.dataLayer = window.dataLayer || [];
             window.dataLayer.push({
@@ -71,13 +76,6 @@ export const setTabsEventHandlers = function (tabsElement) {
     });
     // 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();
@@ -85,12 +83,12 @@ export const setTabsEventHandlers = function (tabsElement) {
     });
 };
 export const openFirstTab = function (tabsElement) {
+    if (!tabsElement.querySelector(':scope > details'))
+        return false;
     let details = tabsElement.querySelectorAll(':scope > details');
-    let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
-    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);
+    let 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]`)) {