@iamproperty/components 5.6.1-beta20 → 5.6.1-beta21

package/assets/sass/components/address-lookup.scss

@@ -7,6 +7,10 @@ input[name="postcode"] {
   border-color: var(--error-border,var(--colour-primary))!important;
 }
 
+:is([name="postcode"]):is(:focus,.focus):not(:disabled) {
+  border-color: var(--colour-info)!important;
+}
+
 div:has(input[name="postcode"]) .suffix {
 
   border-color: var(--error-border,var(--colour-primary))!important;

package/assets/ts/components/card/card.component.ts

@@ -33,21 +33,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));
@@ -57,6 +43,25 @@ class iamCard extends HTMLElement {
       document.head.insertAdjacentHTML('beforeend',`<style id="cardGlobal">${loadExtraCSS}</style>`);
   }
 
+  const 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');
 
@@ -189,7 +194,7 @@ class iamCard extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["data-total","class"];
+    return ["data-total","class","data-image"];
   }
   
   attributeChangedCallback(attrName, oldVal, newVal) {
@@ -200,12 +205,26 @@ 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/ts/modules/carousel.ts

@@ -19,7 +19,8 @@ function carousel(carouselElement, row) {
      
       let itemWidth = row.querySelector(':scope > .col').scrollWidth;
       let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
-      let lastItemInView = carouselInner.scrollLeft + scrollArea >= (lastItemOffset + 100);
+      //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
+      let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
 
       let visibleItems = Math.round(scrollArea / itemWidth);
 
@@ -69,7 +70,7 @@ function carousel(carouselElement, row) {
 
         carouselInner.scroll({
           top: 0,
-          left: el.offsetLeft - 100, 
+          left: el.offsetLeft - carouselInner.getBoundingClientRect().left, 
           behavior: 'smooth'
         });
 
@@ -87,12 +88,19 @@ function carousel(carouselElement, row) {
     let visibleItems = Math.round(scrollArea / itemWidth);
 
     let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
-    let lastItemInView = carouselInner.scrollLeft + scrollArea >= (lastItemOffset + 100);
+    let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
 
     //Check if theres room for more slides than we have
     let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
 
-    let movement = lastItemInView && leftOverSpace > 0 ? leftOverSpace * itemWidth : carouselInner.clientWidth;
+    /* 
+      When the last slide isn't filled with items, we only want to move back the number of items on the slide, 
+      rather than the total number of possible visible items
+    */
+    let spacesToMove = visibleItems - leftOverSpace;
+
+    //Only want to change the amount of movement if the last item is visible
+    let movement = lastItemInView && leftOverSpace > 0 ? spacesToMove * itemWidth : carouselInner.clientWidth;
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
       if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {

package/dist/components.es.js

@@ -453,7 +453,7 @@ const N = /* @__PURE__ */ m(ne, [["render", Se]]), xe = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-d623c5b9.mjs").then((t) => {
+      import("./fileupload.component.min-2dd5ee41.mjs").then((t) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -483,7 +483,7 @@ const qe = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-71c08546.mjs").then((t) => {
+      import("./accordion.component.min-d6a0f423.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -592,7 +592,7 @@ const Va = /* @__PURE__ */ m(Ne, [["render", Fe]]), ze = {
   name: "Card",
   created() {
     this.$nextTick(function() {
-      import("./card.component-8584e61e.mjs").then((t) => {
+      import("./card.component-a11e9b92.mjs").then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -623,7 +623,7 @@ const Fa = /* @__PURE__ */ m(ze, [["render", Be]]), Oe = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-b1869c2d.mjs").then((t) => {
+      import("./carousel.component.min-655528a6.mjs").then((t) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -652,7 +652,7 @@ const za = /* @__PURE__ */ m(Oe, [["render", We]]), Ke = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-38691192.mjs").then((t) => {
+      import("./header.component.min-f9cf9d07.mjs").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1048,7 +1048,7 @@ const Wa = /* @__PURE__ */ m(_t, [["render", Ht]]), Mt = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-bc4866b3.mjs").then((t) => {
+      import("./nav.component.min-85240e2c.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1168,7 +1168,7 @@ const Zt = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-c048dcc7.mjs").then((t) => {
+      import("./tabs.component.min-9a9448c4.mjs").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1315,7 +1315,7 @@ function ha(t, a, e, i, r, s) {
 }
 const es = /* @__PURE__ */ m(pa, [["render", ha]]);
 /*!
-  * iamKey v5.6.1-beta20
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 iamproperty
   */
 function fa(t, a) {
@@ -1485,7 +1485,7 @@ const as = /* @__PURE__ */ m(ka, [["render", Aa]]), La = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-52d78863.mjs").then((t) => {
+      import("./actionbar.component.min-167ba759.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1500,7 +1500,7 @@ function Sa(t, a, e, i, r, s) {
 }
 const ss = /* @__PURE__ */ m(La, [["render", Sa]]);
 /*!
-  * iamKey v5.6.1-beta20
+  * iamKey v5.6.1-beta21
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {
@@ -1625,7 +1625,7 @@ const is = /* @__PURE__ */ m(qa, [["render", Ta]]), Ea = {
   name: "Address Lookup",
   mounted() {
     this.$nextTick(function() {
-      import("./address-lookup.component.min-cada2a24.mjs").then((t) => {
+      import("./address-lookup.component.min-16beabdf.mjs").then((t) => {
         window.customElements.get("iam-address-lookup") || window.customElements.define("iam-address-lookup", t.default);
       }).catch((t) => {
         console.log(t.message);