@iamproperty/components 7.1.0--beta6 → 7.2.0

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

@@ -0,0 +1,77 @@
+/*!
+  * iamKey v7.2.0
+  * Copyright 2022-2025 iamproperty
+  */class p extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const i=document.createElement("template");i.innerHTML=`
+    <style>
+    @layer components{iam-menu:defined{--menu-padding: 1rem;--border-color: var(--colour-border);--menu-item-margin: 0 0 0.5rem 0;border:none;border-radius:1rem;box-shadow:0px 2px 9px rgba(0, 0, 0, 0.1)}}/*# sourceMappingURL=assets/css/components/menu.css.map */
+
+    </style>
+    <div class="menu--inner" part="inner">
+      <slot></slot>
+    </div>`,this.shadowRoot.appendChild(i.content.cloneNode(!0))}connectedCallback(){const i=this.hasAttribute("id")?this.getAttribute("id"):!1,o=document.querySelector(`[popovertarget="${i}"]`),n=this.shadowRoot.querySelector(".menu--inner"),a=this.querySelectorAll(":scope > a, :scope > button, :scope > details > summary"),s=this.querySelectorAll("a, button"),d=this.querySelectorAll("details");let m,l;i&&o&&(n?.setAttribute("role","menu"),this.style["position-anchor"]=`--${i}`,o?.setAttribute("aria-haspopup","true"),o==null||(o.style["anchor-name"]=`--${i}`),o?.setAttribute("aria-controls",i),d.forEach((e,t)=>{e.setAttribute("role","menu")}),s.forEach((e,t)=>{e.setAttribute("role","menuitem"),e.setAttribute("tabindex","0"),t==0&&e.setAttribute("autofocus",!0)}),this.addEventListener("keydown",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("a, button, summary")){const t=document.activeElement,u=Array.from(a).indexOf(t)-1,c=Array.from(a).indexOf(t)+1;switch(e.keyCode){case 27:t.closest("details")?(e.stopPropagation(),e.preventDefault(),t.closest("details").removeAttribute("open"),t.closest("details").querySelector(":scope summary").focus()):(e.stopPropagation(),o.focus());break;case 32:case 13:if(t.matches("summary")&&!t.parentElement.matches("details[open]")){t.parentElement.setAttribute("open",!0);const r=t.closest("details").querySelectorAll("a, button, :scope details > summary");Array.from(r)[0].focus()}break;case 35:e.stopPropagation(),e.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(s)[s.length-1].focus();break;case 36:e.stopPropagation(),e.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(s)[0].focus();break;case 38:if(e.stopPropagation(),e.preventDefault(),Array.from(a).indexOf(t)>-1)Array.from(a)[u]!=null?Array.from(a)[u].focus():Array.from(a)[a.length-1].focus();else if(t.closest("details")){const r=t.closest("details").querySelectorAll("a, button, :scope details > summary");l=Array.from(r).indexOf(t)-1,Array.from(r)[l]!=null?Array.from(r)[l].focus():Array.from(r)[r.length-1].focus()}break;case 40:if(e.stopPropagation(),e.preventDefault(),Array.from(a).indexOf(t)>-1)Array.from(a)[c]!=null?Array.from(a)[c].focus():Array.from(a)[0].focus();else if(t.closest("details")){const r=t.closest("details").querySelectorAll("a, button, :scope details > summary");m=Array.from(r).indexOf(t)+1,Array.from(r)[m]!=null?Array.from(r)[m].focus():Array.from(r)[0].focus()}break}}})),this.querySelector("details")&&!document.getElementById("menuGlobalStyles")&&document.head.insertAdjacentHTML("beforeend",`<style id="menuGlobalStyles">
+iam-menu details > * {
+  background: unset !important;
+  border: unset !important;
+  color: inherit!important;
+  font-weight: inherit!important;
+  font-family: inherit!important;
+  font-size: 1rem!important;
+  display: block!important;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
+  padding: var(--menu-item-padding, 0)!important;
+  width: var(--menu-item-width, 100%)!important;
+  text-align: var(--menu-item-text-align, left)!important;
+  cursor: var(--menu-item-cursor, pointer)!important;
+}
+iam-menu details > *:after,
+iam-menu details > *:not(summary):before {
+  display: none!important;
+}
+iam-menu details :is(button,a) {
+  padding-inline-start: var(--menu-dialog-offset,1rem)!important;
+}
+iam-menu details :is(button,a):last-child {
+  margin-block-end: var(--menu-dialog-offset,1rem)!important;
+}
+iam-menu details summary {
+  padding: 0 !important;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
+}
+iam-menu details summary:before {
+  text-align: center;
+  display: inline-block!important;
+  vertical-align: bottom;
+  float: right;
+  color: inherit;
+  height: 1em;
+  width: 1em;
+}
+
+iam-menu details summary[class*="fa-"]:before {
+  font-family: var(--fa-font-family, "Font Awesome 6 Pro");
+}
+
+iam-menu details summary:not([class*="fa-"]:before {
+  --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e");  
+  
+  content: ""!important;
+  height: 1.2rem;
+  width: 1.2rem;
+  background: var(--colour-primary-theme);
+  mask-image: var(--icon, var(--icon-arrow));
+  mask-size: 50%;
+  mask-repeat: no-repeat;
+  mask-position: 50% 50%;
+  -webkit-mask-image: var(--icon, var(--icon-arrow));
+  -webkit-mask-size: 50%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 50% 50%;
+  z-index: 2;
+  display: inline-block;
+  vertical-align: bottom;
+  float: right;
+  rotate: 90deg;
+  color: inherit;
+}
+</style>`)}}export{p as default};
+//# sourceMappingURL=menu.component.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.component.min.js","sources":["menu.component.js"],"sourcesContent":["class iamMenu 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 loadCSS = `@import \"${assetLocation}/css/components/menu.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    </style>\n    <div class=\"menu--inner\" part=\"inner\">\n      <slot></slot>\n    </div>`;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;\n        const menuButton = document.querySelector(`[popovertarget=\"${menuID}\"]`);\n        const menuInner = this.shadowRoot.querySelector('.menu--inner');\n        const topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');\n        const menuItems = this.querySelectorAll('a, button');\n        const subMenus = this.querySelectorAll('details');\n        let subNextIndex;\n        let subPrevIndex;\n        // Set the needed CSS styles to connect the ID attribute to the anchor name\n        if (menuID && menuButton) {\n            menuInner === null || menuInner === void 0 ? void 0 : menuInner.setAttribute('role', 'menu');\n            this.style['position-anchor'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-haspopup', 'true');\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.style['anchor-name'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-controls', menuID);\n            subMenus.forEach((item, index) => {\n                item.setAttribute('role', 'menu');\n            });\n            menuItems.forEach((item, index) => {\n                item.setAttribute('role', 'menuitem');\n                item.setAttribute('tabindex', '0');\n                if (index == 0) {\n                    item.setAttribute('autofocus', true);\n                }\n            });\n            this.addEventListener('keydown', (event) => {\n                if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {\n                    const activeItem = document.activeElement;\n                    const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;\n                    const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;\n                    switch (event.keyCode // change to event.key to key to use the above variable\n                    ) {\n                        case 27: // Esc\n                            if (activeItem.closest('details')) {\n                                event.stopPropagation();\n                                event.preventDefault();\n                                activeItem.closest('details').removeAttribute('open');\n                                activeItem.closest('details').querySelector(':scope summary').focus();\n                            }\n                            else {\n                                event.stopPropagation();\n                                menuButton.focus();\n                            }\n                            break;\n                        case 32: // Space\n                        case 13: // Enter\n                            if (activeItem.matches('summary') && !activeItem.parentElement.matches('details[open]')) {\n                                activeItem.parentElement.setAttribute('open', true);\n                                const subMenuItems = activeItem\n                                    .closest('details')\n                                    .querySelectorAll('a, button, :scope details > summary');\n                                Array.from(subMenuItems)[0].focus();\n                            }\n                            break;\n                        case 35: // end\n                            event.stopPropagation();\n                            event.preventDefault();\n                            this.querySelector('details[open]').removeAttribute('open');\n                            Array.from(menuItems)[menuItems.length - 1].focus();\n                            break;\n                        case 36: // home\n                            event.stopPropagation();\n                            event.preventDefault();\n                            this.querySelector('details[open]').removeAttribute('open');\n                            Array.from(menuItems)[0].focus();\n                            break;\n                        case 38: // up\n                            event.stopPropagation();\n                            event.preventDefault();\n                            if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                                if (Array.from(topLevelmenuItems)[prevIndex] != undefined)\n                                    Array.from(topLevelmenuItems)[prevIndex].focus();\n                                else\n                                    Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();\n                            }\n                            else if (activeItem.closest('details')) {\n                                const subMenuItems = activeItem\n                                    .closest('details')\n                                    .querySelectorAll('a, button, :scope details > summary');\n                                subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;\n                                if (Array.from(subMenuItems)[subPrevIndex] != undefined)\n                                    Array.from(subMenuItems)[subPrevIndex].focus();\n                                else\n                                    Array.from(subMenuItems)[subMenuItems.length - 1].focus();\n                            }\n                            break;\n                        case 40: // down\n                            event.stopPropagation();\n                            event.preventDefault();\n                            if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                                if (Array.from(topLevelmenuItems)[nextIndex] != undefined)\n                                    Array.from(topLevelmenuItems)[nextIndex].focus();\n                                else\n                                    Array.from(topLevelmenuItems)[0].focus();\n                            }\n                            else if (activeItem.closest('details')) {\n                                const subMenuItems = activeItem\n                                    .closest('details')\n                                    .querySelectorAll('a, button, :scope details > summary');\n                                subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;\n                                if (Array.from(subMenuItems)[subNextIndex] != undefined)\n                                    Array.from(subMenuItems)[subNextIndex].focus();\n                                else\n                                    Array.from(subMenuItems)[0].focus();\n                            }\n                            break;\n                    }\n                }\n            });\n        }\n        // insert extra CSS to help style inline details and summary items to allow collapsible sub menus\n        if (this.querySelector('details') && !document.getElementById('menuGlobalStyles'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"menuGlobalStyles\">\niam-menu details > * {\n  background: unset !important;\n  border: unset !important;\n  color: inherit!important;\n  font-weight: inherit!important;\n  font-family: inherit!important;\n  font-size: 1rem!important;\n  display: block!important;\n  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;\n  padding: var(--menu-item-padding, 0)!important;\n  width: var(--menu-item-width, 100%)!important;\n  text-align: var(--menu-item-text-align, left)!important;\n  cursor: var(--menu-item-cursor, pointer)!important;\n}\niam-menu details > *:after,\niam-menu details > *:not(summary):before {\n  display: none!important;\n}\niam-menu details :is(button,a) {\n  padding-inline-start: var(--menu-dialog-offset,1rem)!important;\n}\niam-menu details :is(button,a):last-child {\n  margin-block-end: var(--menu-dialog-offset,1rem)!important;\n}\niam-menu details summary {\n  padding: 0 !important;\n  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;\n}\niam-menu details summary:before {\n  text-align: center;\n  display: inline-block!important;\n  vertical-align: bottom;\n  float: right;\n  color: inherit;\n  height: 1em;\n  width: 1em;\n}\n\niam-menu details summary[class*=\"fa-\"]:before {\n  font-family: var(--fa-font-family, \"Font Awesome 6 Pro\");\n}\n\niam-menu details summary:not([class*=\"fa-\"]:before {\n  --icon-arrow: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e\");  \n  \n  content: \"\"!important;\n  height: 1.2rem;\n  width: 1.2rem;\n  background: var(--colour-primary-theme);\n  mask-image: var(--icon, var(--icon-arrow));\n  mask-size: 50%;\n  mask-repeat: no-repeat;\n  mask-position: 50% 50%;\n  -webkit-mask-image: var(--icon, var(--icon-arrow));\n  -webkit-mask-size: 50%;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: 50% 50%;\n  z-index: 2;\n  display: inline-block;\n  vertical-align: bottom;\n  float: right;\n  rotate: 90deg;\n  color: inherit;\n}\n</style>`);\n    }\n}\nexport default iamMenu;\n"],"names":["iamMenu","template","menuID","menuButton","menuInner","topLevelmenuItems","menuItems","subMenus","subNextIndex","subPrevIndex","item","index","event","activeItem","prevIndex","nextIndex","subMenuItems"],"mappings":"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"}

