@iamproperty/components 5.6.1-beta2 → 5.6.1-beta21

package/assets/js/components/collapsible-side/collapsible-side.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"collapsible side menu\"\n});\nclass iamCollapsibleSideMenu 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/collapsible-side.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n      <div class=\"container\" part=\"container\">\n\n        <div class=\"side-menu\">\n          <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\">Open or close Collapsible menu</button>\n          <div class=\"side-menu-content closed\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n\n        <div class=\"main-content\">\n          <slot></slot>\n        </div>\n\n      </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const sideMenu = this.shadowRoot.querySelector('.side-menu');\n        const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n        const mainContent = this.shadowRoot.querySelector('.main-content');\n        const button = this.shadowRoot.querySelector('.side-menu > .btn');\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css'))\n            this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n        // Set sde nav title\n        if (!this.hasAttribute('data-title'))\n            this.setAttribute('data-title', 'configuration');\n        sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        if (this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')) {\n            this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');\n            this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');\n        }\n        if (this.hasAttribute('open')) {\n            sideMenu.classList.add('open');\n            button.setAttribute('aria-expanded', true);\n        }\n        // Open the menu\n        button.addEventListener('click', (event) => {\n            if (!sideMenu.classList.contains('open')) {\n                sideMenuContent.classList.remove('closed');\n                setTimeout(function () {\n                    sideMenu.classList.add('open');\n                    button.setAttribute('aria-expanded', true);\n                }, 100);\n            }\n            else {\n                sideMenu.classList.remove('open');\n                button.removeAttribute('aria-expanded');\n                setTimeout(function () { sideMenuContent.classList.add('closed'); }, 1000); // Delay until its close so the animation is broken\n                // While the menu is closing dont allow the hover to re-open it until its fully closed.\n                sideMenu.classList.add('pe-none');\n                setTimeout(function () { sideMenu.classList.remove('pe-none'); }, 1000);\n            }\n        });\n        // Mimic hover event on desktop so that we can control when classes are set and which order\n        sideMenu.addEventListener('mouseenter', (event) => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n                sideMenu.classList.add('hover');\n            }\n        });\n        sideMenu.addEventListener('mousemove', (event) => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n            }\n        });\n        sideMenu.addEventListener('mouseleave', (event) => {\n            if (window.innerWidth > 992) {\n                sideMenu.classList.remove('hover');\n                if (!sideMenu.classList.contains('open'))\n                    setTimeout(function () { sideMenuContent.classList.add('closed'); }, 1000); // Delay until its close so the animation is broken\n            }\n        });\n    }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","assetLocation","coreCSS","template","sideMenu","sideMenuContent","mainContent","button","event"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,uBACf,CAAC,EACD,MAAMA,UAA+B,WAAY,CAC7C,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,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkBpE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,MAAMC,EAAW,KAAK,WAAW,cAAc,YAAY,EACrDC,EAAkB,KAAK,WAAW,cAAc,oBAAoB,EACpEC,EAAc,KAAK,WAAW,cAAc,eAAe,EAC3DC,EAAS,KAAK,WAAW,cAAc,mBAAmB,EAE5D,KAAK,aAAa,UAAU,GAC5B,KAAK,WAAW,cAAc,SAAS,EAAE,mBAAmB,YAAa,YAAY,KAAK,aAAa,UAAU,KAAK,EAErH,KAAK,aAAa,YAAY,GAC/B,KAAK,aAAa,aAAc,eAAe,EACnDF,EAAgB,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,UAAU,EAC7GC,EAAY,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,UAAU,EACrG,KAAK,cAAc,iCAAiC,IACpD,KAAK,cAAc,iCAAiC,EAAE,UAAU,IAAI,IAAI,EACxE,KAAK,cAAc,iCAAiC,EAAE,UAAU,IAAI,qBAAqB,GAEzF,KAAK,aAAa,MAAM,IACxBF,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,EAAI,GAG7CA,EAAO,iBAAiB,QAAUC,GAAU,CACnCJ,EAAS,UAAU,SAAS,MAAM,GAQnCA,EAAS,UAAU,OAAO,MAAM,EAChCG,EAAO,gBAAgB,eAAe,EACtC,WAAW,UAAY,CAAEF,EAAgB,UAAU,IAAI,QAAQ,GAAM,GAAI,EAEzED,EAAS,UAAU,IAAI,SAAS,EAChC,WAAW,UAAY,CAAEA,EAAS,UAAU,OAAO,SAAS,GAAM,GAAI,IAZtEC,EAAgB,UAAU,OAAO,QAAQ,EACzC,WAAW,UAAY,CACnBD,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,EAAI,CAC5C,EAAE,GAAG,EAUtB,CAAS,EAEDH,EAAS,iBAAiB,aAAeI,GAAU,CAC3C,OAAO,WAAa,MACfJ,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAC7CD,EAAS,UAAU,IAAI,OAAO,EAE9C,CAAS,EACDA,EAAS,iBAAiB,YAAcI,GAAU,CAC1C,OAAO,WAAa,MACfJ,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAE7D,CAAS,EACDD,EAAS,iBAAiB,aAAeI,GAAU,CAC3C,OAAO,WAAa,MACpBJ,EAAS,UAAU,OAAO,OAAO,EAC5BA,EAAS,UAAU,SAAS,MAAM,GACnC,WAAW,UAAY,CAAEC,EAAgB,UAAU,IAAI,QAAQ,GAAM,GAAI,EAE7F,CAAS,CACJ,CACL"}
+{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"collapsible side menu\"\n});\nclass iamCollapsibleSideMenu 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/collapsible-side.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n      <div class=\"container\" part=\"container\">\n\n        <div class=\"side-menu\" part=\"side-menu\">\n          <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\n          <div class=\"side-menu-content closed\" part=\"side-menu-content\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n\n        <div class=\"main-content\" part=\"main-content\">\n          <slot></slot>\n        </div>\n\n      </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const sideMenu = this.shadowRoot.querySelector('.side-menu');\n        const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n        const mainContent = this.shadowRoot.querySelector('.main-content');\n        const button = this.shadowRoot.querySelector('.side-menu > .btn');\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css'))\n            this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n        // Set sde nav title\n        if (!this.hasAttribute('data-title'))\n            this.setAttribute('data-title', 'configuration');\n        sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        if (this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')) {\n            this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');\n            this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');\n        }\n        if (this.hasAttribute('open') && window.innerWidth > 992) {\n            sideMenu.classList.add('open');\n            button.setAttribute('aria-expanded', true);\n        }\n        // Open the menu\n        button.addEventListener('click', (event) => {\n            if (!sideMenu.classList.contains('open')) {\n                sideMenuContent.classList.remove('closed');\n                setTimeout(function () {\n                    sideMenu.classList.add('open');\n                    button.setAttribute('aria-expanded', true);\n                }, 100);\n            }\n            else {\n                sideMenu.classList.remove('open');\n                button.removeAttribute('aria-expanded');\n                setTimeout(function () { sideMenuContent.classList.add('closed'); }, 1000); // Delay until its close so the animation is broken\n                // While the menu is closing dont allow the hover to re-open it until its fully closed.\n                sideMenu.classList.add('pe-none');\n                setTimeout(function () { sideMenu.classList.remove('pe-none'); }, 1000);\n            }\n        });\n        // Mimic hover event on desktop so that we can control when classes are set and which order\n        sideMenu.addEventListener('mouseenter', (event) => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n                sideMenu.classList.add('hover');\n            }\n        });\n        sideMenu.addEventListener('mousemove', (event) => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n            }\n        });\n        sideMenu.addEventListener('mouseleave', (event) => {\n            if (window.innerWidth > 992) {\n                sideMenu.classList.remove('hover');\n                if (!sideMenu.classList.contains('open'))\n                    setTimeout(function () { sideMenuContent.classList.add('closed'); }, 1000); // Delay until its close so the animation is broken\n            }\n        });\n    }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","assetLocation","coreCSS","template","sideMenu","sideMenuContent","mainContent","button","event"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,uBACf,CAAC,EACD,MAAMA,UAA+B,WAAY,CAC7C,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,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkBpE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,MAAMC,EAAW,KAAK,WAAW,cAAc,YAAY,EACrDC,EAAkB,KAAK,WAAW,cAAc,oBAAoB,EACpEC,EAAc,KAAK,WAAW,cAAc,eAAe,EAC3DC,EAAS,KAAK,WAAW,cAAc,mBAAmB,EAE5D,KAAK,aAAa,UAAU,GAC5B,KAAK,WAAW,cAAc,SAAS,EAAE,mBAAmB,YAAa,YAAY,KAAK,aAAa,UAAU,KAAK,EAErH,KAAK,aAAa,YAAY,GAC/B,KAAK,aAAa,aAAc,eAAe,EACnDF,EAAgB,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,UAAU,EAC7GC,EAAY,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,UAAU,EACrG,KAAK,cAAc,iCAAiC,IACpD,KAAK,cAAc,iCAAiC,EAAE,UAAU,IAAI,IAAI,EACxE,KAAK,cAAc,iCAAiC,EAAE,UAAU,IAAI,qBAAqB,GAEzF,KAAK,aAAa,MAAM,GAAK,OAAO,WAAa,MACjDF,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,EAAI,GAG7CA,EAAO,iBAAiB,QAAUC,GAAU,CACnCJ,EAAS,UAAU,SAAS,MAAM,GAQnCA,EAAS,UAAU,OAAO,MAAM,EAChCG,EAAO,gBAAgB,eAAe,EACtC,WAAW,UAAY,CAAEF,EAAgB,UAAU,IAAI,QAAQ,GAAM,GAAI,EAEzED,EAAS,UAAU,IAAI,SAAS,EAChC,WAAW,UAAY,CAAEA,EAAS,UAAU,OAAO,SAAS,GAAM,GAAI,IAZtEC,EAAgB,UAAU,OAAO,QAAQ,EACzC,WAAW,UAAY,CACnBD,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,EAAI,CAC5C,EAAE,GAAG,EAUtB,CAAS,EAEDH,EAAS,iBAAiB,aAAeI,GAAU,CAC3C,OAAO,WAAa,MACfJ,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAC7CD,EAAS,UAAU,IAAI,OAAO,EAE9C,CAAS,EACDA,EAAS,iBAAiB,YAAcI,GAAU,CAC1C,OAAO,WAAa,MACfJ,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAE7D,CAAS,EACDD,EAAS,iBAAiB,aAAeI,GAAU,CAC3C,OAAO,WAAa,MACpBJ,EAAS,UAAU,OAAO,OAAO,EAC5BA,EAAS,UAAU,SAAS,MAAM,GACnC,WAAW,UAAY,CAAEC,EAAgB,UAAU,IAAI,QAAQ,GAAM,GAAI,EAE7F,CAAS,CACJ,CACL"}

package/assets/js/components/fileupload/fileupload.component.js

@@ -21,13 +21,15 @@ class iamFileupload extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="file-upload">
-      <span class="file-upload__title">Upload file</span>
+      <span class="file-upload__title" part="title">Upload file</span>
       <p class="helper-text"><slot name="helper"></slot></p>
-      <button class="btn btn-primary"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
+      <button class="btn btn-primary" type="button" part="button"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>
-      <div class="files"><slot name="files"></slot></div>
+      <div class="files" part="files"><slot name="files"></slot></div>
+      <span class="invalid-feedback ext">Some files did not match the accpeted extension type.</span>
+      <span class="invalid-feedback size">Some files Were too large to upload.</span>
     </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -41,5 +43,19 @@ class iamFileupload extends HTMLElement {
             helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;
         fileupload(this, wrapper);
     }
+    static get observedAttributes() {
+        return ["data-filename"];
+    }
+    attributeChangedCallback(attrName, oldVal, newVal) {
+        switch (attrName) {
+            case "data-filename": {
+                if (oldVal != newVal) {
+                    const filesWrapper = this.shadowRoot.querySelector('.files');
+                    filesWrapper.innerHTML = `<span class="file">${newVal} <button data-file="${newVal}">Remove</button></span>`;
+                }
+                break;
+            }
+        }
+    }
 }
 export default iamFileupload;

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

