@iamproperty/components 7.1.0--beta6 → 7.2.0

package/assets/js/modules/chart.module.js

@@ -1,3 +1,4 @@
+import { ucfirst, unsnake } from './helpers.js';
 // #region Functions that setup and trigger other functions
 export const addClasses = (chartElement, chartOuter) => {
     // add colour classes
@@ -16,6 +17,10 @@ export const addClasses = (chartElement, chartOuter) => {
     return true;
 };
 export const setupChart = (chartElement, chartOuter, tableElement) => {
+    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');
@@ -39,6 +44,21 @@ export const setupChart = (chartElement, chartOuter, tableElement) => {
     }
     return true;
 };
+export const setupDoughnutChart = (chartElement, chartOuter, tableElement) => {
+    // #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) => {
+        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, chartOuter) {
@@ -81,6 +101,9 @@ export const setEventListener = function (chartElement, chartOuter) {
         });
         shadowTable.innerHTML = table.innerHTML;
         setCellData(chartElement, shadowTable);
+        if (chartElement.tagName == 'IAM-DOUGHNUTCHART') {
+            createdoughnuts(chartOuter);
+        }
     });
 };
 export const setEventObservers = function (chartElement, chartOuter) {
@@ -116,6 +139,14 @@ export const setEventObservers = function (chartElement, chartOuter) {
     observer2.observe(chartElement, { attributes: true });
     return true;
 };
+function getCoordinatesForPercent(percent, doughnutCount) {
+    // 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) {
@@ -185,12 +216,24 @@ export const setCellData = function (chartElement, table) {
         let rowValue = 0;
         // Set the data numeric value if not set
         Array.from(tr.querySelectorAll('td:not(:first-child)')).forEach((td) => {
-            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) => {
+                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, index) => {
+                if (index == 0) {
+                    element.insertAdjacentHTML('beforeBegin', '<hr/>');
+                }
+                element.classList.add('btn');
+                element.classList.add('btn-tertiary');
+            });
         });
         tr.setAttribute('data-numeric', rowValue);
     });
@@ -255,9 +298,11 @@ export const setLongestValue = function (chartOuter) {
     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) => {
-        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) => {
+        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);
 };
