@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/js/components/inline-edit/inline-edit.component.js

@@ -2,15 +2,19 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-    "event": "customElementRegistered",
-    "element": "inline edit"
+    event: 'customElementRegistered',
+    element: 'inline edit',
 });
 class iamInlineEdit 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/inline-edit.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
@@ -33,15 +37,15 @@ class iamInlineEdit extends HTMLElement {
         shadowRoot.appendChild(template.content.cloneNode(true));
     }
     connectedCallback() {
-        let inlineEdit = this;
-        let saveButton = this.shadowRoot.querySelector('#save');
-        let cancelButton = this.shadowRoot.querySelector('#cancel');
-        let label = this.querySelector('label');
-        let input = this.querySelector('input, textarea, select');
-        let preview = this.querySelector('.preview');
-        let statusSaving = this.shadowRoot.querySelector('#saving');
-        let statusSaved = this.shadowRoot.querySelector('#saved');
-        let statusNotSaved = this.shadowRoot.querySelector('#notsaved');
+        const inlineEdit = this;
+        const saveButton = this.shadowRoot.querySelector('#save');
+        const cancelButton = this.shadowRoot.querySelector('#cancel');
+        const label = this.querySelector('label');
+        const input = this.querySelector('input, textarea, select');
+        const preview = this.querySelector('.preview');
+        const statusSaving = this.shadowRoot.querySelector('#saving');
+        const statusSaved = this.shadowRoot.querySelector('#saved');
+        const statusNotSaved = this.shadowRoot.querySelector('#notsaved');
         // Save the original value for later
         let originalValue = input.value;
         // cancel
@@ -51,7 +55,9 @@ class iamInlineEdit extends HTMLElement {
             inlineEdit.blur();
             inlineEdit.classList.remove('was-validated');
             statusNotSaved.classList.add('d-none');
-            const cancelEvent = new CustomEvent("inline-edit-cancel", { detail: { name: input.getAttribute('name') } });
+            const cancelEvent = new CustomEvent('inline-edit-cancel', {
+                detail: { name: input.getAttribute('name') },
+            });
             inlineEdit.dispatchEvent(cancelEvent);
         });
         // Save
@@ -62,7 +68,9 @@ class iamInlineEdit extends HTMLElement {
             }
             originalValue = input.value;
             // dispatch save event
-            const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: input.getAttribute('name'), value: input.value } });
+            const saveEvent = new CustomEvent('inline-edit-save', {
+                detail: { name: input.getAttribute('name'), value: input.value },
+            });
             inlineEdit.dispatchEvent(saveEvent);
             //inlineEdit.setAttribute('data-saving','true');
             input.disabled = true;
