@iamproperty/components 7.2.2--beta3 → 7.4.0

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

@@ -1,9 +1,9 @@
 /*!
-  * iamKey v7.2.2--beta3
+  * iamKey v7.4.0
   * Copyright 2022-2025 iamproperty
   */const M=function(e){const t=[];return Array.from(e.querySelectorAll(":scope > div")).forEach((n,o)=>{n.hasAttribute("data-thumbnail")&&(t[o]=n.getAttribute("data-thumbnail"))}),t},W=function(e,t){const n=e.querySelectorAll(":scope > div").length;let o="";for(let a=1;a<=n;a++){let r=null,s="";t.length&&t[a-1]?(s="has-thumbnail",r=`<img src="${t[a-1]}" alt="Slide ${a}" height="148"/>`):r=`Slide ${a}`,o+=`<button class="control-${a} ${s}" data-slide="${a}" ${a==1?"aria-current":""}>${r}</button>`}return o},x=function(e,t){return t==1?e:Math.ceil(e/t)*t-t+1},z=function(e,t){return(e-1)/(t-1)*100},$=function(e){let t;const n=e.shadowRoot.querySelector(".carousel"),o=n.querySelector(".carousel__inner"),a=n.querySelector(".carousel__controls"),r=n.querySelector('.carousel__progress [type="range"]'),s=e.querySelectorAll(":scope > div").length;let p=o.clientWidth,y=e.querySelector(":scope > div").scrollWidth,v=Math.round(p/y);r.setAttribute("min",1),r.setAttribute("step",v);let h=x(s,v);r.setAttribute("max",h),r.value=1;let b=z(1,h);r.style.setProperty("--percent",b+"%");let f,A="mouseup",L="mousedown";"ontouchstart"in document.documentElement&&(A="touchend",L="touchstart"),o.addEventListener("scroll",function(){clearTimeout(t),t=setTimeout(function(){const c=o.clientWidth,i=o.scrollWidth,m=o.scrollLeft;let l=Math.round(m/i*s)+1;const g=e.querySelector(":scope > div").scrollWidth,w=e.querySelector(":scope > div:last-child").offsetLeft,_=o.scrollLeft+c+o.getBoundingClientRect().left>=w+60,u=Math.round(c/g),k=Math.ceil(s/u)*u-s;r.setAttribute("step",u),k>0&&_&&(l=Math.floor(s/u)*u+1),Array.from(n.querySelectorAll(".carousel__controls button")).forEach(d=>{d.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>s-u?n.querySelector(".btn-next").setAttribute("disabled","disabled"):n.querySelector(".btn-next").removeAttribute("disabled"),r.value=l,h=x(s,u),r.setAttribute("max",h),b=l/h*100,b=z(l,h),r.style.setProperty("--percent",b+"%")},100)},!1),a.addEventListener("click",function(c){for(let i=c.target;i&&i!=this;i=i.parentNode)if(typeof i.matches=="function"&&i.matches("button")){c.preventDefault(),Array.from(a.querySelectorAll("button")).forEach(g=>{g.removeAttribute("aria-current")}),i.setAttribute("aria-current",!0);const m=new CustomEvent("pip-clicked",{detail:{slide:i.getAttribute("data-slide")}});e.dispatchEvent(m);const l=e.querySelector(`:scope > *:nth-child(${i.getAttribute("data-slide")})`);o.scroll({top:0,left:l.offsetLeft-o.getBoundingClientRect().left,behavior:"smooth"});break}},!1),n.addEventListener("click",function(c){const i=o.clientWidth,m=e.querySelector(":scope > div").scrollWidth,l=Math.round(i/m),g=e.querySelector(":scope > div:last-child").offsetLeft,w=o.scrollLeft+i+o.getBoundingClientRect().left>=g+60,_=Math.ceil(s/l)*l-s,u=l-_,k=w&&_>0?u*m:o.clientWidth;for(let d=c.target;d&&d!=this;d=d.parentNode)if(typeof d.matches=="function"&&d.matches(".btn-next, .btn-prev")){const S=d.matches(".btn-next")?"next":"prev",E=new CustomEvent(`${S}-clicked`,{detail:{slide:d.getAttribute("data-go")}});e.dispatchEvent(E),c.preventDefault();const q=d.classList.contains("btn-prev")?o.scrollLeft-k:o.scrollLeft+o.clientWidth;o.scroll({top:0,left:q,behavior:"smooth"});break}},!1),r.addEventListener(L,function(){clearInterval(f),f=setInterval(function(){p=o.clientWidth,y=e.querySelector(":scope > div").scrollWidth,v=Math.round(p/y),r.setAttribute("step",v),h=x(s,v),r.setAttribute("max",h),b=z(r.value,h),r.style.setProperty("--percent",b+"%")},10)}),r.addEventListener(A,function(){clearInterval(f)}),r.addEventListener("change",function(){clearInterval(f);const c=e.querySelector(`:scope > *:nth-child(${r.value})`);o.scroll({top:0,left:c?c.offsetLeft-o.getBoundingClientRect().left:0,behavior:"smooth"});const i=new CustomEvent("slider-changed",{detail:{slide:r.value}});e.dispatchEvent(i)},!1)},P=e=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:e})},I=(e,t,n)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:t}),n.forEach(o=>{e.addEventListener(o,function(a){const r={event:o,element:t,target:a.target};Object.keys(a.detail).forEach(s=>{const p=a.detail[s];r[s]=p}),window.dataLayer.push(r)})}),!0);P("iam-carousel");class C 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>
-    @layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}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: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 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:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !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:var(--btn-font-size) !important;line-height:var(--btn-line-height) !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"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem;border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.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) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}.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-bg: transparent;--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:var(--colour)}.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}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}*,*::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 */
+    @layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}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: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 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:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !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:var(--btn-font-size) !important;line-height:var(--btn-line-height) !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"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem;border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.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) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@media screen and (prefers-color-scheme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.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-bg: transparent;--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:var(--colour)}.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}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}*,*::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(.hide-btns) .carousel__btns,:host(.hide-controls) .carousel__controls{display:none}: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>

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

