@iamproperty/components 5.7.1-beta2 → 5.7.1-beta4

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

@@ -0,0 +1,350 @@
+import { numberOfDays } from './helpers.js';
+// #region Functions that setup and trigger other functions 
+export const addClasses = (chartElement) => {
+    // add colour classes
+    for (let i = 1; i <= 10; i++) {
+        if (chartElement.hasAttribute(`data-colour-${i}`)) {
+            let 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)`);
+        }
+    }
+    return true;
+};
+export const setupChart = (chartElement, chartOuter, tableElement) => {
+    // #region Reset the chart
+    // empty divs to re-populate
+    const chartKey = chartOuter.querySelector('.chart__key');
+    chartKey.innerHTML = '';
+    const chartGuidelines = chartOuter.querySelector('.chart__guidelines');
+    chartGuidelines.innerHTML = ``;
+    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(); });
+    // #endregion
+    let { xaxis } = getChartData(chartElement, chartOuter);
+    setCellData(chartElement, chartOuter, tableElement);
+    createChartKey(chartOuter, tableElement, chartKey);
+    createChartGuidelines(chartElement, chartOuter, chartGuidelines);
+    createChartYaxis(chartElement, chartOuter, chartYaxis);
+    if (xaxis) {
+        createXaxis(chartElement, chartOuter, xaxis);
+    }
+    return true;
+};
+// #endregion
+// #region Event handlers and observers
+export const setEventListener = function (chartOuter) {
+    let 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;
+            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');
+    Array.from(labels).forEach((label) => {
+        if (chartOuter.querySelector(`input#${label.getAttribute('for')}`).checked)
+            label.setAttribute('part', 'key-checked');
+        else
+            label.setAttribute('part', 'key-unchecked');
+    });
+    chartOuter.addEventListener('change', function () {
+        Array.from(labels).forEach((label) => {
+            if (chartOuter.querySelector(`input#${label.getAttribute('for')}`).checked)
+                label.setAttribute('part', 'key-checked');
+            else
+                label.setAttribute('part', 'key-unchecked');
+        });
+    });
+};
+export const setEventObservers = function (chartElement, chartOuter) {
+    let table = chartElement.querySelector('table');
+    let 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.attributeName === 'data-total') || mutation.type === 'attributes') {
+                shadowTable.innerHTML = table.innerHTML;
+                setupChart(chartElement, chartOuter, shadowTable);
+            }
+        }
+        observer.observe(table, { characterData: true, subtree: true });
+        observer2.observe(chartElement, { attributes: true });
+    };
+    const tableUpdated = (mutationList, observer) => {
+        observer.disconnect();
+        observer2.disconnect();
+        for (const mutation of mutationList) {
+            if (mutation.type == "characterData" || (mutation.type == "childList" && mutation.addedNodes.length)) {
+                shadowTable.innerHTML = table.innerHTML;
+                setupChart(chartElement, chartOuter, shadowTable);
+            }
+        }
+        observer.observe(table, { characterData: true, subtree: true });
+        observer2.observe(chartElement, { attributes: true });
+    };
+    let observer = new MutationObserver(tableUpdated);
+    let observer2 = new MutationObserver(attributesUpdated);
+    observer.observe(table, { characterData: true, subtree: true });
+    observer2.observe(chartElement, { attributes: true });
+    return true;
+};
+// #endregion
+// #region GET functions
+export const getChartData = function (chartElement, chartOuter) {
+    let table = chartOuter.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(table);
+    let type = 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(',') : [];
+    let targets = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;
+    let events = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;
+    let xaxis = chartElement.hasAttribute('data-xaxis') ? chartElement.getAttribute('data-xaxis').split(',') : null;
+    let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment') : null;
+    let start = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
+    let end = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(table); // TODO - get largest value from the data-xaxis
+    let slope = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;
+    let yInt = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;
+    return { min, max, type, yaxis, targets, events, xaxis, increment, start, end, slope, yInt, guidelines };
+};
+function getLargestValue(table) {
+    let values = Array.from(table.querySelectorAll('tbody td:not(:first-child)')).map((element) => {
+        let currentValue = String(element.textContent);
+        currentValue = currentValue.replace('£', '');
+        currentValue = currentValue.replace('%', '');
+        currentValue = currentValue.replace(',', '');
+        currentValue = Number.parseFloat(currentValue);
+        return currentValue;
+    });
+    let largetValue = Math.max(...values);
+    // TO DO round to the nearest 10, 100, 1000 and so on
+    return Math.ceil(largetValue);
+}
+const getValues = function (value, min, max, start) {
+    let cleanValue = String(value);
+    cleanValue = cleanValue.replace('£', '');
+    cleanValue = cleanValue.replace('%', '');
+    cleanValue = cleanValue.replace(',', '');
+    cleanValue = Number.parseFloat(cleanValue);
+    let percent = ((cleanValue - min) / (max - min)) * 100;
+    let axis = percent;
+    let bottom = 0;
+    if (start && start != 0) {
+        bottom = ((start - min) / (max - min)) * 100;
+    }
+    // If the value is negative the position below the 0 line
+    if (min < 0) {
+        bottom = Math.abs(((min) / (max - min)) * 100);
+        if (cleanValue < 0) {
+            percent = bottom - percent;
+            bottom = bottom - percent;
+            axis = bottom;
+        }
+        else {
+            percent = percent - bottom;
+            axis = percent + bottom;
+        }
+    }
+    return { percent, axis, bottom };
+};
+// #endregion
+// #region SET functions - set data attributes and classes
+export const setCellData = function (chartElement, chartOuter, table) {
+    let { min, max } = getChartData(chartElement, chartOuter);
+    let increment = chartElement.getAttribute('data-increment');
+    let startDay = min;
+    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 : '';
+        tr.setAttribute('part', 'group');
+        // Set the data numeric value if not set
+        Array.from(tr.querySelectorAll('td:not([data-numeric]):not(:first-child)')).forEach((td) => {
+            let value = parseFloat(td.textContent.replace('£', '').replace('%', '').replace(',', ''));
+            let start = 0;
+            if (increment == "days") {
+                let dates = td.textContent.split(' - ');
+                if (dates[1]) {
+                    value = numberOfDays(dates[0], dates[1]);
+                    start = numberOfDays(startDay, dates[0]) - 1;
+                }
+            }
+            td.setAttribute('data-numeric', value);
+            td.setAttribute('data-value', td.textContent);
+            td.setAttribute('data-start', start);
+        });
+        // Set the data label value if not set
+        Array.from(tr.querySelectorAll('td:not([data-label])')).forEach((td, index) => {
+            if (index == 0)
+                td.setAttribute('part', 'xaxis-label'); // PART
+            else
+                td.setAttribute('part', 'value');
+            if (tr.querySelectorAll('td').length > 2)
+                td.setAttribute('data-label', table.querySelectorAll('thead th')[index].textContent);
+        });
+        /*
+        if(tr.querySelector('[data-label="Total"]')){
+          tr.setAttribute('data-total',tr.querySelector('[data-label="Total"][data-numeric]').getAttribute('data-numeric'));
+        }
+    
+        if(tr.querySelector('[data-label="Min"]')){
+          tr.setAttribute('data-min',tr.querySelector('[data-label="Min"][data-numeric]').getAttribute('data-numeric'));
+        }
+        if(tr.querySelector('[data-label="Max"]')){
+          tr.setAttribute('data-max',tr.querySelector('[data-label="Max"][data-numeric]').getAttribute('data-numeric'));
+        }
+    
+          */
+        let rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;
+        let rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;
+        if (rowMin < 0) {
+            let 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;
+            if (display == 'none')
+                return;
+            const content = td.innerHTML;
+            const value = Number.parseFloat(td.getAttribute('data-numeric'));
+            const start = Number.parseFloat(td.getAttribute('data-start'));
+            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);
+                td.setAttribute('data-percent', percent);
+                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');
+    // 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) {
+            longestLabel = td.textContent;
+        }
+    });
+    chartWrapper.setAttribute('data-longest-label', longestLabel);
+    chartSpacer.innerHTML = longestLabel;
+};
+export const setLongestValue = function (chartOuter) {
+    let chartWrapper = chartOuter.querySelector('.chart__wrapper');
+    let 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;
+    });
+    chartWrapper.setAttribute('data-longest-value', longestValue);
+};
+// #endregion
+// #region CREATE function
+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'));
+    headings.forEach((arrayElement, index) => {
+        if (index != 0) {
+            previousInput = createChartKeyItem(chartID, index, arrayElement.textContent, chartKey, chartOuter, previousInput);
+        }
+        if (index == 50) {
+            headings.length = index + 1;
+        }
+    });
+    return true;
+};
+function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previousInput) {
+    let input = document.createElement('input');
+    input.setAttribute('name', `${chartID}-dataset-${index}`);
+    input.setAttribute('id', `${chartID}-dataset-${index}`);
+    input.checked = true;
+    input.setAttribute('type', `checkbox`);
+    if (index == 1)
+        chartOuter.prepend(input);
+    else
+        chartOuter.insertBefore(input, previousInput.nextSibling);
+    previousInput = input;
+    let label = document.createElement('label');
+    label.setAttribute('class', `key btn btn-action`);
+    label.setAttribute('for', `${chartID}-dataset-${index}`);
+    label.setAttribute('data-label', `${text}`);
+    label.setAttribute('part', `key`);
+    label.innerHTML = `${text}`;
+    chartKey.append(label);
+    return previousInput;
+}
+export const createChartGuidelines = function (chartElement, chartOuter, chartGuidelines) {
+    let { min, max, yaxis, increment, guidelines } = getChartData(chartElement, chartOuter);
+    if (!guidelines.length)
+        guidelines = yaxis;
+    if (increment == "days") {
+        max = numberOfDays(min, max);
+        min = 0;
+    }
+    chartGuidelines.innerHTML = '';
+    for (var i = 0; i < guidelines.length; i++) {
+        let value = parseFloat(guidelines[i].replace('£', '').replace('%', '').replace(',', ''));
+        let { 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, chartOuter, chartYaxis) {
+    let { min, max, yaxis, increment } = getChartData(chartElement, chartOuter);
+    let startDay = min;
+    if (increment == "days") {
+        max = numberOfDays(min, max);
+        min = 0;
+    }
+    chartYaxis.innerHTML = '';
+    for (var i = 0; i < yaxis.length; i++) {
+        let value = parseFloat(yaxis[i].replace('£', '').replace('%', ''));
+        if (increment == "days") {
+            value = numberOfDays(startDay, yaxis[i]);
+        }
+        let { axis } = getValues(value, min, max);
+        chartYaxis.innerHTML += `<div class="axis__point" style="--percent:${axis}%;"><span>${yaxis[i]}</span></div>`;
+    }
+};
+export const createXaxis = function (chartElement, chartOuter, xaxis) {
+    const chart = chartOuter.querySelector('.chart');
+    let chartXaxis = chartOuter.querySelector('.chart__xaxis');
+    let { increment, start, end } = getChartData(chartElement, chartOuter);
+    if (!chartXaxis) {
+        chartXaxis = document.createElement('div');
+        chartXaxis.setAttribute('class', 'chart__xaxis');
+    }
+    if (increment && start && end) {
+        chartXaxis.innerHTML = '';
+        for (var i = 0; i < xaxis.length; i++) {
+            let value = parseFloat(xaxis[i].replace('£', '').replace('%', ''));
+            let position = ((value - start) / (end - start)) * 100;
+            chartXaxis.innerHTML += `<div class="axis__point" style="--percent:${position}%;"><span>${xaxis[i]}</span></div>`;
+        }
+    }
+    chart.prepend(chartXaxis);
+};
+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)}`;
+        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
+    });
+};
+// #endregion
+export default setupChart;

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta2
+  * iamKey v5.7.1-beta4
   * Copyright 2022-2024 iamproperty
   */(function(I){typeof define=="function"&&define.amd?define(I):I()})(function(){"use strict";var I=r=>(r.classList.add("js-enabled"),(navigator.userAgent.indexOf("MSIE")!==-1||navigator.appVersion.indexOf("Trident/")>0)&&r.classList.add("ie"),null),ct=r=>{var t=function(a){var i=document.querySelector('label[for="'.concat(a.replace("#",""),'"]')),c=document.querySelector(a+" summary"),o=document.querySelector("dialog".concat(a)),n=document.querySelector("detail".concat(a));i instanceof HTMLElement?i.click():c instanceof HTMLElement?c.click():o instanceof HTMLElement?o.showModal():n instanceof HTMLElement&&n.addAttribute("open")};return location.hash&&t(location.hash),window.addEventListener("hashchange",function(){t(location.hash)},!1),addEventListener("popstate",e=>{if(e&&e.state&&e.state.type&&e.state.type=="pagination"){var a=document.querySelector("#".concat(e.state.form)),i=document.querySelector("#".concat(e.state.form," [data-pagination]"));i?i.value=e.state.page:a.innerHTML+='<input name="page" type="hidden" data-pagination="true" value="'.concat(e.state.page,'" />'),a.dispatchEvent(new Event("submit"))}}),document.addEventListener("submit",e=>{if(e&&e.target instanceof HTMLElement&&e.target.matches("form")){var a=e.target;Array.from(a.querySelectorAll("[data-password-type]")).forEach((i,c)=>{i.setAttribute("type","password")}),(a.querySelector(":invalid")||a.querySelector('.pwd-checker[data-strength="1"]')||a.querySelector('.pwd-checker[data-strength="2"]'))&&(a.classList.add("was-validated"),e.preventDefault()),a.querySelector("iam-multiselect[data-is-required][data-error]")&&(a.classList.add("was-validated"),e.preventDefault())}}),document.addEventListener("keydown",e=>{e.key==="Escape"&&document.querySelector(".dialog--transactional[open], .dialog--acknowledgement[open]")&&(e.preventDefault(),e.stopPropagation())}),Array.from(document.querySelectorAll("label progress")).forEach((e,a)=>{var i=e.closest("label");i.setAttribute("data-percent",e.getAttribute("value"))}),null},dt=function(t){return typeof t!="string"?!1:!isNaN(t)&&!isNaN(parseFloat(t))},lt=(r,t)=>String(r).padStart(t,"0"),ut=r=>r.charAt(0).toUpperCase()+r.slice(1),C=(r,t,e)=>t.split(/[\.\[\]\'\"]/).filter(a=>a).reduce((a,i)=>a?a[i]:e,r),ht=(r,t,e,a)=>{var i=Math.tan(.375*Math.PI),c=window.innerWidth||document.body.clientWidth,o=Math.max(1,Math.floor(.01*c)),n=e-r,d=a-t,s=Math.abs(n/d),l=Math.abs(d/n);if(Math.abs(n)>o||Math.abs(d)>o){if(l<=i)return n<0?"left":"right";if(s<=i)return d<0?"top":"bottom"}else return"tap"};class ft{constructor(t){document.body.classList.contains("youtubeLoaded")?t.addEventListener("click",function(e){for(var a=e.target;a&&a!=this;a=a.parentNode)if(a.matches("a")){e.preventDefault(),U(a);break}},!1):this.loadScripts(t,this.createEmbed)}loadScripts(t){return new Promise((e,a)=>{var i=new Image;i.onload=function(){var c=document.createElement("script");c.src="https://www.youtube.com/iframe_api";var o=document.getElementsByTagName("script")[0];o.parentNode.insertBefore(c,o),document.body.classList.add("youtubeLoaded"),e(!0),c.onload=()=>{t.addEventListener("click",function(n){console.log("click"),n&&n.target instanceof HTMLElement&&n.target.closest("a")&&(n.preventDefault(),U(n.target.closest("a")))},!1)}},i.onerror=function(){a(!1)},i.src="https://youtube.com/favicon.ico"})}}var U=function(t){typeof window.player<"u"&&typeof window.player.pauseVideo=="function"&&window.player.pauseVideo();var e=t.getAttribute("data-id"),a=t.getAttribute("id");if(typeof a>"u"||a==null){var i=String.fromCharCode(65+Math.floor(Math.random()*26));a=i+Date.now(),t.setAttribute("id",a)}function c(){window.player=new YT.Player(a,{height:"100%",width:"100%",videoId:e,playerVars:{modestbranding:1,playsinline:1,rel:0,showinfo:0},events:{onReady:o,onStateChange:d}})}c();function o(s){s.target.playVideo()}var n=!1;function d(s){if(s.data==YT.PlayerState.PLAYING&&!n){var l=document.getElementById(a);l.classList.add("player-ready"),n=!0}}},bt=r=>(Array.from(r.querySelectorAll("dialog[open]")).forEach((t,e)=>{var a=t.closest(".dialog__wrapper");a||(t.removeAttribute("open"),t.showModal(),t.focus(),X(t))}),r.addEventListener("click",t=>{if(t.target.tagName=="IAM-ACTIONBAR")return!1;if(t&&t.target instanceof HTMLElement&&t.target.closest("[data-modal]")){var e=t.target.closest("[data-modal]"),a=e.hasAttribute("data-modal")?e.getAttribute("data-modal"):e.getAttribute("data-filter"),i=document.querySelector("dialog#".concat(a));X(i),i.showModal(),i.focus();var c=i.offsetWidth;i.setAttribute("style","max-width: ".concat(c,"px;")),Array.from(i.querySelectorAll("[data-duplicate]")).forEach((L,S)=>{var T=L.getAttribute("data-duplicate"),E=document.getElementById(T);if(L.checked!=E.checked){L.checked=E.checked;var M=new Event("change");L.dispatchEvent(M)}}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openModal",id:a})}if(t&&t.target instanceof HTMLElement&&t.target.closest("button.dialog__close")){var o=t.target.closest("dialog[open]");t.preventDefault(),o.close(),Array.from(document.querySelectorAll(".dialog__wrapper > button")).forEach((L,S)=>{L.classList.remove("active")});var n=new CustomEvent("dialog-closed",{bubbles:!0,cancelable:!0,detail:{modalId:o.id}});t.target.dispatchEvent(n),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:o.getAttribute("id")})}if(t&&t.target instanceof HTMLElement&&t.target.closest('button[formmethod="dialog"]')){var d=t.target.closest("dialog[open]");Array.from(document.querySelectorAll(".dialog__wrapper > button")).forEach((L,S)=>{L.classList.remove("active")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:d.getAttribute("id")})}if(t&&t.target instanceof HTMLElement&&t.target.closest("dialog[open]")){var s=t.target.closest("dialog[open]"),l=window.getComputedStyle(s);if(l.display==="contents"&&(s=s.parentNode.closest("dialog[open]")),!s.classList.contains("dialog--transactional")&&!s.classList.contains("dialog--acknowledgement")){var h=s.getBoundingClientRect();(t.clientX<h.left||t.clientX>h.right||t.clientY<h.top||t.clientY>h.bottom)&&(t.target.closest("dialog *")||s.close(),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:s.getAttribute("id")}))}}if(t&&t.target instanceof HTMLElement&&t.target.closest(".dialog__wrapper > button")){t.stopPropagation();var b=t.target.closest(".dialog__wrapper > button"),v=b.parentNode,u="openPopover",f=v.querySelector(":scope > dialog");if(document.querySelector("*:not([data-keep-open]) > dialog[open]")&&document.querySelector("*:not([data-keep-open]) > dialog[open]")!=f&&b.closest("dialog[open]")!=document.querySelector("*:not([data-keep-open]) > dialog[open]")&&document.querySelector("*:not([data-keep-open]) > dialog[open]").close(),Array.from(document.querySelectorAll(".dialog__wrapper > button")).forEach((L,S)=>{L.removeAttribute("aria-expanded")}),f.hasAttribute("open"))f.close(),u="closePopover",f.removeAttribute("style"),b.removeAttribute("aria-expanded");else{f.show(),b.setAttribute("aria-expanded",!0);var m=b.getBoundingClientRect(),p=m.top,y=m.left;if(b.closest("iam-table")){var g=b.closest("iam-table").parentNode.getBoundingClientRect();p-=g.top,y-=g.left}f.classList.contains("dialog--fix")&&f.setAttribute("style","position:fixed;top: ".concat(p,"px; left: ").concat(y,"px; margin: 3rem 0 0 0;"))}var A=f.getBoundingClientRect(),q=A.bottom-window.scrollY,x=window.innerHeight-window.scrollY;if(q>x){var k=f.hasAttribute("style")?f.getAttribute("style")+" ":"";f.setAttribute("style",k+"transform: translate(0, calc(-100% - 4rem))"),A=f.getBoundingClientRect();var w=A.top-window.scrollY;w<100&&f.removeAttribute("style")}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:u,id:b.textContent})}t&&t.target instanceof HTMLElement&&!t.target.closest("dialog[open]")&&!t.target.closest(".dialog__wrapper > button")&&(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((L,S)=>{L.removeAttribute("aria-expanded")}))}),null),X=r=>{var t=r.querySelector(".youtube-embed a");if(t&&U(t),r.classList.contains("dialog--multi")&&!r.querySelector(":scope > .steps")&&vt(r),!r.querySelector(":scope .mh-lg")&&!r.classList.contains("dialog--multi")){r.innerHTML='<div class="mh-lg">'.concat(r.innerHTML,"</div>");var e=r.querySelector(".mh-lg"),a=r.querySelector(".mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)");if(a){var i=a.previousSibling;e.before(a),i&&a.before(i)}}r.querySelector(":scope > button:first-child")||r.insertAdjacentHTML("afterbegin",'<button class="dialog__close">Close</button>')},vt=r=>{var t="",e=Array.from(r.querySelectorAll("fieldset[data-title]")),a=r.querySelector("form");e.forEach((s,l)=>{t+='<button data-title="'.concat(s.getAttribute("data-title"),'" type="button" class="').concat(l==0?"active":"",'" tabindex="-1">').concat(s.getAttribute("data-title"),"</button>");var h=document.createElement("div");if(h.classList.add("btn--wrapper"),s.appendChild(h),l!=0&&(h.innerHTML+='<button data-title="'.concat(e[l-1].getAttribute("data-title"),'" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>')),l!=e.length-1&&(h.innerHTML+='<button data-title="'.concat(e[l+1].getAttribute("data-title"),'" class="btn btn-primary mb-0" data-next type="button">Next</button>')),l==e.length-1)if(a&&a.querySelector(':scope > button[type="submit"]')){var b=a.querySelector(':scope > button[type="submit"]');b.classList.add("mb-0"),h.insertAdjacentElement("beforeend",b)}else h.innerHTML+='<button data-title="'.concat(e[l].getAttribute("data-title"),'" class="btn btn-primary mb-0" data-next type="submit">Submit</button>')}),r.insertAdjacentHTML("afterbegin",'<div class="steps bg-primary">'.concat(t,"</div>"));for(var i=Array.from(r.querySelectorAll("fieldset.was-validated")),c=0;c<i.length;c++){var o=i[c],n=o.getAttribute("data-title");if(o.querySelector(".is-invalid")){Array.from(r.querySelectorAll('[data-title="'.concat(n,'"]'))).forEach((s,l)=>{s.classList.add("active")});break}else Array.from(r.querySelectorAll('[data-title="'.concat(n,'"]'))).forEach((s,l)=>{s.classList.add("valid")})}r.addEventListener("invalid",function(){return function(s){s.preventDefault()}}(),!0);function d(s){var l=r.querySelector("fieldset.active")?r.querySelector("fieldset.active"):r.querySelector("fieldset[data-title]"),h=l.getAttribute("data-title"),b=!0;if(l.classList.add("was-validated"),Array.from(l.querySelectorAll("input")).forEach((p,y)=>{p.checkValidity()||(b=!1)}),b?Array.from(r.querySelectorAll('[data-title="'.concat(h,'"]'))).forEach((p,y)=>{p.classList.add("valid")}):Array.from(r.querySelectorAll('[data-title="'.concat(h,'"]'))).forEach((p,y)=>{p.classList.remove("valid")}),b||!s.hasAttribute("data-next")){var v=r.querySelector('fieldset[data-title="'.concat(s.getAttribute("data-title"),'"]')),u=r.querySelector('.steps button[data-title="'.concat(s.getAttribute("data-title"),'"]'));Array.from(r.querySelectorAll("button")).forEach((p,y)=>{p.classList.remove("active")}),Array.from(r.querySelectorAll("fieldset")).forEach((p,y)=>{p.classList.remove("active")}),u.classList.add("active"),v.classList.add("active")}var f=Array.from(r.querySelectorAll("fieldset")).length,m=Array.from(r.querySelectorAll("fieldset.valid")).length;r.style.setProperty("--progress","".concat(m/(f-1)*100,"%"))}r.addEventListener("keydown",s=>{if(s&&s.target instanceof HTMLElement&&s.target.closest("button")){var l=s.target.closest("button");s.keyCode==13&&l.getAttribute("type")!="submit"&&(s.preventDefault(),d(l))}if(s&&s.target instanceof HTMLElement&&s.target.closest("input")){var h=s.target.closest("input");h.classList.remove("is-invalid"),s.keyCode==13&&s.preventDefault()}}),r.addEventListener("click",s=>{if(s&&s.target instanceof HTMLElement&&s.target.closest('button[type="submit"]')){var l=s.target.closest("form");l.classList.add("was-validated")}else if(s&&s.target instanceof HTMLElement&&s.target.closest("button[data-title]")){var h=s.target.closest("button[data-title]");d(h)}return null})};function mt(){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Pageview",pageTitle:document.title}),document.addEventListener("click",r=>{var t=r.target.closest("[open] summary");if(t)window.dataLayer.push({event:"closeDetails",detailsTitle:t.textContent||""});else{var e=r.target.closest("summary"),a=r.target.closest("a"),i=r.target.closest("button");e&&window.dataLayer.push({event:"openDetails",detailsTitle:e.textContent||""}),a&&window.dataLayer.push({event:"linkClicked",linkText:a.hasAttribute("title")?a.getAttribute("title")||"":a.textContent||"",class:a.hasAttribute("class")&&a.getAttribute("class")||"",href:a.getAttribute("href")||""}),i&&window.dataLayer.push({event:"buttonClicked",buttonText:i.textContent||"",class:i.hasAttribute("class")&&i.getAttribute("class")||""})}})}function pt(r){var t=new TextEncoder("utf-8").encode(r);return crypto.subtle.digest("SHA-1",t).then(function(e){for(var a=[],i=new DataView(e),c=0;c<i.byteLength;c+=4){var o=i.getUint32(c),n=o.toString(16),d="00000000",s=(d+n).slice(-d.length);a.push(s)}return a.join("")})}var gt=(r,t)=>{pt(r).then(function(e){var a=new XMLHttpRequest;a.addEventListener("load",function(){var i=this.responseText.split(`
 `),c=e.slice(5).toUpperCase(),o=!1;for(var n in i)if(i[n].substring(0,35)==c){o=!0;break}var d=new CustomEvent("hibpCheck",{detail:o});t.dispatchEvent(d)}),a.open("GET","https://api.pwnedpasswords.com/range/"+e.substr(0,5)),a.send()})},yt=r=>{function t(){if(Array.from(document.querySelectorAll("input[maxlength],textarea[maxlength]")).forEach((a,i)=>{a.parentElement,At(a)}),Array.from(document.querySelectorAll("label input")).forEach((a,i)=>{!a.closest("label").querySelector(".optional-text")&&!a.hasAttribute("required")&&(a.parentNode.tagName.toLowerCase()=="span"?a.parentElement.insertAdjacentHTML("beforebegin",'<span class="optional-text"></span>'):a.insertAdjacentHTML("beforebegin",'<span class="optional-text"></span>'))}),document.querySelector('input[type="date"]')){let a=function(i){var c=i.getFullYear(),o=String(i.getMonth()+1).padStart(2,"0"),n=String(i.getDate()).padStart(2,"0");return"".concat(c,"-").concat(o,"-").concat(n)};var e=new Date;Array.from(document.querySelectorAll('input[type="date"]')).forEach((i,c)=>{var o=e;if(i.hasAttribute("data-start")&&(o.setDate(o.getDate()+parseInt(i.getAttribute("data-start"))),i.setAttribute("min",a(o))),i.hasAttribute("data-period")){var n=parseInt(i.getAttribute("data-period")),d=new Date;d.setDate(o.getDate()+n),i.setAttribute("max",a(d))}if(i.hasAttribute("data-allowed-days")){var s=JSON.parse("[".concat(i.getAttribute("data-allowed-days"),"]"));i.addEventListener("input",function(l){var h=new Date(this.value).getUTCDay();s.includes(h)?i.setCustomValidity(""):i.setCustomValidity("That day of the week is not allowed")})}})}}document.readyState==="complete"&&t(),document.onreadystatechange=()=>{document.readyState==="complete"&&t()},r.addEventListener("input",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("input,textarea,select")){var a=e.target.closest("input,textarea,select");a.parentElement,a.hasAttribute("type")&&a.getAttribute("type")=="color"&&(a.nextElementSibling.value=a.value),a.hasAttribute("maxlength")&&a.nextElementSibling&&a.nextElementSibling.setAttribute("data-count",a.value.length),a.hasAttribute("data-strength-checker")&&wt(a)}}),r.addEventListener("change",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("select")){var a=e.target.closest("select");if(a.hasAttribute("data-change-type")&&a.hasAttribute("data-input")){var i=document.getElementById(a.getAttribute("data-input")),c=a.value;J(i,c)}}if(e&&e.target instanceof HTMLElement&&e.target.closest('dialog [type="radio"]')){var o=e.target.closest("dialog");e.target.closest('dialog [type="radio"]'),Array.from(o.querySelectorAll('[type="radio"][autofocus]')).forEach((n,d)=>{n.removeAttribute("autofocus")}),Array.from(o.querySelectorAll('[type="radio"]:checked')).forEach((n,d)=>{n.setAttribute("autofocus",!0)})}}),r.addEventListener("click",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("[data-change-type][data-input]:not(select)")){var a=e.target.closest("[data-change-type]"),i=document.getElementById(a.getAttribute("data-input")),c=a.getAttribute("data-change-type");if(a.setAttribute("data-change-type",i.getAttribute("type")),J(i,c),a.hasAttribute("data-alt-class")){var o=a.getAttribute("data-alt-class");a.setAttribute("data-alt-class",a.getAttribute("class")),a.setAttribute("class",o)}}})},At=r=>{var t=r.parentElement,e=r.getAttribute("maxlength");t.style.setProperty("--maxlength",e);var a=r.nextElementSibling;(!a||a&&a.classList.contains("invalid-feedback"))&&(a=document.createElement("span"),t.insertBefore(a,r.nextSibling)),a.setAttribute("data-count",r.value.length)},J=(r,t)=>{r.hasAttribute("type")&&r.getAttribute("type")=="password"&&r.setAttribute("data-password-type",!0),r.setAttribute("type",t)},wt=function r(t){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"no",a=document.getElementById(t.getAttribute("data-strength-checker")),i=t.value,c=t.hasAttribute("minlength")?t.getAttribute("minlength"):12,o=1,n=["Very weak","Weak","Average","Strong","Very strong"],d="";if(i.match(/(?=.*[0-9])/)&&(o+=1),i.match(/(?=.*[!,%,&,#,$,^,*,?,_,~,<,>,])/)&&(o+=1),i.match(/(?=.*[a-z])/)&&(o+=1),i.match(/(?=.*[A-Z])/)&&(o+=1),i.length<c&&(o=1,d="(must be at least ".concat(c," characters.)")),o>=3&&e=="no"){let s=function(l,h){l.detail?r(h,"danger"):r(h,"success"),h.removeEventListener("hibpCheck",s)};gt(i,t),t.addEventListener("hibpCheck",function(l){s(l,t)})}else o>=3&&e=="danger"&&(o=3,d="(this password is very common)");a&&(o<=3?a.classList.add("invalid-feedback"):a.classList.remove("invalid-feedback"),a.setAttribute("data-strength",o),a.innerHTML="Password strength: ".concat(n[o-1]," ").concat(d))},Lt=r=>{if(Array.from(r.querySelectorAll("details")).forEach((e,a)=>{e.addEventListener("mouseenter",function(i){window.matchMedia("(min-width: 62em)").matches&&e.setAttribute("open","true")},!1),e.addEventListener("mouseleave",function(i){window.matchMedia("(min-width: 62em)").matches&&e.removeAttribute("open")},!1)}),"IntersectionObserver"in window){var t=new IntersectionObserver(e=>{var[a]=e;return a.target.classList.toggle("is-stuck",a.intersectionRatio<1)},{threshold:[1]});t.observe(r)}};function St(r){var t,e=r.querySelector(".testimonial__images"),a=e.querySelectorAll("img").length;if(a==1)return!1;r.classList.add("testimonial--multi");var i=function(o){var n=r.querySelector(".btn-next"),d=r.querySelector(".btn-prev");n.setAttribute("data-go",o+1),d.setAttribute("data-go",o-1),n.removeAttribute("disabled"),d.removeAttribute("disabled"),o==1?d.setAttribute("disabled",!0):o==a&&n.setAttribute("disabled",!0)};e.addEventListener("scroll",function(c){clearTimeout(t),t=setTimeout(function(){var o=e.scrollWidth,n=e.scrollHeight,d=e.scrollLeft,s=e.scrollTop,l=Math.round(d/o*a)+1;d==0&&s!=0&&(l=Math.round(s/n*a)+1),r.setAttribute("data-show",l),i(l)},300)},!1),r.addEventListener("click",function(c){for(var o=c.target;o&&o!=this;o=o.parentNode)if(o.matches("[data-go]")){var n=parseInt(o.getAttribute("data-go")),d=0,s=0,l=e.scrollWidth,h=e.scrollHeight;l>h?s=Math.floor(l*((n-1)/a)):d=Math.floor(h*((n-1)/a)),e.scroll({top:d,left:s,behavior:"smooth"});break}},!1)}function Et(r,t){var e,a=r.querySelector(".carousel__inner"),i=r.querySelector(".carousel__controls"),c=t.querySelectorAll(":scope > .col").length;a.addEventListener("scroll",function(o){clearTimeout(e),e=setTimeout(function(){var n=a.clientWidth,d=a.scrollWidth,s=a.scrollLeft,l=Math.round(s/d*c)+1,h=t.querySelector(":scope > .col").scrollWidth,b=t.querySelector(":scope > .col:last-child").offsetLeft,v=a.scrollLeft+n+a.getBoundingClientRect().left>=b+60,u=Math.round(n/h),f=Math.ceil(c/u)*u-c;f>0&&v&&(l=Math.floor(c/u)*u+1),Array.from(r.querySelectorAll(".carousel__controls button")).forEach((m,p)=>{m.removeAttribute("aria-current")}),r.querySelector(".control-"+l).setAttribute("aria-current",!0),l==1?r.querySelector(".btn-prev").setAttribute("disabled","disabled"):r.querySelector(".btn-prev").removeAttribute("disabled"),l>c-u?r.querySelector(".btn-next").setAttribute("disabled","disabled"):r.querySelector(".btn-next").removeAttribute("disabled")},100)},!1),i.addEventListener("click",function(o){for(var n=o.target;n&&n!=this;n=n.parentNode)if(typeof n.matches=="function"&&n.matches("button")){o.preventDefault(),Array.from(i.querySelectorAll("button")).forEach((s,l)=>{s.removeAttribute("aria-current")}),n.setAttribute("aria-current",!0);var d=t.querySelector(":scope > *:nth-child(".concat(n.getAttribute("data-slide"),")"));a.scroll({top:0,left:d.offsetLeft-a.getBoundingClientRect().left,behavior:"smooth"});break}},!1),r.addEventListener("click",function(o){var n=a.clientWidth;a.scrollWidth;for(var d=t.querySelector(":scope > .col").scrollWidth,s=Math.round(n/d),l=t.querySelector(":scope > .col:last-child").offsetLeft,h=a.scrollLeft+n+a.getBoundingClientRect().left>=l+60,b=Math.ceil(c/s)*s-c,v=s-b,u=h&&b>0?v*d:a.clientWidth,f=o.target;f&&f!=this;f=f.parentNode)if(typeof f.matches=="function"&&f.matches(".btn-next, .btn-prev")){o.preventDefault();var m=f.classList.contains("btn-prev")?a.scrollLeft-u:a.scrollLeft+a.clientWidth;a.scroll({top:0,left:m,behavior:"smooth"});break}},!1)}function qt(r){r.addEventListener("change",function(t){var e=parseInt(r.querySelector("[data-min] select,[data-min] input").value),a=parseInt(r.querySelector("[data-max] select,[data-max] input").value);Array.from(r.querySelectorAll("[data-min] input")).forEach((i,c)=>{i.setAttribute("max",a)}),Array.from(r.querySelectorAll("[data-max] input")).forEach((i,c)=>{i.setAttribute("min",e)}),Array.from(r.querySelectorAll("[data-min] select option")).forEach((i,c)=>{parseInt(i.getAttribute("value"))>a?i.classList.add("d-none"):i.classList.remove("d-none")}),Array.from(r.querySelectorAll("[data-max] select option")).forEach((i,c)=>{parseInt(i.getAttribute("value"))<e?i.classList.add("d-none"):i.classList.remove("d-none")})},!1)}function xt(r){r.addEventListener("change",function(t){if(r.matches("[data-value-if]")){var e=r.getAttribute("data-redirect"),a=r.getAttribute("data-value-if");r.value==a&&(document.location.href=e)}else typeof r.value<"u"&&(document.location.href=r.value)},!1)}function kt(r){var t=r.querySelector(".row"),e=t.cloneNode(!0),a=r.querySelector("[data-add]");r.addEventListener("click",function(i){for(var c=i.target;c&&c!=this;c=c.parentNode){if(c.matches("[data-add]")){var o=e.cloneNode(!0);r.insertBefore(o,c),a.matches("[data-maxfiles]")&&Array.from(r.querySelectorAll(":scope > .row")).length>=a.dataset.maxfiles&&a.setAttribute("disabled","disabled");break}if(c.matches("[data-delete]")){var n=c.closest(".row");n.remove(),a.matches("[data-maxfiles]")&&Array.from(r.querySelectorAll(":scope > .row")).length<a.dataset.maxfiles&&a.removeAttribute("disabled");break}}},!1)}function Tt(r){Array.from(r.querySelectorAll("[data-input-range]")).forEach((t,e)=>{qt(t)}),Array.from(r.querySelectorAll("[data-redirect]")).forEach((t,e)=>{xt(t)}),Array.from(r.querySelectorAll(".multiple-file-uploads")).forEach((t,e)=>{kt(t)}),r.addEventListener("change",function(t){for(var e=t.target;e&&e!=this;e=e.parentNode)if(e.matches('[type="file"][data-filesize]')&&e.files&&e.files[0]){var a=e.dataset.filesize;e.files[0].size>a&&(e.value="",alert("File too large"));break}},!1),r.addEventListener("change",function(t){Array.from(r.querySelectorAll("select[data-activeif][data-equals],input[data-activeif][data-equals]")).forEach((e,a)=>{var i=e.closest("[data-group]")?e.closest("[data-group]"):r,c=e.dataset.activeif,o=e.dataset.equals,n=i.querySelector('select[data-id="'.concat(c,'"],input[data-id="').concat(c,'"]'));n.value==o?e.removeAttribute("disabled"):(e.setAttribute("disabled","disabled"),e.value="")}),Array.from(r.querySelectorAll(".form-control__wrapper[data-displayif][data-equals]")).forEach((e,a)=>{var i=e.closest("[data-group]")?e.closest("[data-group]"):r,c=e.dataset.activeif,o=e.dataset.equals,n=i.querySelector('select[data-id="'.concat(c,'"],input[data-id="').concat(c,'"]'));n.value==o?e.classList.remove("d-none"):e.classList.add("d-none")})},!1)}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class Ct extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});var t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):"".concat(t,"/css/core.min.css"),a='@import "'.concat(t,'/css/components/header.css";'),i=document.createElement("template");i.innerHTML=`