@iamproperty/components 5.6.1-beta9 → 5.7.0

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') || 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>
+      ${this.createCardConent()}
     </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -47,6 +33,23 @@ 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
@@ -54,6 +57,13 @@ class iamCard extends HTMLElement {
         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]')) {
@@ -132,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) {
@@ -142,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,7 +1,7 @@
 /*!
-  * iamKey v5.6.1-beta9
+  * iamKey v5.7.0
   * Copyright 2022-2024 iamproperty
-  */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 r=this.classList.toString();const e=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"):`${e}/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: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 */
@@ -9,23 +9,23 @@
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
-    <div class="card ${r}" tabindex="0" part="card">
-    ${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>
+    <div class="card ${e}" tabindex="0" part="card">
+      ${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 r=this.parentNode.closest("a, button, label, router-link"),e=this.shadowRoot.querySelector(".card"),o=this.shadowRoot.querySelector(".btn-compact");if(this.hasAttribute("data-record")&&this.getAttribute("data-record"),r&&r.setAttribute("tabindex","-1"),r.matches("label[for]")&&(document.getElementById(r.getAttribute("for")).checked?e.classList.add("checked"):e.classList.remove("checked")),this.addEventListener("click",t=>{let a=new Event("click");e.dispatchEvent(a)}),e.addEventListener("click",t=>{if(r.matches("label[for]")){t.stopPropagation(),t.preventDefault();const a=document.getElementById(r.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"))}),r.click(),a.checked?e.classList.add("checked"):e.classList.remove("checked")}}),this.addEventListener("inactive",t=>{e.classList.remove("checked")}),e.addEventListener("keydown",t=>{switch(t.keyCode){case 32:case 13:if(r.matches("label[for]")){t.stopPropagation(),t.preventDefault();const a=document.getElementById(r.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"))}),r.click(),a.checked?e.classList.add("checked"):e.classList.remove("checked")}else r.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"]}attributeChangedCallback(r,e,o){switch(r){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{m 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') || 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    </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        const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';\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

@@ -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-beta9
+  * iamKey v5.7.0
   * 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,a=s.scrollWidth,d=s.scrollLeft,c=Math.round(d/a*e)+1,h=r.querySelector(".col:last-child").offsetLeft+50;s.scrollLeft+t>=h&&(c=e),Array.from(l.querySelectorAll(".carousel__controls button")).forEach((u,f)=>{u.removeAttribute("aria-current")}),l.querySelector(".control-"+c).setAttribute("aria-current",!0),c==1?l.querySelector(".btn-prev").setAttribute("disabled","disabled"):l.querySelector(".btn-prev").removeAttribute("disabled"),c==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,c)=>{d.removeAttribute("aria-current")}),t.setAttribute("aria-current",!0);const a=r.querySelector(`*:nth-child(${t.getAttribute("data-slide")})`);s.scroll({top:0,left:a.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 a=t.classList.contains("btn-prev")?s.scrollLeft-s.clientWidth:s.scrollLeft+s.clientWidth;s.scroll({top:0,left:a,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>
@@ -24,5 +24,5 @@
 
       </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\" 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 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.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.6.1-beta9
+  * iamKey v5.7.0
   * 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">

package/assets/js/components/fileupload/fileupload.component.js

@@ -28,6 +28,8 @@ class iamFileupload extends HTMLElement {
       <hr/>
       <slot></slot>
       <div class="files" part="files"><slot name="files"></slot></div>
+      <span class="invalid-feedback ext">Some files did not match the accpeted extension type.</span>
+      <span class="invalid-feedback size">Some files Were too large to upload.</span>
     </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -41,5 +43,19 @@ class iamFileupload extends HTMLElement {
             helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;
         fileupload(this, wrapper);
     }
+    static get observedAttributes() {
+        return ["data-filename"];
+    }
+    attributeChangedCallback(attrName, oldVal, newVal) {
+        switch (attrName) {
+            case "data-filename": {
+                if (oldVal != newVal) {
+                    const filesWrapper = this.shadowRoot.querySelector('.files');
+                    filesWrapper.innerHTML = `<span class="file">${newVal} <button data-file="${newVal}">Remove</button></span>`;
+                }
+                break;
+            }
+        }
+    }
 }
 export default iamFileupload;

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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v5.6.1-beta9
+  * iamKey v5.7.0
   * Copyright 2022-2024 iamproperty
-  */function b(i,n){const r=n.querySelector(".files"),d=n.querySelector(".drop-area"),t=i.querySelector("input"),f=i.hasAttribute("data-maxsize")?i.getAttribute("data-maxsize"):0,a=t.cloneNode();if(d.append(a),n.addEventListener("click",e=>{e&&e.target instanceof HTMLElement&&e.target.closest(".btn-primary")&&(e.target.closest(".btn-primary"),(t.hasAttribute("multiple")?a:t).click())}),n.addEventListener("click",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest(".files button")){const s=new DataTransfer,{files:c}=t,p=e.target.closest(".files button");for(let o=0;o<c.length;o++){const l=c[o];l.name!=p.getAttribute("data-file")&&s.items.add(l)}if(t.files=s.files,t.files.length==0){const o=new Event("empty");i.dispatchEvent(o)}const m=new Event("change");t.dispatchEvent(m);const u=new Event("elementChange");i.dispatchEvent(u)}}),a.addEventListener("change",e=>{if(t.hasAttribute("multiple")){const p=[...t.files,...a.files];let m=[];const u=new DataTransfer;for(let o=0;o<p.length;o++){const l=p[o],h=l.size/1e3;!m.includes(l.name)&&(f==0||h<f)&&u.items.add(l),m.push(l.name)}t.files=u.files}else t.files=a.files;const s=new Event("change");t.dispatchEvent(s);const c=new Event("elementChange");i.dispatchEvent(c)}),a.addEventListener("dragenter",e=>{a.classList.add("focus")}),a.addEventListener("dragleave",e=>{a.classList.remove("focus")}),a.addEventListener("drop",e=>{a.classList.remove("focus")}),t.addEventListener("change",e=>{r.innerHTML="";for(const s of t.files)r.innerHTML+=`<span class="file">${s.name} <button data-file="${s.name}">Remove</button></span>`}),i.hasAttribute("data-filename")){let e=i.getAttribute("data-filename");e&&(r.innerHTML+=`<span class="file">${e} <button data-file="${e}">Remove</button></span>`)}}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"fileupload"});class g extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const n=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${n}/css/core.min.css`,d=document.createElement("template");d.innerHTML=`
+  */function v(d,i){const o=i.querySelector(".files"),n=i.querySelector(".drop-area"),e=d.querySelector("input"),f=d.hasAttribute("data-maxsize")?d.getAttribute("data-maxsize"):0,u=i.querySelector(".invalid-feedback.size"),h=i.querySelector(".invalid-feedback.ext"),s=e.cloneNode();n.append(s);let b=function(t){if(!e.hasAttribute("accept"))return!0;const r=t.split(".").pop();return!!e.getAttribute("accept").includes(r)};if(i.addEventListener("click",t=>{t&&t.target instanceof HTMLElement&&t.target.closest(".btn-primary")&&(t.target.closest(".btn-primary"),h.classList.remove("d-block"),u.classList.remove("d-block"),(e.hasAttribute("multiple")?s:e).click())}),i.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest(".files button")){const r=new DataTransfer,{files:a}=e,m=t.target.closest(".files button");for(let p=0;p<a.length;p++){const l=a[p];l.name!=m.getAttribute("data-file")&&r.items.add(l)}e.files=r.files;const c=new Event("change");e.dispatchEvent(c)}}),s.addEventListener("change",t=>{if(e.hasAttribute("multiple")){const a=[...e.files,...s.files];let m=[];const c=new DataTransfer;for(let p=0;p<a.length;p++){const l=a[p],g=l.size/1e3;!m.includes(l.name)&&(f==0||g<f)&&b(l.name)&&c.items.add(l),b(l.name)||h.classList.add("d-block"),g>f&&u.classList.add("d-block"),m.push(l.name)}e.files=c.files}else e.files=s.files;const r=new Event("change");e.dispatchEvent(r)}),s.addEventListener("dragenter",t=>{s.classList.add("focus")}),s.addEventListener("dragleave",t=>{s.classList.remove("focus")}),s.addEventListener("drop",t=>{s.classList.remove("focus")}),e.addEventListener("change",t=>{if(e.files.length==1){let a=e.files[0];const m=a.size/1e3;if(!b(a.name)){h.classList.add("d-block");const c=new DataTransfer;e.files=c.files}if(m>f){u.classList.add("d-block");const c=new DataTransfer;e.files=c.files}}o.innerHTML="";for(const a of e.files)o.innerHTML+=`<span class="file" part="file">${a.name} <button data-file="${a.name}">Remove</button></span>`;const r=new CustomEvent("elementchange",{detail:{files:e.files}});if(d.dispatchEvent(r),e.files.length==0){const a=new CustomEvent("empty");d.dispatchEvent(a)}}),d.hasAttribute("data-filename")){let t=d.getAttribute("data-filename");t&&(o.innerHTML=`<span class="file">${t} <button data-file="${t}">Remove</button></span>`)}}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"fileupload"});class y extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const i=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"):`${i}/css/core.min.css`,n=document.createElement("template");n.innerHTML=`
     <style>
