@iamproperty/components 3.7.9 → 3.9.0-beta-1

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

@@ -0,0 +1,53 @@
+/*!
+  * iamKey v3.9.0-beta-1
+  * Copyright 2022-2023 iamproperty
+  */const v=function(a){typeof window.player<"u"&&typeof window.player.pauseVideo=="function"&&window.player.pauseVideo();var e=a.getAttribute("data-id"),n=a.getAttribute("id");if(typeof n>"u"||n==null){var c=String.fromCharCode(65+Math.floor(Math.random()*26));n=c+Date.now(),a.setAttribute("id",n)}function s(){window.player=new YT.Player(n,{height:"100%",width:"100%",videoId:e,playerVars:{modestbranding:1,playsinline:1,rel:0,showinfo:0},events:{onReady:t,onStateChange:i}})}s();function t(l){l.target.playVideo()}var o=!1;function i(l){if(l.data==YT.PlayerState.PLAYING&&!o){var h=document.getElementById(n);h.classList.add("player-ready"),o=!0}}},A=a=>(Array.from(a.querySelectorAll("dialog[open]")).forEach((e,n)=>{e.closest(".dialog__wrapper")||(e.removeAttribute("open"),e.showModal(),e.focus(),w(e))}),a.addEventListener("click",e=>{if(e.target.tagName=="IAM-ACTIONBAR")return!1;if(e&&e.target instanceof HTMLElement&&e.target.closest("[data-modal]")){const s=e.target.closest("[data-modal]"),t=s.hasAttribute("data-modal")?s.getAttribute("data-modal"):s.getAttribute("data-filter"),o=document.querySelector(`dialog#${t}`);w(o),o.showModal(),o.focus(),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openModal",id:t})}if(e&&e.target instanceof HTMLElement&&e.target.closest("button.dialog__close")){const s=e.target.closest("dialog[open]");e.preventDefault(),s.close(),Array.from(document.querySelectorAll(".dialog__wrapper > button")).forEach((t,o)=>{t.classList.remove("active")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:s.getAttribute("id")})}if(e&&e.target instanceof HTMLElement&&e.target.closest('button[formmethod="dialog"]')){const s=e.target.closest("dialog[open]");Array.from(document.querySelectorAll(".dialog__wrapper > button")).forEach((t,o)=>{t.classList.remove("active")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:s.getAttribute("id")})}if(e&&e.target instanceof HTMLElement&&e.target.closest("dialog[open]")){let s=e.target.closest("dialog[open]");var n=window.getComputedStyle(s);if(n.display==="contents"&&(s=s.parentNode.closest("dialog[open]")),!s.querySelector(":scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child")||s.classList.contains("dialog--multi")){const t=s.getBoundingClientRect();(e.clientX<t.left||e.clientX>t.right||e.clientY<t.top||e.clientY>t.bottom)&&(e.target.closest('input[type="radio"]')||s.close(),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:s.getAttribute("id")}))}}if(e&&e.target instanceof HTMLElement&&e.target.closest(".dialog__wrapper > button")){e.stopPropagation();let s=e.target.closest(".dialog__wrapper > button"),t=e.target.closest(".dialog__wrapper > button").parentNode,o="openPopover",i=t.querySelector(":scope > dialog");if(document.querySelector("*:not([data-keep-open]) > dialog[open]")&&document.querySelector("*:not([data-keep-open]) > dialog[open]")!=i&&document.querySelector("*:not([data-keep-open]) > dialog[open]").close(),Array.from(document.querySelectorAll(".dialog__wrapper > button")).forEach((r,f)=>{r.classList.remove("active")}),i.hasAttribute("open"))i.close(),o="closePopover",i.removeAttribute("style"),s.classList.remove("active");else{i.show(),s.classList.add("active");var c=s.getBoundingClientRect();let r=c.top,f=c.left;if(s.closest("iam-table")){let m=s.closest("iam-table").parentNode.getBoundingClientRect();r-=m.top,f-=m.left}i.classList.contains("dialog--fix")&&i.setAttribute("style",`position:fixed;top: ${r}px; left: ${f}px; margin: 3rem 0 0 0;`)}let l=i.getBoundingClientRect(),h=l.bottom-window.scrollY,u=window.innerHeight-window.scrollY;if(h>u){let r=i.hasAttribute("style")?i.getAttribute("style")+" ":"";i.setAttribute("style",r+"transform: translate(0, calc(-100% - 4rem))"),l=i.getBoundingClientRect(),l.top-window.scrollY<100&&i.removeAttribute("style")}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:o,id:s.textContent})}e&&e.target instanceof HTMLElement&&!e.target.closest("dialog[open]")&&!e.target.closest(".dialog__wrapper > button")&&(document.querySelector(".dialog__wrapper:not([data-keep-open]) > dialog[open]")&&document.querySelector(".dialog__wrapper:not([data-keep-open]) > dialog[open]").close(),Array.from(document.querySelectorAll(".dialog__wrapper:not([data-keep-open]) > button")).forEach((s,t)=>{s.classList.remove("active")}))}),null),w=a=>{a.querySelector(":scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child")&&!a.classList.contains("dialog--multi")&&a.addEventListener("cancel",n=>{n.preventDefault()});let e=a.querySelector(".youtube-embed a");if(e&&v(e),a.classList.contains("dialog--multi")&&!a.querySelector(":scope > .steps")&&L(a),!a.querySelector(":scope > .mh-lg")&&!a.classList.contains("dialog--multi")){a.innerHTML=`<div class="mh-lg">${a.innerHTML}</div>`;let n=a.querySelector(".mh-lg"),c=a.querySelector(".mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)");if(c){let s=c.previousSibling;n.before(c),s&&c.before(s)}}a.querySelector(":scope > button:first-child")||a.insertAdjacentHTML("afterbegin",'<button class="dialog__close">Close</button>')},L=a=>{let e="",n=Array.from(a.querySelectorAll("fieldset[data-title]"));n.forEach((t,o)=>{e+=`<button data-title="${t.getAttribute("data-title")}" type="button" class="${o==0?"active":""}" tabindex="-1">${t.getAttribute("data-title")}</button>`;const i=document.createElement("div");i.classList.add("btn--wrapper"),t.appendChild(i),o!=0&&(i.innerHTML+=`<button data-title="${n[o-1].getAttribute("data-title")}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`),o!=n.length-1&&(i.innerHTML+=`<button data-title="${n[o+1].getAttribute("data-title")}" class="btn btn-primary mb-0" data-next type="button">Next</button>`),o==n.length-1&&(i.innerHTML+=`<button data-title="${n[o].getAttribute("data-title")}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`)}),a.insertAdjacentHTML("afterbegin",`<div class="steps bg-primary">${e}</div>`);let c=Array.from(a.querySelectorAll("fieldset.was-validated"));for(let t=0;t<c.length;t++){let o=c[t],i=o.getAttribute("data-title");if(o.querySelector(".is-invalid")){Array.from(a.querySelectorAll(`[data-title="${i}"]`)).forEach((l,h)=>{l.classList.add("active")});break}else Array.from(a.querySelectorAll(`[data-title="${i}"]`)).forEach((l,h)=>{l.classList.add("valid")})}a.addEventListener("invalid",function(){return function(t){t.preventDefault()}}(),!0);function s(t){const o=a.querySelector("fieldset.active")?a.querySelector("fieldset.active"):a.querySelector("fieldset[data-title]"),i=o.getAttribute("data-title");let l=!0;if(o.classList.add("was-validated"),Array.from(o.querySelectorAll("input")).forEach((r,f)=>{r.checkValidity()||(l=!1)}),l?Array.from(a.querySelectorAll(`[data-title="${i}"]`)).forEach((r,f)=>{r.classList.add("valid")}):Array.from(a.querySelectorAll(`[data-title="${i}"]`)).forEach((r,f)=>{r.classList.remove("valid")}),l||!t.hasAttribute("data-next")){const r=a.querySelector(`fieldset[data-title="${t.getAttribute("data-title")}"]`),f=a.querySelector(`.steps button[data-title="${t.getAttribute("data-title")}"]`);Array.from(a.querySelectorAll("button")).forEach((m,p)=>{m.classList.remove("active")}),Array.from(a.querySelectorAll("fieldset")).forEach((m,p)=>{m.classList.remove("active")}),f.classList.add("active"),r.classList.add("active")}let h=Array.from(a.querySelectorAll("fieldset")).length,u=Array.from(a.querySelectorAll("fieldset.valid")).length;a.style.setProperty("--progress",`${u/(h-1)*100}%`)}a.addEventListener("keydown",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button")){const o=t.target.closest("button");t.keyCode==13&&(t.preventDefault(),s(o))}t&&t.target instanceof HTMLElement&&t.target.closest("input")&&t.target.closest("input").classList.remove("is-invalid")}),a.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button[data-title]")){const o=t.target.closest("button[data-title]");s(o)}return null})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"action bar"});function y(a,e){a&&e=="all"?(a.querySelector("input").indeterminate=!1,a.querySelector("input").checked=!0,a.querySelector("label").textContent="Select all"):a&&e==0?(a.querySelector("input").indeterminate=!1,a.querySelector("input").checked=!1,a.querySelector("label").textContent="Select all"):a&&e?(a.querySelector("input").indeterminate=!0,a.querySelector("input").checked=!1,a.querySelector("label").textContent=`${e} item${e>1?"s":""} selected`):a&&(a.querySelector("input").checked=!1,a.querySelector("input").indeterminate=!1,a.querySelector("label").textContent="Select all")}class S extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=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"):`${e}/css/core.min.css`,c=document.createElement("template");c.innerHTML=`
+    <style>
+    @import "${n}";
+    .actionbar__wrapper{position:relative;z-index:10;height:4.25rem;container-type:inline-size}.views,.selectall{position:absolute !important;top:50%;left:1.5rem;transform:translate(0, -50%);z-index:10}@media screen and (min-width: 36em){.views,.selectall{left:2rem}}.views .btn-action:not(:last-child),.selectall .btn-action:not(:last-child){margin-right:0.25rem !important}.selectall{width:2.5rem;overflow:hidden}.selectall label{height:2.5rem}@media screen and (min-width: 36em){.selectall{width:auto;overflow:visible}}.actionbar [data-search]{display:none}:host([data-search]) .actionbar [data-search]{display:block;margin-left:1rem !important}:is(.actionbar,.actionbar--selected,.actionbar--search){border-top-left-radius:0.625rem;border-top-right-radius:0.625rem;padding:0 1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center;height:4.25rem;position:absolute;inset:0}@container (width > 23.4375em){:is(.actionbar,.actionbar--selected,.actionbar--search){padding:0 2rem}}.actionbar{display:flex}.actionbar--selected{background-color:#e6eaec;display:flex;opacity:0;pointer-events:none}.actionbar--search{background-color:#e6eaec;display:flex;z-index:2;position:relative;opacity:0;pointer-events:none}.selectall:has(input:checked)~.actionbar,.selectall:has(input:indeterminate)~.actionbar{opacity:0;pointer-events:none}.selectall:has(input:checked)~.actionbar--selected,.selectall:has(input:indeterminate)~.actionbar--selected{opacity:1;pointer-events:all}.actionbar--search.show{opacity:1;pointer-events:all}.actionbar__wrapper:has(.actionbar--search.show)>*:not(.actionbar--search.show){opacity:0;pointer-events:none}::slotted(*:not([slot=overflow])){margin-top:0 !important;margin-bottom:0 !important;margin-left:1rem !important;margin-right:0 !important}::slotted(.btn:not(.btn-action)){order:2}::slotted([data-single]){pointer-events:none;opacity:.5}:host([data-selected="1"]) ::slotted([data-single]){pointer-events:all;opacity:1}::slotted(hr){height:2rem;color:#9d9d9d !important;width:1px;display:none}@container (width > 48em){::slotted(hr){display:block}}.safe-area{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;width:13.125rem;overflow:visible;position:relative}@container (width > 23.4375em){.safe-area{width:28.125rem}}@container (width > 48em){.safe-area{width:46.875rem}}.safe-area .body{display:contents}:host([data-switchviews]) .safe-area{width:9rem}::slotted(.btn-compact[slot=selected-overflow]),::slotted(.btn-compact[slot=overflow]){max-width:none !important;text-indent:0 !important;width:auto !important;text-align:left !important;padding-left:0 !important;background:none !important;border:none !important}::slotted(.btn-compact[slot=selected-overflow]):before,::slotted(.btn-compact[slot=overflow]):before{position:static !important;line-height:inherit !important}::slotted(.dialog__wrapper[slot=overflow]) dialog[open]{background:red}.dialog__wrapper.dialog-overflow{margin-left:.5rem;margin-right:-0.5rem}.actionbar--search .btn{margin-left:-0.75rem !important;margin-right:auto !important}.search-wrapper{width:calc(100% - 3.25rem);max-width:21.875rem !important;margin:0 !important}@container (width > 48em){.search-wrapper{max-width:28.125rem !important}}.search-wrapper input{padding-top:0.5rem;padding-bottom:0.5rem;min-height:2.5rem !important;max-height:2.5rem !important}.search-wrapper :is(.prefix,.suffix){padding:0.5rem !important;min-height:2.5rem !important;max-height:2.5rem !important;min-width:2.5rem !important;max-width:2.5rem !important;line-height:1.5rem !important}/*# sourceMappingURL=assets/css/components/actionbar.css.map */
+
+    ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="actionbar__wrapper">
+      <div class="actionbar">
+        <div class="safe-area">
+          <slot></slot>
+          <div class="body">
+            <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
+              <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
+              <dialog class="dialog--list">
+                <slot name="overflow"></slot>
+                <slot name="menu"></slot>
+              </dialog>
+            </div>
+            <button class="btn btn-secondary btn-compact btn-sm fa-search m-0" data-search="">Search</button>
+          </div>
+        </div>
+      </div>
+      <div class="actionbar--selected">
+        <div class="safe-area">
+          <slot name="selected"></slot>
+          <div class="body">
+            <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
+              <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
+              <dialog class="dialog--list">
+                <slot name="selected-overflow"></slot>
+              </dialog>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="actionbar--search">
+        <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
+
+        <div class="search-wrapper">
+          <label for="search" class="visually-hidden">Input field label</label>
+          <button class="suffix"><i class="fa-regular fa-search"></i></button>
+          <input type="text" id="search" name="search" required="">
+        </div>
+
+      </div>
+    </div>
+    `,this.shadowRoot.appendChild(c.content.cloneNode(!0))}connectedCallback(){let e=this;const n=this.shadowRoot.querySelector(".actionbar__wrapper");if(this.hasAttribute("data-selectall")){n.insertAdjacentHTML("afterbegin",'<div class="selectall pb-0"><input type="checkbox" name="selectall" id="selectall"><label for="selectall" class="m-0">Select all</label></div>');let t=this.shadowRoot.querySelector(".selectall");this.hasAttribute("data-selected")&&y(t,this.getAttribute("data-selected")),t.addEventListener("change",i=>{i&&i.target instanceof HTMLElement&&i.target.closest("input")&&(i.target.closest("input").checked?this.setAttribute("data-selected","all"):this.setAttribute("data-selected",0))});let o=this.querySelector("button[data-cancel]");o&&o.addEventListener("click",i=>{this.setAttribute("data-selected",0)})}if(this.hasAttribute("data-switchviews")){let t="";this.getAttribute("data-switchviews").split(",").forEach((l,h)=>{let u="fa-grid-2";l=="list"?u="fa-grip-lines":l=="small"&&(u="fa-bars"),t+=`<button class="btn btn-action btn-compact mb-0 fa-regular ${u}">${l}</button>`}),n.insertAdjacentHTML("afterbegin",`<div class="views m-0">${t}</div>`),this.shadowRoot.querySelector(".views").addEventListener("click",l=>{if(l&&l.target instanceof HTMLElement&&l.target.closest(".btn-action")){let h=l.target.closest(".btn-action");this.setAttribute("data-view",h.textContent);const u=new CustomEvent("switch-view",{detail:{view:h.textContent}});this.dispatchEvent(u)}})}const c=this.shadowRoot.querySelector(".actionbar--search");this.hasAttribute("data-search")&&this.getAttribute("data-search")=="show"&&c.classList.add("show"),this.shadowRoot.addEventListener("click",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("button[data-search]")&&c.classList.toggle("show")}),c.addEventListener("keyup",t=>{const o=new CustomEvent("search-keyup",{detail:{search:c.querySelector("input").value}});this.dispatchEvent(o)}),c.addEventListener("change",t=>{const o=new CustomEvent("search-change",{detail:{search:c.querySelector("input").value}});this.dispatchEvent(o)}),c.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button.suffix")){const o=new CustomEvent("search-submit",{detail:{search:c.querySelector("input").value}});this.dispatchEvent(o)}}),Array.from(this.shadowRoot.querySelectorAll(".body")).forEach((t,o)=>{A(t)});function s(){const t=n.scrollWidth,o=document.documentElement.scrollWidth;let i=750,l=16,h=e.hasAttribute("data-switchviews")?144:210,u=1;o>=992&&o<=1280?u=o/1280:o>=576&&o<=1280?u=o/768:o<576&&(u=o/375),t>=992&&t<=1280?i=i*u:t>=576&&t<=1280?i=450*u:t<576&&(i=h*u),l=l*u,t<576?Array.from(e.querySelectorAll(":scope > .btn:not(.js-updated)")).forEach((r,f)=>{r.className=r.className.replace(" btn-compact"," _btn-compact"),r.classList.add("btn-compact"),r.classList.add("js-updated")}):Array.from(e.querySelectorAll(":scope > .btn.js-updated")).forEach((r,f)=>{r.classList.remove("btn-compact"),r.classList.remove("js-updated"),r.className=r.className.replace(" _btn-compact"," btn-compact")}),Array.from(e.querySelectorAll("[slot]")).forEach((r,f)=>{r.getAttribute("slot")=="overflow"&&r.removeAttribute("slot"),r.getAttribute("slot")=="selected-overflow"&&r.setAttribute("slot","selected")}),Array.from(e.querySelectorAll(".show")).forEach((r,f)=>{r.classList.remove("show")}),Array.from(e.shadowRoot.querySelectorAll(".safe-area")).forEach((r,f)=>{let m="overflow";r.querySelector("slot").hasAttribute("name")&&r.querySelector("slot").getAttribute("name")=="selected"&&(m="selected-overflow");let p=r.querySelector("slot").assignedElements(),b=44*u;e.hasAttribute("data-search")&&(b+=44*u);for(let d=0;d<p.length;d++)!p[d].classList.contains("btn-action")&&!p[d].classList.contains("dialog__wrapper")&&(b+=p[d].offsetWidth,b+=l);for(let d=0;d<p.length;d++)if(p[d].classList.contains("dialog__wrapper")&&(p[d].classList.add("show"),b+=p[d].offsetWidth,b+=l/2,b-l/2>i)){p[d].classList.remove("show");break}for(let d=0;d<p.length;d++)if(p[d].classList.contains("btn-action")&&(p[d].classList.add("show"),b+=p[d].offsetWidth,b+=l/2,b-l/2>i)){p[d].classList.remove("show");break}let g=r.querySelector(".dialog-overflow");g&&g.classList.add("d-none");for(let d=0;d<p.length;d++)(p[d].classList.contains("btn-action")||p[d].classList.contains("dialog__wrapper"))&&(p[d].classList.contains("show")||(p[d].setAttribute("slot",m),g&&g.classList.remove("d-none")))})}s(),new ResizeObserver(s).observe(n)}static get observedAttributes(){return["data-selected"]}attributeChangedCallback(e,n,c){switch(e){case"data-selected":{let s=this.shadowRoot.querySelector(".selectall");s&&y(s,c);const t=new CustomEvent("selected",{detail:{selected:c}});this.dispatchEvent(t);break}}}}export{S as default};
+//# sourceMappingURL=actionbar.component.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actionbar.component.min.js","sources":["../../modules/youtubevideo.js","../../modules/dialogs.js","actionbar.component.js"],"sourcesContent":["// @ts-nocheck\n/**\n * Integrate YouTube videos as a way of hosting videos without the overhead and worry surrounding hosting vides. i.e. file sizes, performance and accessibility.\n */\nclass youtubeVideo {\n    /** @param {Element} embed dom element */\n    constructor(embed) {\n        // If the scripts is already loaded then lets just create the embed\n        if (document.body.classList.contains('youtubeLoaded')) {\n            embed.addEventListener('click', function (e) {\n                // loop parent nodes from the target to the delegation node\n                for (var target = e.target; target && target != this; target = target.parentNode) {\n                    if (target.matches('a')) {\n                        e.preventDefault();\n                        createEmbed(target);\n                        break;\n                    }\n                }\n            }, false);\n        }\n        else {\n            this.loadScripts(embed, this.createEmbed);\n        }\n    }\n    /**\n     * Load the YouTube scripts before trying to create the embed\n     * @param {HTMLElement} embed dom element\n     */\n    loadScripts(embed) {\n        return new Promise((resolve, reject) => {\n            const image = new Image();\n            image.onload = function () {\n                // This code loads the IFrame Player API code asynchronously.\n                var tag = document.createElement('script');\n                tag.src = \"https://www.youtube.com/iframe_api\";\n                var firstScriptTag = document.getElementsByTagName('script')[0];\n                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n                document.body.classList.add('youtubeLoaded');\n                resolve(true);\n                // script has loaded, you can now use it safely\n                tag.onload = () => {\n                    embed.addEventListener('click', function (event) {\n                        console.log('click');\n                        // loop parent nodes from the target to the delegation node\n                        if (event && event.target instanceof HTMLElement && event.target.closest('a')) {\n                            event.preventDefault();\n                            createEmbed(event.target.closest('a'));\n                        }\n                    }, false);\n                };\n            };\n            image.onerror = function () {\n                reject(false);\n            };\n            image.src = \"https://youtube.com/favicon.ico\";\n        });\n    }\n}\nexport const createEmbed = function (target) {\n    // If there is more than one video lets make sure there is only one playing at a time.\n    if (typeof window.player != \"undefined\" && typeof window.player.pauseVideo == \"function\")\n        window.player.pauseVideo();\n    var video_id = target.getAttribute('data-id');\n    var link_id = target.getAttribute('id');\n    // create an id to pass t the script if one isn't present\n    if (typeof link_id == 'undefined' || link_id == null) {\n        var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n        link_id = randLetter + Date.now();\n        target.setAttribute('id', link_id);\n    }\n    // This function creates an <iframe> (and YouTube player) after the API code downloads.\n    function onYouTubeIframeAPIReady() {\n        window.player = new YT.Player(link_id, {\n            height: '100%',\n            width: '100%',\n            videoId: video_id,\n            playerVars: {\n                'modestbranding': 1,\n                'playsinline': 1,\n                'rel': 0,\n                'showinfo': 0\n            },\n            events: {\n                'onReady': onPlayerReady,\n                'onStateChange': onPlayerStateChange\n            }\n        });\n    }\n    onYouTubeIframeAPIReady();\n    // The API will call this function when the video player is ready.\n    function onPlayerReady(event) {\n        // Play the video straight away\n        event.target.playVideo();\n    }\n    // The API calls this function when the player's state changes.\n    // The function indicates that when playing a video (state=1)\n    var done = false;\n    function onPlayerStateChange(event) {\n        if (event.data == YT.PlayerState.PLAYING && !done) {\n            var link = document.getElementById(link_id);\n            link.classList.add('player-ready');\n            done = true;\n        }\n    }\n};\nexport default youtubeVideo;\n","// @ts-nocheck\nimport { createEmbed } from \"./youtubevideo.js\";\nconst extendDialogs = (body) => {\n    Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {\n        let parent = dialog.closest('.dialog__wrapper');\n        if (!parent) {\n            dialog.removeAttribute('open');\n            dialog.showModal();\n            dialog.focus();\n            createDialog(dialog);\n        }\n    });\n    // Dialogs/modals\n    body.addEventListener('click', (event) => {\n        if (event.target.tagName == 'IAM-ACTIONBAR')\n            return false;\n        // Modal\n        if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')) {\n            const button = event.target.closest('[data-modal]');\n            const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');\n            const dialog = document.querySelector(`dialog#${modalID}`);\n            createDialog(dialog);\n            // Open the modal!\n            dialog.showModal();\n            dialog.focus();\n            window.dataLayer = window.dataLayer || [];\n            window.dataLayer.push({\n                \"event\": \"openModal\",\n                \"id\": modalID\n            });\n        }\n        ;\n        // Close modal\n        if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')) {\n            const dialog = event.target.closest('dialog[open]');\n            event.preventDefault();\n            dialog.close();\n            // Remove active class from exiting active buttons\n            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {\n                btnElement.classList.remove('active');\n            });\n            window.dataLayer = window.dataLayer || [];\n            window.dataLayer.push({\n                \"event\": \"closeModal\",\n                \"id\": dialog.getAttribute('id')\n            });\n        }\n        // Track default close buttons\n        if (event && event.target instanceof HTMLElement && event.target.closest('button[formmethod=\"dialog\"]')) {\n            const dialog = event.target.closest('dialog[open]');\n            // Remove active class from exiting active buttons\n            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {\n                btnElement.classList.remove('active');\n            });\n            window.dataLayer = window.dataLayer || [];\n            window.dataLayer.push({\n                \"event\": \"closeModal\",\n                \"id\": dialog.getAttribute('id')\n            });\n        }\n        // Close the modal when clicked on the backdrop\n        if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')) {\n            let dialog = event.target.closest('dialog[open]');\n            // Small fix to make sure the dialog isn't a dialog inside of a dialog.\n            var style = window.getComputedStyle(dialog);\n            if (style.display === 'contents')\n                dialog = dialog.parentNode.closest('dialog[open]');\n            // Dont allow the backdrop to be clicked when transactional\n            if (!dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') || dialog.classList.contains('dialog--multi')) {\n                const dialogDimensions = dialog.getBoundingClientRect();\n                if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {\n                    if (!event.target.closest('input[type=\"radio\"]')) // Weird bug when interacting with radio input fields within dialogs cuases it to close\n                        dialog.close();\n                    window.dataLayer = window.dataLayer || [];\n                    window.dataLayer.push({\n                        \"event\": \"closeModal\",\n                        \"id\": dialog.getAttribute('id')\n                    });\n                }\n            }\n        }\n        // Popover\n        if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')) {\n            event.stopPropagation();\n            let btn = event.target.closest('.dialog__wrapper > button');\n            let parent = event.target.closest('.dialog__wrapper > button').parentNode;\n            let dataEvent = \"openPopover\";\n            let popover = parent.querySelector(':scope > dialog');\n            if (document.querySelector('*:not([data-keep-open]) > dialog[open]') && document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover)\n                document.querySelector('*:not([data-keep-open]) > dialog[open]').close();\n            // Remove active class from exiting active buttons\n            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {\n                btnElement.classList.remove('active');\n            });\n            if (popover.hasAttribute('open')) {\n                popover.close();\n                dataEvent = \"closePopover\";\n                popover.removeAttribute('style');\n                btn.classList.remove('active');\n            }\n            else {\n                popover.show();\n                btn.classList.add('active');\n                var position = btn.getBoundingClientRect();\n                let topOffset = position.top;\n                let leftOffset = position.left;\n                if (btn.closest('iam-table')) {\n                    let container = btn.closest('iam-table').parentNode.getBoundingClientRect();\n                    topOffset -= container.top;\n                    leftOffset -= container.left;\n                }\n                if (popover.classList.contains('dialog--fix')) {\n                    popover.setAttribute('style', `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`);\n                }\n            }\n            // When the dialog is fixed it could dip under the viewport\n            // Lets check the dimensions and transform it to appear above\n            let boundingRec = popover.getBoundingClientRect();\n            let popoverBottom = boundingRec.bottom - window.scrollY;\n            let windowPos = window.innerHeight - window.scrollY;\n            if (popoverBottom > windowPos) {\n                let currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';\n                popover.setAttribute('style', currentStyle + `transform: translate(0, calc(-100% - 4rem))`);\n                // Check that the dialog doesn't go over the top of the page\n                boundingRec = popover.getBoundingClientRect();\n                let popoverTop = boundingRec.top - window.scrollY;\n                if (popoverTop < 100)\n                    popover.removeAttribute('style');\n            }\n            window.dataLayer = window.dataLayer || [];\n            window.dataLayer.push({\n                \"event\": dataEvent,\n                \"id\": btn.textContent\n            });\n        }\n        ;\n        // Close popovers when clicked away\n        if (event && event.target instanceof HTMLElement && !event.target.closest('dialog[open]') && !event.target.closest('.dialog__wrapper > button')) {\n            if (document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]'))\n                document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]').close();\n            Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach((btnElement, index) => {\n                btnElement.classList.remove('active');\n            });\n        }\n    });\n    return null;\n};\nexport const createDialog = (dialog) => {\n    // Prevent the user from escaping the model when transactional\n    if (dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') && !dialog.classList.contains('dialog--multi')) {\n        dialog.addEventListener(\"cancel\", (e) => {\n            e.preventDefault();\n        });\n    }\n    // Create the video embed\n    let videoButton = dialog.querySelector('.youtube-embed a');\n    if (videoButton) {\n        createEmbed(videoButton);\n    }\n    // Multi dialog\n    if (dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {\n        createMultiFormDialog(dialog);\n    }\n    // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog\n    if (!dialog.querySelector(':scope > .mh-lg') && !dialog.classList.contains('dialog--multi')) {\n        dialog.innerHTML = `<div class=\"mh-lg\">${dialog.innerHTML}</div>`;\n        let dialogContent = dialog.querySelector('.mh-lg');\n        let titleElement = dialog.querySelector('.mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)');\n        if (titleElement) {\n            let optionalElement = titleElement.previousSibling;\n            dialogContent.before(titleElement);\n            if (optionalElement)\n                titleElement.before(optionalElement);\n        }\n    }\n    // Create close button is needed\n    if (!dialog.querySelector(':scope > button:first-child'))\n        dialog.insertAdjacentHTML('afterbegin', `<button class=\"dialog__close\">Close</button>`);\n};\nexport const createMultiFormDialog = (dialog) => {\n    let buttons = \"\";\n    let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));\n    fieldsets.forEach((fieldset, index) => {\n        buttons += `<button data-title=\"${fieldset.getAttribute('data-title')}\" type=\"button\" class=\"${index == 0 ? \"active\" : \"\"}\" tabindex=\"-1\">${fieldset.getAttribute('data-title')}</button>`;\n        const btnWrapper = document.createElement(\"div\");\n        btnWrapper.classList.add('btn--wrapper');\n        fieldset.appendChild(btnWrapper);\n        if (index != 0)\n            btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index - 1].getAttribute('data-title')}\" class=\"btn btn-secondary mb-0\" data-previous type=\"button\">Previous</button>`;\n        if (index != fieldsets.length - 1)\n            btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index + 1].getAttribute('data-title')}\" class=\"btn btn-primary mb-0\" data-next type=\"button\">Next</button>`;\n        if (index == fieldsets.length - 1)\n            btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index].getAttribute('data-title')}\" class=\"btn btn-primary mb-0\" data-next type=\"submit\">Submit</button>`;\n    });\n    dialog.insertAdjacentHTML('afterbegin', `<div class=\"steps bg-primary\">${buttons}</div>`);\n    // Open the fieldset with an error inside\n    let validatedFieldsets = Array.from(dialog.querySelectorAll('fieldset.was-validated'));\n    for (let i = 0; i < validatedFieldsets.length; i++) {\n        let fieldset = validatedFieldsets[i];\n        let fieldsetID = fieldset.getAttribute('data-title');\n        if (fieldset.querySelector('.is-invalid')) {\n            Array.from(dialog.querySelectorAll(`[data-title=\"${fieldsetID}\"]`)).forEach((element, index) => {\n                element.classList.add('active');\n            });\n            break;\n        }\n        else {\n            Array.from(dialog.querySelectorAll(`[data-title=\"${fieldsetID}\"]`)).forEach((element, index) => {\n                element.classList.add('valid');\n            });\n        }\n    }\n    // Prevent the bubble messages\n    dialog.addEventListener('invalid', (function () {\n        return function (e) {\n            e.preventDefault();\n        };\n    })(), true);\n    function validateFieldset(button) {\n        const currentFieldset = dialog.querySelector(`fieldset.active`) ? dialog.querySelector(`fieldset.active`) : dialog.querySelector(`fieldset[data-title]`);\n        const currentFieldsetID = currentFieldset.getAttribute('data-title');\n        let isFieldsetValid = true;\n        currentFieldset.classList.add('was-validated');\n        Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {\n            if (!input.checkValidity())\n                isFieldsetValid = false;\n        });\n        // If valid mode to next field set\n        if (!isFieldsetValid) {\n            Array.from(dialog.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element, index) => {\n                element.classList.remove('valid');\n            });\n        }\n        else {\n            Array.from(dialog.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element, index) => {\n                element.classList.add('valid');\n            });\n        }\n        // Allow the previous button to navigate\n        if (isFieldsetValid || !button.hasAttribute('data-next')) {\n            const fieldset = dialog.querySelector(`fieldset[data-title=\"${button.getAttribute('data-title')}\"]`);\n            const step = dialog.querySelector(`.steps button[data-title=\"${button.getAttribute('data-title')}\"]`);\n            Array.from(dialog.querySelectorAll('button')).forEach((button, index) => {\n                button.classList.remove('active');\n            });\n            Array.from(dialog.querySelectorAll('fieldset')).forEach((button, index) => {\n                button.classList.remove('active');\n            });\n            step.classList.add('active');\n            fieldset.classList.add('active');\n        }\n        let fieldsetCount = Array.from(dialog.querySelectorAll(`fieldset`)).length;\n        let validFieldsetCount = Array.from(dialog.querySelectorAll(`fieldset.valid`)).length;\n        // update the progress bar\n        dialog.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1) * 100)}%`);\n    }\n    // remove error messages from server\n    dialog.addEventListener('keydown', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('button')) {\n            const button = event.target.closest('button');\n            if (event.keyCode == 13) {\n                event.preventDefault();\n                validateFieldset(button);\n            }\n        }\n        if (event && event.target instanceof HTMLElement && event.target.closest('input')) {\n            const input = event.target.closest('input');\n            input.classList.remove('is-invalid');\n        }\n    });\n    dialog.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {\n            const button = event.target.closest('button[data-title]');\n            validateFieldset(button);\n        }\n        ;\n        return null;\n    });\n};\nexport default extendDialogs;\n","// @ts-nocheck\nimport extendDialogs from \"../../modules/dialogs.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"action bar\"\n});\nfunction setSelectAllInput(element, value) {\n    if (element && value == \"all\") {\n        element.querySelector('input').indeterminate = false;\n        element.querySelector('input').checked = true;\n        element.querySelector('label').textContent = `Select all`;\n    }\n    else if (element && value == 0) {\n        element.querySelector('input').indeterminate = false;\n        element.querySelector('input').checked = false;\n        element.querySelector('label').textContent = `Select all`;\n    }\n    else if (element && value) {\n        element.querySelector('input').indeterminate = true;\n        element.querySelector('input').checked = false;\n        element.querySelector('label').textContent = `${value} item${value > 1 ? 's' : ''} selected`;\n    }\n    else if (element) {\n        element.querySelector('input').checked = false;\n        element.querySelector('input').indeterminate = false;\n        element.querySelector('label').textContent = `Select all`;\n    }\n}\nclass iamActionbar 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/actionbar.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    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n    <div class=\"actionbar__wrapper\">\n      <div class=\"actionbar\">\n        <div class=\"safe-area\">\n          <slot></slot>\n          <div class=\"body\">\n            <div class=\"dialog__wrapper dialog__wrapper--right dialog-overflow d-none show\">\n              <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical m-0\">More actions</button>\n              <dialog class=\"dialog--list\">\n                <slot name=\"overflow\"></slot>\n                <slot name=\"menu\"></slot>\n              </dialog>\n            </div>\n            <button class=\"btn btn-secondary btn-compact btn-sm fa-search m-0\" data-search=\"\">Search</button>\n          </div>\n        </div>\n      </div>\n      <div class=\"actionbar--selected\">\n        <div class=\"safe-area\">\n          <slot name=\"selected\"></slot>\n          <div class=\"body\">\n            <div class=\"dialog__wrapper dialog__wrapper--right dialog-overflow d-none show\">\n              <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical m-0\">More actions</button>\n              <dialog class=\"dialog--list\">\n                <slot name=\"selected-overflow\"></slot>\n              </dialog>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"actionbar--search\">\n        <button data-search class=\"btn btn-compact fa-xmark-large btn-secondary m-0\" >Close</button>\n\n        <div class=\"search-wrapper\">\n          <label for=\"search\" class=\"visually-hidden\">Input field label</label>\n          <button class=\"suffix\"><i class=\"fa-regular fa-search\"></i></button>\n          <input type=\"text\" id=\"search\" name=\"search\" required=\"\">\n        </div>\n\n      </div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        let that = this;\n        const actionbarWrapper = this.shadowRoot.querySelector('.actionbar__wrapper');\n        // #region select all\n        if (this.hasAttribute('data-selectall')) {\n            actionbarWrapper.insertAdjacentHTML('afterbegin', `<div class=\"selectall pb-0\"><input type=\"checkbox\" name=\"selectall\" id=\"selectall\"><label for=\"selectall\" class=\"m-0\">Select all</label></div>`);\n            let selectAll = this.shadowRoot.querySelector('.selectall');\n            if (this.hasAttribute('data-selected')) {\n                setSelectAllInput(selectAll, this.getAttribute('data-selected'));\n            }\n            selectAll.addEventListener('change', (event) => {\n                if (event && event.target instanceof HTMLElement && event.target.closest('input')) {\n                    if (event.target.closest('input').checked)\n                        this.setAttribute('data-selected', 'all');\n                    else\n                        this.setAttribute('data-selected', 0);\n                }\n            });\n            let cancelButton = this.querySelector('button[data-cancel]');\n            if (cancelButton) {\n                cancelButton.addEventListener('click', (event) => {\n                    this.setAttribute('data-selected', 0);\n                });\n            }\n        }\n        // #endregion\n        // #region switchviews\n        if (this.hasAttribute('data-switchviews')) {\n            let btns = '';\n            let viewList = this.getAttribute('data-switchviews').split(',');\n            viewList.forEach((view, index) => {\n                let icon = 'fa-grid-2';\n                if (view == \"list\")\n                    icon = 'fa-grip-lines';\n                else if (view == \"small\")\n                    icon = 'fa-bars';\n                btns += `<button class=\"btn btn-action btn-compact mb-0 fa-regular ${icon}\">${view}</button>`;\n            });\n            actionbarWrapper.insertAdjacentHTML('afterbegin', `<div class=\"views m-0\">${btns}</div>`);\n            let views = this.shadowRoot.querySelector('.views');\n            views.addEventListener('click', (event) => {\n                if (event && event.target instanceof HTMLElement && event.target.closest('.btn-action')) {\n                    let btn = event.target.closest('.btn-action');\n                    this.setAttribute('data-view', btn.textContent);\n                    const switchEvent = new CustomEvent(\"switch-view\", { detail: { view: btn.textContent } });\n                    this.dispatchEvent(switchEvent);\n                }\n            });\n        }\n        // #endregion\n        // #region search\n        const searchBar = this.shadowRoot.querySelector('.actionbar--search');\n        if (this.hasAttribute('data-search') && this.getAttribute('data-search') == 'show')\n            searchBar.classList.add('show');\n        this.shadowRoot.addEventListener('click', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('button[data-search]')) {\n                searchBar.classList.toggle('show');\n            }\n        });\n        searchBar.addEventListener('keyup', (event) => {\n            const keyupEvent = new CustomEvent(\"search-keyup\", { detail: { search: searchBar.querySelector('input').value } });\n            this.dispatchEvent(keyupEvent);\n        });\n        searchBar.addEventListener('change', (event) => {\n            const changeEvent = new CustomEvent(\"search-change\", { detail: { search: searchBar.querySelector('input').value } });\n            this.dispatchEvent(changeEvent);\n        });\n        searchBar.addEventListener('click', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('button.suffix')) {\n                const submitEvent = new CustomEvent(\"search-submit\", { detail: { search: searchBar.querySelector('input').value } });\n                this.dispatchEvent(submitEvent);\n            }\n        });\n        // #endregion\n        // Make sure dialogs created in the shadow dom work\n        Array.from(this.shadowRoot.querySelectorAll('.body')).forEach((element, index) => {\n            extendDialogs(element);\n        });\n        // #region Reponsive safe area\n        function hideButtons() {\n            const wrapperWidth = actionbarWrapper.scrollWidth;\n            const screenWidth = document.documentElement.scrollWidth;\n            let safeAreaWidth = 750;\n            let elementMargin = 16;\n            let mobileSafeWidth = that.hasAttribute('data-switchviews') ? 144 : 210;\n            // We need to modify the widths to mimic the CSS's scaling functionality\n            let modifier = 1;\n            if (screenWidth >= 992 && screenWidth <= 1280) {\n                modifier = screenWidth / 1280;\n            }\n            else if (screenWidth >= 576 && screenWidth <= 1280) {\n                modifier = screenWidth / 768;\n            }\n            else if (screenWidth < 576) {\n                modifier = screenWidth / 375;\n            }\n            // Work out the safe sapce width depending upon the wrappers width and modifier \n            if (wrapperWidth >= 992 && wrapperWidth <= 1280) {\n                safeAreaWidth = safeAreaWidth * modifier;\n            }\n            else if (wrapperWidth >= 576 && wrapperWidth <= 1280) {\n                safeAreaWidth = 450 * modifier;\n            }\n            else if (wrapperWidth < 576) {\n                safeAreaWidth = mobileSafeWidth * modifier;\n            }\n            // Margin in between elements\n            elementMargin = elementMargin * modifier;\n            // If the wrapper width is small we want to reduce the btn sizes by adding or removing btn-compact classes\n            if (wrapperWidth < 576) {\n                Array.from(that.querySelectorAll(':scope > .btn:not(.js-updated)')).forEach((element, index) => {\n                    element.className = element.className.replace(' btn-compact', ' _btn-compact');\n                    element.classList.add('btn-compact');\n                    element.classList.add('js-updated');\n                });\n            }\n            else {\n                Array.from(that.querySelectorAll(':scope > .btn.js-updated')).forEach((element, index) => {\n                    element.classList.remove('btn-compact');\n                    element.classList.remove('js-updated');\n                    element.className = element.className.replace(' _btn-compact', ' btn-compact');\n                });\n            }\n            // Reset the elements before we decide what elements become slotted into the overflow\n            Array.from(that.querySelectorAll('[slot]')).forEach((element, index) => {\n                if (element.getAttribute(\"slot\") == \"overflow\")\n                    element.removeAttribute('slot');\n                if (element.getAttribute(\"slot\") == \"selected-overflow\")\n                    element.setAttribute('slot', 'selected');\n            });\n            Array.from(that.querySelectorAll('.show')).forEach((element, index) => {\n                element.classList.remove('show');\n            });\n            // Foreach safe area lets check what elements are slotted in them and if they need an overflow\n            Array.from(that.shadowRoot.querySelectorAll('.safe-area')).forEach((element, index) => {\n                // Decide on which overflow slot to use\n                let overflowSlot = \"overflow\";\n                if (element.querySelector('slot').hasAttribute('name') && element.querySelector('slot').getAttribute('name') == \"selected\")\n                    overflowSlot = \"selected-overflow\";\n                // Get the slotted elements, remember they aren't children of the safe area\n                let elements = element.querySelector('slot').assignedElements();\n                let tempWidth = 44 * modifier; // Allow space for the overflow button\n                // If search then allow for the search button width\n                if (that.hasAttribute('data-search'))\n                    tempWidth += 44 * modifier;\n                // Foreach element that isn't an action button or dialog wrapper add to the width, these will not be moved into the overflow slot\n                for (let i = 0; i < elements.length; i++) {\n                    if (!elements[i].classList.contains('btn-action') && !elements[i].classList.contains('dialog__wrapper')) {\n                        tempWidth += elements[i].offsetWidth;\n                        tempWidth += elementMargin;\n                    }\n                }\n                // Foreach dialog wrapper decide if safe in safe area or move into the overflow slot, dialog wrappers have priority over the action buttons\n                for (let i = 0; i < elements.length; i++) {\n                    if (elements[i].classList.contains('dialog__wrapper')) {\n                        elements[i].classList.add('show');\n                        tempWidth += elements[i].offsetWidth;\n                        tempWidth += (elementMargin / 2);\n                        // If we have exceeded the safe area then lets break the loop\n                        if (tempWidth - (elementMargin / 2) > safeAreaWidth) {\n                            elements[i].classList.remove('show');\n                            break;\n                        }\n                    }\n                }\n                // Foreach action button \n                for (let i = 0; i < elements.length; i++) {\n                    if (elements[i].classList.contains('btn-action')) {\n                        elements[i].classList.add('show');\n                        tempWidth += elements[i].offsetWidth;\n                        tempWidth += (elementMargin / 2);\n                        // If we have exceeded the safe area then lets break the loop\n                        if (tempWidth - (elementMargin / 2) > safeAreaWidth) {\n                            elements[i].classList.remove('show');\n                            break;\n                        }\n                    }\n                }\n                let overflowDialog = element.querySelector('.dialog-overflow');\n                if (overflowDialog)\n                    overflowDialog.classList.add('d-none');\n                // Decide which elements go into the overflow slot\n                for (let i = 0; i < elements.length; i++) {\n                    if (elements[i].classList.contains('btn-action') || elements[i].classList.contains('dialog__wrapper')) {\n                        if (!elements[i].classList.contains('show')) {\n                            // Move to the slot by changing the attribute\n                            elements[i].setAttribute('slot', overflowSlot);\n                            // if an element has been added to overflow slot then make sure we show the overflow menu button\n                            if (overflowDialog)\n                                overflowDialog.classList.remove('d-none');\n                        }\n                    }\n                }\n            });\n        }\n        // Check buttons on load and when the wrapper element gets resized.\n        hideButtons();\n        new ResizeObserver(hideButtons).observe(actionbarWrapper);\n        // #endregion\n    }\n    static get observedAttributes() {\n        return [\"data-selected\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-selected\": {\n                let selectAll = this.shadowRoot.querySelector('.selectall');\n                if (selectAll)\n                    setSelectAllInput(selectAll, newVal);\n                const event = new CustomEvent(\"selected\", { detail: { selected: newVal } });\n                this.dispatchEvent(event);\n                break;\n            }\n        }\n    }\n}\nexport default iamActionbar;\n"],"names":["createEmbed","target","video_id","link_id","randLetter","onYouTubeIframeAPIReady","onPlayerReady","onPlayerStateChange","event","done","link","extendDialogs","body","dialog","index","createDialog","button","modalID","btnElement","style","dialogDimensions","btn","parent","dataEvent","popover","position","topOffset","leftOffset","container","boundingRec","popoverBottom","windowPos","currentStyle","e","videoButton","createMultiFormDialog","dialogContent","titleElement","optionalElement","buttons","fieldsets","fieldset","btnWrapper","validatedFieldsets","i","fieldsetID","element","validateFieldset","currentFieldset","currentFieldsetID","isFieldsetValid","input","step","fieldsetCount","validFieldsetCount","setSelectAllInput","value","iamActionbar","assetLocation","coreCSS","template","that","actionbarWrapper","selectAll","cancelButton","btns","view","icon","switchEvent","searchBar","keyupEvent","changeEvent","submitEvent","hideButtons","wrapperWidth","screenWidth","safeAreaWidth","elementMargin","mobileSafeWidth","modifier","overflowSlot","elements","tempWidth","overflowDialog","attrName","oldVal","newVal"],"mappings":"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"}

