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

@@ -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/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');