@iamproperty/components 5.6.1-beta16 → 5.6.1-beta18

package/assets/sass/_components.scss

@@ -82,6 +82,10 @@ iam-table {
   }
 }
 
+iam-pagination {
+  --pagination-link-color: var(--colour-light);
+  --pagination-link-color-active: #E0E0E0;
+}
 
 iam-fileupload::part(file) {
   @include dark-mode() {

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/sass/components/pagination.scss

@@ -35,15 +35,18 @@
   padding-inline: 1rem;
   
   .select--minimal {
-    --select-padding-left: rem(16);
-    height: rem(52);
-    line-height: rem(52);
+    height: calc(3.25rem - 1em);
+    line-height: calc(3.25rem - 1em);
     margin-left: rem(-16);
     font-weight: bold;
   }
 
   div:has(> select){
     margin-bottom: 0;
+    
+    &:after {
+      top: 50%;
+    }
   }
 }
 
@@ -118,7 +121,7 @@
   display: none;
   background: none;
   padding-inline: 1rem;
-
+  color: var(--colour-body);
   
   @include container-up(sm) {
 
@@ -134,21 +137,13 @@
   }
 
   &:is(:hover,:focus):not(:disabled){
-    background-color: var(--colour-light);
+    background-color: var(--pagination-link-color);
+    color: var(--colour-hover);
   }
 
   &:is(:active):not(:disabled){
-    background-color: #E0E0E0;
-  }
-
-  @include dark-mode(){
-    &:is(:hover,:focus):not(:disabled){
-      background-color: var(--colour-canvas);
-    }
-  
-    &:is(:active):not(:disabled){
-      background-color: var(--colour-canvas);
-    }
+    background-color: var(--pagination-link-color);
+    color: var(--colour-active);
   }
 
   &:disabled {

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/components/table/table.component.ts

@@ -242,7 +242,10 @@ class iamTable extends HTMLElement {
 
 
       tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
-      tableModule.filterTable(this.table, this.form,this);
+      
+      if(!this.hasAttribute('data-no-submit'))
+        tableModule.filterTable(this.table, this.form,this);
+
       tableModule.populateDataQueries(this.table, this.form);
     }
 
@@ -256,6 +259,22 @@ class iamTable extends HTMLElement {
 
     });
 
+    // Push up the pagination events
+    this.pagination.addEventListener('update-show', (event) => {
+
+      let show = event.detail.show;
+
+      const updateEvent = new CustomEvent("update-show", { detail: { show: show } });
+      this.dispatchEvent(updateEvent);
+    });
+
+    this.pagination.addEventListener('update-page', (event) => {
+
+      let page = event.detail.page;
+
+      const updateEvent = new CustomEvent("update-page", { detail: { page: page } });
+      this.dispatchEvent(updateEvent);
+    });
   }
 
 
@@ -265,6 +284,10 @@ class iamTable extends HTMLElement {
   
   attributeChangedCallback(attrName, oldVal, newVal) {
     
+    if(this.hasAttribute('data-no-submit')){
+      return false;
+    }
+
     this.pagination = this.shadowRoot.querySelector('iam-pagination');
 
     switch (attrName) {

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",

package/assets/ts/modules/table.ts

@@ -149,7 +149,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
   // Check what conditions are set on the table to see what the form actions are
   let formSubmit = function(event, paginate = false){
 
-    console.log('submit');
+    if(wrapper.hasAttribute('data-no-submit')){
+      return false;
+    }
 
     if(form.classList.contains('processing'))
       return false;
@@ -848,6 +850,10 @@ export const populateDataQueries = (table,form,wrapper) => {
 // Pagination
 export const addPaginationEventListeners = function(table, form, pagination, wrapper){
 
+  if(wrapper.hasAttribute('data-no-submit')){
+    return false;
+  }
+
   pagination.addEventListener('update-page', (event) => {
 
     let paginationInput = form.querySelector('[data-pagination]');
@@ -1007,7 +1013,7 @@ const filterFilters = function(form){
 }
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
-
+  
   let formData = new FormData(form);
   let queryString = new URLSearchParams(formData).toString();
   let columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');