package/assets/js/components/applied-filters/applied-filters.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v3.7.9
+  * iamKey v3.9.0-beta-1
   * Copyright 2022-2023 iamproperty
   */function h(u,m){function f(e,t){let c=!1,r=t.getAttribute("name");r.includes("[]")&&(r=r.replace("[]",`[${t.value}]`));let l=e.querySelector(`[data-name="${r}"]`);l&&t.getAttribute("type")=="checkbox"&&(c=!0);let i=t.getAttribute("data-filter-text");if(l||(l=document.createElement("button"),e.appendChild(l)),l.setAttribute("type","button"),l.classList.add("filter"),l.setAttribute("data-name",r),l.innerHTML=i.replace("$value",t.value),(!t.value||c)&&l.remove(),t.parentNode.closest("[data-filter-text]")){let d=t.parentNode.closest("[data-filter-text]"),p=!0;if(r="",d.querySelectorAll("input").forEach((a,o)=>{let n=a.getAttribute("name");if(r+=`${o!=0?",":""}${n}`,e.querySelector(`[data-name="${n}"]`)&&e.querySelector(`[data-name="${n}"]`).remove(),a.value){let s=document.createElement("button");s.setAttribute("type","button"),s.classList.add("filter"),s.setAttribute("data-name",n),s.innerHTML=i.replace("$value",a.value),e.appendChild(s)}else p=!1}),e.querySelector(`[data-name="${r}"]`)&&e.querySelector(`[data-name="${r}"]`).remove(),p){let a=d.getAttribute("data-filter-text");d.querySelectorAll("input").forEach((n,s)=>{let b=n.getAttribute("name");e.querySelector(`[data-name="${b}"]`)&&e.querySelector(`[data-name="${b}"]`).remove(),a=a.replace(`$${s+1}`,n.value)});let o=document.createElement("button");o.setAttribute("type","button"),o.classList.add("filter"),o.setAttribute("data-name",r),o.innerHTML=a,e.appendChild(o)}}}Array.from(u.querySelectorAll('input[type="checkbox"]:checked')).forEach((e,t)=>{f(m,e)}),u.addEventListener("change",function(e){if(e&&e.target instanceof HTMLElement&&e.target.closest("input[data-filter-text]")){let t=e.target.closest("input[data-filter-text]");f(m,t)}},!1),m.addEventListener("click",function(e){if(e&&e.target instanceof HTMLElement&&e.target.closest(".filter")){let r=e.target.closest(".filter"),l=r.getAttribute("data-name").split(",");for(var t=0;t<l.length;t++){let i=l[t],d=`[name="${i}"]`;i.match(/\[(.*)\]/)&&(i.replace(/\[(.*)\]/,"[]"),d=`[value="${i.replace(/.*\[(.*)\]/,"$1")}"]`);let p=u.querySelectorAll(d);for(var c=0;c<p.length;c++){let a=p[c];if(a.getAttribute("type")!="radio"&&a.getAttribute("type")!="checkbox")a.value="";else{a.checked=!1;var e=new Event("force");a.closest("form").dispatchEvent(e)}}}r.remove()}},!1)}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Applied Filters"});class g extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const m=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",f=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${m}/css/core.min.css`;let e=this.classList.toString();const t=document.createElement("template");t.innerHTML=`
     <style>

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v3.7.9
+  * iamKey v3.9.0-beta-1
   * Copyright 2022-2023 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Card"});class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.querySelector('[class*="fa-"]')&&this.classList.add("card--has-icon");let t=this.classList.toString();const a=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${a}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
     <style>

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v3.7.9
+  * iamKey v3.9.0-beta-1
   * Copyright 2022-2023 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=`
     <style>

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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v3.7.9
+  * iamKey v3.9.0-beta-1
   * Copyright 2022-2023 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,o=document.createElement("template");o.innerHTML=`
     <style>
     @import "${r}";
