@iamproperty/components 6.1.0--beta → 6.1.0--beta3

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

@@ -1,6 +1,6 @@
 /*!
-  * iamKey v6.1.0--beta
-  * Copyright 2022-2024 iamproperty
+  * iamKey v6.1.0--beta3
+  * Copyright 2022-2025 iamproperty
   */import x from"js-cookie";var g=function(S,h,a,o){function l(c){return c instanceof a?c:new a(function(u){u(c)})}return new(a||(a=Promise))(function(c,u){function b(d){try{m(o.next(d))}catch(f){u(f)}}function v(d){try{m(o.throw(d))}catch(f){u(f)}}function m(d){d.done?c(d.value):l(d.value).then(b,v)}m((o=o.apply(S,h||[])).next())})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Address Lookup"});class j extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const h=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",a=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${h}/css/core.min.css`,o=document.createElement("template");o.innerHTML=`
     <style>
     @import "${a}";

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

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

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

@@ -1,6 +1,6 @@
 /*!
-  * iamKey v6.1.0--beta
-  * Copyright 2022-2024 iamproperty
+  * iamKey v6.1.0--beta3
+  * Copyright 2022-2025 iamproperty
   */const x=(e,t)=>{for(let a=1;a<=10;a++){if(e.hasAttribute(`data-colour-${a}`)){let i=e.getAttribute(`data-colour-${a}`);e.style.setProperty(`--chart-colour-${a}`,`var(--chart-colour-${i})`),e.style.setProperty(`--chart-colour-${a}-hover`,`var(--chart-colour-${i}-hover)`)}Array.from(t.querySelectorAll(`[data-colour-${a}]`)).forEach(i=>{let r=i.getAttribute(`data-colour-${a}`);i.style.setProperty(`--chart-colour-${a}-set`,`var(--chart-colour-${r})`),i.style.setProperty(`--chart-colour-${a}-hover`,`var(--chart-colour-${r}-hover)`)})}return!0},u=(e,t,a)=>{const i=t.querySelector(".chart__key");i.innerHTML="";const r=t.querySelector(".chart__guidelines");r.innerHTML="";const o=t.querySelector(".chart__yaxis");o.innerHTML="",Array.from(t.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map(n=>{n.remove()});let{xaxis:c}=d(e);return _(e,a),S(t,a,i),q(e,r),M(e,o),c&&F(t),!0},k=function(e,t){let a=t.querySelector(".chart");a.addEventListener("mousemove",c=>{if(c&&c.target instanceof HTMLElement&&c.target.closest("td:not(:first-child")){var n=c.target.closest("td:not(:first-child").getBoundingClientRect();let s=c.clientX-n.left,l=c.clientY-n.top;a.setAttribute("style",`--cursor-x: ${s}px; --cursor-y: ${l}px;`)}});let i=t.querySelectorAll("label");Array.from(i).forEach(c=>{t.querySelector(`input#${c.getAttribute("for")}`).checked?c.setAttribute("part","key-checked"):c.setAttribute("part","key-unchecked")});let r=e.querySelector("table"),o=t.querySelector("table");t.addEventListener("change",function(c){let n=c.target;const h=new CustomEvent("view-change",{detail:{"data-dataset":n.getAttribute("data-dataset"),label:n.getAttribute("data-label"),checked:n.checked}});e.dispatchEvent(h),Array.from(i).forEach(s=>{var l;!((l=t.querySelector(`input#${s.getAttribute("for")}`))===null||l===void 0)&&l.checked?s.setAttribute("part","key-checked"):s.setAttribute("part","key-unchecked")}),o.innerHTML=r.innerHTML,_(e,o)})},A=function(e,t){let a=e.querySelector("table"),i=t.querySelector("table");const r=(h,s)=>{s.disconnect(),n.disconnect();for(const l of h)(l.attributeName=="class"||l.type==="attributes"||l.type==="attributes")&&(i.innerHTML=a.innerHTML,u(e,t,i));s.observe(a,{characterData:!0,subtree:!0}),n.observe(e,{attributes:!0})},o=(h,s)=>{s.disconnect(),n.disconnect();for(const l of h)(l.type=="characterData"||l.type=="childList"&&l.addedNodes.length)&&(i.innerHTML=a.innerHTML,u(e,t,i));s.observe(a,{characterData:!0,subtree:!0}),n.observe(e,{attributes:!0})};let c=new MutationObserver(o),n=new MutationObserver(r);return c.observe(a,{characterData:!0,subtree:!0}),n.observe(e,{attributes:!0}),!0},d=function(e){let t=e.shadowRoot.querySelector(".chart__wrapper table"),a=e.hasAttribute("data-min")?e.getAttribute("data-min"):0,i=e.hasAttribute("data-max")?e.getAttribute("data-max"):z(e,t),r=e.hasAttribute("data-yaxis")?e.getAttribute("data-yaxis").split(","):[],o=e.hasAttribute("data-guidelines")?e.getAttribute("data-guidelines").split(","):[],c=e.hasAttribute("data-xaxis")?e.getAttribute("data-xaxis").split(","):null;return{min:a,max:i,yaxis:r,xaxis:c,guidelines:o}};function z(e,t){const a=e.classList.contains("chart--stacked")?"tbody tr":"tbody td:not(:first-child)";let i=Array.from(t.querySelectorAll(a)).map(o=>o.getAttribute("data-numeric")),r=Math.max(...i);return Math.ceil(r)}const b=function(e,t,a,i){let r=String(e);r=r.replace("\xA3",""),r=r.replace("%",""),r=r.replace(",",""),r=Number.parseFloat(r);let o=(r-t)/(a-t)*100,c=o,n=0;return i&&i!=0&&(n=(i-t)/(a-t)*100),t<0&&(n=Math.abs(t/(a-t)*100),r<0?(o=n-o,n=n-o,c=n):(o=o-n,c=o+n)),{percent:o,axis:c,bottom:n}},_=function(e,t){Array.from(t.querySelectorAll("tbody tr")).forEach(r=>{let o=0;Array.from(r.querySelectorAll("td:not(:first-child)")).forEach(c=>{let n=parseFloat(c.textContent.replace("\xA3","").replace("%","").replace(",",""));c.setAttribute("data-numeric",n),c.setAttribute("data-value",c.textContent),getComputedStyle(c).display!="none"&&(o+=n)}),r.setAttribute("data-numeric",o)});let{min:a,max:i}=d(e);Array.from(t.querySelectorAll("tbody tr")).forEach((r,o)=>{let c=r.querySelector("td:first-child, th:first-child")?r.querySelector("td:first-child, th:first-child").textContent:"";r.setAttribute("part","group");let n=(r.getAttribute("data-numeric")-a)/(i-a)*100;r.style.setProperty("--percent",`${n}%`),Array.from(r.querySelectorAll("td:not([data-label])")).forEach((l,p)=>{p==0?l.setAttribute("part","xaxis-label"):l.setAttribute("part","value"),r.querySelectorAll("td").length>2&&l.setAttribute("data-label",t.querySelectorAll("thead th")[p].textContent)});let h=r.hasAttribute("data-min")?r.getAttribute("data-min"):a,s=r.hasAttribute("data-max")?r.getAttribute("data-max"):i;if(h<0){let l=Math.abs(h/(s-h)*100);e.setAttribute("style",`--min-bottom: ${l}%;`)}r.style.setProperty("--row-index",o+1),Array.from(r.querySelectorAll('td[data-numeric]:not([data-label="Min"]):not([data-label="Max"]):not(:first-child)')).forEach(l=>{if(getComputedStyle(l).display=="none")return;const f=l.innerHTML,v=Number.parseFloat(l.getAttribute("data-numeric")),m=Number.parseFloat(l.getAttribute("data-start"));if(l.querySelector("span[data-group]")||(l.innerHTML=`<span data-group="${c}" ${l.hasAttribute("data-label")?`data-label="${l.getAttribute("data-label")}"`:""} part="popover">${f}</span>`),!l.hasAttribute("style")){let{percent:y,bottom:g,axis:w}=b(v,h,s,m);l.setAttribute("data-percent",y),l.setAttribute("style",`--bottom:${g}%;--percent:${y}%;--axis:${w}%;`)}})})},C=function(e){let t=e.querySelector(".chart__wrapper"),a=e.querySelector(".chart__spacer span"),i=e.querySelector(".chart table"),r="";Array.from(i.querySelectorAll("tbody tr td:first-child")).forEach(o=>{typeof o.textContent<"u"&&o.textContent.length>r.length&&(r=o.textContent)}),t.setAttribute("data-longest-label",r),a.innerHTML=r},$=function(e){let t=e.querySelector(".chart__wrapper"),a=e.querySelector(".chart table"),i="";Array.from(a.querySelectorAll("tbody tr td:not(:first-child) span")).forEach(r=>{typeof r.textContent<"u"&&r.textContent.length>i.length&&(i=r.textContent)}),t.setAttribute("data-longest-value",i)},S=function(e,t,a){const i=`chart-${Date.now()+(Math.floor(Math.random()*100)+1)}`;let r,o=Array.from(t.querySelectorAll("thead th"));return o.forEach((c,n)=>{n!=0&&(r=L(i,n,c.textContent,a,e,r)),n==50&&(o.length=n+1)}),!0};function L(e,t,a,i,r,o){let c=document.createElement("input");c.setAttribute("name",`${e}-dataset-${t}`),c.setAttribute("id",`${e}-dataset-${t}`),c.setAttribute("data-dataset",`${t}`),c.setAttribute("data-label",`${a}`),c.checked=!0,c.setAttribute("type","checkbox"),t==1?r.prepend(c):r.insertBefore(c,o.nextSibling),o=c;let n=document.createElement("label");return n.setAttribute("class","key btn btn-action"),n.setAttribute("for",`${e}-dataset-${t}`),n.setAttribute("data-label",`${a}`),n.setAttribute("part","key"),n.innerHTML=`${a}`,i.append(n),o}const q=function(e,t){let{min:a,max:i,yaxis:r,guidelines:o}=d(e);o.length||(o=r),t.innerHTML="";for(var c=0;c<o.length;c++){let n=parseFloat(o[c].replace("\xA3","").replace("%","").replace(",","")),{axis:h}=b(n,a,i);t.innerHTML+=`<div class="guideline" style="--percent:${h}%;">${r.indexOf(o[c])!=-1?`<span>${o[c]}</span>`:""}</div>`}},M=function(e,t){let{min:a,max:i,yaxis:r}=d(e);t.innerHTML="";for(var o=0;o<r.length;o++){let c=parseFloat(r[o].replace("\xA3","").replace("%","")),{axis:n}=b(c,a,i);t.innerHTML+=`<div class="axis__point" style="--percent:${n}%;"><span>${r[o]}</span></div>`}},F=function(e){const t=e.querySelector(".chart");let a=e.querySelector(".chart__xaxis");a||(a=document.createElement("div"),a.setAttribute("class","chart__xaxis")),t.prepend(a)},T=function(e){const t=e.querySelectorAll("thead th[title], tbody th[title]:first-child, tbody td[title]:first-child");Array.from(t).forEach(a=>{let i=`tooltip-${Date.now()}-${Math.floor(Math.random()*100)}`;a.innerHTML=`<button class="tooltip" popovertarget="${i}" part="tooltip" style="anchor-name: --${i};">${a.textContent}</button><span id="${i}" style="position-anchor: --${i};" popover part="tooltip__content" class="tooltip__content">${a.getAttribute("title")}</span>`})},D=e=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:e})},H=(e,t,a)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:t}),a.forEach(i=>{e.addEventListener(i,function(r){let o={event:i,element:t,target:r.target};Object.keys(r.detail).forEach(c=>{const n=r.detail[c];o[c]=n}),window.dataLayer.push(o)})}),!0);D("iam-barchart");class E extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
     <style>
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}

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