@@ -279,6 +324,7 @@ export const createChartKey = function (chartOuter, tableElement, chartKey) {
     return true;
 };
 function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previousInput) {
+    var _a;
     const input = document.createElement('input');
     input.setAttribute('name', `${chartID}-dataset-${index}`);
     input.setAttribute('id', `${chartID}-dataset-${index}`);
@@ -296,12 +342,15 @@ function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previous
     label.setAttribute('for', `${chartID}-dataset-${index}`);
     label.setAttribute('data-label', `${text}`);
     label.setAttribute('part', `key`);
+    const total = (_a = chartOuter.querySelector(`tbody tr td:nth-child(${index + 1})`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-numeric');
+    label.setAttribute('data-numeric', total);
     label.innerHTML = `${text}`;
     chartKey.append(label);
     return previousInput;
 }
 export const createChartGuidelines = function (chartElement, chartGuidelines) {
-    let { min, max, yaxis, guidelines } = getChartData(chartElement);
+    const { min, max, yaxis } = getChartData(chartElement);
+    let { guidelines } = getChartData(chartElement);
     if (!guidelines.length)
         guidelines = yaxis;
     chartGuidelines.innerHTML = '';
@@ -337,5 +386,77 @@ export const createTooltips = function (chartOuter) {
         //title.removeAttribute('title'); // TODO add a supports query for anchor positioning
     });
 };
+export const createdoughnuts = function (chartOuter) {
+    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, 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, 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, subindex) => {
+            var _a, _b;
+            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/>` : ''}${(_a = td.querySelector('[part="popover"]')) === null || _a === void 0 ? void 0 : _a.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/>` : ''}${(_b = td.querySelector('[part="popover"]')) === null || _b === void 0 ? void 0 : _b.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/js/modules/dialogs.js

@@ -1,6 +1,5 @@
-// @ts-nocheck
 const extendDialogs = (body) => {
-    Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
+    Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog) => {
         const parent = dialog.closest('.dialog__wrapper');
         if (!parent) {
             dialog.removeAttribute('open');
@@ -29,7 +28,7 @@ const extendDialogs = (body) => {
                 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) => {
+            Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element) => {
                 const id = element.getAttribute('data-duplicate');
                 const originalInput = document.getElementById(id);
                 if (element.checked != originalInput.checked) {
@@ -50,7 +49,7 @@ const extendDialogs = (body) => {
             event.preventDefault();
             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');
             });
             const closeEvent = new CustomEvent('dialog-closed', {
@@ -69,7 +68,7 @@ const extendDialogs = (body) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('button[formmethod="dialog"]')) {
             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');
             });
             window.dataLayer = window.dataLayer || [];
@@ -120,7 +119,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');
             });
             if (popover.hasAttribute('open')) {
@@ -171,7 +170,7 @@ const extendDialogs = (body) => {
             !event.target.closest('.dialog__wrapper > button')) {
             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) => {
+            Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach((btnElement) => {
                 btnElement.removeAttribute('aria-expanded');
             });
         }

package/assets/js/modules/drawer.js

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

package/assets/js/modules/dynamicEvents.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 // Create the event listeners
 const createDynamicEvents = () => {
     // Change event
@@ -26,7 +25,7 @@ const splitEvents = (element, events) => {
     if (!events)
         return false;
     // Split out each event
-    Array.from(JSON.parse(events)).forEach((event, index) => {
+    Array.from(JSON.parse(events)).forEach((event) => {
         checkConditions(element, event);
     });
 };
@@ -62,7 +61,7 @@ const runEvent = (element, event, eventType) => {
             if (document.querySelector(event['target'])) {
                 const hideElement = document.querySelector(event['target']);
                 hideElement.classList.add('js-hide');
-                Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+                Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input) => {
                     input.removeAttribute('required');
                 });
             }
@@ -71,7 +70,7 @@ const runEvent = (element, event, eventType) => {
             if (document.querySelector(event['target'])) {
                 const showElement = document.querySelector(event['target']);
                 showElement.classList.remove('js-hide');
-                Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+                Array.from(showElement.querySelectorAll('[data-required]')).forEach((input) => {
                     if (!input.closest('.js-hide'))
                         input.setAttribute('required', 'true');
                 });
@@ -85,7 +84,7 @@ const runEvent = (element, event, eventType) => {
             document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
             break;
         case 'setAttribute':
-            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element, index) {
+            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element) {
                 element.setAttribute(event['attribute'], event['value']);
             });
             break;
@@ -93,7 +92,7 @@ const runEvent = (element, event, eventType) => {
             document.querySelector(`${event['target']}`).focus();
             break;
         case 'removeAttribute':
-            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element, index) {
+            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element) {
                 element.removeAttribute(event['attribute']);
             });
             break;
@@ -118,7 +117,7 @@ const populateForm = function (element, event) {
     const form = document.querySelector(event['target']);
     if (!values)
         return false;
-    Object.keys(values).forEach((field, index) => {
+    Object.keys(values).forEach((field) => {
         if (document.getElementById(field) && document.getElementById(field).tagName == 'SPAN')
             document.getElementById(field).innerHTML = values[field];
         if (form.querySelector(`select[name="${field}"] [value="${values[field]}"]`)) {
@@ -127,7 +126,7 @@ const populateForm = function (element, event) {
                 form.querySelector(`select[name="${field}"]`).disabled = true;
         }
         else if (form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`)) {
-            Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function (input, index) {
+            Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function (input) {
                 input.disabled = true;
             });
             form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`).checked = true;

package/assets/js/modules/fileupload.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 function fileupload(fileupload, wrapper) {
     const filesWrapper = wrapper.querySelector('.files');
     const dropArea = wrapper.querySelector('.drop-area');
@@ -20,7 +19,6 @@ function fileupload(fileupload, wrapper) {
     };
     wrapper.addEventListener('click', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {
-            const button = event.target.closest('.btn-primary');
             // If the input allows multiples then use the buffer clone input
             errorMsgExt.classList.remove('d-block');
             errorMsgSize.classList.remove('d-block');
@@ -41,10 +39,12 @@ function fileupload(fileupload, wrapper) {
             input.files = dt.files; // Assign the updates list
             const changeEvent = new Event('change');
             input.dispatchEvent(changeEvent);
+            const fileRemovedEvent = new CustomEvent('fileRemoved', { detail: { removedFile: button === null || button === void 0 ? void 0 : button.dataset.file } });
+            fileupload.dispatchEvent(fileRemovedEvent);
         }
     });
     // Buffer input change event
-    cloneInput.addEventListener('change', (event) => {
+    cloneInput.addEventListener('change', () => {
         if (input.hasAttribute('multiple')) {
             const filesArray = [...input.files, ...cloneInput.files];
             const fileNames = [];
@@ -70,16 +70,16 @@ function fileupload(fileupload, wrapper) {
         const changeEvent = new Event('change');
         input.dispatchEvent(changeEvent);
     });
-    cloneInput.addEventListener('dragenter', (event) => {
+    cloneInput.addEventListener('dragenter', () => {
         cloneInput.classList.add('focus');
     });
-    cloneInput.addEventListener('dragleave', (event) => {
+    cloneInput.addEventListener('dragleave', () => {
         cloneInput.classList.remove('focus');
     });
-    cloneInput.addEventListener('drop', (event) => {
+    cloneInput.addEventListener('drop', () => {
         cloneInput.classList.remove('focus');
     });
-    input.addEventListener('change', (event) => {
+    input.addEventListener('change', () => {
         if (input.files.length == 1) {
             const file = input.files[0];
             const size = file.size / 1000;

package/assets/js/modules/filterlist.js

@@ -1,22 +1,21 @@
-// @ts-nocheck
 function filterlist(list, input) {
     addFilterlistEventListeners(list, input);
 }
 function addFilterlistEventListeners(list, input) {
     let timer;
-    input.addEventListener('keyup', (event) => {
+    input.addEventListener('keyup', () => {
         clearTimeout(timer);
         timer = setTimeout(function () {
             filterTheList(list, input.value);
         }, 500);
     });
-    input.addEventListener('change', (event) => {
+    input.addEventListener('change', () => {
         clearTimeout(timer);
         filterTheList(list, input.value);
     });
 }
 export const filterTheList = function (list, searchTerm) {
-    Array.from(list.querySelectorAll(':scope > li')).forEach((item, index) => {
+    Array.from(list.querySelectorAll(':scope > li')).forEach((item) => {
         const content = item.textContent.toLowerCase();
         item.classList.add('d-none');
         if (content.includes(searchTerm.toLowerCase()))

package/assets/js/modules/form.js

@@ -1,25 +1,24 @@
-// @ts-nocheck
 // Create a link between two input/selects with one acting as setting a minimum value and the second a maximum
 // The link between the two will prevent the max input field form setting a lower value than the min and vice versa
 function inputRange(inputWrapper) {
-    inputWrapper.addEventListener('change', function (e) {
+    inputWrapper.addEventListener('change', function () {
         const min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
         const max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
         // Set attributes for input fields
-        Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input, index) => {
+        Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input) => {
             input.setAttribute('max', max);
         });
-        Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input, index) => {
+        Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input) => {
             input.setAttribute('min', min);
         });
         // Hide select options if they are higher or lower than the min and max values
-        Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option, index) => {
+        Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option) => {
             if (parseInt(option.getAttribute('value')) > max)
                 option.classList.add('d-none');
             else
                 option.classList.remove('d-none');
         });
-        Array.from(inputWrapper.querySelectorAll('[data-max] select option')).forEach((option, index) => {
+        Array.from(inputWrapper.querySelectorAll('[data-max] select option')).forEach((option) => {
             if (parseInt(option.getAttribute('value')) < min)
                 option.classList.add('d-none');
             else
@@ -28,7 +27,7 @@ function inputRange(inputWrapper) {
     }, false);
 }
 function inputRedirect(inputWrapper) {
-    inputWrapper.addEventListener('change', function (e) {
+    inputWrapper.addEventListener('change', function () {
         if (inputWrapper.matches('[data-value-if]')) {
             const url = inputWrapper.getAttribute('data-redirect');
             const desiredValue = inputWrapper.getAttribute('data-value-if');
@@ -72,13 +71,13 @@ function multipleFileUploads(wrapper) {
 // Acts as an overall initialise function to trigger other functions.
 function form(formElement) {
     // Check for input range groups
-    Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement, index) => {
+    Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement) => {
         inputRange(arrayElement);
     });
-    Array.from(formElement.querySelectorAll('[data-redirect]')).forEach((arrayElement, index) => {
+    Array.from(formElement.querySelectorAll('[data-redirect]')).forEach((arrayElement) => {
         inputRedirect(arrayElement);
     });
-    Array.from(formElement.querySelectorAll('.multiple-file-uploads')).forEach((arrayElement, index) => {
+    Array.from(formElement.querySelectorAll('.multiple-file-uploads')).forEach((arrayElement) => {
         multipleFileUploads(arrayElement);
     });
     // Check the file size of a file when uploaded in case it exceeds the max file size set
@@ -95,9 +94,9 @@ function form(formElement) {
         }
     }, false);
     // When a form is updated we may want to update some of the existing input fields; setting active fields when some data is selected.
-    formElement.addEventListener('change', function (e) {
+    formElement.addEventListener('change', function () {
         // Remove disabled attribute when a pre-selected input field equals a certain value
-        Array.from(formElement.querySelectorAll('select[data-activeif][data-equals],input[data-activeif][data-equals]')).forEach((arrayElement, index) => {
+        Array.from(formElement.querySelectorAll('select[data-activeif][data-equals],input[data-activeif][data-equals]')).forEach((arrayElement) => {
             const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
             const selector = arrayElement.dataset.activeif;
             const value = arrayElement.dataset.equals;
@@ -111,7 +110,7 @@ function form(formElement) {
             }
         });
         // Show this input wrapper when a pre-selected input field equals a certain value
-        Array.from(formElement.querySelectorAll('.form-control__wrapper[data-displayif][data-equals]')).forEach((arrayElement, index) => {
+        Array.from(formElement.querySelectorAll('.form-control__wrapper[data-displayif][data-equals]')).forEach((arrayElement) => {
             const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
             const selector = arrayElement.dataset.activeif;
             const value = arrayElement.dataset.equals;

package/assets/js/modules/helpers.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * Global helper functions to help maintain and enhance framework elements.
  * @module Helpers
@@ -12,7 +11,6 @@ export const addBodyClasses = (body) => {
     if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
         body.classList.add('ie');
     }
-    return null;
 };
 /**
  * Add global events.
@@ -53,7 +51,7 @@ export const addGlobalEvents = (body) => {
         if (event && event.target instanceof HTMLElement && event.target.matches('form')) {
             const form = event.target;
             // Reset password types
-            Array.from(form.querySelectorAll('[data-password-type]')).forEach((input, index) => {
+            Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {
                 input.setAttribute('type', 'password');
             });
             if (form.querySelector(':invalid') ||
@@ -76,11 +74,10 @@ export const addGlobalEvents = (body) => {
             }
         }
     });
-    Array.from(document.querySelectorAll('label progress')).forEach((progress, index) => {
+    Array.from(document.querySelectorAll('label progress')).forEach((progress) => {
         const label = progress.closest('label');
         label.setAttribute('data-percent', progress.getAttribute('value'));
     });
-    return null;
 };
 export const isNumeric = function (str) {
     if (typeof str != 'string')
@@ -120,6 +117,7 @@ export const numberOfDays = function (startDateString, endDateString) {
 };
 // Used to get values from nested json objects
 export const resolvePath = (object, path, defaultValue) => path
+    // eslint-disable-next-line no-useless-escape
     .split(/[\.\[\]\'\"]/)
     .filter((p) => p)
     .reduce((o, p) => (o ? o[p] : defaultValue), object);

package/assets/js/modules/inputs.js

@@ -1,13 +1,12 @@
-// @ts-nocheck
 import hibpCheck from '../vendor/hibp.js';
 const extendInputs = (body) => {
     function loadInput() {
         // maxlength counter init
-        Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input, index) => {
+        Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input) => {
             const wrapper = input.parentElement;
             setMaxlengthVars(input, wrapper);
         });
-        Array.from(document.querySelectorAll('label input')).forEach((input, index) => {
+        Array.from(document.querySelectorAll('label input')).forEach((input) => {
             if (!input.closest('label').querySelector('.optional-text') && !input.hasAttribute('required')) {
                 if (input.parentNode.tagName.toLowerCase() == 'span')
                     input.parentElement.insertAdjacentHTML('beforebegin', `<span class="optional-text"></span>`);
@@ -24,7 +23,7 @@ const extendInputs = (body) => {
                 const day = String(date.getDate()).padStart(2, '0');
                 return `${year}-${month}-${day}`;
             }
-            Array.from(document.querySelectorAll('input[type="date"]')).forEach((input, index) => {
+            Array.from(document.querySelectorAll('input[type="date"]')).forEach((input) => {
                 const startDate = today;
                 if (input.hasAttribute('data-start')) {
                     startDate.setDate(startDate.getDate() + parseInt(input.getAttribute('data-start')));
@@ -38,7 +37,7 @@ const extendInputs = (body) => {
                 }
                 if (input.hasAttribute('data-allowed-days')) {
                     const allowedDays = JSON.parse(`[${input.getAttribute('data-allowed-days')}]`);
-                    input.addEventListener('input', function (e) {
+                    input.addEventListener('input', function () {
                         const day = new Date(this.value).getUTCDay();
                         if (allowedDays.includes(day))
                             input.setCustomValidity('');
@@ -60,7 +59,6 @@ const extendInputs = (body) => {
     body.addEventListener('input', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('input,textarea,select')) {
             const input = event.target.closest('input,textarea,select');
-            const wrapper = input.parentElement;
             // Output the color hex
             if (input.hasAttribute('type') && input.getAttribute('type') == 'color')
                 input.nextElementSibling.value = input.value;
@@ -81,11 +79,10 @@ const extendInputs = (body) => {
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('dialog [type="radio"]')) {
             const dialog = event.target.closest('dialog');
-            const radio = event.target.closest('dialog [type="radio"]');
-            Array.from(dialog.querySelectorAll('[type="radio"][autofocus]')).forEach((input, index) => {
+            Array.from(dialog.querySelectorAll('[type="radio"][autofocus]')).forEach((input) => {
                 input.removeAttribute('autofocus');
             });
-            Array.from(dialog.querySelectorAll('[type="radio"]:checked')).forEach((input, index) => {
+            Array.from(dialog.querySelectorAll('[type="radio"]:checked')).forEach((input) => {
                 input.setAttribute('autofocus', true);
             });
         }

package/assets/js/modules/nav.js

@@ -1,11 +1,10 @@
-// @ts-nocheck
 const navbar = (element) => {
-    Array.from(element.querySelectorAll('details')).forEach((detail, index) => {
-        detail.addEventListener('mouseenter', function (e) {
+    Array.from(element.querySelectorAll('details')).forEach((detail) => {
+        detail.addEventListener('mouseenter', function () {
             if (window.matchMedia('(min-width: 62em)').matches)
                 detail.setAttribute('open', 'true');
         }, false);
-        detail.addEventListener('mouseleave', function (e) {
+        detail.addEventListener('mouseleave', function () {
             if (window.matchMedia('(min-width: 62em)').matches)
                 detail.removeAttribute('open');
         }, false);

package/assets/js/modules/notification.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 function setupNotification(element) {
     // Add toast to notification holder
     if (element.hasAttribute('data-type') && element.getAttribute('data-type') == 'toast') {
@@ -28,10 +27,10 @@ function setupNotification(element) {
         const timer = new Timer(function () {
             closeNotification(element);
         }, timeOut);
-        element.addEventListener('mouseenter', (event) => {
+        element.addEventListener('mouseenter', () => {
             timer.pause();
         });
-        element.addEventListener('mouseleave', (event) => {
+        element.addEventListener('mouseleave', () => {
             timer.resume();
         });
     }

package/assets/js/modules/orderablelist.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 function orderlist(list) {
     const randID = 'list_' + Math.random().toString(36).substr(2, 9);
     const listItems = list.querySelectorAll('li');