@iamproperty/components 5.6.1-beta2 → 5.6.1-beta21

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

@@ -25,21 +25,7 @@ class iamCard extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="card ${classList}" tabindex="0" part="card">
-      ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
-      <div class="card__body">
-      ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
-      ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
-      ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
-        <slot></slot>
-      ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
-      </div>
-      ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
-      <slot name="checkbox"></slot>
-      <div class="card__footer">
-        <slot name="footer"></slot>
-        <slot name="btns"></slot>
-        ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
-      </div>
+      ${this.createCardConent()}
     </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -47,12 +33,37 @@ class iamCard extends HTMLElement {
         if (!document.getElementById('cardGlobal'))
             document.head.insertAdjacentHTML('beforeend', `<style id="cardGlobal">${loadExtraCSS}</style>`);
     }
+    createCardConent() {
+        return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
+    <div class="card__body" part="body">
+    ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
+    ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
+    ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
+      <slot></slot>
+    ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
+    </div>
+    ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
+    <slot name="checkbox"></slot>
+    <div class="card__footer" part="footer">
+      <slot name="footer"></slot>
+      <slot name="btns"></slot>
+      ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
+    </div>`;
+    }
     connectedCallback() {
         this.classList.add('loaded');
         // Mimic clicking the parent node so the focus and target events can be on the card
         const parentNode = this.parentNode.closest('a, button, label, router-link');
         const card = this.shadowRoot.querySelector('.card');
         const btnCompact = this.shadowRoot.querySelector('.btn-compact');
+        const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
+        /*
+          If the parentNode is actually just a div,
+          we don't want to look for anything or add events
+        */
+        if (!parentNode) {
+            return false;
+        }
         if (parentNode)
             parentNode.setAttribute('tabindex', '-1');
         if (parentNode.matches('label[for]')) {
@@ -131,7 +142,7 @@ class iamCard extends HTMLElement {
         }
     }
     static get observedAttributes() {
-        return ["data-total", "class"];
+        return ["data-total", "class", "data-image"];
     }
     attributeChangedCallback(attrName, oldVal, newVal) {
         switch (attrName) {
@@ -141,10 +152,19 @@ class iamCard extends HTMLElement {
                 break;
             }
             case "class": {
-                let classList = this.classList.toString();
-                if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
-                    classList += ' card--has-icon';
-                this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);
+                if (oldVal != newVal) {
+                    let classList = this.classList.toString();
+                    if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+                        classList += ' card--has-icon';
+                    this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);
+                    this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
+                }
+                break;
+            }
+            case "data-image": {
+                if (oldVal != newVal) {
+                    this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
+                }
                 break;
             }
         }

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

@@ -1,31 +1,31 @@
 /*!
-  * iamKey v5.6.1-beta2
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 iamproperty
-  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Card"});class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)')&&this.classList.add("card--has-icon");let e=this.classList.toString();const a=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",o=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${a}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
+  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Card"});class m extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)')&&this.classList.add("card--has-icon");let e=this.classList.toString();const r=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",o=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${r}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
     <style>
     @import "${o}";
-    .card{--card-icon-right: 1rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);min-height:100%;width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px}.card>*:not(.btn-compact){min-width:100%}.card.border-0{box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__body{position:relative;padding:var(--card-top-padding) var(--card-right-padding) 0 var(--card-left-padding);z-index:-1}.card__footer{margin-top:auto;padding:0 var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding)}.card:is(:hover,:focus) .link:after{width:50%}.card:has(.card__footer .link):before,.card:has(.card__footer .link):after{display:none}.card:before,.card:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}.card:after{background:var(--colour-primary-theme);mask-image:var(--icon, var(--icon-arrow));mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon, var(--icon-arrow));-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}.card:is(:hover,:focus,.hover){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px}.card:not([class*=colour-]):is(:hover,:focus,.hover,:active,.active):before{background:var(--hover-icon-bg, var(--colour-primary-theme))}.card:not([class*=colour-]):is(:hover,:focus,.hover,:active,.active):after{background:var(--hover-icon-colour, #ffffff)}.card:is(:active,.active){--card-icon-right: var(--card-icon-right-overide,0.5rem);outline:none}.card:is(:active){background:#fcfcfc}.card span{display:block;font-weight:bold;padding-top:1.5rem;font-size:1rem}.card:has(.card__illustration) .card__body{align-items:center;display:flex}.card:has(.card__illustration) .card__body .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card:has(.card__illustration) .card__body .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.card .card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card.card--has-icon:not(.card--secondary):not(.card--filter){display:flex;align-items:center}.card.card--has-icon:not(.card--secondary):not(.card--filter):before,.card.card--has-icon:not(.card--secondary):not(.card--filter):after{top:calc(50% - .75rem);bottom:auto}.card.card--has-icon:not(.card--secondary):not(.card--filter) .card__body{padding-left:4rem;margin-block:auto;padding-bottom:var(--card-bottom-padding)}.card.card--has-icon:not(.card--secondary):not(.card--filter) .card__footer{padding:0;display:none}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}.card__head .card__badges{position:absolute;top:1rem;text-align:left;left:1rem;z-index:9}.card__body .card__badges.card__badges--inline{margin-top:-1rem;min-height:1rem}.card__body .card__badges:not(.card__badges--inline){position:absolute;top:.5rem;text-align:left;right:.75rem;z-index:9}.card[class*=colour-],.card--filter{border-left:0.75rem solid var(--colour, var(--colour-primary))}.card--filter{--top-padding: 1.5rem;--right-padding: 1rem;--bottom-padding: 1.5rem;--left-padding: 1rem}.card--filter:has(.card__total) .card__body{align-items:center;display:flex}.card--filter:before,.card--filter:after{display:none}.card--filter:is(:hover,:focus,.hover){outline:none}.card--filter:is(:hover,:focus,.hover) :is(.card__body,.card__footer){background:#eee}.card--filter:is(:checked,.checked,:active,.active){outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--filter:is(:checked,.checked,:active,.active) .card__body{background:none}.card--filter:is(:checked,.checked,:active,.active) .card__footer{background:none}.card--filter.card--has-icon{--bottom-padding: 1rem;border:none}.card--filter .icon{font-size:1.125rem !important;height:1.125rem !important;margin:0 0 .5rem 0 !important;font-weight:400 !important;display:block !important}.card--filter .card__total{margin-top:0;order:-1}@media screen and (prefers-color-scheme: dark){.card--filter .card__body{background:none !important}.card--filter:is(:hover,:focus,.hover,:active,.active):not(:checked,.checked){outline:2px solid var(--colour, var(--colour-primary)) !important;outline-offset:-2px}}.card--filter ::slotted(i){display:block !important;font-size:1.125rem !important;margin:0 0 .5rem 0 !important}.card:has(.card__head) .card__head{padding-bottom:0;padding-top:var(--img-height, 27%);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card:has(.card__head) .card__head>img{position:absolute;top:0;left:0;width:102%;height:102%;object-fit:cover}.card.card--lg-image:has(.card__head) .card__head{padding-top:55%}:host([data-selected]) .card:before,:host([data-selected]) .card:after{display:none !important}:host(.card--flag){position:relative}:host(.card--flag):after{content:"\uF024";font-family:"Font Awesome 6 Pro";position:absolute;top:1rem;right:1rem;font-size:1rem;line-height:1;height:1rem;width:1rem;display:inline-block;font-weight:normal;color:var(--colour, var(--colour-primary))}.card--secondary{--card-top-padding: 1rem;--card-bottom-padding: 1.5rem}.card--secondary:before,.card--secondary:after{display:none}.card--secondary .btn-compact{position:absolute;top:0;right:0;margin:.5rem .5rem 0 0;z-index:99}.card--secondary.secondary-hover{outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--secondary.secondary-hover .btn-compact{background-color:var(--colour);color:var(--colour-primary-theme);border-color:rgba(0,0,0,0) !important}.card--secondary:has(.btn-compact:is(:hover,:focus,:active)) .btn-compact{pointer-events:all}.card--secondary ::slotted(i){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card--record{--img-height: 40%}.card--record:before,.card--record:after{display:none}slot[name=btns]{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;margin-right:calc(var(--card-right-padding)*-1);margin-bottom:calc(var(--card-bottom-padding)*-1);padding-right:1rem;padding-bottom:1rem;pointer-events:none}::slotted([slot=btns]){pointer-events:all;margin:0 !important}/*# sourceMappingURL=assets/css/components/card.css.map */
+    .card{--card-icon-right: 1rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);min-height:100%;width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px}.card>*:not(.btn-compact){min-width:100%}.card.border-0{box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__body{position:relative;padding:var(--card-top-padding) var(--card-right-padding) 0 var(--card-left-padding);z-index:-1}.card__footer{margin-top:auto;padding:0 var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding)}.card:is(:hover,:focus) .link:after{width:50%}.card:has(.card__footer .link):before,.card:has(.card__footer .link):after{display:none}.card:before,.card:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}.card:after{background:var(--colour-primary-theme);mask-image:var(--icon, var(--icon-arrow));mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon, var(--icon-arrow));-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}.card:is(:hover,:focus,.hover){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px}.card:not([class*=colour-]):is(:hover,:focus,.hover,:active,.active):before{background:var(--hover-icon-bg, var(--colour-primary-theme))}.card:not([class*=colour-]):is(:hover,:focus,.hover,:active,.active):after{background:var(--hover-icon-colour, #ffffff)}.card:is(:active,.active){--card-icon-right: var(--card-icon-right-overide,0.5rem);outline:none}.card:is(:active){background:#fcfcfc}.card span{display:block;font-weight:bold;padding-top:1.5rem;font-size:1rem}.card:has(.card__illustration) .card__body{align-items:center;display:flex}.card:has(.card__illustration) .card__body .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card:has(.card__illustration) .card__body .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.card .card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card.card--has-icon:not(.card--secondary):not(.card--filter){display:flex;align-items:center}.card.card--has-icon:not(.card--secondary):not(.card--filter):before,.card.card--has-icon:not(.card--secondary):not(.card--filter):after{top:calc(50% - .75rem);bottom:auto}.card.card--has-icon:not(.card--secondary):not(.card--filter) .card__body{padding-left:4rem;margin-block:auto;padding-bottom:var(--card-bottom-padding)}.card.card--has-icon:not(.card--secondary):not(.card--filter) .card__footer{padding:0;display:none}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}.card__head .card__badges{position:absolute;top:1rem;text-align:left;left:1rem;z-index:9}.card__body .card__badges.card__badges--inline{margin-top:-1rem;min-height:1rem}.card__body .card__badges:not(.card__badges--inline){position:absolute;top:.5rem;text-align:left;right:.75rem;z-index:9}.card[class*=colour-],.card--filter{border-left:0.75rem solid var(--colour, var(--colour-primary))}.card--filter{--top-padding: 1.5rem;--right-padding: 1rem;--bottom-padding: 1.5rem;--left-padding: 1rem}.card--filter:has(.card__total) .card__body{align-items:center;display:flex}.card--filter:before,.card--filter:after{display:none}.card--filter:is(:hover,:focus,.hover){outline:none}.card--filter:is(:hover,:focus,.hover) :is(.card__body,.card__footer){background:#eee}.card--filter:is(:checked,.checked,:active,.active){outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--filter:is(:checked,.checked,:active,.active) .card__body{background:none}.card--filter:is(:checked,.checked,:active,.active) .card__footer{background:none}.card--filter.card--has-icon{--bottom-padding: 1rem;border:none}.card--filter .icon{font-size:1.125rem !important;height:1.125rem !important;margin:0 0 .5rem 0 !important;font-weight:400 !important;display:block !important}.card--filter .card__total{margin-top:0;order:-1}@media screen and (prefers-color-scheme: dark){.card--filter .card__body{background:none !important}.card--filter:is(:hover,:focus,.hover,:active,.active):not(:checked,.checked){outline:2px solid var(--colour, var(--colour-primary)) !important;outline-offset:-2px}}.card--filter ::slotted(i){display:block !important;font-size:1.125rem !important;margin:0 0 .5rem 0 !important}.card:has(.card__head) .card__head{padding-bottom:0;padding-top:var(--img-height, 27%);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card:has(.card__head) .card__head>img{position:absolute;top:0;left:0;width:102%;height:102%;object-fit:cover}.card.card--lg-image:has(.card__head) .card__head{padding-top:55%}:host([data-selected]) .card:before,:host([data-selected]) .card:after{display:none !important}:host(.card--flag){position:relative}:host(.card--flag):after{content:"\uF024";font-family:"Font Awesome 6 Pro";position:absolute;top:1rem;right:1rem;font-size:1rem;line-height:1;height:1rem;width:1rem;display:inline-block;font-weight:normal;color:var(--colour, var(--colour-primary))}.card--secondary{--card-top-padding: 1rem;--card-bottom-padding: 1.5rem}.card--secondary:before,.card--secondary:after{display:none}.card--secondary .btn-compact{position:absolute;top:0;right:0;margin:.5rem .5rem 0 0;z-index:99}.card--secondary.secondary-hover{outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--secondary.secondary-hover .btn-compact{background-color:var(--colour);color:var(--colour-primary-theme);border-color:rgba(0,0,0,0) !important}.card--secondary:has(.btn-compact:is(:hover,:focus,:active)) .btn-compact{pointer-events:all}.card--secondary ::slotted(i){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card--record:has(.card__head){--img-height: 40%}.card--record:has(.card__head):before,.card--record:has(.card__head):after{display:none}.card--record:has(.card__head) .card__head{background:rgba(0,0,0,0);position:relative}:host([data-record=business]){--record-icon: "\uF54F";--record-colour: var(--wider-colour-2)}:host([data-record=page]){--record-icon: "\uF15C";--record-colour: var(--wider-colour-3)}:host([data-record=contact]){--record-icon: "\uF2B9";--record-colour: var(--wider-colour-4)}:host([data-record=lettings]){--record-icon: "\uE003";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-5)}:host([data-record=sales]){--record-icon: "\uE004";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-7)}:host([data-record=landlord]){--record-icon: "\uE001";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-8)}:host([data-record=contractor]){--record-icon: "\uF82C";--record-colour: var(--wider-colour-9)}:host([data-record=vendor]){--record-icon: "\uE002";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-13)}:host([data-record=tenant]){--record-icon: "\uE1B0";--record-colour: var(--wider-colour-6)}:host([data-record=sales-applicant]){--record-icon: "\uE006";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-10)}:host([data-record]) .card--record:has(.card__head) .card__head{background:rgba(0,0,0,0);position:relative}:host([data-record]) .card--record:has(.card__head) .card__head:before{font-family:var(--record-icon-font, "Font Awesome 6 Pro");font-weight:normal;font-size:1.5rem;content:var(--record-icon);display:block;position:absolute;top:auto;left:50%;bottom:0;background-color:var(--record-colour);border-radius:50%;height:4rem;line-height:4rem;width:4rem;text-align:center;transform:translate(-50%, 0)}slot[name=btns]{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;margin-right:calc(var(--card-right-padding)*-1);margin-bottom:calc(var(--card-bottom-padding)*-1);padding-right:1rem;padding-bottom:1rem;pointer-events:none}::slotted([slot=btns]){pointer-events:all;margin:0 !important}/*# sourceMappingURL=assets/css/components/card.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="card ${e}" tabindex="0" part="card">
-      ${this.hasAttribute("data-image")?`<div class="card__head"><img src="${this.getAttribute("data-image")}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>`:""}
-      <div class="card__body">
-      ${!this.hasAttribute("data-image")&&this.querySelector('[slot="badges"]')&&this.querySelector('[slot="checkbox"]')?'<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>':""}
-      ${!this.hasAttribute("data-image")&&this.querySelector('[slot="badges"]')?'<div class="card__badges"><slot name="badges"></slot></div>':""}
-      ${this.hasAttribute("data-illustration")?`<div class="card__illustration"><img src="${this.getAttribute("data-illustration")}" alt="" loading="lazy" /></div>`:""}
-        <slot></slot>
-      ${this.hasAttribute("data-total")?`<div class="card__total">${this.getAttribute("data-total")}</div>`:""}
-      </div>
-      ${this.hasAttribute("data-add-link")?'<button class="btn btn-compact btn-secondary fa-plus">Add property</button>':""}
-      <slot name="checkbox"></slot>
-      <div class="card__footer">
-        <slot name="footer"></slot>
-        <slot name="btns"></slot>
-        ${this.hasAttribute("data-cta")?`<span class="link d-inline-block pt-0 mb-0">${this.getAttribute("data-cta")}</span>`:""}
-      </div>
+      ${this.createCardConent()}
     </div>
     `,this.shadowRoot.appendChild(t.content.cloneNode(!0)),document.getElementById("cardGlobal")||document.head.insertAdjacentHTML("beforeend",`<style id="cardGlobal">@supports not selector(:has(*)){iam-card{margin-bottom:2rem;display:block}}iam-card>div:has([type=checkbox]){display:contents}iam-card>div:has([type=checkbox])>input:is([type=radio],[type=checkbox])+label{position:absolute !important;top:.5rem;right:.5rem;width:2rem;padding-left:2rem;margin:0.25rem 0.5rem !important;height:2.5rem;overflow:hidden}iam-card:has([type=checkbox]:checked){--hover-outline-colour: var(--colour-info);--outline-colour: var(--colour-info)}iam-card:has([type=checkbox]+label:hover){--hover-outline-colour: transparent;--hover-icon-bg: var(--colour-warning);--hover-icon-colour: var(--colour-primary-theme);--card-icon-right-overide:1rem}iam-card:has([type=checkbox]:active){--hover-outline-colour: transparent;--hover-icon-bg: var(--colour-warning);--hover-icon-colour: var(--colour-primary-theme);--card-icon-right-overide:1rem}iam-card.card--has-icon:not(.card--filter):not(.card--secondary) i{position:absolute;top:calc(50% - .5rem - 2px);left:1rem}iam-card .badge i{position:static !important;margin-right:.25rem}[data-select-container]:has([type=checkbox]:checked) iam-card>div:has([type=checkbox])>input:is([type=radio],[type=checkbox]){width:100%;height:100%;max-height:100%;max-width:100%;cursor:pointer;pointer-events:all;inset:0;border-radius:0;z-index:10}a[target=_blank] iam-card::part(card){--icon: var(--icon-new-tab)}/*# sourceMappingURL=assets/css/components/card.global.css.map */
-</style>`)}connectedCallback(){this.classList.add("loaded");const e=this.parentNode.closest("a, button, label, router-link"),a=this.shadowRoot.querySelector(".card"),o=this.shadowRoot.querySelector(".btn-compact");if(e&&e.setAttribute("tabindex","-1"),e.matches("label[for]")&&(document.getElementById(e.getAttribute("for")).checked?a.classList.add("checked"):a.classList.remove("checked")),this.addEventListener("click",t=>{let r=new Event("click");a.dispatchEvent(r)}),a.addEventListener("click",t=>{if(e.matches("label[for]")){t.stopPropagation(),t.preventDefault();const r=document.getElementById(e.getAttribute("for")),i=r.getAttribute("name"),c=r.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"][type="radio"]:not([id="${c}"])`)).forEach((d,l)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),r.checked?a.classList.add("checked"):a.classList.remove("checked")}}),this.addEventListener("inactive",t=>{a.classList.remove("checked")}),a.addEventListener("keydown",t=>{switch(t.keyCode){case 32:case 13:if(e.matches("label[for]")){t.stopPropagation(),t.preventDefault();const r=document.getElementById(e.getAttribute("for")),i=r.getAttribute("name"),c=r.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"]:not([id="${c}"])`)).forEach((d,l)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),r.checked?a.classList.add("checked"):a.classList.remove("checked")}else e.click();break}}),o){let t=this.getAttribute("data-add-link");o.addEventListener("click",r=>{r.stopPropagation(),r.preventDefault(),window.location=t})}}static get observedAttributes(){return["data-total","class"]}attributeChangedCallback(e,a,o){switch(e){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=o);break}case"class":{let t=this.classList.toString();this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)')&&(t+=" card--has-icon"),this.shadowRoot.querySelector(".card").setAttribute("class",`card ${t}`);break}}}}export{h as default};
+</style>`)}createCardConent(){return`${this.hasAttribute("data-image")||this.hasAttribute("data-record")?`<div class="card__head">${this.hasAttribute("data-image")?`<img src="${this.getAttribute("data-image")}" alt="" loading="lazy" />`:""} <div class="card__badges"><slot name="badges"></slot></div></div>`:""}
+    <div class="card__body" part="body">
+    ${!this.hasAttribute("data-image")&&this.querySelector('[slot="badges"]')&&this.querySelector('[slot="checkbox"]')?'<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>':""}
+    ${!this.hasAttribute("data-image")&&!this.hasAttribute("data-record")&&this.querySelector('[slot="badges"]')?'<div class="card__badges"><slot name="badges"></slot></div>':""}
+    ${this.hasAttribute("data-illustration")?`<div class="card__illustration"><img src="${this.getAttribute("data-illustration")}" alt="" loading="lazy" /></div>`:""}
+      <slot></slot>
+    ${this.hasAttribute("data-total")?`<div class="card__total">${this.getAttribute("data-total")}</div>`:""}
+    </div>
+    ${this.hasAttribute("data-add-link")?'<button class="btn btn-compact btn-secondary fa-plus">Add property</button>':""}
+    <slot name="checkbox"></slot>
+    <div class="card__footer" part="footer">
+      <slot name="footer"></slot>
+      <slot name="btns"></slot>
+      ${this.hasAttribute("data-cta")?`<span class="link d-inline-block pt-0 mb-0">${this.getAttribute("data-cta")}</span>`:""}
+    </div>`}connectedCallback(){this.classList.add("loaded");const e=this.parentNode.closest("a, button, label, router-link"),r=this.shadowRoot.querySelector(".card"),o=this.shadowRoot.querySelector(".btn-compact");if(this.hasAttribute("data-record")&&this.getAttribute("data-record"),!e)return!1;if(e&&e.setAttribute("tabindex","-1"),e.matches("label[for]")&&(document.getElementById(e.getAttribute("for")).checked?r.classList.add("checked"):r.classList.remove("checked")),this.addEventListener("click",t=>{let a=new Event("click");r.dispatchEvent(a)}),r.addEventListener("click",t=>{if(e.matches("label[for]")){t.stopPropagation(),t.preventDefault();const a=document.getElementById(e.getAttribute("for")),i=a.getAttribute("name"),c=a.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"][type="radio"]:not([id="${c}"])`)).forEach((d,l)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),a.checked?r.classList.add("checked"):r.classList.remove("checked")}}),this.addEventListener("inactive",t=>{r.classList.remove("checked")}),r.addEventListener("keydown",t=>{switch(t.keyCode){case 32:case 13:if(e.matches("label[for]")){t.stopPropagation(),t.preventDefault();const a=document.getElementById(e.getAttribute("for")),i=a.getAttribute("name"),c=a.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"]:not([id="${c}"])`)).forEach((d,l)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),a.checked?r.classList.add("checked"):r.classList.remove("checked")}else e.click();break}}),o){let t=this.getAttribute("data-add-link");o.addEventListener("click",a=>{a.stopPropagation(),a.preventDefault(),window.location=t})}}static get observedAttributes(){return["data-total","class","data-image"]}attributeChangedCallback(e,r,o){switch(e){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=o);break}case"class":{if(r!=o){let t=this.classList.toString();this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)')&&(t+=" card--has-icon"),this.shadowRoot.querySelector(".card").setAttribute("class",`card ${t}`),this.shadowRoot.querySelector(".card").innerHTML=this.createCardConent()}break}case"data-image":{r!=o&&(this.shadowRoot.querySelector(".card").innerHTML=this.createCardConent());break}}}}export{m as default};
 //# sourceMappingURL=card.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.component.min.js","sources":["card.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"Card\"\n});\nclass iamCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*=\"fa-\"]:not(.btn)'))\n            this.classList.add('card--has-icon');\n        let classList = this.classList.toString();\n        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/card.css\";`;\n        const loadExtraCSS = `@import \"${assetLocation}/css/components/card.global.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n    <div class=\"card ${classList}\" tabindex=\"0\" part=\"card\">\n      ${this.hasAttribute('data-image') ? `<div class=\"card__head\"><img src=\"${this.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" /><div class=\"card__badges\"><slot name=\"badges\"></slot></div></div>` : ''}\n      <div class=\"card__body\">\n      ${!this.hasAttribute('data-image') && this.querySelector('[slot=\"badges\"]') && this.querySelector('[slot=\"checkbox\"]') ? `<div class=\"card__badges card__badges--inline\"><slot name=\"badges\"></slot></div>` : ''}\n      ${!this.hasAttribute('data-image') && this.querySelector('[slot=\"badges\"]') ? `<div class=\"card__badges\"><slot name=\"badges\"></slot></div>` : ''}\n      ${this.hasAttribute('data-illustration') ? `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>` : ''}\n        <slot></slot>\n      ${this.hasAttribute('data-total') ? `<div class=\"card__total\">${this.getAttribute('data-total')}</div>` : ''}\n      </div>\n      ${this.hasAttribute('data-add-link') ? `<button class=\"btn btn-compact btn-secondary fa-plus\">Add property</button>` : ''}\n      <slot name=\"checkbox\"></slot>\n      <div class=\"card__footer\">\n        <slot name=\"footer\"></slot>\n        <slot name=\"btns\"></slot>\n        ${this.hasAttribute('data-cta') ? `<span class=\"link d-inline-block pt-0 mb-0\">${this.getAttribute('data-cta')}</span>` : ''}\n      </div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n        // insert extra CSS\n        if (!document.getElementById('cardGlobal'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"cardGlobal\">${loadExtraCSS}</style>`);\n    }\n    connectedCallback() {\n        this.classList.add('loaded');\n        // Mimic clicking the parent node so the focus and target events can be on the card\n        const parentNode = this.parentNode.closest('a, button, label, router-link');\n        const card = this.shadowRoot.querySelector('.card');\n        const btnCompact = this.shadowRoot.querySelector('.btn-compact');\n        if (parentNode)\n            parentNode.setAttribute('tabindex', '-1');\n        if (parentNode.matches('label[for]')) {\n            let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;\n            if (isChecked)\n                card.classList.add('checked');\n            else\n                card.classList.remove('checked');\n        }\n        // Click event down\n        this.addEventListener('click', (event) => {\n            let clickEvent = new Event('click');\n            card.dispatchEvent(clickEvent);\n        });\n        card.addEventListener('click', (event) => {\n            if (parentNode.matches('label[for]')) {\n                event.stopPropagation();\n                event.preventDefault();\n                const input = document.getElementById(parentNode.getAttribute('for'));\n                const inputName = input.getAttribute('name');\n                const inputID = input.getAttribute('id');\n                // Mimic radio button functionality\n                const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"][type=\"radio\"]:not([id=\"${inputID}\"])`));\n                inputs.forEach((input, index) => {\n                    const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n                    otherCard.dispatchEvent(new Event('inactive'));\n                });\n                parentNode.click();\n                let isChecked = input.checked;\n                if (isChecked)\n                    card.classList.add('checked');\n                else\n                    card.classList.remove('checked');\n            }\n        });\n        this.addEventListener('inactive', (event) => {\n            card.classList.remove('checked');\n        });\n        card.addEventListener('keydown', (event) => {\n            switch (event.keyCode) {\n                case 32:\n                case 13:\n                    if (parentNode.matches('label[for]')) {\n                        event.stopPropagation();\n                        event.preventDefault();\n                        const input = document.getElementById(parentNode.getAttribute('for'));\n                        const inputName = input.getAttribute('name');\n                        const inputID = input.getAttribute('id');\n                        const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"]:not([id=\"${inputID}\"])`));\n                        inputs.forEach((input, index) => {\n                            const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n                            otherCard.dispatchEvent(new Event('inactive'));\n                        });\n                        parentNode.click();\n                        let isChecked = input.checked;\n                        if (isChecked)\n                            card.classList.add('checked');\n                        else\n                            card.classList.remove('checked');\n                    }\n                    else {\n                        parentNode.click();\n                    }\n                    break;\n                default:\n                    break;\n            }\n        });\n        if (btnCompact) {\n            let addLocation = this.getAttribute('data-add-link');\n            btnCompact.addEventListener('click', (event) => {\n                event.stopPropagation();\n                event.preventDefault();\n                window.location = addLocation;\n            });\n        }\n    }\n    static get observedAttributes() {\n        return [\"data-total\", \"class\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-total\": {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n            case \"class\": {\n                let classList = this.classList.toString();\n                if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*=\"fa-\"]:not(.btn)'))\n                    classList += ' card--has-icon';\n                this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);\n                break;\n            }\n        }\n    }\n}\nexport default iamCard;\n"],"names":["iamCard","classList","assetLocation","coreCSS","template","parentNode","card","btnCompact","event","clickEvent","input","inputName","inputID","index","addLocation","attrName","oldVal","newVal"],"mappings":"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"}
+{"version":3,"file":"card.component.min.js","sources":["card.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"Card\"\n});\nclass iamCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*=\"fa-\"]:not(.btn)'))\n            this.classList.add('card--has-icon');\n        let classList = this.classList.toString();\n        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/card.css\";`;\n        const loadExtraCSS = `@import \"${assetLocation}/css/components/card.global.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n    <div class=\"card ${classList}\" tabindex=\"0\" part=\"card\">\n      ${this.createCardConent()}\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n        // insert extra CSS\n        if (!document.getElementById('cardGlobal'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"cardGlobal\">${loadExtraCSS}</style>`);\n    }\n    createCardConent() {\n        return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class=\"card__head\">${this.hasAttribute('data-image') ? `<img src=\"${this.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" />` : ``} <div class=\"card__badges\"><slot name=\"badges\"></slot></div></div>` : ''}\n    <div class=\"card__body\" part=\"body\">\n    ${!this.hasAttribute('data-image') && this.querySelector('[slot=\"badges\"]') && this.querySelector('[slot=\"checkbox\"]') ? `<div class=\"card__badges card__badges--inline\"><slot name=\"badges\"></slot></div>` : ''}\n    ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot=\"badges\"]') ? `<div class=\"card__badges\"><slot name=\"badges\"></slot></div>` : ''}\n    ${this.hasAttribute('data-illustration') ? `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>` : ''}\n      <slot></slot>\n    ${this.hasAttribute('data-total') ? `<div class=\"card__total\">${this.getAttribute('data-total')}</div>` : ''}\n    </div>\n    ${this.hasAttribute('data-add-link') ? `<button class=\"btn btn-compact btn-secondary fa-plus\">Add property</button>` : ''}\n    <slot name=\"checkbox\"></slot>\n    <div class=\"card__footer\" part=\"footer\">\n      <slot name=\"footer\"></slot>\n      <slot name=\"btns\"></slot>\n      ${this.hasAttribute('data-cta') ? `<span class=\"link d-inline-block pt-0 mb-0\">${this.getAttribute('data-cta')}</span>` : ''}\n    </div>`;\n    }\n    connectedCallback() {\n        this.classList.add('loaded');\n        // Mimic clicking the parent node so the focus and target events can be on the card\n        const parentNode = this.parentNode.closest('a, button, label, router-link');\n        const card = this.shadowRoot.querySelector('.card');\n        const btnCompact = this.shadowRoot.querySelector('.btn-compact');\n        const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';\n        /*\n          If the parentNode is actually just a div,\n          we don't want to look for anything or add events\n        */\n        if (!parentNode) {\n            return false;\n        }\n        if (parentNode)\n            parentNode.setAttribute('tabindex', '-1');\n        if (parentNode.matches('label[for]')) {\n            let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;\n            if (isChecked)\n                card.classList.add('checked');\n            else\n                card.classList.remove('checked');\n        }\n        // Click event down\n        this.addEventListener('click', (event) => {\n            let clickEvent = new Event('click');\n            card.dispatchEvent(clickEvent);\n        });\n        card.addEventListener('click', (event) => {\n            if (parentNode.matches('label[for]')) {\n                event.stopPropagation();\n                event.preventDefault();\n                const input = document.getElementById(parentNode.getAttribute('for'));\n                const inputName = input.getAttribute('name');\n                const inputID = input.getAttribute('id');\n                // Mimic radio button functionality\n                const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"][type=\"radio\"]:not([id=\"${inputID}\"])`));\n                inputs.forEach((input, index) => {\n                    const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n                    otherCard.dispatchEvent(new Event('inactive'));\n                });\n                parentNode.click();\n                let isChecked = input.checked;\n                if (isChecked)\n                    card.classList.add('checked');\n                else\n                    card.classList.remove('checked');\n            }\n        });\n        this.addEventListener('inactive', (event) => {\n            card.classList.remove('checked');\n        });\n        card.addEventListener('keydown', (event) => {\n            switch (event.keyCode) {\n                case 32:\n                case 13:\n                    if (parentNode.matches('label[for]')) {\n                        event.stopPropagation();\n                        event.preventDefault();\n                        const input = document.getElementById(parentNode.getAttribute('for'));\n                        const inputName = input.getAttribute('name');\n                        const inputID = input.getAttribute('id');\n                        const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"]:not([id=\"${inputID}\"])`));\n                        inputs.forEach((input, index) => {\n                            const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n                            otherCard.dispatchEvent(new Event('inactive'));\n                        });\n                        parentNode.click();\n                        let isChecked = input.checked;\n                        if (isChecked)\n                            card.classList.add('checked');\n                        else\n                            card.classList.remove('checked');\n                    }\n                    else {\n                        parentNode.click();\n                    }\n                    break;\n                default:\n                    break;\n            }\n        });\n        if (btnCompact) {\n            let addLocation = this.getAttribute('data-add-link');\n            btnCompact.addEventListener('click', (event) => {\n                event.stopPropagation();\n                event.preventDefault();\n                window.location = addLocation;\n            });\n        }\n    }\n    static get observedAttributes() {\n        return [\"data-total\", \"class\", \"data-image\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-total\": {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n            case \"class\": {\n                if (oldVal != newVal) {\n                    let classList = this.classList.toString();\n                    if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*=\"fa-\"]:not(.btn)'))\n                        classList += ' card--has-icon';\n                    this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);\n                    this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();\n                }\n                break;\n            }\n            case \"data-image\": {\n                if (oldVal != newVal) {\n                    this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamCard;\n"],"names":["iamCard","classList","assetLocation","coreCSS","template","parentNode","card","btnCompact","event","clickEvent","input","inputName","inputID","index","addLocation","attrName","oldVal","newVal"],"mappings":"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"}

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

@@ -27,12 +27,12 @@ class iamCarousel extends HTMLElement {
           <slot></slot>
         </div>
  
-        <div class="carousel__controls">
+        <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-        <button class="btn btn-next" data-go="2">Next</button>
+        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
+        <button class="btn btn-next" data-go="2" part="next">Next</button>
 
       </div>
     </div>
@@ -42,6 +42,7 @@ class iamCarousel extends HTMLElement {
     connectedCallback() {
         const carouselElement = this.shadowRoot.querySelector('.carousel');
         const row = this.querySelector('.row');
+        const thumbnailImages = JSON.parse(this.dataset.thumbnails);
         const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
         let itemCount = this.querySelectorAll(':scope > .row > .col').length;
         carouselElement.setAttribute('data-row-class', row.className);
@@ -49,10 +50,22 @@ class iamCarousel extends HTMLElement {
             carouselElement.classList.add('hide-btns');
         if (this.classList.contains('hide-controls'))
             carouselElement.classList.add('hide-controls');
+        if (thumbnailImages === null || thumbnailImages === void 0 ? void 0 : thumbnailImages.length) {
+            carouselControls.classList.add('thumbnails');
+        }
         // populate the pips
         let pips = "";
         for (let i = 1; i <= itemCount; i++) {
-            pips += `<button class="control-${i}" data-slide="${i}" ${i == 1 ? "aria-current" : ""}>Slide ${i}</button>`;
+            let pipContent = null;
+            let pipClass = '';
+            if (thumbnailImages.length) {
+                pipClass = 'has-thumbnail';
+                pipContent = `<img src="${thumbnailImages[i - 1].src}" alt="Slide ${i}" height="148"/>`;
+            }
+            else {
+                pipContent = `Slide ${i}`;
+            }
+            pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current" : ""}>${pipContent}</button>`;
         }
         carouselControls.innerHTML = pips;
         carousel(carouselElement, row);

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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v5.6.1-beta2
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 iamproperty
-  */function b(l,r){var n;let s=l.querySelector(".carousel__inner"),i=l.querySelector(".carousel__controls"),e=r.querySelectorAll(".col").length;s.addEventListener("scroll",function(o){clearTimeout(n),n=setTimeout(function(){let t=s.clientWidth,c=s.scrollWidth,d=s.scrollLeft,a=Math.round(d/c*e)+1,h=r.querySelector(".col:last-child").offsetLeft+50;s.scrollLeft+t>=h&&(a=e),Array.from(l.querySelectorAll(".carousel__controls button")).forEach((u,f)=>{u.removeAttribute("aria-current")}),l.querySelector(".control-"+a).setAttribute("aria-current",!0),a==1?l.querySelector(".btn-prev").setAttribute("disabled","disabled"):l.querySelector(".btn-prev").removeAttribute("disabled"),a==e?l.querySelector(".btn-next").setAttribute("disabled","disabled"):l.querySelector(".btn-next").removeAttribute("disabled")},100)},!1),i.addEventListener("click",function(o){for(var t=o.target;t&&t!=this;t=t.parentNode)if(typeof t.matches=="function"&&t.matches("button")){o.preventDefault(),Array.from(i.querySelectorAll("button")).forEach((d,a)=>{d.removeAttribute("aria-current")}),t.setAttribute("aria-current",!0);const c=r.querySelector(`*:nth-child(${t.getAttribute("data-slide")})`);s.scroll({top:0,left:c.offsetLeft,behavior:"smooth"});break}},!1),l.addEventListener("click",function(o){for(var t=o.target;t&&t!=this;t=t.parentNode)if(typeof t.matches=="function"&&t.matches(".btn-next, .btn-prev")){o.preventDefault();let c=t.classList.contains("btn-prev")?s.scrollLeft-s.clientWidth:s.scrollLeft+s.clientWidth;s.scroll({top:0,left:c,behavior:"smooth"});break}},!1)}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"carousel"});class m extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const r=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",n=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${r}/css/core.min.css`,s=document.createElement("template");s.innerHTML=`
+  */function p(l,o){var i;let t=l.querySelector(".carousel__inner"),u=l.querySelector(".carousel__controls"),n=o.querySelectorAll(":scope > .col").length;t.addEventListener("scroll",function(a){clearTimeout(i),i=setTimeout(function(){let s=t.clientWidth,e=t.scrollWidth,r=t.scrollLeft,d=Math.round(r/e*n)+1,m=o.querySelector(":scope > .col").scrollWidth,b=o.querySelector(":scope > .col:last-child").offsetLeft,f=t.scrollLeft+s+t.getBoundingClientRect().left>=b+60,h=Math.round(s/m);Math.ceil(n/h)*h-n>0&&f&&(d=Math.floor(n/h)*h+1),Array.from(l.querySelectorAll(".carousel__controls button")).forEach((_,w)=>{_.removeAttribute("aria-current")}),l.querySelector(".control-"+d).setAttribute("aria-current",!0),d==1?l.querySelector(".btn-prev").setAttribute("disabled","disabled"):l.querySelector(".btn-prev").removeAttribute("disabled"),d>n-h?l.querySelector(".btn-next").setAttribute("disabled","disabled"):l.querySelector(".btn-next").removeAttribute("disabled")},100)},!1),u.addEventListener("click",function(a){for(var s=a.target;s&&s!=this;s=s.parentNode)if(typeof s.matches=="function"&&s.matches("button")){a.preventDefault(),Array.from(u.querySelectorAll("button")).forEach((r,d)=>{r.removeAttribute("aria-current")}),s.setAttribute("aria-current",!0);const e=o.querySelector(`:scope > *:nth-child(${s.getAttribute("data-slide")})`);t.scroll({top:0,left:e.offsetLeft-t.getBoundingClientRect().left,behavior:"smooth"});break}},!1),l.addEventListener("click",function(a){let s=t.clientWidth;t.scrollWidth;let e=o.querySelector(":scope > .col").scrollWidth,r=Math.round(s/e),d=o.querySelector(":scope > .col:last-child").offsetLeft,m=t.scrollLeft+s+t.getBoundingClientRect().left>=d+60,b=Math.ceil(n/r)*r-n,f=r-b,h=m&&b>0?f*e:t.clientWidth;for(var c=a.target;c&&c!=this;c=c.parentNode)if(typeof c.matches=="function"&&c.matches(".btn-next, .btn-prev")){a.preventDefault();let _=c.classList.contains("btn-prev")?t.scrollLeft-h:t.scrollLeft+t.clientWidth;t.scroll({top:0,left:_,behavior:"smooth"});break}},!1)}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"carousel"});class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",i=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
     <style>
-    @import "${n}";
-    .carousel .carousel__wrapper{position:relative}.carousel .carousel__inner{--gutter-x: 1rem;overflow:auto;scroll-snap-type:x mandatory}.carousel .col>*:last-child{margin-bottom:0;padding-bottom:0}.carousel__inner{scrollbar-width:none;-ms-overflow-style:none}.carousel__inner::-webkit-scrollbar{display:none}.btn-next,.btn-prev{--marker-bg: var(--colour-secondary);text-indent:100%;white-space:nowrap;overflow:hidden;background:var(--marker-bg);border-radius:100%;width:2.25rem;max-width:2.25rem;height:2.25rem;text-indent:-300rem;overflow:hidden;border:none;position:relative;margin:0 0.5rem;padding:0;position:absolute;top:50%;left:0rem;transform:translate(0, -50%)}.btn-next:disabled,.btn-prev:disabled{opacity:.8;pointer-events:none}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0deg)}.btn-next:hover,.btn-next:focus,.btn-prev:hover,.btn-prev:focus{background:var(--colour-warning);color:var(--colour-hover);border-radius:100%}.btn-next:active,.btn-prev:active{border-radius:100%}.btn-next{left:auto;right:0}@media screen and (min-width: 62em){.btn-next{margin-right:-3rem}}@media screen and (min-width: 62em){.btn-prev{margin-left:-3rem}}.btn-prev:after{transform:rotate(180deg)}.carousel .carousel__controls{text-align:center;width:10rem;max-height:1rem;overflow:hidden;margin-inline:auto}@media screen and (min-width: 36em){.carousel .carousel__controls{width:100%}}.carousel .carousel__controls button{width:1rem;height:1rem;min-height:1rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:var(--colour-primary-theme);padding:0;margin:0 .5rem .5rem .5rem;border:none}.carousel .carousel__controls button:before{display:none}.carousel .carousel__controls button:first-child:last-child{display:none}.carousel__controls>button[aria-current]{background:var(--colour-success)}.carousel.hide-btns .carousel__wrapper>.btn{display:none}.carousel.hide-controls .carousel__controls{display:none}@media screen and (min-width: 36em){[data-row-class*=cols-sm-2] .carousel__controls>button:not(:nth-child(odd)),[data-row-class*=cols-sm-3] .carousel__controls>button:not(:nth-child(3n+1)),[data-row-class*=cols-sm-4] .carousel__controls>button:not(:nth-child(4n+1)),[data-row-class*=cols-sm-5] .carousel__controls>button:not(:nth-child(5n+1)),[data-row-class*=cols-sm-6] .carousel__controls>button:not(:nth-child(6n+1)){display:none}[data-row-class*=cols-sm-2] .carousel__controls:has(button:first-child:nth-last-child(2)),[data-row-class*=cols-sm-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),[data-row-class*=cols-sm-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),[data-row-class*=cols-sm-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),[data-row-class*=cols-sm-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),[data-row-class*=cols-sm-2] .carousel__controls:has(button:first-child:nth-last-child(2))~.btn,[data-row-class*=cols-sm-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3)))~.btn,[data-row-class*=cols-sm-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4)))~.btn,[data-row-class*=cols-sm-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5)))~.btn,[data-row-class*=cols-sm-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6)))~.btn{display:none}}@media screen and (min-width: 62em){.carousel__controls>button{display:inline-block !important}[data-row-class*=cols-md-2] .carousel__controls>button:not(:nth-child(odd)),[data-row-class*=cols-md-3] .carousel__controls>button:not(:nth-child(3n+1)),[data-row-class*=cols-md-4] .carousel__controls>button:not(:nth-child(4n+1)),[data-row-class*=cols-md-5] .carousel__controls>button:not(:nth-child(5n+1)),[data-row-class*=cols-md-6] .carousel__controls>button:not(:nth-child(6n+1)){display:none !important}[data-row-class*=cols-md-2] .carousel__controls:has(button:first-child:nth-last-child(2)),[data-row-class*=cols-md-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),[data-row-class*=cols-md-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),[data-row-class*=cols-md-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),[data-row-class*=cols-md-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),[data-row-class*=cols-md-2] .carousel__controls:has(button:first-child:nth-last-child(2))~.btn,[data-row-class*=cols-md-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3)))~.btn,[data-row-class*=cols-md-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4)))~.btn,[data-row-class*=cols-md-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5)))~.btn,[data-row-class*=cols-md-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6)))~.btn{display:none}}/*# sourceMappingURL=assets/css/components/carousel.css.map */
+    @import "${i}";
+    .carousel .carousel__wrapper{position:relative}.carousel .carousel__inner{--gutter-x: 1rem;overflow:auto;scroll-snap-type:x mandatory}.carousel .col>*:last-child{margin-bottom:0;padding-bottom:0}.carousel__inner{scrollbar-width:none;-ms-overflow-style:none}.carousel__inner::-webkit-scrollbar{display:none}.btn-next,.btn-prev{--marker-bg: var(--colour-secondary);text-indent:100%;white-space:nowrap;overflow:hidden;background:var(--marker-bg);border-radius:100%;width:2.25rem;max-width:2.25rem;height:2.25rem;text-indent:-300rem;overflow:hidden;border:none;position:relative;margin:0 0.5rem;padding:0;position:absolute;top:50%;left:0rem;transform:translate(0, -50%)}.btn-next:disabled,.btn-prev:disabled{opacity:.8;pointer-events:none}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0deg)}.btn-next:hover,.btn-next:focus,.btn-prev:hover,.btn-prev:focus{background:var(--colour-warning);color:var(--colour-hover);border-radius:100%}.btn-next:active,.btn-prev:active{border-radius:100%}.btn-next{left:auto;right:0}@media screen and (min-width: 62em){.btn-next{margin-right:-3rem}}@media screen and (min-width: 62em){.btn-prev{margin-left:-3rem}}.btn-prev:after{transform:rotate(180deg)}.carousel .carousel__controls{overflow:hidden;margin-inline:auto}.carousel .carousel__controls:not(.thumbnails){text-align:center;max-width:30rem}.carousel .carousel__controls.thumbnails{margin-block-start:2rem}@media screen and (min-width: 36em){.carousel .carousel__controls{width:100%}}.carousel .carousel__controls button{padding:0;margin:0 .2rem .2rem;border:3px solid var(--colour-canvas);border-radius:4px}.carousel .carousel__controls button.has-thumbnail{height:4.625rem}.carousel .carousel__controls button.has-thumbnail img{height:100%;width:auto}.carousel .carousel__controls button:not(.has-thumbnail){width:1rem;height:1rem;min-height:1rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:var(--colour-primary-theme);margin:0 .5rem .5rem .5rem;border:none}.carousel .carousel__controls button:not(.has-thumbnail):before{display:none}.carousel .carousel__controls button:first-child:last-child{display:none}.carousel__controls>button[aria-current]{--colour-active-thumbnail: var(--colour-info);border-color:var(--colour-active-thumbnail)}.carousel__controls>button[aria-current]:not(.has-thumbnail){background:var(--colour-success)}.carousel.hide-btns .carousel__wrapper>.btn{display:none}.carousel.hide-controls .carousel__controls{display:none}@media screen and (min-width: 36em){[data-row-class*=cols-sm-2] .carousel__controls>button:not(:nth-child(odd)),[data-row-class*=cols-sm-3] .carousel__controls>button:not(:nth-child(3n+1)),[data-row-class*=cols-sm-4] .carousel__controls>button:not(:nth-child(4n+1)),[data-row-class*=cols-sm-5] .carousel__controls>button:not(:nth-child(5n+1)),[data-row-class*=cols-sm-6] .carousel__controls>button:not(:nth-child(6n+1)){display:none}[data-row-class*=cols-sm-2] .carousel__controls:has(button:first-child:nth-last-child(2)),[data-row-class*=cols-sm-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),[data-row-class*=cols-sm-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),[data-row-class*=cols-sm-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),[data-row-class*=cols-sm-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),[data-row-class*=cols-sm-2] .carousel__controls:has(button:first-child:nth-last-child(2))~.btn,[data-row-class*=cols-sm-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3)))~.btn,[data-row-class*=cols-sm-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4)))~.btn,[data-row-class*=cols-sm-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5)))~.btn,[data-row-class*=cols-sm-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6)))~.btn{display:none}}@media screen and (min-width: 62em){.carousel__controls>button{display:inline-block !important}[data-row-class*=cols-md-2] .carousel__controls>button:not(:nth-child(odd)),[data-row-class*=cols-md-3] .carousel__controls>button:not(:nth-child(3n+1)),[data-row-class*=cols-md-4] .carousel__controls>button:not(:nth-child(4n+1)),[data-row-class*=cols-md-5] .carousel__controls>button:not(:nth-child(5n+1)),[data-row-class*=cols-md-6] .carousel__controls>button:not(:nth-child(6n+1)){display:none !important}[data-row-class*=cols-md-2] .carousel__controls:has(button:first-child:nth-last-child(2)),[data-row-class*=cols-md-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),[data-row-class*=cols-md-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),[data-row-class*=cols-md-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),[data-row-class*=cols-md-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),[data-row-class*=cols-md-2] .carousel__controls:has(button:first-child:nth-last-child(2))~.btn,[data-row-class*=cols-md-3] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3)))~.btn,[data-row-class*=cols-md-4] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4)))~.btn,[data-row-class*=cols-md-5] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5)))~.btn,[data-row-class*=cols-md-6] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6)))~.btn{display:none}}/*# sourceMappingURL=assets/css/components/carousel.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
@@ -15,14 +15,14 @@
           <slot></slot>
         </div>
  
-        <div class="carousel__controls">
+        <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-        <button class="btn btn-next" data-go="2">Next</button>
+        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
+        <button class="btn btn-next" data-go="2" part="next">Next</button>
 
       </div>
     </div>
-    `,this.shadowRoot.appendChild(s.content.cloneNode(!0))}connectedCallback(){const r=this.shadowRoot.querySelector(".carousel"),n=this.querySelector(".row"),s=this.shadowRoot.querySelector(".carousel__controls");let i=this.querySelectorAll(":scope > .row > .col").length;r.setAttribute("data-row-class",n.className),this.classList.contains("hide-btns")&&r.classList.add("hide-btns"),this.classList.contains("hide-controls")&&r.classList.add("hide-controls");let e="";for(let o=1;o<=i;o++)e+=`<button class="control-${o}" data-slide="${o}" ${o==1?"aria-current":""}>Slide ${o}</button>`;s.innerHTML=e,b(r,n)}}export{m as default};
+    `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){const o=this.shadowRoot.querySelector(".carousel"),i=this.querySelector(".row"),t=JSON.parse(this.dataset.thumbnails),u=this.shadowRoot.querySelector(".carousel__controls");let n=this.querySelectorAll(":scope > .row > .col").length;o.setAttribute("data-row-class",i.className),this.classList.contains("hide-btns")&&o.classList.add("hide-btns"),this.classList.contains("hide-controls")&&o.classList.add("hide-controls"),t?.length&&u.classList.add("thumbnails");let a="";for(let s=1;s<=n;s++){let e=null,r="";t.length?(r="has-thumbnail",e=`<img src="${t[s-1].src}" alt="Slide ${s}" height="148"/>`):e=`Slide ${s}`,a+=`<button class="control-${s} ${r}" data-slide="${s}" ${s==1?"aria-current":""}>${e}</button>`}u.innerHTML=a,p(o,i)}}export{v as default};
 //# sourceMappingURL=carousel.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.component.min.js","sources":["../../modules/carousel.js","carousel.component.js"],"sourcesContent":["// @ts-nocheck\nfunction carousel(carouselElement, row) {\n    var scrollTimeout;\n    let carouselInner = carouselElement.querySelector('.carousel__inner');\n    let carouselControls = carouselElement.querySelector('.carousel__controls');\n    let itemCount = row.querySelectorAll('.col').length;\n    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown\n    carouselInner.addEventListener('scroll', function (e) {\n        clearTimeout(scrollTimeout);\n        scrollTimeout = setTimeout(function () {\n            let scrollArea = carouselInner.clientWidth;\n            let scrollWidth = carouselInner.scrollWidth;\n            let scrollLeft = carouselInner.scrollLeft;\n            let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;\n            let lastItemOffset = row.querySelector('.col:last-child').offsetLeft + 50;\n            if (carouselInner.scrollLeft + scrollArea >= lastItemOffset)\n                targetSlide = itemCount;\n            Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {\n                button.removeAttribute('aria-current');\n            });\n            carouselElement.querySelector('.control-' + targetSlide).setAttribute('aria-current', true);\n            // Disable the previous button\n            if (targetSlide == 1)\n                carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');\n            else\n                carouselElement.querySelector('.btn-prev').removeAttribute('disabled');\n            // Disable the next button if the last item is in view\n            if (targetSlide == itemCount)\n                carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');\n            else\n                carouselElement.querySelector('.btn-next').removeAttribute('disabled');\n        }, 100);\n    }, false);\n    // when the buttons are used we need to make sure the carousel scrolls to the correct place\n    carouselControls.addEventListener('click', function (e) {\n        for (var target = e.target; target && target != this; target = target.parentNode) {\n            if (typeof target.matches == \"function\" && target.matches('button')) {\n                e.preventDefault();\n                Array.from(carouselControls.querySelectorAll('button')).forEach((button, index) => {\n                    button.removeAttribute('aria-current');\n                });\n                target.setAttribute('aria-current', true);\n                const el = row.querySelector(`*:nth-child(${target.getAttribute('data-slide')})`);\n                carouselInner.scroll({\n                    top: 0,\n                    left: el.offsetLeft,\n                    behavior: 'smooth'\n                });\n                break;\n            }\n        }\n    }, false);\n    carouselElement.addEventListener('click', function (e) {\n        for (var target = e.target; target && target != this; target = target.parentNode) {\n            if (typeof target.matches == \"function\" && target.matches('.btn-next, .btn-prev')) {\n                e.preventDefault();\n                let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;\n                carouselInner.scroll({\n                    top: 0,\n                    left: scrollTo,\n                    behavior: 'smooth'\n                });\n                break;\n            }\n        }\n    }, false);\n}\nexport default carousel;\n","// @ts-nocheck\nimport carousel from \"../../modules/carousel.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"carousel\"\n});\nclass iamCarousel extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/carousel.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"carousel\" :id=\"'carousel'+id\">\n      <div class=\"carousel__wrapper\">\n        <div class=\"carousel__inner\">\n          \n          <slot></slot>\n        </div>\n \n        <div class=\"carousel__controls\">\n          \n        </div>\n\n        <button class=\"btn btn-prev\" data-go=\"0\" disabled>Prev</button>\n        <button class=\"btn btn-next\" data-go=\"2\">Next</button>\n\n      </div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const carouselElement = this.shadowRoot.querySelector('.carousel');\n        const row = this.querySelector('.row');\n        const carouselControls = this.shadowRoot.querySelector('.carousel__controls');\n        let itemCount = this.querySelectorAll(':scope > .row > .col').length;\n        carouselElement.setAttribute('data-row-class', row.className);\n        if (this.classList.contains('hide-btns'))\n            carouselElement.classList.add('hide-btns');\n        if (this.classList.contains('hide-controls'))\n            carouselElement.classList.add('hide-controls');\n        // populate the pips\n        let pips = \"\";\n        for (let i = 1; i <= itemCount; i++) {\n            pips += `<button class=\"control-${i}\" data-slide=\"${i}\" ${i == 1 ? \"aria-current\" : \"\"}>Slide ${i}</button>`;\n        }\n        carouselControls.innerHTML = pips;\n        carousel(carouselElement, row);\n    }\n}\nexport default iamCarousel;\n"],"names":["carousel","carouselElement","row","scrollTimeout","carouselInner","carouselControls","itemCount","e","scrollArea","scrollWidth","scrollLeft","targetSlide","lastItemOffset","button","index","target","el","scrollTo","iamCarousel","assetLocation","coreCSS","template","pips","i"],"mappings":"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"}
+{"version":3,"file":"carousel.component.min.js","sources":["../../modules/carousel.js","carousel.component.js"],"sourcesContent":["// @ts-nocheck\nfunction carousel(carouselElement, row) {\n    var scrollTimeout;\n    let carouselInner = carouselElement.querySelector('.carousel__inner');\n    let carouselControls = carouselElement.querySelector('.carousel__controls');\n    let itemCount = row.querySelectorAll(':scope > .col').length;\n    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown\n    carouselInner.addEventListener('scroll', function (e) {\n        clearTimeout(scrollTimeout);\n        scrollTimeout = setTimeout(function () {\n            let scrollArea = carouselInner.clientWidth;\n            let scrollWidth = carouselInner.scrollWidth;\n            let scrollLeft = carouselInner.scrollLeft;\n            let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;\n            let itemWidth = row.querySelector(':scope > .col').scrollWidth;\n            let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;\n            //+60px here is to account for when the next offscreen slide is visible beneath the next arrow\n            let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);\n            let visibleItems = Math.round(scrollArea / itemWidth);\n            //Check if theres room for more slides than we have\n            let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;\n            if (leftOverSpace > 0 && lastItemInView) {\n                targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;\n            }\n            Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {\n                button.removeAttribute('aria-current');\n            });\n            carouselElement.querySelector('.control-' + targetSlide).setAttribute('aria-current', true);\n            // Disable the previous button\n            if (targetSlide == 1)\n                carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');\n            else\n                carouselElement.querySelector('.btn-prev').removeAttribute('disabled');\n            // Disable the next button if the last item is in view\n            if (targetSlide > (itemCount - visibleItems))\n                carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');\n            else\n                carouselElement.querySelector('.btn-next').removeAttribute('disabled');\n        }, 100);\n    }, false);\n    // when the buttons are used we need to make sure the carousel scrolls to the correct place\n    carouselControls.addEventListener('click', function (e) {\n        for (var target = e.target; target && target != this; target = target.parentNode) {\n            if (typeof target.matches == \"function\" && target.matches('button')) {\n                e.preventDefault();\n                Array.from(carouselControls.querySelectorAll('button')).forEach((button, index) => {\n                    button.removeAttribute('aria-current');\n                });\n                target.setAttribute('aria-current', true);\n                const el = row.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);\n                carouselInner.scroll({\n                    top: 0,\n                    left: el.offsetLeft - carouselInner.getBoundingClientRect().left,\n                    behavior: 'smooth'\n                });\n                break;\n            }\n        }\n    }, false);\n    carouselElement.addEventListener('click', function (e) {\n        let scrollArea = carouselInner.clientWidth;\n        let scrollWidth = carouselInner.scrollWidth;\n        let itemWidth = row.querySelector(':scope > .col').scrollWidth;\n        let visibleItems = Math.round(scrollArea / itemWidth);\n        let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;\n        let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);\n        //Check if theres room for more slides than we have\n        let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;\n        /*\n          When the last slide isn't filled with items, we only want to move back the number of items on the slide,\n          rather than the total number of possible visible items\n        */\n        let spacesToMove = visibleItems - leftOverSpace;\n        //Only want to change the amount of movement if the last item is visible\n        let movement = lastItemInView && leftOverSpace > 0 ? spacesToMove * itemWidth : carouselInner.clientWidth;\n        for (var target = e.target; target && target != this; target = target.parentNode) {\n            if (typeof target.matches == \"function\" && target.matches('.btn-next, .btn-prev')) {\n                e.preventDefault();\n                let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - movement : carouselInner.scrollLeft + carouselInner.clientWidth;\n                carouselInner.scroll({\n                    top: 0,\n                    left: scrollTo,\n                    behavior: 'smooth'\n                });\n                break;\n            }\n        }\n    }, false);\n}\nexport default carousel;\n","// @ts-nocheck\nimport carousel from \"../../modules/carousel.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"carousel\"\n});\nclass iamCarousel extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/carousel.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"carousel\" :id=\"'carousel'+id\">\n      <div class=\"carousel__wrapper\">\n        <div class=\"carousel__inner\">\n          \n          <slot></slot>\n        </div>\n \n        <div class=\"carousel__controls\" part=\"controls\">\n          \n        </div>\n\n        <button class=\"btn btn-prev\" data-go=\"0\" disabled  part=\"prev\">Prev</button>\n        <button class=\"btn btn-next\" data-go=\"2\" part=\"next\">Next</button>\n\n      </div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const carouselElement = this.shadowRoot.querySelector('.carousel');\n        const row = this.querySelector('.row');\n        const thumbnailImages = JSON.parse(this.dataset.thumbnails);\n        const carouselControls = this.shadowRoot.querySelector('.carousel__controls');\n        let itemCount = this.querySelectorAll(':scope > .row > .col').length;\n        carouselElement.setAttribute('data-row-class', row.className);\n        if (this.classList.contains('hide-btns'))\n            carouselElement.classList.add('hide-btns');\n        if (this.classList.contains('hide-controls'))\n            carouselElement.classList.add('hide-controls');\n        if (thumbnailImages === null || thumbnailImages === void 0 ? void 0 : thumbnailImages.length) {\n            carouselControls.classList.add('thumbnails');\n        }\n        // populate the pips\n        let pips = \"\";\n        for (let i = 1; i <= itemCount; i++) {\n            let pipContent = null;\n            let pipClass = '';\n            if (thumbnailImages.length) {\n                pipClass = 'has-thumbnail';\n                pipContent = `<img src=\"${thumbnailImages[i - 1].src}\" alt=\"Slide ${i}\" height=\"148\"/>`;\n            }\n            else {\n                pipContent = `Slide ${i}`;\n            }\n            pips += `<button class=\"control-${i} ${pipClass}\" data-slide=\"${i}\" ${i == 1 ? \"aria-current\" : \"\"}>${pipContent}</button>`;\n        }\n        carouselControls.innerHTML = pips;\n        carousel(carouselElement, row);\n    }\n}\nexport default iamCarousel;\n"],"names":["carousel","carouselElement","row","scrollTimeout","carouselInner","carouselControls","itemCount","e","scrollArea","scrollWidth","scrollLeft","targetSlide","itemWidth","lastItemOffset","lastItemInView","visibleItems","button","index","target","el","leftOverSpace","spacesToMove","movement","scrollTo","iamCarousel","assetLocation","coreCSS","template","thumbnailImages","pips","i","pipContent","pipClass"],"mappings":"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"}

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