@@ -1,6 +1,6 @@
 /*!
-  * iamKey v6.1.0--beta
-  * Copyright 2022-2024 iamproperty
+  * iamKey v6.1.0--beta3
+  * Copyright 2022-2025 iamproperty
   */const m=r=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:r})},g=(r,t,i)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:t}),i.forEach(e=>{r.addEventListener(e,function(n){let d={event:e,element:t,target:n.target};Object.keys(n.detail).forEach(o=>{const a=n.detail[o];d[o]=a}),window.dataLayer.push(d)})}),!0),b=`<div class="card__head" part="head">
   <slot name="head"></slot>
 </div>
@@ -15,11 +15,11 @@
 </div>
 <div class="card__footer" part="footer">
   <slot name="footer"></slot>
-</div>`,h=r=>{r.classList.add("card");const t=r.shadowRoot.querySelector(".card__head"),i=r.shadowRoot.querySelector(".card__body");r.hasAttribute("data-image")&&(t.innerHTML+=`<img src="${r.getAttribute("data-image")}" alt="" loading="lazy" part="image" />`),r.hasAttribute("data-total")?i.insertAdjacentHTML("beforeend",`<div class="card__total">${r.getAttribute("data-total")}</div>`):r.querySelector('[slot="total-icon"]')&&i.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>'),r.querySelector('[slot="badges"]')||r.shadowRoot.querySelector(".card__badges").remove()};var v=function(r,t,i,e){function n(d){return d instanceof i?d:new i(function(o){o(d)})}return new(i||(i=Promise))(function(d,o){function a(l){try{c(e.next(l))}catch(s){o(s)}}function p(l){try{c(e.throw(l))}catch(s){o(s)}}function c(l){l.done?d(l.value):n(l.value).then(a,p)}c((e=e.apply(r,t||[])).next())})};m("iam-card");class u extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
+</div>`,h=r=>{r.classList.add("card");const t=r.shadowRoot.querySelector(".card__head"),i=r.shadowRoot.querySelector(".card__body");r.hasAttribute("data-image")&&(t.innerHTML+=`<img src="${r.getAttribute("data-image")}" alt="" loading="lazy" part="image" />`),r.hasAttribute("data-total")?i.insertAdjacentHTML("beforeend",`<div class="card__total">${r.getAttribute("data-total")}</div>`):r.querySelector('[slot="total-icon"]')&&i.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>'),r.querySelector('[slot="badges"]')?r.shadowRoot.querySelector(".card__badges").classList.remove("empty"):r.shadowRoot.querySelector(".card__badges").classList.add("empty")};var v=function(r,t,i,e){function n(d){return d instanceof i?d:new i(function(o){o(d)})}return new(i||(i=Promise))(function(d,o){function a(l){try{c(e.next(l))}catch(s){o(s)}}function p(l){try{c(e.throw(l))}catch(s){o(s)}}function c(l){l.done?d(l.value):n(l.value).then(a,p)}c((e=e.apply(r,t||[])).next())})};m("iam-card");class u extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
     <style>
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     
-    :host{--card-icon-right: 1rem;--card-head-top-padding: 2rem;--card-head-bottom-padding: 2rem;--card-footer-bottom-padding: 1.5rem;--card-head-height: 6rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px;margin-bottom:2rem}:host>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__body{padding:var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:0;padding:0 var(--card-right-padding) 0 var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 6 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:left;left:0;z-index:9}.card__badges{padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);margin-bottom:-1.5rem}body:not(.js-enabled) dialog:not([open]):target{display:block}[popover],dialog{--dialog-padding: 1.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;background:var(--colour-canvas-2);box-shadow:0px 2px 9px rgba(0,0,0,.11);border-radius:0.625rem;padding:var(--dialog-padding);outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}[popover]:popover-open,dialog[open]{display:flex;flex-direction:column}[popover]:popover-open>*:last-child,dialog[open]>*:last-child{margin-bottom:0}[popover]:popover-open>:is(p):last-child,dialog[open]>:is(p):last-child{padding-bottom:0}.dialog__wrapper{position:relative;display:inline-block;margin-bottom:calc(var(--btn-margin) - .25rem)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover);filter:brightness(85%);transition:background .1s,color .1s;border-radius:1.5rem}.dialog__wrapper>.btn:first-child{margin-bottom:.25rem}.dialog__wrapper>.btn:first-child:not(.btn-compact):not([class*=fa-]):after{content:"";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;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)}.dialog__wrapper>.btn:first-child[aria-expanded]:not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>:is(dialog[open],dialog:popover-open){left:0;top:100%;z-index:var(--index-floating);min-width:20rem;border-radius:1rem;width:20rem;padding:1.5rem}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:20.9375rem}}@media screen and (min-width: 62em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:22.5rem}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:fit-content !important;min-width:8.75rem !important;max-width:17.5rem !important;padding:1rem;margin:0}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:max-content !important}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list hr{height:2px;background:var(--colour-border);margin-left:-1rem;margin-right:-1rem;margin-block:.25rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick{margin-right:0;padding-left:1.5rem;margin-bottom:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick:before{left:0;font-size:1em;top:.75rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{padding:0.375rem;margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:after{display:none}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action{margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open) :is(dialog[open],dialog:popover-open){display:contents}.dialog__wrapper.dialog__wrapper--right>:is(dialog[open],dialog:popover-open){right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>:is(dialog[open],dialog:popover-open){width:14.9375rem}.dialog__wrapper.dialog__wrapper--lg>:is(dialog[open],dialog:popover-open){width:19.9375rem}@media screen and (min-width: 36em){.dialog__wrapper.dialog__wrapper--sm-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--sm-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.25rem}}@media screen and (min-width: 62em){.dialog__wrapper.dialog__wrapper--md-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--md-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.375rem}}.dialog__wrapper :is(.empty,.individual){display:none}@supports selector(:has(*)){.dialog__wrapper :is(.empty,.individual){display:inline}}.dialog__wrapper:has(input:checked) .empty,.dialog__wrapper:not(:has(input:checked)) .individual,.dialog__wrapper:has(input:checked~input:checked) .individual,.dialog__wrapper:not(:has(input:checked~input:checked)) .multiple{display:none}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn);font-size:1.125rem;line-height:1.5rem;padding:calc(var(--btn-padding-block) - var(--btn-border-width)) calc(var(--btn-padding-inline) - var(--btn-border-width));border-radius:1.5rem;margin-bottom:var(--btn-margin);transition: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(: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{opacity:.4;cursor:not-allowed}.btn-secondary{background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border);color:var(--colour-btn-secondary)}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)}.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.375rem;--btn-padding-inline: 0.375rem;background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted);border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;color:var(--colour-heading)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}a:is(:active,.active):not([disabled]) .btn-action,.btn-action:is(:active,.active):not([disabled]){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 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: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}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.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem}.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:calc(var(--compact-size));min-width:calc(var(--compact-size));max-width:calc(var(--compact-size));height:calc(var(--compact-size)) !important;min-height:calc(var(--compact-size)) !important;max-height:calc(var(--compact-size)) !important;line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width)) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1.25rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width));font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width)) !important}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light) }.btn-compact.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:rgba(0,0,0,0) !important}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[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:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}.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 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:1.5rem;vertical-align:bottom}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;padding:calc(0.75rem - 2px) calc(2.5rem - 2px) !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:1.125rem !important;line-height:1.5rem !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;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:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.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 6 Pro"}.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],:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled]){color:var(--colour-active)}:host{--card-right-padding: 1rem;--card-icon-right: 1rem}:host(:is(:hover,:focus,.hover):not(.prevent-hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px}:host(:is(:active,.active):not(.prevent-hover)){--card-icon-right: var(--card-icon-right-overide,0.5rem);outline:none}:host(.prevent-hover){pointer-events:none}:host(.prevent-hover) *{pointer-events:all}:host(.show-icon) .card__body{--card-right-padding: 3.5rem}:host(.show-icon) .card__body:before,:host(.show-icon) .card__body:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}:host(.show-icon) .card__body:after{background:var(--colour-primary-theme);mask-image:var(--icon, var(--icon-arrow));mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon, var(--icon-arrow));-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}.card__body:has(.card__illustration){align-items:center;display:flex}.card__body:has(.card__illustration) .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card__body:has(.card__illustration) .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}:host([class*=colour-]){border-left:0.75rem solid var(--colour, var(--colour-primary))}slot[name=secondary]{display:block;position:absolute;top:.5rem;right:0;margin:.5rem .5rem 0 0;z-index:999}::slotted([slot=secondary]:not(:hover,:focus,:active,.hover)){background:none !important;color:var(--colour-btn) !important}::slotted([slot=checkbox]){position:absolute !important;top:.5rem;right:.5rem;width:2rem;height:2rem;height:2.5rem;overflow:hidden}.dialog__wrapper{position:absolute;right:1rem;bottom:2rem;width:3rem !important;left:auto;z-index:999}.dialog__wrapper>.btn:before{content:"\uF142";font-family:"Font Awesome 6 Pro"}.dialog__wrapper>[popover]{display:var(--menu-display, none);position:fixed;top:anchor(top);position-anchor:--anchor-el;left:anchor(right);right:auto;margin:0 0 0 0.25rem;padding:1rem}.dialog__wrapper>[popover]::backdrop{display:none}.dialog__wrapper>[popover]:popover-open{display:block !important}.dialog__wrapper:has([popover]:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>button[popovertarget]{margin:0;anchor-name:--anchor-el}.dialog__wrapper>button[popovertarget]:not(:hover,:focus,:focus-within,:active){background:var(--ellipsis-bg)}::slotted([slot=btns]){border:none !important;margin:0 !important;display:block !important;width:fit-content}::slotted([slot=primary-action]){overflow:hidden;background-color:rgba(0,0,0,0);text-indent:-300%;position:absolute !important;inset:0;margin:0 !important;z-index:99;border:none}:host(:not(.prevent-hover)) ::slotted([slot=primary-action]:is(:hover,:focus,.hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px;border-radius:var(--card-border-radius) !important}/*# sourceMappingURL=assets/css/components/card.component.css.map */
+    :host{--card-icon-right: 1rem;--card-head-top-padding: 2rem;--card-head-bottom-padding: 2rem;--card-footer-bottom-padding: 1.5rem;--card-head-height: 6rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px;margin-bottom:2rem}:host>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__body{padding:var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:0;padding:0 var(--card-right-padding) 0 var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 6 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:left;left:0;z-index:9}.card__badges:not(.empty){padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);margin-bottom:-1.5rem}body:not(.js-enabled) dialog:not([open]):target{display:block}[popover],dialog{--dialog-padding: 1.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;background:var(--colour-canvas-2);box-shadow:0px 2px 9px rgba(0,0,0,.11);border-radius:0.625rem;padding:var(--dialog-padding);outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}[popover]:popover-open,dialog[open]{display:flex;flex-direction:column}[popover]:popover-open>*:last-child,dialog[open]>*:last-child{margin-bottom:0}[popover]:popover-open>:is(p):last-child,dialog[open]>:is(p):last-child{padding-bottom:0}.dialog__wrapper{position:relative;display:inline-block;margin-bottom:calc(var(--btn-margin) - .25rem)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover);filter:brightness(85%);transition:background .1s,color .1s;border-radius:1.5rem}.dialog__wrapper>.btn:first-child{margin-bottom:.25rem}.dialog__wrapper>.btn:first-child:not(.btn-compact):not([class*=fa-]):after{content:"";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;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)}.dialog__wrapper>.btn:first-child[aria-expanded]:not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>:is(dialog[open],dialog:popover-open){left:0;top:100%;z-index:var(--index-floating);min-width:20rem;border-radius:1rem;width:20rem;padding:1.5rem}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:20.9375rem}}@media screen and (min-width: 62em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:22.5rem}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:fit-content !important;min-width:8.75rem !important;max-width:17.5rem !important;padding:1rem;margin:0}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:max-content !important}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list hr{height:2px;background:var(--colour-border);margin-left:-1rem;margin-right:-1rem;margin-block:.25rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick{margin-right:0;padding-left:1.5rem;margin-bottom:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick:before{left:0;font-size:1em;top:.75rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{padding:0.375rem;margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:after{display:none}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action{margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open) :is(dialog[open],dialog:popover-open){display:contents}.dialog__wrapper.dialog__wrapper--right>:is(dialog[open],dialog:popover-open){right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>:is(dialog[open],dialog:popover-open){width:14.9375rem}.dialog__wrapper.dialog__wrapper--lg>:is(dialog[open],dialog:popover-open){width:19.9375rem}@media screen and (min-width: 36em){.dialog__wrapper.dialog__wrapper--sm-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--sm-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.25rem}}@media screen and (min-width: 62em){.dialog__wrapper.dialog__wrapper--md-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--md-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.375rem}}.dialog__wrapper :is(.empty,.individual){display:none}@supports selector(:has(*)){.dialog__wrapper :is(.empty,.individual){display:inline}}.dialog__wrapper:has(input:checked) .empty,.dialog__wrapper:not(:has(input:checked)) .individual,.dialog__wrapper:has(input:checked~input:checked) .individual,.dialog__wrapper:not(:has(input:checked~input:checked)) .multiple{display:none}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}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn);font-size:1.125rem;line-height:1.5rem;padding:calc(var(--btn-padding-block) - var(--btn-border-width)) calc(var(--btn-padding-inline) - var(--btn-border-width));border-radius:1.5rem;margin-bottom:var(--btn-margin);transition: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(: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{opacity:.4;cursor:not-allowed}.btn-secondary{background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border);color:var(--colour-btn-secondary)}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)}.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.375rem;--btn-padding-inline: 0.375rem;background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted);border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;color:var(--colour-heading)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}a:is(:active,.active):not([disabled]) .btn-action,.btn-action:is(:active,.active):not([disabled]){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 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: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}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.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem}.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:calc(var(--compact-size));min-width:calc(var(--compact-size));max-width:calc(var(--compact-size));height:calc(var(--compact-size)) !important;min-height:calc(var(--compact-size)) !important;max-height:calc(var(--compact-size)) !important;line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width)) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1.25rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width));font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width)) !important}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light) }.btn-compact.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:rgba(0,0,0,0) !important}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[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:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}.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 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:1.5rem;vertical-align:bottom}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;padding:calc(0.75rem - 2px) calc(2.5rem - 2px) !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:1.125rem !important;line-height:1.5rem !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;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:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.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 6 Pro"}.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],:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled]){color:var(--colour-active)}:host{--card-right-padding: 1rem;--card-icon-right: 1rem}:host(:is(:hover,:focus,.hover):not(.prevent-hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px}:host(:is(:active,.active):not(.prevent-hover)){--card-icon-right: var(--card-icon-right-overide,0.5rem);outline:none}:host(.prevent-hover){pointer-events:none}:host(.prevent-hover) *{pointer-events:all}:host(.show-icon) .card__body{--card-right-padding: 3.5rem}:host(.show-icon) .card__body:before,:host(.show-icon) .card__body:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}:host(.show-icon) .card__body:after{background:var(--colour-primary-theme);mask-image:var(--icon, var(--icon-arrow));mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon, var(--icon-arrow));-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}.card__body:has(.card__illustration){align-items:center;display:flex}.card__body:has(.card__illustration) .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card__body:has(.card__illustration) .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}:host([class*=colour-]){border-left:0.75rem solid var(--colour, var(--colour-primary))}slot[name=secondary]{display:block;position:absolute;top:.5rem;right:0;margin:.5rem .5rem 0 0;z-index:999}::slotted([slot=secondary]:not(:hover,:focus,:active,.hover)){background:none !important;color:var(--colour-btn) !important}::slotted([slot=checkbox]){position:absolute !important;top:.5rem;right:.5rem;width:2rem;height:2rem;height:2.5rem;overflow:hidden}.dialog__wrapper{position:absolute;right:1rem;bottom:2rem;width:3rem !important;left:auto;z-index:999}.dialog__wrapper>.btn:before{content:"\uF142";font-family:"Font Awesome 6 Pro"}.dialog__wrapper>[popover]{display:var(--menu-display, none);position:fixed;top:anchor(top);position-anchor:--anchor-el;left:anchor(right);right:auto;margin:0 0 0 0.25rem;padding:1rem}.dialog__wrapper>[popover]::backdrop{display:none}.dialog__wrapper>[popover]:popover-open{display:block !important}.dialog__wrapper:has([popover]:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>button[popovertarget]{margin:0;anchor-name:--anchor-el}.dialog__wrapper>button[popovertarget]:not(:hover,:focus,:focus-within,:active){background:var(--ellipsis-bg)}::slotted([slot=btns]){border:none !important;margin:0 !important;display:block !important;width:fit-content}::slotted([slot=primary-action]){overflow:hidden;background-color:rgba(0,0,0,0);text-indent:-300%;position:absolute !important;inset:0;margin:0 !important;z-index:99;border:none}:host(:not(.prevent-hover)) ::slotted([slot=primary-action]:is(:hover,:focus,.hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px;border-radius:var(--card-border-radius) !important}/*# sourceMappingURL=assets/css/components/card.component.css.map */
 
     </style>
     ${b}

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

@@ -1 +1 @@
-{"version":3,"file":"card.component.min.js","sources":["../_global.js","../../modules/card.module.js","card.component.js"],"sourcesContent":["// @ts-nocheck\nexport const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        \"event\": \"customElementRegistered\",\n        \"element\": componentName\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        \"event\": \"customElementAdded\",\n        \"element\": componentName\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            let eventDetails = {\n                \"event\": eventName,\n                \"element\": componentName,\n                \"target\": event.target\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n  <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n  <slot></slot>\n  <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n  <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n  <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n    cardComponent.classList.add('card');\n    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n    if (cardComponent.hasAttribute('data-image')) {\n        cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n    }\n    // Inset the HTML for the data total or icon fallback\n    if (cardComponent.hasAttribute('data-total')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n    }\n    else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n    }\n    if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n        cardComponent.shadowRoot.querySelector('.card__badges').remove();\n    }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n// @ts-nocheck\nimport { trackComponent, trackComponentRegistered } from \"../_global.js\";\nimport { cardHTML, setupCard } from \"../../modules/card.module.js\";\ntrackComponentRegistered(\"iam-card\");\nclass iamCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/card.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    ${loadCSS}\n    </style>\n    ${cardHTML}\n    <slot name=\"primary-action\"></slot>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        return __awaiter(this, void 0, void 0, function* () {\n            const cardComponent = this;\n            const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n            const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n            const cardMenu = cardComponent.shadowRoot.querySelector('.dialog__wrapper');\n            const btn = cardComponent.shadowRoot.querySelector('.dialog__wrapper button');\n            setupCard(cardComponent);\n            // Add Illustration HTML\n            if (cardComponent.hasAttribute('data-illustration')) {\n                cardBody.insertAdjacentHTML('afterbegin', `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>`);\n            }\n            // Add class that shows the right arrow icon\n            if (!cardComponent.querySelector('[slot=\"btns\"]') && !cardComponent.querySelector('[slot=\"secondary\"]')) {\n                cardComponent.classList.add('show-icon');\n            }\n            // Secondary buttons and actions\n            // Add the dialog wrapper HTML\n            if (cardComponent.querySelector('[slot=\"btns\"]')) {\n                cardComponent.shadowRoot.innerHTML += `<div class=\"dialog__wrapper\">\n      <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical\" popovertarget=\"actions\" title=\"Further actions\" type=\"button\">Open further actions</button>\n      <div class=\"dialog--fix dialog--list\" id=\"actions\" popover>\n        <slot name=\"btns\"></slot>\n      </div>\n    </div>`;\n            }\n            // Make sure slotted buttons and links have correct button classes\n            Array.from(cardComponent.querySelectorAll('[slot=\"btns\"]')).forEach((button, index) => {\n                button.classList.add('btn');\n                button.classList.add('btn-action');\n            });\n            // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button\n            if (cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]')) {\n                const element = cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]');\n                element.addEventListener('mouseenter', (event) => {\n                    cardComponent.classList.add('prevent-hover');\n                });\n                element.addEventListener('mouseleave', (event) => {\n                    cardComponent.classList.remove('prevent-hover');\n                });\n            }\n            if (cardComponent.shadowRoot.querySelector('.dialog__wrapper')) {\n                const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');\n                element.addEventListener('mouseenter', (event) => {\n                    cardComponent.classList.add('prevent-hover');\n                });\n                element.addEventListener('mouseleave', (event) => {\n                    cardComponent.classList.remove('prevent-hover');\n                });\n            }\n            // Dispatch events of selecting checkboxes\n            const checkbox = cardComponent.querySelector('input[type=\"checkbox\"]');\n            if (checkbox) {\n                checkbox.addEventListener('change', (event) => {\n                    if (checkbox.checked) {\n                        const customEvent = new CustomEvent(\"select-card\", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });\n                        cardComponent.dispatchEvent(customEvent);\n                    }\n                    else {\n                        const customEvent = new CustomEvent(\"unselect-card\", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });\n                        cardComponent.dispatchEvent(customEvent);\n                    }\n                });\n            }\n            // Dispatch events of click onto secondary buttons\n            const secondaryBtn = cardComponent.querySelector('[slot=\"secondary\"]');\n            if (secondaryBtn) {\n                secondaryBtn.addEventListener('click', (event) => {\n                    const customEvent = new CustomEvent(\"secondary-button-clicked\", { detail: { 'Title': secondaryBtn.getAttribute('title') } });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            // Dispatch events of click onto action buttons\n            const actionBtns = cardComponent.querySelectorAll('[slot=\"btns\"]');\n            Array.from(actionBtns).forEach((button, index) => {\n                button.addEventListener('click', (event) => {\n                    const customEvent = new CustomEvent(\"action-button-clicked\", { detail: { 'Title': button.getAttribute('title') } });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            });\n            trackComponent(cardComponent, \"iam-card\", ['select-card', 'unselect-card', 'secondary-button-clicked', 'action-button-clicked']);\n        });\n    }\n    static get observedAttributes() {\n        return [\"data-image\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-total\": {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n            case \"data-image\": {\n                if (oldVal != newVal) {\n                    const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n                    if (cardHeadImg)\n                        cardHeadImg.setAttribute('src', newVal);\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamCard","template","button","index","element","checkbox","customEvent","secondaryBtn","actionBtns","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
+{"version":3,"file":"card.component.min.js","sources":["../_global.js","../../modules/card.module.js","card.component.js"],"sourcesContent":["// @ts-nocheck\nexport const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        \"event\": \"customElementRegistered\",\n        \"element\": componentName\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        \"event\": \"customElementAdded\",\n        \"element\": componentName\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            let eventDetails = {\n                \"event\": eventName,\n                \"element\": componentName,\n                \"target\": event.target\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n  <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n  <slot></slot>\n  <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n  <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n  <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n    cardComponent.classList.add('card');\n    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n    if (cardComponent.hasAttribute('data-image')) {\n        cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n    }\n    // Inset the HTML for the data total or icon fallback\n    if (cardComponent.hasAttribute('data-total')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n    }\n    else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n    }\n    if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n    }\n    else {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n    }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n// @ts-nocheck\nimport { trackComponent, trackComponentRegistered } from \"../_global.js\";\nimport { cardHTML, setupCard } from \"../../modules/card.module.js\";\ntrackComponentRegistered(\"iam-card\");\nclass iamCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/card.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    ${loadCSS}\n    </style>\n    ${cardHTML}\n    <slot name=\"primary-action\"></slot>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        return __awaiter(this, void 0, void 0, function* () {\n            const cardComponent = this;\n            const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n            const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n            const cardMenu = cardComponent.shadowRoot.querySelector('.dialog__wrapper');\n            const btn = cardComponent.shadowRoot.querySelector('.dialog__wrapper button');\n            setupCard(cardComponent);\n            // Add Illustration HTML\n            if (cardComponent.hasAttribute('data-illustration')) {\n                cardBody.insertAdjacentHTML('afterbegin', `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>`);\n            }\n            // Add class that shows the right arrow icon\n            if (!cardComponent.querySelector('[slot=\"btns\"]') && !cardComponent.querySelector('[slot=\"secondary\"]')) {\n                cardComponent.classList.add('show-icon');\n            }\n            // Secondary buttons and actions\n            // Add the dialog wrapper HTML\n            if (cardComponent.querySelector('[slot=\"btns\"]')) {\n                cardComponent.shadowRoot.innerHTML += `<div class=\"dialog__wrapper\">\n      <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical\" popovertarget=\"actions\" title=\"Further actions\" type=\"button\">Open further actions</button>\n      <div class=\"dialog--fix dialog--list\" id=\"actions\" popover>\n        <slot name=\"btns\"></slot>\n      </div>\n    </div>`;\n            }\n            // Make sure slotted buttons and links have correct button classes\n            Array.from(cardComponent.querySelectorAll('[slot=\"btns\"]')).forEach((button, index) => {\n                button.classList.add('btn');\n                button.classList.add('btn-action');\n            });\n            // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button\n            if (cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]')) {\n                const element = cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]');\n                element.addEventListener('mouseenter', (event) => {\n                    cardComponent.classList.add('prevent-hover');\n                });\n                element.addEventListener('mouseleave', (event) => {\n                    cardComponent.classList.remove('prevent-hover');\n                });\n            }\n            if (cardComponent.shadowRoot.querySelector('.dialog__wrapper')) {\n                const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');\n                element.addEventListener('mouseenter', (event) => {\n                    cardComponent.classList.add('prevent-hover');\n                });\n                element.addEventListener('mouseleave', (event) => {\n                    cardComponent.classList.remove('prevent-hover');\n                });\n            }\n            // Dispatch events of selecting checkboxes\n            const checkbox = cardComponent.querySelector('input[type=\"checkbox\"]');\n            if (checkbox) {\n                checkbox.addEventListener('change', (event) => {\n                    if (checkbox.checked) {\n                        const customEvent = new CustomEvent(\"select-card\", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });\n                        cardComponent.dispatchEvent(customEvent);\n                    }\n                    else {\n                        const customEvent = new CustomEvent(\"unselect-card\", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });\n                        cardComponent.dispatchEvent(customEvent);\n                    }\n                });\n            }\n            // Dispatch events of click onto secondary buttons\n            const secondaryBtn = cardComponent.querySelector('[slot=\"secondary\"]');\n            if (secondaryBtn) {\n                secondaryBtn.addEventListener('click', (event) => {\n                    const customEvent = new CustomEvent(\"secondary-button-clicked\", { detail: { 'Title': secondaryBtn.getAttribute('title') } });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            // Dispatch events of click onto action buttons\n            const actionBtns = cardComponent.querySelectorAll('[slot=\"btns\"]');\n            Array.from(actionBtns).forEach((button, index) => {\n                button.addEventListener('click', (event) => {\n                    const customEvent = new CustomEvent(\"action-button-clicked\", { detail: { 'Title': button.getAttribute('title') } });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            });\n            trackComponent(cardComponent, \"iam-card\", ['select-card', 'unselect-card', 'secondary-button-clicked', 'action-button-clicked']);\n        });\n    }\n    static get observedAttributes() {\n        return [\"data-image\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-total\": {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n            case \"data-image\": {\n                if (oldVal != newVal) {\n                    const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n                    if (cardHeadImg)\n                        cardHeadImg.setAttribute('src', newVal);\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamCard","template","button","index","element","checkbox","customEvent","secondaryBtn","actionBtns","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}

package/assets/js/components/carousel/carousel.component.js

@@ -1,74 +1,69 @@
 // @ts-nocheck
-import carousel from "../../modules/carousel.js";
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-    "event": "customElementRegistered",
-    "element": "carousel"
-});
+import { generateThumbnailList, generatePipsHTML, carousel } from "../../modules/carousel.js";
+import { trackComponent, trackComponentRegistered } from "../_global.js";
+trackComponentRegistered("iam-carousel");
 class iamCarousel extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
         const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
-        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
-        const loadCSS = `@import "${assetLocation}/css/components/carousel.css";`;
+        const loadCSS = `@import "${assetLocation}/css/components/carousel.component.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <div class="carousel" :id="'carousel'+id">
+    <div class="carousel" part="carousel">
       <div class="carousel__wrapper">
         <div class="carousel__inner">
-          
-          <slot></slot>
+          <div class="carousel__content" part="content">
+            <slot></slot>
+          </div>
         </div>
  
+      </div>
+        <div class="carousel__btns" part="btns">
+          <button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled  part="prev">Prev</button>
+          <button class="btn btn-secondary btn-compact fa-plus-large btn-next" data-go="2" part="next">Next</button>
+        </div>
+
         <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
-        <button class="btn btn-next" data-go="2" part="next">Next</button>
+        <div class="carousel__progress" part="progress">
+          <input type="range" min="0" max="100" value="1" step="1">
+        </div>
 
-      </div>
     </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
     connectedCallback() {
+        const carouselComponent = this;
         const carouselElement = this.shadowRoot.querySelector('.carousel');
-        const row = this.querySelector('.row');
-        const thumbnailImages = JSON.parse(this.dataset.thumbnails);
+        const row = this.shadowRoot.querySelector('.row');
+        let thumbnailImages = [];
         const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
-        let itemCount = this.querySelectorAll(':scope > .row > .col').length;
-        carouselElement.setAttribute('data-row-class', row.className);
-        if (this.classList.contains('hide-btns'))
-            carouselElement.classList.add('hide-btns');
-        if (this.classList.contains('hide-controls'))
-            carouselElement.classList.add('hide-controls');
-        if (thumbnailImages === null || thumbnailImages === void 0 ? void 0 : thumbnailImages.length) {
-            carouselControls.classList.add('thumbnails');
+        if (carouselComponent.querySelector('[data-thumbnail]')) {
+            thumbnailImages = generateThumbnailList(carouselComponent);
+            carouselComponent.classList.add('thumbnails');
         }
         // populate the pips
-        let pips = "";
-        for (let i = 1; i <= itemCount; i++) {
-            let pipContent = null;
-            let pipClass = '';
-            if (thumbnailImages.length) {
-                pipClass = 'has-thumbnail';
-                pipContent = `<img src="${thumbnailImages[i - 1].src}" alt="Slide ${i}" height="148"/>`;
-            }
-            else {
-                pipContent = `Slide ${i}`;
-            }
-            pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current" : ""}>${pipContent}</button>`;
-        }
-        carouselControls.innerHTML = pips;
-        carousel(carouselElement, row);
+        carouselControls.innerHTML = generatePipsHTML(carouselComponent, thumbnailImages);
+        Array.from(carouselComponent.querySelectorAll(':scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img')).forEach((image, index) => {
+            image.style.inset = "0 0.5rem 0 0.5rem";
+            image.style.position = "absolute";
+            image.style.width = "calc(100% - 1rem)";
+            image.style.height = "100%";
+            image.style['object-fit'] = "cover";
+            image.closest('div').classList.add('image__wrapper');
+        });
+        carousel(carouselComponent);
+        trackComponent(carouselComponent, "iam-carousel", ['pip-clicked', 'next-clicked', 'prev-clicked', 'slider-changed']);
+    }
+    attributeChangedCallback(attrName, oldVal, newVal) {
     }
 }
 export default iamCarousel;

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

