@iamproperty/components 5.6.1-beta19 → 5.6.1-beta20

package/assets/sass/components/carousel.scss

@@ -134,9 +134,8 @@
   margin-inline: auto;
     
   &:not(.thumbnails){
-    max-height: 1rem;
-    width: 10rem;
     text-align: center;
+    max-width: 30rem;
   }
 
   &.thumbnails {

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

@@ -58,15 +58,22 @@ class iamCard extends HTMLElement {
   }
 
 	connectedCallback() {
-
     this.classList.add('loaded');
-    
+
     // Mimic clicking the parent node so the focus and target events can be on the card
     const parentNode = this.parentNode.closest('a, button, label, router-link')
     const card = this.shadowRoot.querySelector('.card')
     const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
     const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
 
+    /* 
+      If the parentNode is actually just a div, 
+      we don't want to look for anything or add events 
+    */
+    if (!parentNode) {
+      return false;
+    }
+
     if(parentNode)
       parentNode.setAttribute('tabindex','-1');
     

package/assets/ts/modules/carousel.ts

@@ -16,14 +16,19 @@ function carousel(carouselElement, row) {
       let scrollWidth = carouselInner.scrollWidth;
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-      let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft - 50;
+     
       let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+      let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+      let lastItemInView = carouselInner.scrollLeft + scrollArea >= (lastItemOffset + 100);
+
       let visibleItems = Math.round(scrollArea / itemWidth);
 
-      if(carouselInner.scrollLeft + scrollArea >= lastItemOffset){
+      //Check if theres room for more slides than we have
+      let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
 
+      if(leftOverSpace > 0 && lastItemInView){
         targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;
-      }
+      } 
       
       Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
         button.removeAttribute('aria-current');
@@ -38,7 +43,7 @@ function carousel(carouselElement, row) {
         carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
 
       // Disable the next button if the last item is in view
-      if(targetSlide == itemCount)
+      if(targetSlide > (itemCount - visibleItems))
         carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
       else
         carouselElement.querySelector('.btn-next').removeAttribute('disabled');
@@ -75,11 +80,25 @@ function carousel(carouselElement, row) {
   
   carouselElement.addEventListener('click', function(e){
 
+    let scrollArea = carouselInner.clientWidth;
+    let scrollWidth = carouselInner.scrollWidth;
+    let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+
+    let visibleItems = Math.round(scrollArea / itemWidth);
+
+    let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+    let lastItemInView = carouselInner.scrollLeft + scrollArea >= (lastItemOffset + 100);
+
+    //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;
+
     for (var target = e.target; target && target != this; target = target.parentNode) {
       if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {
         
         e.preventDefault();
-        let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
+        let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - movement : carouselInner.scrollLeft + carouselInner.clientWidth;
         
         carouselInner.scroll({
           top: 0,

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-0688ee84.mjs").then((t) => {
+      import("./fileupload.component.min-d623c5b9.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-4dee87e6.mjs").then((t) => {
+      import("./accordion.component.min-71c08546.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-9f366742.mjs").then((t) => {
+      import("./card.component-8584e61e.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-c09d94f2.mjs").then((t) => {
+      import("./carousel.component.min-b1869c2d.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-21d5f295.mjs").then((t) => {
+      import("./header.component.min-38691192.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-4e9a95d0.mjs").then((t) => {
+      import("./nav.component.min-bc4866b3.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-84ba6c17.mjs").then((t) => {
+      import("./tabs.component.min-c048dcc7.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-beta19
+  * iamKey v5.6.1-beta20
   * 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-52f81143.mjs").then((t) => {
+      import("./actionbar.component.min-52d78863.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-beta19
+  * iamKey v5.6.1-beta20
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {