@iamproperty/components 7.7.1--beta4 → 7.7.1--beta6

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

@@ -1 +1 @@
-{"version":3,"file":"slider.component.min.js","sources":["slider.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'Slider',\n});\nclass iamSlider extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/slider.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    </style>\n    <div class=\"row\">\n      <div class=\"col min pe-2\"></div>\n      <div class=\"col sliders\">\n        \n      </div>\n      <div class=\"col max ps-2\"></div>\n    </div>\n    <div class=\"input__wrapper\"><slot></slot><span>Minimum</span><span>Maximum</span></div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const slider = this;\n        const minElement = this.shadowRoot.querySelector('.min');\n        const maxElement = this.shadowRoot.querySelector('.max');\n        const slidersHolder = this.shadowRoot.querySelector('.sliders');\n        let inputs = this.querySelectorAll('input');\n        const inputWrapper = this.shadowRoot.querySelector('.input__wrapper');\n        const label = this.closest('label');\n        let stepperInterval, stepperEvent = 'mouseup', stepperStart = 'mousedown';\n        if ('ontouchstart' in document.documentElement) {\n            stepperEvent = 'touchend';\n            stepperStart = 'touchstart';\n        }\n        const stepperFunction = function (input) {\n            const value = input.value;\n            const min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');\n            const max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');\n            if (input.classList.contains('is-last') && !input.classList.contains('is-first')) {\n                const percent = (value / (max - min)) * 100;\n                slider.style.setProperty('--percent', percent + '%');\n                if (parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)) {\n                    slider.shadowRoot.querySelector('.is-first').value = input.value;\n                    slider.querySelector('.is-first').value = input.value;\n                    slider.style.setProperty('--start-percent', percent + '%');\n                }\n            }\n            else if (input.classList.contains('is-first') && !input.classList.contains('is-last')) {\n                const percent = (value / (max - min)) * 100;\n                slider.style.setProperty('--start-percent', percent + '%');\n                if (parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)) {\n                    slider.shadowRoot.querySelector('.is-last').value = input.value;\n                    slider.querySelector('.is-last').value = input.value;\n                    slider.style.setProperty('--percent', percent + '%');\n                }\n            }\n            else {\n                const percent = ((value / (max - min)) * 100).toFixed(2);\n                slider.style.setProperty('--percent', percent + '%');\n            }\n        };\n        // Create sliders\n        Array.from(inputs).forEach((input, index) => {\n            const rangeInput = input.cloneNode(true);\n            input.setAttribute('type', 'number');\n            rangeInput.setAttribute('type', 'range');\n            if (index == 0) {\n                input.classList.add('is-first');\n                rangeInput.classList.add('is-first');\n                minElement.innerHTML = input.getAttribute('min');\n                maxElement.innerHTML = input.getAttribute('max');\n                slidersHolder.appendChild(rangeInput);\n            }\n            if (index == inputs.length - 1) {\n                input.classList.add('is-last');\n                rangeInput.classList.add('is-last');\n                slidersHolder.appendChild(rangeInput);\n            }\n            if (index > 1) {\n                input.remove();\n            }\n        });\n        inputs = this.querySelectorAll('input');\n        inputWrapper.setAttribute('data-elements', inputs.length);\n        const sliders = this.shadowRoot.querySelectorAll('input');\n        Array.from(inputs).forEach((input, index) => {\n            input.addEventListener('keyup', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n            input.addEventListener('keydown', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n            input.addEventListener('change', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n        });\n        Array.from(sliders).forEach((input, index) => {\n            stepperFunction(input, 'start');\n            input.addEventListener(stepperStart, function () {\n                clearInterval(stepperInterval);\n                stepperInterval = setInterval(function () {\n                    stepperFunction(input, 'drag');\n                    inputs[index].value = input.value;\n                }, 10);\n            });\n            input.addEventListener(stepperEvent, function () {\n                clearInterval(stepperInterval);\n            });\n            input.addEventListener('change', function () {\n                clearInterval(stepperInterval);\n                stepperFunction(input, 'click');\n                inputs[index].value = input.value;\n            });\n        });\n        // Move focus to slider when clicking on label\n        label.addEventListener('click', function (event) {\n            event.preventDefault();\n            if (this === event.target) {\n                /* click was on label */\n                slider.shadowRoot.querySelector('input').focus();\n            }\n            else {\n                /* click was on input */\n                event.stopPropagation();\n                return false;\n            }\n        });\n    } // Connected callback\n}\nexport default iamSlider;\n"],"names":["iamSlider","template","slider","minElement","maxElement","slidersHolder","inputs","inputWrapper","label","stepperInterval","stepperEvent","stepperStart","stepperFunction","input","value","min","max","percent","index","rangeInput","sliders","event"],"mappings":"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"}
+{"version":3,"file":"slider.component.min.js","sources":["slider.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'Slider',\n});\nclass iamSlider extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/slider.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style>\r\n    ${loadCSS}\r\n    </style>\r\n    <div class=\"row\">\r\n      <div class=\"col min pe-2\"></div>\r\n      <div class=\"col sliders\">\r\n        \r\n      </div>\r\n      <div class=\"col max ps-2\"></div>\r\n    </div>\r\n    <div class=\"input__wrapper\"><slot></slot><span>Minimum</span><span>Maximum</span></div>\r\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const slider = this;\n        const minElement = this.shadowRoot.querySelector('.min');\n        const maxElement = this.shadowRoot.querySelector('.max');\n        const slidersHolder = this.shadowRoot.querySelector('.sliders');\n        let inputs = this.querySelectorAll('input');\n        const inputWrapper = this.shadowRoot.querySelector('.input__wrapper');\n        const label = this.closest('label');\n        let stepperInterval, stepperEvent = 'mouseup', stepperStart = 'mousedown';\n        if ('ontouchstart' in document.documentElement) {\n            stepperEvent = 'touchend';\n            stepperStart = 'touchstart';\n        }\n        const stepperFunction = function (input) {\n            const value = input.value;\n            const min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');\n            const max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');\n            if (input.classList.contains('is-last') && !input.classList.contains('is-first')) {\n                const percent = (value / (max - min)) * 100;\n                slider.style.setProperty('--percent', percent + '%');\n                if (parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)) {\n                    slider.shadowRoot.querySelector('.is-first').value = input.value;\n                    slider.querySelector('.is-first').value = input.value;\n                    slider.style.setProperty('--start-percent', percent + '%');\n                }\n            }\n            else if (input.classList.contains('is-first') && !input.classList.contains('is-last')) {\n                const percent = (value / (max - min)) * 100;\n                slider.style.setProperty('--start-percent', percent + '%');\n                if (parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)) {\n                    slider.shadowRoot.querySelector('.is-last').value = input.value;\n                    slider.querySelector('.is-last').value = input.value;\n                    slider.style.setProperty('--percent', percent + '%');\n                }\n            }\n            else {\n                const percent = ((value / (max - min)) * 100).toFixed(2);\n                slider.style.setProperty('--percent', percent + '%');\n            }\n        };\n        // Create sliders\n        Array.from(inputs).forEach((input, index) => {\n            const rangeInput = input.cloneNode(true);\n            input.setAttribute('type', 'number');\n            rangeInput.setAttribute('type', 'range');\n            if (index == 0) {\n                input.classList.add('is-first');\n                rangeInput.classList.add('is-first');\n                minElement.innerHTML = input.getAttribute('min');\n                maxElement.innerHTML = input.getAttribute('max');\n                slidersHolder.appendChild(rangeInput);\n            }\n            if (index == inputs.length - 1) {\n                input.classList.add('is-last');\n                rangeInput.classList.add('is-last');\n                slidersHolder.appendChild(rangeInput);\n            }\n            if (index > 1) {\n                input.remove();\n            }\n        });\n        inputs = this.querySelectorAll('input');\n        inputWrapper.setAttribute('data-elements', inputs.length);\n        const sliders = this.shadowRoot.querySelectorAll('input');\n        Array.from(inputs).forEach((input, index) => {\n            input.addEventListener('keyup', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n            input.addEventListener('keydown', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n            input.addEventListener('change', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n        });\n        Array.from(sliders).forEach((input, index) => {\n            stepperFunction(input, 'start');\n            input.addEventListener(stepperStart, function () {\n                clearInterval(stepperInterval);\n                stepperInterval = setInterval(function () {\n                    stepperFunction(input, 'drag');\n                    inputs[index].value = input.value;\n                }, 10);\n            });\n            input.addEventListener(stepperEvent, function () {\n                clearInterval(stepperInterval);\n            });\n            input.addEventListener('change', function () {\n                clearInterval(stepperInterval);\n                stepperFunction(input, 'click');\n                inputs[index].value = input.value;\n            });\n        });\n        // Move focus to slider when clicking on label\n        label.addEventListener('click', function (event) {\n            event.preventDefault();\n            if (this === event.target) {\n                /* click was on label */\n                slider.shadowRoot.querySelector('input').focus();\n            }\n            else {\n                /* click was on input */\n                event.stopPropagation();\n                return false;\n            }\n        });\n    } // Connected callback\n}\nexport default iamSlider;\n"],"names":["iamSlider","template","slider","minElement","maxElement","slidersHolder","inputs","inputWrapper","label","stepperInterval","stepperEvent","stepperStart","stepperFunction","input","value","min","max","percent","index","rangeInput","sliders","event"],"mappings":"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"}

package/assets/js/components/split-button/split-button.component.js