-    .header-banner{background:linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);margin-bottom:2rem;position:relative;overflow:hidden;max-width:100% !important}@media screen and (min-width: 62em){.header-banner{min-height:29.375rem}}.header-banner>.container{padding-bottom:0;position:relative}.header-banner .breadcrumb{margin-top:1.5rem;margin-bottom:-0.5rem}@media screen and (min-width: 62em){.header-banner .breadcrumb{position:absolute;top:0;left:3.75rem}}.header-banner__inner{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: var(--colour-canvas);color:var(--colour-body);background:#fff;padding:2rem;margin:1.875rem 0;position:relative;z-index:var(--index-above)}.header-banner__inner .text-primary{color:var(--colour-primary) !important}@media screen and (min-width: 62em){.header-banner__inner{max-width:37.5rem;margin:7rem 0 5rem 0;padding:3.5rem 4rem}}.header-banner__inner>*:last-child{padding-bottom:0;margin-bottom:0}.header-banner picture img{display:none}@media screen and (min-width: 62em){.header-banner picture img{display:block;position:absolute;top:-0.5%;left:40%;height:101%;object-fit:cover;width:60%;pointer-events:none}}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}::slotted(*:last-child){padding-bottom:0 !important;margin-bottom:0 !important}/*# sourceMappingURL=assets/css/components/header.css.map */
+    .header-banner{background:linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);margin-bottom:2rem;position:relative;overflow:hidden;max-width:100% !important}@media screen and (min-width: 62em){.header-banner{min-height:29.375rem}}.header-banner>.container{padding-bottom:0;position:relative}.header-banner .breadcrumb{margin-top:1.5rem;margin-bottom:-0.5rem}@media screen and (min-width: 62em){.header-banner .breadcrumb{position:absolute;top:0;left:3.75rem}}.header-banner__inner{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: var(--colour-canvas);--colour-btn-action-hover-bg: var(--colour-light);color:var(--colour-body);background:#fff;padding:2rem;margin:1.875rem 0;position:relative;z-index:var(--index-above)}.header-banner__inner .text-primary{color:var(--colour-primary) !important}@media screen and (min-width: 62em){.header-banner__inner{max-width:37.5rem;margin:7rem 0 5rem 0;padding:3.5rem 4rem}}.header-banner__inner>*:last-child{padding-bottom:0;margin-bottom:0}.header-banner picture img{display:none}@media screen and (min-width: 62em){.header-banner picture img{display:block;position:absolute;top:-0.5%;left:40%;height:101%;object-fit:cover;width:60%;pointer-events:none}}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}::slotted(*:last-child){padding-bottom:0 !important;margin-bottom:0 !important}/*# sourceMappingURL=assets/css/components/header.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>

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

@@ -0,0 +1,294 @@
+// @ts-nocheck
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    "event": "customElementRegistered",
+    "element": "nav"
+});
+class iamNav extends HTMLElement {
+    constructor() {
+        super();
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+        const loadCSS = `@import "${assetLocation}/css/components/nav.css";`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style class="styles">
+    @import "${coreCSS}";
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="container">
+      <slot name="logo"></slot>
+      <div class="buttons-holder"></div>
+      <button class="btn-menu">Menu<i class="fa-regular fa-bars"></i><i class="fa-regular fa-xmark-large"></i></button>
+
+      <div class="menu__outer">
+        <div class="menu closed">
+            
+          <div class="menu__primary">
+            <slot></slot>
+            <slot name="dual"></slot>
+          </div>
+          <div class="dialog__wrapper d-none" id="search-wrapper"></div>
+          <slot name="actions"></slot>
+          <div class="menu__secondary">
+            <div class="container">
+            <slot name="secondary"></slot>
+            </div>
+          </div>
+        </div>
+        <slot name="menus"></slot>
+      </div>      
+    </div>
+    <div class="lists"></div>
+    <div class="backdrop" part="backdrop"></div>
+    `;
+        shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+    connectedCallback() {
+        // Load external CSS if needed
+        if (this.hasAttribute('data-css'))
+            this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+        const menuButton = this.shadowRoot.querySelector('.btn-menu');
+        const menu = this.shadowRoot.querySelector('.menu');
+        const iamNav = this;
+        const backdrop = this.shadowRoot.querySelector('.backdrop');
+        const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
+        // Check the content 
+        this.querySelectorAll(':scope > *').forEach(function (element) {
+            let tagname = element.tagName;
+            switch (tagname) {
+                case "BUTTON":
+                    element.setAttribute('slot', 'actions');
+                    menu.classList.add('has-actions');
+                    break;
+            }
+            // Create menu button
+            if (element.classList.contains('nav--menu') && element.hasAttribute('data-title') && element.hasAttribute('data-icon')) {
+                const title = element.getAttribute('data-title');
+                const iconClass = element.getAttribute('data-icon');
+                // Create the menu button that sits seperately to the menu
+                const button = document.createElement('button');
+                button.setAttribute('slot', title);
+                button.classList.add('btn-menu');
+                button.innerHTML = `<span class="btn btn-primary"><span>${title}</span><i class="${iconClass}"></i><i class="fa-regular fa-xmark-large"></i></span>`;
+                buttonsHolder.insertAdjacentElement('beforeend', button);
+                const mdButton = button.querySelector('.btn-primary');
+                // Make sure the menu is added to the right part of the component
+                element.setAttribute('slot', 'menus');
+                // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown
+                if (element.classList.contains('open')) {
+                    button.classList.add('selected');
+                    mdButton.classList.toggle('active');
+                    iamNav.classList.add('open');
+                    backdrop.classList.add('show');
+                }
+                else {
+                    element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues
+                }
+                // Click event
+                button.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    button.classList.toggle('selected');
+                    element.classList.toggle('open');
+                    mdButton.classList.toggle('active');
+                    // Close desktop menus
+                    let openMenu = iamNav.querySelector(':scope > details[open]');
+                    if (openMenu)
+                        openMenu.removeAttribute('open');
+                    // Close the main menu and fix states on the button, iamNav component and backdrop
+                    if (element.classList.contains('open')) {
+                        menu.classList.remove('open');
+                        menuButton.classList.remove('selected');
+                        setTimeout(function () { menu.classList.add('closed'); }, 1000); // Delay until its close so the animation is broken
+                        iamNav.classList.add('open');
+                        backdrop.classList.add('show');
+                        element.classList.remove('closed');
+                    }
+                    else {
+                        iamNav.classList.remove('open');
+                        backdrop.classList.remove('show');
+                        setTimeout(function () { element.classList.add('closed'); }, 1000);
+                    }
+                    // Close any open menus
+                    iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {
+                        if (openmenu != element) {
+                            openmenu.classList.remove('open');
+                        }
+                    });
+                    iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function (selectedButton) {
+                        if (selectedButton != button) {
+                            selectedButton.classList.remove('selected');
+                            let innerBtn = selectedButton.querySelector('.btn-primary');
+                            innerBtn.classList.remove('active');
+                        }
+                    });
+                }, false);
+            }
+        });
+        // Has secondary link
+        if (this.querySelector('a[slot="secondary"]')) {
+            menu.classList.add('has-secondary');
+        }
+        // Create a scroll width variable to help with the sizing of the menu with in the CSS
+        document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.offsetWidth) + 'px');
+        // Open and close the menu
+        menuButton.addEventListener('click', function (e) {
+            e.preventDefault();
+            menuButton.classList.toggle('selected');
+            menu.classList.toggle('open');
+            // Close any other menus
+            iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
+                element.classList.remove('open');
+                setTimeout(function () { element.classList.add('closed'); }, 1000);
+            });
+            iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function (element) {
+                element.classList.remove('selected');
+                let innerBtn = element.querySelector('.btn-primary');
+                innerBtn.classList.remove('active');
+            });
+            if (menu.classList.contains('open')) {
+                iamNav.classList.add('open');
+                menu.classList.remove('closed');
+            }
+            else {
+                iamNav.classList.remove('open');
+                setTimeout(function () { menu.classList.add('closed'); }, 1000);
+            }
+        }, false);
+        // Allow outside JS to close the menu
+        this.addEventListener("request-close", (event) => {
+            menuButton.classList.remove('selected');
+            menu.classList.remove('open');
+            iamNav.classList.remove('open');
+        });
+        // Close the menu on the click of the backdrop on desktop
+        backdrop.addEventListener("click", (event) => {
+            let openMenu = this.querySelector('details[open] summary');
+            if (openMenu)
+                openMenu.click();
+            iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
+                element.classList.remove('open');
+            });
+            iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function (element) {
+                element.classList.remove('selected');
+                let innerBtn = element.querySelector('.btn-primary');
+                innerBtn.classList.remove('active');
+            });
+            backdrop.classList.remove('show');
+        });
+        // On desktop close other menu's (details) when one is clicked
+        this.addEventListener("click", (event) => {
+            if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {
+                if (window.innerWidth > 992) {
+                    let summary = event.target.closest('summary');
+                    let details = summary.closest('details');
+                    let wrapper = details.parentNode;
+                    if (details.hasAttribute('open'))
+                        details.removeAttribute('open');
+                    else
+                        details.setAttribute('open', 'true');
+                    // Close any bespoke menus
+                    iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
+                        element.classList.remove('open');
+                        setTimeout(function () { menu.classList.add('closed'); }, 1000);
+                    });
+                    iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu.selected').forEach(function (element) {
+                        element.classList.remove('selected');
+                        let innerBtn = element.querySelector('.btn-primary');
+                        innerBtn.classList.remove('active');
+                    });
+                    // Close any other dropdowns on the same level
+                    Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement, index) => {
+                        if (detailsArrayElement != details)
+                            detailsArrayElement.removeAttribute('open');
+                    });
+                    if (this.querySelectorAll(':scope > details[open]').length) {
+                        backdrop.classList.add('show');
+                        iamNav.classList.add('open');
+                    }
+                    else {
+                        backdrop.classList.remove('show');
+                        iamNav.classList.remove('open');
+                    }
+                    event.preventDefault();
+                }
+            }
+            ;
+        });
+        // Mega menu title
+        this.querySelectorAll('details').forEach((detailsElement) => {
+            let summary = detailsElement.querySelector('summary');
+            let containerDiv = detailsElement.querySelector(':Scope > div');
+            containerDiv.setAttribute('data-title', summary.textContent);
+        });
+        // Search 
+        if (this.hasAttribute('data-search')) {
+            menu.classList.add('has-search');
+            let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
+            searchWrapper.classList.remove('d-none');
+            searchWrapper.insertAdjacentHTML('afterbegin', `<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button">Open Search field</button>
+      <dialog id="search-dialog">
+      <div class="container">
+        <form action="${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}" class="row" id="search-form">
+          <div class="col mb-0 ms-auto col-md-7">
+            <label for="search" class="visually-hidden">Search</label>
+            <button class="suffix me-0 mb-0"><i class="fa-regular fa-search"></i></button>
+            <input type="search" class="" id="search" name="search" required="" autocomplete="off" data-list="${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}" />
+          </div>
+          <div class="col d-none d-md-block mw-fit-content ms-3">
+            <button class="btn btn-compact btn-secondary fa-xmark-large m-0 mb-0" type="button" id="search-close"></button>
+          </div>
+        </form>
+      </div>
+      </dialog>`);
+            let searchButton = this.shadowRoot.querySelector('#search-button');
+            let searchClose = this.shadowRoot.querySelector('#search-close');
+            let searchDialog = this.shadowRoot.querySelector('#search-dialog');
+            let searchInput = this.shadowRoot.querySelector('#search');
+            let searchForm = this.shadowRoot.querySelector('#search-form');
+            if (this.hasAttribute('data-search-open')) {
+                searchDialog.setAttribute('open', 'open');
+                this.classList.add('search-open');
+            }
+            searchButton.addEventListener("click", (event) => {
+                searchDialog.setAttribute('open', 'open');
+                this.classList.add('search-open');
+            });
+            searchClose.addEventListener("click", (event) => {
+                searchDialog.removeAttribute('open');
+                this.classList.remove('search-open');
+            });
+            // Search events
+            searchInput.addEventListener('keydown', (event) => {
+                const keyupEvent = new CustomEvent("search-keydown", { detail: { search: searchInput.value } });
+                this.dispatchEvent(keyupEvent);
+            });
+            searchInput.addEventListener('keyup', (event) => {
+                if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list'))
+                    searchInput.setAttribute("list", searchInput.getAttribute('data-list'));
+                else
+                    searchInput.removeAttribute("list");
+                const keyupEvent = new CustomEvent("search-keyup", { detail: { search: searchInput.value } });
+                this.dispatchEvent(keyupEvent);
+            });
+            searchInput.addEventListener('change', (event) => {
+                const changeEvent = new CustomEvent("search-change", { detail: { search: searchInput.value } });
+                this.dispatchEvent(changeEvent);
+            });
+            searchForm.addEventListener('submit', (event) => {
+                if (this.hasAttribute('data-prevent-search'))
+                    event.preventDefault();
+                const submitEvent = new CustomEvent("search-submit", { detail: { search: searchInput.value } });
+                this.dispatchEvent(submitEvent);
+            });
+            // Make sure any child lists are available to the search input
+            this.querySelectorAll('datalist').forEach((list) => {
+                iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend', list);
+            });
+        }
+    }
+}
+export default iamNav;