-    @import "${r}";
-    .file-upload{max-width:25rem !important;padding-bottom:1rem}.file-upload .drop-area>input{display:none}.file-upload .file-upload__title{margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);line-height:2rem;color:var(--colour-heading);clear:both;display:block;padding-bottom:2rem;font-size:1.5rem;line-height:2rem;padding-bottom:2rem;max-width:var(--content-max-width)}.file-upload .helper-text{max-width:16.875rem}.files span{display:block;width:100%;padding:var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);border:2px solid var(--colour-primary-theme);appearance:none;border-radius:0.5rem;margin-bottom:1rem;color:var(--colour-primary);border-color:#d8d8d8;background:#d8d8d8;max-width:25rem !important;position:relative}@media screen and (prefers-color-scheme: dark){.files span{background:var(--colour-canvas-2);border-color:var(--colour-canvas-2);color:var(--colour-body)}}@media(forced-colors: active){.files span{padding-right:5rem}.files span button{padding:0;width:3.7rem !important;text-indent:0% !important}.files span button:after{display:none !important}}.files span button{position:absolute;top:calc(50% - 0.5625rem);right:0.875rem;z-index:var(--index-floating);text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0)}.files span button:after{content:"";top:0;left:0;position:absolute;display:block;height:1.125rem;width:1.125rem;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-close);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}:host(.fileupload--drag-drop) .file-upload{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .helper-text{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .drop-area>input{display:block;min-height:12.5rem;border:2px dashed var(--colour-primary-theme);color:rgba(0,0,0,0);position:relative;padding:1.5rem 2rem 1.5rem 2rem;user-select:none;max-width:100%;min-width:100%;margin-bottom:1rem}:host(.fileupload--drag-drop) .file-upload .drop-area>input.focus{border:2px solid var(--colour-info)}:host(.fileupload--drag-drop) .file-upload .drop-area{position:relative}:host(.fileupload--drag-drop) .file-upload .drop-area::before{content:"Drag and drop files here or click to upload";position:absolute;inset:1.5rem 2rem 1.5rem 2rem;z-index:1;pointer-events:none}:host(.fileupload--drag-drop) .file-upload ::file-selector-button{position:absolute;inset:0;opacity:0}/*# sourceMappingURL=assets/css/components/fileupload.css.map */
+    @import "${o}";
+    .file-upload{max-width:25rem !important;padding-bottom:1rem}.file-upload .drop-area>input{display:none}.file-upload .file-upload__title{margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);line-height:2rem;color:var(--colour-heading);clear:both;display:block;padding-bottom:2rem;font-size:1.5rem;line-height:2rem;padding-bottom:2rem;max-width:var(--content-max-width)}.file-upload .helper-text{max-width:16.875rem}.files span{display:block;width:100%;padding:var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);border:2px solid var(--colour-primary-theme);appearance:none;border-radius:0.5rem;margin-bottom:1rem;color:var(--colour-primary);border-color:#d8d8d8;background:#d8d8d8;max-width:25rem !important;position:relative}@media(forced-colors: active){.files span{padding-right:5rem}.files span button{padding:0;width:3.7rem !important;text-indent:0% !important}.files span button:after{display:none !important}}.files span button{position:absolute;top:calc(50% - 0.5625rem);right:0.875rem;z-index:var(--index-floating);text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0)}.files span button:after{content:"";top:0;left:0;position:absolute;display:block;height:1.125rem;width:1.125rem;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-close);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}:host(.fileupload--drag-drop) .file-upload{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .helper-text{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .drop-area>input{display:block;min-height:12.5rem;border:2px dashed var(--colour-primary-theme);color:rgba(0,0,0,0);position:relative;padding:1.5rem 2rem 1.5rem 2rem;user-select:none;max-width:100%;min-width:100%;margin-bottom:1rem}:host(.fileupload--drag-drop) .file-upload .drop-area>input.focus{border:2px solid var(--colour-info)}:host(.fileupload--drag-drop) .file-upload .drop-area{position:relative}:host(.fileupload--drag-drop) .file-upload .drop-area::before{content:"Drag and drop files here or click to upload";position:absolute;inset:1.5rem 2rem 1.5rem 2rem;z-index:1;pointer-events:none}:host(.fileupload--drag-drop) .file-upload ::file-selector-button{position:absolute;inset:0;opacity:0}/*# sourceMappingURL=assets/css/components/fileupload.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
@@ -16,6 +16,8 @@
       <hr/>
       <slot></slot>
       <div class="files" part="files"><slot name="files"></slot></div>