@@ -1,4 +1,4 @@
-import iamMenu from '../menu/menu.component.js';
+import iamMenu from '../menu/menu.component';
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -14,24 +14,24 @@ class iamSplitButton extends HTMLElement {
             : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/split-button.component.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style>
-    ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <div class="split-button">
-      <slot></slot>
-      <div class="dropdown">
-        <button class="btn btn-split" part="dropdown" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions">
-          <i class="fa fa-angle-down fa-light"></i>
-        </button>
-
-        <iam-menu id="actions" style="position-anchor: --anchor-el;" popover>
-          <slot name="menu-item"></slot>
-        </iam-menu>
-
-      </div>
-    </div>
+        template.innerHTML = `
+    <style>
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="split-button">
+      <slot></slot>
+      <div class="dropdown">
+        <button class="btn btn-split" part="dropdown" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions">
+          <i class="fa fa-angle-down fa-light"></i>
+        </button>
+
+        <iam-menu id="actions" style="position-anchor: --anchor-el;" popover>
+          <slot name="menu-item"></slot>
+        </iam-menu>
+
+      </div>
+    </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }

package/assets/js/components/split-button/split-button.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta4
+  * iamKey v7.7.1--beta6
   * Copyright 2022-2026 iamproperty
   */class u extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const r=document.createElement("template");r.innerHTML=`
     <style>
@@ -8,9 +8,9 @@
     </style>
     <div class="menu--inner" part="inner">
       <slot></slot>
-    </div>`,this.shadowRoot.appendChild(r.content.cloneNode(!0))}connectedCallback(){const r=this.hasAttribute("id")?this.getAttribute("id"):!1,n=document.querySelector(`[popovertarget="${r}"]`);let i=this.querySelectorAll(":scope > a, :scope > button, :scope > details > summary"),l=this.querySelectorAll("a, button");this.closest(".menu__wrapper")&&(l=this.shadowRoot.querySelector("slot").assignedElements({flatten:!0}),i=l),this.querySelectorAll("details");let m,c;r&&n&&(this.setAttribute("role","menu"),this.setAttribute("popover","auto"),this.style["position-anchor"]=`--${r}`,n?.setAttribute("aria-haspopup","true"),n==null||(n.style["anchor-name"]=`--${r}`),n?.setAttribute("aria-controls",r)),l.forEach((t,e)=>{t.setAttribute("role","menuitem"),t.setAttribute("tabindex","0"),e==0&&t.setAttribute("autofocus",!0)}),this.addEventListener("keydown",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("a, button, summary")){const e=document.activeElement,a=Array.from(i).indexOf(e)-1,s=Array.from(i).indexOf(e)+1;switch(t.keyCode){case 27:e.closest("details")?(t.stopPropagation(),t.preventDefault(),e.closest("details").removeAttribute("open"),e.closest("details").querySelector(":scope summary").focus()):(t.stopPropagation(),n.focus());break;case 32:case 13:break;case 35:t.stopPropagation(),t.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(l)[l.length-1].focus();break;case 36:t.stopPropagation(),t.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(l)[0].focus();break;case 38:if(t.stopPropagation(),t.preventDefault(),Array.from(i).indexOf(e)>-1)Array.from(i)[a]!=null?Array.from(i)[a].focus():Array.from(i)[i.length-1].focus();else if(e.closest("details")){const o=e.closest("details").querySelectorAll("a, button, :scope details > summary");c=Array.from(o).indexOf(e)-1,Array.from(o)[c]!=null?Array.from(o)[c].focus():Array.from(o)[o.length-1].focus()}break;case 40:if(t.stopPropagation(),t.preventDefault(),Array.from(i).indexOf(e)>-1)Array.from(i)[s]!=null?Array.from(i)[s].focus():Array.from(i)[0].focus();else if(e.closest("details")){const o=e.closest("details").querySelectorAll("a, button, :scope details > summary");m=Array.from(o).indexOf(e)+1,Array.from(o)[m]!=null?Array.from(o)[m].focus():Array.from(o)[0].focus()}break}}}),this.addEventListener("toggle",t=>{var e,a,s,o;const d=new CustomEvent(t.newState,{detail:{id:this.getAttribute("id"),target:t.target}});this.dispatchEvent(d),this.closest(".menu__wrapper")&&l[0].focus(),this.hasAttribute("popover-open")&&(t.preventDefault(),this.removeAttribute("popover-open"),this.hidePopover()),this.matches(":popover-open")&&document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`)?((e=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||e===void 0||e.setAttribute("aria-pressed","true"),(a=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||a===void 0||a.classList.add("active")):((s=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||s===void 0||s.removeAttribute("aria-pressed"),(o=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||o===void 0||o.classList.remove("active"))}),this.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button:has(+ iam-menu:not([popover]))")){const e=t.target.closest("button:has(+ iam-menu)");e?.classList.toggle("open")}else if(t&&t.target instanceof HTMLElement&&t.target.closest("button.selectable")){const e=t.target.closest("button.selectable");this.hasAttribute("multiple")?e.classList.toggle("selected"):e?.classList.contains("selected")?this.querySelectorAll(".selected").forEach(a=>{a.classList.remove("selected")}):(this.querySelectorAll(".selected").forEach(a=>{a.classList.remove("selected")}),e.classList.add("selected"))}}),CSS.supports("top","anchor(top)")||document.addEventListener("click",t=>{if(t.originalTarget&&t.originalTarget.matches("[popovertarget]")){const e=t.originalTarget,a=e.getAttribute("popovertarget"),s=document.getElementById(a),o=e.getBoundingClientRect(),d=o.top,b=o.left;s.style.setProperty("top",d+"px"),s.style.setProperty("left",b+e.clientWidth+"px")}})}}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"split-button"});class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const r=document.createElement("template");r.innerHTML=`
+    </div>`,this.shadowRoot.appendChild(r.content.cloneNode(!0))}connectedCallback(){const r=this.hasAttribute("id")?this.getAttribute("id"):!1,n=document.querySelector(`[popovertarget="${r}"]`);let i=this.querySelectorAll(":scope > a, :scope > button, :scope > details > summary"),l=this.querySelectorAll("a, button");this.closest(".menu__wrapper")&&(l=this.shadowRoot.querySelector("slot").assignedElements({flatten:!0}),i=l),this.querySelectorAll("details");let m,d;r&&n&&(this.setAttribute("role","menu"),this.setAttribute("popover","auto"),this.style["position-anchor"]=`--${r}`,n?.setAttribute("aria-haspopup","true"),n==null||(n.style["anchor-name"]=`--${r}`),n?.setAttribute("aria-controls",r)),l.forEach((t,e)=>{t.setAttribute("role","menuitem"),t.setAttribute("tabindex","0"),e==0&&t.setAttribute("autofocus",!0)}),this.addEventListener("keydown",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("a, button, summary")){const e=document.activeElement,a=Array.from(i).indexOf(e)-1,s=Array.from(i).indexOf(e)+1;switch(t.keyCode){case 27:e.closest("details")?(t.stopPropagation(),t.preventDefault(),e.closest("details").removeAttribute("open"),e.closest("details").querySelector(":scope summary").focus()):(t.stopPropagation(),n.focus());break;case 32:case 13:break;case 35:t.stopPropagation(),t.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(l)[l.length-1].focus();break;case 36:t.stopPropagation(),t.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(l)[0].focus();break;case 38:if(t.stopPropagation(),t.preventDefault(),Array.from(i).indexOf(e)>-1)Array.from(i)[a]!=null?Array.from(i)[a].focus():Array.from(i)[i.length-1].focus();else if(e.closest("details")){const o=e.closest("details").querySelectorAll("a, button, :scope details > summary");d=Array.from(o).indexOf(e)-1,Array.from(o)[d]!=null?Array.from(o)[d].focus():Array.from(o)[o.length-1].focus()}break;case 40:if(t.stopPropagation(),t.preventDefault(),Array.from(i).indexOf(e)>-1)Array.from(i)[s]!=null?Array.from(i)[s].focus():Array.from(i)[0].focus();else if(e.closest("details")){const o=e.closest("details").querySelectorAll("a, button, :scope details > summary");m=Array.from(o).indexOf(e)+1,Array.from(o)[m]!=null?Array.from(o)[m].focus():Array.from(o)[0].focus()}break}}}),this.addEventListener("toggle",t=>{var e,a,s,o;const c=new CustomEvent(t.newState,{detail:{id:this.getAttribute("id"),target:t.target}});this.dispatchEvent(c),this.closest(".menu__wrapper")&&l[0].focus(),this.hasAttribute("popover-open")&&(t.preventDefault(),this.removeAttribute("popover-open"),this.hidePopover()),this.matches(":popover-open")&&document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`)?((e=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||e===void 0||e.setAttribute("aria-pressed","true"),(a=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||a===void 0||a.classList.add("active")):((s=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||s===void 0||s.removeAttribute("aria-pressed"),(o=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||o===void 0||o.classList.remove("active"))}),this.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button:has(+ iam-menu:not([popover]))")){const e=t.target.closest("button:has(+ iam-menu)");e?.classList.toggle("open")}else if(t&&t.target instanceof HTMLElement&&t.target.closest("button.selectable")){const e=t.target.closest("button.selectable");this.hasAttribute("multiple")?e.classList.toggle("selected"):e?.classList.contains("selected")?this.querySelectorAll(".selected").forEach(a=>{a.classList.remove("selected")}):(this.querySelectorAll(".selected").forEach(a=>{a.classList.remove("selected")}),e.classList.add("selected"))}}),CSS.supports("top","anchor(top)")||document.addEventListener("click",t=>{if(t.originalTarget&&t.originalTarget.matches("[popovertarget]")){const e=t.originalTarget,a=e.getAttribute("popovertarget"),s=document.getElementById(a),o=e.getBoundingClientRect(),c=o.top,b=o.left;s.style.setProperty("top",c+"px"),s.style.setProperty("left",b+e.clientWidth+"px")}})}}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"split-button"});class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const r=document.createElement("template");r.innerHTML=`
     <style>
-    @layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}:is(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:is(button,[type=button],[type=reset],[type=submit]):not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 7 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 7 Pro"}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{--fa-width: 1em;font-family:"Font Awesome 7 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 7 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.3125rem /* 5px */;--btn-padding-inline: 0.3125rem /* 5px */;--btn-margin: 0.5rem;border-radius:.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;&:not(.btn-primary){color:var(--colour-heading)}&:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}&.btn[class*=fa-]:before{content:var(--fa);margin-right:.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) &,&:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem;&:not(:last-child){margin-right:.5rem}&:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}[class*=fa-]:before{line-height:calc(var(--compact-size) - .25rem);@container style(--theme: dark){color:white}}&.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}&.btn-action{--compact-size: 2rem;font-size:1rem;&:before{font-size:1em;font-weight:400}}&.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:transparent;&:not([class*=colour-]){--colour: var(--colour-light)}}&.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour);&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}}&[data-number]{position:relative}&[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:white;letter-spacing:-0.1em;font-family:arial,sans-serif}}.btn-compact{&:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit,.fa-envelope,.fa-calendar){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial;&:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}&:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important;&:not(.btn-action){border-radius:50% !important}&:before{font-family:"Font Awesome 7 Pro" !important;content:var(--fa) !important;display:block}}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2}.btn[popovertarget]>.fa-chevron-down{display:none}.btn[popovertarget]:not(:has(i)):after{content:"";display:inline-block;margin-right:.25em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.btn[popovertarget][aria-pressed]:after{transform:rotate(270deg)}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content}.btn:has(select) select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}.btn:has(select) select option{font-size:1rem;text-align:left;color:var(--colour-primary);padding-inline:var(--menu-item-padding, 0.5rem);padding-block:var(--menu-item-padding, 0.5rem) !important;border-radius:.25rem !important}.btn:has(select) select option:not(:last-child){margin:var(--menu-item-margin, 0 0 0.25rem 0) !important}.btn:has(select) select option:hover{background:var(--colour-light) !important}.btn:has(select) select option:after{content:attr(data-email)}.btn:has(select) select::picker-icon{display:none}.btn:has(select) select::picker(select){appearance:base-select;background:var(--menu-bg, canvas);margin-block:var(--menu-margin, 0.25rem);padding:var(--menu-padding, 0.5rem) !important;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1);font-size:1rem}.btn:has(select) hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}.btn:has(select) select option::checkmark{display:none}.btn:has(select) select selectedcontent span{display:none}.btn:has(select):after{position:absolute;top:.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em}.btn-action:has(select) select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}.btn-action:has(select):after{top:.2rem;right:.5rem}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn-compact{max-width:fit-content;margin-inline:auto}}:where(.btn__group,iam-modal){reading-flow:source-order;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0;&:not(:last-child){margin-right:0}}.btn-tertiary{max-width:fit-content;margin-block:0 !important;margin-inline:auto !important;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1;margin:0;&:not(:last-child){margin:0}}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn-tertiary{max-width:fit-content;margin-inline:0 !important;margin-block:auto;order:1}.btn-secondary{order:2}.btn-primary{order:3}.btn-compact{margin-inline:0;margin-block:auto}}:where(iam-modal,.btn__group){.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}}.btn__group{.btn-tertiary{reading-order:1}.btn-secondary{reading-order:2}.btn-primary{reading-order:3}}iam-modal{.btn-tertiary{reading-order:3;order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:1}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}@layer components{iam-menu:defined{--menu-padding: 0.5rem;--border-color: var(--colour-border);--menu-item-margin: 0 0 0.5rem 0}iam-menu i{width:1.25rem}iam-menu>button:has(+iam-menu){position:relative}iam-menu>button:has(+iam-menu):after{content:"";height:var(--btn-line-height);width:1rem;height:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;position:absolute;top:calc(50% - .5rem);right:.5rem}iam-menu>button:has(+iam-menu:not([popover])):after{rotate:90deg}iam-menu>button.open:has(+iam-menu:not([popover])){position:relative}iam-menu>button.open:has(+iam-menu:not([popover])):after{top:calc(50% - .5rem);right:.5rem;rotate:270deg}iam-menu>button:has(+iam-menu:popover-open){position:relative}iam-menu>button:has(+iam-menu:popover-open):after{top:calc(50% - .5rem);right:.5rem;rotate:180deg}iam-menu>button:not(.open)+iam-menu:not([popover]){display:none}iam-menu>button+iam-menu:not([popover])>*:is(button,a,label){padding-left:2rem}}::slotted(button:not([slot])){float:left;margin-right:0 !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:none !important;padding-right:1rem !important}::slotted(button[slot]){background:none !important;display:block !important;float:none !important;border:none !important}.split-button{position:relative}.split-button .dropdown{position:relative;display:inline-block}.split-button .dropdown button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0,0,0,.2);padding-right:0;padding-left:.75rem;margin-bottom:0}.split-button .dropdown button .fa-light::before{content:"\uF107"}.split-button .dropdown button:hover,.split-button .dropdown button:active,.split-button .dropdown button:focus{border-top-left-radius:0;border-bottom-left-radius:0}.split-button .dropdown button::after{display:none}.btn-secondary:not([disabled]):hover i,.btn-secondary:not([disabled]):active i,.btn-secondary:not([disabled]):focus i{color:#fff !important}@media(prefers-color-scheme: dark){.btn-secondary.btn-split{border-left-color:#fff !important}.btn-secondary.btn-split:hover i,.btn-secondary.btn-split:active i,.btn-secondary.btn-split:focus i{color:#000 !important}}/*# sourceMappingURL=assets/css/components/split-button.component.css.map */
+    @layer elements{button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button:focus:not(:focus-visible){outline:0}:is(button,[type=button],[type=reset],[type=submit],[role=button]){-webkit-appearance:button;&:not(:disabled){cursor:pointer}}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap;&:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}&:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}&:not(:last-child){margin-right:var(--btn-margin)}}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.btn-complete{--colour: var(--colour-success);--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn-complete,.btn.btn-complete:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem;&:before{content:"\uF00C";font-family:"Font Awesome 7 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn{&[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 7 Pro"}&[class*=fa-after]{padding-right:4rem}&[class*=fa-after]:before{margin-right:0;margin-right:.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}&:not(.btn-compact):before{margin-right:1rem}i[class*=fa-]{--fa-width: 1em;font-family:"Font Awesome 7 Pro";margin-right:1rem;line-height:1em;font-style:inherit;&:not(:first-child){margin-left:1rem;margin-right:0}}}.btn.btn--prompt{&:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active){&:after{margin-left:1.5rem;margin-right:-0.5rem}}.btn-filter{&:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 7 Pro"}}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary);&:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:transparent;border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative;&:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}&.text-decoration-none:after{width:0%}&[class*=fa-]{margin-left:0;margin-right:.5rem}&[class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}&:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active){&:after{width:60% !important}}&:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}}@layer elements{.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.3125rem /* 5px */;--btn-padding-inline: 0.3125rem /* 5px */;--btn-margin: 0.5rem;border-radius:.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;&:not(.btn-primary){color:var(--colour-heading)}&:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}&.btn[class*=fa-]:before{content:var(--fa);margin-right:.375rem}&.icon-only{position:relative;text-indent:-300vw;overflow:hidden;min-width:1.75rem;&:before{position:absolute;left:0;top:0;min-width:1.75rem;text-align:center;text-indent:0;padding-inline:.25rem;line-height:1.85rem}}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) &,&:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem;&:not(:last-child){margin-right:.5rem}&:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}[class*=fa-]:before{line-height:calc(var(--compact-size) - .25rem);@container style(--theme: dark){color:white}}&.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}&.btn-action{--compact-size: 2rem;font-size:1rem;&:before{font-size:1em;font-weight:400}}&.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:transparent;&:not([class*=colour-]){--colour: var(--colour-light)}}&.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour);&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}}&[data-number]{position:relative}&[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:white;letter-spacing:-0.1em;font-family:arial,sans-serif}}.btn-compact{&:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit,.fa-envelope,.fa-calendar){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial;&:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}&:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important;&:not(.btn-action){border-radius:50% !important}&:before{font-family:"Font Awesome 7 Pro" !important;content:var(--fa) !important;display:block}}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2;&>.fa-chevron-down{display:none}&:not(:has(i)):after{content:"";display:inline-block;margin-right:.25em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}&[aria-pressed]:after{transform:rotate(270deg)}}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content;select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important;option{font-size:1rem;text-align:left;color:var(--colour-primary);padding-inline:var(--menu-item-padding, 0.5rem);padding-block:var(--menu-item-padding, 0.5rem) !important;border-radius:.25rem !important;&:not(:last-child){margin:var(--menu-item-margin, 0 0 0.25rem 0) !important}&:hover{background:var(--colour-light) !important}&:after{content:attr(data-email)}}}select::picker-icon{display:none}select::picker(select){appearance:base-select;background:var(--menu-bg, canvas);margin-block:var(--menu-margin, 0.25rem);padding:var(--menu-padding, 0.5rem) !important;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0, 0, 0, 0.1);font-size:1rem}hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}select option::checkmark{display:none}select selectedcontent span{display:none}&:after{position:absolute;top:.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em;select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}&:after{top:.2rem;right:.5rem}}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn-compact{max-width:fit-content;margin-inline:auto}}:where(.btn__group,iam-modal){reading-flow:source-order;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0;&:not(:last-child){margin-right:0}}.btn-tertiary{max-width:fit-content;margin-block:0 !important;margin-inline:auto !important;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1;margin:0;&:not(:last-child){margin:0}}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn-tertiary{max-width:fit-content;margin-inline:0 !important;margin-block:auto;order:1}.btn-secondary{order:2}.btn-primary{order:3}.btn-compact{margin-inline:0;margin-block:auto}}:where(iam-modal,.btn__group){.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}}.btn__group{.btn-tertiary{reading-order:1}.btn-secondary{reading-order:2}.btn-primary{reading-order:3}}iam-modal{.btn-tertiary{reading-order:3;order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:1}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}@layer components{iam-menu:defined{--menu-padding: 0.5rem;--border-color: var(--colour-border);--menu-item-margin: 0 0 0.5rem 0}iam-menu i{width:1.25rem}iam-menu>button:has(+iam-menu){position:relative}iam-menu>button:has(+iam-menu):after{content:"";height:var(--btn-line-height);width:1rem;height:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;position:absolute;top:calc(50% - .5rem);right:.5rem}iam-menu>button:has(+iam-menu:not([popover])):after{rotate:90deg}iam-menu>button.open:has(+iam-menu:not([popover])){position:relative}iam-menu>button.open:has(+iam-menu:not([popover])):after{top:calc(50% - .5rem);right:.5rem;rotate:270deg}iam-menu>button:has(+iam-menu:popover-open){position:relative}iam-menu>button:has(+iam-menu:popover-open):after{top:calc(50% - .5rem);right:.5rem;rotate:180deg}iam-menu>button:not(.open)+iam-menu:not([popover]){display:none}iam-menu>button+iam-menu:not([popover])>*:is(button,a,label){padding-left:2rem}}::slotted(button:not([slot])){float:left;margin-right:0 !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:none !important;padding-right:1rem !important}::slotted(button[slot]){background:none !important;display:block !important;float:none !important;border:none !important}.split-button{position:relative}.split-button .dropdown{position:relative;display:inline-block}.split-button .dropdown button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0,0,0,.2);padding-right:0;padding-left:.75rem;margin-bottom:0}.split-button .dropdown button .fa-light::before{content:"\uF107"}.split-button .dropdown button:hover,.split-button .dropdown button:active,.split-button .dropdown button:focus{border-top-left-radius:0;border-bottom-left-radius:0}.split-button .dropdown button::after{display:none}.btn-secondary:not([disabled]):hover i,.btn-secondary:not([disabled]):active i,.btn-secondary:not([disabled]):focus i{color:#fff !important}@media(prefers-color-scheme: dark){.btn-secondary.btn-split{border-left-color:#fff !important}.btn-secondary.btn-split:hover i,.btn-secondary.btn-split:active i,.btn-secondary.btn-split:focus i{color:#000 !important}}/*# sourceMappingURL=assets/css/components/split-button.component.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>

package/assets/js/components/split-button/split-button.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.component.min.js","sources":["../menu/menu.component.js","split-button.component.js"],"sourcesContent":["class iamMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const menuCSS = `@import \"${assetLocation}/css/components/menu.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${menuCSS}\n    </style>\n    <div class=\"menu--inner\" part=\"inner\">\n      <slot></slot>\n    </div>`;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;\n        const menuButton = document.querySelector(`[popovertarget=\"${menuID}\"]`);\n        let topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');\n        let menuItems = this.querySelectorAll('a, button');\n        if (this.closest('.menu__wrapper')) {\n            menuItems = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });\n            topLevelmenuItems = menuItems;\n        }\n        const subMenus = this.querySelectorAll('details');\n        let subNextIndex;\n        let subPrevIndex;\n        // Set the needed CSS styles to connect the ID attribute to the anchor name\n        if (menuID && menuButton) {\n            this.setAttribute('role', 'menu');\n            this.setAttribute('popover', 'auto');\n            this.style['position-anchor'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-haspopup', 'true');\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.style['anchor-name'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-controls', menuID);\n        }\n        menuItems.forEach((item, index) => {\n            item.setAttribute('role', 'menuitem');\n            item.setAttribute('tabindex', '0');\n            if (index == 0) {\n                item.setAttribute('autofocus', true);\n            }\n        });\n        this.addEventListener('keydown', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {\n                const activeItem = document.activeElement;\n                const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;\n                const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;\n                switch (event.keyCode // change to event.key to key to use the above variable\n                ) {\n                    case 27: // Esc\n                        if (activeItem.closest('details')) {\n                            event.stopPropagation();\n                            event.preventDefault();\n                            activeItem.closest('details').removeAttribute('open');\n                            activeItem.closest('details').querySelector(':scope summary').focus();\n                        }\n                        else {\n                            event.stopPropagation();\n                            menuButton.focus();\n                        }\n                        break;\n                    case 32: // Space\n                    case 13: // Enter\n                        break;\n                    case 35: // end\n                        event.stopPropagation();\n                        event.preventDefault();\n                        this.querySelector('details[open]').removeAttribute('open');\n                        Array.from(menuItems)[menuItems.length - 1].focus();\n                        break;\n                    case 36: // home\n                        event.stopPropagation();\n                        event.preventDefault();\n                        this.querySelector('details[open]').removeAttribute('open');\n                        Array.from(menuItems)[0].focus();\n                        break;\n                    case 38: // up\n                        event.stopPropagation();\n                        event.preventDefault();\n                        if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                            if (Array.from(topLevelmenuItems)[prevIndex] != undefined)\n                                Array.from(topLevelmenuItems)[prevIndex].focus();\n                            else\n                                Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();\n                        }\n                        else if (activeItem.closest('details')) {\n                            const subMenuItems = activeItem\n                                .closest('details')\n                                .querySelectorAll('a, button, :scope details > summary');\n                            subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;\n                            if (Array.from(subMenuItems)[subPrevIndex] != undefined)\n                                Array.from(subMenuItems)[subPrevIndex].focus();\n                            else\n                                Array.from(subMenuItems)[subMenuItems.length - 1].focus();\n                        }\n                        break;\n                    case 40: // down\n                        event.stopPropagation();\n                        event.preventDefault();\n                        if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                            if (Array.from(topLevelmenuItems)[nextIndex] != undefined)\n                                Array.from(topLevelmenuItems)[nextIndex].focus();\n                            else\n                                Array.from(topLevelmenuItems)[0].focus();\n                        }\n                        else if (activeItem.closest('details')) {\n                            const subMenuItems = activeItem\n                                .closest('details')\n                                .querySelectorAll('a, button, :scope details > summary');\n                            subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;\n                            if (Array.from(subMenuItems)[subNextIndex] != undefined)\n                                Array.from(subMenuItems)[subNextIndex].focus();\n                            else\n                                Array.from(subMenuItems)[0].focus();\n                        }\n                        break;\n                }\n            }\n        });\n        this.addEventListener('toggle', (e) => {\n            var _a, _b, _c, _d;\n            const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });\n            this.dispatchEvent(updateEvent);\n            // Fix the focus\n            if (this.closest('.menu__wrapper')) {\n                menuItems[0].focus();\n            }\n            if (this.hasAttribute('popover-open')) {\n                e.preventDefault();\n                this.removeAttribute('popover-open');\n                this.hidePopover();\n            }\n            if (this.matches(':popover-open') && document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) {\n                (_a = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'true');\n                (_b = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _b === void 0 ? void 0 : _b.classList.add('active');\n            }\n            else {\n                (_c = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-pressed');\n                (_d = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _d === void 0 ? void 0 : _d.classList.remove('active');\n            }\n        });\n        this.addEventListener('click', (event) => {\n            if (event &&\n                event.target instanceof HTMLElement &&\n                event.target.closest('button:has(+ iam-menu:not([popover]))')) {\n                const button = event.target.closest('button:has(+ iam-menu)');\n                button === null || button === void 0 ? void 0 : button.classList.toggle('open');\n            }\n            else if (event && event.target instanceof HTMLElement && event.target.closest('button.selectable')) {\n                const button = event.target.closest('button.selectable');\n                if (this.hasAttribute('multiple')) {\n                    button.classList.toggle('selected');\n                }\n                else if (button === null || button === void 0 ? void 0 : button.classList.contains('selected')) {\n                    this.querySelectorAll('.selected').forEach((item) => {\n                        item.classList.remove('selected');\n                    });\n                }\n                else {\n                    this.querySelectorAll('.selected').forEach((item) => {\n                        item.classList.remove('selected');\n                    });\n                    button.classList.add('selected');\n                }\n            }\n        });\n        // safari and firefox anchor fix for cards\n        if (!CSS.supports('top', 'anchor(top)')) {\n            document.addEventListener('click', (event) => {\n                if (event.originalTarget && event.originalTarget.matches('[popovertarget]')) {\n                    const button = event.originalTarget;\n                    const popoverID = button.getAttribute('popovertarget');\n                    const popover = document.getElementById(popoverID);\n                    const viewportOffset = button.getBoundingClientRect();\n                    const top = viewportOffset.top;\n                    const left = viewportOffset.left;\n                    popover.style.setProperty('top', top + 'px');\n                    popover.style.setProperty('left', left + button.clientWidth + 'px');\n                }\n            });\n        }\n    }\n}\nexport default iamMenu;\n","import iamMenu from '../menu/menu.component.js';\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'split-button',\n});\nclass iamSplitButton extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/split-button.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"split-button\">\n      <slot></slot>\n      <div class=\"dropdown\">\n        <button class=\"btn btn-split\" part=\"dropdown\" popovertarget=\"actions\" style=\"anchor-name: --anchor-el;\" title=\"Further actions\">\n          <i class=\"fa fa-angle-down fa-light\"></i>\n        </button>\n\n        <iam-menu id=\"actions\" style=\"position-anchor: --anchor-el;\" popover>\n          <slot name=\"menu-item\"></slot>\n        </iam-menu>\n\n      </div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const dropdown = this.shadowRoot.querySelector('.split-menu');\n        const splitBtn = this.shadowRoot.querySelector('.btn-split');\n        const html = document.querySelector('html');\n        const mainButton = this.querySelector('.btn');\n        if (!window.customElements.get(`iam-menu`))\n            window.customElements.define(`iam-menu`, iamMenu);\n        splitBtn.className = `${mainButton.className} btn-split`;\n        if (mainButton.disabled) {\n            splitBtn.disabled = true;\n        }\n        if (mainButton.classList.contains('btn-sm')) {\n            splitBtn.classList.add('btn-sm');\n        }\n    }\n}\nexport default iamSplitButton;\n"],"names":["iamMenu","template","menuID","menuButton","topLevelmenuItems","menuItems","subNextIndex","subPrevIndex","item","index","event","activeItem","prevIndex","nextIndex","subMenuItems","e","_a","_b","_c","_d","updateEvent","button","popoverID","popover","viewportOffset","top","left","iamSplitButton","splitBtn","mainButton"],"mappings":"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"}
+{"version":3,"file":"split-button.component.min.js","sources":["../menu/menu.component.js","split-button.component.js"],"sourcesContent":["class iamMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const menuCSS = `@import \"${assetLocation}/css/components/menu.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style>\r\n    ${menuCSS}\r\n    </style>\r\n    <div class=\"menu--inner\" part=\"inner\">\r\n      <slot></slot>\r\n    </div>`;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;\n        const menuButton = document.querySelector(`[popovertarget=\"${menuID}\"]`);\n        let topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');\n        let menuItems = this.querySelectorAll('a, button');\n        if (this.closest('.menu__wrapper')) {\n            menuItems = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });\n            topLevelmenuItems = menuItems;\n        }\n        const subMenus = this.querySelectorAll('details');\n        let subNextIndex;\n        let subPrevIndex;\n        // Set the needed CSS styles to connect the ID attribute to the anchor name\n        if (menuID && menuButton) {\n            this.setAttribute('role', 'menu');\n            this.setAttribute('popover', 'auto');\n            this.style['position-anchor'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-haspopup', 'true');\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.style['anchor-name'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-controls', menuID);\n        }\n        menuItems.forEach((item, index) => {\n            item.setAttribute('role', 'menuitem');\n            item.setAttribute('tabindex', '0');\n            if (index == 0) {\n                item.setAttribute('autofocus', true);\n            }\n        });\n        this.addEventListener('keydown', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {\n                const activeItem = document.activeElement;\n                const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;\n                const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;\n                switch (event.keyCode // change to event.key to key to use the above variable\n                ) {\n                    case 27: // Esc\n                        if (activeItem.closest('details')) {\n                            event.stopPropagation();\n                            event.preventDefault();\n                            activeItem.closest('details').removeAttribute('open');\n                            activeItem.closest('details').querySelector(':scope summary').focus();\n                        }\n                        else {\n                            event.stopPropagation();\n                            menuButton.focus();\n                        }\n                        break;\n                    case 32: // Space\n                    case 13: // Enter\n                        break;\n                    case 35: // end\n                        event.stopPropagation();\n                        event.preventDefault();\n                        this.querySelector('details[open]').removeAttribute('open');\n                        Array.from(menuItems)[menuItems.length - 1].focus();\n                        break;\n                    case 36: // home\n                        event.stopPropagation();\n                        event.preventDefault();\n                        this.querySelector('details[open]').removeAttribute('open');\n                        Array.from(menuItems)[0].focus();\n                        break;\n                    case 38: // up\n                        event.stopPropagation();\n                        event.preventDefault();\n                        if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                            if (Array.from(topLevelmenuItems)[prevIndex] != undefined)\n                                Array.from(topLevelmenuItems)[prevIndex].focus();\n                            else\n                                Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();\n                        }\n                        else if (activeItem.closest('details')) {\n                            const subMenuItems = activeItem\n                                .closest('details')\n                                .querySelectorAll('a, button, :scope details > summary');\n                            subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;\n                            if (Array.from(subMenuItems)[subPrevIndex] != undefined)\n                                Array.from(subMenuItems)[subPrevIndex].focus();\n                            else\n                                Array.from(subMenuItems)[subMenuItems.length - 1].focus();\n                        }\n                        break;\n                    case 40: // down\n                        event.stopPropagation();\n                        event.preventDefault();\n                        if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                            if (Array.from(topLevelmenuItems)[nextIndex] != undefined)\n                                Array.from(topLevelmenuItems)[nextIndex].focus();\n                            else\n                                Array.from(topLevelmenuItems)[0].focus();\n                        }\n                        else if (activeItem.closest('details')) {\n                            const subMenuItems = activeItem\n                                .closest('details')\n                                .querySelectorAll('a, button, :scope details > summary');\n                            subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;\n                            if (Array.from(subMenuItems)[subNextIndex] != undefined)\n                                Array.from(subMenuItems)[subNextIndex].focus();\n                            else\n                                Array.from(subMenuItems)[0].focus();\n                        }\n                        break;\n                }\n            }\n        });\n        this.addEventListener('toggle', (e) => {\n            var _a, _b, _c, _d;\n            const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });\n            this.dispatchEvent(updateEvent);\n            // Fix the focus\n            if (this.closest('.menu__wrapper')) {\n                menuItems[0].focus();\n            }\n            if (this.hasAttribute('popover-open')) {\n                e.preventDefault();\n                this.removeAttribute('popover-open');\n                this.hidePopover();\n            }\n            if (this.matches(':popover-open') && document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) {\n                (_a = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'true');\n                (_b = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _b === void 0 ? void 0 : _b.classList.add('active');\n            }\n            else {\n                (_c = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-pressed');\n                (_d = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _d === void 0 ? void 0 : _d.classList.remove('active');\n            }\n        });\n        this.addEventListener('click', (event) => {\n            if (event &&\n                event.target instanceof HTMLElement &&\n                event.target.closest('button:has(+ iam-menu:not([popover]))')) {\n                const button = event.target.closest('button:has(+ iam-menu)');\n                button === null || button === void 0 ? void 0 : button.classList.toggle('open');\n            }\n            else if (event && event.target instanceof HTMLElement && event.target.closest('button.selectable')) {\n                const button = event.target.closest('button.selectable');\n                if (this.hasAttribute('multiple')) {\n                    button.classList.toggle('selected');\n                }\n                else if (button === null || button === void 0 ? void 0 : button.classList.contains('selected')) {\n                    this.querySelectorAll('.selected').forEach((item) => {\n                        item.classList.remove('selected');\n                    });\n                }\n                else {\n                    this.querySelectorAll('.selected').forEach((item) => {\n                        item.classList.remove('selected');\n                    });\n                    button.classList.add('selected');\n                }\n            }\n        });\n        // safari and firefox anchor fix for cards\n        if (!CSS.supports('top', 'anchor(top)')) {\n            document.addEventListener('click', (event) => {\n                if (event.originalTarget && event.originalTarget.matches('[popovertarget]')) {\n                    const button = event.originalTarget;\n                    const popoverID = button.getAttribute('popovertarget');\n                    const popover = document.getElementById(popoverID);\n                    const viewportOffset = button.getBoundingClientRect();\n                    const top = viewportOffset.top;\n                    const left = viewportOffset.left;\n                    popover.style.setProperty('top', top + 'px');\n                    popover.style.setProperty('left', left + button.clientWidth + 'px');\n                }\n            });\n        }\n    }\n}\nexport default iamMenu;\n","import iamMenu from '../menu/menu.component';\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'split-button',\n});\nclass iamSplitButton extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/split-button.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style>\r\n    ${loadCSS}\r\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\r\n    </style>\r\n    <div class=\"split-button\">\r\n      <slot></slot>\r\n      <div class=\"dropdown\">\r\n        <button class=\"btn btn-split\" part=\"dropdown\" popovertarget=\"actions\" style=\"anchor-name: --anchor-el;\" title=\"Further actions\">\r\n          <i class=\"fa fa-angle-down fa-light\"></i>\r\n        </button>\r\n\r\n        <iam-menu id=\"actions\" style=\"position-anchor: --anchor-el;\" popover>\r\n          <slot name=\"menu-item\"></slot>\r\n        </iam-menu>\r\n\r\n      </div>\r\n    </div>\r\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const dropdown = this.shadowRoot.querySelector('.split-menu');\n        const splitBtn = this.shadowRoot.querySelector('.btn-split');\n        const html = document.querySelector('html');\n        const mainButton = this.querySelector('.btn');\n        if (!window.customElements.get(`iam-menu`))\n            window.customElements.define(`iam-menu`, iamMenu);\n        splitBtn.className = `${mainButton.className} btn-split`;\n        if (mainButton.disabled) {\n            splitBtn.disabled = true;\n        }\n        if (mainButton.classList.contains('btn-sm')) {\n            splitBtn.classList.add('btn-sm');\n        }\n    }\n}\nexport default iamSplitButton;\n"],"names":["iamMenu","template","menuID","menuButton","topLevelmenuItems","menuItems","subNextIndex","subPrevIndex","item","index","event","activeItem","prevIndex","nextIndex","subMenuItems","e","_a","_b","_c","_d","updateEvent","button","popoverID","popover","viewportOffset","top","left","iamSplitButton","splitBtn","mainButton"],"mappings":";;;IAAA,MAAMA,UAAgB,WAAY,CAC9B,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOrB,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,MAAMC,EAAS,KAAK,aAAa,IAAI,EAAI,KAAK,aAAa,IAAI,EAAI,GAC7DC,EAAa,SAAS,cAAc,mBAAmBD,CAAM,IAAI,EACvE,IAAIE,EAAoB,KAAK,iBAAiB,yDAAyD,EACnGC,EAAY,KAAK,iBAAiB,WAAW,EAC7C,KAAK,QAAQ,gBAAgB,IAC7BA,EAAY,KAAK,WAAW,cAAc,MAAM,EAAE,iBAAiB,CAAE,QAAS,GAAM,EACpFD,EAAoBC,GAEP,KAAK,iBAAiB,SAAS,EAChD,IAAIC,EACAC,EAEAL,GAAUC,IACV,KAAK,aAAa,OAAQ,MAAM,EAChC,KAAK,aAAa,UAAW,MAAM,EACnC,KAAK,MAAM,iBAAiB,EAAI,KAAKD,CAAM,GACaC,GAAW,aAAa,gBAAiB,MAAM,EACvGA,GAAe,OAAyCA,EAAW,MAAM,aAAa,EAAI,KAAKD,CAAM,IAC7CC,GAAW,aAAa,gBAAiBD,CAAM,GAE3GG,EAAU,QAAQ,CAACG,EAAMC,IAAU,CAC/BD,EAAK,aAAa,OAAQ,UAAU,EACpCA,EAAK,aAAa,WAAY,GAAG,EAC7BC,GAAS,GACTD,EAAK,aAAa,YAAa,EAAI,CAE3C,CAAC,EACD,KAAK,iBAAiB,UAAYE,GAAU,CACxC,GAAIA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,oBAAoB,EAAG,CAC5F,MAAMC,EAAa,SAAS,cACtBC,EAAY,MAAM,KAAKR,CAAiB,EAAE,QAAQO,CAAU,EAAI,EAChEE,EAAY,MAAM,KAAKT,CAAiB,EAAE,QAAQO,CAAU,EAAI,EACtE,OAAQD,EAAM,QAC9B,CACoB,IAAK,IACGC,EAAW,QAAQ,SAAS,GAC5BD,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpBC,EAAW,QAAQ,SAAS,EAAE,gBAAgB,MAAM,EACpDA,EAAW,QAAQ,SAAS,EAAE,cAAc,gBAAgB,EAAE,MAAK,IAGnED,EAAM,gBAAe,EACrBP,EAAW,MAAK,GAEpB,MACJ,IAAK,IACL,IAAK,IACD,MACJ,IAAK,IACDO,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,KAAK,cAAc,eAAe,EAAE,gBAAgB,MAAM,EAC1D,MAAM,KAAKL,CAAS,EAAEA,EAAU,OAAS,CAAC,EAAE,MAAK,EACjD,MACJ,IAAK,IACDK,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,KAAK,cAAc,eAAe,EAAE,gBAAgB,MAAM,EAC1D,MAAM,KAAKL,CAAS,EAAE,CAAC,EAAE,MAAK,EAC9B,MACJ,IAAK,IAGD,GAFAK,EAAM,gBAAe,EACrBA,EAAM,eAAc,EAChB,MAAM,KAAKN,CAAiB,EAAE,QAAQO,CAAU,EAAI,GAChD,MAAM,KAAKP,CAAiB,EAAEQ,CAAS,GAAK,KAC5C,MAAM,KAAKR,CAAiB,EAAEQ,CAAS,EAAE,MAAK,EAE9C,MAAM,KAAKR,CAAiB,EAAEA,EAAkB,OAAS,CAAC,EAAE,MAAK,UAEhEO,EAAW,QAAQ,SAAS,EAAG,CACpC,MAAMG,EAAeH,EAChB,QAAQ,SAAS,EACjB,iBAAiB,qCAAqC,EAC3DJ,EAAe,MAAM,KAAKO,CAAY,EAAE,QAAQH,CAAU,EAAI,EAC1D,MAAM,KAAKG,CAAY,EAAEP,CAAY,GAAK,KAC1C,MAAM,KAAKO,CAAY,EAAEP,CAAY,EAAE,MAAK,EAE5C,MAAM,KAAKO,CAAY,EAAEA,EAAa,OAAS,CAAC,EAAE,MAAK,CAC/D,CACA,MACJ,IAAK,IAGD,GAFAJ,EAAM,gBAAe,EACrBA,EAAM,eAAc,EAChB,MAAM,KAAKN,CAAiB,EAAE,QAAQO,CAAU,EAAI,GAChD,MAAM,KAAKP,CAAiB,EAAES,CAAS,GAAK,KAC5C,MAAM,KAAKT,CAAiB,EAAES,CAAS,EAAE,MAAK,EAE9C,MAAM,KAAKT,CAAiB,EAAE,CAAC,EAAE,MAAK,UAErCO,EAAW,QAAQ,SAAS,EAAG,CACpC,MAAMG,EAAeH,EAChB,QAAQ,SAAS,EACjB,iBAAiB,qCAAqC,EAC3DL,EAAe,MAAM,KAAKQ,CAAY,EAAE,QAAQH,CAAU,EAAI,EAC1D,MAAM,KAAKG,CAAY,EAAER,CAAY,GAAK,KAC1C,MAAM,KAAKQ,CAAY,EAAER,CAAY,EAAE,MAAK,EAE5C,MAAM,KAAKQ,CAAY,EAAE,CAAC,EAAE,MAAK,CACzC,CACA,KACxB,CACY,CACJ,CAAC,EACD,KAAK,iBAAiB,SAAWC,GAAM,CACnC,IAAIC,EAAIC,EAAIC,EAAIC,EAChB,MAAMC,EAAc,IAAI,YAAYL,EAAE,SAAU,CAAE,OAAQ,CAAE,GAAI,KAAK,aAAa,IAAI,EAAG,OAAQA,EAAE,MAAM,EAAI,EAC7G,KAAK,cAAcK,CAAW,EAE1B,KAAK,QAAQ,gBAAgB,GAC7Bf,EAAU,CAAC,EAAE,MAAK,EAElB,KAAK,aAAa,cAAc,IAChCU,EAAE,eAAc,EAChB,KAAK,gBAAgB,cAAc,EACnC,KAAK,YAAW,GAEhB,KAAK,QAAQ,eAAe,GAAK,SAAS,cAAc,mBAAmB,KAAK,aAAa,IAAI,CAAC,IAAI,IACrGC,EAAK,SAAS,cAAc,mBAAmB,KAAK,aAAa,IAAI,CAAC,IAAI,KAAO,MAAQA,IAAO,QAAkBA,EAAG,aAAa,eAAgB,MAAM,GACxJC,EAAK,SAAS,cAAc,mBAAmB,KAAK,aAAa,IAAI,CAAC,IAAI,KAAO,MAAQA,IAAO,QAAkBA,EAAG,UAAU,IAAI,QAAQ,KAG3IC,EAAK,SAAS,cAAc,mBAAmB,KAAK,aAAa,IAAI,CAAC,IAAI,KAAO,MAAQA,IAAO,QAAkBA,EAAG,gBAAgB,cAAc,GACnJC,EAAK,SAAS,cAAc,mBAAmB,KAAK,aAAa,IAAI,CAAC,IAAI,KAAO,MAAQA,IAAO,QAAkBA,EAAG,UAAU,OAAO,QAAQ,EAEvJ,CAAC,EACD,KAAK,iBAAiB,QAAUT,GAAU,CACtC,GAAIA,GACAA,EAAM,kBAAkB,aACxBA,EAAM,OAAO,QAAQ,uCAAuC,EAAG,CAC/D,MAAMW,EAASX,EAAM,OAAO,QAAQ,wBAAwB,EACZW,GAAO,UAAU,OAAO,MAAM,CAClF,SACSX,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,mBAAmB,EAAG,CAChG,MAAMW,EAASX,EAAM,OAAO,QAAQ,mBAAmB,EACnD,KAAK,aAAa,UAAU,EAC5BW,EAAO,UAAU,OAAO,UAAU,EAEmBA,GAAO,UAAU,SAAS,UAAU,EACzF,KAAK,iBAAiB,WAAW,EAAE,QAASb,GAAS,CACjDA,EAAK,UAAU,OAAO,UAAU,CACpC,CAAC,GAGD,KAAK,iBAAiB,WAAW,EAAE,QAASA,GAAS,CACjDA,EAAK,UAAU,OAAO,UAAU,CACpC,CAAC,EACDa,EAAO,UAAU,IAAI,UAAU,EAEvC,CACJ,CAAC,EAEI,IAAI,SAAS,MAAO,aAAa,GAClC,SAAS,iBAAiB,QAAUX,GAAU,CAC1C,GAAIA,EAAM,gBAAkBA,EAAM,eAAe,QAAQ,iBAAiB,EAAG,CACzE,MAAMW,EAASX,EAAM,eACfY,EAAYD,EAAO,aAAa,eAAe,EAC/CE,EAAU,SAAS,eAAeD,CAAS,EAC3CE,EAAiBH,EAAO,sBAAqB,EAC7CI,EAAMD,EAAe,IACrBE,EAAOF,EAAe,KAC5BD,EAAQ,MAAM,YAAY,MAAOE,EAAM,IAAI,EAC3CF,EAAQ,MAAM,YAAY,OAAQG,EAAOL,EAAO,YAAc,IAAI,CACtE,CACJ,CAAC,CAET,CACJ,CCxLA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,cACb,CAAC,EACD,MAAMM,UAAuB,WAAY,CACrC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAM1B,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA,MAGvB,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,CAAC,KAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBtE,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CACC,KAAK,WAAW,cAAc,aAAa,EAC5D,MAAM2B,EAAW,KAAK,WAAW,cAAc,YAAY,EAC9C,SAAS,cAAc,MAAM,EAC1C,MAAMC,EAAa,KAAK,cAAc,MAAM,EACvC,OAAO,eAAe,IAAI,UAAU,GACrC,OAAO,eAAe,OAAO,WAAY7B,CAAO,EACpD4B,EAAS,UAAY,GAAGC,EAAW,SAAS,aACxCA,EAAW,WACXD,EAAS,SAAW,IAEpBC,EAAW,UAAU,SAAS,QAAQ,GACtCD,EAAS,UAAU,IAAI,QAAQ,CAEvC,CACJ"}