@@ -1,21 +1,23 @@
 /*!
-  * iamKey v5.6.1-beta2
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 iamproperty
-  */function g(r,i){const n=i.querySelector(".files"),l=i.querySelector(".drop-area"),t=r.querySelector("input"),f=r.hasAttribute("data-maxsize")?r.getAttribute("data-maxsize"):0,a=t.cloneNode();if(l.append(a),i.addEventListener("click",e=>{e&&e.target instanceof HTMLElement&&e.target.closest(".btn-primary")&&(e.target.closest(".btn-primary"),(t.hasAttribute("multiple")?a:t).click())}),i.addEventListener("click",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest(".files button")){const o=new DataTransfer,{files:c}=t,p=e.target.closest(".files button");for(let s=0;s<c.length;s++){const d=c[s];d.name!=p.getAttribute("data-file")&&o.items.add(d)}if(t.files=o.files,t.files.length==0){const s=new Event("empty");r.dispatchEvent(s)}const m=new Event("change");t.dispatchEvent(m)}}),a.addEventListener("change",e=>{if(t.hasAttribute("multiple")){const p=[...t.files,...a.files];let m=[];const s=new DataTransfer;for(let d=0;d<p.length;d++){const u=p[d],h=u.size/1e3;!m.includes(u.name)&&(f==0||h<f)&&s.items.add(u),m.push(u.name)}t.files=s.files}else t.files=a.files;const o=new Event("change");t.dispatchEvent(o);const c=new Event("elementChange");r.dispatchEvent(c)}),a.addEventListener("dragenter",e=>{a.classList.add("focus")}),a.addEventListener("dragleave",e=>{a.classList.remove("focus")}),a.addEventListener("drop",e=>{a.classList.remove("focus")}),t.addEventListener("change",e=>{n.innerHTML="";for(const o of t.files)n.innerHTML+=`<span class="file">${o.name} <button data-file="${o.name}">Remove</button></span>`}),r.hasAttribute("data-filename")){let e=r.getAttribute("data-filename");e&&(n.innerHTML+=`<span class="file">${e} <button data-file="${e}">Remove</button></span>`)}i.addEventListener("click",e=>{e&&e.target instanceof HTMLElement&&e.target.closest(".btn-primary")&&(e.target.closest(".btn-primary"),(t.hasAttribute("multiple")?a:t).click())})}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"fileupload"});class b extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",n=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,l=document.createElement("template");l.innerHTML=`
+  */function v(d,i){const o=i.querySelector(".files"),n=i.querySelector(".drop-area"),e=d.querySelector("input"),f=d.hasAttribute("data-maxsize")?d.getAttribute("data-maxsize"):0,u=i.querySelector(".invalid-feedback.size"),h=i.querySelector(".invalid-feedback.ext"),s=e.cloneNode();n.append(s);let b=function(t){if(!e.hasAttribute("accept"))return!0;const r=t.split(".").pop();return!!e.getAttribute("accept").includes(r)};if(i.addEventListener("click",t=>{t&&t.target instanceof HTMLElement&&t.target.closest(".btn-primary")&&(t.target.closest(".btn-primary"),h.classList.remove("d-block"),u.classList.remove("d-block"),(e.hasAttribute("multiple")?s:e).click())}),i.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest(".files button")){const r=new DataTransfer,{files:a}=e,m=t.target.closest(".files button");for(let p=0;p<a.length;p++){const l=a[p];l.name!=m.getAttribute("data-file")&&r.items.add(l)}e.files=r.files;const c=new Event("change");e.dispatchEvent(c)}}),s.addEventListener("change",t=>{if(e.hasAttribute("multiple")){const a=[...e.files,...s.files];let m=[];const c=new DataTransfer;for(let p=0;p<a.length;p++){const l=a[p],g=l.size/1e3;!m.includes(l.name)&&(f==0||g<f)&&b(l.name)&&c.items.add(l),b(l.name)||h.classList.add("d-block"),g>f&&u.classList.add("d-block"),m.push(l.name)}e.files=c.files}else e.files=s.files;const r=new Event("change");e.dispatchEvent(r)}),s.addEventListener("dragenter",t=>{s.classList.add("focus")}),s.addEventListener("dragleave",t=>{s.classList.remove("focus")}),s.addEventListener("drop",t=>{s.classList.remove("focus")}),e.addEventListener("change",t=>{if(e.files.length==1){let a=e.files[0];const m=a.size/1e3;if(!b(a.name)){h.classList.add("d-block");const c=new DataTransfer;e.files=c.files}if(m>f){u.classList.add("d-block");const c=new DataTransfer;e.files=c.files}}o.innerHTML="";for(const a of e.files)o.innerHTML+=`<span class="file" part="file">${a.name} <button data-file="${a.name}">Remove</button></span>`;const r=new CustomEvent("elementchange",{detail:{files:e.files}});if(d.dispatchEvent(r),e.files.length==0){const a=new CustomEvent("empty");d.dispatchEvent(a)}}),d.hasAttribute("data-filename")){let t=d.getAttribute("data-filename");t&&(o.innerHTML=`<span class="file">${t} <button data-file="${t}">Remove</button></span>`)}}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"fileupload"});class y extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",o=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,n=document.createElement("template");n.innerHTML=`
     <style>
