@iamproperty/components 6.0.0 → 6.1.0--beta2

package/assets/js/modules/carousel.js

@@ -1,9 +1,62 @@
 // @ts-nocheck
-function carousel(carouselElement, row) {
+export const generateThumbnailList = function (carouselComponent) {
+    let thumbnailImages = [];
+    Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {
+        if (slide.hasAttribute('data-thumbnail')) {
+            thumbnailImages[index] = slide.getAttribute('data-thumbnail');
+        }
+    });
+    return thumbnailImages;
+};
+export const generatePipsHTML = function (carouselComponent, thumbnailImages) {
+    let itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+    let pips = "";
+    for (let i = 1; i <= itemCount; i++) {
+        let pipContent = null;
+        let pipClass = '';
+        if (thumbnailImages.length && thumbnailImages[i - 1]) {
+            pipClass = 'has-thumbnail';
+            pipContent = `<img src="${thumbnailImages[i - 1]}" alt="Slide ${i}" height="148"/>`;
+        }
+        else {
+            pipContent = `Slide ${i}`;
+        }
+        pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current" : ""}>${pipContent}</button>`;
+    }
+    return pips;
+};
+const getProgressMax = function (itemCount, visibleItems) {
+    if (visibleItems == 1) {
+        return itemCount;
+    }
+    let max = (Math.ceil(itemCount / visibleItems) * visibleItems) - visibleItems;
+    return max + 1;
+};
+const getProgressPercent = function (value, max) {
+    return (((value - 1) / (max - 1)) * 100);
+};
+export const carousel = function (carouselComponent) {
     var scrollTimeout;
+    const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
     let carouselInner = carouselElement.querySelector('.carousel__inner');
     let carouselControls = carouselElement.querySelector('.carousel__controls');
-    let itemCount = row.querySelectorAll(':scope > .col').length;
+    let carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
+    let itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+    let scrollArea = carouselInner.clientWidth;
+    let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+    let visibleItems = Math.round(scrollArea / itemWidth);
+    carouselProgress.setAttribute('min', 1);
+    carouselProgress.setAttribute('step', visibleItems);
+    let progressMax = getProgressMax(itemCount, visibleItems);
+    carouselProgress.setAttribute('max', progressMax);
+    carouselProgress.value = 1;
+    let percent = getProgressPercent(1, progressMax);
+    carouselProgress.style.setProperty('--percent', percent + "%");
+    let stepperInterval, stepperEvent = "mouseup", stepperStart = "mousedown";
+    if ("ontouchstart" in document.documentElement) {
+        stepperEvent = "touchend";
+        stepperStart = "touchstart";
+    }
     // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
     carouselInner.addEventListener('scroll', function (e) {
         clearTimeout(scrollTimeout);
@@ -12,13 +65,14 @@ function carousel(carouselElement, row) {
             let scrollWidth = carouselInner.scrollWidth;
             let scrollLeft = carouselInner.scrollLeft;
             let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-            let itemWidth = row.querySelector(':scope > .col').scrollWidth;
-            let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+            let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+            let lastItemOffset = carouselComponent.querySelector(':scope > div: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);
             //Check if theres room for more slides than we have
             let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
+            carouselProgress.setAttribute('step', visibleItems);
             if (leftOverSpace > 0 && lastItemInView) {
                 targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;
             }
@@ -36,6 +90,12 @@ function carousel(carouselElement, row) {
                 carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');
             else
                 carouselElement.querySelector('.btn-next').removeAttribute('disabled');
+            carouselProgress.value = targetSlide;
+            progressMax = getProgressMax(itemCount, visibleItems);
+            carouselProgress.setAttribute('max', progressMax);
+            percent = (targetSlide / progressMax) * 100;
+            percent = getProgressPercent(targetSlide, progressMax);
+            carouselProgress.style.setProperty('--percent', percent + "%");
         }, 100);
     }, false);
     // when the buttons are used we need to make sure the carousel scrolls to the correct place
@@ -47,7 +107,12 @@ function carousel(carouselElement, row) {
                     button.removeAttribute('aria-current');
                 });
                 target.setAttribute('aria-current', true);
-                const el = row.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
+                const customEvent = new CustomEvent("pip-clicked", { detail: {
+                        'slide': target.getAttribute('data-slide')
+                    }
+                });
+                carouselComponent.dispatchEvent(customEvent);
+                const el = carouselComponent.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
                 carouselInner.scroll({
                     top: 0,
                     left: el.offsetLeft - carouselInner.getBoundingClientRect().left,
@@ -60,9 +125,9 @@ 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 itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
         let visibleItems = Math.round(scrollArea / itemWidth);
-        let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+        let lastItemOffset = carouselComponent.querySelector(':scope > div: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;
@@ -75,6 +140,12 @@ function carousel(carouselElement, row) {
         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')) {
+                let direction = target.matches('.btn-next') ? 'next' : 'prev';
+                const customEvent = new CustomEvent(`${direction}-clicked`, { detail: {
+                        'slide': target.getAttribute('data-go')
+                    }
+                });
+                carouselComponent.dispatchEvent(customEvent);
                 e.preventDefault();
                 let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - movement : carouselInner.scrollLeft + carouselInner.clientWidth;
                 carouselInner.scroll({
@@ -86,5 +157,36 @@ function carousel(carouselElement, row) {
             }
         }
     }, false);
-}
+    carouselProgress.addEventListener(stepperStart, function (event) {
+        clearInterval(stepperInterval);
+        stepperInterval = setInterval(function () {
+            scrollArea = carouselInner.clientWidth;
+            itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+            visibleItems = Math.round(scrollArea / itemWidth);
+            carouselProgress.setAttribute('step', visibleItems);
+            progressMax = getProgressMax(itemCount, visibleItems);
+            carouselProgress.setAttribute('max', progressMax);
+            percent = getProgressPercent(carouselProgress.value, progressMax);
+            carouselProgress.style.setProperty('--percent', percent + "%");
+        }, 10);
+    });
+    carouselProgress.addEventListener(stepperEvent, function (event) {
+        clearInterval(stepperInterval);
+    });
+    carouselProgress.addEventListener('change', function (e) {
+        clearInterval(stepperInterval);
+        let target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);
+        carouselInner.scroll({
+            top: 0,
+            left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0,
+            behavior: 'smooth'
+        });
+        let direction = target.matches('.btn-next') ? 'next' : 'prev';
+        const customEvent = new CustomEvent(`slider-changed`, { detail: {
+                'slide': carouselProgress.value
+            }
+        });
+        carouselComponent.dispatchEvent(customEvent);
+    }, false);
+};
 export default carousel;

package/assets/js/modules/chart.js

@@ -557,8 +557,8 @@ export const createPies = function (chartOuter) {
                 const largeArcFlag = percent > .5 ? 1 : 0; // if the slice is more than 50%, take the large arc (the long way around)
                 const pathData = [
                     `M 0 0`,
-                    `L ${(startX ? startX.toFixed(0) : 0)} ${(startY ? startY.toFixed(0) : 0)}`,
-                    `A 100 100 0 ${largeArcFlag} 1 ${(endX ? endX.toFixed(0) : 0)} ${(endY ? endY.toFixed(0) : 0)}`,
+                    `L ${(startX ? startX.toFixed(0) : 0)} ${(startY ? startY.toFixed(0) : 0)}`, // Move
+                    `A 100 100 0 ${largeArcFlag} 1 ${(endX ? endX.toFixed(0) : 0)} ${(endY ? endY.toFixed(0) : 0)}`, // Arc
                     `L 0 0`, // Line
                 ].join(' ');
                 paths += `<path d="${pathData}" style="${td.getAttribute('style')} --path-index: ${subindex};${hide}"></path>`;

package/assets/js/modules/dialogs.js

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import { createEmbed } from "./youtubevideo.js";
 const extendDialogs = (body) => {
     Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
         let parent = dialog.closest('.dialog__wrapper');
@@ -23,8 +22,10 @@ const extendDialogs = (body) => {
             // Open the modal!
             dialog.showModal();
             dialog.focus();
-            let firstWidth = dialog.offsetWidth;
-            dialog.setAttribute('style', `max-width: ${firstWidth}px;`);
+            if (!dialog.querySelector('iam-multi-step')) {
+                let firstWidth = dialog.offsetWidth;
+                dialog.setAttribute('style', `max-width: ${firstWidth}px;`);
+            }
             // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
             Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element, index) => {
                 const id = element.getAttribute('data-duplicate');
@@ -169,17 +170,8 @@ const extendDialogs = (body) => {
     return null;
 };
 export const createDialog = (dialog) => {
-    // Create the video embed
-    let videoButton = dialog.querySelector('.youtube-embed a');
-    if (videoButton) {
-        createEmbed(videoButton);
-    }
-    // Multi dialog
-    if (dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
-        createMultiFormDialog(dialog);
-    }
     // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
-    if (!dialog.querySelector(':scope .mh-lg') && !dialog.classList.contains('dialog--multi')) {
+    if (!dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')) {
         dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
         let dialogContent = dialog.querySelector('.mh-lg');
         let titleElement = dialog.querySelector('.mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)');
@@ -194,120 +186,4 @@ export const createDialog = (dialog) => {
     if (!dialog.querySelector(':scope > button:first-child'))
         dialog.insertAdjacentHTML('afterbegin', `<button class="dialog__close">Close</button>`);
 };
-export const createMultiFormDialog = (dialog) => {
-    let buttons = "";
-    let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
-    let form = dialog.querySelector('form');
-    fieldsets.forEach((fieldset, index) => {
-        buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active" : ""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`;
-        const btnWrapper = document.createElement("div");
-        btnWrapper.classList.add('btn--wrapper');
-        fieldset.appendChild(btnWrapper);
-        if (index != 0)
-            btnWrapper.innerHTML += `<button data-title="${fieldsets[index - 1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
-        if (index != fieldsets.length - 1)
-            btnWrapper.innerHTML += `<button data-title="${fieldsets[index + 1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
-        // Last fieldset
-        if (index == fieldsets.length - 1) {
-            if (form && form.querySelector(':scope > button[type="submit"]')) {
-                let existingButton = form.querySelector(':scope > button[type="submit"]');
-                existingButton.classList.add('mb-0');
-                btnWrapper.insertAdjacentElement('beforeend', existingButton);
-            }
-            else
-                btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
-        }
-    });
-    dialog.insertAdjacentHTML('afterbegin', `<div class="steps bg-primary">${buttons}</div>`);
-    // Open the fieldset with an error inside
-    let validatedFieldsets = Array.from(dialog.querySelectorAll('fieldset.was-validated'));
-    for (let i = 0; i < validatedFieldsets.length; i++) {
-        let fieldset = validatedFieldsets[i];
-        let fieldsetID = fieldset.getAttribute('data-title');
-        if (fieldset.querySelector('.is-invalid')) {
-            Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-                element.classList.add('active');
-            });
-            break;
-        }
-        else {
-            Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-                element.classList.add('valid');
-            });
-        }
-    }
-    // Prevent the bubble messages
-    dialog.addEventListener('invalid', (function () {
-        return function (e) {
-            e.preventDefault();
-        };
-    })(), true);
-    function validateFieldset(button) {
-        const currentFieldset = dialog.querySelector(`fieldset.active`) ? dialog.querySelector(`fieldset.active`) : dialog.querySelector(`fieldset[data-title]`);
-        const currentFieldsetID = currentFieldset.getAttribute('data-title');
-        let isFieldsetValid = true;
-        currentFieldset.classList.add('was-validated');
-        Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
-            if (!input.checkValidity())
-                isFieldsetValid = false;
-        });
-        // If valid mode to next field set
-        if (!isFieldsetValid) {
-            Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-                element.classList.remove('valid');
-            });
-        }
-        else {
-            Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-                element.classList.add('valid');
-            });
-        }
-        // Allow the previous button to navigate
-        if (isFieldsetValid || !button.hasAttribute('data-next')) {
-            const fieldset = dialog.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
-            const step = dialog.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
-            Array.from(dialog.querySelectorAll('button')).forEach((button, index) => {
-                button.classList.remove('active');
-            });
-            Array.from(dialog.querySelectorAll('fieldset')).forEach((button, index) => {
-                button.classList.remove('active');
-            });
-            step.classList.add('active');
-            fieldset.classList.add('active');
-        }
-        let fieldsetCount = Array.from(dialog.querySelectorAll(`fieldset`)).length;
-        let validFieldsetCount = Array.from(dialog.querySelectorAll(`fieldset.valid`)).length;
-        // update the progress bar
-        dialog.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1) * 100)}%`);
-    }
-    // remove error messages from server
-    dialog.addEventListener('keydown', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
-            const button = event.target.closest('button');
-            if (event.keyCode == 13 && button.getAttribute('type') != "submit") {
-                event.preventDefault();
-                validateFieldset(button);
-            }
-        }
-        if (event && event.target instanceof HTMLElement && event.target.closest('input')) {
-            const input = event.target.closest('input');
-            input.classList.remove('is-invalid');
-            if (event.keyCode == 13) {
-                event.preventDefault();
-            }
-        }
-    });
-    dialog.addEventListener('click', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')) {
-            const form = event.target.closest('form');
-            form.classList.add('was-validated');
-        }
-        else if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {
-            const button = event.target.closest('button[data-title]');
-            validateFieldset(button);
-        }
-        ;
-        return null;
-    });
-};
 export default extendDialogs;

package/assets/js/modules/table.js

@@ -546,7 +546,7 @@ export const filterTable = (table, form, wrapper) => {
         }
     });
     // Work out what to display after pagination
-    Array.from(table.querySelectorAll('tbody tr:not(.filtered')).forEach((row, index) => {
+    Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
         matched++;
         row.classList.add('filtered--matched');
         // pagination bit