package/assets/js/components/multi-step/multi-step.component.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { trackComponent, trackComponentRegistered } from '../_global.js';
 trackComponentRegistered('iam-multi-step');
 class iamMultiStep extends HTMLElement {
@@ -21,6 +20,7 @@ class iamMultiStep extends HTMLElement {
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
     connectedCallback() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const MultiStepComponent = this;
         const steps = this.shadowRoot.querySelector('.steps');
         const form = this.querySelector('form');
@@ -53,13 +53,13 @@ class iamMultiStep extends HTMLElement {
             const fieldset = validatedFieldsets[i];
             const fieldsetID = fieldset.getAttribute('data-title');
             if (fieldset.querySelector('.is-invalid')) {
-                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
+                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element) => {
                     element.classList.add('active');
                 });
                 break;
             }
             else {
-                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
+                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element) => {
                     element.classList.add('valid');
                 });
             }
@@ -77,24 +77,24 @@ class iamMultiStep extends HTMLElement {
             const currentFieldsetID = currentFieldset.getAttribute('data-title');
             let isFieldsetValid = true;
             currentFieldset.classList.add('was-validated');
-            Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
+            Array.from(currentFieldset.querySelectorAll('input')).forEach((input) => {
                 if (!input.checkValidity())
                     isFieldsetValid = false;
             });
             // If valid mode to next field set
             if (!isFieldsetValid) {
-                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
                     element.classList.remove('valid');
                 });