-    @import "${n}";
-    .file-upload{max-width:25rem !important;padding-bottom:1rem}.file-upload .drop-area>input{display:none}.file-upload .file-upload__title{margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);line-height:2rem;color:var(--colour-heading);clear:both;display:block;padding-bottom:2rem;font-size:1.5rem;line-height:2rem;padding-bottom:2rem;max-width:var(--content-max-width)}.file-upload .helper-text{max-width:16.875rem}.files span{display:block;width:100%;padding:var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);border:2px solid var(--colour-primary-theme);appearance:none;border-radius:0.5rem;margin-bottom:1rem;color:var(--colour-primary);border-color:#d8d8d8;background:#d8d8d8;max-width:25rem !important;position:relative}@media screen and (prefers-color-scheme: dark){.files span{background:var(--colour-canvas-2);border-color:var(--colour-canvas-2);color:var(--colour-body)}}@media(forced-colors: active){.files span{padding-right:5rem}.files span button{padding:0;width:3.7rem !important;text-indent:0% !important}.files span button:after{display:none !important}}.files span button{position:absolute;top:calc(50% - 0.5625rem);right:0.875rem;z-index:var(--index-floating);text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0)}.files span button:after{content:"";top:0;left:0;position:absolute;display:block;height:1.125rem;width:1.125rem;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-close);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}:host(.fileupload--drag-drop) .file-upload{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .helper-text{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .drop-area>input{display:block;min-height:12.5rem;border:2px dashed var(--colour-primary-theme);color:rgba(0,0,0,0);position:relative;padding:1.5rem 2rem 1.5rem 2rem;user-select:none;max-width:100%;min-width:100%}:host(.fileupload--drag-drop) .file-upload .drop-area>input.focus{border:2px solid var(--colour-info)}:host(.fileupload--drag-drop) .file-upload .drop-area{position:relative}:host(.fileupload--drag-drop) .file-upload .drop-area::before{content:"Drag and drop files here or click to upload";position:absolute;inset:1.5rem 2rem 1.5rem 2rem;z-index:1;pointer-events:none}:host(.fileupload--drag-drop) .file-upload ::file-selector-button{position:absolute;inset:0;opacity:0}/*# sourceMappingURL=assets/css/components/fileupload.css.map */
+    @import "${o}";
+    .file-upload{max-width:25rem !important;padding-bottom:1rem}.file-upload .drop-area>input{display:none}.file-upload .file-upload__title{margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);line-height:2rem;color:var(--colour-heading);clear:both;display:block;padding-bottom:2rem;font-size:1.5rem;line-height:2rem;padding-bottom:2rem;max-width:var(--content-max-width)}.file-upload .helper-text{max-width:16.875rem}.files span{display:block;width:100%;padding:var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);border:2px solid var(--colour-primary-theme);appearance:none;border-radius:0.5rem;margin-bottom:1rem;color:var(--colour-primary);border-color:#d8d8d8;background:#d8d8d8;max-width:25rem !important;position:relative}@media(forced-colors: active){.files span{padding-right:5rem}.files span button{padding:0;width:3.7rem !important;text-indent:0% !important}.files span button:after{display:none !important}}.files span button{position:absolute;top:calc(50% - 0.5625rem);right:0.875rem;z-index:var(--index-floating);text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0)}.files span button:after{content:"";top:0;left:0;position:absolute;display:block;height:1.125rem;width:1.125rem;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-close);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}:host(.fileupload--drag-drop) .file-upload{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .helper-text{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .drop-area>input{display:block;min-height:12.5rem;border:2px dashed var(--colour-primary-theme);color:rgba(0,0,0,0);position:relative;padding:1.5rem 2rem 1.5rem 2rem;user-select:none;max-width:100%;min-width:100%;margin-bottom:1rem}:host(.fileupload--drag-drop) .file-upload .drop-area>input.focus{border:2px solid var(--colour-info)}:host(.fileupload--drag-drop) .file-upload .drop-area{position:relative}:host(.fileupload--drag-drop) .file-upload .drop-area::before{content:"Drag and drop files here or click to upload";position:absolute;inset:1.5rem 2rem 1.5rem 2rem;z-index:1;pointer-events:none}:host(.fileupload--drag-drop) .file-upload ::file-selector-button{position:absolute;inset:0;opacity:0}/*# sourceMappingURL=assets/css/components/fileupload.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
     <div class="file-upload">
-      <span class="file-upload__title">Upload file</span>
+      <span class="file-upload__title" part="title">Upload file</span>
       <p class="helper-text"><slot name="helper"></slot></p>
-      <button class="btn btn-primary"><slot name="btn"></slot> Upload ${this.hasAttribute("data-filetype")?this.getAttribute("data-filetype"):"file"}</button>
+      <button class="btn btn-primary" type="button" part="button"><slot name="btn"></slot> Upload ${this.hasAttribute("data-filetype")?this.getAttribute("data-filetype"):"file"}</button>
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>
-      <div class="files"><slot name="files"></slot></div>
+      <div class="files" part="files"><slot name="files"></slot></div>
+      <span class="invalid-feedback ext">Some files did not match the accpeted extension type.</span>
+      <span class="invalid-feedback size">Some files Were too large to upload.</span>
     </div>