+      <span class="invalid-feedback ext">Some files did not match the accpeted extension type.</span>
+      <span class="invalid-feedback size">Some files Were too large to upload.</span>
     </div>
-    `,this.shadowRoot.appendChild(d.content.cloneNode(!0))}connectedCallback(){this.innerHTML+='<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';const n=this.shadowRoot.querySelector(".file-upload"),r=this.querySelector("input"),d=this.shadowRoot.querySelector(".helper-text");this.querySelector('[slot="helper"]')||(d.innerHTML=`${this.hasAttribute("data-maxsize")?`Max file size is ${this.getAttribute("data-maxsize")}kb. `:""}${r.hasAttribute("accept")?`Supported file types are ${r.getAttribute("accept")}`:""}`),b(this,n)}}export{g as default};
+    `,this.shadowRoot.appendChild(n.content.cloneNode(!0))}connectedCallback(){this.innerHTML+='<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';const i=this.shadowRoot.querySelector(".file-upload"),o=this.querySelector("input"),n=this.shadowRoot.querySelector(".helper-text");this.querySelector('[slot="helper"]')||(n.innerHTML=`${this.hasAttribute("data-maxsize")?`Max file size is ${this.getAttribute("data-maxsize")}kb. `:""}${o.hasAttribute("accept")?`Supported file types are ${o.getAttribute("accept")}`:""}`),v(this,i)}static get observedAttributes(){return["data-filename"]}attributeChangedCallback(i,o,n){switch(i){case"data-filename":{if(o!=n){const e=this.shadowRoot.querySelector(".files");e.innerHTML=`<span class="file">${n} <button data-file="${n}">Remove</button></span>`}break}}}}export{y as default};
 //# sourceMappingURL=fileupload.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fileupload.component.min.js","sources":["../../modules/fileupload.js","fileupload.component.js"],"sourcesContent":["// @ts-nocheck\nfunction fileupload(fileupload, wrapper) {\n    const filesWrapper = wrapper.querySelector('.files');\n    const dropArea = wrapper.querySelector('.drop-area');\n    const input = fileupload.querySelector('input');\n    const maxSize = fileupload.hasAttribute('data-maxsize') ? fileupload.getAttribute('data-maxsize') : 0;\n    // We clone the input field to work as a buffer input field, this allows us to add new files without losing the old ones\n    const cloneInput = input.cloneNode();\n    dropArea.append(cloneInput);\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {\n            const button = event.target.closest('.btn-primary');\n            // If the input allows multiples then use the buffer clone input\n            const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;\n            inputTrigger.click();\n        }\n    });\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.files button')) {\n            const dt = new DataTransfer();\n            const { files } = input;\n            const button = event.target.closest('.files button');\n            for (let i = 0; i < files.length; i++) {\n                const file = files[i];\n                if (file.name != button.getAttribute('data-file'))\n                    dt.items.add(file); // here you exclude the file. thus removing it.\n            }\n            input.files = dt.files; // Assign the updates list\n            if (input.files.length == 0) {\n                const emptyEvent = new Event('empty');\n                fileupload.dispatchEvent(emptyEvent);\n            }\n            const changeEvent = new Event('change');\n            input.dispatchEvent(changeEvent);\n            const elementChangeEvent = new Event('elementChange');\n            fileupload.dispatchEvent(elementChangeEvent);\n        }\n    });\n    // Buffer input change event\n    cloneInput.addEventListener('change', (event) => {\n        if (input.hasAttribute('multiple')) {\n            const filesArray = [...input.files, ...cloneInput.files];\n            let fileNames = [];\n            const dt = new DataTransfer();\n            for (let i = 0; i < filesArray.length; i++) {\n                const file = filesArray[i];\n                const size = file.size / 1000;\n                if (!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize))\n                    dt.items.add(file); // here you exclude the file. thus removing it.\n                fileNames.push(file.name);\n            }\n            input.files = dt.files;\n        }\n        else {\n            input.files = cloneInput.files;\n        }\n        const changeEvent = new Event('change');\n        input.dispatchEvent(changeEvent);\n        const elementChangeEvent = new Event('elementChange');\n        fileupload.dispatchEvent(elementChangeEvent);\n    });\n    cloneInput.addEventListener('dragenter', (event) => {\n        cloneInput.classList.add('focus');\n    });\n    cloneInput.addEventListener('dragleave', (event) => {\n        cloneInput.classList.remove('focus');\n    });\n    cloneInput.addEventListener('drop', (event) => {\n        cloneInput.classList.remove('focus');\n    });\n    input.addEventListener('change', (event) => {\n        // Reset\n        filesWrapper.innerHTML = '';\n        for (const file of input.files)\n            filesWrapper.innerHTML += `<span class=\"file\">${file.name} <button data-file=\"${file.name}\">Remove</button></span>`;\n    });\n    if (fileupload.hasAttribute('data-filename')) {\n        let filename = fileupload.getAttribute('data-filename');\n        if (filename)\n            filesWrapper.innerHTML += `<span class=\"file\">${filename} <button data-file=\"${filename}\">Remove</button></span>`;\n    }\n}\nexport default fileupload;\n","// @ts-nocheck\nimport fileupload from \"../../modules/fileupload.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"fileupload\"\n});\nclass iamFileupload 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/fileupload.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=\"file-upload\">\n      <span class=\"file-upload__title\" part=\"title\">Upload file</span>\n      <p class=\"helper-text\"><slot name=\"helper\"></slot></p>\n      <button class=\"btn btn-primary\" type=\"button\" part=\"button\"><slot name=\"btn\"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>\n      <div class=\"drop-area\"></div>\n      <hr/>\n      <slot></slot>\n      <div class=\"files\" part=\"files\"><slot name=\"files\"></slot></div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.innerHTML += '<i class=\"fa-regular fa-arrow-up-from-bracket me-2\" aria-hidden=\"true\" slot=\"btn\"></i>';\n        const wrapper = this.shadowRoot.querySelector('.file-upload');\n        const input = this.querySelector('input');\n        const helperText = this.shadowRoot.querySelector('.helper-text');\n        if (!this.querySelector('[slot=\"helper\"]'))\n            helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;\n        fileupload(this, wrapper);\n    }\n}\nexport default iamFileupload;\n"],"names":["fileupload","wrapper","filesWrapper","dropArea","input","maxSize","cloneInput","event","dt","files","button","i","file","emptyEvent","changeEvent","elementChangeEvent","filesArray","fileNames","size","filename","iamFileupload","assetLocation","coreCSS","template","helperText"],"mappings":"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"}
