@iamproperty/components 7.1.0--beta6 → 7.2.0

package/assets/ts/modules/chart.module.ts

@@ -1,6 +1,8 @@
+import { ucfirst, unsnake } from './helpers';
+
 // #region Functions that setup and trigger other functions
 
-export const addClasses = (chartElement: any, chartOuter: any) => {
+export const addClasses = (chartElement: any, chartOuter: any): boolean => {
   // add colour classes
   for (let i = 1; i <= 10; i++) {
     if (chartElement.hasAttribute(`data-colour-${i}`)) {
@@ -19,7 +21,12 @@ export const addClasses = (chartElement: any, chartOuter: any) => {
   return true;
 };
 
-export const setupChart = (chartElement: any, chartOuter: any, tableElement: any) => {
+export const setupChart = (chartElement: any, chartOuter: any, tableElement: any): boolean => {
+  if (chartElement.tagName == 'IAM-DOUGHNUTCHART') {
+    setupDoughnutChart(chartElement, chartOuter, tableElement);
+    return true;
+  }
+
   // #region Reset the chart
   // empty divs to re-populate
   const chartKey = chartOuter.querySelector('.chart__key');
@@ -51,10 +58,32 @@ export const setupChart = (chartElement: any, chartOuter: any, tableElement: any
 
   return true;
 };
+
+export const setupDoughnutChart = (chartElement: any, chartOuter: any, tableElement: any): boolean => {
+  // #region Reset the chart
+  // empty divs to re-populate
+  const chartKey = chartOuter.querySelector('.chart__key');
+  chartKey.innerHTML = '';
+
+  // Remove old input fields
+  Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map(
+    (element: any) => {
+      element.remove();
+    }
+  );
+  // #endregion
+
+  setCellData(chartElement, tableElement);
+
+  createChartKey(chartOuter, tableElement, chartKey);
+  createdoughnuts(chartOuter);
+
+  return true;
+};
 // #endregion
 
 // #region Event handlers and observers
-export const setEventListener = function (chartElement: any, chartOuter: any) {
+export const setEventListener = function (chartElement: any, chartOuter: any): void {
   const chart = chartOuter.querySelector('.chart');
   chart.addEventListener('mousemove', (event: any) => {
     if (event && event.target instanceof HTMLElement && event.target.closest('td:not(:first-child')) {
@@ -101,14 +130,18 @@ export const setEventListener = function (chartElement: any, chartOuter: any) {
 
     shadowTable.innerHTML = table.innerHTML;
     setCellData(chartElement, shadowTable);
+
+    if (chartElement.tagName == 'IAM-DOUGHNUTCHART') {
+      createdoughnuts(chartOuter);
+    }
   });
 };
 
-export const setEventObservers = function (chartElement: any, chartOuter: any) {
+export const setEventObservers = function (chartElement: any, chartOuter: any): boolean {
   const table = chartElement.querySelector('table');
   const shadowTable = chartOuter.querySelector('table');
 
-  const attributesUpdated = (mutationList: any, observer: any) => {
+  const attributesUpdated = (mutationList: any, observer: any): void => {
     observer.disconnect();
     observer2.disconnect();
 
@@ -123,7 +156,7 @@ export const setEventObservers = function (chartElement: any, chartOuter: any) {
     observer2.observe(chartElement, { attributes: true });
   };
 
-  const tableUpdated = (mutationList: any, observer: any) => {
+  const tableUpdated = (mutationList: any, observer: any): void => {
     observer.disconnect();
     observer2.disconnect();
 
@@ -146,10 +179,19 @@ export const setEventObservers = function (chartElement: any, chartOuter: any) {
 
   return true;
 };
+
+function getCoordinatesForPercent(percent: number, doughnutCount: number): any {
+  // This moves the start point to the top middle point like a clock
+  if (doughnutCount > 1) percent = percent - 0.25;
+
+  const x = Math.cos(2 * Math.PI * percent);
+  const y = Math.sin(2 * Math.PI * percent);
+  return [x * 100, y * 100];
+}
 // #endregion
 
 // #region GET functions
-export const getChartData = function (chartElement: any) {
+export const getChartData = function (chartElement: any): any {
   const table = chartElement.shadowRoot.querySelector('.chart__wrapper table');
 
   const min: any = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
@@ -177,7 +219,7 @@ export const getChartData = function (chartElement: any) {
   return { min, max, yaxis, xaxis, guidelines };
 };
 
-function getLargestValue(chartElement: any, table: any) {
+function getLargestValue(chartElement: any, table: any): number {
   const selector = chartElement.classList.contains('chart--stacked') ? 'tbody tr' : 'tbody td:not(:first-child)';
 
   const values = Array.from(table.querySelectorAll(selector)).map((element: any) => {
@@ -192,7 +234,7 @@ function getLargestValue(chartElement: any, table: any) {
   return Math.ceil(largestValue);
 }
 
-const getValues = function (value: number, min: any, max: any, start?: number) {
+const getValues = function (value: number, min: any, max: any, start?: number): any {
   let cleanValue: string | number = String(value);
   cleanValue = cleanValue.replace('£', '');
   cleanValue = cleanValue.replace('%', '');
@@ -227,19 +269,34 @@ const getValues = function (value: number, min: any, max: any, start?: number) {
 // #endregion
 
 // #region SET functions - set data attributes and classes
-export const setCellData = function (chartElement: any, table: any) {
+export const setCellData = function (chartElement: any, table: any): void {
   Array.from(table.querySelectorAll('tbody tr')).forEach((tr: any) => {
     let rowValue = 0;
     // Set the data numeric value if not set
     Array.from(tr.querySelectorAll('td:not(:first-child)')).forEach((td: any) => {
-      const value = parseFloat(td.textContent.replace('£', '').replace('%', '').replace(',', ''));
+      // Ignore the buttons and links inside
+      const copyTD = td.cloneNode(true);
+      Array.from(copyTD.querySelectorAll('*')).forEach((element: any) => {
+        element.remove();
+      });
+
+      const value = parseFloat(copyTD.textContent.replace('£', '').replace('%', '').replace(',', ''));
 
       td.setAttribute('data-numeric', value);
-      td.setAttribute('data-value', td.textContent);
+      td.setAttribute('data-value', copyTD.textContent);
 
       const display = getComputedStyle(td).display;
 
       if (display != 'none') rowValue += value;
+
+      Array.from(td.querySelectorAll('a, button')).forEach((element: any, index: number) => {
+        if (index == 0) {
+          element.insertAdjacentHTML('beforeBegin', '<hr/>');
+        }
+
+        element.classList.add('btn');
+        element.classList.add('btn-tertiary');
+      });
     });
 
     tr.setAttribute('data-numeric', rowValue);
@@ -303,7 +360,7 @@ export const setCellData = function (chartElement: any, table: any) {
   });
 };
 
-export const setLongestLabel = function (chartOuter: any) {
+export const setLongestLabel = function (chartOuter: any): void {
   const chartWrapper = chartOuter.querySelector('.chart__wrapper');
   const chartSpacer = chartOuter.querySelector('.chart__spacer span');
   const table = chartOuter.querySelector('.chart table');
@@ -318,14 +375,18 @@ export const setLongestLabel = function (chartOuter: any) {
   chartSpacer.innerHTML = longestLabel;
 };
 
-export const setLongestValue = function (chartOuter: any) {
+export const setLongestValue = function (chartOuter: any): void {
   const chartWrapper = chartOuter.querySelector('.chart__wrapper');
   const table = chartOuter.querySelector('.chart table');
 
   let longestValue = '';
-  Array.from(table.querySelectorAll('tbody tr td:not(:first-child) span')).forEach((td: any) => {
-    if (typeof td.textContent != 'undefined' && td.textContent.length > longestValue.length)
-      longestValue = td.textContent;
+  Array.from(table.querySelectorAll('tbody tr td:not(:first-child)')).forEach((td: any) => {
+    if (
+      typeof td.getAttribute('data-value') != 'undefined' &&
+      td.getAttribute('data-value').length > longestValue.length
+    ) {
+      longestValue = td.getAttribute('data-value');
+    }
   });
   chartWrapper.setAttribute('data-longest-value', longestValue);
 };
@@ -333,7 +394,7 @@ export const setLongestValue = function (chartOuter: any) {
 
 // #region CREATE function
 
-export const createChartKey = function (chartOuter: any, tableElement: any, chartKey: any) {
+export const createChartKey = function (chartOuter: any, tableElement: any, chartKey: any): boolean {
   const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
   //const chartOuter = chartElement.querySelector('.chart__outer');
 
@@ -361,7 +422,7 @@ function createChartKeyItem(
   chartKey: any,
   chartOuter: any,
   previousInput: any
-) {
+): any {
   const input = document.createElement('input');
   input.setAttribute('name', `${chartID}-dataset-${index}`);
   input.setAttribute('id', `${chartID}-dataset-${index}`);
@@ -380,14 +441,19 @@ function createChartKeyItem(
   label.setAttribute('for', `${chartID}-dataset-${index}`);
   label.setAttribute('data-label', `${text}`);
   label.setAttribute('part', `key`);
+
+  const total = chartOuter.querySelector(`tbody tr td:nth-child(${index + 1})`)?.getAttribute('data-numeric');
+
+  label.setAttribute('data-numeric', total);
   label.innerHTML = `${text}`;
   chartKey.append(label);
 
   return previousInput;
 }
 
-export const createChartGuidelines = function (chartElement: any, chartGuidelines: any) {
-  let { min, max, yaxis, guidelines } = getChartData(chartElement);
+export const createChartGuidelines = function (chartElement: any, chartGuidelines: any): any {
+  const { min, max, yaxis } = getChartData(chartElement);
+  let { guidelines } = getChartData(chartElement);
 
   if (!guidelines.length) guidelines = yaxis;
 
@@ -400,7 +466,7 @@ export const createChartGuidelines = function (chartElement: any, chartGuideline
   }
 };
 
-export const createChartYaxis = function (chartElement: any, chartYaxis: any) {
+export const createChartYaxis = function (chartElement: any, chartYaxis: any): void {
   const { min, max, yaxis } = getChartData(chartElement);
 
   chartYaxis.innerHTML = '';
@@ -412,7 +478,7 @@ export const createChartYaxis = function (chartElement: any, chartYaxis: any) {
   }
 };
 
-export const createXaxis = function (chartOuter: any) {
+export const createXaxis = function (chartOuter: any): void {
   const chart = chartOuter.querySelector('.chart');
   let chartXaxis = chartOuter.querySelector('.chart__xaxis');
 
@@ -424,7 +490,7 @@ export const createXaxis = function (chartOuter: any) {
   chart.prepend(chartXaxis);
 };
 
-export const createTooltips = function (chartOuter: any) {
+export const createTooltips = function (chartOuter: any): void {
   const titles = chartOuter.querySelectorAll(
     'thead th[title], tbody th[title]:first-child, tbody td[title]:first-child'
   );
@@ -437,6 +503,92 @@ export const createTooltips = function (chartOuter: any) {
     //title.removeAttribute('title'); // TODO add a supports query for anchor positioning
   });
 };
+
+export const createdoughnuts = function (chartOuter: any): void {
+  let returnString = '';
+  const chartInner = chartOuter.querySelector('.chart');
+  let doughnutWrapper = chartOuter.querySelector('.doughnuts');
+
+  if (!doughnutWrapper) {
+    doughnutWrapper = document.createElement('div');
+    doughnutWrapper.setAttribute('class', 'doughnuts');
+    chartInner.append(doughnutWrapper);
+  }
+
+  Array.from(chartInner.querySelectorAll('tbody tr')).forEach((item: any, index) => {
+    let paths = '';
+    let tooltips = '';
+    let cumulativePercent = 0;
+    let total = 0;
+    const titleKey = item.querySelectorAll('td')[0];
+    const title = titleKey.innerHTML;
+    let doughnutCount = 0;
+    const rowTotal = item.getAttribute('data-numeric');
+
+    // Work out the total amount
+    Array.from(item.querySelectorAll('td')).forEach((td: any, subindex) => {
+      const display = getComputedStyle(td).display;
+
+      if (subindex != 0 && display != 'none') {
+        let value = td.getAttribute('data-numeric');
+
+        value = value.replace('£', '');
+        value = value.replace('%', '');
+        value = value.replace(',', '');
+        value = Number.parseInt(value);
+
+        total += value;
+        doughnutCount++;
+      }
+    });
+
+    // Create the paths
+    Array.from(item.querySelectorAll('td')).forEach((td: any, subindex) => {
+      const display = getComputedStyle(td).display;
+
+      if (subindex != 0 && doughnutCount == 1 && display != 'none') {
+        const pathData = `M 0 0 L 100 0 A 100 100 0 1 1 100 -0.01 L 0 0`;
+
+        paths += `<path d="${pathData}" style="${td.getAttribute('style')} --path-index: ${subindex};"></path>`;
+        tooltips += `<span class="h5 mb-0" part="popover">${ucfirst(unsnake(td.getAttribute('data-label'))).trim()}<br/>${td.hasAttribute('data-second') ? `${td.getAttribute('data-second-label')}: ${td.getAttribute('data-second')}<br/>` : ''}${td.querySelector('[part="popover"]')?.innerHTML}</span>`;
+      } else if (subindex != 0) {
+        let value = td.getAttribute('data-numeric');
+        const hide = display == 'none' ? 'display: none;' : '';
+
+        value = value.replace('£', '');
+        value = value.replace('%', '');
+        value = value.replace(',', '');
+        value = Number.parseInt(value);
+
+        const percent = value / total;
+        const [startX, startY] = getCoordinatesForPercent(cumulativePercent, doughnutCount);
+        const [endX, endY] = getCoordinatesForPercent(cumulativePercent + percent, doughnutCount);
+        const largeArcFlag = percent > 0.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}`, // 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>`;
+        tooltips += `<span class="h5 mb-0" part="popover">${ucfirst(unsnake(td.getAttribute('data-label'))).trim()}<br/>${td.hasAttribute('data-second') ? `${td.getAttribute('data-second-label')}: ${td.getAttribute('data-second')}<br/>` : ''}${td.querySelector('[part="popover"]')?.innerHTML}</span>`;
+
+        // each slice starts where the last slice ended, so keep a cumulative percent
+        if (display != 'none') cumulativePercent += percent;
+      }
+    });
+
+    returnString += `<div class="doughnut">
+  <svg viewBox="-105 -105 210 210" preserveAspectRatio="none" style="--row-index: ${index + 1};">${paths}</svg>
+  <div class="doughnut__title" data-numeric="${rowTotal}"><span class="h5 mb-0">${title}</span></div>
+  <div class="tooltips">${tooltips}</div>
+</div>`;
+  });
+
+  doughnutWrapper.innerHTML = returnString;
+};
+
 // #endregion
 
 export default setupChart;

package/assets/ts/modules/chart.ts

@@ -1,7 +1,7 @@
 import { ucfirst, unsnake, numberOfDays } from './helpers';
 
 // #region Functions that setup and trigger other functions
-export const setupChart = (chartElement: any, chartOuter: any, tableElement: any) => {
+export const setupChart = (chartElement: any, chartOuter: any, tableElement: any): boolean => {
   // #region Reset the chart
   // empty divs to re-populate
   const chartOptions = chartOuter.querySelector('.chart__options');
@@ -62,7 +62,7 @@ export const setupChart = (chartElement: any, chartOuter: any, tableElement: any
 // #endregion
 
 // #region Event handlers and observers
-export const setEventHandlers = function (chartElement: any, chartOuter: any) {
+export const setEventHandlers = function (chartElement: any, chartOuter: any): void {
   const showData = chartOuter.querySelectorAll(':scope > input[type="checkbox"]');
 
   const { type } = getChartData(chartElement, chartOuter);
@@ -89,13 +89,13 @@ export const setEventHandlers = function (chartElement: any, chartOuter: any) {
   */
 };
 
-export const setEventObservers = function (chartElement: any, chartOuter: any) {
+export const setEventObservers = function (chartElement: any, chartOuter: any): boolean {
   if (chartElement.hasAttribute('data-series')) return false;
 
   const table = chartElement.querySelector('table');
   const newTable = chartOuter.querySelector('table');
 
-  const attributesUpdated = (mutationList: any, observer: any) => {
+  const attributesUpdated = (mutationList: any, observer: any): void => {
     observer.disconnect();
     observer2.disconnect();
 
@@ -114,7 +114,7 @@ export const setEventObservers = function (chartElement: any, chartOuter: any) {
     observer2.observe(chartElement, { attributes: true });
   };
 
-  const tableUpdated = (mutationList: any, observer: any) => {
+  const tableUpdated = (mutationList: any, observer: any): boolean => {
     observer.disconnect();
     observer2.disconnect();
 
@@ -140,7 +140,7 @@ export const setEventObservers = function (chartElement: any, chartOuter: any) {
 // #endregion
 
 // #region GET functions
-export const getChartData = function (chartElement: any, chartOuter: any) {
+export const getChartData = function (chartElement: any, chartOuter: any): any {
   const table = chartOuter.querySelector('.chart__wrapper table');
 
   const min: any = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
@@ -188,7 +188,7 @@ export const getChartData = function (chartElement: any, chartOuter: any) {
   };
 };
 
-function getLargestValue(table: any) {
+function getLargestValue(table: any): number {
   const values = Array.from(table.querySelectorAll('tbody td:not(:first-child)')).map((element: any) => {
     let currentValue: string | number = String(element.textContent);
     currentValue = currentValue.replace('£', '');
@@ -205,7 +205,7 @@ function getLargestValue(table: any) {
   return Math.ceil(largetValue);
 }
 
-const getValues = function (value: number, min: any, max: any, start?: number) {
+const getValues = function (value: number, min: any, max: any, start?: number): any {
   let cleanValue: string | number = String(value);
   cleanValue = cleanValue.replace('£', '');
   cleanValue = cleanValue.replace('%', '');
@@ -237,7 +237,7 @@ const getValues = function (value: number, min: any, max: any, start?: number) {
   return { percent, axis, bottom };
 };
 
-function getCoordinatesForPercent(percent: number, pieCount: number) {
+function getCoordinatesForPercent(percent: number, pieCount: number): any {
   // This moves the start point to the top middle point like a clock
   if (pieCount > 1) percent = percent - 0.25;
 
@@ -249,7 +249,7 @@ function getCoordinatesForPercent(percent: number, pieCount: number) {
 // #endregion
 
 // #region SET functions - set data attributes and classes
-export const setCellData = function (chartElement: any, chartOuter: any, table: any) {
+export const setCellData = function (chartElement: any, chartOuter: any, table: any): void {
   let { min, max } = getChartData(chartElement, chartOuter);
 
   const chartType = chartElement.getAttribute('data-type');
@@ -457,7 +457,7 @@ export const setCellData = function (chartElement: any, chartOuter: any, table:
   });
 };
 
-export const setLongestLabel = function (chartOuter: any) {
+export const setLongestLabel = function (chartOuter: any): void {
   const chartWrapper = chartOuter.querySelector('.chart__wrapper');
   const table = chartOuter.querySelector('.chart table');
   // set the longest label attr so that the bar chart knows what margin to set on the left
@@ -478,7 +478,7 @@ export const setLongestLabel = function (chartOuter: any) {
 // #endregion
 
 // #region CREATE function
-export const createTypeSwitcher = function (chartElement: any, chartKey: any, chartOptions: any) {
+export const createTypeSwitcher = function (chartElement: any, chartKey: any, chartOptions: any): void {
   const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
   const availableTypes = chartElement.hasAttribute('data-types')
     ? chartElement.getAttribute('data-types').split(',')
@@ -507,7 +507,7 @@ export const createTypeSwitcher = function (chartElement: any, chartKey: any, ch
   }
 };
 
-export const createChartKey = function (chartOuter: any, tableElement: any, chartKey: any) {
+export const createChartKey = function (chartOuter: any, tableElement: any, chartKey: any): void | boolean {
   const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
   //const chartOuter = chartElement.querySelector('.chart__outer');
 
@@ -535,7 +535,7 @@ function createChartKeyItem(
   chartKey: any,
   chartOuter: any,
   previousInput: any
-) {
+): any {
   const input = document.createElement('input');
   input.setAttribute('name', `${chartID}-dataset-${index}`);
   input.setAttribute('id', `${chartID}-dataset-${index}`);
@@ -557,8 +557,9 @@ function createChartKeyItem(
   return previousInput;
 }
 
-export const createChartGuidelines = function (chartElement: any, chartOuter: any, chartGuidelines: any) {
-  let { min, max, yaxis, increment, guidelines } = getChartData(chartElement, chartOuter);
+export const createChartGuidelines = function (chartElement: any, chartOuter: any, chartGuidelines: any): void {
+  const { increment, guidelines } = getChartData(chartElement, chartOuter);
+  let { min, max, yaxis } = getChartData(chartElement, chartOuter);
 
   if (guidelines.length) yaxis = guidelines;
 
@@ -586,8 +587,9 @@ export const createChartGuidelines = function (chartElement: any, chartOuter: an
   }
 };
 
-export const createChartYaxis = function (chartElement: any, chartOuter: any, chartYaxis: any) {
-  let { min, max, yaxis, increment } = getChartData(chartElement, chartOuter);
+export const createChartYaxis = function (chartElement: any, chartOuter: any, chartYaxis: any): void {
+  const { yaxis, increment } = getChartData(chartElement, chartOuter);
+  let { min, max } = getChartData(chartElement, chartOuter);
 
   const startDay = min;
 
@@ -614,7 +616,7 @@ export const createChartYaxis = function (chartElement: any, chartOuter: any, ch
   }
 };
 
-export const createXaxis = function (chartElement: any, chartOuter: any, xaxis: any) {
+export const createXaxis = function (chartElement: any, chartOuter: any, xaxis: any): void {
   const chart = chartOuter.querySelector('.chart');
   let chartXaxis = chartOuter.querySelector('.chart__xaxis');
 
@@ -636,7 +638,7 @@ export const createXaxis = function (chartElement: any, chartOuter: any, xaxis:
   chart.prepend(chartXaxis);
 };
 
-export const createLines = function (chartElement: any, chartOuter: any) {
+export const createLines = function (chartElement: any, chartOuter: any): void {
   const { min, max } = getChartData(chartElement, chartOuter);
 
   const chartType = chartElement.getAttribute('data-type');
@@ -702,7 +704,7 @@ export const createLines = function (chartElement: any, chartOuter: any) {
   linesWrapper.innerHTML = returnString;
 };
 
-export const createPies = function (chartOuter: any) {
+export const createPies = function (chartOuter: any): void {
   let returnString = '';
   const chartInner = chartOuter.querySelector('.chart');
   let pieWrapper = chartOuter.querySelector('.pies');
@@ -782,7 +784,7 @@ export const createPies = function (chartOuter: any) {
   pieWrapper.innerHTML = returnString;
 };
 
-export const createSlope = function (chartElement: any, chartOuter: any) {
+export const createSlope = function (chartElement: any, chartOuter: any): void {
   let n: number = 0;
   let totalX: number = 0;
   let totalY: number = 0;
@@ -835,7 +837,7 @@ export const createSlope = function (chartElement: any, chartOuter: any) {
   slopeWrapper.innerHTML = `<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none"><path fill="none" d="M 0 ${100 - firstYPercent} L 200 ${100 - lastYPercent}" style="--path: path('M 0 100 L 200 100');"></path></svg>`;
 };
 
-function createKeyTotals(chartElement: any, chartOuter: any) {
+function createKeyTotals(chartElement: any, chartOuter: any): void {
   let chartTotal = 0;
 
   Array.from(
@@ -869,7 +871,7 @@ function createKeyTotals(chartElement: any, chartOuter: any) {
 
     if (chartElement.hasAttribute('data-currency')) {
       if (chartElement.getAttribute('data-currency') == 'GBP') {
-        // @ts-ignore
+        // @ts-expect-error Not sure
         keyTotal = new Intl.NumberFormat('en-GB', {
           style: 'currency',
           currency: 'GBP',

package/assets/ts/modules/dialogs.ts

@@ -1,6 +1,5 @@
-// @ts-nocheck
-const extendDialogs = (body) => {
-  Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
+const extendDialogs = (body): void => {
+  Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog) => {
     const parent = dialog.closest('.dialog__wrapper');
 
     if (!parent) {
@@ -36,7 +35,7 @@ const extendDialogs = (body) => {
       }
 
       // 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) => {
+      Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element) => {
         const id = element.getAttribute('data-duplicate');
         const originalInput = document.getElementById(id);
 
@@ -62,7 +61,7 @@ const extendDialogs = (body) => {
       dialog.close();
 
       // Remove active class from exiting active buttons
-      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
+      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
         btnElement.classList.remove('active');
       });
 
@@ -86,7 +85,7 @@ const extendDialogs = (body) => {
       const dialog = event.target.closest('dialog[open]');
 
       // Remove active class from exiting active buttons
-      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
+      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
         btnElement.classList.remove('active');
       });
 
@@ -152,7 +151,7 @@ const extendDialogs = (body) => {
       }
 
       // Remove active class from exiting active buttons
-      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
+      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
         btnElement.removeAttribute('aria-expanded');
       });
 
@@ -219,18 +218,16 @@ const extendDialogs = (body) => {
       if (document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]'))
         document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]').close();
 
-      Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach(
-        (btnElement, index) => {
-          btnElement.removeAttribute('aria-expanded');
-        }
-      );
+      Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach((btnElement) => {
+        btnElement.removeAttribute('aria-expanded');
+      });
     }
   });
 
   return null;
 };
 
-export const createDialog = (dialog) => {
+export const createDialog = (dialog): void => {
   // 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.querySelector('iam-multi-step')) {
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;

package/assets/ts/modules/drawer.ts

@@ -1,5 +1,4 @@
-// @ts-nocheck
-const drawer = (element) => {
+const drawer = (): void => {
   const observer = new IntersectionObserver(
     function ([e]) {
       e.target.classList.toggle('in-view', e.intersectionRatio > 0);