-                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
                     element.classList.remove('valid');
                 });
             }
             else {
-                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
                     element.classList.add('valid');
                 });
-                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
                     element.classList.add('valid');
                 });
             }
@@ -102,10 +102,10 @@ class iamMultiStep extends HTMLElement {
             if (isFieldsetValid || !button.hasAttribute('data-next')) {
                 const fieldset = MultiStepComponent.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
                 const step = MultiStepComponent.shadowRoot.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
-                Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button, index) => {
+                Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button) => {
                     button.classList.remove('active');
                 });
-                Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button, index) => {
+                Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button) => {
                     button.classList.remove('active');
                 });
                 step.classList.add('active');

package/assets/js/components/multi-step/multi-step.component.min.js

@@ -0,0 +1,13 @@
+/*!
+  * iamKey v7.2.0
+  * Copyright 2022-2025 iamproperty
+  */const g=c=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:c})},y=(c,e,u)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:e}),u.forEach(l=>{c.addEventListener(l,function(i){const n={event:l,element:e,target:i.target};Object.keys(i.detail).forEach(d=>{const t=i.detail[d];n[d]=t}),window.dataLayer.push(n)})}),!0);g("iam-multi-step");class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const e=document.createElement("template");e.innerHTML=`
+    <style>
+    *,*:before,*:after{box-sizing:border-box}:host{--dialog-padding: 1.5rem;box-sizing:border-box;padding-top:calc(var(--dialog-padding)*4);display:block;position:relative;margin-right:0 !important;min-height:100%;padding-left:var(--dialog-padding)}@media screen and (min-width: 62em){:host{padding-top:var(--dialog-padding);padding-left:calc(var(--dialog-padding) + 17.625rem) !important;display:flex;flex-direction:column}}.steps{width:100%;position:absolute;top:0;left:0;padding:var(--dialog-padding);counter-reset:section;display:flex;justify-content:space-between;background-color:var(--colour-primary)}.steps:before{content:"";position:absolute;top:calc(50% - 1px);left:var(--dialog-padding);z-index:2;width:calc(100% - var(--dialog-padding) - var(--dialog-padding));height:2px;background:currentColor;z-index:1;background:linear-gradient(90deg, var(--colour-success) 0%, var(--colour-success) var(--progress, 0%), rgba(255, 255, 255, 0.5) var(--progress, 0%), rgba(255, 255, 255, 0.5) 100%)}.steps button{position:relative;background:rgba(0,0,0,0);border:none;color:hsla(0,0%,100%,.5);height:1.5rem;line-height:1.5rem;width:1.5rem;text-indent:300%;overflow:hidden;z-index:2;background-color:var(--colour-primary);outline:.5rem solid var(--colour-primary);cursor:pointer}.steps button:before{position:absolute;top:0;left:0;counter-increment:section;content:counter(section);border:1px solid currentColor;height:1.5rem;line-height:1.5rem;width:1.5rem;text-align:center;display:inline-block;text-indent:0;border-radius:50%}.steps button:not(.active):not(.valid){pointer-events:none}.steps button:not(.active):not(.valid):before{opacity:.5}.steps button.active{color:var(--colour-white)}.steps button.valid{color:var(--colour-success)}@media screen and (prefers-color-scheme: dark){.steps button{color:rgba(0,0,0,.5)}.steps button.active{color:#000}.steps button.valid{color:var(--colour-complete)}}@media screen and (min-width: 62em){.steps{width:17.625rem;height:100%;flex-direction:column;justify-content:center}.steps:before{display:none}.steps button{margin-block:.5rem;width:100%;text-indent:0;text-align:left;padding-left:2rem;font-size:1.125rem;outline-width:1px}}/*# sourceMappingURL=assets/css/components/multi-step.component.css.map */
+
+    </style>
+    <div class="steps" parts="steps">
+    </div>
+    <slot></slot>
+    `,this.shadowRoot.appendChild(e.content.cloneNode(!0))}connectedCallback(){const e=this,u=this.shadowRoot.querySelector(".steps"),l=this.querySelector("form"),i=Array.from(e.querySelectorAll("fieldset[data-title]"));i.forEach((t,a)=>{u.insertAdjacentHTML("beforeend",`<button data-title="${t.getAttribute("data-title")}" type="button" class="${a==0?"active":""}" tabindex="-1">${t.getAttribute("data-title")}</button>`),a===0&&t.classList.add("active");const o=document.createElement("div");if(o.classList.add("btn--wrapper"),t.appendChild(o),a!=0&&(o.innerHTML+=`<button data-title="${i[a-1].getAttribute("data-title")}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`),a!=i.length-1&&(o.innerHTML+=`<button data-title="${i[a+1].getAttribute("data-title")}" class="btn btn-primary mb-0" data-next type="button">Next</button>`),a==i.length-1)if(l&&l.querySelector(':scope > button[type="submit"]')){const s=l.querySelector(':scope > button[type="submit"]');s.classList.add("mb-0"),o.insertAdjacentElement("beforeend",s)}else o.innerHTML+=`<button data-title="${i[a].getAttribute("data-title")}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`});const n=Array.from(e.querySelectorAll("fieldset.was-validated"));for(let t=0;t<n.length;t++){const a=n[t],o=a.getAttribute("data-title");if(a.querySelector(".is-invalid")){Array.from(e.querySelectorAll(`[data-title="${o}"]`)).forEach(s=>{s.classList.add("active")});break}else Array.from(e.querySelectorAll(`[data-title="${o}"]`)).forEach(s=>{s.classList.add("valid")})}e.addEventListener("invalid",function(){return function(t){t.preventDefault()}}(),!0);function d(t){const a=e.querySelector("fieldset.active")?e.querySelector("fieldset.active"):e.querySelector("fieldset[data-title]"),o=a.getAttribute("data-title");let s=!0;if(a.classList.add("was-validated"),Array.from(a.querySelectorAll("input")).forEach(r=>{r.checkValidity()||(s=!1)}),s?(Array.from(e.querySelectorAll(`[data-title="${o}"]`)).forEach(r=>{r.classList.add("valid")}),Array.from(e.shadowRoot.querySelectorAll(`[data-title="${o}"]`)).forEach(r=>{r.classList.add("valid")})):(Array.from(e.querySelectorAll(`[data-title="${o}"]`)).forEach(r=>{r.classList.remove("valid")}),Array.from(e.shadowRoot.querySelectorAll(`[data-title="${o}"]`)).forEach(r=>{r.classList.remove("valid")})),s||!t.hasAttribute("data-next")){const r=e.querySelector(`fieldset[data-title="${t.getAttribute("data-title")}"]`),f=e.shadowRoot.querySelector(`.steps button[data-title="${t.getAttribute("data-title")}"]`);Array.from(e.querySelectorAll("button")).forEach(p=>{p.classList.remove("active")}),Array.from(e.querySelectorAll("fieldset")).forEach(p=>{p.classList.remove("active")}),f.classList.add("active"),r.classList.add("active")}const b=Array.from(e.querySelectorAll("fieldset")).length,m=Array.from(e.querySelectorAll("fieldset.valid")).length;e.style.setProperty("--progress",`${m/(b-1)*100}%`)}e.addEventListener("keydown",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button")){const a=t.target.closest("button");t.keyCode==13&&a.getAttribute("type")!="submit"&&(t.preventDefault(),d(a))}t&&t.target instanceof HTMLElement&&t.target.closest("input")&&(t.target.closest("input").classList.remove("is-invalid"),t.keyCode==13&&t.preventDefault())}),e.addEventListener("click",t=>(t&&t.target instanceof HTMLElement&&t.target.closest('button[type="submit"]')&&t.target.closest("form").classList.add("was-validated"),null)),e.shadowRoot.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button[data-title]")){const a=t.target.closest("button[data-title]");d(a)}return null}),y(e,"iam-multi-step",[])}static get observedAttributes(){return["data-image"]}attributeChangedCallback(e,u,l){switch(e){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=l);break}}}}export{h as default};
+//# sourceMappingURL=multi-step.component.min.js.map

