@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -1,14 +1,14 @@
-// #region Functions that setup and trigger other functions 
+// #region Functions that setup and trigger other functions
 export const addClasses = (chartElement, chartOuter) => {
     // add colour classes
     for (let i = 1; i <= 10; i++) {
         if (chartElement.hasAttribute(`data-colour-${i}`)) {
-            let colour = chartElement.getAttribute(`data-colour-${i}`);
+            const colour = chartElement.getAttribute(`data-colour-${i}`);
             chartElement.style.setProperty(`--chart-colour-${i}`, `var(--chart-colour-${colour})`);
             chartElement.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);
         }
         Array.from(chartOuter.querySelectorAll(`[data-colour-${i}]`)).forEach((element) => {
-            let colour = element.getAttribute(`data-colour-${i}`);
+            const colour = element.getAttribute(`data-colour-${i}`);
             element.style.setProperty(`--chart-colour-${i}-set`, `var(--chart-colour-${colour})`);
             element.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);
         });
@@ -25,9 +25,11 @@ export const setupChart = (chartElement, chartOuter, tableElement) => {
     const chartYaxis = chartOuter.querySelector('.chart__yaxis');
     chartYaxis.innerHTML = ``;
     // Remove old input fields
-    Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map((element) => { element.remove(); });
+    Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map((element) => {
+        element.remove();
+    });
     // #endregion
-    let { xaxis } = getChartData(chartElement);
+    const { xaxis } = getChartData(chartElement);
     setCellData(chartElement, tableElement);
     createChartKey(chartOuter, tableElement, chartKey);
     createChartGuidelines(chartElement, chartGuidelines);
@@ -40,33 +42,34 @@ export const setupChart = (chartElement, chartOuter, tableElement) => {
 // #endregion
 // #region Event handlers and observers
 export const setEventListener = function (chartElement, chartOuter) {
-    let chart = chartOuter.querySelector('.chart');
+    const chart = chartOuter.querySelector('.chart');
     chart.addEventListener('mousemove', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('td:not(:first-child')) {
-            let column = event.target.closest('td:not(:first-child');
-            var rect = column.getBoundingClientRect();
-            let x = event.clientX - rect.left;
-            let y = event.clientY - rect.top;
+            const column = event.target.closest('td:not(:first-child');
+            const rect = column.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
             chart.setAttribute('style', `--cursor-x: ${x}px; --cursor-y: ${y}px;`);
         }
     });
     // Use the part for the chart items to pass through states to the pages CSS
-    let labels = chartOuter.querySelectorAll('label');
+    const labels = chartOuter.querySelectorAll('label');
     Array.from(labels).forEach((label) => {
         if (chartOuter.querySelector(`input#${label.getAttribute('for')}`).checked)
             label.setAttribute('part', 'key-checked');
         else
             label.setAttribute('part', 'key-unchecked');
     });
-    let table = chartElement.querySelector('table');
-    let shadowTable = chartOuter.querySelector('table');
+    const table = chartElement.querySelector('table');
+    const shadowTable = chartOuter.querySelector('table');
     chartOuter.addEventListener('change', function (event) {
-        let eventTarget = event.target;
-        const customEvent = new CustomEvent("view-change", { detail: {
+        const eventTarget = event.target;
+        const customEvent = new CustomEvent('view-change', {
+            detail: {
                 'data-dataset': eventTarget.getAttribute('data-dataset'),
-                'label': eventTarget.getAttribute('data-label'),
-                'checked': eventTarget.checked
-            }
+                label: eventTarget.getAttribute('data-label'),
+                checked: eventTarget.checked,
+            },
         });
         chartElement.dispatchEvent(customEvent);
         Array.from(labels).forEach((label) => {
@@ -81,13 +84,13 @@ export const setEventListener = function (chartElement, chartOuter) {
     });
 };
 export const setEventObservers = function (chartElement, chartOuter) {
-    let table = chartElement.querySelector('table');
-    let shadowTable = chartOuter.querySelector('table');
+    const table = chartElement.querySelector('table');
+    const shadowTable = chartOuter.querySelector('table');
     const attributesUpdated = (mutationList, observer) => {
         observer.disconnect();
         observer2.disconnect();
         for (const mutation of mutationList) {
-            if (mutation.attributeName == 'class' || (mutation.type === 'attributes') || mutation.type === 'attributes') {
+            if (mutation.attributeName == 'class' || mutation.type === 'attributes' || mutation.type === 'attributes') {
                 shadowTable.innerHTML = table.innerHTML;
                 setupChart(chartElement, chartOuter, shadowTable);
             }
@@ -99,7 +102,7 @@ export const setEventObservers = function (chartElement, chartOuter) {
         observer.disconnect();
         observer2.disconnect();
         for (const mutation of mutationList) {
-            if (mutation.type == "characterData" || (mutation.type == "childList" && mutation.addedNodes.length)) {
+            if (mutation.type == 'characterData' || (mutation.type == 'childList' && mutation.addedNodes.length)) {
                 shadowTable.innerHTML = table.innerHTML;
                 setupChart(chartElement, chartOuter, shadowTable);
             }
@@ -107,8 +110,8 @@ export const setEventObservers = function (chartElement, chartOuter) {
         observer.observe(table, { characterData: true, subtree: true });
         observer2.observe(chartElement, { attributes: true });
     };
-    let observer = new MutationObserver(tableUpdated);
-    let observer2 = new MutationObserver(attributesUpdated);
+    const observer = new MutationObserver(tableUpdated);
+    const observer2 = new MutationObserver(attributesUpdated);
     observer.observe(table, { characterData: true, subtree: true });
     observer2.observe(chartElement, { attributes: true });
     return true;
@@ -116,15 +119,21 @@ export const setEventObservers = function (chartElement, chartOuter) {
 // #endregion
 // #region GET functions
 export const getChartData = function (chartElement) {
-    let table = chartElement.shadowRoot.querySelector('.chart__wrapper table');
-    let min = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
-    let max = chartElement.hasAttribute('data-max') ? chartElement.getAttribute('data-max') : getLargestValue(chartElement, table);
+    const table = chartElement.shadowRoot.querySelector('.chart__wrapper table');
+    const min = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
+    const max = chartElement.hasAttribute('data-max')
+        ? chartElement.getAttribute('data-max')
+        : getLargestValue(chartElement, table);
     //let type:string = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
-    let yaxis = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];
-    let guidelines = chartElement.hasAttribute('data-guidelines') ? chartElement.getAttribute('data-guidelines').split(',') : [];
+    const yaxis = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];
+    const guidelines = chartElement.hasAttribute('data-guidelines')
+        ? chartElement.getAttribute('data-guidelines').split(',')
+        : [];
     //let targets:any = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;
     //let events:any = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;
-    let xaxis = chartElement.hasAttribute('data-xaxis') ? chartElement.getAttribute('data-xaxis').split(',') : null;
+    const xaxis = chartElement.hasAttribute('data-xaxis')
+        ? chartElement.getAttribute('data-xaxis').split(',')
+        : null;
     //let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment'): null;
     //let start:any = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
     //let end:any = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(chartElement,table); // TODO - get largest value from the data-xaxis
@@ -134,11 +143,11 @@ export const getChartData = function (chartElement) {
 };
 function getLargestValue(chartElement, table) {
     const selector = chartElement.classList.contains('chart--stacked') ? 'tbody tr' : 'tbody td:not(:first-child)';
-    let values = Array.from(table.querySelectorAll(selector)).map((element) => {
-        let currentValue = element.getAttribute('data-numeric');
+    const values = Array.from(table.querySelectorAll(selector)).map((element) => {
+        const currentValue = element.getAttribute('data-numeric');
         return currentValue;
     });
-    let largestValue = Math.max(...values);
+    const largestValue = Math.max(...values);
     // TO DO round to the nearest 10, 100, 1000 and so on
     return Math.ceil(largestValue);
 }
@@ -156,7 +165,7 @@ const getValues = function (value, min, max, start) {
     }
     // If the value is negative the position below the 0 line
     if (min < 0) {
-        bottom = Math.abs(((min) / (max - min)) * 100);
+        bottom = Math.abs((min / (max - min)) * 100);
         if (cleanValue < 0) {
             percent = bottom - percent;
             bottom = bottom - percent;
@@ -176,20 +185,22 @@ 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) => {
-            let value = parseFloat(td.textContent.replace('£', '').replace('%', '').replace(',', ''));
+            const value = parseFloat(td.textContent.replace('£', '').replace('%', '').replace(',', ''));
             td.setAttribute('data-numeric', value);
             td.setAttribute('data-value', td.textContent);
-            let display = getComputedStyle(td).display;
+            const display = getComputedStyle(td).display;
             if (display != 'none')
                 rowValue += value;
         });
         tr.setAttribute('data-numeric', rowValue);
     });
-    let { min, max } = getChartData(chartElement);
+    const { min, max } = getChartData(chartElement);
     Array.from(table.querySelectorAll('tbody tr')).forEach((tr, index) => {
-        let group = tr.querySelector('td:first-child, th:first-child') ? tr.querySelector('td:first-child, th:first-child').textContent : '';
+        const group = tr.querySelector('td:first-child, th:first-child')
+            ? tr.querySelector('td:first-child, th:first-child').textContent
+            : '';
         tr.setAttribute('part', 'group');
-        let percent = ((tr.getAttribute('data-numeric') - min) / (max - min)) * 100;
+        const percent = ((tr.getAttribute('data-numeric') - min) / (max - min)) * 100;
         tr.style.setProperty('--percent', `${percent}%`);
         // Set the data label value if not set
         Array.from(tr.querySelectorAll('td:not([data-label])')).forEach((td, index) => {
@@ -200,17 +211,17 @@ export const setCellData = function (chartElement, table) {
             if (tr.querySelectorAll('td').length > 2)
                 td.setAttribute('data-label', table.querySelectorAll('thead th')[index].textContent);
         });
-        let rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;
-        let rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;
+        const rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;
+        const rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;
         if (rowMin < 0) {
-            let minBottom = Math.abs(((rowMin) / (rowMax - rowMin)) * 100);
+            const minBottom = Math.abs((rowMin / (rowMax - rowMin)) * 100);
             chartElement.setAttribute('style', `--min-bottom: ${minBottom}%;`);
         }
         // Add a useful index css var for the use of animatons.
         tr.style.setProperty('--row-index', index + 1);
         // Add css vars to cells
         Array.from(tr.querySelectorAll('td[data-numeric]:not([data-label="Min"]):not([data-label="Max"]):not(:first-child)')).forEach((td) => {
-            let display = getComputedStyle(td).display;
+            const display = getComputedStyle(td).display;
             if (display == 'none')
                 return;
             const content = td.innerHTML;
@@ -219,21 +230,21 @@ export const setCellData = function (chartElement, table) {
             if (!td.querySelector('span[data-group]'))
                 td.innerHTML = `<span data-group="${group}" ${td.hasAttribute('data-label') ? `data-label="${td.getAttribute('data-label')}"` : ''} part="popover">${content}</span>`;
             if (!td.hasAttribute('style')) {
-                let { percent, bottom, axis } = getValues(value, rowMin, rowMax, start);
+                const { percent, bottom, axis } = getValues(value, rowMin, rowMax, start);
                 td.setAttribute('data-percent', percent);
-                td.setAttribute("style", `--bottom:${bottom}%;--percent:${percent}%;--axis:${axis}%;`);
+                td.setAttribute('style', `--bottom:${bottom}%;--percent:${percent}%;--axis:${axis}%;`);
             }
         });
     });
 };
 export const setLongestLabel = function (chartOuter) {
-    let chartWrapper = chartOuter.querySelector('.chart__wrapper');
-    let chartSpacer = chartOuter.querySelector('.chart__spacer span');
-    let table = chartOuter.querySelector('.chart table');
+    const chartWrapper = chartOuter.querySelector('.chart__wrapper');
+    const chartSpacer = chartOuter.querySelector('.chart__spacer span');
+    const table = chartOuter.querySelector('.chart table');
     // set the longest label attr so that the bar chart knows what margin to set on the left
     let longestLabel = '';
     Array.from(table.querySelectorAll('tbody tr td:first-child')).forEach((td) => {
-        if (typeof td.textContent != "undefined" && td.textContent.length > longestLabel.length) {
+        if (typeof td.textContent != 'undefined' && td.textContent.length > longestLabel.length) {
             longestLabel = td.textContent;
         }
     });
@@ -241,11 +252,11 @@ export const setLongestLabel = function (chartOuter) {
     chartSpacer.innerHTML = longestLabel;
 };
 export const setLongestValue = function (chartOuter) {
-    let chartWrapper = chartOuter.querySelector('.chart__wrapper');
-    let table = chartOuter.querySelector('.chart table');
+    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)
+        if (typeof td.textContent != 'undefined' && td.textContent.length > longestValue.length)
             longestValue = td.textContent;
     });
     chartWrapper.setAttribute('data-longest-value', longestValue);
@@ -256,7 +267,7 @@ export const createChartKey = function (chartOuter, tableElement, chartKey) {
     const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
     //const chartOuter = chartElement.querySelector('.chart__outer');
     let previousInput;
-    let headings = Array.from(tableElement.querySelectorAll('thead th'));
+    const headings = Array.from(tableElement.querySelectorAll('thead th'));
     headings.forEach((arrayElement, index) => {
         if (index != 0) {
             previousInput = createChartKeyItem(chartID, index, arrayElement.textContent, chartKey, chartOuter, previousInput);
@@ -268,7 +279,7 @@ export const createChartKey = function (chartOuter, tableElement, chartKey) {
     return true;
 };
 function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previousInput) {
-    let input = document.createElement('input');
+    const input = document.createElement('input');
     input.setAttribute('name', `${chartID}-dataset-${index}`);
     input.setAttribute('id', `${chartID}-dataset-${index}`);
     input.setAttribute('data-dataset', `${index}`);
@@ -280,7 +291,7 @@ function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previous
     else
         chartOuter.insertBefore(input, previousInput.nextSibling);
     previousInput = input;
-    let label = document.createElement('label');
+    const label = document.createElement('label');
     label.setAttribute('class', `key btn btn-action`);
     label.setAttribute('for', `${chartID}-dataset-${index}`);
     label.setAttribute('data-label', `${text}`);
@@ -294,18 +305,18 @@ export const createChartGuidelines = function (chartElement, chartGuidelines) {
     if (!guidelines.length)
         guidelines = yaxis;
     chartGuidelines.innerHTML = '';
-    for (var i = 0; i < guidelines.length; i++) {
-        let value = parseFloat(guidelines[i].replace('£', '').replace('%', '').replace(',', ''));
-        let { axis } = getValues(value, min, max);
+    for (let i = 0; i < guidelines.length; i++) {
+        const value = parseFloat(guidelines[i].replace('£', '').replace('%', '').replace(',', ''));
+        const { axis } = getValues(value, min, max);
         chartGuidelines.innerHTML += `<div class="guideline" style="--percent:${axis}%;">${yaxis.indexOf(guidelines[i]) != -1 ? `<span>${guidelines[i]}</span>` : ''}</div>`;
     }
 };
 export const createChartYaxis = function (chartElement, chartYaxis) {
-    let { min, max, yaxis } = getChartData(chartElement);
+    const { min, max, yaxis } = getChartData(chartElement);
     chartYaxis.innerHTML = '';
-    for (var i = 0; i < yaxis.length; i++) {
-        let value = parseFloat(yaxis[i].replace('£', '').replace('%', ''));
-        let { axis } = getValues(value, min, max);
+    for (let i = 0; i < yaxis.length; i++) {
+        const value = parseFloat(yaxis[i].replace('£', '').replace('%', ''));
+        const { axis } = getValues(value, min, max);
         chartYaxis.innerHTML += `<div class="axis__point" style="--percent:${axis}%;"><span>${yaxis[i]}</span></div>`;
     }
 };
@@ -321,7 +332,7 @@ export const createXaxis = function (chartOuter) {
 export const createTooltips = function (chartOuter) {
     const titles = chartOuter.querySelectorAll('thead th[title], tbody th[title]:first-child, tbody td[title]:first-child');
     Array.from(titles).forEach((title) => {
-        let tooltipId = `tooltip-${Date.now()}-${Math.floor(Math.random() * 100)}`;
+        const tooltipId = `tooltip-${Date.now()}-${Math.floor(Math.random() * 100)}`;
         title.innerHTML = `<button class="tooltip" popovertarget="${tooltipId}" part="tooltip" style="anchor-name: --${tooltipId};">${title.textContent}</button><span id="${tooltipId}" style="position-anchor: --${tooltipId};" popover part="tooltip__content" class="tooltip__content">${title.getAttribute('title')}</span>`;
         //title.removeAttribute('title'); // TODO add a supports query for anchor positioning
     });

package/assets/js/modules/data-layer.js

@@ -1,40 +1,40 @@
 function createDataLayer() {
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({
-        event: "Pageview",
+        event: 'Pageview',
         pageTitle: document.title,
     });
-    document.addEventListener("click", (event) => {
-        const target = event.target.closest("[open] summary");
+    document.addEventListener('click', (event) => {
+        const target = event.target.closest('[open] summary');
         if (target) {
             window.dataLayer.push({
-                event: "closeDetails",
-                detailsTitle: target.textContent || "",
+                event: 'closeDetails',
+                detailsTitle: target.textContent || '',
             });
         }
         else {
-            const summary = event.target.closest("summary");
-            const link = event.target.closest("a");
-            const button = event.target.closest("button");
+            const summary = event.target.closest('summary');
+            const link = event.target.closest('a');
+            const button = event.target.closest('button');
             if (summary) {
                 window.dataLayer.push({
-                    event: "openDetails",
-                    detailsTitle: summary.textContent || "",
+                    event: 'openDetails',
+                    detailsTitle: summary.textContent || '',
                 });
             }
             if (link) {
                 window.dataLayer.push({
-                    event: "linkClicked",
-                    linkText: link.hasAttribute("title") ? link.getAttribute("title") || "" : link.textContent || "",
-                    class: link.hasAttribute("class") ? link.getAttribute("class") || "" : "",
-                    href: link.getAttribute("href") || "",
+                    event: 'linkClicked',
+                    linkText: link.hasAttribute('title') ? link.getAttribute('title') || '' : link.textContent || '',
+                    class: link.hasAttribute('class') ? link.getAttribute('class') || '' : '',
+                    href: link.getAttribute('href') || '',
                 });
             }
             if (button) {
                 window.dataLayer.push({
-                    event: "buttonClicked",
-                    buttonText: button.textContent || "",
-                    class: button.hasAttribute("class") ? button.getAttribute("class") || "" : "",
+                    event: 'buttonClicked',
+                    buttonText: button.textContent || '',
+                    class: button.hasAttribute('class') ? button.getAttribute('class') || '' : '',
                 });
             }
         }

package/assets/js/modules/dialogs.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 const extendDialogs = (body) => {
     Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
-        let parent = dialog.closest('.dialog__wrapper');
+        const parent = dialog.closest('.dialog__wrapper');
         if (!parent) {
             dialog.removeAttribute('open');
             dialog.showModal();
@@ -16,14 +16,16 @@ const extendDialogs = (body) => {
         // Modal
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')) {
             const button = event.target.closest('[data-modal]');
-            const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
+            const modalID = button.hasAttribute('data-modal')
+                ? button.getAttribute('data-modal')
+                : button.getAttribute('data-filter');
             const dialog = document.querySelector(`dialog#${modalID}`);
             createDialog(dialog);
             // Open the modal!
             dialog.showModal();
             dialog.focus();
             if (!dialog.querySelector('iam-multi-step')) {
-                let firstWidth = dialog.offsetWidth;
+                const 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
@@ -32,17 +34,16 @@ const extendDialogs = (body) => {
                 const originalInput = document.getElementById(id);
                 if (element.checked != originalInput.checked) {
                     element.checked = originalInput.checked;
-                    let changeEvent = new Event('change');
+                    const changeEvent = new Event('change');
                     element.dispatchEvent(changeEvent);
                 }
             });
             window.dataLayer = window.dataLayer || [];
             window.dataLayer.push({
-                "event": "openModal",
-                "id": modalID
+                event: 'openModal',
+                id: modalID,
             });
         }
-        ;
         // Close modal
         if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')) {
             const dialog = event.target.closest('dialog[open]');
@@ -52,16 +53,16 @@ const extendDialogs = (body) => {
             Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
                 btnElement.classList.remove('active');
             });
-            let closeEvent = new CustomEvent('dialog-closed', {
+            const closeEvent = new CustomEvent('dialog-closed', {
                 bubbles: true,
                 cancelable: true,
-                detail: { modalId: dialog.id }
+                detail: { modalId: dialog.id },
             });
             event.target.dispatchEvent(closeEvent);
             window.dataLayer = window.dataLayer || [];
             window.dataLayer.push({
-                "event": "closeModal",
-                "id": dialog.getAttribute('id')
+                event: 'closeModal',
+                id: dialog.getAttribute('id'),
             });
         }
         // Track default close buttons
@@ -73,27 +74,32 @@ const extendDialogs = (body) => {
             });
             window.dataLayer = window.dataLayer || [];
             window.dataLayer.push({
-                "event": "closeModal",
-                "id": dialog.getAttribute('id')
+                event: 'closeModal',
+                id: dialog.getAttribute('id'),
             });
         }
         // Close the modal when clicked on the backdrop
         if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')) {
             let dialog = event.target.closest('dialog[open]');
             // Small fix to make sure the dialog isn't a dialog inside of a dialog.
-            var style = window.getComputedStyle(dialog);
+            const style = window.getComputedStyle(dialog);
             if (style.display === 'contents')
                 dialog = dialog.parentNode.closest('dialog[open]');
             // Dont allow the backdrop to be clicked when transactional
-            if (!dialog.classList.contains('dialog--transactional') && !dialog.classList.contains('dialog--acknowledgement')) {
+            if (!dialog.classList.contains('dialog--transactional') &&
+                !dialog.classList.contains('dialog--acknowledgement')) {
                 const dialogDimensions = dialog.getBoundingClientRect();
-                if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
-                    if (!event.target.closest('dialog *')) // Weird bug when interacting with radio input fields within dialogs cuases it to close
+                if (event.clientX < dialogDimensions.left ||
+                    event.clientX > dialogDimensions.right ||
+                    event.clientY < dialogDimensions.top ||
+                    event.clientY > dialogDimensions.bottom) {
+                    if (!event.target.closest('dialog *'))
+                        // Weird bug when interacting with radio input fields within dialogs cuases it to close
                         dialog.close();
                     window.dataLayer = window.dataLayer || [];
                     window.dataLayer.push({
-                        "event": "closeModal",
-                        "id": dialog.getAttribute('id')
+                        event: 'closeModal',
+                        id: dialog.getAttribute('id'),
                     });
                 }
             }
@@ -101,12 +107,13 @@ const extendDialogs = (body) => {
         // Popover
         if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')) {
             event.stopPropagation();
-            let btn = event.target.closest('.dialog__wrapper > button');
-            let parent = btn.parentNode;
-            let dataEvent = "openPopover";
-            let popover = parent.querySelector(':scope > dialog');
+            const btn = event.target.closest('.dialog__wrapper > button');
+            const parent = btn.parentNode;
+            let dataEvent = 'openPopover';
+            const popover = parent.querySelector(':scope > dialog');
             // close open dialogs
-            if (document.querySelector('*:not([data-keep-open]) > dialog[open]') && document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover) {
+            if (document.querySelector('*:not([data-keep-open]) > dialog[open]') &&
+                document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover) {
                 // Check that the ope dialog isn't a parent of the dialog being opened
                 if (btn.closest('dialog[open]') != document.querySelector('*:not([data-keep-open]) > dialog[open]')) {
                     document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
@@ -118,18 +125,18 @@ const extendDialogs = (body) => {
             });
             if (popover.hasAttribute('open')) {
                 popover.close();
-                dataEvent = "closePopover";
+                dataEvent = 'closePopover';
                 popover.removeAttribute('style');
                 btn.removeAttribute('aria-expanded');
             }
             else {
                 popover.show();
                 btn.setAttribute('aria-expanded', true);
-                var position = btn.getBoundingClientRect();
+                const position = btn.getBoundingClientRect();
                 let topOffset = position.top;
                 let leftOffset = position.left;
                 if (btn.closest('iam-table')) {
-                    let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+                    const container = btn.closest('iam-table').parentNode.getBoundingClientRect();
                     topOffset -= container.top;
                     leftOffset -= container.left;
                 }
@@ -140,26 +147,28 @@ const extendDialogs = (body) => {
             // When the dialog is fixed it could dip under the viewport
             // Lets check the dimensions and transform it to appear above
             let boundingRec = popover.getBoundingClientRect();
-            let popoverBottom = boundingRec.bottom - window.scrollY;
-            let windowPos = window.innerHeight - window.scrollY;
+            const popoverBottom = boundingRec.bottom - window.scrollY;
+            const windowPos = window.innerHeight - window.scrollY;
             if (popoverBottom > windowPos) {
-                let currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';
+                const currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';
                 popover.setAttribute('style', currentStyle + `transform: translate(0, calc(-100% - 4rem))`);
                 // Check that the dialog doesn't go over the top of the page
                 boundingRec = popover.getBoundingClientRect();
-                let popoverTop = boundingRec.top - window.scrollY;
+                const popoverTop = boundingRec.top - window.scrollY;
                 if (popoverTop < 100)
                     popover.removeAttribute('style');
             }
             window.dataLayer = window.dataLayer || [];
             window.dataLayer.push({
-                "event": dataEvent,
-                "id": btn.textContent
+                event: dataEvent,
+                id: btn.textContent,
             });
         }
-        ;
         // Close popovers when clicked away
-        if (event && event.target instanceof HTMLElement && !event.target.closest('dialog[open]') && !event.target.closest('.dialog__wrapper > button')) {
+        if (event &&
+            event.target instanceof HTMLElement &&
+            !event.target.closest('dialog[open]') &&
+            !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) => {
@@ -173,10 +182,10 @@ export const createDialog = (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.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)');
+        const dialogContent = dialog.querySelector('.mh-lg');
+        const titleElement = dialog.querySelector('.mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)');
         if (titleElement) {
-            let optionalElement = titleElement.previousSibling;
+            const optionalElement = titleElement.previousSibling;
             dialogContent.before(titleElement);
             if (optionalElement)
                 titleElement.before(optionalElement);

package/assets/js/modules/drawer.js

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