package/assets/js/components/std-address-lookup/std-address-lookup.component.js

@@ -1,4 +1,4 @@
-import iamAddressLookup from '../address-lookup/address-lookup.component.js';
+import iamAddressLookup from '../address-lookup/address-lookup.component';
 export const countries = [
     {
         "id": "urn:als:country:AF",
@@ -1569,120 +1569,120 @@ class iamSTDAddressLookup extends HTMLElement {
         if (!window.customElements.get(`iam-address-lookup`))
             window.customElements.define(`iam-address-lookup`, iamAddressLookup);
         const currentContent = this.innerHTML;
-        this.innerHTML = `<iam-address-lookup 
-    class="${this.getAttribute('class')}" 
-    ${this.hasAttribute('data-url') ? `data-url='${this.getAttribute('data-url')}?search_query='` : `data-url='/standardaddress.json?search_query='`}
-    data-postcode="true" 
-    data-min-chars="5" 
-    ${this.hasAttribute('data-title') ? `data-title='${this.getAttribute('data-title')}'` : `data-title='Find an address by postcode'`}
-    data-placeholder="UK, Isle of Man, & Channel Islands " 
-    ${this.hasAttribute('data-manual') ? 'data-manual' : ''}  
-    ${this.hasAttribute('data-allow-manual') ? 'data-allow-manual' : ''} 
-    ${this.hasAttribute('data-use') ? `data-use='${this.getAttribute('data-use')}'` : ''} 
-    ${this.hasAttribute('data-use-label') ? `data-use-label='${this.getAttribute('data-use-label')}'` : ''} 
-    ${this.hasAttribute('data-postcode-value') ? `data-postcode-value='${this.getAttribute('data-postcode-value')}'` : ''}
-    ${this.hasAttribute('data-list-class') ? `data-list-class='${this.getAttribute('data-list-class')}'` : ''}
-    ${this.hasAttribute('data-input-class') ? `data-input-class='${this.getAttribute('data-input-class')}'` : ''}
-    ${this.hasAttribute('data-error-msg') ? `data-error-msg='${this.getAttribute('data-error-msg')}'` : ''}
-    ${this.hasAttribute('data-use-default') ? `data-use-default` : ''}
-    ${this.hasAttribute('data-force-manual') ? `data-force-manual` : ''}
-    ${this.hasAttribute('data-matched') ? `data-matched='${this.getAttribute('data-matched')}'` : ''}
-    ${this.hasAttribute('data-matched-label') ? `data-matched-label='${this.getAttribute('data-matched-label')}'` : ''}
-    ${this.hasAttribute('data-disabled') ? 'data-disabled="disabled"' : ''} 
-    data-postcode-lookup-label="Back to UK postcode lookup">
-
-    <p class="hint pb-2 d-block" slot="hint">Unsure of the postcode? Check with the <a href="https://www.royalmail.com/find-a-postcode" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i>Royal Mail address finder</a></p>
-    <span class="h3 pb-2">Street address</span>
-
-    <fieldset class="atleastone mb-3">
-      <span class="invalid-feedback">You must complete at least one of the highlighted fields.</span>
-
-      <span class="hint mb-4">Please ensure details are provided for at least one of these fields.</span>
-
-      <label class="mb-1">Flat number <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[sub_building_name]` : 'sub_building_name'}" type="text" data-readonly data-required /></label>
-      <span class="hint mb-2">Flat, unit or floor number (e.g. Flat 5, or Floor 6)</span>
-      
-      <label class="mb-1">Building name <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[building_name]` : 'building_name'}" type="text" data-required maxlength="50"/></label>
-      <span class="hint mb-2">Name of the house or building</span>
-
-      <label>House Number <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[building_number]` : 'building_number'}" type="text" data-required data-readonly maxlength="50"/></label>
-      <span class="hint mb-2">House or street number (e.g. 42)</span>
-
-      <label class="mb-1">Street 1 <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[dependent_thoroughfare]` : 'dependent_thoroughfare'}" type="text" data-readonly data-required maxlength="81"/></label>
-      <span class="hint mb-2">Additional street name </span>
-
-      <label class="mb-1">Street 2 <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[thoroughfare]` : 'thoroughfare'}" type="text" data-readonly data-required maxlength="81"/></label>
-      <span class="hint mb-2">Primary street name</span>
-    </fieldset>
-
-
-    <span class="h3 pb-2">Locality details</span>
-    <label>Area${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[dependent_locality]` : 'dependent_locality'}" type="text" maxlength="35" data-readonly/></label>
-    <label>Village${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[locality]` : 'locality'}" type="text" maxlength="35" data-readonly/></label>
-    <label>Town / City${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[post_town]` : 'post_town'}" type="text" maxlength="30" data-readonly/></label>
-    <label>County${this.hasAttribute('data-show-required') && this.hasAttribute('data-county-required') ? '*' : (!this.hasAttribute('data-show-required') && !this.hasAttribute('data-county-required') ? ' (optional)' : '')} 
-    <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[postal_county]` : 'postal_county'}" ${this.hasAttribute('data-county-required') ? 'data-required' : ''} data-readonly>
-      <option></option>  
-      ${countiesString}
-    </select></label>
-    <label>Postcode${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[postcode]` : 'postcode'}" type="text" ${!this.hasAttribute('data-required') || this.hasAttribute('data-required') && this.getAttribute('data-required') == 'false' ? 'required data-required' : ''} data-readonly maxlength="8" ${this.hasAttribute('data-required') ? ' required' : ''}/></label>
-    <label>Country${this.hasAttribute('data-show-required') && this.hasAttribute('data-country-required') ? '*' : (!this.hasAttribute('data-show-required') && !this.hasAttribute('data-county-required') ? ' (optional)' : '')} 
-      <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[region]` : 'region'}" data-readonly ${this.hasAttribute('data-country-required') ? 'data-required' : ''}>
-        <option value=""></option>
-        ${regionsString}
-      </select>
-    </label>
-
+        this.innerHTML = `<iam-address-lookup 
+    class="${this.getAttribute('class')}" 
+    ${this.hasAttribute('data-url') ? `data-url='${this.getAttribute('data-url')}?search_query='` : `data-url='/standardaddress.json?search_query='`}
+    data-postcode="true" 
+    data-min-chars="5" 
+    ${this.hasAttribute('data-title') ? `data-title='${this.getAttribute('data-title')}'` : `data-title='Find an address by postcode'`}
+    data-placeholder="UK, Isle of Man, & Channel Islands " 
+    ${this.hasAttribute('data-manual') ? 'data-manual' : ''}  
+    ${this.hasAttribute('data-allow-manual') ? 'data-allow-manual' : ''} 
+    ${this.hasAttribute('data-use') ? `data-use='${this.getAttribute('data-use')}'` : ''} 
+    ${this.hasAttribute('data-use-label') ? `data-use-label='${this.getAttribute('data-use-label')}'` : ''} 
+    ${this.hasAttribute('data-postcode-value') ? `data-postcode-value='${this.getAttribute('data-postcode-value')}'` : ''}
+    ${this.hasAttribute('data-list-class') ? `data-list-class='${this.getAttribute('data-list-class')}'` : ''}
+    ${this.hasAttribute('data-input-class') ? `data-input-class='${this.getAttribute('data-input-class')}'` : ''}
+    ${this.hasAttribute('data-error-msg') ? `data-error-msg='${this.getAttribute('data-error-msg')}'` : ''}
+    ${this.hasAttribute('data-use-default') ? `data-use-default` : ''}
+    ${this.hasAttribute('data-force-manual') ? `data-force-manual` : ''}
+    ${this.hasAttribute('data-matched') ? `data-matched='${this.getAttribute('data-matched')}'` : ''}
+    ${this.hasAttribute('data-matched-label') ? `data-matched-label='${this.getAttribute('data-matched-label')}'` : ''}
+    ${this.hasAttribute('data-disabled') ? 'data-disabled="disabled"' : ''} 
+    data-postcode-lookup-label="Back to UK postcode lookup">
+
+    <p class="hint pb-2 d-block" slot="hint">Unsure of the postcode? Check with the <a href="https://www.royalmail.com/find-a-postcode" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i>Royal Mail address finder</a></p>
+    <span class="h3 pb-2">Street address</span>
+
+    <fieldset class="atleastone mb-3">
+      <span class="invalid-feedback">You must complete at least one of the highlighted fields.</span>
+
+      <span class="hint mb-4">Please ensure details are provided for at least one of these fields.</span>
+
+      <label class="mb-1">Flat number <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[sub_building_name]` : 'sub_building_name'}" type="text" data-readonly data-required /></label>
+      <span class="hint mb-2">Flat, unit or floor number (e.g. Flat 5, or Floor 6)</span>
+      
+      <label class="mb-1">Building name <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[building_name]` : 'building_name'}" type="text" data-required maxlength="50"/></label>
+      <span class="hint mb-2">Name of the house or building</span>
+
+      <label>House Number <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[building_number]` : 'building_number'}" type="text" data-required data-readonly maxlength="50"/></label>
+      <span class="hint mb-2">House or street number (e.g. 42)</span>
+
+      <label class="mb-1">Street 1 <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[dependent_thoroughfare]` : 'dependent_thoroughfare'}" type="text" data-readonly data-required maxlength="81"/></label>
+      <span class="hint mb-2">Additional street name </span>
+
+      <label class="mb-1">Street 2 <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[thoroughfare]` : 'thoroughfare'}" type="text" data-readonly data-required maxlength="81"/></label>
+      <span class="hint mb-2">Primary street name</span>
+    </fieldset>
+
+
+    <span class="h3 pb-2">Locality details</span>
+    <label>Area${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[dependent_locality]` : 'dependent_locality'}" type="text" maxlength="35" data-readonly/></label>
+    <label>Village${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[locality]` : 'locality'}" type="text" maxlength="35" data-readonly/></label>
+    <label>Town / City${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[post_town]` : 'post_town'}" type="text" maxlength="30" data-readonly/></label>
+    <label>County${this.hasAttribute('data-show-required') && this.hasAttribute('data-county-required') ? '*' : (!this.hasAttribute('data-show-required') && !this.hasAttribute('data-county-required') ? ' (optional)' : '')} 
+    <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[postal_county]` : 'postal_county'}" ${this.hasAttribute('data-county-required') ? 'data-required' : ''} data-readonly>
+      <option></option>  
+      ${countiesString}
+    </select></label>
+    <label>Postcode${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[postcode]` : 'postcode'}" type="text" ${!this.hasAttribute('data-required') || this.hasAttribute('data-required') && this.getAttribute('data-required') == 'false' ? 'required data-required' : ''} data-readonly maxlength="8" ${this.hasAttribute('data-required') ? ' required' : ''}/></label>
+    <label>Country${this.hasAttribute('data-show-required') && this.hasAttribute('data-country-required') ? '*' : (!this.hasAttribute('data-show-required') && !this.hasAttribute('data-county-required') ? ' (optional)' : '')} 
+      <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[region]` : 'region'}" data-readonly ${this.hasAttribute('data-country-required') ? 'data-required' : ''}>
+        <option value=""></option>
+        ${regionsString}
+      </select>
+    </label>
+
     ${this.hasAttribute('data-allow-overseas') ?
-            `<fieldset class="overseas">
-
-      <span class="h3 pb-2">Street address</span>
-
-      <fieldset class="overseas-atleastone">
-        <span class="invalid-feedback">You must complete at least one of the highlighted fields.</span>
-
-        <span class="hint mb-4">Please ensure details are provided for at least one of these fields.</span>
-
-
-        <label class="mb-1">Flat number${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][sub_building_name]` : 'overseas[sub_building_name]'}" type="text" data-overseas-required /></label>
-        <span class="hint d-block mb-2">Flat, unit or floor number (e.g. Flat 5, or Floor 6)</span>
-
-        <label class="mb-1">Building name${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][building_name]` : 'overseas[building_name]'}" type="text" data-overseas-required maxlength="50" /></label>
-        <span class="hint d-block mb-2">Name of the house or building</span>
-
-        <label class="mb-1">House number${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][building_number]` : 'overseas[building_number]'}" type="text" data-overseas-required maxlength="50" /></label>
-        <span class="hint d-block mb-2">House or street number (e.g. 42)</span>
-
-        <label class="mb-2">Street name${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][thoroughfare]` : 'overseas[thoroughfare]'}" type="text" data-overseas-required maxlength="81" /></label>
-      </fieldset>
-      <span class="h3 pb-2">Locality details</span>
-
-
-
-      <label class="mb-1">Locality${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][dependent_locality]` : 'overseas[dependent_locality]'}" type="text" /></label>
-      <span class="hint d-block mb-2">Main locality, such as the village, suburb, or district</span>
-
-
-      <label>Town / City${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][post_town]` : 'overseas[post_town]'}" type="text" maxlength="30" /></label>
-      <label>State / Province / Region${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][double_dependent_locality]` : 'overseas[double_dependent_locality]'}" type="text" /></label>
-      <label>Postcode / ZIP code${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][zip_code]` : 'overseas[zip_code]'}" type="text" /></label>
-      
-      <label>Country <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][country_code]` : 'overseas[country_code]'}" data-overseas-required>
-        <option value=""></option>
-        ${countriesString}
-      </select></label>
-    </fieldset>
-
-    <button slot="actions" type="button" id="overseasToggle" class="link toggleOverseas">Use overseas address</button>` : ''}
-    ${this.hasAttribute('data-address-unknown') ? `<label slot="actions" id="address_unknown_checkbox"><input type="checkbox" value="true" name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[${this.getAttribute('data-address-unknown')}]` : this.getAttribute('data-address-unknown')}" ${this.hasAttribute('data-address-unknown-checked') ? 'checked="checked"' : ''}/> Address unknown</label>` : ``}
-    <div class="bg-light text-center px-3" slot="afterList">
-      <p class="p-2">Can't find an address? Check details with the <br/><a href="" class="fa-new"><i class="fa-regular fa-arrow-up-right-from-square"></i>Royal mail address finder</a></p>
-      ${this.hasAttribute('data-allow-overseas') ? `<hr/><p class="p-2">If the address doesn’t exist you can enter manually <br /><button type="button" id="overseasToggleInline" class="mt-1 mb-0 btn btn-action"><i class="fa-regular fa-edit me-1"></i>Enter address manually</button></p>` : ''}
-    </div>
-    <div class="bg-light text-center px-3" slot="beforeList">
-      <p class="p-2"><span class="default">Welsh</span><span class="alt">English</span> language addresses are available <br /><button type="button" id="languageToggle" class="mt-1 mb-0 btn btn-action"><i class="fa-regular fa-globe me-1"></i>Show addresses in <span class="default">Welsh</span><span class="alt">English</span></button></p>
-    </div>
-    ${currentContent}
+            `<fieldset class="overseas">
+
+      <span class="h3 pb-2">Street address</span>
+
+      <fieldset class="overseas-atleastone">
+        <span class="invalid-feedback">You must complete at least one of the highlighted fields.</span>
+
+        <span class="hint mb-4">Please ensure details are provided for at least one of these fields.</span>
+
+
+        <label class="mb-1">Flat number${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][sub_building_name]` : 'overseas[sub_building_name]'}" type="text" data-overseas-required /></label>
+        <span class="hint d-block mb-2">Flat, unit or floor number (e.g. Flat 5, or Floor 6)</span>
+
+        <label class="mb-1">Building name${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][building_name]` : 'overseas[building_name]'}" type="text" data-overseas-required maxlength="50" /></label>
+        <span class="hint d-block mb-2">Name of the house or building</span>
+
+        <label class="mb-1">House number${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][building_number]` : 'overseas[building_number]'}" type="text" data-overseas-required maxlength="50" /></label>
+        <span class="hint d-block mb-2">House or street number (e.g. 42)</span>
+
+        <label class="mb-2">Street name${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][thoroughfare]` : 'overseas[thoroughfare]'}" type="text" data-overseas-required maxlength="81" /></label>
+      </fieldset>
+      <span class="h3 pb-2">Locality details</span>
+
+
+
+      <label class="mb-1">Locality${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][dependent_locality]` : 'overseas[dependent_locality]'}" type="text" /></label>
+      <span class="hint d-block mb-2">Main locality, such as the village, suburb, or district</span>
+
+
+      <label>Town / City${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][post_town]` : 'overseas[post_town]'}" type="text" maxlength="30" /></label>
+      <label>State / Province / Region${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][double_dependent_locality]` : 'overseas[double_dependent_locality]'}" type="text" /></label>
+      <label>Postcode / ZIP code${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][zip_code]` : 'overseas[zip_code]'}" type="text" /></label>
+      
+      <label>Country <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][country_code]` : 'overseas[country_code]'}" data-overseas-required>
+        <option value=""></option>
+        ${countriesString}
+      </select></label>
+    </fieldset>
+
+    <button slot="actions" type="button" id="overseasToggle" class="link toggleOverseas">Use overseas address</button>` : ''}
+    ${this.hasAttribute('data-address-unknown') ? `<label slot="actions" id="address_unknown_checkbox"><input type="checkbox" value="true" name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[${this.getAttribute('data-address-unknown')}]` : this.getAttribute('data-address-unknown')}" ${this.hasAttribute('data-address-unknown-checked') ? 'checked="checked"' : ''}/> Address unknown</label>` : ``}
+    <div class="bg-light text-center px-3" slot="afterList">
+      <p class="p-2">Can't find an address? Check details with the <br/><a href="" class="fa-new"><i class="fa-regular fa-arrow-up-right-from-square"></i>Royal mail address finder</a></p>
+      ${this.hasAttribute('data-allow-overseas') ? `<hr/><p class="p-2">If the address doesn’t exist you can enter manually <br /><button type="button" id="overseasToggleInline" class="mt-1 mb-0 btn btn-action"><i class="fa-regular fa-edit me-1"></i>Enter address manually</button></p>` : ''}
+    </div>
+    <div class="bg-light text-center px-3" slot="beforeList">
+      <p class="p-2"><span class="default">Welsh</span><span class="alt">English</span> language addresses are available <br /><button type="button" id="languageToggle" class="mt-1 mb-0 btn btn-action"><i class="fa-regular fa-globe me-1"></i>Show addresses in <span class="default">Welsh</span><span class="alt">English</span></button></p>
+    </div>
+    ${currentContent}
     </iam-address-lookup>`;
         const addressComponent = this.querySelector('iam-address-lookup');
         const overseasToggle = this.querySelector('#overseasToggle');