@iamproperty/components 5.6.1-beta17 → 5.6.1-beta18

package/assets/sass/components/carousel.scss

@@ -130,18 +130,40 @@
 
 // #region carousel controls/pips
 .carousel .carousel__controls {
-
-  text-align: center;
-  width: 10rem;
-  max-height: 1rem;
   overflow: hidden;
   margin-inline: auto;
     
+  &:not(.thumbnails){
+    max-height: 1rem;
+    width: 10rem;
+    text-align: center;
+  }
+
+  &.thumbnails {
+    margin-block-start: 2rem;
+  }
+
   @include media-breakpoint-up(sm) {
     width: 100%;
   }
 
   button {
+    padding: 0;
+    margin: 0 0.2rem 0.2rem;
+    border: 3px solid var(--colour-canvas);
+    border-radius: 4px;
+
+    &.has-thumbnail {
+      height: 4.625rem;
+
+      img {
+        height: 100%;
+        width: auto;
+      }
+    }
+  }
+
+  button:not(.has-thumbnail) {
     width: 1rem;
     height: 1rem;
     min-height: 1rem;
@@ -149,10 +171,9 @@
     text-indent: -50rem;
     overflow: hidden;
     background: var(--colour-primary-theme);
-    padding: 0;
     margin: 0 0.5rem 0.5rem 0.5rem;
     border: none;
-
+    
     &:before {
       display: none;
     }
@@ -164,8 +185,12 @@
 }
 
 .carousel__controls > button[aria-current] {
+  --colour-active-thumbnail: var(--colour-info); 
+  border-color: var(--colour-active-thumbnail);
 
-  background: var(--colour-success);
+  &:not(.has-thumbnail) {
+    background: var(--colour-success);
+  }
 }
 
 // #endregion

package/assets/ts/components/carousel/carousel.component.ts

@@ -49,6 +49,8 @@ class iamCarousel extends HTMLElement {
     
     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
@@ -61,10 +63,24 @@ class iamCarousel extends HTMLElement {
     if(this.classList.contains('hide-controls'))
       carouselElement.classList.add('hide-controls');
 
+    if (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;
 

package/assets/ts/modules/dialogs.ts

@@ -72,6 +72,14 @@ const extendDialogs = (body) => {
         btnElement.classList.remove('active');
       });
 
+      let closeEvent = new CustomEvent('dialog-closed', {
+        bubbles: true,
+        cancelable: true,
+        detail: { modalId: dialog.id }
+      });
+
+      event.target.dispatchEvent(closeEvent);
+
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         "event": "closeModal",