@iamproperty/components 7.1.0--beta1 → 7.1.0--beta3

package/assets/js/components/multiselect/multiselect.component.js

@@ -2,15 +2,19 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-    "event": "customElementRegistered",
-    "element": "mutliselect"
+    event: 'customElementRegistered',
+    element: 'mutliselect',
 });
 class iamMultiselect extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
-        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
-        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
+        const coreCSS = document.body.hasAttribute('data-core-css')
+            ? document.body.getAttribute('data-core-css')
+            : `${assetLocation}/css/core.min.css`;
         const loadCSS = `@import "${assetLocation}/css/components/multiselect.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
@@ -19,7 +23,7 @@ class iamMultiselect extends HTMLElement {
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <label for="search"> <slot name="feedback"></slot></label>
+    <label for="search" class="mb-0"><span class="inner-label label"></span> <slot name="feedback"></slot>
     <div class="outer">
     <div class="wrapper">
       
@@ -32,47 +36,46 @@ class iamMultiselect extends HTMLElement {
       <button id="clear"><span class="visually-hidden">Clear</span></button>
     </div>
     </div>
+    </label>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
     connectedCallback() {
-        let multiselect = this;
-        let form = this.closest('form');
-        let wrapper = this.shadowRoot.querySelector('.wrapper');
-        let search = multiselect.shadowRoot.querySelector('#search');
-        let button = multiselect.shadowRoot.querySelector('#clear');
+        const multiselect = this;
+        const form = this.closest('form');
+        const wrapper = this.shadowRoot.querySelector('.wrapper');
+        const search = multiselect.shadowRoot.querySelector('#search');
+        const button = multiselect.shadowRoot.querySelector('#clear');
         let order = 0;
-        let label = multiselect.shadowRoot.querySelector('label');
-        label.innerHTML = multiselect.getAttribute('data-label');
+        const innerLabel = multiselect.shadowRoot.querySelector('label .inner-label');
+        innerLabel.innerHTML = multiselect.getAttribute('data-label');
         if (multiselect.hasAttribute('placeholder')) {
             search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
         }
         multiselect.setAttribute('data-error', 'true');
         // If in form and is required lets watch for the form being submitted
         if (form && multiselect.hasAttribute('data-is-required')) {
-            let observer = new MutationObserver(function (mutations) {
+            const observer = new MutationObserver(function (mutations) {
                 mutations.forEach(function (mutationRecord) {
                     const targetElement = mutationRecord.target;
                     console.log(targetElement);
-                    if (targetElement.classList.contains("was-validated")) {
+                    if (targetElement.classList.contains('was-validated')) {
                         wrapper.classList.add('was-validated');
                     }
                     else {
                         wrapper.classList.remove('was-validated');
                     }
-                    ;
                 });
             });
-            if (form.classList.contains("was-validated")) {
+            if (form.classList.contains('was-validated')) {
                 wrapper.classList.add('was-validated');
             }
             else {
                 wrapper.classList.remove('was-validated');
             }
-            ;
             observer.observe(form, {
                 attributes: true,
-                attributeFilter: ['style', 'class']
+                attributeFilter: ['style', 'class'],
             });
         }
         // Set the correct attributes
@@ -109,10 +112,11 @@ class iamMultiselect extends HTMLElement {
         // Filter list
         search.addEventListener('input', (event) => {
             Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label, index) => {
-                let checkbox = label.querySelector('input');
-                let searchValue = checkbox.value;
-                let labelText = label.textContent;
-                if (searchValue.toLowerCase().includes(search.value.toLowerCase()) || labelText.toLowerCase().includes(search.value.toLowerCase())) {
+                const checkbox = label.querySelector('input');
+                const searchValue = checkbox.value;
+                const labelText = label.textContent;
+                if (searchValue.toLowerCase().includes(search.value.toLowerCase()) ||
+                    labelText.toLowerCase().includes(search.value.toLowerCase())) {
                     label.removeAttribute('slot');
                 }
                 else {
@@ -120,16 +124,28 @@ class iamMultiselect extends HTMLElement {
                 }
             });
         });
+        // Add a delayed hover effect for non hover devices
+        let hoverTimeout;
+        multiselect.addEventListener('focus', (event) => {
+            multiselect.classList.add('hover');
+            clearTimeout(hoverTimeout);
+        });
+        search.addEventListener('blur', (event) => {
+            clearTimeout(hoverTimeout);
+            hoverTimeout = setTimeout(function () {
+                multiselect.classList.remove('hover');
+            }, 1000);
+        });
         // Set items
         multiselect.addEventListener('change', (event) => {
             if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {
-                let checkbox = event.target.closest('input[type="checkbox"]');
+                const checkbox = event.target.closest('input[type="checkbox"]');
                 setItem(checkbox);
                 search.focus();
             }
         });
         // Clear all
-        button.addEventListener("click", function (event) {
+        button.addEventListener('click', function (event) {
             Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox, index) => {
                 checkbox.checked = false;
                 setItem(checkbox);
@@ -137,39 +153,40 @@ class iamMultiselect extends HTMLElement {
             search.focus();
         });
         // Add some keyboard features to keep it accessible
-        multiselect.addEventListener("keydown", function (event) {
+        multiselect.addEventListener('keydown', function (event) {
             const activeElement = document.activeElement;
-            switch (event.key) { // change to event.key to key to use the above variable
-                case "ArrowUp":
+            switch (event.key // change to event.key to key to use the above variable
+            ) {
+                case 'ArrowUp':
                     // Up pressed
                     event.preventDefault();
-                    if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == "checkbox") {
-                        let arrCheckboxes = multiselect.querySelectorAll(`label:not([slot="checked"]):not([slot="checked"])`);
-                        let activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
-                        let prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];
+                    if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
+                        const arrCheckboxes = multiselect.querySelectorAll(`label:not([slot="checked"]):not([slot="checked"])`);
+                        const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
+                        const prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];
                         if (prevCheckbox)
                             prevCheckbox.focus();
                         else
                             search.focus();
                     }
                     break;
-                case "ArrowDown":
+                case 'ArrowDown':
                     // Down pressed
                     event.preventDefault();
                     if (activeElement == multiselect) {
                         multiselect.querySelector('label:not([slot="checked"]):not([slot="checked"])').focus();
                     }
-                    else if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == "checkbox") {
-                        let activeValue = activeElement.value;
-                        let nextCheckbox = multiselect.querySelector(`label:has(input[value="${activeValue}"]) ~ label:not([slot="checked"]):not([slot="checked"])`);
+                    else if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
+                        const activeValue = activeElement.value;
+                        const nextCheckbox = multiselect.querySelector(`label:has(input[value="${activeValue}"]) ~ label:not([slot="checked"]):not([slot="checked"])`);
                         if (nextCheckbox)
                             nextCheckbox.focus();
                     }
                     break;
-                case "Enter":
+                case 'Enter':
                     event.stopPropagation();
                     event.preventDefault();
-                    if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == "checkbox") {
+                    if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
                         if (activeElement.checked == false)
                             activeElement.checked = true;
                         else
@@ -189,19 +206,20 @@ class iamMultiselect extends HTMLElement {
             }
             return lastTag;
         }
-        search.addEventListener("keydown", function (event) {
-            switch (event.key) { // change to event.key to key to use the above variable
-                case "Enter":
-                    let match = multiselect.querySelector(`input[value="${search.value}"]:not(:checked)`);
+        search.addEventListener('keydown', function (event) {
+            switch (event.key // change to event.key to key to use the above variable
+            ) {
+                case 'Enter':
+                    const match = multiselect.querySelector(`input[value="${search.value}"]:not(:checked)`);
                     if (!match)
-                        search.value = "";
+                        search.value = '';
                     search.focus();
                     break;
-                case "Backspace":
+                case 'Backspace':
                     if (!search.value) {
-                        let lastTag = checkLastTag(order);
+                        const lastTag = checkLastTag(order);
                         if (lastTag) {
-                            let lastTagInput = lastTag.querySelector('input');
+                            const lastTagInput = lastTag.querySelector('input');
                             lastTagInput.checked = false;
                             setItem(lastTagInput);
                         }
@@ -211,10 +229,10 @@ class iamMultiselect extends HTMLElement {
             }
         });
         // Fix for the inline edit multiselect
-        multiselect.addEventListener("mousedown", (event) => {
+        multiselect.addEventListener('mousedown', (event) => {
             wrapper.setAttribute('data-mousedown', 'true');
         });
-        multiselect.addEventListener("mouseup", (event) => {
+        multiselect.addEventListener('mouseup', (event) => {
             wrapper.removeAttribute('data-mousedown');
         });
     }

package/assets/js/components/multiselect/multiselect.component.min.js

@@ -1,14 +1,14 @@
 /*!
-  * iamKey v7.1.0--beta1
+  * iamKey v7.1.0--beta3
   * Copyright 2022-2025 iamproperty
-  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"mutliselect"});class b extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",s=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,r=document.createElement("template");r.innerHTML=`
+  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"mutliselect"});class f extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",l=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,r=document.createElement("template");r.innerHTML=`
     <style>