-    `,this.shadowRoot.appendChild(l.content.cloneNode(!0))}connectedCallback(){this.innerHTML+='<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';const i=this.shadowRoot.querySelector(".file-upload"),n=this.querySelector("input"),l=this.shadowRoot.querySelector(".helper-text");this.querySelector('[slot="helper"]')||(l.innerHTML=`${this.hasAttribute("data-maxsize")?`Max file size is ${this.getAttribute("data-maxsize")}kb. `:""}${n.hasAttribute("accept")?`Supported file types are ${n.getAttribute("accept")}`:""}`),g(this,i)}}export{b as default};
+    `,this.shadowRoot.appendChild(n.content.cloneNode(!0))}connectedCallback(){this.innerHTML+='<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';const i=this.shadowRoot.querySelector(".file-upload"),o=this.querySelector("input"),n=this.shadowRoot.querySelector(".helper-text");this.querySelector('[slot="helper"]')||(n.innerHTML=`${this.hasAttribute("data-maxsize")?`Max file size is ${this.getAttribute("data-maxsize")}kb. `:""}${o.hasAttribute("accept")?`Supported file types are ${o.getAttribute("accept")}`:""}`),v(this,i)}static get observedAttributes(){return["data-filename"]}attributeChangedCallback(i,o,n){switch(i){case"data-filename":{if(o!=n){const e=this.shadowRoot.querySelector(".files");e.innerHTML=`<span class="file">${n} <button data-file="${n}">Remove</button></span>`}break}}}}export{y as default};
 //# sourceMappingURL=fileupload.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fileupload.component.min.js","sources":["../../modules/fileupload.js","fileupload.component.js"],"sourcesContent":["// @ts-nocheck\nfunction fileupload(fileupload, wrapper) {\n    const filesWrapper = wrapper.querySelector('.files');\n    const dropArea = wrapper.querySelector('.drop-area');\n    const input = fileupload.querySelector('input');\n    const maxSize = fileupload.hasAttribute('data-maxsize') ? fileupload.getAttribute('data-maxsize') : 0;\n    // We clone the input field to work as a buffer input field, this allows us to add new files without losing the old ones\n    const cloneInput = input.cloneNode();\n    dropArea.append(cloneInput);\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {\n            const button = event.target.closest('.btn-primary');\n            // If the input allows multiples then use the buffer clone input\n            const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;\n            inputTrigger.click();\n        }\n    });\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.files button')) {\n            const dt = new DataTransfer();\n            const { files } = input;\n            const button = event.target.closest('.files button');\n            for (let i = 0; i < files.length; i++) {\n                const file = files[i];\n                if (file.name != button.getAttribute('data-file'))\n                    dt.items.add(file); // here you exclude the file. thus removing it.\n            }\n            input.files = dt.files; // Assign the updates list\n            if (input.files.length == 0) {\n                const emptyEvent = new Event('empty');\n                fileupload.dispatchEvent(emptyEvent);\n            }\n            const changeEvent = new Event('change');\n            input.dispatchEvent(changeEvent);\n        }\n    });\n    // Buffer input change event\n    cloneInput.addEventListener('change', (event) => {\n        if (input.hasAttribute('multiple')) {\n            const filesArray = [...input.files, ...cloneInput.files];\n            let fileNames = [];\n            const dt = new DataTransfer();\n            for (let i = 0; i < filesArray.length; i++) {\n                const file = filesArray[i];\n                const size = file.size / 1000;\n                if (!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize))\n                    dt.items.add(file); // here you exclude the file. thus removing it.\n                fileNames.push(file.name);\n            }\n            input.files = dt.files;\n        }\n        else {\n            input.files = cloneInput.files;\n        }\n        const changeEvent = new Event('change');\n        input.dispatchEvent(changeEvent);\n        const elementChangeEvent = new Event('elementChange');\n        fileupload.dispatchEvent(elementChangeEvent);\n    });\n    cloneInput.addEventListener('dragenter', (event) => {\n        cloneInput.classList.add('focus');\n    });\n    cloneInput.addEventListener('dragleave', (event) => {\n        cloneInput.classList.remove('focus');\n    });\n    cloneInput.addEventListener('drop', (event) => {\n        cloneInput.classList.remove('focus');\n    });\n    input.addEventListener('change', (event) => {\n        // Reset\n        filesWrapper.innerHTML = '';\n        for (const file of input.files)\n            filesWrapper.innerHTML += `<span class=\"file\">${file.name} <button data-file=\"${file.name}\">Remove</button></span>`;\n    });\n    if (fileupload.hasAttribute('data-filename')) {\n        let filename = fileupload.getAttribute('data-filename');\n        if (filename)\n            filesWrapper.innerHTML += `<span class=\"file\">${filename} <button data-file=\"${filename}\">Remove</button></span>`;\n    }\n    // Change the filename\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {\n            const button = event.target.closest('.btn-primary');\n            // If the input allows multiples then use the buffer clone input\n            const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;\n            inputTrigger.click();\n        }\n    });\n}\nexport default fileupload;\n","// @ts-nocheck\nimport fileupload from \"../../modules/fileupload.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"fileupload\"\n});\nclass iamFileupload 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/fileupload.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    <div class=\"file-upload\">\n      <span class=\"file-upload__title\">Upload file</span>\n      <p class=\"helper-text\"><slot name=\"helper\"></slot></p>\n      <button class=\"btn btn-primary\"><slot name=\"btn\"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>\n      <div class=\"drop-area\"></div>\n      <hr/>\n      <slot></slot>\n      <div class=\"files\"><slot name=\"files\"></slot></div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.innerHTML += '<i class=\"fa-regular fa-arrow-up-from-bracket me-2\" aria-hidden=\"true\" slot=\"btn\"></i>';\n        const wrapper = this.shadowRoot.querySelector('.file-upload');\n        const input = this.querySelector('input');\n        const helperText = this.shadowRoot.querySelector('.helper-text');\n        if (!this.querySelector('[slot=\"helper\"]'))\n            helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;\n        fileupload(this, wrapper);\n    }\n}\nexport default iamFileupload;\n"],"names":["fileupload","wrapper","filesWrapper","dropArea","input","maxSize","cloneInput","event","dt","files","button","i","file","emptyEvent","changeEvent","filesArray","fileNames","size","elementChangeEvent","filename","iamFileupload","assetLocation","coreCSS","template","helperText"],"mappings":"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"}