@@ -27,6 +27,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
 
         <div class="side-menu" part="side-menu">
           <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
+          
           <div class="side-menu-content closed" part="side-menu-content">
             <slot name="menu"></slot>
           </div>
@@ -38,30 +39,46 @@ class iamCollapsibleSideMenu extends HTMLElement {
 
       </div>
     `;
-        this.shadowRoot.appendChild(template.content.cloneNode(true));
+        if (this.shadowRoot) {
+            this.shadowRoot.appendChild(template.content.cloneNode(true));
+        }
     }
     connectedCallback() {
+        if (!this.shadowRoot)
+            return;
+        const container = this.shadowRoot.querySelector('.container');
         const sideMenu = this.shadowRoot.querySelector('.side-menu');
         const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');
         const mainContent = this.shadowRoot.querySelector('.main-content');
         const button = this.shadowRoot.querySelector('.side-menu > .btn');
+        if (!sideMenu || !sideMenuContent || !mainContent || !button)
+            return;
         // Load external CSS if needed
-        if (this.hasAttribute('data-css'))
-            this.shadowRoot
-                .querySelector('.styles')
-                .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
-        // Set sde nav title
-        if (!this.hasAttribute('data-title'))
+        if (this.hasAttribute('data-css')) {
+            const styles = this.shadowRoot.querySelector('.styles');
+            if (styles) {
+                styles.insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+            }
+        }
+        // Set side nav title
+        if (!this.hasAttribute('data-title')) {
             this.setAttribute('data-title', 'configuration');
+        }
         sideMenuContent.insertAdjacentHTML('afterbegin', `<span class="h3">${this.getAttribute('data-title')}</span>`);
         mainContent.insertAdjacentHTML('afterbegin', `<span class="h3">${this.getAttribute('data-title')}</span>`);
-        if (this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')) {
-            this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');
-            this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');
+        const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)');
+        if (titleElement) {
+            titleElement.classList.add('h4', 'main-content__title');
         }
         if (this.hasAttribute('open') && window.innerWidth > 992) {
             sideMenu.classList.add('open');
-            button.setAttribute('aria-expanded', true);
+            button.setAttribute('aria-expanded', 'true');
+        }
+        if (this.hasAttribute('inline')) {
+            container.classList.add('inline');
+        }
+        if (this.hasAttribute('menu-right')) {
+            sideMenu.classList.add('menu-right');
         }
         // Open the menu
         button.addEventListener('click', () => {
@@ -69,7 +86,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
                 sideMenuContent.classList.remove('closed');
                 setTimeout(function () {
                     sideMenu.classList.add('open');
-                    button.setAttribute('aria-expanded', true);
+                    button.setAttribute('aria-expanded', 'true');
                 }, 100);
             }
             else {
@@ -108,6 +125,24 @@ class iamCollapsibleSideMenu extends HTMLElement {
                     }, 1000); // Delay until its close so the animation is broken
             }
         });
+        const sideMenuParentGroups = this.querySelectorAll('.parent');
+        const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');
+        sideMenuParentGroupsTopLinks === null || sideMenuParentGroupsTopLinks === void 0 ? void 0 : sideMenuParentGroupsTopLinks.forEach((parentLink) => {
+            parentLink.addEventListener('click', () => {
+                if (!parentLink || !parentLink.parentElement)
+                    return false; // make sure elements exist
+                if (parentLink.parentElement.classList.contains('reveal')) {
+                    parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent
+                }
+                else {
+                    // remove other reveals and add reveal to this one
+                    sideMenuParentGroups === null || sideMenuParentGroups === void 0 ? void 0 : sideMenuParentGroups.forEach((parentGroup) => {
+                        parentGroup.classList.remove('reveal');
+                    });
+                    parentLink.parentElement.classList.add('reveal');
+                }
+            });
+        });
     }
 }
 export default iamCollapsibleSideMenu;

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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v7.2.2--beta3
+  * iamKey v7.4.0
   * Copyright 2022-2025 iamproperty
-  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,n=document.createElement("template");n.innerHTML=`
+  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class c extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
     <style class="styles">
-    @import "${t}";
-    :host{--colour-border: #e9e9e9;--side-link-hover: var(--colour-canvas-2);grid-column:full-width;display:block;min-height:calc(100vh - var(--nav-height));padding-top:0 !important;margin-inline:auto;width:100%;overflow:hidden;position:relative}@media screen and (prefers-color-scheme: light){:host{--side-link-hover: #eeeeee}}@media screen and (min-width: 62em){:host{max-height:calc(100vh - var(--nav-height));overflow:auto}}.container{position:static;min-height:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important}@media screen and (min-width: 62em){.container{padding-left:5.25rem !important}}.side-menu{position:absolute;top:0;left:0;height:100%;min-height:calc(100vh - var(--nav-height));width:1.875rem;height:calc(100% - var(--nav-height));background-color:var(--colour-canvas);transition:width 1s}.side-menu:before{content:"";position:absolute;top:0;right:0;height:100%;border-right:2px solid var(--colour-border)}@media screen and (min-width: 36em){.side-menu{left:0;width:2.5rem}}@media screen and (min-width: 62em){.side-menu{left:5.25rem;margin-left:-5.25rem;position:fixed;top:var(--nav-height)}.side-menu:not(.open).hover{width:19rem}.side-menu:not(.open).hover .btn[class*=fa-]:before{content:"\uF023" !important}}.side-menu .btn{display:var(--btn-display, block);position:absolute;top:2rem;right:0;margin-bottom:0;margin-right:-1.25rem;background-color:var(--colour-canvas-2);border:2px solid var(--colour-border);z-index:99;color:var(--colour-primary-theme)}.side-menu .btn[aria-expanded][class*=fa-]:before{content:"\uF053" !important}@media screen and (min-width: 62em){.side-menu .btn[aria-expanded]{opacity:0}}.side-menu:is(:hover,:focus-within,:active) .btn{border:2px solid var(--colour-border);color:var(--colour-primary-theme)}@media screen and (min-width: 62em){.side-menu:is(:hover,:focus-within,:active) .btn{opacity:1}}.side-menu:is(.open){width:calc(100% - var(--container-padding-x))}@media screen and (min-width: 36em){.side-menu:is(.open){width:23.875rem}}@media screen and (min-width: 62em){.side-menu:is(.open){width:19rem}}.side-menu .side-menu-content{position:absolute;top:0;right:0;padding:2rem 2.5rem 0 0;width:21.9375rem;opacity:0;transition:opacity 1s;min-height:100%;overflow:auto;max-height:100%}.side-menu .side-menu-content .h3{padding-left:1.5rem}@media screen and (min-width: 36em){.side-menu .side-menu-content{width:23.875rem}.side-menu .side-menu-content .h3{padding-left:2.5rem}}@media screen and (min-width: 62em){.side-menu .side-menu-content{width:19rem}.side-menu .side-menu-content .h3{padding-left:var(--container-padding-x-md)}}.side-menu:not(.hover):not(.open) .side-menu-content.closed{display:none}.side-menu.open .side-menu-content{opacity:1}@media screen and (min-width: 62em){.side-menu.hover .side-menu-content{opacity:1}}::slotted(*[slot=menu]){padding-left:1.5rem}@media screen and (min-width: 36em){::slotted(*[slot=menu]){padding-left:2.5rem}}@media screen and (min-width: 62em){::slotted(*[slot=menu]){padding-left:var(--container-padding-x-md)}}::slotted(hr){border-bottom:2px solid var(--colour-border) !important;margin-right:-2.5rem !important}::slotted(a[slot=menu]){display:block;display:block !important;line-height:1.25rem !important;padding:1rem 2.5rem 1rem 1.5rem !important;margin:0 !important;flex-shrink:0;font-size:1rem !important;font-weight:normal !important;text-decoration:none;border-right:2px solid var(--colour-border) !important;border-bottom:2px solid var(--colour-border) !important;margin-right:-2.5rem !important}@media screen and (min-width: 36em){::slotted(a[slot=menu]){padding-left:2.5rem !important}}@media screen and (min-width: 62em){::slotted(a[slot=menu]){padding-left:var(--container-padding-x-md) !important}}::slotted(a[slot=menu]):after{display:none}::slotted(a[slot=menu]:where(:hover,:focus,[aria-expanded])){background-color:var(--side-link-hover) !important}::slotted(a[slot=menu]:active){background-color:var(--side-link-hover) !important;font-weight:bold !important}::slotted(a[slot=menu][aria-expanded]){background-color:var(--side-link-hover) !important;font-weight:bold !important;margin-right:-2.5rem !important;position:relative;border-right:2px solid var(--colour-info) !important}::slotted(a[slot=menu][aria-expanded]):before{content:"";position:absolute;top:0;right:0;height:calc(100% + 4px);margin-top:-2px;width:2px;border-right:2px solid var(--colour-info);margin-right:-2px}@media(forced-colors: active){::slotted(a[slot=menu][aria-expanded]):before{border-right:10px solid var(--colour-info)}}.main-content{padding-top:1.5rem;padding-left:3.75rem}@media screen and (min-width: 36em){.main-content{padding-left:5rem}}@media screen and (min-width: 62em){.main-content{padding-top:2.5rem !important;padding-left:0}}.main-content>span.h3{padding-top:.75rem;border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important}@media screen and (min-width: 62em){.main-content>span.h3{display:none}}::slotted(.main-content__title){border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important;max-width:100% !important;display:block}@media screen and (min-width: 62em){::slotted(.main-content__title){display:none}}@media screen and (min-width: 62em){.container:has(.side-menu.open){padding-left:2rem !important;margin-left:max(19rem,50% - var(--container-max-width)/2);margin-right:0;max-width:min(var(--container-max-width),100% - 19rem)}}@media screen and (min-width: 62em){:host([open-always]){--btn-display: none}}/*# sourceMappingURL=assets/css/components/collapsible-side.css.map */
+    @import "${e}";
+    :host{--colour-border: #e9e9e9;--side-link-hover: var(--colour-canvas-2);grid-column:full-width;display:block;min-height:calc(100vh - var(--nav-height));padding-top:0 !important;margin-inline:auto;width:100%;overflow:hidden;position:relative}@media screen and (prefers-color-scheme: light){:host{--side-link-hover: #eeeeee}}@media screen and (min-width: 62em){:host{max-height:calc(100vh - var(--nav-height));overflow:auto}}.container{position:static;min-height:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important}@media screen and (min-width: 62em){.container{padding-left:5.25rem !important}}.container.inline .side-menu{position:absolute;top:0}.side-menu{position:absolute;z-index:20;top:0;left:0;height:100%;min-height:calc(100vh - var(--nav-height));width:4.375rem;height:calc(100% - var(--nav-height));padding:0 2.5rem 0 0;transition:width 1s}.side-menu:before{content:"";position:absolute;z-index:1;top:0;right:2.5rem;height:100%;border-right:2px solid var(--colour-border)}@media screen and (min-width: 36em){.side-menu{left:0;width:5rem}}@media screen and (min-width: 62em){.side-menu{left:5.25rem;margin-left:-5.25rem;position:fixed;top:var(--nav-height)}.side-menu:not(.open).hover{width:21.5rem}.side-menu:not(.open).hover .btn[class*=fa-]:before{content:"\uF023" !important;transform:rotate(0)}}.side-menu .btn{display:var(--btn-display, block);position:absolute;top:2rem;right:2.5rem;margin-bottom:0;margin-right:-1.25rem;background-color:var(--colour-canvas-2);border:2px solid var(--colour-border);z-index:99;color:var(--colour-primary-theme);transition:opacity .2s}.side-menu .btn[aria-expanded][class*=fa-]:before{content:"\uF053" !important}@media screen and (min-width: 62em){.side-menu .btn[aria-expanded]{opacity:0}}.side-menu:is(:hover,:focus-within,:active) .btn{border:2px solid var(--colour-border);color:var(--colour-primary)}@media screen and (min-width: 62em){.side-menu:is(:hover,:focus-within,:active) .btn{opacity:1}}.side-menu:is(.open){width:calc(100% - var(--container-padding-x) + 2.5rem)}@media screen and (min-width: 36em){.side-menu:is(.open){width:26.375rem}}@media screen and (min-width: 62em){.side-menu:is(.open){width:21.5rem}}.side-menu .side-menu-content{position:absolute;top:0;right:2.5rem;padding:2rem 2.5rem 2.5rem 0;width:21.9375rem;background-color:var(--colour-canvas);opacity:0;transition:opacity 1s;min-height:100%;overflow:auto;max-height:100%;scrollbar-width:thin}.side-menu .side-menu-content .h3{padding-left:1.5rem}@media screen and (min-width: 36em){.side-menu .side-menu-content{width:23.875rem}.side-menu .side-menu-content .h3{padding-left:2.5rem}}@media screen and (min-width: 62em){.side-menu .side-menu-content{width:19rem}.side-menu .side-menu-content .h3{padding-left:var(--container-padding-x-md)}}.side-menu:not(.hover):not(.open) .side-menu-content.closed{display:none}.side-menu.open .side-menu-content{opacity:1}@media screen and (min-width: 62em){.side-menu.hover .side-menu-content{opacity:1}}.main-content{position:relative;z-index:10;padding-top:1.5rem;padding-left:3.75rem}@media screen and (min-width: 36em){.main-content{padding-left:5rem}}@media screen and (min-width: 62em){.main-content{padding-top:2.5rem !important;padding-left:0}}.main-content>span.h3{padding-top:.75rem;border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important}@media screen and (min-width: 62em){.main-content>span.h3{display:none}}::slotted(.main-content__title){border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important;max-width:100% !important;display:block}@media screen and (min-width: 62em){::slotted(.main-content__title){display:none}}@media screen and (min-width: 62em){.container:has(.side-menu.open){padding-left:2rem !important;margin-left:max(19rem,50% - var(--container-max-width)/2);margin-right:0;max-width:min(var(--container-max-width),100% - 19rem)}}@media screen and (min-width: 62em){:host([open-always]){--btn-display: none}}:host([inline]){width:100%;max-width:100%}@media screen and (min-width: 62em){:host([inline]){max-width:min(var(--container-max-width),100% - 19rem)}}:host([menu-right]) .container{padding-right:0 !important}@media screen and (min-width: 62em){:host([menu-right]) .container{padding-right:5.25rem !important}}@media screen and (min-width: 62em){:host([menu-right]) .container:has(.side-menu.open){margin-right:max(19rem,50% - var(--container-max-width)/2);margin-left:0}}:host([menu-right]) .side-menu{left:auto;right:-2.5rem;padding:0 0 0 2.5rem}@media screen and (min-width: 62em){:host([menu-right]) .side-menu{right:0}}:host([menu-right]) .side-menu::before{right:100%}:host([menu-right]) .side-menu .btn{right:100%}:host([menu-right]) .side-menu .btn:before{transform:rotate(180deg)}:host([menu-right]) .main-content{padding-left:var(--container-padding-x);padding-right:3.75rem}@media screen and (min-width: 36em){:host([menu-right]) .main-content{padding-right:5rem}}@media screen and (min-width: 62em){:host([menu-right]) .main-content{padding-right:0}}/*# sourceMappingURL=assets/css/components/collapsible-side.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
@@ -13,6 +13,7 @@
 
         <div class="side-menu" part="side-menu">
           <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
+          
           <div class="side-menu-content closed" part="side-menu-content">
             <slot name="menu"></slot>
           </div>
@@ -23,5 +24,5 @@
         </div>
 
       </div>
-    `,this.shadowRoot.appendChild(n.content.cloneNode(!0))}connectedCallback(){const e=this.shadowRoot.querySelector(".side-menu"),t=this.shadowRoot.querySelector(".side-menu-content"),n=this.shadowRoot.querySelector(".main-content"),i=this.shadowRoot.querySelector(".side-menu > .btn");this.hasAttribute("data-css")&&this.shadowRoot.querySelector(".styles").insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`),this.hasAttribute("data-title")||this.setAttribute("data-title","configuration"),t.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`),n.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`),this.querySelector(":scope > :is(h1,h2,h3,h4,h5,h6)")&&(this.querySelector(":scope > :is(h1,h2,h3,h4,h5,h6)").classList.add("h4"),this.querySelector(":scope > :is(h1,h2,h3,h4,h5,h6)").classList.add("main-content__title")),this.hasAttribute("open")&&window.innerWidth>992&&(e.classList.add("open"),i.setAttribute("aria-expanded",!0)),i.addEventListener("click",()=>{e.classList.contains("open")?(e.classList.remove("open"),i.removeAttribute("aria-expanded"),setTimeout(function(){t.classList.add("closed")},1e3),e.classList.add("pe-none"),setTimeout(function(){e.classList.remove("pe-none")},1e3)):(t.classList.remove("closed"),setTimeout(function(){e.classList.add("open"),i.setAttribute("aria-expanded",!0)},100))}),e.addEventListener("mouseenter",()=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"),e.classList.add("hover"))}),e.addEventListener("mousemove",()=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"))}),e.addEventListener("mouseleave",()=>{window.innerWidth>992&&(e.classList.remove("hover"),e.classList.contains("open")||setTimeout(function(){t.classList.add("closed")},1e3))})}}export{o as default};
+    `,this.shadowRoot&&this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){if(!this.shadowRoot)return;const o=this.shadowRoot.querySelector(".container"),e=this.shadowRoot.querySelector(".side-menu"),t=this.shadowRoot.querySelector(".side-menu-content"),d=this.shadowRoot.querySelector(".main-content"),i=this.shadowRoot.querySelector(".side-menu > .btn");if(!e||!t||!d||!i)return;if(this.hasAttribute("data-css")){const n=this.shadowRoot.querySelector(".styles");n&&n.insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`)}this.hasAttribute("data-title")||this.setAttribute("data-title","configuration"),t.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`),d.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`);const r=this.querySelector(":scope > :is(h1,h2,h3,h4,h5,h6)");r&&r.classList.add("h4","main-content__title"),this.hasAttribute("open")&&window.innerWidth>992&&(e.classList.add("open"),i.setAttribute("aria-expanded","true")),this.hasAttribute("inline")&&o.classList.add("inline"),this.hasAttribute("menu-right")&&e.classList.add("menu-right"),i.addEventListener("click",()=>{e.classList.contains("open")?(e.classList.remove("open"),i.removeAttribute("aria-expanded"),setTimeout(function(){t.classList.add("closed")},1e3),e.classList.add("pe-none"),setTimeout(function(){e.classList.remove("pe-none")},1e3)):(t.classList.remove("closed"),setTimeout(function(){e.classList.add("open"),i.setAttribute("aria-expanded","true")},100))}),e.addEventListener("mouseenter",()=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"),e.classList.add("hover"))}),e.addEventListener("mousemove",()=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"))}),e.addEventListener("mouseleave",()=>{window.innerWidth>992&&(e.classList.remove("hover"),e.classList.contains("open")||setTimeout(function(){t.classList.add("closed")},1e3))});const s=this.querySelectorAll(".parent"),a=this.querySelectorAll(".parent > li:first-of-type");a?.forEach(n=>{n.addEventListener("click",()=>{if(!n||!n.parentElement)return!1;n.parentElement.classList.contains("reveal")?n.parentElement.classList.remove("reveal"):(s?.forEach(m=>{m.classList.remove("reveal")}),n.parentElement.classList.add("reveal"))})})}}export{c as default};
 //# sourceMappingURL=collapsible-side.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'collapsible side menu',\n});\nclass iamCollapsibleSideMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css')\n            ? document.body.getAttribute('data-core-css')\n            : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/collapsible-side.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n      <div class=\"container\" part=\"container\">\n\n        <div class=\"side-menu\" part=\"side-menu\">\n          <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\n          <div class=\"side-menu-content closed\" part=\"side-menu-content\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n\n        <div class=\"main-content\" part=\"main-content\">\n          <slot></slot>\n        </div>\n\n      </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const sideMenu = this.shadowRoot.querySelector('.side-menu');\n        const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n        const mainContent = this.shadowRoot.querySelector('.main-content');\n        const button = this.shadowRoot.querySelector('.side-menu > .btn');\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css'))\n            this.shadowRoot\n                .querySelector('.styles')\n                .insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n        // Set sde nav title\n        if (!this.hasAttribute('data-title'))\n            this.setAttribute('data-title', 'configuration');\n        sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        if (this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')) {\n            this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');\n            this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');\n        }\n        if (this.hasAttribute('open') && window.innerWidth > 992) {\n            sideMenu.classList.add('open');\n            button.setAttribute('aria-expanded', true);\n        }\n        // Open the menu\n        button.addEventListener('click', () => {\n            if (!sideMenu.classList.contains('open')) {\n                sideMenuContent.classList.remove('closed');\n                setTimeout(function () {\n                    sideMenu.classList.add('open');\n                    button.setAttribute('aria-expanded', true);\n                }, 100);\n            }\n            else {\n                sideMenu.classList.remove('open');\n                button.removeAttribute('aria-expanded');\n                setTimeout(function () {\n                    sideMenuContent.classList.add('closed');\n                }, 1000); // Delay until its close so the animation is broken\n                // While the menu is closing dont allow the hover to re-open it until its fully closed.\n                sideMenu.classList.add('pe-none');\n                setTimeout(function () {\n                    sideMenu.classList.remove('pe-none');\n                }, 1000);\n            }\n        });\n        // Mimic hover event on desktop so that we can control when classes are set and which order\n        sideMenu.addEventListener('mouseenter', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n                sideMenu.classList.add('hover');\n            }\n        });\n        sideMenu.addEventListener('mousemove', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n            }\n        });\n        sideMenu.addEventListener('mouseleave', () => {\n            if (window.innerWidth > 992) {\n                sideMenu.classList.remove('hover');\n                if (!sideMenu.classList.contains('open'))\n                    setTimeout(function () {\n                        sideMenuContent.classList.add('closed');\n                    }, 1000); // Delay until its close so the animation is broken\n            }\n        });\n    }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","assetLocation","coreCSS","template","sideMenu","sideMenuContent","mainContent","button"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAE,EACzC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,uBACb,CAAC,EACD,MAAMA,UAA+B,WAAY,CAC7C,aAAc,CACV,MAAO,EACP,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UACAC,EAAU,SAAS,KAAK,aAAa,eAAe,EACpD,SAAS,KAAK,aAAa,eAAe,EAC1C,GAAGD,CAAa,oBAEhBE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD,CAAO;AAAA;AAAA;AAAA,MAEhB,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,CAAC,KAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkBtE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CACpE,CACI,mBAAoB,CAChB,MAAMC,EAAW,KAAK,WAAW,cAAc,YAAY,EACrDC,EAAkB,KAAK,WAAW,cAAc,oBAAoB,EACpEC,EAAc,KAAK,WAAW,cAAc,eAAe,EAC3DC,EAAS,KAAK,WAAW,cAAc,mBAAmB,EAE5D,KAAK,aAAa,UAAU,GAC5B,KAAK,WACA,cAAc,SAAS,EACvB,mBAAmB,YAAa,YAAY,KAAK,aAAa,UAAU,CAAC,IAAI,EAEjF,KAAK,aAAa,YAAY,GAC/B,KAAK,aAAa,aAAc,eAAe,EACnDF,EAAgB,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,CAAC,SAAS,EAC7GC,EAAY,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,CAAC,SAAS,EACrG,KAAK,cAAc,iCAAiC,IACpD,KAAK,cAAc,iCAAiC,EAAE,UAAU,IAAI,IAAI,EACxE,KAAK,cAAc,iCAAiC,EAAE,UAAU,IAAI,qBAAqB,GAEzF,KAAK,aAAa,MAAM,GAAK,OAAO,WAAa,MACjDF,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,EAAI,GAG7CA,EAAO,iBAAiB,QAAS,IAAM,CAC9BH,EAAS,UAAU,SAAS,MAAM,GAQnCA,EAAS,UAAU,OAAO,MAAM,EAChCG,EAAO,gBAAgB,eAAe,EACtC,WAAW,UAAY,CACnBF,EAAgB,UAAU,IAAI,QAAQ,CACzC,EAAE,GAAI,EAEPD,EAAS,UAAU,IAAI,SAAS,EAChC,WAAW,UAAY,CACnBA,EAAS,UAAU,OAAO,SAAS,CACtC,EAAE,GAAI,IAhBPC,EAAgB,UAAU,OAAO,QAAQ,EACzC,WAAW,UAAY,CACnBD,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,EAAI,CAC5C,EAAE,GAAG,EActB,CAAS,EAEDH,EAAS,iBAAiB,aAAc,IAAM,CACtC,OAAO,WAAa,MACfA,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAC7CD,EAAS,UAAU,IAAI,OAAO,EAE9C,CAAS,EACDA,EAAS,iBAAiB,YAAa,IAAM,CACrC,OAAO,WAAa,MACfA,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAE7D,CAAS,EACDD,EAAS,iBAAiB,aAAc,IAAM,CACtC,OAAO,WAAa,MACpBA,EAAS,UAAU,OAAO,OAAO,EAC5BA,EAAS,UAAU,SAAS,MAAM,GACnC,WAAW,UAAY,CACnBC,EAAgB,UAAU,IAAI,QAAQ,CACzC,EAAE,GAAI,EAE3B,CAAS,CACT,CACA"}