-    @import "${s}";
-    .outer{position:relative;max-width:var(--input-max-width, 50rem);display:block}label{margin-bottom:0;padding-bottom:.5rem}.wrapper{margin-bottom:1.5rem;max-width:var(--input-max-width, 50rem)}.wrapper:after{content:"";display:block;position:absolute;top:100%;left:0;width:100%;height:1rem}.wrapper input{margin-bottom:0.5rem}.wrapper .feedback{position:absolute;right:0;bottom:100%;padding:.85rem;width:min-content;white-space:nowrap;margin-bottom:.5rem;display:none}.wrapper.was-validated .feedback{display:block}.wrapper.filled{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;min-height:calc(2.75rem + 4px);padding:0.5rem 2rem 0rem 0.8125rem;font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);color:var(--colour-body);background-color:var(--colour-canvas-2);border:2px solid var(--colour-primary);border-radius:0.5rem}.wrapper.filled:is(:focus-within,.focus-within):not(:disabled){border-color:var(--colour-info);outline:0;box-shadow:0 0 0 .1rem rgba(30,190,230,.25)}.wrapper.filled input{all:unset;font-size:1rem;line-height:1.625rem;display:inline-block;width:0;flex-grow:1;padding:0 0.5rem 0 0 !important;margin-inline:0.1875rem;order:999;margin-bottom:0.5rem}.wrapper.filled .feedback{display:none !important}.wrapper.filled:is(:focus,.focus):not(:disabled){border-color:var(--colour-info);outline:0;box-shadow:0 0 0 .1rem rgba(30,190,230,.25)}button{position:absolute;top:.75rem;right:.5rem;border:none;background:none;padding-inline:.5rem;display:var(--display-button, none)}button:after{content:"\u2715";font-weight:bold}.dropdown{position:absolute;top:calc(100% + .5rem);padding:0;left:0;width:100%;margin:0;z-index:99;display:none;max-height:15.25rem !important;overflow:auto}.dropdown:before{display:none}.wrapper:is(:focus-within) .dropdown{display:var(--display-panel, none)}.wrapper .dropdown:hover{display:var(--display-panel, none)}:host-context(:focus-within) input{background-color:none !important}:host-context(iam-inline-edit){display:block;--display-btns: none}:host-context(iam-inline-edit) label:hover+.outer:not(:focus-within) .wrapper:not([data-mousedown]),:host-context(iam-inline-edit) .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover{background-color:var(--colour-light)}:host-context(iam-inline-edit) label:hover+.outer:not(:focus-within) .wrapper:not([data-mousedown]) input,:host-context(iam-inline-edit) .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover input{background-color:var(--colour-light)}:host-context(iam-inline-edit) label:hover+.outer:not(:focus-within) .wrapper:not([data-mousedown]) .dropdown,:host-context(iam-inline-edit) .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover .dropdown{display:none}:host-context(iam-inline-edit) .wrapper{margin-bottom:0}:host-context(iam-inline-edit) .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) input{border:none;background:none;margin-left:-1rem;width:calc(100% + 1rem);max-width:calc(100% + 1rem);box-shadow:none}:host-context(iam-inline-edit) .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) .dropdown{display:none}:host-context(iam-inline-edit) .wrapper.filled:not(:focus-within):not([data-mousedown]){background:none;border:none;padding-left:0}/*# sourceMappingURL=assets/css/components/multiselect.css.map */
+    @import "${l}";
+    .outer{position:relative;max-width:var(--input-max-width, 50rem);display:block}label{margin-bottom:0;padding-bottom:.5rem}.wrapper{margin-bottom:1.5rem;max-width:var(--input-max-width, 50rem)}.wrapper:after{content:"";display:block;position:absolute;top:100%;left:0;width:100%;height:1rem}.wrapper input{margin-bottom:0.5rem}.wrapper .feedback{position:absolute;right:0;bottom:100%;padding:.85rem;width:min-content;white-space:nowrap;margin-bottom:.5rem;display:none}.wrapper.was-validated .feedback{display:block}.wrapper.filled{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;min-height:calc(2.75rem + 4px);padding:0.5rem 2rem 0rem 0.8125rem;font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);color:var(--colour-body);background-color:var(--colour-canvas-2);border:2px solid var(--colour-primary);border-radius:0.5rem}.wrapper.filled:is(:focus-within,.focus-within):not(:disabled){border-color:var(--colour-info);outline:0;box-shadow:0 0 0 .1rem rgba(30,190,230,.25)}.wrapper.filled input{all:unset;font-size:1rem;line-height:1.625rem;display:inline-block;width:0;flex-grow:1;padding:0 0.5rem 0 0 !important;margin-inline:0.1875rem;order:999;margin-bottom:0.5rem}.wrapper.filled .feedback{display:none !important}.wrapper.filled:is(:focus,.focus):not(:disabled){border-color:var(--colour-info);outline:0;box-shadow:0 0 0 .1rem rgba(30,190,230,.25)}button{position:absolute;top:.75rem;right:.5rem;border:none;background:none;padding-inline:.5rem;display:var(--display-button, none)}button:after{content:"\u2715";font-weight:bold}.dropdown{position:absolute;top:calc(100% + .5rem);padding:0;left:0;width:100%;margin:0;z-index:99;display:none;max-height:15.25rem !important;overflow:auto}.dropdown:before{display:none}.wrapper:is(:focus-within) .dropdown{display:var(--display-panel, none)}@media(hover: hover){.wrapper .dropdown:hover{display:var(--display-panel, none)}}@media(hover: none){:host-context(.hover) .wrapper .dropdown{display:block}}:host-context(:focus-within) input{background-color:none !important}:host-context(iam-inline-edit){display:block;--display-btns: none}:host-context(iam-inline-edit) label:hover+.outer:not(:focus-within) .wrapper:not([data-mousedown]),:host-context(iam-inline-edit) .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover{background-color:var(--colour-light)}:host-context(iam-inline-edit) label:hover+.outer:not(:focus-within) .wrapper:not([data-mousedown]) input,:host-context(iam-inline-edit) .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover input{background-color:var(--colour-light)}:host-context(iam-inline-edit) label:hover+.outer:not(:focus-within) .wrapper:not([data-mousedown]) .dropdown,:host-context(iam-inline-edit) .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover .dropdown{display:none}:host-context(iam-inline-edit) .wrapper{margin-bottom:0}:host-context(iam-inline-edit) .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) input{border:none;background:none;margin-left:-1rem;width:calc(100% + 1rem);max-width:calc(100% + 1rem);box-shadow:none}:host-context(iam-inline-edit) .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) .dropdown{display:none}:host-context(iam-inline-edit) .wrapper.filled:not(:focus-within):not([data-mousedown]){background:none;border:none;padding-left:0}/*# sourceMappingURL=assets/css/components/multiselect.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
-    <label for="search"> <slot name="feedback"></slot></label>
+    <label for="search" class="mb-0"><span class="inner-label label"></span> <slot name="feedback"></slot>
     <div class="outer">
     <div class="wrapper">
       
@@ -21,5 +21,6 @@
       <button id="clear"><span class="visually-hidden">Clear</span></button>
     </div>
     </div>
-    `,this.shadowRoot.appendChild(r.content.cloneNode(!0))}connectedCallback(){let t=this,s=this.closest("form"),r=this.shadowRoot.querySelector(".wrapper"),a=t.shadowRoot.querySelector("#search"),p=t.shadowRoot.querySelector("#clear"),n=0,h=t.shadowRoot.querySelector("label");if(h.innerHTML=t.getAttribute("data-label"),t.hasAttribute("placeholder")&&a.setAttribute("placeholder",t.getAttribute("placeholder")),t.setAttribute("data-error","true"),s&&t.hasAttribute("data-is-required")){let e=new MutationObserver(function(o){o.forEach(function(i){const l=i.target;console.log(l),l.classList.contains("was-validated")?r.classList.add("was-validated"):r.classList.remove("was-validated")})});s.classList.contains("was-validated")?r.classList.add("was-validated"):r.classList.remove("was-validated"),e.observe(s,{attributes:!0,attributeFilter:["style","class"]})}function c(e){e.checked==!1?(e.closest("label").removeAttribute("slot"),e.closest("label").removeAttribute("style"),e.closest("label").removeAttribute("data-order")):(n++,e.closest("label").setAttribute("slot","checked"),e.closest("label").setAttribute("style",`--order:${n};`),e.closest("label").setAttribute("data-order",n)),t.querySelector('label[slot="checked"]')?(r.classList.add("filled"),t.removeAttribute("data-error"),a.removeAttribute("placeholder")):(r.classList.remove("filled"),t.setAttribute("data-error","true"),t.hasAttribute("placeholder")&&a.setAttribute("placeholder",t.getAttribute("placeholder")))}Array.from(t.querySelectorAll('label input[type="checkbox"]:checked')).forEach((e,o)=>{c(e)}),a.addEventListener("input",e=>{Array.from(t.querySelectorAll('label:not([slot="checked"])')).forEach((o,i)=>{let d=o.querySelector("input").value,m=o.textContent;d.toLowerCase().includes(a.value.toLowerCase())||m.toLowerCase().includes(a.value.toLowerCase())?o.removeAttribute("slot"):o.setAttribute("slot","notmatched")})}),t.addEventListener("change",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest('input[type="checkbox"]')){let o=e.target.closest('input[type="checkbox"]');c(o),a.focus()}}),p.addEventListener("click",function(e){Array.from(t.querySelectorAll('label input[type="checkbox"]')).forEach((o,i)=>{o.checked=!1,c(o)}),a.focus()}),t.addEventListener("keydown",function(e){const o=document.activeElement;switch(e.key){case"ArrowUp":if(e.preventDefault(),o.hasAttribute("type")&&o.getAttribute("type")=="checkbox"){let i=t.querySelectorAll('label:not([slot="checked"]):not([slot="checked"])'),l=Array.from(i).indexOf(o.closest("label")),d=Array.from(i)[l-1];d?d.focus():a.focus()}break;case"ArrowDown":if(e.preventDefault(),o==t)t.querySelector('label:not([slot="checked"]):not([slot="checked"])').focus();else if(o.hasAttribute("type")&&o.getAttribute("type")=="checkbox"){let i=o.value,l=t.querySelector(`label:has(input[value="${i}"]) ~ label:not([slot="checked"]):not([slot="checked"])`);l&&l.focus()}break;case"Enter":e.stopPropagation(),e.preventDefault(),o.hasAttribute("type")&&o.getAttribute("type")=="checkbox"&&(o.checked==!1?o.checked=!0:o.checked=!1),c(o),a.focus();break}});function u(){if(n==0)return!1;let e=t.querySelector(`label[data-order="${n}"]`);return e||(e=u(n--)),e}a.addEventListener("keydown",function(e){switch(e.key){case"Enter":t.querySelector(`input[value="${a.value}"]:not(:checked)`)||(a.value=""),a.focus();break;case"Backspace":if(!a.value){let i=u();if(i){let l=i.querySelector("input");l.checked=!1,c(l)}a.focus()}break}}),t.addEventListener("mousedown",e=>{r.setAttribute("data-mousedown","true")}),t.addEventListener("mouseup",e=>{r.removeAttribute("data-mousedown")})}}export{b as default};
+    </label>
+    `,this.shadowRoot.appendChild(r.content.cloneNode(!0))}connectedCallback(){const t=this,l=this.closest("form"),r=this.shadowRoot.querySelector(".wrapper"),a=t.shadowRoot.querySelector("#search"),h=t.shadowRoot.querySelector("#clear");let i=0;const m=t.shadowRoot.querySelector("label .inner-label");if(m.innerHTML=t.getAttribute("data-label"),t.hasAttribute("placeholder")&&a.setAttribute("placeholder",t.getAttribute("placeholder")),t.setAttribute("data-error","true"),l&&t.hasAttribute("data-is-required")){const e=new MutationObserver(function(o){o.forEach(function(n){const s=n.target;console.log(s),s.classList.contains("was-validated")?r.classList.add("was-validated"):r.classList.remove("was-validated")})});l.classList.contains("was-validated")?r.classList.add("was-validated"):r.classList.remove("was-validated"),e.observe(l,{attributes:!0,attributeFilter:["style","class"]})}function c(e){e.checked==!1?(e.closest("label").removeAttribute("slot"),e.closest("label").removeAttribute("style"),e.closest("label").removeAttribute("data-order")):(i++,e.closest("label").setAttribute("slot","checked"),e.closest("label").setAttribute("style",`--order:${i};`),e.closest("label").setAttribute("data-order",i)),t.querySelector('label[slot="checked"]')?(r.classList.add("filled"),t.removeAttribute("data-error"),a.removeAttribute("placeholder")):(r.classList.remove("filled"),t.setAttribute("data-error","true"),t.hasAttribute("placeholder")&&a.setAttribute("placeholder",t.getAttribute("placeholder")))}Array.from(t.querySelectorAll('label input[type="checkbox"]:checked')).forEach((e,o)=>{c(e)}),a.addEventListener("input",e=>{Array.from(t.querySelectorAll('label:not([slot="checked"])')).forEach((o,n)=>{const d=o.querySelector("input").value,b=o.textContent;d.toLowerCase().includes(a.value.toLowerCase())||b.toLowerCase().includes(a.value.toLowerCase())?o.removeAttribute("slot"):o.setAttribute("slot","notmatched")})});let u;t.addEventListener("focus",e=>{t.classList.add("hover"),clearTimeout(u)}),a.addEventListener("blur",e=>{clearTimeout(u),u=setTimeout(function(){t.classList.remove("hover")},1e3)}),t.addEventListener("change",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest('input[type="checkbox"]')){const o=e.target.closest('input[type="checkbox"]');c(o),a.focus()}}),h.addEventListener("click",function(e){Array.from(t.querySelectorAll('label input[type="checkbox"]')).forEach((o,n)=>{o.checked=!1,c(o)}),a.focus()}),t.addEventListener("keydown",function(e){const o=document.activeElement;switch(e.key){case"ArrowUp":if(e.preventDefault(),o.hasAttribute("type")&&o.getAttribute("type")=="checkbox"){const n=t.querySelectorAll('label:not([slot="checked"]):not([slot="checked"])'),s=Array.from(n).indexOf(o.closest("label")),d=Array.from(n)[s-1];d?d.focus():a.focus()}break;case"ArrowDown":if(e.preventDefault(),o==t)t.querySelector('label:not([slot="checked"]):not([slot="checked"])').focus();else if(o.hasAttribute("type")&&o.getAttribute("type")=="checkbox"){const n=o.value,s=t.querySelector(`label:has(input[value="${n}"]) ~ label:not([slot="checked"]):not([slot="checked"])`);s&&s.focus()}break;case"Enter":e.stopPropagation(),e.preventDefault(),o.hasAttribute("type")&&o.getAttribute("type")=="checkbox"&&(o.checked==!1?o.checked=!0:o.checked=!1),c(o),a.focus();break}});function p(){if(i==0)return!1;let e=t.querySelector(`label[data-order="${i}"]`);return e||(e=p(i--)),e}a.addEventListener("keydown",function(e){switch(e.key){case"Enter":t.querySelector(`input[value="${a.value}"]:not(:checked)`)||(a.value=""),a.focus();break;case"Backspace":if(!a.value){const n=p();if(n){const s=n.querySelector("input");s.checked=!1,c(s)}a.focus()}break}}),t.addEventListener("mousedown",e=>{r.setAttribute("data-mousedown","true")}),t.addEventListener("mouseup",e=>{r.removeAttribute("data-mousedown")})}}export{f as default};
 //# sourceMappingURL=multiselect.component.min.js.map

package/assets/js/components/multiselect/multiselect.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.component.min.js","sources":["multiselect.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"mutliselect\"\n});\nclass iamMultiselect extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/multiselect.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <label for=\"search\"> <slot name=\"feedback\"></slot></label>\n    <div class=\"outer\">\n    <div class=\"wrapper\">\n      \n      <slot name=\"checked\"></slot>\n      <input name=\"search\" id=\"search\" autocomplete=\"off\" required part=\"search-input\"/>\n      <span class=\"admin-panel feedback\">This field is required</span>\n      <div class=\"admin-panel dropdown\" part=\"dropdown\">\n        <slot></slot>\n      </div>\n      <button id=\"clear\"><span class=\"visually-hidden\">Clear</span></button>\n    </div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        let multiselect = this;\n        let form = this.closest('form');\n        let wrapper = this.shadowRoot.querySelector('.wrapper');\n        let search = multiselect.shadowRoot.querySelector('#search');\n        let button = multiselect.shadowRoot.querySelector('#clear');\n        let order = 0;\n        let label = multiselect.shadowRoot.querySelector('label');\n        label.innerHTML = multiselect.getAttribute('data-label');\n        if (multiselect.hasAttribute('placeholder')) {\n            search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));\n        }\n        multiselect.setAttribute('data-error', 'true');\n        // If in form and is required lets watch for the form being submitted\n        if (form && multiselect.hasAttribute('data-is-required')) {\n            let observer = new MutationObserver(function (mutations) {\n                mutations.forEach(function (mutationRecord) {\n                    const targetElement = mutationRecord.target;\n                    console.log(targetElement);\n                    if (targetElement.classList.contains(\"was-validated\")) {\n                        wrapper.classList.add('was-validated');\n                    }\n                    else {\n                        wrapper.classList.remove('was-validated');\n                    }\n                    ;\n                });\n            });\n            if (form.classList.contains(\"was-validated\")) {\n                wrapper.classList.add('was-validated');\n            }\n            else {\n                wrapper.classList.remove('was-validated');\n            }\n            ;\n            observer.observe(form, {\n                attributes: true,\n                attributeFilter: ['style', 'class']\n            });\n        }\n        // Set the correct attributes\n        function setItem(inputToSet) {\n            if (inputToSet.checked == false) {\n                inputToSet.closest('label').removeAttribute('slot');\n                inputToSet.closest('label').removeAttribute('style');\n                inputToSet.closest('label').removeAttribute('data-order');\n            }\n            else {\n                order++;\n                inputToSet.closest('label').setAttribute('slot', 'checked');\n                inputToSet.closest('label').setAttribute('style', `--order:${order};`);\n                inputToSet.closest('label').setAttribute('data-order', order);\n            }\n            // check for errors\n            if (multiselect.querySelector('label[slot=\"checked\"]')) {\n                wrapper.classList.add('filled');\n                multiselect.removeAttribute('data-error');\n                search.removeAttribute('placeholder');\n            }\n            else {\n                wrapper.classList.remove('filled');\n                multiselect.setAttribute('data-error', 'true');\n                if (multiselect.hasAttribute('placeholder')) {\n                    search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));\n                }\n            }\n        }\n        // Set on load\n        Array.from(multiselect.querySelectorAll(`label input[type=\"checkbox\"]:checked`)).forEach((checkbox, index) => {\n            setItem(checkbox);\n        });\n        // Filter list\n        search.addEventListener('input', (event) => {\n            Array.from(multiselect.querySelectorAll(`label:not([slot=\"checked\"])`)).forEach((label, index) => {\n                let checkbox = label.querySelector('input');\n                let searchValue = checkbox.value;\n                let labelText = label.textContent;\n                if (searchValue.toLowerCase().includes(search.value.toLowerCase()) || labelText.toLowerCase().includes(search.value.toLowerCase())) {\n                    label.removeAttribute('slot');\n                }\n                else {\n                    label.setAttribute('slot', 'notmatched');\n                }\n            });\n        });\n        // Set items\n        multiselect.addEventListener('change', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('input[type=\"checkbox\"]')) {\n                let checkbox = event.target.closest('input[type=\"checkbox\"]');\n                setItem(checkbox);\n                search.focus();\n            }\n        });\n        // Clear all\n        button.addEventListener(\"click\", function (event) {\n            Array.from(multiselect.querySelectorAll(`label input[type=\"checkbox\"]`)).forEach((checkbox, index) => {\n                checkbox.checked = false;\n                setItem(checkbox);\n            });\n            search.focus();\n        });\n        // Add some keyboard features to keep it accessible\n        multiselect.addEventListener(\"keydown\", function (event) {\n            const activeElement = document.activeElement;\n            switch (event.key) { // change to event.key to key to use the above variable\n                case \"ArrowUp\":\n                    // Up pressed\n                    event.preventDefault();\n                    if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == \"checkbox\") {\n                        let arrCheckboxes = multiselect.querySelectorAll(`label:not([slot=\"checked\"]):not([slot=\"checked\"])`);\n                        let activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));\n                        let prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];\n                        if (prevCheckbox)\n                            prevCheckbox.focus();\n                        else\n                            search.focus();\n                    }\n                    break;\n                case \"ArrowDown\":\n                    // Down pressed\n                    event.preventDefault();\n                    if (activeElement == multiselect) {\n                        multiselect.querySelector('label:not([slot=\"checked\"]):not([slot=\"checked\"])').focus();\n                    }\n                    else if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == \"checkbox\") {\n                        let activeValue = activeElement.value;\n                        let nextCheckbox = multiselect.querySelector(`label:has(input[value=\"${activeValue}\"]) ~ label:not([slot=\"checked\"]):not([slot=\"checked\"])`);\n                        if (nextCheckbox)\n                            nextCheckbox.focus();\n                    }\n                    break;\n                case \"Enter\":\n                    event.stopPropagation();\n                    event.preventDefault();\n                    if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == \"checkbox\") {\n                        if (activeElement.checked == false)\n                            activeElement.checked = true;\n                        else\n                            activeElement.checked = false;\n                    }\n                    setItem(activeElement);\n                    search.focus();\n                    break;\n            }\n        });\n        function checkLastTag() {\n            if (order == 0)\n                return false;\n            let lastTag = multiselect.querySelector(`label[data-order=\"${order}\"]`);\n            if (!lastTag) {\n                lastTag = checkLastTag(order--);\n            }\n            return lastTag;\n        }\n        search.addEventListener(\"keydown\", function (event) {\n            switch (event.key) { // change to event.key to key to use the above variable\n                case \"Enter\":\n                    let match = multiselect.querySelector(`input[value=\"${search.value}\"]:not(:checked)`);\n                    if (!match)\n                        search.value = \"\";\n                    search.focus();\n                    break;\n                case \"Backspace\":\n                    if (!search.value) {\n                        let lastTag = checkLastTag(order);\n                        if (lastTag) {\n                            let lastTagInput = lastTag.querySelector('input');\n                            lastTagInput.checked = false;\n                            setItem(lastTagInput);\n                        }\n                        search.focus();\n                    }\n                    break;\n            }\n        });\n        // Fix for the inline edit multiselect\n        multiselect.addEventListener(\"mousedown\", (event) => {\n            wrapper.setAttribute('data-mousedown', 'true');\n        });\n        multiselect.addEventListener(\"mouseup\", (event) => {\n            wrapper.removeAttribute('data-mousedown');\n        });\n    }\n}\nexport default iamMultiselect;\n"],"names":["iamMultiselect","assetLocation","coreCSS","template","multiselect","form","wrapper","search","button","order","label","observer","mutations","mutationRecord","targetElement","setItem","inputToSet","checkbox","index","event","searchValue","labelText","activeElement","arrCheckboxes","activeIndex","prevCheckbox","activeValue","nextCheckbox","checkLastTag","lastTag","lastTagInput"],"mappings":"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"}
+{"version":3,"file":"multiselect.component.min.js","sources":["multiselect.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'mutliselect',\n});\nclass iamMultiselect extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css')\n            ? document.body.getAttribute('data-core-css')\n            : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/multiselect.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <label for=\"search\" class=\"mb-0\"><span class=\"inner-label label\"></span> <slot name=\"feedback\"></slot>\n    <div class=\"outer\">\n    <div class=\"wrapper\">\n      \n      <slot name=\"checked\"></slot>\n      <input name=\"search\" id=\"search\" autocomplete=\"off\" required part=\"search-input\"/>\n      <span class=\"admin-panel feedback\">This field is required</span>\n      <div class=\"admin-panel dropdown\" part=\"dropdown\">\n        <slot></slot>\n      </div>\n      <button id=\"clear\"><span class=\"visually-hidden\">Clear</span></button>\n    </div>\n    </div>\n    </label>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const multiselect = this;\n        const form = this.closest('form');\n        const wrapper = this.shadowRoot.querySelector('.wrapper');\n        const search = multiselect.shadowRoot.querySelector('#search');\n        const button = multiselect.shadowRoot.querySelector('#clear');\n        let order = 0;\n        const innerLabel = multiselect.shadowRoot.querySelector('label .inner-label');\n        innerLabel.innerHTML = multiselect.getAttribute('data-label');\n        if (multiselect.hasAttribute('placeholder')) {\n            search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));\n        }\n        multiselect.setAttribute('data-error', 'true');\n        // If in form and is required lets watch for the form being submitted\n        if (form && multiselect.hasAttribute('data-is-required')) {\n            const observer = new MutationObserver(function (mutations) {\n                mutations.forEach(function (mutationRecord) {\n                    const targetElement = mutationRecord.target;\n                    console.log(targetElement);\n                    if (targetElement.classList.contains('was-validated')) {\n                        wrapper.classList.add('was-validated');\n                    }\n                    else {\n                        wrapper.classList.remove('was-validated');\n                    }\n                });\n            });\n            if (form.classList.contains('was-validated')) {\n                wrapper.classList.add('was-validated');\n            }\n            else {\n                wrapper.classList.remove('was-validated');\n            }\n            observer.observe(form, {\n                attributes: true,\n                attributeFilter: ['style', 'class'],\n            });\n        }\n        // Set the correct attributes\n        function setItem(inputToSet) {\n            if (inputToSet.checked == false) {\n                inputToSet.closest('label').removeAttribute('slot');\n                inputToSet.closest('label').removeAttribute('style');\n                inputToSet.closest('label').removeAttribute('data-order');\n            }\n            else {\n                order++;\n                inputToSet.closest('label').setAttribute('slot', 'checked');\n                inputToSet.closest('label').setAttribute('style', `--order:${order};`);\n                inputToSet.closest('label').setAttribute('data-order', order);\n            }\n            // check for errors\n            if (multiselect.querySelector('label[slot=\"checked\"]')) {\n                wrapper.classList.add('filled');\n                multiselect.removeAttribute('data-error');\n                search.removeAttribute('placeholder');\n            }\n            else {\n                wrapper.classList.remove('filled');\n                multiselect.setAttribute('data-error', 'true');\n                if (multiselect.hasAttribute('placeholder')) {\n                    search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));\n                }\n            }\n        }\n        // Set on load\n        Array.from(multiselect.querySelectorAll(`label input[type=\"checkbox\"]:checked`)).forEach((checkbox, index) => {\n            setItem(checkbox);\n        });\n        // Filter list\n        search.addEventListener('input', (event) => {\n            Array.from(multiselect.querySelectorAll(`label:not([slot=\"checked\"])`)).forEach((label, index) => {\n                const checkbox = label.querySelector('input');\n                const searchValue = checkbox.value;\n                const labelText = label.textContent;\n                if (searchValue.toLowerCase().includes(search.value.toLowerCase()) ||\n                    labelText.toLowerCase().includes(search.value.toLowerCase())) {\n                    label.removeAttribute('slot');\n                }\n                else {\n                    label.setAttribute('slot', 'notmatched');\n                }\n            });\n        });\n        // Add a delayed hover effect for non hover devices\n        let hoverTimeout;\n        multiselect.addEventListener('focus', (event) => {\n            multiselect.classList.add('hover');\n            clearTimeout(hoverTimeout);\n        });\n        search.addEventListener('blur', (event) => {\n            clearTimeout(hoverTimeout);\n            hoverTimeout = setTimeout(function () {\n                multiselect.classList.remove('hover');\n            }, 1000);\n        });\n        // Set items\n        multiselect.addEventListener('change', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('input[type=\"checkbox\"]')) {\n                const checkbox = event.target.closest('input[type=\"checkbox\"]');\n                setItem(checkbox);\n                search.focus();\n            }\n        });\n        // Clear all\n        button.addEventListener('click', function (event) {\n            Array.from(multiselect.querySelectorAll(`label input[type=\"checkbox\"]`)).forEach((checkbox, index) => {\n                checkbox.checked = false;\n                setItem(checkbox);\n            });\n            search.focus();\n        });\n        // Add some keyboard features to keep it accessible\n        multiselect.addEventListener('keydown', function (event) {\n            const activeElement = document.activeElement;\n            switch (event.key // change to event.key to key to use the above variable\n            ) {\n                case 'ArrowUp':\n                    // Up pressed\n                    event.preventDefault();\n                    if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {\n                        const arrCheckboxes = multiselect.querySelectorAll(`label:not([slot=\"checked\"]):not([slot=\"checked\"])`);\n                        const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));\n                        const prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];\n                        if (prevCheckbox)\n                            prevCheckbox.focus();\n                        else\n                            search.focus();\n                    }\n                    break;\n                case 'ArrowDown':\n                    // Down pressed\n                    event.preventDefault();\n                    if (activeElement == multiselect) {\n                        multiselect.querySelector('label:not([slot=\"checked\"]):not([slot=\"checked\"])').focus();\n                    }\n                    else if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {\n                        const activeValue = activeElement.value;\n                        const nextCheckbox = multiselect.querySelector(`label:has(input[value=\"${activeValue}\"]) ~ label:not([slot=\"checked\"]):not([slot=\"checked\"])`);\n                        if (nextCheckbox)\n                            nextCheckbox.focus();\n                    }\n                    break;\n                case 'Enter':\n                    event.stopPropagation();\n                    event.preventDefault();\n                    if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {\n                        if (activeElement.checked == false)\n                            activeElement.checked = true;\n                        else\n                            activeElement.checked = false;\n                    }\n                    setItem(activeElement);\n                    search.focus();\n                    break;\n            }\n        });\n        function checkLastTag() {\n            if (order == 0)\n                return false;\n            let lastTag = multiselect.querySelector(`label[data-order=\"${order}\"]`);\n            if (!lastTag) {\n                lastTag = checkLastTag(order--);\n            }\n            return lastTag;\n        }\n        search.addEventListener('keydown', function (event) {\n            switch (event.key // change to event.key to key to use the above variable\n            ) {\n                case 'Enter':\n                    const match = multiselect.querySelector(`input[value=\"${search.value}\"]:not(:checked)`);\n                    if (!match)\n                        search.value = '';\n                    search.focus();\n                    break;\n                case 'Backspace':\n                    if (!search.value) {\n                        const lastTag = checkLastTag(order);\n                        if (lastTag) {\n                            const lastTagInput = lastTag.querySelector('input');\n                            lastTagInput.checked = false;\n                            setItem(lastTagInput);\n                        }\n                        search.focus();\n                    }\n                    break;\n            }\n        });\n        // Fix for the inline edit multiselect\n        multiselect.addEventListener('mousedown', (event) => {\n            wrapper.setAttribute('data-mousedown', 'true');\n        });\n        multiselect.addEventListener('mouseup', (event) => {\n            wrapper.removeAttribute('data-mousedown');\n        });\n    }\n}\nexport default iamMultiselect;\n"],"names":["iamMultiselect","assetLocation","coreCSS","template","multiselect","form","wrapper","search","button","order","innerLabel","observer","mutations","mutationRecord","targetElement","setItem","inputToSet","checkbox","index","event","label","searchValue","labelText","hoverTimeout","activeElement","arrCheckboxes","activeIndex","prevCheckbox","activeValue","nextCheckbox","checkLastTag","lastTag","lastTagInput"],"mappings":"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"}

package/assets/js/components/nav/nav.component.js

@@ -2,15 +2,19 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-    "event": "customElementRegistered",
-    "element": "nav"
+    event: 'customElementRegistered',
+    element: 'nav',
 });
 class iamNav extends HTMLElement {
     constructor() {
         super();
         const shadowRoot = this.attachShadow({ mode: 'open' });
-        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
-        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
+        const coreCSS = document.body.hasAttribute('data-core-css')
+            ? document.body.getAttribute('data-core-css')
+            : `${assetLocation}/css/core.min.css`;
         const loadCSS = `@import "${assetLocation}/css/components/nav.css";`;
         const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
         const template = document.createElement('template');
@@ -55,17 +59,19 @@ class iamNav extends HTMLElement {
     connectedCallback() {
         // Load external CSS if needed
         if (this.hasAttribute('data-css'))
-            this.shadowRoot.querySelector('.doc-styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+            this.shadowRoot
+                .querySelector('.doc-styles')
+                .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
         const menuButton = this.shadowRoot.querySelector('.btn-menu');
         const menu = this.shadowRoot.querySelector('.menu');
         const iamNav = this;
         const backdrop = this.shadowRoot.querySelector('.backdrop');
         const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
-        // Check the content 
+        // Check the content
         this.querySelectorAll(':scope > *').forEach(function (element) {
-            let tagname = element.tagName;
+            const tagname = element.tagName;
             switch (tagname) {
-                case "BUTTON":
+                case 'BUTTON':
                     if (!element.hasAttribute('slot')) {
                         element.setAttribute('slot', 'actions');
                         menu.classList.add('has-actions');
@@ -73,7 +79,9 @@ class iamNav extends HTMLElement {
                     break;
             }
             // Create menu button
-            if (element.classList.contains('nav--menu') && element.hasAttribute('data-title') && element.hasAttribute('data-icon')) {
+            if (element.classList.contains('nav--menu') &&
+                element.hasAttribute('data-title') &&
+                element.hasAttribute('data-icon')) {
                 const title = element.getAttribute('data-title');
                 const iconClass = element.getAttribute('data-icon');
                 // Create the menu button that sits seperately to the menu
@@ -103,14 +111,16 @@ class iamNav extends HTMLElement {
                     element.classList.toggle('open');
                     mdButton.classList.toggle('active');
                     // Close desktop menus
-                    let openMenu = iamNav.querySelector(':scope > details[open]');
+                    const openMenu = iamNav.querySelector(':scope > details[open]');
                     if (openMenu)
                         openMenu.removeAttribute('open');
                     // Close the main menu and fix states on the button, iamNav component and backdrop
                     if (element.classList.contains('open')) {
                         menu.classList.remove('open');
                         menuButton.removeAttribute('aria-expanded');
-                        setTimeout(function () { menu.classList.add('closed'); }, 1000); // Delay until its close so the animation is broken
+                        setTimeout(function () {
+                            menu.classList.add('closed');
+                        }, 1000); // Delay until its close so the animation is broken
                         iamNav.classList.add('open');
                         backdrop.classList.add('show');
                         element.classList.remove('closed');
@@ -118,7 +128,9 @@ class iamNav extends HTMLElement {
                     else {
                         iamNav.classList.remove('open');
                         backdrop.classList.remove('show');
-                        setTimeout(function () { element.classList.add('closed'); }, 1000);
+                        setTimeout(function () {
+                            element.classList.add('closed');
+                        }, 1000);
                     }
                     // Close any open menus
                     iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {
@@ -126,10 +138,12 @@ class iamNav extends HTMLElement {
                             openmenu.classList.remove('open');
                         }
                     });
-                    iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (selectedButton) {
+                    iamNav.shadowRoot
+                        .querySelectorAll('.buttons-holder .btn-menu[aria-expanded]')
+                        .forEach(function (selectedButton) {
                         if (selectedButton != button) {
                             selectedButton.removeAttribute('aria-expanded');
-                            let innerBtn = selectedButton.querySelector('.btn-primary');
+                            const innerBtn = selectedButton.querySelector('.btn-primary');
                             innerBtn.classList.remove('active');
                         }
                     });
@@ -144,7 +158,7 @@ class iamNav extends HTMLElement {
             menu.classList.add('has-secondary');
         }
         // Create a scroll width variable to help with the sizing of the menu with in the CSS
-        document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.offsetWidth) + 'px');
+        document.documentElement.style.setProperty('--scrollbar-width', window.innerWidth - document.documentElement.offsetWidth + 'px');
         // Open and close the menu
         menuButton.addEventListener('click', function (e) {
             e.preventDefault();
@@ -153,11 +167,13 @@ class iamNav extends HTMLElement {
             // Close any other menus
             iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
                 element.classList.remove('open');
-                setTimeout(function () { element.classList.add('closed'); }, 1000);
+                setTimeout(function () {
+                    element.classList.add('closed');
+                }, 1000);
             });
             iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
                 element.removeAttribute('aria-expanded');
-                let innerBtn = element.querySelector('.btn-primary');
+                const innerBtn = element.querySelector('.btn-primary');
                 innerBtn.classList.remove('active');
             });
             if (menu.classList.contains('open')) {
@@ -166,18 +182,20 @@ class iamNav extends HTMLElement {
             }
             else {
                 iamNav.classList.remove('open');
-                setTimeout(function () { menu.classList.add('closed'); }, 1000);
+                setTimeout(function () {
+                    menu.classList.add('closed');
+                }, 1000);
             }
         }, false);
         // Allow outside JS to close the menu
-        this.addEventListener("request-close", (event) => {
+        this.addEventListener('request-close', (event) => {
             menuButton.removeAttribute('aria-expanded');
             menu.classList.remove('open');
             iamNav.classList.remove('open');
         });
         // Close the menu on the click of the backdrop on desktop
-        backdrop.addEventListener("click", (event) => {
-            let openMenu = this.querySelector('details[open] summary');
+        backdrop.addEventListener('click', (event) => {
+            const openMenu = this.querySelector('details[open] summary');
             if (openMenu)
                 openMenu.click();
             iamNav.classList.toggle('open');
@@ -186,18 +204,18 @@ class iamNav extends HTMLElement {
             });
             iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
                 element.removeAttribute('aria-expanded');
-                let innerBtn = element.querySelector('.btn-primary');
+                const innerBtn = element.querySelector('.btn-primary');
                 innerBtn.classList.remove('active');
             });
             backdrop.classList.remove('show');
         });
         // On desktop close other menu's (details) when one is clicked
-        this.addEventListener("click", (event) => {
+        this.addEventListener('click', (event) => {
             if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {
                 if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {
-                    let summary = event.target.closest('summary');
-                    let details = summary.closest('details');
-                    let wrapper = details.parentNode;
+                    const summary = event.target.closest('summary');
+                    const details = summary.closest('details');
+                    const wrapper = details.parentNode;
                     if (details.hasAttribute('open'))
                         details.removeAttribute('open');
                     else
@@ -205,11 +223,13 @@ class iamNav extends HTMLElement {
                     // Close any bespoke menus
                     iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
                         element.classList.remove('open');
-                        setTimeout(function () { menu.classList.add('closed'); }, 1000);
+                        setTimeout(function () {
+                            menu.classList.add('closed');
+                        }, 1000);
                     });
                     iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
                         element.removeAttribute('aria-expanded');
-                        let innerBtn = element.querySelector('.btn-primary');
+                        const innerBtn = element.querySelector('.btn-primary');
                         innerBtn.classList.remove('active');
                     });
                     // Close any other dropdowns on the same level
@@ -228,18 +248,17 @@ class iamNav extends HTMLElement {
                     event.preventDefault();
                 }
             }
-            ;
         });
         // Mega menu title
         this.querySelectorAll('details').forEach((detailsElement) => {
-            let summary = detailsElement.querySelector('summary');
-            let containerDiv = detailsElement.querySelector(':Scope > div');
+            const summary = detailsElement.querySelector('summary');
+            const containerDiv = detailsElement.querySelector(':Scope > div');
             containerDiv.setAttribute('data-title', summary.textContent);
         });
-        // Search 
+        // Search
         if (this.querySelector('[slot="search"]')) {
             menu.classList.add('has-search');
-            let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
+            const searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
             searchWrapper.classList.remove('d-none');
             searchWrapper.insertAdjacentHTML('afterbegin', `<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
       <dialog id="search-dialog">
@@ -254,20 +273,20 @@ class iamNav extends HTMLElement {
         </div>
       </div>
       </dialog>`);
-            let searchButton = this.shadowRoot.querySelector('#search-button');
-            let searchClose = this.shadowRoot.querySelector('#search-close');
-            let searchDialog = this.shadowRoot.querySelector('#search-dialog');
+            const searchButton = this.shadowRoot.querySelector('#search-button');
+            const searchClose = this.shadowRoot.querySelector('#search-close');
+            const searchDialog = this.shadowRoot.querySelector('#search-dialog');
             if (this.hasAttribute('data-search-open')) {
                 searchDialog.setAttribute('open', 'open');
                 this.classList.add('search-open');
                 searchButton.setAttribute('aria-expanded', true);
             }
-            searchButton.addEventListener("click", (event) => {
+            searchButton.addEventListener('click', (event) => {
                 searchDialog.setAttribute('open', 'open');
                 this.classList.add('search-open');
                 searchButton.setAttribute('aria-expanded', true);
             });
-            searchClose.addEventListener("click", (event) => {
+            searchClose.addEventListener('click', (event) => {
                 searchDialog.removeAttribute('open');
                 this.classList.remove('search-open');
                 searchButton.removeAttribute('aria-expanded');