+{"version":3,"file":"fileupload.component.min.js","sources":["../../modules/fileupload.js","fileupload.component.js"],"sourcesContent":["// @ts-nocheck\nfunction fileupload(fileupload, wrapper) {\n    const filesWrapper = wrapper.querySelector('.files');\n    const dropArea = wrapper.querySelector('.drop-area');\n    const input = fileupload.querySelector('input');\n    const maxSize = fileupload.hasAttribute('data-maxsize') ? fileupload.getAttribute('data-maxsize') : 0;\n    const errorMsgSize = wrapper.querySelector('.invalid-feedback.size');\n    const errorMsgExt = wrapper.querySelector('.invalid-feedback.ext');\n    // We clone the input field to work as a buffer input field, this allows us to add new files without losing the old ones\n    const cloneInput = input.cloneNode();\n    dropArea.append(cloneInput);\n    let checkFileExt = function (filename) {\n        if (!input.hasAttribute('accept'))\n            return true;\n        const nameExtension = filename.split('.').pop();\n        const acceptedTypes = input.getAttribute('accept');\n        if (acceptedTypes.includes(nameExtension))\n            return true;\n        return false;\n    };\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {\n            const button = event.target.closest('.btn-primary');\n            // If the input allows multiples then use the buffer clone input\n            errorMsgExt.classList.remove('d-block');\n            errorMsgSize.classList.remove('d-block');\n            const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;\n            inputTrigger.click();\n        }\n    });\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.files button')) {\n            const dt = new DataTransfer();\n            const { files } = input;\n            const button = event.target.closest('.files button');\n            for (let i = 0; i < files.length; i++) {\n                const file = files[i];\n                if (file.name != button.getAttribute('data-file'))\n                    dt.items.add(file); // here you exclude the file. thus removing it.\n            }\n            input.files = dt.files; // Assign the updates list\n            const changeEvent = new Event('change');\n            input.dispatchEvent(changeEvent);\n        }\n    });\n    // Buffer input change event\n    cloneInput.addEventListener('change', (event) => {\n        if (input.hasAttribute('multiple')) {\n            const filesArray = [...input.files, ...cloneInput.files];\n            let fileNames = [];\n            const dt = new DataTransfer();\n            for (let i = 0; i < filesArray.length; i++) {\n                const file = filesArray[i];\n                const size = file.size / 1000;\n                if (!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize) && checkFileExt(file.name))\n                    dt.items.add(file); // here you exclude the file. thus removing it.\n                if (!checkFileExt(file.name)) {\n                    errorMsgExt.classList.add('d-block');\n                }\n                if (size > maxSize) {\n                    errorMsgSize.classList.add('d-block');\n                }\n                fileNames.push(file.name);\n            }\n            input.files = dt.files;\n        }\n        else {\n            input.files = cloneInput.files;\n        }\n        const changeEvent = new Event('change');\n        input.dispatchEvent(changeEvent);\n    });\n    cloneInput.addEventListener('dragenter', (event) => {\n        cloneInput.classList.add('focus');\n    });\n    cloneInput.addEventListener('dragleave', (event) => {\n        cloneInput.classList.remove('focus');\n    });\n    cloneInput.addEventListener('drop', (event) => {\n        cloneInput.classList.remove('focus');\n    });\n    input.addEventListener('change', (event) => {\n        if (input.files.length == 1) {\n            let file = input.files[0];\n            const size = file.size / 1000;\n            if (!checkFileExt(file.name)) {\n                errorMsgExt.classList.add('d-block');\n                const dt = new DataTransfer();\n                input.files = dt.files;\n            }\n            if (size > maxSize) {\n                errorMsgSize.classList.add('d-block');\n                const dt = new DataTransfer();\n                input.files = dt.files;\n            }\n        }\n        // Reset\n        filesWrapper.innerHTML = '';\n        for (const file of input.files) {\n            filesWrapper.innerHTML += `<span class=\"file\" part=\"file\">${file.name} <button data-file=\"${file.name}\">Remove</button></span>`;\n        }\n        const elementChangeEvent = new CustomEvent('elementchange', { detail: { \"files\": input.files } });\n        fileupload.dispatchEvent(elementChangeEvent);\n        if (input.files.length == 0) {\n            const emptyEvent = new CustomEvent('empty');\n            fileupload.dispatchEvent(emptyEvent);\n        }\n    });\n    if (fileupload.hasAttribute('data-filename')) {\n        let filename = fileupload.getAttribute('data-filename');\n        if (filename)\n            filesWrapper.innerHTML = `<span class=\"file\">${filename} <button data-file=\"${filename}\">Remove</button></span>`;\n    }\n}\nexport default fileupload;\n","// @ts-nocheck\nimport fileupload from \"../../modules/fileupload.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"fileupload\"\n});\nclass iamFileupload 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/fileupload.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    <div class=\"file-upload\">\n      <span class=\"file-upload__title\" part=\"title\">Upload file</span>\n      <p class=\"helper-text\"><slot name=\"helper\"></slot></p>\n      <button class=\"btn btn-primary\" type=\"button\" part=\"button\"><slot name=\"btn\"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>\n      <div class=\"drop-area\"></div>\n      <hr/>\n      <slot></slot>\n      <div class=\"files\" part=\"files\"><slot name=\"files\"></slot></div>\n      <span class=\"invalid-feedback ext\">Some files did not match the accpeted extension type.</span>\n      <span class=\"invalid-feedback size\">Some files Were too large to upload.</span>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.innerHTML += '<i class=\"fa-regular fa-arrow-up-from-bracket me-2\" aria-hidden=\"true\" slot=\"btn\"></i>';\n        const wrapper = this.shadowRoot.querySelector('.file-upload');\n        const input = this.querySelector('input');\n        const helperText = this.shadowRoot.querySelector('.helper-text');\n        if (!this.querySelector('[slot=\"helper\"]'))\n            helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;\n        fileupload(this, wrapper);\n    }\n    static get observedAttributes() {\n        return [\"data-filename\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-filename\": {\n                if (oldVal != newVal) {\n                    const filesWrapper = this.shadowRoot.querySelector('.files');\n                    filesWrapper.innerHTML = `<span class=\"file\">${newVal} <button data-file=\"${newVal}\">Remove</button></span>`;\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamFileupload;\n"],"names":["fileupload","wrapper","filesWrapper","dropArea","input","maxSize","errorMsgSize","errorMsgExt","cloneInput","checkFileExt","filename","nameExtension","event","dt","files","button","i","file","changeEvent","filesArray","fileNames","size","elementChangeEvent","emptyEvent","iamFileupload","assetLocation","coreCSS","template","helperText","attrName","oldVal","newVal"],"mappings":";;;IACA,SAASA,EAAWA,EAAYC,EAAS,CACrC,MAAMC,EAAeD,EAAQ,cAAc,QAAQ,EAC7CE,EAAWF,EAAQ,cAAc,YAAY,EAC7CG,EAAQJ,EAAW,cAAc,OAAO,EACxCK,EAAUL,EAAW,aAAa,cAAc,EAAIA,EAAW,aAAa,cAAc,EAAI,EAC9FM,EAAeL,EAAQ,cAAc,wBAAwB,EAC7DM,EAAcN,EAAQ,cAAc,uBAAuB,EAE3DO,EAAaJ,EAAM,YACzBD,EAAS,OAAOK,CAAU,EAC1B,IAAIC,EAAe,SAAUC,EAAU,CACnC,GAAI,CAACN,EAAM,aAAa,QAAQ,EAC5B,MAAO,GACX,MAAMO,EAAgBD,EAAS,MAAM,GAAG,EAAE,IAAG,EAE7C,MAAI,EADkBN,EAAM,aAAa,QAAQ,EAC/B,SAASO,CAAa,CAGhD,EAyFI,GAxFAV,EAAQ,iBAAiB,QAAUW,GAAU,CACrCA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,cAAc,IACpEA,EAAM,OAAO,QAAQ,cAAc,EAElDL,EAAY,UAAU,OAAO,SAAS,EACtCD,EAAa,UAAU,OAAO,SAAS,GAClBF,EAAM,aAAa,UAAU,EAAII,EAAaJ,GACtD,MAAK,EAE9B,CAAK,EACDH,EAAQ,iBAAiB,QAAUW,GAAU,CACzC,GAAIA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,eAAe,EAAG,CACvF,MAAMC,EAAK,IAAI,aACT,CAAE,MAAAC,CAAO,EAAGV,EACZW,EAASH,EAAM,OAAO,QAAQ,eAAe,EACnD,QAASI,EAAI,EAAGA,EAAIF,EAAM,OAAQE,IAAK,CACnC,MAAMC,EAAOH,EAAME,CAAC,EAChBC,EAAK,MAAQF,EAAO,aAAa,WAAW,GAC5CF,EAAG,MAAM,IAAII,CAAI,EAEzBb,EAAM,MAAQS,EAAG,MACjB,MAAMK,EAAc,IAAI,MAAM,QAAQ,EACtCd,EAAM,cAAcc,CAAW,EAE3C,CAAK,EAEDV,EAAW,iBAAiB,SAAWI,GAAU,CAC7C,GAAIR,EAAM,aAAa,UAAU,EAAG,CAChC,MAAMe,EAAa,CAAC,GAAGf,EAAM,MAAO,GAAGI,EAAW,KAAK,EACvD,IAAIY,EAAY,CAAA,EAChB,MAAMP,EAAK,IAAI,aACf,QAASG,EAAI,EAAGA,EAAIG,EAAW,OAAQH,IAAK,CACxC,MAAMC,EAAOE,EAAWH,CAAC,EACnBK,EAAOJ,EAAK,KAAO,IACrB,CAACG,EAAU,SAASH,EAAK,IAAI,IAAMZ,GAAW,GAAKgB,EAAOhB,IAAYI,EAAaQ,EAAK,IAAI,GAC5FJ,EAAG,MAAM,IAAII,CAAI,EAChBR,EAAaQ,EAAK,IAAI,GACvBV,EAAY,UAAU,IAAI,SAAS,EAEnCc,EAAOhB,GACPC,EAAa,UAAU,IAAI,SAAS,EAExCc,EAAU,KAAKH,EAAK,IAAI,EAE5Bb,EAAM,MAAQS,EAAG,WAGjBT,EAAM,MAAQI,EAAW,MAE7B,MAAMU,EAAc,IAAI,MAAM,QAAQ,EACtCd,EAAM,cAAcc,CAAW,CACvC,CAAK,EACDV,EAAW,iBAAiB,YAAcI,GAAU,CAChDJ,EAAW,UAAU,IAAI,OAAO,CACxC,CAAK,EACDA,EAAW,iBAAiB,YAAcI,GAAU,CAChDJ,EAAW,UAAU,OAAO,OAAO,CAC3C,CAAK,EACDA,EAAW,iBAAiB,OAASI,GAAU,CAC3CJ,EAAW,UAAU,OAAO,OAAO,CAC3C,CAAK,EACDJ,EAAM,iBAAiB,SAAWQ,GAAU,CACxC,GAAIR,EAAM,MAAM,QAAU,EAAG,CACzB,IAAIa,EAAOb,EAAM,MAAM,CAAC,EACxB,MAAMiB,EAAOJ,EAAK,KAAO,IACzB,GAAI,CAACR,EAAaQ,EAAK,IAAI,EAAG,CAC1BV,EAAY,UAAU,IAAI,SAAS,EACnC,MAAMM,EAAK,IAAI,aACfT,EAAM,MAAQS,EAAG,MAErB,GAAIQ,EAAOhB,EAAS,CAChBC,EAAa,UAAU,IAAI,SAAS,EACpC,MAAMO,EAAK,IAAI,aACfT,EAAM,MAAQS,EAAG,OAIzBX,EAAa,UAAY,GACzB,UAAWe,KAAQb,EAAM,MACrBF,EAAa,WAAa,kCAAkCe,EAAK,2BAA2BA,EAAK,+BAErG,MAAMK,EAAqB,IAAI,YAAY,gBAAiB,CAAE,OAAQ,CAAE,MAASlB,EAAM,KAAO,CAAA,CAAE,EAEhG,GADAJ,EAAW,cAAcsB,CAAkB,EACvClB,EAAM,MAAM,QAAU,EAAG,CACzB,MAAMmB,EAAa,IAAI,YAAY,OAAO,EAC1CvB,EAAW,cAAcuB,CAAU,EAE/C,CAAK,EACGvB,EAAW,aAAa,eAAe,EAAG,CAC1C,IAAIU,EAAWV,EAAW,aAAa,eAAe,EAClDU,IACAR,EAAa,UAAY,sBAAsBQ,wBAA+BA,6BAE1F,CC9GA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,YACf,CAAC,EACD,MAAMc,UAAsB,WAAY,CACpC,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,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,oGAKwB,KAAK,aAAa,eAAe,EAAI,KAAK,aAAa,eAAe,EAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAStK,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,KAAK,WAAa,yFAClB,MAAM1B,EAAU,KAAK,WAAW,cAAc,cAAc,EACtDG,EAAQ,KAAK,cAAc,OAAO,EAClCwB,EAAa,KAAK,WAAW,cAAc,cAAc,EAC1D,KAAK,cAAc,iBAAiB,IACrCA,EAAW,UAAY,GAAG,KAAK,aAAa,cAAc,EAAI,oBAAoB,KAAK,aAAa,cAAc,QAAU,KAAKxB,EAAM,aAAa,QAAQ,EAAI,4BAA4BA,EAAM,aAAa,QAAQ,IAAM,MACjOJ,EAAW,KAAMC,CAAO,CAC3B,CACD,WAAW,oBAAqB,CAC5B,MAAO,CAAC,eAAe,CAC1B,CACD,yBAAyB4B,EAAUC,EAAQC,EAAQ,CAC/C,OAAQF,EAAQ,CACZ,IAAK,gBAAiB,CAClB,GAAIC,GAAUC,EAAQ,CAClB,MAAM7B,EAAe,KAAK,WAAW,cAAc,QAAQ,EAC3DA,EAAa,UAAY,sBAAsB6B,wBAA6BA,4BAEhF,KACH,CACJ,CACJ,CACL"}

