@iamproperty/components 3.1.0 → 3.4.4

package/assets/js/modules/carousel.js

@@ -1,102 +1,76 @@
-function carousel(carouselElement) {
-
-  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').classList.add('active');
-
-  // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
-  carouselInner.addEventListener('scroll', function(e){
-    clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function(){ 
-
-      let scrollArea = carouselInner.clientWidth;
-      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.classList.remove('active');
-      });
-
-      carouselElement.querySelector('.control-'+targetSlide).classList.add('active');
-      
-      // Disable the previous button
-      if(targetSlide == 1)
-        carouselElement.querySelector('.btn-prev').setAttribute('disabled','disabled');
-      else
-        carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
-
-      // Disable the next button if the last item is in view
-      if(carouselInner.scrollLeft + scrollArea > lastItemOffset)
-        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){
-
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.carousel__controls a')) {
-        
-        e.preventDefault();
-
-        Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-          link.classList.remove('active');
-        });
-        target.classList.add('active');
-
-        const el = document.querySelector(target.getAttribute('href'));
-
-        carouselInner.scroll({
-          top: 0,
-          left: el.offsetLeft, 
-          behavior: 'smooth'
-        });
-
-        break;
-      }
-    }
-  }, false);
-
-  carouselElement.addEventListener('click', function(e){
-
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (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({
-          top: 0,
-          left: scrollTo, 
-          behavior: 'smooth'
-        });
-        break;
-      }
-    }
-  }, 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
+// @ts-nocheck
+function carousel(carouselElement) {
+    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').classList.add('active');
+    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
+    carouselInner.addEventListener('scroll', function (e) {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(function () {
+            let scrollArea = carouselInner.clientWidth;
+            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.classList.remove('active');
+            });
+            carouselElement.querySelector('.control-' + targetSlide).classList.add('active');
+            // Disable the previous button
+            if (targetSlide == 1)
+                carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');
+            else
+                carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
+            // Disable the next button if the last item is in view
+            if (carouselInner.scrollLeft + scrollArea > lastItemOffset)
+                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) {
+        for (var target = e.target; target && target != this; target = target.parentNode) {
+            if (target.matches('.carousel__controls a')) {
+                e.preventDefault();
+                Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
+                    link.classList.remove('active');
+                });
+                target.classList.add('active');
+                const el = document.querySelector(target.getAttribute('href'));
+                carouselInner.scroll({
+                    top: 0,
+                    left: el.offsetLeft,
+                    behavior: 'smooth'
+                });
+                break;
+            }
+        }
+    }, false);
+    carouselElement.addEventListener('click', function (e) {
+        for (var target = e.target; target && target != this; target = target.parentNode) {
+            if (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({
+                    top: 0,
+                    left: scrollTo,
+                    behavior: 'smooth'
+                });
+                break;
+            }
+        }
+    }, 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/chart.js

@@ -1,218 +1,151 @@
-import { ucfirst, unsnake } from './helpers'
-
-function chart(chartElement,min,max,type) {
-
-  let chartKey = chartElement.querySelector('.chart__key');
-  let chartYaxis = chartElement.querySelector('.chart__yaxis');
-  let chartGuidelines = chartElement.querySelector('.chart__guidelines');
-
-  // Chart key
-  if(chartKey && chartKey.childElementCount == 0){
-    createChartKey(chartElement);
-  }
-
-  // Y Axis and Guidelines
-  if(chartYaxis && chartYaxis.childElementCount == 0){
-    createChartYaxis(chartElement);
-  }
-  if(chartGuidelines && chartGuidelines.childElementCount == 0){
-    createChartGuidelines(chartElement);
-  }
-
-  // Create lines for line graph
-  if(type == "line")
-    createLines(chartElement,min,max);
-
-  // Create pies
-  if(type == "pie")
-    createPies(chartElement);
-
-  // Add css vars to cells
-  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((tr, index) => {
-
-    let group = tr.querySelector('td:first-child, th:first-child') ? tr.querySelector('td:first-child, th:first-child').innerHTML : '';
-
-    Array.from(tr.querySelectorAll('td[data-numeric]:not([data-numeric="0"]):not(:first-child)')).forEach((td, index) => {
-
-      const value = Number.parseFloat(td.getAttribute('data-numeric'));
-      let percent = ((value - min)/(max)) * 100;
-      const content = td.innerHTML;
-      const label = td.getAttribute('data-label');
-      let bottom = 0;
-
-      // If the value is negative the position below the 0 line
-      if(min < 0){
-        bottom = Math.abs((min)/(max)*100);
-        if(value < 0){
-          bottom = bottom - percent;
-        }
-      }
-      td.setAttribute("style",`--bottom:${bottom}%;--percent:${percent}%;`);
-
-
-      td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
-    });
-  });
-}
-
-export const createChartKey = function(chartElement){
-
-  let chartKey = chartElement.querySelector('.chart__key');
-
-  Array.from(chartElement.querySelectorAll('thead th')).forEach((arrayElement, index) => {
-
-    chartKey.innerHTML += `<div class="key">${arrayElement.innerText}</div>`;
-  });
-}
-
-export const createChartGuidelines = function(chartElement){
-
-  let chartGuidelines = chartElement.querySelector('.chart__guidelines');
-  const max = chartElement.getAttribute('data-max');
-  const min = chartElement.getAttribute('data-min');
-
-  chartGuidelines.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
-  chartGuidelines.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
-}
-
-export const createChartYaxis = function(chartElement){
-
-  let chartYaxis = chartElement.querySelector('.chart__yaxis');
-  const max = chartElement.getAttribute('data-max');
-  const min = chartElement.getAttribute('data-min');
-
-  chartYaxis.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
-  chartYaxis.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
-}
-
-function getCoordinatesForPercent(percent) {
-  const x = Math.cos(2 * Math.PI * percent);
-  const y = Math.sin(2 * Math.PI * percent);
-  return [x*100, y*100];
-}
-
-export const createPies = function(chartElement){
-
-  let returnString = '';
-  let pieWrapper = chartElement.querySelector('.pies');
-
-  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
-
-    let paths = '';
-    let tooltips = '';
-
-    let cumulativePercent = 0;
-
-    let total = 0;
-
-    let titleKey = item.querySelectorAll('td')[0]
-    let title = titleKey.innerHTML;
-
-    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
-
-      if(subindex != 0){
-
-        let value = cell.getAttribute('data-numeric');
-
-        value = value.replace('£','');
-        value = value.replace('%','');
-        value = Number.parseInt(value);
-
-        total += value;
-      }
-    });
-
-    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
-
-      if(subindex != 0){
-
-        let value = cell.getAttribute('data-numeric');
-
-        value = value.replace('£','');
-        value = value.replace('%','');
-        value = Number.parseInt(value);
-
-        let percent = value/total;
-
-        //lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
-        const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
-
-          // each slice starts where the last slice ended, so keep a cumulative percent
-          cumulativePercent += percent;
-
-          const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
-
-          // if the slice is more than 50%, take the large arc (the long way around)
-          const largeArcFlag = percent > .5 ? 1 : 0;
-
-          // create an array and join it just for code readability
-          const pathData = [
-            `M ${startX} ${startY}`, // Move
-            `A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
-            `L 0 0`, // Line
-          ].join(' ');
-
-        paths += `<path d="${pathData}"></path>`;
-        tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0"><span class="total d-block">${ucfirst(unsnake(title))}</span> ${ucfirst(unsnake(cell.getAttribute('data-label')))}<br/> ${cell.innerHTML}</span></div></foreignObject>`;
-      }
-    });
-
-    returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" style="transform: rotate(-90deg)" preserveAspectRatio="none">${paths}<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${title}</span></div></foreignObject>${tooltips}</svg></div>`
-  });
-
-  pieWrapper.innerHTML = returnString;
-}
-
-export const createLines = function(chartElement,min,max){
-
-  let returnString = '';
-  let linesWrapper = chartElement.querySelector('.lines');
-
-  let items = Array.from(chartElement.querySelectorAll('tbody tr'));
-
-  let lines = Array();
-  let spacer = 200/(items.length - 1);
-
-  // Creates the lines array from the fields array
-  Array.from(chartElement.querySelectorAll('thead th')).forEach((field, index) => {
-
-    if(index != 0){
-
-      lines[index-1] = '';
-    }
-  });
-
-  // populate the lines array from the items array
-  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
-
-    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
-
-      if(subindex != 0){
-
-        let value = cell.getAttribute('data-numeric');
-
-        value = value.replace('£','');
-        value = value.replace('%','');
-        value = Number.parseFloat(value) - min;
-
-        const percent = (value/max) * 100;
-
-        let command = index == 0 ? 'M' : 'L';
-
-        lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
-      }
-    });
-  });
-
-  lines.forEach((line, index) => {
-
-    returnString += `
-<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
-  <path fill="none" d="${line}"></path>
-</svg>`
-  });
-
-  linesWrapper.innerHTML = returnString;
-}
-
-export default chart
+// @ts-nocheck
+import { ucfirst, unsnake } from './helpers.js';
+function chart(chartElement, min, max, type) {
+    let chartKey = chartElement.querySelector('.chart__key');
+    let chartYaxis = chartElement.querySelector('.chart__yaxis');
+    let chartGuidelines = chartElement.querySelector('.chart__guidelines');
+    // Chart key
+    if (chartKey && chartKey.childElementCount == 0) {
+        createChartKey(chartElement);
+    }
+    // Y Axis and Guidelines
+    if (chartYaxis && chartYaxis.childElementCount == 0) {
+        createChartYaxis(chartElement);
+    }
+    if (chartGuidelines && chartGuidelines.childElementCount == 0) {
+        createChartGuidelines(chartElement);
+    }
+    // Create lines for line graph
+    if (type == "line")
+        createLines(chartElement, min, max);
+    // Create pies
+    if (type == "pie")
+        createPies(chartElement);
+    // Add css vars to cells
+    Array.from(chartElement.querySelectorAll('tbody tr')).forEach((tr, index) => {
+        let group = tr.querySelector('td:first-child, th:first-child') ? tr.querySelector('td:first-child, th:first-child').innerHTML : '';
+        Array.from(tr.querySelectorAll('td[data-numeric]:not([data-numeric="0"]):not(:first-child)')).forEach((td, index) => {
+            const value = Number.parseFloat(td.getAttribute('data-numeric'));
+            let percent = ((value - min) / (max)) * 100;
+            const content = td.innerHTML;
+            const label = td.getAttribute('data-label');
+            let bottom = 0;
+            // If the value is negative the position below the 0 line
+            if (min < 0) {
+                bottom = Math.abs((min) / (max) * 100);
+                if (value < 0) {
+                    bottom = bottom - percent;
+                }
+            }
+            td.setAttribute("style", `--bottom:${bottom}%;--percent:${percent}%;`);
+            td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
+        });
+    });
+}
+export const createChartKey = function (chartElement) {
+    let chartKey = chartElement.querySelector('.chart__key');
+    Array.from(chartElement.querySelectorAll('thead th')).forEach((arrayElement, index) => {
+        chartKey.innerHTML += `<div class="key">${arrayElement.innerText}</div>`;
+    });
+};
+export const createChartGuidelines = function (chartElement) {
+    let chartGuidelines = chartElement.querySelector('.chart__guidelines');
+    const max = chartElement.getAttribute('data-max');
+    const min = chartElement.getAttribute('data-min');
+    chartGuidelines.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
+    chartGuidelines.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
+};
+export const createChartYaxis = function (chartElement) {
+    let chartYaxis = chartElement.querySelector('.chart__yaxis');
+    const max = chartElement.getAttribute('data-max');
+    const min = chartElement.getAttribute('data-min');
+    chartYaxis.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
+    chartYaxis.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
+};
+function getCoordinatesForPercent(percent) {
+    const x = Math.cos(2 * Math.PI * percent);
+    const y = Math.sin(2 * Math.PI * percent);
+    return [x * 100, y * 100];
+}
+export const createPies = function (chartElement) {
+    let returnString = '';
+    let pieWrapper = chartElement.querySelector('.pies');
+    Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
+        let paths = '';
+        let tooltips = '';
+        let cumulativePercent = 0;
+        let total = 0;
+        let titleKey = item.querySelectorAll('td')[0];
+        let title = titleKey.innerHTML;
+        Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+            if (subindex != 0) {
+                let value = cell.getAttribute('data-numeric');
+                value = value.replace('£', '');
+                value = value.replace('%', '');
+                value = Number.parseInt(value);
+                total += value;
+            }
+        });
+        Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+            if (subindex != 0) {
+                let value = cell.getAttribute('data-numeric');
+                value = value.replace('£', '');
+                value = value.replace('%', '');
+                value = Number.parseInt(value);
+                let percent = value / total;
+                //lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
+                const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
+                // each slice starts where the last slice ended, so keep a cumulative percent
+                cumulativePercent += percent;
+                const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
+                // if the slice is more than 50%, take the large arc (the long way around)
+                const largeArcFlag = percent > .5 ? 1 : 0;
+                // create an array and join it just for code readability
+                const pathData = [
+                    `M ${startX} ${startY}`,
+                    `A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+                    `L 0 0`, // Line
+                ].join(' ');
+                paths += `<path d="${pathData}"></path>`;
+                tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0"><span class="total d-block">${ucfirst(unsnake(title))}</span> ${ucfirst(unsnake(cell.getAttribute('data-label')))}<br/> ${cell.innerHTML}</span></div></foreignObject>`;
+            }
+        });
+        returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" style="transform: rotate(-90deg)" preserveAspectRatio="none">${paths}<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${title}</span></div></foreignObject>${tooltips}</svg></div>`;
+    });
+    pieWrapper.innerHTML = returnString;
+};
+export const createLines = function (chartElement, min, max) {
+    let returnString = '';
+    let linesWrapper = chartElement.querySelector('.lines');
+    let items = Array.from(chartElement.querySelectorAll('tbody tr'));
+    let lines = Array();
+    let spacer = 200 / (items.length - 1);
+    // Creates the lines array from the fields array
+    Array.from(chartElement.querySelectorAll('thead th')).forEach((field, index) => {
+        if (index != 0) {
+            lines[index - 1] = '';
+        }
+    });
+    // populate the lines array from the items array
+    Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
+        Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+            if (subindex != 0) {
+                let value = cell.getAttribute('data-numeric');
+                value = value.replace('£', '');
+                value = value.replace('%', '');
+                value = Number.parseFloat(value) - min;
+                const percent = (value / max) * 100;
+                let command = index == 0 ? 'M' : 'L';
+                lines[subindex - 1] += `${command} ${spacer * index} ${100 - percent} `;
+            }
+        });
+    });
+    lines.forEach((line, index) => {
+        returnString += `
+<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
+  <path fill="none" d="${line}"></path>
+</svg>`;
+    });
+    linesWrapper.innerHTML = returnString;
+};
+export default chart;

package/assets/js/modules/drawer.js

@@ -1,16 +1,10 @@
-const drawer = (element) => {
-
-  const observer = new IntersectionObserver( 
-
-    function([e]){
-      e.target.classList.toggle("in-view", e.intersectionRatio > 0)
-      document.getElementById('showDrawer').checked = false
-    },
-    { threshold: [1] }
-  );
-
-  const el = document.getElementById('drawer-end')
-  observer.observe(el);
-}
-
-export default drawer
+// @ts-nocheck
+const drawer = (element) => {
+    const observer = new IntersectionObserver(function ([e]) {
+        e.target.classList.toggle("in-view", e.intersectionRatio > 0);
+        document.getElementById('showDrawer').checked = false;
+    }, { threshold: [1] });
+    const el = document.getElementById('drawer-end');
+    observer.observe(el);
+};
+export default drawer;