package/assets/js/components/multi-step/multi-step.component.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-step.component.min.js","sources":["../_global.js","multi-step.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","import { trackComponent, trackComponentRegistered } from '../_global.js';\ntrackComponentRegistered('iam-multi-step');\nclass iamMultiStep 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 loadCSS = `@import \"${assetLocation}/css/components/multi-step.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    </style>\n    <div class=\"steps\" parts=\"steps\">\n    </div>\n    <slot></slot>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const MultiStepComponent = this;\n        const steps = this.shadowRoot.querySelector('.steps');\n        const form = this.querySelector('form');\n        const fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));\n        fieldsets.forEach((fieldset, index) => {\n            steps.insertAdjacentHTML('beforeend', `<button data-title=\"${fieldset.getAttribute('data-title')}\" type=\"button\" class=\"${index == 0 ? 'active' : ''}\" tabindex=\"-1\">${fieldset.getAttribute('data-title')}</button>`);\n            if (index === 0)\n                fieldset.classList.add('active');\n            const btnWrapper = document.createElement('div');\n            btnWrapper.classList.add('btn--wrapper');\n            fieldset.appendChild(btnWrapper);\n            if (index != 0)\n                btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index - 1].getAttribute('data-title')}\" class=\"btn btn-secondary mb-0\" data-previous type=\"button\">Previous</button>`;\n            if (index != fieldsets.length - 1)\n                btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index + 1].getAttribute('data-title')}\" class=\"btn btn-primary mb-0\" data-next type=\"button\">Next</button>`;\n            // Last fieldset\n            if (index == fieldsets.length - 1) {\n                if (form && form.querySelector(':scope > button[type=\"submit\"]')) {\n                    const existingButton = form.querySelector(':scope > button[type=\"submit\"]');\n                    existingButton.classList.add('mb-0');\n                    btnWrapper.insertAdjacentElement('beforeend', existingButton);\n                }\n                else\n                    btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index].getAttribute('data-title')}\" class=\"btn btn-primary mb-0\" data-next type=\"submit\">Submit</button>`;\n            }\n        });\n        // Open the fieldset with an error inside\n        const validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));\n        for (let i = 0; i < validatedFieldsets.length; i++) {\n            const fieldset = validatedFieldsets[i];\n            const fieldsetID = fieldset.getAttribute('data-title');\n            if (fieldset.querySelector('.is-invalid')) {\n                Array.from(MultiStepComponent.querySelectorAll(`[data-title=\"${fieldsetID}\"]`)).forEach((element) => {\n                    element.classList.add('active');\n                });\n                break;\n            }\n            else {\n                Array.from(MultiStepComponent.querySelectorAll(`[data-title=\"${fieldsetID}\"]`)).forEach((element) => {\n                    element.classList.add('valid');\n                });\n            }\n        }\n        // Prevent the bubble messages\n        MultiStepComponent.addEventListener('invalid', (function () {\n            return function (e) {\n                e.preventDefault();\n            };\n        })(), true);\n        function validateFieldset(button) {\n            const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)\n                ? MultiStepComponent.querySelector(`fieldset.active`)\n                : MultiStepComponent.querySelector(`fieldset[data-title]`);\n            const currentFieldsetID = currentFieldset.getAttribute('data-title');\n            let isFieldsetValid = true;\n            currentFieldset.classList.add('was-validated');\n            Array.from(currentFieldset.querySelectorAll('input')).forEach((input) => {\n                if (!input.checkValidity())\n                    isFieldsetValid = false;\n            });\n            // If valid mode to next field set\n            if (!isFieldsetValid) {\n                Array.from(MultiStepComponent.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element) => {\n                    element.classList.remove('valid');\n                });\n                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element) => {\n                    element.classList.remove('valid');\n                });\n            }\n            else {\n                Array.from(MultiStepComponent.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element) => {\n                    element.classList.add('valid');\n                });\n                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element) => {\n                    element.classList.add('valid');\n                });\n            }\n            // Allow the previous button to navigate\n            if (isFieldsetValid || !button.hasAttribute('data-next')) {\n                const fieldset = MultiStepComponent.querySelector(`fieldset[data-title=\"${button.getAttribute('data-title')}\"]`);\n                const step = MultiStepComponent.shadowRoot.querySelector(`.steps button[data-title=\"${button.getAttribute('data-title')}\"]`);\n                Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button) => {\n                    button.classList.remove('active');\n                });\n                Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button) => {\n                    button.classList.remove('active');\n                });\n                step.classList.add('active');\n                fieldset.classList.add('active');\n            }\n            const fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;\n            const validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;\n            // update the progress bar\n            MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1)) * 100}%`);\n        }\n        // remove error messages from server\n        MultiStepComponent.addEventListener('keydown', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('button')) {\n                const button = event.target.closest('button');\n                if (event.keyCode == 13 && button.getAttribute('type') != 'submit') {\n                    event.preventDefault();\n                    validateFieldset(button);\n                }\n            }\n            if (event && event.target instanceof HTMLElement && event.target.closest('input')) {\n                const input = event.target.closest('input');\n                input.classList.remove('is-invalid');\n                if (event.keyCode == 13) {\n                    event.preventDefault();\n                }\n            }\n        });\n        MultiStepComponent.addEventListener('click', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('button[type=\"submit\"]')) {\n                const form = event.target.closest('form');\n                form.classList.add('was-validated');\n            }\n            return null;\n        });\n        MultiStepComponent.shadowRoot.addEventListener('click', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {\n                const button = event.target.closest('button[data-title]');\n                validateFieldset(button);\n            }\n            return null;\n        });\n        trackComponent(MultiStepComponent, 'iam-multi-step', []);\n    }\n    static get observedAttributes() {\n        return ['data-image'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case 'data-total': {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n        }\n    }\n}\nexport default iamMultiStep;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","iamMultiStep","template","MultiStepComponent","steps","form","fieldsets","fieldset","index","btnWrapper","existingButton","validatedFieldsets","i","fieldsetID","element","e","validateFieldset","button","currentFieldset","currentFieldsetID","isFieldsetValid","input","step","fieldsetCount","validFieldsetCount","attrName","oldVal","newVal"],"mappings":"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"}

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -41,6 +40,7 @@ class iamMultiselect extends HTMLElement {
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
     connectedCallback() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const multiselect = this;
         const form = this.closest('form');
         const wrapper = this.shadowRoot.querySelector('.wrapper');
@@ -106,12 +106,12 @@ class iamMultiselect extends HTMLElement {
             }
         }
         // Set on load