package/assets/js/components/filterlist/filterlist.component.js

@@ -35,9 +35,9 @@ class iamFilterlist extends HTMLElement {
     <div class="form-control__wrapper">
       <label for="search" class="visually-hidden">Search</label>
       <span class="suffix" role="presentation"><slot name="icon"></slot></span>
-      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" />
+      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" part="search-input" />
     </div>
-    <div class="list__wrapper">
+    <div class="list__wrapper" part="wrapper">
       <slot></slot>
     </div>
     `;

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

@@ -1,7 +1,7 @@
 /*!
-  * iamKey v5.6.1-beta2
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 iamproperty
-  */function r(s,t){n(s,t)}function n(s,t){var e;t.addEventListener("keyup",a=>{clearTimeout(e),e=setTimeout(function(){o(s,t.value)},500)}),t.addEventListener("change",a=>{clearTimeout(e),o(s,t.value)})}const o=function(s,t){Array.from(s.querySelectorAll(":scope > li")).forEach((e,a)=>{let i=e.textContent.toLowerCase();e.classList.add("d-none"),i.includes(t.toLowerCase())&&e.classList.remove("d-none")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Filtered list",value:t})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"filterlist"});class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
+  */function i(s,t){n(s,t)}function n(s,t){var e;t.addEventListener("keyup",a=>{clearTimeout(e),e=setTimeout(function(){o(s,t.value)},500)}),t.addEventListener("change",a=>{clearTimeout(e),o(s,t.value)})}const o=function(s,t){Array.from(s.querySelectorAll(":scope > li")).forEach((e,a)=>{let r=e.textContent.toLowerCase();e.classList.add("d-none"),r.includes(t.toLowerCase())&&e.classList.remove("d-none")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Filtered list",value:t})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"filterlist"});class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
     <style>
     @import "${e}";
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
@@ -23,10 +23,10 @@
     <div class="form-control__wrapper">
       <label for="search" class="visually-hidden">Search</label>
       <span class="suffix" role="presentation"><slot name="icon"></slot></span>
-      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" />
+      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" part="search-input" />
     </div>
-    <div class="list__wrapper">
+    <div class="list__wrapper" part="wrapper">
       <slot></slot>
     </div>
-    `,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){let t=this.classList.toString();this.shadowRoot.querySelector(".list__wrapper").setAttribute("class",`list__wrapper ${t}`),this.querySelector("i.fa-search")||(this.innerHTML+='<i class="fa fa-light fa-search" aria-hidden="true" slot="icon"></i>'),r(this.querySelector("ul"),this.shadowRoot.querySelector("#search"))}}export{l as default};
+    `,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){let t=this.classList.toString();this.shadowRoot.querySelector(".list__wrapper").setAttribute("class",`list__wrapper ${t}`),this.querySelector("i.fa-search")||(this.innerHTML+='<i class="fa fa-light fa-search" aria-hidden="true" slot="icon"></i>'),i(this.querySelector("ul"),this.shadowRoot.querySelector("#search"))}}export{l as default};
 //# sourceMappingURL=filterlist.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filterlist.component.min.js","sources":["../../modules/filterlist.js","filterlist.component.js"],"sourcesContent":["// @ts-nocheck\nfunction filterlist(list, input) {\n    addFilterlistEventListeners(list, input);\n}\nfunction addFilterlistEventListeners(list, input) {\n    var timer;\n    input.addEventListener('keyup', (event) => {\n        clearTimeout(timer);\n        timer = setTimeout(function () {\n            filterTheList(list, input.value);\n        }, 500);\n    });\n    input.addEventListener('change', (event) => {\n        clearTimeout(timer);\n        filterTheList(list, input.value);\n    });\n}\nexport const filterTheList = function (list, searchTerm) {\n    Array.from(list.querySelectorAll(':scope > li')).forEach((item, index) => {\n        let content = item.textContent.toLowerCase();\n        item.classList.add('d-none');\n        if (content.includes(searchTerm.toLowerCase()))\n            item.classList.remove('d-none');\n    });\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        \"event\": \"Filtered list\",\n        \"value\": searchTerm\n    });\n};\nexport default filterlist;\n","// @ts-nocheck\nimport filterlist from \"../../modules/filterlist.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"filterlist\"\n});\nclass iamFilterlist 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 template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    :host {\n      margin-bottom: 1rem;\n      display:block;\n    }\n    :host(.mh-sm){\n      max-height: none!important;\n    }\n    :host(.mh-md){\n      max-height: none!important;\n    }\n    :host(.mh-lg){\n      max-height: none!important;\n    }\n    </style>\n    <div class=\"form-control__wrapper\">\n      <label for=\"search\" class=\"visually-hidden\">Search</label>\n      <span class=\"suffix\" role=\"presentation\"><slot name=\"icon\"></slot></span>\n      <input name=\"search\" id=\"search\" type=\"text\" class=\"form-control\" autocomplete=\"off\" placeholder=\"Search\" />\n    </div>\n    <div class=\"list__wrapper\">\n      <slot></slot>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        let classList = this.classList.toString();\n        this.shadowRoot.querySelector('.list__wrapper').setAttribute('class', `list__wrapper ${classList}`);\n        if (!this.querySelector('i.fa-search'))\n            this.innerHTML += '<i class=\"fa fa-light fa-search\" aria-hidden=\"true\" slot=\"icon\"></i>';\n        filterlist(this.querySelector('ul'), this.shadowRoot.querySelector('#search'));\n    }\n}\nexport default iamFilterlist;\n"],"names":["filterlist","list","input","addFilterlistEventListeners","timer","event","filterTheList","searchTerm","item","index","content","iamFilterlist","assetLocation","coreCSS","template","classList"],"mappings":";;;IACA,SAASA,EAAWC,EAAMC,EAAO,CAC7BC,EAA4BF,EAAMC,CAAK,CAC3C,CACA,SAASC,EAA4BF,EAAMC,EAAO,CAC9C,IAAIE,EACJF,EAAM,iBAAiB,QAAUG,GAAU,CACvC,aAAaD,CAAK,EAClBA,EAAQ,WAAW,UAAY,CAC3BE,EAAcL,EAAMC,EAAM,KAAK,CAClC,EAAE,GAAG,CACd,CAAK,EACDA,EAAM,iBAAiB,SAAWG,GAAU,CACxC,aAAaD,CAAK,EAClBE,EAAcL,EAAMC,EAAM,KAAK,CACvC,CAAK,CACL,CACO,MAAMI,EAAgB,SAAUL,EAAMM,EAAY,CACrD,MAAM,KAAKN,EAAK,iBAAiB,aAAa,CAAC,EAAE,QAAQ,CAACO,EAAMC,IAAU,CACtE,IAAIC,EAAUF,EAAK,YAAY,YAAW,EAC1CA,EAAK,UAAU,IAAI,QAAQ,EACvBE,EAAQ,SAASH,EAAW,YAAW,CAAE,GACzCC,EAAK,UAAU,OAAO,QAAQ,CAC1C,CAAK,EAED,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAS,gBACT,MAASD,CACjB,CAAK,CACL,EC3BA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,YACf,CAAC,EACD,MAAMI,UAAsB,WAAY,CACpC,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,qBACzGE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA,MACT,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyBpE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,IAAIC,EAAY,KAAK,UAAU,SAAQ,EACvC,KAAK,WAAW,cAAc,gBAAgB,EAAE,aAAa,QAAS,iBAAiBA,GAAW,EAC7F,KAAK,cAAc,aAAa,IACjC,KAAK,WAAa,wEACtBf,EAAW,KAAK,cAAc,IAAI,EAAG,KAAK,WAAW,cAAc,SAAS,CAAC,CAChF,CACL"}
+{"version":3,"file":"filterlist.component.min.js","sources":["../../modules/filterlist.js","filterlist.component.js"],"sourcesContent":["// @ts-nocheck\nfunction filterlist(list, input) {\n    addFilterlistEventListeners(list, input);\n}\nfunction addFilterlistEventListeners(list, input) {\n    var timer;\n    input.addEventListener('keyup', (event) => {\n        clearTimeout(timer);\n        timer = setTimeout(function () {\n            filterTheList(list, input.value);\n        }, 500);\n    });\n    input.addEventListener('change', (event) => {\n        clearTimeout(timer);\n        filterTheList(list, input.value);\n    });\n}\nexport const filterTheList = function (list, searchTerm) {\n    Array.from(list.querySelectorAll(':scope > li')).forEach((item, index) => {\n        let content = item.textContent.toLowerCase();\n        item.classList.add('d-none');\n        if (content.includes(searchTerm.toLowerCase()))\n            item.classList.remove('d-none');\n    });\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        \"event\": \"Filtered list\",\n        \"value\": searchTerm\n    });\n};\nexport default filterlist;\n","// @ts-nocheck\nimport filterlist from \"../../modules/filterlist.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"filterlist\"\n});\nclass iamFilterlist 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 template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    :host {\n      margin-bottom: 1rem;\n      display:block;\n    }\n    :host(.mh-sm){\n      max-height: none!important;\n    }\n    :host(.mh-md){\n      max-height: none!important;\n    }\n    :host(.mh-lg){\n      max-height: none!important;\n    }\n    </style>\n    <div class=\"form-control__wrapper\">\n      <label for=\"search\" class=\"visually-hidden\">Search</label>\n      <span class=\"suffix\" role=\"presentation\"><slot name=\"icon\"></slot></span>\n      <input name=\"search\" id=\"search\" type=\"text\" class=\"form-control\" autocomplete=\"off\" placeholder=\"Search\" part=\"search-input\" />\n    </div>\n    <div class=\"list__wrapper\" part=\"wrapper\">\n      <slot></slot>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        let classList = this.classList.toString();\n        this.shadowRoot.querySelector('.list__wrapper').setAttribute('class', `list__wrapper ${classList}`);\n        if (!this.querySelector('i.fa-search'))\n            this.innerHTML += '<i class=\"fa fa-light fa-search\" aria-hidden=\"true\" slot=\"icon\"></i>';\n        filterlist(this.querySelector('ul'), this.shadowRoot.querySelector('#search'));\n    }\n}\nexport default iamFilterlist;\n"],"names":["filterlist","list","input","addFilterlistEventListeners","timer","event","filterTheList","searchTerm","item","index","content","iamFilterlist","assetLocation","coreCSS","template","classList"],"mappings":";;;IACA,SAASA,EAAWC,EAAMC,EAAO,CAC7BC,EAA4BF,EAAMC,CAAK,CAC3C,CACA,SAASC,EAA4BF,EAAMC,EAAO,CAC9C,IAAIE,EACJF,EAAM,iBAAiB,QAAUG,GAAU,CACvC,aAAaD,CAAK,EAClBA,EAAQ,WAAW,UAAY,CAC3BE,EAAcL,EAAMC,EAAM,KAAK,CAClC,EAAE,GAAG,CACd,CAAK,EACDA,EAAM,iBAAiB,SAAWG,GAAU,CACxC,aAAaD,CAAK,EAClBE,EAAcL,EAAMC,EAAM,KAAK,CACvC,CAAK,CACL,CACO,MAAMI,EAAgB,SAAUL,EAAMM,EAAY,CACrD,MAAM,KAAKN,EAAK,iBAAiB,aAAa,CAAC,EAAE,QAAQ,CAACO,EAAMC,IAAU,CACtE,IAAIC,EAAUF,EAAK,YAAY,YAAW,EAC1CA,EAAK,UAAU,IAAI,QAAQ,EACvBE,EAAQ,SAASH,EAAW,YAAW,CAAE,GACzCC,EAAK,UAAU,OAAO,QAAQ,CAC1C,CAAK,EAED,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAS,gBACT,MAASD,CACjB,CAAK,CACL,EC3BA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,YACf,CAAC,EACD,MAAMI,UAAsB,WAAY,CACpC,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,qBACzGE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA,MACT,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyBpE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,IAAIC,EAAY,KAAK,UAAU,SAAQ,EACvC,KAAK,WAAW,cAAc,gBAAgB,EAAE,aAAa,QAAS,iBAAiBA,GAAW,EAC7F,KAAK,cAAc,aAAa,IACjC,KAAK,WAAa,wEACtBf,EAAW,KAAK,cAAc,IAAI,EAAG,KAAK,WAAW,cAAc,SAAS,CAAC,CAChF,CACL"}

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

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

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

@@ -21,10 +21,10 @@ class iamInlineEdit extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     
     <slot></slot>
-    <div class="btns">
-      <button class="btn btn-action" id="save"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel">Cancel</button>
+    <div class="btns" part="btns">
+      <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>
     </div>
-    <div class="status pe-none">
+    <div class="status pe-none" part="status">
       <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>
       <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>

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.6.1-beta2
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 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=`
     <style class="styles">