+{"version":3,"file":"fileupload.component.min.js","sources":["../../modules/fileupload.js","fileupload.component.js"],"sourcesContent":["// @ts-nocheck\nfunction fileupload(fileupload, wrapper) {\n    const filesWrapper = wrapper.querySelector('.files');\n    const dropArea = wrapper.querySelector('.drop-area');\n    const input = fileupload.querySelector('input');\n    const maxSize = fileupload.hasAttribute('data-maxsize') ? fileupload.getAttribute('data-maxsize') : 0;\n    const errorMsgSize = wrapper.querySelector('.invalid-feedback.size');\n    const errorMsgExt = wrapper.querySelector('.invalid-feedback.ext');\n    // We clone the input field to work as a buffer input field, this allows us to add new files without losing the old ones\n    const cloneInput = input.cloneNode();\n    dropArea.append(cloneInput);\n    let checkFileExt = function (filename) {\n        if (!input.hasAttribute('accept'))\n            return true;\n        const nameExtension = filename.split('.').pop();\n        const acceptedTypes = input.getAttribute('accept');\n        if (acceptedTypes.includes(nameExtension))\n            return true;\n        return false;\n    };\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {\n            const button = event.target.closest('.btn-primary');\n            // If the input allows multiples then use the buffer clone input\n            errorMsgExt.classList.remove('d-block');\n            errorMsgSize.classList.remove('d-block');\n            const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;\n            inputTrigger.click();\n        }\n    });\n    wrapper.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.files button')) {\n            const dt = new DataTransfer();\n            const { files } = input;\n            const button = event.target.closest('.files button');\n            for (let i = 0; i < files.length; i++) {\n                const file = files[i];\n                if (file.name != button.getAttribute('data-file'))\n                    dt.items.add(file); // here you exclude the file. thus removing it.\n            }\n            input.files = dt.files; // Assign the updates list\n            const changeEvent = new Event('change');\n            input.dispatchEvent(changeEvent);\n        }\n    });\n    // Buffer input change event\n    cloneInput.addEventListener('change', (event) => {\n        if (input.hasAttribute('multiple')) {\n            const filesArray = [...input.files, ...cloneInput.files];\n            let fileNames = [];\n            const dt = new DataTransfer();\n            for (let i = 0; i < filesArray.length; i++) {\n                const file = filesArray[i];\n                const size = file.size / 1000;\n                if (!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize) && checkFileExt(file.name))\n                    dt.items.add(file); // here you exclude the file. thus removing it.\n                if (!checkFileExt(file.name)) {\n                    errorMsgExt.classList.add('d-block');\n                }\n                if (size > maxSize) {\n                    errorMsgSize.classList.add('d-block');\n                }\n                fileNames.push(file.name);\n            }\n            input.files = dt.files;\n        }\n        else {\n            input.files = cloneInput.files;\n        }\n        const changeEvent = new Event('change');\n        input.dispatchEvent(changeEvent);\n    });\n    cloneInput.addEventListener('dragenter', (event) => {\n        cloneInput.classList.add('focus');\n    });\n    cloneInput.addEventListener('dragleave', (event) => {\n        cloneInput.classList.remove('focus');\n    });\n    cloneInput.addEventListener('drop', (event) => {\n        cloneInput.classList.remove('focus');\n    });\n    input.addEventListener('change', (event) => {\n        if (input.files.length == 1) {\n            let file = input.files[0];\n            const size = file.size / 1000;\n            if (!checkFileExt(file.name)) {\n                errorMsgExt.classList.add('d-block');\n                const dt = new DataTransfer();\n                input.files = dt.files;\n            }\n            if (size > maxSize) {\n                errorMsgSize.classList.add('d-block');\n                const dt = new DataTransfer();\n                input.files = dt.files;\n            }\n        }\n        // Reset\n        filesWrapper.innerHTML = '';\n        for (const file of input.files) {\n            filesWrapper.innerHTML += `<span class=\"file\" part=\"file\">${file.name} <button data-file=\"${file.name}\">Remove</button></span>`;\n        }\n        const elementChangeEvent = new CustomEvent('elementchange', { detail: { \"files\": input.files } });\n        fileupload.dispatchEvent(elementChangeEvent);\n        if (input.files.length == 0) {\n            const emptyEvent = new CustomEvent('empty');\n            fileupload.dispatchEvent(emptyEvent);\n        }\n    });\n    if (fileupload.hasAttribute('data-filename')) {\n        let filename = fileupload.getAttribute('data-filename');\n        if (filename)\n            filesWrapper.innerHTML = `<span class=\"file\">${filename} <button data-file=\"${filename}\">Remove</button></span>`;\n    }\n}\nexport default fileupload;\n","// @ts-nocheck\nimport fileupload from \"../../modules/fileupload.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"fileupload\"\n});\nclass iamFileupload 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/fileupload.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=\"file-upload\">\n      <span class=\"file-upload__title\" part=\"title\">Upload file</span>\n      <p class=\"helper-text\"><slot name=\"helper\"></slot></p>\n      <button class=\"btn btn-primary\" type=\"button\" part=\"button\"><slot name=\"btn\"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>\n      <div class=\"drop-area\"></div>\n      <hr/>\n      <slot></slot>\n      <div class=\"files\" part=\"files\"><slot name=\"files\"></slot></div>\n      <span class=\"invalid-feedback ext\">Some files did not match the accpeted extension type.</span>\n      <span class=\"invalid-feedback size\">Some files Were too large to upload.</span>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.innerHTML += '<i class=\"fa-regular fa-arrow-up-from-bracket me-2\" aria-hidden=\"true\" slot=\"btn\"></i>';\n        const wrapper = this.shadowRoot.querySelector('.file-upload');\n        const input = this.querySelector('input');\n        const helperText = this.shadowRoot.querySelector('.helper-text');\n        if (!this.querySelector('[slot=\"helper\"]'))\n            helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;\n        fileupload(this, wrapper);\n    }\n    static get observedAttributes() {\n        return [\"data-filename\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-filename\": {\n                if (oldVal != newVal) {\n                    const filesWrapper = this.shadowRoot.querySelector('.files');\n                    filesWrapper.innerHTML = `<span class=\"file\">${newVal} <button data-file=\"${newVal}\">Remove</button></span>`;\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamFileupload;\n"],"names":["fileupload","wrapper","filesWrapper","dropArea","input","maxSize","errorMsgSize","errorMsgExt","cloneInput","checkFileExt","filename","nameExtension","event","dt","files","button","i","file","changeEvent","filesArray","fileNames","size","elementChangeEvent","emptyEvent","iamFileupload","assetLocation","coreCSS","template","helperText","attrName","oldVal","newVal"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.6.1-beta9
+  * iamKey v5.7.0
   * Copyright 2022-2024 iamproperty
   */function i(s,t){n(s,t)}function n(s,t){var e;t.addEventListener("keyup",a=>{clearTimeout(e),e=setTimeout(function(){o(s,t.value)},500)}),t.addEventListener("change",a=>{clearTimeout(e),o(s,t.value)})}const o=function(s,t){Array.from(s.querySelectorAll(":scope > li")).forEach((e,a)=>{let r=e.textContent.toLowerCase();e.classList.add("d-none"),r.includes(t.toLowerCase())&&e.classList.remove("d-none")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Filtered list",value:t})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"filterlist"});class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
     <style>