-        Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox, index) => {
+        Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox) => {
             setItem(checkbox);
         });
         // Filter list
-        search.addEventListener('input', (event) => {
-            Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label, index) => {
+        search.addEventListener('input', () => {
+            Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label) => {
                 const checkbox = label.querySelector('input');
                 const searchValue = checkbox.value;
                 const labelText = label.textContent;
@@ -126,11 +126,11 @@ class iamMultiselect extends HTMLElement {
         });
         // Add a delayed hover effect for non hover devices
         let hoverTimeout;
-        multiselect.addEventListener('focus', (event) => {
+        multiselect.addEventListener('focus', () => {
             multiselect.classList.add('hover');
             clearTimeout(hoverTimeout);
         });
-        search.addEventListener('blur', (event) => {
+        search.addEventListener('blur', () => {
             clearTimeout(hoverTimeout);
             hoverTimeout = setTimeout(function () {
                 multiselect.classList.remove('hover');
@@ -150,8 +150,8 @@ class iamMultiselect extends HTMLElement {
             }
         });
         // Clear all
-        button.addEventListener('click', function (event) {
-            Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox, index) => {
+        button.addEventListener('click', function () {
+            Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox) => {
                 checkbox.checked = false;
                 setItem(checkbox);
             });
@@ -234,10 +234,10 @@ class iamMultiselect extends HTMLElement {
             }
         });
         // Fix for the inline edit multiselect
-        multiselect.addEventListener('mousedown', (event) => {
+        multiselect.addEventListener('mousedown', () => {
             wrapper.setAttribute('data-mousedown', 'true');
         });
-        multiselect.addEventListener('mouseup', (event) => {
+        multiselect.addEventListener('mouseup', () => {
             wrapper.removeAttribute('data-mousedown');
         });
     }

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

@@ -1,7 +1,7 @@
 /*!
-  * iamKey v7.1.0--beta6
+  * iamKey v7.2.0
   * Copyright 2022-2025 iamproperty
-  */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=`
+  */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",l=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,s=document.createElement("template");s.innerHTML=`
     <style>
     @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(.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 */
@@ -22,5 +22,5 @@
     </div>
     </div>
     </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 u=o.querySelector("input").value,b=o.textContent;u.toLowerCase().includes(a.value.toLowerCase())||b.toLowerCase().includes(a.value.toLowerCase())?o.removeAttribute("slot"):o.setAttribute("slot","notmatched")})});let d;t.addEventListener("focus",e=>{t.classList.add("hover"),clearTimeout(d)}),a.addEventListener("blur",e=>{clearTimeout(d),d=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(),clearTimeout(d),t.classList.add("hover"),d=setTimeout(function(){t.classList.remove("hover")},5e3)}}),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")),u=Array.from(n)[s-1];u?u.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};
+    `,this.shadowRoot.appendChild(s.content.cloneNode(!0))}connectedCallback(){const t=this,l=this.closest("form"),s=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 r=n.target;console.log(r),r.classList.contains("was-validated")?s.classList.add("was-validated"):s.classList.remove("was-validated")})});l.classList.contains("was-validated")?s.classList.add("was-validated"):s.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"]')?(s.classList.add("filled"),t.removeAttribute("data-error"),a.removeAttribute("placeholder")):(s.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=>{c(e)}),a.addEventListener("input",()=>{Array.from(t.querySelectorAll('label:not([slot="checked"])')).forEach(e=>{const n=e.querySelector("input").value,r=e.textContent;n.toLowerCase().includes(a.value.toLowerCase())||r.toLowerCase().includes(a.value.toLowerCase())?e.removeAttribute("slot"):e.setAttribute("slot","notmatched")})});let d;t.addEventListener("focus",()=>{t.classList.add("hover"),clearTimeout(d)}),a.addEventListener("blur",()=>{clearTimeout(d),d=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(),clearTimeout(d),t.classList.add("hover"),d=setTimeout(function(){t.classList.remove("hover")},5e3)}}),h.addEventListener("click",function(){Array.from(t.querySelectorAll('label input[type="checkbox"]')).forEach(e=>{e.checked=!1,c(e)}),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"])'),r=Array.from(n).indexOf(o.closest("label")),p=Array.from(n)[r-1];p?p.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,r=t.querySelector(`label:has(input[value="${n}"]) ~ label:not([slot="checked"]):not([slot="checked"])`);r&&r.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(i==0)return!1;let e=t.querySelector(`label[data-order="${i}"]`);return e||(e=u(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=u();if(n){const r=n.querySelector("input");r.checked=!1,c(r)}a.focus()}break}}),t.addEventListener("mousedown",()=>{s.setAttribute("data-mousedown","true")}),t.addEventListener("mouseup",()=>{s.removeAttribute("data-mousedown")})}}export{b 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')\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                clearTimeout(hoverTimeout);\n                multiselect.classList.add('hover');\n                hoverTimeout = setTimeout(function () {\n                    multiselect.classList.remove('hover');\n                }, 5000);\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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"}
+{"version":3,"file":"multiselect.component.min.js","sources":["multiselect.component.js"],"sourcesContent":["// 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        // eslint-disable-next-line @typescript-eslint/no-this-alias\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) => {\n            setItem(checkbox);\n        });\n        // Filter list\n        search.addEventListener('input', () => {\n            Array.from(multiselect.querySelectorAll(`label:not([slot=\"checked\"])`)).forEach((label) => {\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', () => {\n            multiselect.classList.add('hover');\n            clearTimeout(hoverTimeout);\n        });\n        search.addEventListener('blur', () => {\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                clearTimeout(hoverTimeout);\n                multiselect.classList.add('hover');\n                hoverTimeout = setTimeout(function () {\n                    multiselect.classList.remove('hover');\n                }, 5000);\n            }\n        });\n        // Clear all\n        button.addEventListener('click', function () {\n            Array.from(multiselect.querySelectorAll(`label input[type=\"checkbox\"]`)).forEach((checkbox) => {\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', () => {\n            wrapper.setAttribute('data-mousedown', 'true');\n        });\n        multiselect.addEventListener('mouseup', () => {\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","label","searchValue","labelText","hoverTimeout","event","activeElement","arrCheckboxes","activeIndex","prevCheckbox","activeValue","nextCheckbox","checkLastTag","lastTag","lastTagInput"],"mappings":"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"}

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -15,7 +14,7 @@ class iamNav extends HTMLElement {
         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 loadCSS = `@import "${assetLocation}/css/components/nav.component.css";`;
         const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
@@ -64,6 +63,7 @@ class iamNav extends HTMLElement {
                 .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
         const menuButton = this.shadowRoot.querySelector('.btn-menu');
         const menu = this.shadowRoot.querySelector('.menu');
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const iamNav = this;
         const backdrop = this.shadowRoot.querySelector('.backdrop');
         const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
@@ -188,13 +188,13 @@ class iamNav extends HTMLElement {
             }
         }, false);
         // Allow outside JS to close the menu
-        this.addEventListener('request-close', (event) => {
+        this.addEventListener('request-close', () => {
             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) => {
+        backdrop.addEventListener('click', () => {
             const openMenu = this.querySelector('details[open] summary');
             if (openMenu)
                 openMenu.click();
@@ -233,7 +233,7 @@ class iamNav extends HTMLElement {
                         innerBtn.classList.remove('active');
                     });
                     // Close any other dropdowns on the same level
-                    Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement, index) => {
+                    Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement) => {
                         if (detailsArrayElement != details)
                             detailsArrayElement.removeAttribute('open');
                     });
@@ -281,12 +281,12 @@ class iamNav extends HTMLElement {
                 this.classList.add('search-open');
                 searchButton.setAttribute('aria-expanded', true);
             }
-            searchButton.addEventListener('click', (event) => {
+            searchButton.addEventListener('click', () => {
                 searchDialog.setAttribute('open', 'open');
                 this.classList.add('search-open');
                 searchButton.setAttribute('aria-expanded', true);
             });
-            searchClose.addEventListener('click', (event) => {
+            searchClose.addEventListener('click', () => {
                 searchDialog.removeAttribute('open');
                 this.classList.remove('search-open');
                 searchButton.removeAttribute('aria-expanded');