@@ -22,14 +22,14 @@ class iamCollapsibleSideMenu extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
       <div class="container" part="container">
 
-        <div class="side-menu">
-          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse">Open or close Collapsible menu</button>
-          <div class="side-menu-content closed">
+        <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>
         </div>
 
-        <div class="main-content">
+        <div class="main-content" part="main-content">
           <slot></slot>
         </div>
 
@@ -54,7 +54,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
             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');
         }
-        if (this.hasAttribute('open')) {
+        if (this.hasAttribute('open') && window.innerWidth > 992) {
             sideMenu.classList.add('open');
             button.setAttribute('aria-expanded', true);
         }

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

@@ -1,27 +1,27 @@
 /*!
-  * iamKey v5.6.1-beta2
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class a 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=`
     <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: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-bottom:2px solid var(--colour-border) !important;margin-right:-2.5rem !important;border-right:2px solid var(--colour-border) !important}@media screen and (min-width: 36em){::slotted(a[slot=menu]){padding-left:2.5rem !important}}@media screen and (min-width: 36em){::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 */
+    :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-bottom:2px solid var(--colour-border) !important;margin-right:-2.5rem !important;border-right:2px solid var(--colour-border) !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 */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
       <div class="container" part="container">
 
-        <div class="side-menu">
-          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse">Open or close Collapsible menu</button>
-          <div class="side-menu-content closed">
+        <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>
         </div>
 
-        <div class="main-content">
+        <div class="main-content" part="main-content">
           <slot></slot>
         </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")&&(e.classList.add("open"),i.setAttribute("aria-expanded",!0)),i.addEventListener("click",o=>{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",o=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"),e.classList.add("hover"))}),e.addEventListener("mousemove",o=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"))}),e.addEventListener("mouseleave",o=>{window.innerWidth>992&&(e.classList.remove("hover"),e.classList.contains("open")||setTimeout(function(){t.classList.add("closed")},1e3))})}}export{a as default};
+    `,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",o=>{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",o=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"),e.classList.add("hover"))}),e.addEventListener("mousemove",o=>{window.innerWidth>992&&(e.classList.contains("open")||t.classList.remove("closed"))}),e.addEventListener("mouseleave",o=>{window.innerWidth>992&&(e.classList.remove("hover"),e.classList.contains("open")||setTimeout(function(){t.classList.add("closed")},1e3))})}}export{a as default};
 //# sourceMappingURL=collapsible-side.component.min.js.map