+{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'collapsible side menu',\n});\nclass iamCollapsibleSideMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css')\n            ? document.body.getAttribute('data-core-css')\n            : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/collapsible-side.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n      <div class=\"container\" part=\"container\">\n\n        <div class=\"side-menu\" part=\"side-menu\">\n          <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\n          \n          <div class=\"side-menu-content closed\" part=\"side-menu-content\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n\n        <div class=\"main-content\" part=\"main-content\">\n          <slot></slot>\n        </div>\n\n      </div>\n    `;\n        if (this.shadowRoot) {\n            this.shadowRoot.appendChild(template.content.cloneNode(true));\n        }\n    }\n    connectedCallback() {\n        if (!this.shadowRoot)\n            return;\n        const container = this.shadowRoot.querySelector('.container');\n        const sideMenu = this.shadowRoot.querySelector('.side-menu');\n        const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n        const mainContent = this.shadowRoot.querySelector('.main-content');\n        const button = this.shadowRoot.querySelector('.side-menu > .btn');\n        if (!sideMenu || !sideMenuContent || !mainContent || !button)\n            return;\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css')) {\n            const styles = this.shadowRoot.querySelector('.styles');\n            if (styles) {\n                styles.insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n            }\n        }\n        // Set side nav title\n        if (!this.hasAttribute('data-title')) {\n            this.setAttribute('data-title', 'configuration');\n        }\n        sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)');\n        if (titleElement) {\n            titleElement.classList.add('h4', 'main-content__title');\n        }\n        if (this.hasAttribute('open') && window.innerWidth > 992) {\n            sideMenu.classList.add('open');\n            button.setAttribute('aria-expanded', 'true');\n        }\n        if (this.hasAttribute('inline')) {\n            container.classList.add('inline');\n        }\n        if (this.hasAttribute('menu-right')) {\n            sideMenu.classList.add('menu-right');\n        }\n        // Open the menu\n        button.addEventListener('click', () => {\n            if (!sideMenu.classList.contains('open')) {\n                sideMenuContent.classList.remove('closed');\n                setTimeout(function () {\n                    sideMenu.classList.add('open');\n                    button.setAttribute('aria-expanded', 'true');\n                }, 100);\n            }\n            else {\n                sideMenu.classList.remove('open');\n                button.removeAttribute('aria-expanded');\n                setTimeout(function () {\n                    sideMenuContent.classList.add('closed');\n                }, 1000); // Delay until its close so the animation is broken\n                // While the menu is closing dont allow the hover to re-open it until its fully closed.\n                sideMenu.classList.add('pe-none');\n                setTimeout(function () {\n                    sideMenu.classList.remove('pe-none');\n                }, 1000);\n            }\n        });\n        // Mimic hover event on desktop so that we can control when classes are set and which order\n        sideMenu.addEventListener('mouseenter', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n                sideMenu.classList.add('hover');\n            }\n        });\n        sideMenu.addEventListener('mousemove', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n            }\n        });\n        sideMenu.addEventListener('mouseleave', () => {\n            if (window.innerWidth > 992) {\n                sideMenu.classList.remove('hover');\n                if (!sideMenu.classList.contains('open'))\n                    setTimeout(function () {\n                        sideMenuContent.classList.add('closed');\n                    }, 1000); // Delay until its close so the animation is broken\n            }\n        });\n        const sideMenuParentGroups = this.querySelectorAll('.parent');\n        const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');\n        sideMenuParentGroupsTopLinks === null || sideMenuParentGroupsTopLinks === void 0 ? void 0 : sideMenuParentGroupsTopLinks.forEach((parentLink) => {\n            parentLink.addEventListener('click', () => {\n                if (!parentLink || !parentLink.parentElement)\n                    return false; // make sure elements exist\n                if (parentLink.parentElement.classList.contains('reveal')) {\n                    parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent\n                }\n                else {\n                    // remove other reveals and add reveal to this one\n                    sideMenuParentGroups === null || sideMenuParentGroups === void 0 ? void 0 : sideMenuParentGroups.forEach((parentGroup) => {\n                        parentGroup.classList.remove('reveal');\n                    });\n                    parentLink.parentElement.classList.add('reveal');\n                }\n            });\n        });\n    }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","assetLocation","coreCSS","template","container","sideMenu","sideMenuContent","mainContent","button","styles","titleElement","sideMenuParentGroups","sideMenuParentGroupsTopLinks","parentLink","parentGroup"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAE,EACzC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,uBACb,CAAC,EACD,MAAMA,UAA+B,WAAY,CAC7C,aAAc,CACV,MAAO,EACP,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UACAC,EAAU,SAAS,KAAK,aAAa,eAAe,EACpD,SAAS,KAAK,aAAa,eAAe,EAC1C,GAAGD,CAAa,oBAEhBE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD,CAAO;AAAA;AAAA;AAAA,MAEhB,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,CAAC,KAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmBlE,KAAK,YACL,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAExE,CACI,mBAAoB,CAChB,GAAI,CAAC,KAAK,WACN,OACJ,MAAMC,EAAY,KAAK,WAAW,cAAc,YAAY,EACtDC,EAAW,KAAK,WAAW,cAAc,YAAY,EACrDC,EAAkB,KAAK,WAAW,cAAc,oBAAoB,EACpEC,EAAc,KAAK,WAAW,cAAc,eAAe,EAC3DC,EAAS,KAAK,WAAW,cAAc,mBAAmB,EAChE,GAAI,CAACH,GAAY,CAACC,GAAmB,CAACC,GAAe,CAACC,EAClD,OAEJ,GAAI,KAAK,aAAa,UAAU,EAAG,CAC/B,MAAMC,EAAS,KAAK,WAAW,cAAc,SAAS,EAClDA,GACAA,EAAO,mBAAmB,YAAa,YAAY,KAAK,aAAa,UAAU,CAAC,IAAI,CAEpG,CAEa,KAAK,aAAa,YAAY,GAC/B,KAAK,aAAa,aAAc,eAAe,EAEnDH,EAAgB,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,CAAC,SAAS,EAC7GC,EAAY,mBAAmB,aAAc,oBAAoB,KAAK,aAAa,YAAY,CAAC,SAAS,EACzG,MAAMG,EAAe,KAAK,cAAc,iCAAiC,EACrEA,GACAA,EAAa,UAAU,IAAI,KAAM,qBAAqB,EAEtD,KAAK,aAAa,MAAM,GAAK,OAAO,WAAa,MACjDL,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,MAAM,GAE3C,KAAK,aAAa,QAAQ,GAC1BJ,EAAU,UAAU,IAAI,QAAQ,EAEhC,KAAK,aAAa,YAAY,GAC9BC,EAAS,UAAU,IAAI,YAAY,EAGvCG,EAAO,iBAAiB,QAAS,IAAM,CAC9BH,EAAS,UAAU,SAAS,MAAM,GAQnCA,EAAS,UAAU,OAAO,MAAM,EAChCG,EAAO,gBAAgB,eAAe,EACtC,WAAW,UAAY,CACnBF,EAAgB,UAAU,IAAI,QAAQ,CACzC,EAAE,GAAI,EAEPD,EAAS,UAAU,IAAI,SAAS,EAChC,WAAW,UAAY,CACnBA,EAAS,UAAU,OAAO,SAAS,CACtC,EAAE,GAAI,IAhBPC,EAAgB,UAAU,OAAO,QAAQ,EACzC,WAAW,UAAY,CACnBD,EAAS,UAAU,IAAI,MAAM,EAC7BG,EAAO,aAAa,gBAAiB,MAAM,CAC9C,EAAE,GAAG,EActB,CAAS,EAEDH,EAAS,iBAAiB,aAAc,IAAM,CACtC,OAAO,WAAa,MACfA,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAC7CD,EAAS,UAAU,IAAI,OAAO,EAE9C,CAAS,EACDA,EAAS,iBAAiB,YAAa,IAAM,CACrC,OAAO,WAAa,MACfA,EAAS,UAAU,SAAS,MAAM,GACnCC,EAAgB,UAAU,OAAO,QAAQ,EAE7D,CAAS,EACDD,EAAS,iBAAiB,aAAc,IAAM,CACtC,OAAO,WAAa,MACpBA,EAAS,UAAU,OAAO,OAAO,EAC5BA,EAAS,UAAU,SAAS,MAAM,GACnC,WAAW,UAAY,CACnBC,EAAgB,UAAU,IAAI,QAAQ,CACzC,EAAE,GAAI,EAE3B,CAAS,EACD,MAAMK,EAAuB,KAAK,iBAAiB,SAAS,EACtDC,EAA+B,KAAK,iBAAiB,4BAA4B,EACKA,GAA6B,QAASC,GAAe,CAC7IA,EAAW,iBAAiB,QAAS,IAAM,CACvC,GAAI,CAACA,GAAc,CAACA,EAAW,cAC3B,MAAO,GACPA,EAAW,cAAc,UAAU,SAAS,QAAQ,EACpDA,EAAW,cAAc,UAAU,OAAO,QAAQ,GAI0BF,GAAqB,QAASG,GAAgB,CACtHA,EAAY,UAAU,OAAO,QAAQ,CAC7D,CAAqB,EACDD,EAAW,cAAc,UAAU,IAAI,QAAQ,EAEnE,CAAa,CACb,CAAS,CACT,CACA"}