@@ -77,8 +85,9 @@ class iamInlineEdit extends HTMLElement {
         // Save
         if (input.tagName === 'INPUT') {
             input.addEventListener('keydown', (event) => {
-                switch (event.key) { // change to event.key to key to use the above variable
-                    case "Enter":
+                switch (event.key // change to event.key to key to use the above variable
+                ) {
+                    case 'Enter':
                         event.stopPropagation();
                         event.preventDefault();
                         saveButton.click();
@@ -91,7 +100,9 @@ class iamInlineEdit extends HTMLElement {
             setTimeout(() => {
                 statusSaving.classList.add('d-none');
                 statusSaved.classList.remove('d-none');
-                const confirmEvent = new CustomEvent("inline-edit-confirmed", { detail: { name: input.getAttribute('name') } });
+                const confirmEvent = new CustomEvent('inline-edit-confirmed', {
+                    detail: { name: input.getAttribute('name') },
+                });
                 inlineEdit.dispatchEvent(confirmEvent);
             }, 100);
             // Reset to normal
@@ -107,7 +118,9 @@ class iamInlineEdit extends HTMLElement {
         if (input.tagName === 'SELECT') {
             input.addEventListener('change', (event) => {
                 originalValue = input.value;
-                const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: input.getAttribute('name'), value: input.value } });
+                const saveEvent = new CustomEvent('inline-edit-save', {
+                    detail: { name: input.getAttribute('name'), value: input.value },
+                });
                 inlineEdit.dispatchEvent(saveEvent);
                 inlineEdit.setAttribute('data-saving', 'true');
                 input.disabled = true;
@@ -124,7 +137,9 @@ class iamInlineEdit extends HTMLElement {
             if (input.value != originalValue) {
                 if (inlineEdit.hasAttribute('data-autosave')) {
                     originalValue = input.value;
-                    const saveEvent = new CustomEvent("inline-edit-autosave", { detail: { name: input.getAttribute('name'), value: input.value } });
+                    const saveEvent = new CustomEvent('inline-edit-autosave', {
+                        detail: { name: input.getAttribute('name'), value: input.value },
+                    });
                     inlineEdit.dispatchEvent(saveEvent);
                     statusSaving.classList.remove('d-none');
                     if (preview) {
@@ -139,13 +154,18 @@ class iamInlineEdit extends HTMLElement {
         // checkboxes
         inlineEdit.addEventListener('change', (event) => {
             if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {
-                let saveValue = "";
+                let saveValue = '';
                 Array.from(inlineEdit.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox, index) => {
                     if (index != 0)
-                        saveValue += ", ";
+                        saveValue += ', ';
                     saveValue += checkbox.value;
                 });
-                const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: event.target.closest('input[type="checkbox"]').getAttribute('name'), value: saveValue } });
+                const saveEvent = new CustomEvent('inline-edit-save', {
+                    detail: {
+                        name: event.target.closest('input[type="checkbox"]').getAttribute('name'),
+                        value: saveValue,
+                    },
+                });
                 inlineEdit.dispatchEvent(saveEvent);
             }
         });

package/assets/js/components/inline-edit/inline-edit.component.min.js

@@ -1,9 +1,9 @@
 /*!
-  * iamKey v7.0.0
+  * iamKey v7.1.0--beta2
   * Copyright 2022-2025 iamproperty
-  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class b extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",d=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
+  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class b extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",c=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
     <style class="styles">
-    @import "${d}";
+    @import "${c}";
     :host{max-width:var(--input-max-width, 50rem);display:block;font-weight:normal;margin-bottom:2rem;position:relative}.btns,.status{justify-content:flex-end;gap:.5rem;position:absolute;top:calc(100% + .5rem);right:0}.btns{display:var(--display-btns, flex);justify-content:flex-end}.status{display:var(--display-status, flex)}.btn-action{margin:0}/*# sourceMappingURL=assets/css/components/inline-edit.css.map */
 
     </style>
@@ -18,5 +18,5 @@
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saved"><i class="fa-regular fa-check me-1"></i> Saved</span>
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="notsaved"><i class="fa-regular fa-circle-info me-1"></i> Not Saved</span>
     </div>
-    `,t.appendChild(e.content.cloneNode(!0))}connectedCallback(){let t=this,i=this.shadowRoot.querySelector("#save"),d=this.shadowRoot.querySelector("#cancel");this.querySelector("label");let e=this.querySelector("input, textarea, select"),o=this.querySelector(".preview"),l=this.shadowRoot.querySelector("#saving"),c=this.shadowRoot.querySelector("#saved"),r=this.shadowRoot.querySelector("#notsaved"),s=e.value;d.addEventListener("click",a=>{e.value=s,e.blur(),t.blur(),t.classList.remove("was-validated"),r.classList.add("d-none");const n=new CustomEvent("inline-edit-cancel",{detail:{name:e.getAttribute("name")}});t.dispatchEvent(n)}),i.addEventListener("click",a=>{if(t.querySelector(":invalid"))return t.classList.add("was-validated"),!1;s=e.value;const n=new CustomEvent("inline-edit-save",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),e.disabled=!0,e.blur(),t.blur(),l.classList.remove("d-none"),o&&(console.log(e.value),o.innerHTML=e.value)}),e.tagName==="INPUT"&&e.addEventListener("keydown",a=>{switch(a.key){case"Enter":a.stopPropagation(),a.preventDefault(),i.click();break}}),t.addEventListener("inline-edit-saved",a=>{setTimeout(()=>{l.classList.add("d-none"),c.classList.remove("d-none");const n=new CustomEvent("inline-edit-confirmed",{detail:{name:e.getAttribute("name")}});t.dispatchEvent(n)},100),setTimeout(()=>{e.disabled=!1,t.removeAttribute("data-saving"),l.classList.add("d-none"),c.classList.add("d-none"),r.classList.add("d-none")},1e3)}),e.tagName==="SELECT"&&e.addEventListener("change",a=>{s=e.value;const n=new CustomEvent("inline-edit-save",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),t.setAttribute("data-saving","true"),e.disabled=!0,e.blur()}),e.tagName!="SELECT"&&e.addEventListener("focus",a=>{e.select()}),e.addEventListener("blur",a=>{if(e.value!=s)if(t.hasAttribute("data-autosave")){s=e.value;const n=new CustomEvent("inline-edit-autosave",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),l.classList.remove("d-none"),o&&(o.innerHTML=e.value)}else t.querySelector(".inline-feedback")||r.classList.remove("d-none")}),t.addEventListener("change",a=>{if(a&&a.target instanceof HTMLElement&&a.target.closest('input[type="checkbox"]')){let n="";Array.from(t.querySelectorAll('label input[type="checkbox"]:checked')).forEach((v,m)=>{m!=0&&(n+=", "),n+=v.value});const u=new CustomEvent("inline-edit-save",{detail:{name:a.target.closest('input[type="checkbox"]').getAttribute("name"),value:n}});t.dispatchEvent(u)}})}}export{b as default};
+    `,t.appendChild(e.content.cloneNode(!0))}connectedCallback(){const t=this,i=this.shadowRoot.querySelector("#save"),c=this.shadowRoot.querySelector("#cancel");this.querySelector("label");const e=this.querySelector("input, textarea, select"),o=this.querySelector(".preview"),l=this.shadowRoot.querySelector("#saving"),r=this.shadowRoot.querySelector("#saved"),d=this.shadowRoot.querySelector("#notsaved");let s=e.value;c.addEventListener("click",a=>{e.value=s,e.blur(),t.blur(),t.classList.remove("was-validated"),d.classList.add("d-none");const n=new CustomEvent("inline-edit-cancel",{detail:{name:e.getAttribute("name")}});t.dispatchEvent(n)}),i.addEventListener("click",a=>{if(t.querySelector(":invalid"))return t.classList.add("was-validated"),!1;s=e.value;const n=new CustomEvent("inline-edit-save",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),e.disabled=!0,e.blur(),t.blur(),l.classList.remove("d-none"),o&&(console.log(e.value),o.innerHTML=e.value)}),e.tagName==="INPUT"&&e.addEventListener("keydown",a=>{switch(a.key){case"Enter":a.stopPropagation(),a.preventDefault(),i.click();break}}),t.addEventListener("inline-edit-saved",a=>{setTimeout(()=>{l.classList.add("d-none"),r.classList.remove("d-none");const n=new CustomEvent("inline-edit-confirmed",{detail:{name:e.getAttribute("name")}});t.dispatchEvent(n)},100),setTimeout(()=>{e.disabled=!1,t.removeAttribute("data-saving"),l.classList.add("d-none"),r.classList.add("d-none"),d.classList.add("d-none")},1e3)}),e.tagName==="SELECT"&&e.addEventListener("change",a=>{s=e.value;const n=new CustomEvent("inline-edit-save",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),t.setAttribute("data-saving","true"),e.disabled=!0,e.blur()}),e.tagName!="SELECT"&&e.addEventListener("focus",a=>{e.select()}),e.addEventListener("blur",a=>{if(e.value!=s)if(t.hasAttribute("data-autosave")){s=e.value;const n=new CustomEvent("inline-edit-autosave",{detail:{name:e.getAttribute("name"),value:e.value}});t.dispatchEvent(n),l.classList.remove("d-none"),o&&(o.innerHTML=e.value)}else t.querySelector(".inline-feedback")||d.classList.remove("d-none")}),t.addEventListener("change",a=>{if(a&&a.target instanceof HTMLElement&&a.target.closest('input[type="checkbox"]')){let n="";Array.from(t.querySelectorAll('label input[type="checkbox"]:checked')).forEach((v,m)=>{m!=0&&(n+=", "),n+=v.value});const u=new CustomEvent("inline-edit-save",{detail:{name:a.target.closest('input[type="checkbox"]').getAttribute("name"),value:n}});t.dispatchEvent(u)}})}}export{b as default};
 //# sourceMappingURL=inline-edit.component.min.js.map

package/assets/js/components/inline-edit/inline-edit.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-edit.component.min.js","sources":["inline-edit.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"inline edit\"\n});\nclass iamInlineEdit extends HTMLElement {\n    constructor() {\n        super();\n        const shadowRoot = 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/inline-edit.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n    \n    <slot></slot>\n    <div class=\"btns\" part=\"btns\">\n      <button class=\"btn btn-action\" id=\"save\" part=\"save-btn\"><i class=\"fa-regular fa-save m-0\"></i> Save</button><button class=\"btn btn-action\" id=\"cancel\" part=\"cancel-btn\">Cancel</button>\n    </div>\n    <div class=\"status pe-none\" part=\"status\">\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saving\"><i class=\"fa-regular fa-spinner fa-spin me-1\"></i> Saving...</span>\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saved\"><i class=\"fa-regular fa-check me-1\"></i> Saved</span>\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"notsaved\"><i class=\"fa-regular fa-circle-info me-1\"></i> Not Saved</span>\n    </div>\n    `;\n        shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        let inlineEdit = this;\n        let saveButton = this.shadowRoot.querySelector('#save');\n        let cancelButton = this.shadowRoot.querySelector('#cancel');\n        let label = this.querySelector('label');\n        let input = this.querySelector('input, textarea, select');\n        let preview = this.querySelector('.preview');\n        let statusSaving = this.shadowRoot.querySelector('#saving');\n        let statusSaved = this.shadowRoot.querySelector('#saved');\n        let statusNotSaved = this.shadowRoot.querySelector('#notsaved');\n        // Save the original value for later\n        let originalValue = input.value;\n        // cancel\n        cancelButton.addEventListener('click', (event) => {\n            input.value = originalValue;\n            input.blur();\n            inlineEdit.blur();\n            inlineEdit.classList.remove('was-validated');\n            statusNotSaved.classList.add('d-none');\n            const cancelEvent = new CustomEvent(\"inline-edit-cancel\", { detail: { name: input.getAttribute('name') } });\n            inlineEdit.dispatchEvent(cancelEvent);\n        });\n        // Save\n        saveButton.addEventListener('click', (event) => {\n            if (inlineEdit.querySelector(':invalid')) {\n                inlineEdit.classList.add('was-validated');\n                return false;\n            }\n            originalValue = input.value;\n            // dispatch save event\n            const saveEvent = new CustomEvent(\"inline-edit-save\", { detail: { name: input.getAttribute('name'), value: input.value } });\n            inlineEdit.dispatchEvent(saveEvent);\n            //inlineEdit.setAttribute('data-saving','true');\n            input.disabled = true;\n            input.blur();\n            inlineEdit.blur();\n            statusSaving.classList.remove('d-none');\n            if (preview) {\n                console.log(input.value);\n                preview.innerHTML = input.value;\n            }\n        });\n        // Save\n        if (input.tagName === 'INPUT') {\n            input.addEventListener('keydown', (event) => {\n                switch (event.key) { // change to event.key to key to use the above variable\n                    case \"Enter\":\n                        event.stopPropagation();\n                        event.preventDefault();\n                        saveButton.click();\n                        break;\n                }\n            });\n        }\n        // Saved\n        inlineEdit.addEventListener('inline-edit-saved', (event) => {\n            setTimeout(() => {\n                statusSaving.classList.add('d-none');\n                statusSaved.classList.remove('d-none');\n                const confirmEvent = new CustomEvent(\"inline-edit-confirmed\", { detail: { name: input.getAttribute('name') } });\n                inlineEdit.dispatchEvent(confirmEvent);\n            }, 100);\n            // Reset to normal\n            setTimeout(() => {\n                input.disabled = false;\n                inlineEdit.removeAttribute('data-saving');\n                statusSaving.classList.add('d-none');\n                statusSaved.classList.add('d-none');\n                statusNotSaved.classList.add('d-none');\n            }, 1000);\n        });\n        // enter key saves\n        if (input.tagName === 'SELECT') {\n            input.addEventListener('change', (event) => {\n                originalValue = input.value;\n                const saveEvent = new CustomEvent(\"inline-edit-save\", { detail: { name: input.getAttribute('name'), value: input.value } });\n                inlineEdit.dispatchEvent(saveEvent);\n                inlineEdit.setAttribute('data-saving', 'true');\n                input.disabled = true;\n                input.blur();\n            });\n        }\n        if (input.tagName != 'SELECT') {\n            input.addEventListener('focus', (event) => {\n                input.select();\n            });\n        }\n        //blur it should autosave\n        input.addEventListener('blur', (event) => {\n            if (input.value != originalValue) {\n                if (inlineEdit.hasAttribute('data-autosave')) {\n                    originalValue = input.value;\n                    const saveEvent = new CustomEvent(\"inline-edit-autosave\", { detail: { name: input.getAttribute('name'), value: input.value } });\n                    inlineEdit.dispatchEvent(saveEvent);\n                    statusSaving.classList.remove('d-none');\n                    if (preview) {\n                        preview.innerHTML = input.value;\n                    }\n                }\n                else if (!inlineEdit.querySelector('.inline-feedback')) {\n                    statusNotSaved.classList.remove('d-none');\n                }\n            }\n        });\n        // checkboxes\n        inlineEdit.addEventListener('change', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('input[type=\"checkbox\"]')) {\n                let saveValue = \"\";\n                Array.from(inlineEdit.querySelectorAll(`label input[type=\"checkbox\"]:checked`)).forEach((checkbox, index) => {\n                    if (index != 0)\n                        saveValue += \", \";\n                    saveValue += checkbox.value;\n                });\n                const saveEvent = new CustomEvent(\"inline-edit-save\", { detail: { name: event.target.closest('input[type=\"checkbox\"]').getAttribute('name'), value: saveValue } });\n                inlineEdit.dispatchEvent(saveEvent);\n            }\n        });\n    }\n}\nexport default iamInlineEdit;\n"],"names":["iamInlineEdit","shadowRoot","assetLocation","coreCSS","template","inlineEdit","saveButton","cancelButton","input","preview","statusSaving","statusSaved","statusNotSaved","originalValue","event","cancelEvent","saveEvent","confirmEvent","saveValue","checkbox","index"],"mappings":"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"}
+{"version":3,"file":"inline-edit.component.min.js","sources":["inline-edit.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'inline edit',\n});\nclass iamInlineEdit extends HTMLElement {\n    constructor() {\n        super();\n        const shadowRoot = 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/inline-edit.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n    \n    <slot></slot>\n    <div class=\"btns\" part=\"btns\">\n      <button class=\"btn btn-action\" id=\"save\" part=\"save-btn\"><i class=\"fa-regular fa-save m-0\"></i> Save</button><button class=\"btn btn-action\" id=\"cancel\" part=\"cancel-btn\">Cancel</button>\n    </div>\n    <div class=\"status pe-none\" part=\"status\">\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saving\"><i class=\"fa-regular fa-spinner fa-spin me-1\"></i> Saving...</span>\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saved\"><i class=\"fa-regular fa-check me-1\"></i> Saved</span>\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"notsaved\"><i class=\"fa-regular fa-circle-info me-1\"></i> Not Saved</span>\n    </div>\n    `;\n        shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const inlineEdit = this;\n        const saveButton = this.shadowRoot.querySelector('#save');\n        const cancelButton = this.shadowRoot.querySelector('#cancel');\n        const label = this.querySelector('label');\n        const input = this.querySelector('input, textarea, select');\n        const preview = this.querySelector('.preview');\n        const statusSaving = this.shadowRoot.querySelector('#saving');\n        const statusSaved = this.shadowRoot.querySelector('#saved');\n        const statusNotSaved = this.shadowRoot.querySelector('#notsaved');\n        // Save the original value for later\n        let originalValue = input.value;\n        // cancel\n        cancelButton.addEventListener('click', (event) => {\n            input.value = originalValue;\n            input.blur();\n            inlineEdit.blur();\n            inlineEdit.classList.remove('was-validated');\n            statusNotSaved.classList.add('d-none');\n            const cancelEvent = new CustomEvent('inline-edit-cancel', {\n                detail: { name: input.getAttribute('name') },\n            });\n            inlineEdit.dispatchEvent(cancelEvent);\n        });\n        // Save\n        saveButton.addEventListener('click', (event) => {\n            if (inlineEdit.querySelector(':invalid')) {\n                inlineEdit.classList.add('was-validated');\n                return false;\n            }\n            originalValue = input.value;\n            // dispatch save event\n            const saveEvent = new CustomEvent('inline-edit-save', {\n                detail: { name: input.getAttribute('name'), value: input.value },\n            });\n            inlineEdit.dispatchEvent(saveEvent);\n            //inlineEdit.setAttribute('data-saving','true');\n            input.disabled = true;\n            input.blur();\n            inlineEdit.blur();\n            statusSaving.classList.remove('d-none');\n            if (preview) {\n                console.log(input.value);\n                preview.innerHTML = input.value;\n            }\n        });\n        // Save\n        if (input.tagName === 'INPUT') {\n            input.addEventListener('keydown', (event) => {\n                switch (event.key // change to event.key to key to use the above variable\n                ) {\n                    case 'Enter':\n                        event.stopPropagation();\n                        event.preventDefault();\n                        saveButton.click();\n                        break;\n                }\n            });\n        }\n        // Saved\n        inlineEdit.addEventListener('inline-edit-saved', (event) => {\n            setTimeout(() => {\n                statusSaving.classList.add('d-none');\n                statusSaved.classList.remove('d-none');\n                const confirmEvent = new CustomEvent('inline-edit-confirmed', {\n                    detail: { name: input.getAttribute('name') },\n                });\n                inlineEdit.dispatchEvent(confirmEvent);\n            }, 100);\n            // Reset to normal\n            setTimeout(() => {\n                input.disabled = false;\n                inlineEdit.removeAttribute('data-saving');\n                statusSaving.classList.add('d-none');\n                statusSaved.classList.add('d-none');\n                statusNotSaved.classList.add('d-none');\n            }, 1000);\n        });\n        // enter key saves\n        if (input.tagName === 'SELECT') {\n            input.addEventListener('change', (event) => {\n                originalValue = input.value;\n                const saveEvent = new CustomEvent('inline-edit-save', {\n                    detail: { name: input.getAttribute('name'), value: input.value },\n                });\n                inlineEdit.dispatchEvent(saveEvent);\n                inlineEdit.setAttribute('data-saving', 'true');\n                input.disabled = true;\n                input.blur();\n            });\n        }\n        if (input.tagName != 'SELECT') {\n            input.addEventListener('focus', (event) => {\n                input.select();\n            });\n        }\n        //blur it should autosave\n        input.addEventListener('blur', (event) => {\n            if (input.value != originalValue) {\n                if (inlineEdit.hasAttribute('data-autosave')) {\n                    originalValue = input.value;\n                    const saveEvent = new CustomEvent('inline-edit-autosave', {\n                        detail: { name: input.getAttribute('name'), value: input.value },\n                    });\n                    inlineEdit.dispatchEvent(saveEvent);\n                    statusSaving.classList.remove('d-none');\n                    if (preview) {\n                        preview.innerHTML = input.value;\n                    }\n                }\n                else if (!inlineEdit.querySelector('.inline-feedback')) {\n                    statusNotSaved.classList.remove('d-none');\n                }\n            }\n        });\n        // checkboxes\n        inlineEdit.addEventListener('change', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('input[type=\"checkbox\"]')) {\n                let saveValue = '';\n                Array.from(inlineEdit.querySelectorAll(`label input[type=\"checkbox\"]:checked`)).forEach((checkbox, index) => {\n                    if (index != 0)\n                        saveValue += ', ';\n                    saveValue += checkbox.value;\n                });\n                const saveEvent = new CustomEvent('inline-edit-save', {\n                    detail: {\n                        name: event.target.closest('input[type=\"checkbox\"]').getAttribute('name'),\n                        value: saveValue,\n                    },\n                });\n                inlineEdit.dispatchEvent(saveEvent);\n            }\n        });\n    }\n}\nexport default iamInlineEdit;\n"],"names":["iamInlineEdit","shadowRoot","assetLocation","coreCSS","template","inlineEdit","saveButton","cancelButton","input","preview","statusSaving","statusSaved","statusNotSaved","originalValue","event","cancelEvent","saveEvent","confirmEvent","saveValue","checkbox","index"],"mappings":"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"}

package/assets/js/components/marketing/marketing.component.js

@@ -2,15 +2,19 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-    "event": "customElementRegistered",
-    "element": "Marketing"
+    event: 'customElementRegistered',
+    element: 'Marketing',
 });
 class iamMarketing 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/marketing.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
@@ -30,7 +34,9 @@ class iamMarketing extends HTMLElement {
     connectedCallback() {
         this.classList.add('invert-colours');
         if (this.hasAttribute('data-img')) {
-            this.shadowRoot.querySelector('.marketing').insertAdjacentHTML('afterbegin', `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`);
+            this.shadowRoot
+                .querySelector('.marketing')
+                .insertAdjacentHTML('afterbegin', `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`);
         }
     }
 }

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.0.0
+  * iamKey v7.1.0--beta2
   * Copyright 2022-2025 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Marketing"});class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",i=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
     <style>

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

@@ -1 +1 @@
-{"version":3,"file":"marketing.component.min.js","sources":["marketing.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"Marketing\"\n});\nclass iamMarketing 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/marketing.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    \n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n    <div class=\"marketing\">\n      \n      <slot></slot>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('invert-colours');\n        if (this.hasAttribute('data-img')) {\n            this.shadowRoot.querySelector('.marketing').insertAdjacentHTML('afterbegin', `<figure><img src=\"${this.getAttribute('data-img')}\" alt=\"\" /></figure>`);\n        }\n    }\n}\nexport default iamMarketing;\n"],"names":["iamMarketing","assetLocation","coreCSS","template"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,WACf,CAAC,EACD,MAAMA,UAAqB,WAAY,CACnC,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EAAI,SAAS,KAAK,aAAa,sBAAsB,EAAI,UAC1HC,EAAU,SAAS,KAAK,aAAa,eAAe,EAAI,SAAS,KAAK,aAAa,eAAe,EAAI,GAAGD,qBAEzGE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUP,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,KAAK,UAAU,IAAI,gBAAgB,EAC/B,KAAK,aAAa,UAAU,GAC5B,KAAK,WAAW,cAAc,YAAY,EAAE,mBAAmB,aAAc,qBAAqB,KAAK,aAAa,UAAU,uBAAuB,CAE7J,CACJ"}
+{"version":3,"file":"marketing.component.min.js","sources":["marketing.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'Marketing',\n});\nclass iamMarketing 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/marketing.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    \n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n    <div class=\"marketing\">\n      \n      <slot></slot>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('invert-colours');\n        if (this.hasAttribute('data-img')) {\n            this.shadowRoot\n                .querySelector('.marketing')\n                .insertAdjacentHTML('afterbegin', `<figure><img src=\"${this.getAttribute('data-img')}\" alt=\"\" /></figure>`);\n        }\n    }\n}\nexport default iamMarketing;\n"],"names":["iamMarketing","assetLocation","coreCSS","template"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,WACb,CAAC,EACD,MAAMA,UAAqB,WAAY,CACnC,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UACAC,EAAU,SAAS,KAAK,aAAa,eAAe,EACpD,SAAS,KAAK,aAAa,eAAe,EAC1C,GAAGD,qBAEHE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUP,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,KAAK,UAAU,IAAI,gBAAgB,EAC/B,KAAK,aAAa,UAAU,GAC5B,KAAK,WACA,cAAc,YAAY,EAC1B,mBAAmB,aAAc,qBAAqB,KAAK,aAAa,UAAU,uBAAuB,CAEtH,CACJ"}

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

@@ -1,11 +1,13 @@
 // @ts-nocheck
-import { trackComponent, trackComponentRegistered } from "../_global.js";
-trackComponentRegistered("iam-multi-step");
+import { trackComponent, trackComponentRegistered } from '../_global.js';
+trackComponentRegistered('iam-multi-step');
 class iamMultiStep extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
-        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/multi-step.component.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
@@ -22,12 +24,12 @@ class iamMultiStep extends HTMLElement {
         const MultiStepComponent = this;
         const steps = this.shadowRoot.querySelector('.steps');
         const form = this.querySelector('form');
-        let fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));
+        const fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));
         fieldsets.forEach((fieldset, index) => {
-            steps.insertAdjacentHTML('beforeend', `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active" : ""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`);
+            steps.insertAdjacentHTML('beforeend', `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? 'active' : ''}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`);
             if (index === 0)
                 fieldset.classList.add('active');
-            const btnWrapper = document.createElement("div");
+            const btnWrapper = document.createElement('div');
             btnWrapper.classList.add('btn--wrapper');
             fieldset.appendChild(btnWrapper);
             if (index != 0)
@@ -37,7 +39,7 @@ class iamMultiStep extends HTMLElement {
             // Last fieldset
             if (index == fieldsets.length - 1) {
                 if (form && form.querySelector(':scope > button[type="submit"]')) {
-                    let existingButton = form.querySelector(':scope > button[type="submit"]');
+                    const existingButton = form.querySelector(':scope > button[type="submit"]');
                     existingButton.classList.add('mb-0');
                     btnWrapper.insertAdjacentElement('beforeend', existingButton);
                 }
@@ -46,10 +48,10 @@ class iamMultiStep extends HTMLElement {
             }
         });
         // Open the fieldset with an error inside
-        let validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));
+        const validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));
         for (let i = 0; i < validatedFieldsets.length; i++) {
-            let fieldset = validatedFieldsets[i];
-            let fieldsetID = fieldset.getAttribute('data-title');
+            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) => {
                     element.classList.add('active');
@@ -69,7 +71,9 @@ class iamMultiStep extends HTMLElement {
             };
         })(), true);
         function validateFieldset(button) {
-            const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`) ? MultiStepComponent.querySelector(`fieldset.active`) : MultiStepComponent.querySelector(`fieldset[data-title]`);
+            const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)
+                ? MultiStepComponent.querySelector(`fieldset.active`)
+                : MultiStepComponent.querySelector(`fieldset[data-title]`);
             const currentFieldsetID = currentFieldset.getAttribute('data-title');
             let isFieldsetValid = true;
             currentFieldset.classList.add('was-validated');
@@ -107,16 +111,16 @@ class iamMultiStep extends HTMLElement {
                 step.classList.add('active');
                 fieldset.classList.add('active');
             }
-            let fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;
-            let validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;
+            const fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;
+            const validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;
             // update the progress bar
-            MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1) * 100)}%`);
+            MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1)) * 100}%`);
         }
         // remove error messages from server
         MultiStepComponent.addEventListener('keydown', (event) => {
             if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
                 const button = event.target.closest('button');
-                if (event.keyCode == 13 && button.getAttribute('type') != "submit") {
+                if (event.keyCode == 13 && button.getAttribute('type') != 'submit') {
                     event.preventDefault();
                     validateFieldset(button);
                 }
@@ -141,17 +145,16 @@ class iamMultiStep extends HTMLElement {
                 const button = event.target.closest('button[data-title]');
                 validateFieldset(button);
             }
-            ;
             return null;
         });
-        trackComponent(MultiStepComponent, "iam-multi-step", []);
+        trackComponent(MultiStepComponent, 'iam-multi-step', []);
     }
     static get observedAttributes() {
-        return ["data-image"];
+        return ['data-image'];
     }
     attributeChangedCallback(attrName, oldVal, newVal) {
         switch (attrName) {
-            case "data-total": {
+            case 'data-total': {
                 if (this.shadowRoot.querySelector('.card__total'))
                     this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
                 break;

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 = `
@@ -36,13 +40,13 @@ class iamMultiselect extends HTMLElement {
         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');
+        const label = multiselect.shadowRoot.querySelector('label');
         label.innerHTML = multiselect.getAttribute('data-label');
         if (multiselect.hasAttribute('placeholder')) {
             search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
@@ -50,29 +54,27 @@ class iamMultiselect extends HTMLElement {
         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 +111,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 +123,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 +152,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 +205,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 +228,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');
         });
     }