@@ -1,28 +1,34 @@
 /*!
-  * iamKey v6.1.0--beta
-  * Copyright 2022-2024 iamproperty
-  */function p(l,o){var i;let t=l.querySelector(".carousel__inner"),u=l.querySelector(".carousel__controls"),n=o.querySelectorAll(":scope > .col").length;t.addEventListener("scroll",function(a){clearTimeout(i),i=setTimeout(function(){let s=t.clientWidth,e=t.scrollWidth,r=t.scrollLeft,d=Math.round(r/e*n)+1,m=o.querySelector(":scope > .col").scrollWidth,b=o.querySelector(":scope > .col:last-child").offsetLeft,f=t.scrollLeft+s+t.getBoundingClientRect().left>=b+60,h=Math.round(s/m);Math.ceil(n/h)*h-n>0&&f&&(d=Math.floor(n/h)*h+1),Array.from(l.querySelectorAll(".carousel__controls button")).forEach((_,w)=>{_.removeAttribute("aria-current")}),l.querySelector(".control-"+d).setAttribute("aria-current",!0),d==1?l.querySelector(".btn-prev").setAttribute("disabled","disabled"):l.querySelector(".btn-prev").removeAttribute("disabled"),d>n-h?l.querySelector(".btn-next").setAttribute("disabled","disabled"):l.querySelector(".btn-next").removeAttribute("disabled")},100)},!1),u.addEventListener("click",function(a){for(var s=a.target;s&&s!=this;s=s.parentNode)if(typeof s.matches=="function"&&s.matches("button")){a.preventDefault(),Array.from(u.querySelectorAll("button")).forEach((r,d)=>{r.removeAttribute("aria-current")}),s.setAttribute("aria-current",!0);const e=o.querySelector(`:scope > *:nth-child(${s.getAttribute("data-slide")})`);t.scroll({top:0,left:e.offsetLeft-t.getBoundingClientRect().left,behavior:"smooth"});break}},!1),l.addEventListener("click",function(a){let s=t.clientWidth;t.scrollWidth;let e=o.querySelector(":scope > .col").scrollWidth,r=Math.round(s/e),d=o.querySelector(":scope > .col:last-child").offsetLeft,m=t.scrollLeft+s+t.getBoundingClientRect().left>=d+60,b=Math.ceil(n/r)*r-n,f=r-b,h=m&&b>0?f*e:t.clientWidth;for(var c=a.target;c&&c!=this;c=c.parentNode)if(typeof c.matches=="function"&&c.matches(".btn-next, .btn-prev")){a.preventDefault();let _=c.classList.contains("btn-prev")?t.scrollLeft-h:t.scrollLeft+t.clientWidth;t.scroll({top:0,left:_,behavior:"smooth"});break}},!1)}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"carousel"});class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",i=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
+  * iamKey v6.1.0--beta3
+  * Copyright 2022-2025 iamproperty
+  */const C=function(e){let o=[];return Array.from(e.querySelectorAll(":scope > div")).forEach((n,t)=>{n.hasAttribute("data-thumbnail")&&(o[t]=n.getAttribute("data-thumbnail"))}),o},M=function(e,o){let n=e.querySelectorAll(":scope > div").length,t="";for(let a=1;a<=n;a++){let r=null,i="";o.length&&o[a-1]?(i="has-thumbnail",r=`<img src="${o[a-1]}" alt="Slide ${a}" height="148"/>`):r=`Slide ${a}`,t+=`<button class="control-${a} ${i}" data-slide="${a}" ${a==1?"aria-current":""}>${r}</button>`}return t},z=function(e,o){return o==1?e:Math.ceil(e/o)*o-o+1},A=function(e,o){return(e-1)/(o-1)*100},W=function(e){var o;const n=e.shadowRoot.querySelector(".carousel");let t=n.querySelector(".carousel__inner"),a=n.querySelector(".carousel__controls"),r=n.querySelector('.carousel__progress [type="range"]'),i=e.querySelectorAll(":scope > div").length,v=t.clientWidth,y=e.querySelector(":scope > div").scrollWidth,g=Math.round(v/y);r.setAttribute("min",1),r.setAttribute("step",g);let d=z(i,g);r.setAttribute("max",d),r.value=1;let p=A(1,d);r.style.setProperty("--percent",p+"%");let f,S="mouseup",L="mousedown";"ontouchstart"in document.documentElement&&(S="touchend",L="touchstart"),t.addEventListener("scroll",function(h){clearTimeout(o),o=setTimeout(function(){let s=t.clientWidth,m=t.scrollWidth,b=t.scrollLeft,l=Math.round(b/m*i)+1,_=e.querySelector(":scope > div").scrollWidth,w=e.querySelector(":scope > div:last-child").offsetLeft,k=t.scrollLeft+s+t.getBoundingClientRect().left>=w+60,u=Math.round(s/_),c=Math.ceil(i/u)*u-i;r.setAttribute("step",u),c>0&&k&&(l=Math.floor(i/u)*u+1),Array.from(n.querySelectorAll(".carousel__controls button")).forEach((x,E)=>{x.removeAttribute("aria-current")}),n.querySelector(".control-"+l).setAttribute("aria-current",!0),l==1?n.querySelector(".btn-prev").setAttribute("disabled","disabled"):n.querySelector(".btn-prev").removeAttribute("disabled"),l>i-u?n.querySelector(".btn-next").setAttribute("disabled","disabled"):n.querySelector(".btn-next").removeAttribute("disabled"),r.value=l,d=z(i,u),r.setAttribute("max",d),p=l/d*100,p=A(l,d),r.style.setProperty("--percent",p+"%")},100)},!1),a.addEventListener("click",function(h){for(var s=h.target;s&&s!=this;s=s.parentNode)if(typeof s.matches=="function"&&s.matches("button")){h.preventDefault(),Array.from(a.querySelectorAll("button")).forEach((l,_)=>{l.removeAttribute("aria-current")}),s.setAttribute("aria-current",!0);const m=new CustomEvent("pip-clicked",{detail:{slide:s.getAttribute("data-slide")}});e.dispatchEvent(m);const b=e.querySelector(`:scope > *:nth-child(${s.getAttribute("data-slide")})`);t.scroll({top:0,left:b.offsetLeft-t.getBoundingClientRect().left,behavior:"smooth"});break}},!1),n.addEventListener("click",function(h){let s=t.clientWidth;t.scrollWidth;let m=e.querySelector(":scope > div").scrollWidth,b=Math.round(s/m),l=e.querySelector(":scope > div:last-child").offsetLeft,_=t.scrollLeft+s+t.getBoundingClientRect().left>=l+60,w=Math.ceil(i/b)*b-i,k=b-w,u=_&&w>0?k*m:t.clientWidth;for(var c=h.target;c&&c!=this;c=c.parentNode)if(typeof c.matches=="function"&&c.matches(".btn-next, .btn-prev")){let x=c.matches(".btn-next")?"next":"prev";const E=new CustomEvent(`${x}-clicked`,{detail:{slide:c.getAttribute("data-go")}});e.dispatchEvent(E),h.preventDefault();let q=c.classList.contains("btn-prev")?t.scrollLeft-u:t.scrollLeft+t.clientWidth;t.scroll({top:0,left:q,behavior:"smooth"});break}},!1),r.addEventListener(L,function(h){clearInterval(f),f=setInterval(function(){v=t.clientWidth,y=e.querySelector(":scope > div").scrollWidth,g=Math.round(v/y),r.setAttribute("step",g),d=z(i,g),r.setAttribute("max",d),p=A(r.value,d),r.style.setProperty("--percent",p+"%")},10)}),r.addEventListener(S,function(h){clearInterval(f)}),r.addEventListener("change",function(h){clearInterval(f);let s=e.querySelector(`:scope > *:nth-child(${r.value})`);t.scroll({top:0,left:s?s.offsetLeft-t.getBoundingClientRect().left:0,behavior:"smooth"}),s.matches(".btn-next");const m=new CustomEvent("slider-changed",{detail:{slide:r.value}});e.dispatchEvent(m)},!1)},$=e=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:e})},P=(e,o,n)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:o}),n.forEach(t=>{e.addEventListener(t,function(a){let r={event:t,element:o,target:a.target};Object.keys(a.detail).forEach(i=>{const v=a.detail[i];r[i]=v}),window.dataLayer.push(r)})}),!0);$("iam-carousel");class I extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const o=document.createElement("template");o.innerHTML=`
     <style>
-    @import "${i}";
-    .carousel .carousel__wrapper{position:relative}.carousel .carousel__inner{--gutter-x: 1rem;overflow:auto;scroll-snap-type:x mandatory}.carousel .col>*:last-child{margin-bottom:0;padding-bottom:0}.carousel__inner{scrollbar-width:none;-ms-overflow-style:none}.carousel__inner::-webkit-scrollbar{display:none}.btn-next,.btn-prev{--marker-bg: var(--colour-secondary);text-indent:100%;white-space:nowrap;overflow:hidden;background:var(--marker-bg);border-radius:100%;width:2.25rem;max-width:2.25rem;height:2.25rem;text-indent:-300rem;overflow:hidden;border:none;position:relative;margin:0 0.5rem;padding:0;position:absolute;top:50%;left:0rem;transform:translate(0, -50%)}.btn-next:disabled,.btn-prev:disabled{opacity:.8;pointer-events:none}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0deg)}.btn-next:hover,.btn-next:focus,.btn-prev:hover,.btn-prev:focus{background:var(--colour-warning);color:var(--colour-hover);border-radius:100%}.btn-next:active,.btn-prev:active{border-radius:100%}.btn-next{left:auto;right:0}@media screen and (min-width: 62em){.btn-next{margin-right:-3rem}}@media screen and (min-width: 62em){.btn-prev{margin-left:-3rem}}.btn-prev:after{transform:rotate(180deg)}.carousel .carousel__controls{overflow:hidden;margin-inline:auto}.carousel .carousel__controls:not(.thumbnails){text-align:center;max-width:30rem}.carousel .carousel__controls.thumbnails{margin-block-start:2rem}@media screen and (min-width: 36em){.carousel .carousel__controls{width:100%}}.carousel .carousel__controls button{padding:0;margin:0 .2rem .2rem;border:3px solid var(--colour-canvas);border-radius:4px}.carousel .carousel__controls button.has-thumbnail{height:4.625rem}.carousel .carousel__controls button.has-thumbnail img{height:100%;width:auto}.carousel .carousel__controls button:not(.has-thumbnail){width:1rem;height:1rem;min-height:1rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:var(--colour-primary-theme);margin:0 .5rem .5rem .5rem;border:none}.carousel .carousel__controls button:not(.has-thumbnail):before{display:none}.carousel .carousel__controls button:first-child:last-child{display:none}.carousel__controls>button[aria-current]{--colour-active-thumbnail: var(--colour-info);border-color:var(--colour-active-thumbnail)}.carousel__controls>button[aria-current]:not(.has-thumbnail){background:var(--colour-success)}.carousel.hide-btns .carousel__wrapper>.btn{display:none}.carousel.hide-controls .carousel__controls{display:none}@media screen and (min-width: 36em){[data-row-class*=cols-sm-2] .carousel__controls>button:not(:nth-child(odd)),[data-row-class*=cols-sm-3] .carousel__controls>button:not(:nth-child(3n+1)),[data-row-class*=cols-sm-4] .carousel__controls>button:not(:nth-child(4n+1)),[data-row-class*=cols-sm-5] .carousel__controls>button:not(:nth-child(5n+1)),[data-row-class*=cols-sm-6] .carousel__controls>button:not(:nth-child(6n+1)){display:none}[data-row-class*=cols-sm-2] .carousel__controls:has(button:first-child:nth-last-child(2)),[data-row-class*=cols-sm-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),[data-row-class*=cols-sm-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),[data-row-class*=cols-sm-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),[data-row-class*=cols-sm-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),[data-row-class*=cols-sm-2] .carousel__controls:has(button:first-child:nth-last-child(2))~.btn,[data-row-class*=cols-sm-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3)))~.btn,[data-row-class*=cols-sm-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4)))~.btn,[data-row-class*=cols-sm-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5)))~.btn,[data-row-class*=cols-sm-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6)))~.btn{display:none}}@media screen and (min-width: 62em){.carousel__controls>button{display:inline-block !important}[data-row-class*=cols-md-2] .carousel__controls>button:not(:nth-child(odd)),[data-row-class*=cols-md-3] .carousel__controls>button:not(:nth-child(3n+1)),[data-row-class*=cols-md-4] .carousel__controls>button:not(:nth-child(4n+1)),[data-row-class*=cols-md-5] .carousel__controls>button:not(:nth-child(5n+1)),[data-row-class*=cols-md-6] .carousel__controls>button:not(:nth-child(6n+1)){display:none !important}[data-row-class*=cols-md-2] .carousel__controls:has(button:first-child:nth-last-child(2)),[data-row-class*=cols-md-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),[data-row-class*=cols-md-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),[data-row-class*=cols-md-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),[data-row-class*=cols-md-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),[data-row-class*=cols-md-2] .carousel__controls:has(button:first-child:nth-last-child(2))~.btn,[data-row-class*=cols-md-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3)))~.btn,[data-row-class*=cols-md-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4)))~.btn,[data-row-class*=cols-md-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5)))~.btn,[data-row-class*=cols-md-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6)))~.btn{display:none}}/*# sourceMappingURL=assets/css/components/carousel.css.map */
+    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}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn);font-size:1.125rem;line-height:1.5rem;padding:calc(var(--btn-padding-block) - var(--btn-border-width)) calc(var(--btn-padding-inline) - var(--btn-border-width));border-radius:1.5rem;margin-bottom:var(--btn-margin);transition: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(: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{opacity:.4;cursor:not-allowed}.btn-secondary{background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border);color:var(--colour-btn-secondary)}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)}.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.375rem;--btn-padding-inline: 0.375rem;background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted);border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;color:var(--colour-heading)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}a:is(:active,.active):not([disabled]) .btn-action,.btn-action:is(:active,.active):not([disabled]){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 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: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}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.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem}.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:calc(var(--compact-size));min-width:calc(var(--compact-size));max-width:calc(var(--compact-size));height:calc(var(--compact-size)) !important;min-height:calc(var(--compact-size)) !important;max-height:calc(var(--compact-size)) !important;line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width)) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1.25rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width));font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width)) !important}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light) }.btn-compact.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:rgba(0,0,0,0) !important}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[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:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}.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 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:1.5rem;vertical-align:bottom}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;padding:calc(0.75rem - 2px) calc(2.5rem - 2px) !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:1.125rem !important;line-height:1.5rem !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;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:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.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 6 Pro"}.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],:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled]){color:var(--colour-active)}*,*::before,*::after{box-sizing:border-box}:host{display:block;overflow:visible;container-type:inline-size}.carousel{margin-inline:calc(var(--carousel-spacing, 1.5rem)*-1);margin-bottom:2rem;display:block;overflow:visible}.carousel .carousel__wrapper{position:relative;overflow-x:clip}.carousel .carousel__inner{--gutter-x: 1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}.carousel .carousel__content{display:flex;flex-wrap:nowrap !important;margin-inline-end:0;padding-inline-start:var(--carousel-spacing, 1.5rem);padding-inline-end:var(--carousel-spacing, 1.5rem);margin-right:calc(-0.5*var(--gutter-x));margin-left:calc(-0.5*var(--gutter-x))}.carousel .col>*:last-child{margin-bottom:0;padding-bottom:0}::slotted(div){scroll-snap-align:start;scroll-margin-left:calc(var(--carousel-spacing, 1.5rem) - .5rem);flex-shrink:0;width:calc(100% + var(--last-item-extra, 0px));padding-right:.5rem;padding-left:.5rem;margin-top:var(--gutter-y)}::slotted(div:last-child){padding-inline-end:1.5rem;--last-item-extra: 1rem}@container (min-width: 36em){.carousel{margin-inline:calc(var(--carousel-spacing, 2.5rem)*-1)}.carousel .carousel__content{padding-inline-start:var(--carousel-spacing, 2.5rem);padding-inline-end:var(--carousel-spacing, 2.5rem)}:host([data-smcols]) ::slotted(div){scroll-snap-align:unset;flex:0 0 auto}:host([data-smcols="2"]) ::slotted(div){width:calc(50% + var(--last-item-extra, 0px))}:host([data-smcols="3"]) ::slotted(div){width:calc(33.3333333333% + var(--last-item-extra, 0px))}:host([data-smcols="4"]) ::slotted(div){width:calc(25% + var(--last-item-extra, 0px))}:host([data-smcols="2"]) ::slotted(div:nth-child(odd)),:host([data-smcols="3"]) ::slotted(div:nth-child(3n+1)),:host([data-smcols="4"]) ::slotted(div:nth-child(4n+1)){scroll-snap-align:start}::slotted(div){scroll-margin-left:calc(var(--carousel-spacing, 2.5rem) - .5rem)}::slotted(div:last-child){padding-inline-end:2.5rem;--last-item-extra: 2rem}}@container (min-width: 62em){.carousel{margin-inline:0;position:relative}.carousel__wrapper{overflow:hidden;margin-inline:-0.5rem}.carousel__content{padding-inline:0 !important;margin-inline:0 !important}::slotted(div){margin-left:0;scroll-margin-left:0}::slotted(div:last-child){padding-inline-end:.5rem;--last-item-extra: 0px}:host([data-mdcols]) ::slotted(div){scroll-snap-align:unset;flex:0 0 auto}:host([data-mdcols="2"]) ::slotted(div){width:calc(50% + var(--last-item-extra, 0px))}:host([data-mdcols="3"]) ::slotted(div){width:calc(33.3333333333% + var(--last-item-extra, 0px))}:host([data-mdcols="4"]) ::slotted(div){width:calc(25% + var(--last-item-extra, 0px))}:host([data-mdcols="5"]) ::slotted(div){width:calc(20% + var(--last-item-extra, 0px))}:host([data-mdcols="6"]) ::slotted(div){width:calc(16.6666666667% + var(--last-item-extra, 0px))}:host([data-mdcols="2"]) ::slotted(div:nth-child(odd)),:host([data-mdcols="3"]) ::slotted(div:nth-child(3n+1)),:host([data-mdcols="4"]) ::slotted(div:nth-child(4n+1)),:host([data-mdcols="5"]) ::slotted(div:nth-child(5n+1)),:host([data-mdcols="6"]) ::slotted(div:nth-child(6n+1)){scroll-snap-align:start}}.carousel__inner{scrollbar-width:none;-ms-overflow-style:none}.carousel__inner::-webkit-scrollbar{display:none}.carousel__btns{text-align:center;padding-bottom:.5rem}.btn-next,.btn-prev{margin:0 !important}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0deg)}.btn-prev:after{transform:rotate(180deg)}@container (min-width: 62em){.carousel__btns{padding-bottom:0}.btn-prev{position:absolute;top:50%;left:0;margin:-2rem 0 0 -3rem !important}.btn-next{position:absolute;top:50%;right:0;margin:-2rem -3rem 0 0 !important}}.carousel .carousel__controls{overflow:hidden;margin-inline:auto;margin-bottom:1rem;text-align:center;max-width:30rem}@container (min-width: 36em){.carousel .carousel__controls{width:100%}}.carousel .carousel__controls button{padding:0;margin:0 .2rem .2rem;border:none}.carousel .carousel__controls button{width:0.5rem;height:0.5rem;min-height:0.5rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:#a5ecfd;margin-inline:0.375rem;cursor:pointer;border:none}.carousel .carousel__controls button:hover{background-color:var(--colour-info)}.carousel .carousel__controls button:before{display:none}.carousel .carousel__controls button:first-child:last-child{display:none}.carousel__controls>button[aria-current]{--colour-active-thumbnail: var(--colour-info);border-color:var(--colour-active-thumbnail);background:var(--colour-info);width:1rem;height:1rem;min-height:1rem;margin-inline:0.125rem}.carousel__controls>button[aria-current]:hover{background:var(--colour-info)}.carousel__progress{text-align:center;margin-bottom:1rem;display:none}input[type=range]{--track-size: 0.5rem;--track-colour: #A5ECFD;--thumb-colour: var(--colour-info);--thumb-size: 1rem;--thumb-size-outline: 0rem;width:90%;max-width:10.75rem;background:rgba(0,0,0,0);cursor:pointer;margin:0;height:1rem;border-radius:50%;accent-color:var(--thumb-colour);-webkit-appearance:none;appearance:none}input[type=range]::-webkit-slider-runnable-track{background:var(--track-colour);height:var(--track-size);border-radius:0.5625rem}input[type=range]::-moz-range-track{background:var(--track-colour);height:var(--track-size);border-radius:0.5625rem}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) calc(var(--percent, 0%)), var(--track-colour) calc(var(--percent, 0%)))}input[type=range]::-moz-range-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) calc(var(--percent, 0%)), var(--track-colour) calc(var(--percent, 0%)))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-0.25rem;background-color:var(--thumb-colour);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:relative;z-index:99;pointer-events:all}input[type=range]::-moz-range-thumb{border:none;background-color:var(--thumb-colour);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:relative;z-index:99;pointer-events:all}input[type=range]:focus{outline:none}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:active::-webkit-slider-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:hover::-moz-range-thumb,input[type=range]:focus::-moz-range-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:focus::-moz-range-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}.carousel__btns:has(~.carousel__controls button:first-child:nth-child(1):last-child){display:none}.carousel__controls:has(button:nth-child(5)){display:none}.carousel__controls:has(button:nth-child(5))~.carousel__progress{display:block}@container (min-width: 36em){:host([data-smcols="2"]) .carousel__controls>button:not(:nth-child(odd)),:host([data-smcols="3"]) .carousel__controls>button:not(:nth-child(3n+1)),:host([data-smcols="4"]) .carousel__controls>button:not(:nth-child(4n+1)){display:none}:host([data-smcols="2"]) .carousel__controls:has(button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),:host([data-smcols="4"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),:host([data-smcols="2"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)){display:none}:host([data-smcols]) .carousel__controls{display:block}:host([data-smcols]) .carousel__controls~.carousel__progress{display:none}:host([data-smcols="2"]) .carousel__controls:has(button:nth-child(10)),:host([data-smcols="3"]) .carousel__controls:has(button:nth-child(15)),:host([data-smcols="4"]) .carousel__controls:has(button:nth-child(20)){display:none}:host([data-smcols="2"]) .carousel__controls:has(button:nth-child(10))~.carousel__progress,:host([data-smcols="3"]) .carousel__controls:has(button:nth-child(15))~.carousel__progress,:host([data-smcols="4"]) .carousel__controls:has(button:nth-child(20))~.carousel__progress{display:block}}@container (min-width: 62em){:host([data-mdcols]) .carousel__controls>button{display:inline-block !important}:host([data-mdcols]) .carousel__controls{display:block !important}:host([data-mdcols="2"]) .carousel__controls>button:not(:nth-child(odd)),:host([data-mdcols="3"]) .carousel__controls>button:not(:nth-child(3n+1)),:host([data-mdcols="4"]) .carousel__controls>button:not(:nth-child(4n+1)),:host([data-mdcols="5"]) .carousel__controls>button:not(:nth-child(5n+1)),:host([data-mdcols="6"]) .carousel__controls>button:not(:nth-child(6n+1)){display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),:host([data-mdcols="4"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),:host([data-mdcols="5"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),:host([data-mdcols="6"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),:host([data-mdcols="2"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)) :host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(5)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(5)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(6)){display:none !important}:host([data-mdcols]) .carousel__controls{display:block !important}:host([data-mdcols]) .carousel__controls~.carousel__progress{display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:nth-child(10)),:host([data-mdcols="3"]) .carousel__controls:has(button:nth-child(15)),:host([data-mdcols="4"]) .carousel__controls:has(button:nth-child(20)),:host([data-mdcols="5"]) .carousel__controls:has(button:nth-child(25)),:host([data-mdcols="6"]) .carousel__controls:has(button:nth-child(30)){display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:nth-child(10))~.carousel__progress,:host([data-mdcols="3"]) .carousel__controls:has(button:nth-child(15))~.carousel__progress,:host([data-mdcols="4"]) .carousel__controls:has(button:nth-child(20))~.carousel__progress,:host([data-mdcols="5"]) .carousel__controls:has(button:nth-child(25))~.carousel__progress,:host([data-mdcols="6"]) .carousel__controls:has(button:nth-child(30))~.carousel__progress{display:block !important}}:host(.thumbnails) .carousel__controls{display:flex !important;flex-wrap:wrap;max-width:100%;overflow:visible}:host(.thumbnails) .carousel__controls button{padding:0;margin:0 .2rem .4rem;width:6rem;height:auto;aspect-ratio:var(--carousel-image-aspect-ratio, 3/2);border-radius:0;position:relative;border-radius:0.25rem}:host(.thumbnails) .carousel__controls button img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;margin:0}:host(.thumbnails) .carousel__controls button[aria-current]{outline:2px solid var(--colour-info)}:host(.thumbnails) .carousel .carousel__btns{padding-bottom:.5rem}:host(.thumbnails) .carousel .btn-next,:host(.thumbnails) .carousel .btn-prev{position:relative;margin:0 !important}:host(.thumbnails) .carousel .carousel__progress{display:none !important}::slotted(div.image__wrapper){width:100%;aspect-ratio:var(--carousel-image-aspect-ratio, 3/2);position:relative}/*# sourceMappingURL=assets/css/components/carousel.component.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
-    <div class="carousel" :id="'carousel'+id">
+    <div class="carousel" part="carousel">
       <div class="carousel__wrapper">
         <div class="carousel__inner">
-          
-          <slot></slot>
+          <div class="carousel__content" part="content">
+            <slot></slot>
+          </div>
         </div>
  
+      </div>
+        <div class="carousel__btns" part="btns">
+          <button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled  part="prev">Prev</button>
+          <button class="btn btn-secondary btn-compact fa-plus-large btn-next" data-go="2" part="next">Next</button>
+        </div>
+
         <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
-        <button class="btn btn-next" data-go="2" part="next">Next</button>
+        <div class="carousel__progress" part="progress">
+          <input type="range" min="0" max="100" value="1" step="1">
+        </div>
 
-      </div>
     </div>
-    `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){const o=this.shadowRoot.querySelector(".carousel"),i=this.querySelector(".row"),t=JSON.parse(this.dataset.thumbnails),u=this.shadowRoot.querySelector(".carousel__controls");let n=this.querySelectorAll(":scope > .row > .col").length;o.setAttribute("data-row-class",i.className),this.classList.contains("hide-btns")&&o.classList.add("hide-btns"),this.classList.contains("hide-controls")&&o.classList.add("hide-controls"),t?.length&&u.classList.add("thumbnails");let a="";for(let s=1;s<=n;s++){let e=null,r="";t.length?(r="has-thumbnail",e=`<img src="${t[s-1].src}" alt="Slide ${s}" height="148"/>`):e=`Slide ${s}`,a+=`<button class="control-${s} ${r}" data-slide="${s}" ${s==1?"aria-current":""}>${e}</button>`}u.innerHTML=a,p(o,i)}}export{v as default};
+    `,this.shadowRoot.appendChild(o.content.cloneNode(!0))}connectedCallback(){const o=this;this.shadowRoot.querySelector(".carousel"),this.shadowRoot.querySelector(".row");let n=[];const t=this.shadowRoot.querySelector(".carousel__controls");o.querySelector("[data-thumbnail]")&&(n=C(o),o.classList.add("thumbnails")),t.innerHTML=M(o,n),Array.from(o.querySelectorAll(":scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img")).forEach((a,r)=>{a.style.inset="0 0.5rem 0 0.5rem",a.style.position="absolute",a.style.width="calc(100% - 1rem)",a.style.height="100%",a.style["object-fit"]="cover",a.closest("div").classList.add("image__wrapper")}),W(o),P(o,"iam-carousel",["pip-clicked","next-clicked","prev-clicked","slider-changed"])}attributeChangedCallback(o,n,t){}}export{I as default};
 //# sourceMappingURL=carousel.component.min.js.map