@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/js/modules/dynamicEvents.js

@@ -1,5 +1,5 @@
 // @ts-nocheck
-// Create the event listeners 
+// Create the event listeners
 const createDynamicEvents = () => {
     // Change event
     document.addEventListener('change', (event) => {
@@ -18,7 +18,7 @@ const createDynamicEvents = () => {
 };
 // Parse the JSON and trigger the events, this may be singular or multiple set of events
 const splitEvents = (element, events) => {
-    // an empty events will trigger looking up the dom chain for 
+    // an empty events will trigger looking up the dom chain for
     if (!events) {
         events = element.parentNode.getAttribute('data-change-events');
     }
@@ -31,7 +31,7 @@ const splitEvents = (element, events) => {
     });
 };
 const checkConditions = (element, event) => {
-    if ("matches" in event) {
+    if ('matches' in event) {
         if (event['matches'] == 'any')
             runEvent(element, event, 'if');
         else if (element.value == event.matches)
@@ -40,9 +40,9 @@ const checkConditions = (element, event) => {
             runEvent(element, event, 'else');
         return false;
     }
-    else if ("in-list" in event) {
+    else if ('in-list' in event) {
         // Pass the matched datalist element instead of the triggered element
-        let match = document.querySelector(`${event['in-list']} option[value="${element.value}"]`);
+        const match = document.querySelector(`${event['in-list']} option[value="${element.value}"]`);
         if (document.querySelector(`${event['in-list']} option[value="${element.value}"]`)) {
             runEvent(match, event, 'if');
         }
@@ -50,7 +50,7 @@ const checkConditions = (element, event) => {
             runEvent(match, event, 'else');
         return false;
     }
-    else if ("event" in event) {
+    else if ('event' in event) {
         runEvent(element, event, 'event');
     }
 };
@@ -58,18 +58,18 @@ const runEvent = (element, event, eventType) => {
     if (eventType in event == false)
         return false;
     switch (event[eventType]) {
-        case "hide":
+        case 'hide':
             if (document.querySelector(event['target'])) {
-                let hideElement = document.querySelector(event['target']);
+                const hideElement = document.querySelector(event['target']);
                 hideElement.classList.add('js-hide');
                 Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
                     input.removeAttribute('required');
                 });
             }
             break;
-        case "show":
+        case 'show':
             if (document.querySelector(event['target'])) {
-                let showElement = document.querySelector(event['target']);
+                const showElement = document.querySelector(event['target']);
                 showElement.classList.remove('js-hide');
                 Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
                     if (!input.closest('.js-hide'))
@@ -77,35 +77,35 @@ const runEvent = (element, event, eventType) => {
                 });
             }
             break;
-        case "populate-form":
+        case 'populate-form':
             populateForm(element, event);
             break;
-        case "dispatchEvent":
-            let theEvent = new Event(event['value']);
+        case 'dispatchEvent':
+            const theEvent = new Event(event['value']);
             document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
             break;
-        case "setAttribute":
+        case 'setAttribute':
             Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element, index) {
                 element.setAttribute(event['attribute'], event['value']);
             });
             break;
-        case "focus":
+        case 'focus':
             document.querySelector(`${event['target']}`).focus();
             break;
-        case "removeAttribute":
+        case 'removeAttribute':
             Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element, index) {
                 element.removeAttribute(event['attribute']);
             });
             break;
-        case "updateValue":
-            document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : "";
-            let changeEvent = new Event('change');
+        case 'updateValue':
+            document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : '';
+            const changeEvent = new Event('change');
             document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);
             break;
-        case "submitForm":
+        case 'submitForm':
             document.querySelector(`${event['target']}`).submit();
             break;
-        case "openLink":
+        case 'openLink':
             if (document.querySelector(`${event['target']}`).value)
                 window.location.href = document.querySelector(`${event['target']}`).value;
             break;
@@ -114,12 +114,12 @@ const runEvent = (element, event, eventType) => {
     }
 };
 const populateForm = function (element, event) {
-    let values = JSON.parse(element.getAttribute('data-values'));
-    let form = document.querySelector(event['target']);
+    const values = JSON.parse(element.getAttribute('data-values'));
+    const form = document.querySelector(event['target']);
     if (!values)
         return false;
     Object.keys(values).forEach((field, index) => {
-        if (document.getElementById(field) && document.getElementById(field).tagName == "SPAN")
+        if (document.getElementById(field) && document.getElementById(field).tagName == 'SPAN')
             document.getElementById(field).innerHTML = values[field];
         if (form.querySelector(`select[name="${field}"] [value="${values[field]}"]`)) {
             form.querySelector(`select[name="${field}"]`).value = values[field];

package/assets/js/modules/file-upload.js

@@ -4,27 +4,26 @@ function fileupload(form, callback) {
     const label = form.querySelector(`[for="${input.getAttribute('id')}"]`);
     const add = form.querySelector('.file-upload__add');
     form.querySelector('button').remove();
-    input.addEventListener("change", function (e) {
+    input.addEventListener('change', function (e) {
         // prevent default to allow drop
-        let url = form.getAttribute('action');
-        let formData = new FormData(form);
+        const url = form.getAttribute('action');
+        const formData = new FormData(form);
         input.setAttribute('disabled', 'disabled');
         fetch(url, {
             method: 'POST',
-            body: formData
-        })
-            .then(() => {
+            body: formData,
+        }).then(() => {
             form.classList.add('file-uploaded');
             label.innerHTML = 'File uploaded';
-            if (typeof callback == "function")
+            if (typeof callback == 'function')
                 callback();
         });
     }, false);
-    form.addEventListener("submit", function (e) {
+    form.addEventListener('submit', function (e) {
         // prevent default to allow drop
         e.preventDefault();
     }, false);
-    add.addEventListener("click", function (e) {
+    add.addEventListener('click', function (e) {
         form.classList.remove('file-uploaded');
         label.innerHTML = 'Select a file to upload';
         input.removeAttribute('disabled');

package/assets/js/modules/fileupload.js

@@ -9,7 +9,7 @@ function fileupload(fileupload, wrapper) {
     // We clone the input field to work as a buffer input field, this allows us to add new files without losing the old ones
     const cloneInput = input.cloneNode();
     dropArea.append(cloneInput);
-    let checkFileExt = function (filename) {
+    const checkFileExt = function (filename) {
         if (!input.hasAttribute('accept'))
             return true;
         const nameExtension = filename.split('.').pop();
@@ -47,7 +47,7 @@ function fileupload(fileupload, wrapper) {
     cloneInput.addEventListener('change', (event) => {
         if (input.hasAttribute('multiple')) {
             const filesArray = [...input.files, ...cloneInput.files];
-            let fileNames = [];
+            const fileNames = [];
             const dt = new DataTransfer();
             for (let i = 0; i < filesArray.length; i++) {
                 const file = filesArray[i];
@@ -81,7 +81,7 @@ function fileupload(fileupload, wrapper) {
     });
     input.addEventListener('change', (event) => {
         if (input.files.length == 1) {
-            let file = input.files[0];
+            const file = input.files[0];
             const size = file.size / 1000;
             if (!checkFileExt(file.name)) {
                 errorMsgExt.classList.add('d-block');
@@ -99,7 +99,7 @@ function fileupload(fileupload, wrapper) {
         for (const file of input.files) {
             filesWrapper.innerHTML += `<span class="file" part="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
         }
-        const elementChangeEvent = new CustomEvent('elementchange', { detail: { "files": input.files } });
+        const elementChangeEvent = new CustomEvent('elementchange', { detail: { files: input.files } });
         fileupload.dispatchEvent(elementChangeEvent);
         if (input.files.length == 0) {
             const emptyEvent = new CustomEvent('empty');
@@ -107,7 +107,7 @@ function fileupload(fileupload, wrapper) {
         }
     });
     if (fileupload.hasAttribute('data-filename')) {
-        let filename = fileupload.getAttribute('data-filename');
+        const filename = fileupload.getAttribute('data-filename');
         if (filename)
             filesWrapper.innerHTML = `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
     }

package/assets/js/modules/filterlist.js

@@ -3,7 +3,7 @@ function filterlist(list, input) {
     addFilterlistEventListeners(list, input);
 }
 function addFilterlistEventListeners(list, input) {
-    var timer;
+    let timer;
     input.addEventListener('keyup', (event) => {
         clearTimeout(timer);
         timer = setTimeout(function () {
@@ -17,7 +17,7 @@ function addFilterlistEventListeners(list, input) {
 }
 export const filterTheList = function (list, searchTerm) {
     Array.from(list.querySelectorAll(':scope > li')).forEach((item, index) => {
-        let content = item.textContent.toLowerCase();
+        const content = item.textContent.toLowerCase();
         item.classList.add('d-none');
         if (content.includes(searchTerm.toLowerCase()))
             item.classList.remove('d-none');
@@ -25,8 +25,8 @@ export const filterTheList = function (list, searchTerm) {
     // Data layer Web component created
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({
-        "event": "Filtered list",
-        "value": searchTerm
+        event: 'Filtered list',
+        value: searchTerm,
     });
 };
 export default filterlist;

package/assets/js/modules/form.js

@@ -3,8 +3,8 @@
 // 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) {
-        var min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
-        var max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
+        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) => {
             input.setAttribute('max', max);
@@ -36,7 +36,7 @@ function inputRedirect(inputWrapper) {
                 document.location.href = url;
         }
         else {
-            if (typeof inputWrapper.value != "undefined")
+            if (typeof inputWrapper.value != 'undefined')
                 document.location.href = inputWrapper.value;
         }
     }, false);
@@ -47,18 +47,22 @@ function multipleFileUploads(wrapper) {
     const clone = fileTenplate.cloneNode(true);
     const addButton = wrapper.querySelector('[data-add]');
     wrapper.addEventListener('click', function (e) {
-        for (var target = e.target; target && target != this; target = target.parentNode) {
-            if (target.matches('[data-add]')) { // Add a new row upload file input fields
+        for (let target = e.target; target && target != this; target = target.parentNode) {
+            if (target.matches('[data-add]')) {
+                // Add a new row upload file input fields
                 const tempClone = clone.cloneNode(true);
                 wrapper.insertBefore(tempClone, target);
-                if (addButton.matches('[data-maxfiles]') && Array.from(wrapper.querySelectorAll(':scope > .row')).length >= addButton.dataset.maxfiles)
+                if (addButton.matches('[data-maxfiles]') &&
+                    Array.from(wrapper.querySelectorAll(':scope > .row')).length >= addButton.dataset.maxfiles)
                     addButton.setAttribute('disabled', 'disabled');
                 break;
             }
-            if (target.matches('[data-delete]')) { // Delete the current row
-                let row = target.closest('.row');
+            if (target.matches('[data-delete]')) {
+                // Delete the current row
+                const row = target.closest('.row');
                 row.remove();
-                if (addButton.matches('[data-maxfiles]') && Array.from(wrapper.querySelectorAll(':scope > .row')).length < addButton.dataset.maxfiles)
+                if (addButton.matches('[data-maxfiles]') &&
+                    Array.from(wrapper.querySelectorAll(':scope > .row')).length < addButton.dataset.maxfiles)
                     addButton.removeAttribute('disabled');
                 break;
             }
@@ -79,7 +83,7 @@ function form(formElement) {
     });
     // Check the file size of a file when uploaded in case it exceeds the max file size set
     formElement.addEventListener('change', function (e) {
-        for (var target = e.target; target && target != this; target = target.parentNode) {
+        for (let target = e.target; target && target != this; target = target.parentNode) {
             if (target.matches('[type="file"][data-filesize]') && target.files && target.files[0]) {
                 const maxAllowedSize = target.dataset.filesize;
                 if (target.files[0].size > maxAllowedSize) {
@@ -94,10 +98,10 @@ function form(formElement) {
     formElement.addEventListener('change', function (e) {
         // 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) => {
-            let group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
-            let selector = arrayElement.dataset.activeif;
-            let value = arrayElement.dataset.equals;
-            let testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
+            const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
+            const selector = arrayElement.dataset.activeif;
+            const value = arrayElement.dataset.equals;
+            const testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
             if (testElement.value == value) {
                 arrayElement.removeAttribute('disabled');
             }
@@ -108,10 +112,10 @@ 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) => {
-            let group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
-            let selector = arrayElement.dataset.activeif;
-            let value = arrayElement.dataset.equals;
-            let testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
+            const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
+            const selector = arrayElement.dataset.activeif;
+            const value = arrayElement.dataset.equals;
+            const testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
             if (testElement.value == value)
                 arrayElement.classList.remove('d-none');
             else

package/assets/js/modules/helpers.js

@@ -8,9 +8,9 @@
  * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
  */
 export const addBodyClasses = (body) => {
-    body.classList.add("js-enabled");
+    body.classList.add('js-enabled');
     if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
-        body.classList.add("ie");
+        body.classList.add('ie');
     }
     return null;
 };
@@ -35,26 +35,30 @@ export const addGlobalEvents = (body) => {
     };
     if (location.hash)
         checkElements(location.hash);
-    window.addEventListener('hashchange', function () { checkElements(location.hash); }, false);
-    addEventListener("popstate", (event) => {
-        if (event && event.state && event.state.type && event.state.type == "pagination") {
-            let form = document.querySelector(`#${event.state.form}`);
-            let pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
+    window.addEventListener('hashchange', function () {
+        checkElements(location.hash);
+    }, false);
+    addEventListener('popstate', (event) => {
+        if (event && event.state && event.state.type && event.state.type == 'pagination') {
+            const form = document.querySelector(`#${event.state.form}`);
+            const pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
             if (pageInput)
                 pageInput.value = event.state.page;
             else
                 form.innerHTML += `<input name="page" type="hidden" data-pagination="true" value="${event.state.page}" />`;
-            form.dispatchEvent(new Event("submit"));
+            form.dispatchEvent(new Event('submit'));
         }
     });
-    document.addEventListener("submit", (event) => {
+    document.addEventListener('submit', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.matches('form')) {
-            let form = event.target;
+            const form = event.target;
             // Reset password types
             Array.from(form.querySelectorAll('[data-password-type]')).forEach((input, index) => {
                 input.setAttribute('type', 'password');
             });
-            if (form.querySelector(':invalid') || form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]')) {
+            if (form.querySelector(':invalid') ||
+                form.querySelector('.pwd-checker[data-strength="1"]') ||
+                form.querySelector('.pwd-checker[data-strength="2"]')) {
                 form.classList.add('was-validated');
                 event.preventDefault();
             }
@@ -64,8 +68,8 @@ export const addGlobalEvents = (body) => {
             }
         }
     });
-    document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
             if (document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -73,20 +77,23 @@ export const addGlobalEvents = (body) => {
         }
     });
     Array.from(document.querySelectorAll('label progress')).forEach((progress, index) => {
-        let label = progress.closest('label');
+        const label = progress.closest('label');
         label.setAttribute('data-percent', progress.getAttribute('value'));
     });
     return null;
 };
 export const isNumeric = function (str) {
-    if (typeof str != "string")
-        return false; // we only process strings!  
-    return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
-        !isNaN(parseFloat(str)); // ...and ensure strings of whitespace fail
+    if (typeof str != 'string')
+        return false; // we only process strings!
+    return (!isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+        !isNaN(parseFloat(str))); // ...and ensure strings of whitespace fail
 };
 export const zeroPad = (num, places) => String(num).padStart(places, '0');
 export const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-export const ucwords = (str) => str.split(' ').map(s => ucfirst(s)).join(' ');
+export const ucwords = (str) => str
+    .split(' ')
+    .map((s) => ucfirst(s))
+    .join(' ');
 export const unsnake = (str) => str.replace(/_/g, ' ');
 export const snake = (str) => str.replace(/ /g, '_');
 export const safeID = function (str) {
@@ -96,51 +103,54 @@ export const safeID = function (str) {
     return str;
 };
 export const numberOfDays = function (startDateString, endDateString) {
-    let convertStart = startDateString.split('/');
-    let convertEnd = endDateString.split('/');
-    let dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);
-    let dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);
-    if (dateStart == "Invalid Date")
-        throw "Start date is not a valid date";
-    if (dateEnd == "Invalid Date")
-        throw "End date is not a valid date";
+    const convertStart = startDateString.split('/');
+    const convertEnd = endDateString.split('/');
+    const dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);
+    const dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);
+    if (dateStart == 'Invalid Date')
+        throw 'Start date is not a valid date';
+    if (dateEnd == 'Invalid Date')
+        throw 'End date is not a valid date';
     // To calculate the time difference of two dates
-    let diffTime = dateEnd.getTime() - dateStart.getTime();
-    let numberOfDays = (diffTime / (1000 * 3600 * 24) + 1);
+    const diffTime = dateEnd.getTime() - dateStart.getTime();
+    const numberOfDays = diffTime / (1000 * 3600 * 24) + 1;
     if (numberOfDays < 0)
-        throw "The start date should be before the end date";
+        throw 'The start date should be before the end date';
     return numberOfDays;
 };
 // Used to get values from nested json objects
-export const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
-export const isTraversable = o => Array.isArray(o) || o !== null && ['function', 'object'].includes(typeof o);
+export const resolvePath = (object, path, defaultValue) => path
+    .split(/[\.\[\]\'\"]/)
+    .filter((p) => p)
+    .reduce((o, p) => (o ? o[p] : defaultValue), object);
+export const isTraversable = (o) => Array.isArray(o) || (o !== null && ['function', 'object'].includes(typeof o));
 export const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY) => {
-    const limit = Math.tan(45 * 1.5 / 180 * Math.PI);
-    let pageWidth = window.innerWidth || document.body.clientWidth;
-    let treshold = Math.max(1, Math.floor(0.01 * (pageWidth)));
-    let x = touchendX - touchstartX;
-    let y = touchendY - touchstartY;
-    let xy = Math.abs(x / y);
-    let yx = Math.abs(y / x);
+    const limit = Math.tan(((45 * 1.5) / 180) * Math.PI);
+    const pageWidth = window.innerWidth || document.body.clientWidth;
+    const treshold = Math.max(1, Math.floor(0.01 * pageWidth));
+    const x = touchendX - touchstartX;
+    const y = touchendY - touchstartY;
+    const xy = Math.abs(x / y);
+    const yx = Math.abs(y / x);
     if (Math.abs(x) > treshold || Math.abs(y) > treshold) {
         if (yx <= limit) {
             if (x < 0) {
-                return "left";
+                return 'left';
             }
             else {
-                return "right";
+                return 'right';
             }
         }
         if (xy <= limit) {
             if (y < 0) {
-                return "top";
+                return 'top';
             }
             else {
-                return "bottom";
+                return 'bottom';
             }
         }
     }
     else {
-        return "tap";
+        return 'tap';
     }
 };

package/assets/js/modules/inputs.js

@@ -4,18 +4,18 @@ const extendInputs = (body) => {
     function loadInput() {
         // maxlength counter init
         Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input, index) => {
-            let wrapper = input.parentElement;
+            const wrapper = input.parentElement;
             setMaxlengthVars(input, wrapper);
         });
         Array.from(document.querySelectorAll('label input')).forEach((input, index) => {
             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>`);
+                    input.parentElement.insertAdjacentHTML('beforebegin', `<span class="optional-text"></span>`);
                 else
-                    input.insertAdjacentHTML("beforebegin", `<span class="optional-text"></span>`);
+                    input.insertAdjacentHTML('beforebegin', `<span class="optional-text"></span>`);
             }
         });
-        // Date restrictions 
+        // Date restrictions
         if (document.querySelector('input[type="date"]')) {
             const today = new Date();
             function formatDate(date) {
@@ -25,25 +25,25 @@ const extendInputs = (body) => {
                 return `${year}-${month}-${day}`;
             }
             Array.from(document.querySelectorAll('input[type="date"]')).forEach((input, index) => {
-                let startDate = today;
+                const startDate = today;
                 if (input.hasAttribute('data-start')) {
                     startDate.setDate(startDate.getDate() + parseInt(input.getAttribute('data-start')));
                     input.setAttribute('min', formatDate(startDate));
                 }
                 if (input.hasAttribute('data-period')) {
-                    let timePeriod = parseInt(input.getAttribute('data-period'));
-                    let endDate = new Date();
+                    const timePeriod = parseInt(input.getAttribute('data-period'));
+                    const endDate = new Date();
                     endDate.setDate(startDate.getDate() + timePeriod);
                     input.setAttribute('max', formatDate(endDate));
                 }
                 if (input.hasAttribute('data-allowed-days')) {
-                    let allowedDays = JSON.parse(`[${input.getAttribute('data-allowed-days')}]`);
+                    const allowedDays = JSON.parse(`[${input.getAttribute('data-allowed-days')}]`);
                     input.addEventListener('input', function (e) {
-                        var day = new Date(this.value).getUTCDay();
+                        const day = new Date(this.value).getUTCDay();
                         if (allowedDays.includes(day))
-                            input.setCustomValidity("");
+                            input.setCustomValidity('');
                         else
-                            input.setCustomValidity("That day of the week is not allowed");
+                            input.setCustomValidity('That day of the week is not allowed');
                     });
                 }
             });
@@ -53,7 +53,7 @@ const extendInputs = (body) => {
         loadInput();
     }
     document.onreadystatechange = () => {
-        if (document.readyState === "complete") {
+        if (document.readyState === 'complete') {
             loadInput();
         }
     };
@@ -65,7 +65,7 @@ const extendInputs = (body) => {
             if (input.hasAttribute('type') && input.getAttribute('type') == 'color')
                 input.nextElementSibling.value = input.value;
             if (input.hasAttribute('maxlength') && input.nextElementSibling)
-                input.nextElementSibling.setAttribute("data-count", input.value.length);
+                input.nextElementSibling.setAttribute('data-count', input.value.length);
             if (input.hasAttribute('data-strength-checker'))
                 checkPWDStrength(input);
         }
@@ -91,7 +91,9 @@ const extendInputs = (body) => {
         }
     });
     body.addEventListener('click', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-type][data-input]:not(select)')) {
+        if (event &&
+            event.target instanceof HTMLElement &&
+            event.target.closest('[data-change-type][data-input]:not(select)')) {
             const button = event.target.closest('[data-change-type]');
             const input = document.getElementById(button.getAttribute('data-input'));
             const newType = button.getAttribute('data-change-type');
@@ -106,9 +108,9 @@ const extendInputs = (body) => {
     });
 };
 export const setMaxlengthVars = (input) => {
-    let wrapper = input.parentElement;
-    let maxlength = input.getAttribute('maxlength');
-    wrapper.style.setProperty("--maxlength", maxlength);
+    const wrapper = input.parentElement;
+    const maxlength = input.getAttribute('maxlength');
+    wrapper.style.setProperty('--maxlength', maxlength);
     let span = input.nextElementSibling;
     if (!span || (span && span.classList.contains('invalid-feedback'))) {
         span = document.createElement('span');
@@ -126,7 +128,7 @@ export const checkPWDStrength = (input, check = 'no') => {
     const password = input.value;
     const minChars = input.hasAttribute('minlength') ? input.getAttribute('minlength') : 12;
     let strength = 1;
-    let strengthName = ['Very weak', 'Weak', 'Average', 'Strong', 'Very strong'];
+    const strengthName = ['Very weak', 'Weak', 'Average', 'Strong', 'Very strong'];
     let extraMsg = '';
     //has number
     if (password.match(/(?=.*[0-9])/))
@@ -151,13 +153,15 @@ export const checkPWDStrength = (input, check = 'no') => {
             checkhibpCheck(event, input);
         });
         function checkhibpCheck(event, input) {
-            if (event.detail) { // found
+            if (event.detail) {
+                // found
                 checkPWDStrength(input, 'danger');
             }
-            else { // not found
+            else {
+                // not found
                 checkPWDStrength(input, 'success');
             }
-            input.removeEventListener("hibpCheck", checkhibpCheck); // Succeeds   
+            input.removeEventListener('hibpCheck', checkhibpCheck); // Succeeds
         }
     }
     else if (strength >= 3 && check == 'danger') {

package/assets/js/modules/nav.js

@@ -11,7 +11,9 @@ const navbar = (element) => {
         }, false);
     });
     if ('IntersectionObserver' in window) {
-        const observer = new IntersectionObserver(([e]) => e.target.classList.toggle("is-stuck", e.intersectionRatio < 1), { threshold: [1] });
+        const observer = new IntersectionObserver(([e]) => e.target.classList.toggle('is-stuck', e.intersectionRatio < 1), {
+            threshold: [1],
+        });
         observer.observe(element);
     }
 };