package/assets/js/components/content/content.component.js

@@ -0,0 +1,66 @@
+class iamContent extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
+        const loadCSS = `@import "${assetLocation}/css/components/content.component.css";`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="content__container">
+      <slot></slot>
+    </div>
+    `;
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+    connectedCallback() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const component = this;
+        const url = this.getAttribute('data-url');
+        const registerComponents = (contentComponent) => {
+            const components = ['card', 'marketing', 'notification'];
+            const assetLocation = document.body.hasAttribute('data-assets-location')
+                ? document.body.getAttribute('data-assets-location')
+                : '/assets';
+            // Load components - Each component will load once the first of its type has been loaded
+            components.forEach((component) => {
+                if (component == 'notification') {
+                    document.querySelectorAll('[data-notification]').forEach((element) => {
+                        element.outerHTML = element.outerHTML
+                            .replace(/<div/g, '<iam-notification')
+                            .replace(/<\/div>/g, '</iam-notification>');
+                    });
+                }
+                if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0)
+                    return;
+                import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)
+                    .then((module) => {
+                    if (!window.customElements.get(`iam-${component}`))
+                        window.customElements.define(`iam-${component}`, module.default);
+                })
+                    .catch((err) => {
+                    console.log(err.message);
+                });
+            });
+        };
+        if (url) {
+            const newXHRRequest = new XMLHttpRequest();
+            newXHRRequest.open('GET', url, true);
+            newXHRRequest.onload = function () {
+                if (this.status === 200) {
+                    const response = JSON.parse(this.responseText);
+                    component.innerHTML = `${response.content.rendered}`;
+                    registerComponents(component);
+                }
+            };
+            newXHRRequest.send();
+        }
+    }
+}
+export default iamContent;

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

@@ -0,0 +1,15 @@
+/*!
+  * iamKey v7.4.0
+  * Copyright 2022-2025 iamproperty
+  */class s extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const e=document.createElement("template");e.innerHTML=`
+    <style>
+    @layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}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: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 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:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !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:var(--btn-font-size) !important;line-height:var(--btn-line-height) !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"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem;border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.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) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@media screen and (prefers-color-scheme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.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-bg: transparent;--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:var(--colour)}.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}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}*,*::before,*::after{box-sizing:border-box}:host{display:contents}::slotted(iam-marketing:first-child:last-child){margin-bottom:0;min-height:100%;min-width:100%}/*# sourceMappingURL=assets/css/components/content.component.css.map */
+
+
+    ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
+    </style>
+    <div class="content__container">
+      <slot></slot>
+    </div>
+    `,this.shadowRoot.appendChild(e.content.cloneNode(!0))}connectedCallback(){const e=this,a=this.getAttribute("data-url"),i=n=>{const r=["card","marketing","notification"],c=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets";r.forEach(t=>{t=="notification"&&document.querySelectorAll("[data-notification]").forEach(o=>{o.outerHTML=o.outerHTML.replace(/<div/g,"<iam-notification").replace(/<\/div>/g,"</iam-notification>")}),n.getElementsByTagName(`iam-${t}`).length!==0&&import(`${c}/js/components/${t}/${t}.component.js`).then(o=>{window.customElements.get(`iam-${t}`)||window.customElements.define(`iam-${t}`,o.default)}).catch(o=>{console.log(o.message)})})};if(a){const n=new XMLHttpRequest;n.open("GET",a,!0),n.onload=function(){if(this.status===200){const r=JSON.parse(this.responseText);e.innerHTML=`${r.content.rendered}`,i(e)}},n.send()}}}export{s as default};
+//# sourceMappingURL=content.component.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.component.min.js","sources":["content.component.js"],"sourcesContent":["class iamContent extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/content.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"content__container\">\n      <slot></slot>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const component = this;\n        const url = this.getAttribute('data-url');\n        const registerComponents = (contentComponent) => {\n            const components = ['card', 'marketing', 'notification'];\n            const assetLocation = document.body.hasAttribute('data-assets-location')\n                ? document.body.getAttribute('data-assets-location')\n                : '/assets';\n            // Load components - Each component will load once the first of its type has been loaded\n            components.forEach((component) => {\n                if (component == 'notification') {\n                    document.querySelectorAll('[data-notification]').forEach((element) => {\n                        element.outerHTML = element.outerHTML\n                            .replace(/<div/g, '<iam-notification')\n                            .replace(/<\\/div>/g, '</iam-notification>');\n                    });\n                }\n                if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0)\n                    return;\n                import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)\n                    .then((module) => {\n                    if (!window.customElements.get(`iam-${component}`))\n                        window.customElements.define(`iam-${component}`, module.default);\n                })\n                    .catch((err) => {\n                    console.log(err.message);\n                });\n            });\n        };\n        if (url) {\n            const newXHRRequest = new XMLHttpRequest();\n            newXHRRequest.open('GET', url, true);\n            newXHRRequest.onload = function () {\n                if (this.status === 200) {\n                    const response = JSON.parse(this.responseText);\n                    component.innerHTML = `${response.content.rendered}`;\n                    registerComponents(component);\n                }\n            };\n            newXHRRequest.send();\n        }\n    }\n}\nexport default iamContent;\n"],"names":["iamContent","template","component","url","registerComponents","contentComponent","components","assetLocation","element","module","err","newXHRRequest","response"],"mappings":";;;IAAA,MAAMA,UAAmB,WAAY,CACjC,aAAc,CACV,MAAO,EACP,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA,MAIvB,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,CAAC,KAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,MAMtE,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CACpE,CACI,mBAAoB,CAEhB,MAAMC,EAAY,KACZC,EAAM,KAAK,aAAa,UAAU,EAClCC,EAAsBC,GAAqB,CAC7C,MAAMC,EAAa,CAAC,OAAQ,YAAa,cAAc,EACjDC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UAEND,EAAW,QAASJ,GAAc,CAC1BA,GAAa,gBACb,SAAS,iBAAiB,qBAAqB,EAAE,QAASM,GAAY,CAClEA,EAAQ,UAAYA,EAAQ,UACvB,QAAQ,QAAS,mBAAmB,EACpC,QAAQ,WAAY,qBAAqB,CACtE,CAAqB,EAEDH,EAAiB,qBAAqB,OAAOH,CAAS,EAAE,EAAE,SAAW,GAEzE,OAA0B,GAAGK,CAAa,kBAAkBL,CAAS,IAAIA,CAAS,iBAC7E,KAAMO,GAAW,CACb,OAAO,eAAe,IAAI,OAAOP,CAAS,EAAE,GAC7C,OAAO,eAAe,OAAO,OAAOA,CAAS,GAAIO,EAAO,OAAO,CACtE,CAAA,EACI,MAAOC,GAAQ,CAChB,QAAQ,IAAIA,EAAI,OAAO,CAC3C,CAAiB,CACjB,CAAa,CACJ,EACD,GAAIP,EAAK,CACL,MAAMQ,EAAgB,IAAI,eAC1BA,EAAc,KAAK,MAAOR,EAAK,EAAI,EACnCQ,EAAc,OAAS,UAAY,CAC/B,GAAI,KAAK,SAAW,IAAK,CACrB,MAAMC,EAAW,KAAK,MAAM,KAAK,YAAY,EAC7CV,EAAU,UAAY,GAAGU,EAAS,QAAQ,QAAQ,GAClDR,EAAmBF,CAAS,CAChD,CACa,EACDS,EAAc,KAAM,CAChC,CACA,CACA"}