@@ -10,10 +10,10 @@
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     
     <slot></slot>
-    <div class="btns">
-      <button class="btn btn-action" id="save"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel">Cancel</button>
+    <div class="btns" part="btns">
+      <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>
     </div>
-    <div class="status pe-none">
+    <div class="status pe-none" part="status">
       <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>
       <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>

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\">\n      <button class=\"btn btn-action\" id=\"save\"><i class=\"fa-regular fa-save m-0\"></i> Save</button><button class=\"btn btn-action\" id=\"cancel\">Cancel</button>\n    </div>\n    <div class=\"status pe-none\">\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":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,aACf,CAAC,EACD,MAAMA,UAAsB,WAAY,CACpC,aAAc,CACV,QACA,MAAMC,EAAa,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EAC/CC,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;AAAA;AAAA;AAAA;AAAA;AAAA,MAePF,EAAW,YAAYG,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC1D,CACD,mBAAoB,CAChB,IAAIC,EAAa,KACbC,EAAa,KAAK,WAAW,cAAc,OAAO,EAClDC,EAAe,KAAK,WAAW,cAAc,SAAS,EAC9C,KAAK,cAAc,OAAO,EACtC,IAAIC,EAAQ,KAAK,cAAc,yBAAyB,EACpDC,EAAU,KAAK,cAAc,UAAU,EACvCC,EAAe,KAAK,WAAW,cAAc,SAAS,EACtDC,EAAc,KAAK,WAAW,cAAc,QAAQ,EACpDC,EAAiB,KAAK,WAAW,cAAc,WAAW,EAE1DC,EAAgBL,EAAM,MAE1BD,EAAa,iBAAiB,QAAUO,GAAU,CAC9CN,EAAM,MAAQK,EACdL,EAAM,KAAI,EACVH,EAAW,KAAI,EACfA,EAAW,UAAU,OAAO,eAAe,EAC3CO,EAAe,UAAU,IAAI,QAAQ,EACrC,MAAMG,EAAc,IAAI,YAAY,qBAAsB,CAAE,OAAQ,CAAE,KAAMP,EAAM,aAAa,MAAM,CAAC,CAAI,CAAA,EAC1GH,EAAW,cAAcU,CAAW,CAChD,CAAS,EAEDT,EAAW,iBAAiB,QAAUQ,GAAU,CAC5C,GAAIT,EAAW,cAAc,UAAU,EACnC,OAAAA,EAAW,UAAU,IAAI,eAAe,EACjC,GAEXQ,EAAgBL,EAAM,MAEtB,MAAMQ,EAAY,IAAI,YAAY,mBAAoB,CAAE,OAAQ,CAAE,KAAMR,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAO,CAAA,CAAE,EAC1HH,EAAW,cAAcW,CAAS,EAElCR,EAAM,SAAW,GACjBA,EAAM,KAAI,EACVH,EAAW,KAAI,EACfK,EAAa,UAAU,OAAO,QAAQ,EAClCD,IACA,QAAQ,IAAID,EAAM,KAAK,EACvBC,EAAQ,UAAYD,EAAM,MAE1C,CAAS,EAEGA,EAAM,UAAY,SAClBA,EAAM,iBAAiB,UAAYM,GAAU,CACzC,OAAQA,EAAM,IAAG,CACb,IAAK,QACDA,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpBR,EAAW,MAAK,EAChB,KACP,CACjB,CAAa,EAGLD,EAAW,iBAAiB,oBAAsBS,GAAU,CACxD,WAAW,IAAM,CACbJ,EAAa,UAAU,IAAI,QAAQ,EACnCC,EAAY,UAAU,OAAO,QAAQ,EACrC,MAAMM,EAAe,IAAI,YAAY,wBAAyB,CAAE,OAAQ,CAAE,KAAMT,EAAM,aAAa,MAAM,CAAC,CAAI,CAAA,EAC9GH,EAAW,cAAcY,CAAY,CACxC,EAAE,GAAG,EAEN,WAAW,IAAM,CACbT,EAAM,SAAW,GACjBH,EAAW,gBAAgB,aAAa,EACxCK,EAAa,UAAU,IAAI,QAAQ,EACnCC,EAAY,UAAU,IAAI,QAAQ,EAClCC,EAAe,UAAU,IAAI,QAAQ,CACxC,EAAE,GAAI,CACnB,CAAS,EAEGJ,EAAM,UAAY,UAClBA,EAAM,iBAAiB,SAAWM,GAAU,CACxCD,EAAgBL,EAAM,MACtB,MAAMQ,EAAY,IAAI,YAAY,mBAAoB,CAAE,OAAQ,CAAE,KAAMR,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAO,CAAA,CAAE,EAC1HH,EAAW,cAAcW,CAAS,EAClCX,EAAW,aAAa,cAAe,MAAM,EAC7CG,EAAM,SAAW,GACjBA,EAAM,KAAI,CAC1B,CAAa,EAEDA,EAAM,SAAW,UACjBA,EAAM,iBAAiB,QAAUM,GAAU,CACvCN,EAAM,OAAM,CAC5B,CAAa,EAGLA,EAAM,iBAAiB,OAASM,GAAU,CACtC,GAAIN,EAAM,OAASK,EACf,GAAIR,EAAW,aAAa,eAAe,EAAG,CAC1CQ,EAAgBL,EAAM,MACtB,MAAMQ,EAAY,IAAI,YAAY,uBAAwB,CAAE,OAAQ,CAAE,KAAMR,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAO,CAAA,CAAE,EAC9HH,EAAW,cAAcW,CAAS,EAClCN,EAAa,UAAU,OAAO,QAAQ,EAClCD,IACAA,EAAQ,UAAYD,EAAM,YAGxBH,EAAW,cAAc,kBAAkB,GACjDO,EAAe,UAAU,OAAO,QAAQ,CAG5D,CAAS,EAEDP,EAAW,iBAAiB,SAAWS,GAAU,CAC7C,GAAIA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,wBAAwB,EAAG,CAChG,IAAII,EAAY,GAChB,MAAM,KAAKb,EAAW,iBAAiB,sCAAsC,CAAC,EAAE,QAAQ,CAACc,EAAUC,IAAU,CACrGA,GAAS,IACTF,GAAa,MACjBA,GAAaC,EAAS,KAC1C,CAAiB,EACD,MAAMH,EAAY,IAAI,YAAY,mBAAoB,CAAE,OAAQ,CAAE,KAAMF,EAAM,OAAO,QAAQ,wBAAwB,EAAE,aAAa,MAAM,EAAG,MAAOI,CAAW,CAAA,CAAE,EACjKb,EAAW,cAAcW,CAAS,EAElD,CAAS,CACJ,CACL"}
+{"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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"}

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.6.1-beta2
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 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/multiselect/multiselect.component.js

@@ -24,9 +24,9 @@ class iamMultiselect extends HTMLElement {
     <div class="wrapper">
       
       <slot name="checked"></slot>
-      <input name="search" id="search" autocomplete="off" required />
+      <input name="search" id="search" autocomplete="off" required part="search-input"/>
       <span class="admin-panel feedback">This field is required</span>
-      <div class="admin-panel dropdown">
+      <div class="admin-panel dropdown" part="dropdown">
         <slot></slot>
       </div>
       <button id="clear"><span class="visually-hidden">Clear</span></button>
@@ -111,7 +111,8 @@ class iamMultiselect extends HTMLElement {
             Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label, index) => {
                 let checkbox = label.querySelector('input');
                 let searchValue = checkbox.value;
-                if (searchValue.toLowerCase().includes(search.value.toLowerCase())) {
+                let labelText = label.textContent;
+                if (searchValue.toLowerCase().includes(search.value.toLowerCase()) || labelText.toLowerCase().includes(search.value.toLowerCase())) {
                     label.removeAttribute('slot');
                 }
                 else {

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

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

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

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

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.6.1-beta2
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"nav"});class v extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),n=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${n}/css/core.min.css`,i=document.createElement("template");i.innerHTML=`
     <style class="styles">