@iamproperty/components 3.7.2 → 3.7.3

package/assets/sass/components/dialog.scss

@@ -510,6 +510,17 @@ dialog::backdrop {
 }
 
 // Show hide the indidual or multiple label
+.dialog__wrapper :is(.empty, .individual) {
+  display: none;
+}
+
+@supports selector(:has(*)) {
+
+  .dialog__wrapper :is(.empty, .individual) {
+    display: inline;
+  }
+}
+
 .dialog__wrapper:has(input:checked) .empty,
 .dialog__wrapper:not(:has(input:checked)) .individual,
 .dialog__wrapper:has(input:checked ~ input:checked) .individual,

package/assets/sass/components/pagination.scss

@@ -76,6 +76,7 @@
 
   .page-item {
     display: none;
+    overflow: visible;
   }
 
   .page-item:is(:first-child, :last-child, :nth-child(2), :nth-last-child(2)) {
@@ -122,7 +123,7 @@
 
     &:after {
       left: auto;
-      right: calc(100% + #{rem(4)} + 2px);
+      right: calc(100% + #{rem(4)} + 1px);
     }
   }
 

package/assets/sass/components/table.scss

@@ -100,7 +100,7 @@ tbody tr {
 
     th,td {
       background: var(--hover-background);
-      color: var(--colour-primary-theme);
+      //color: var(--colour-primary-theme);
       --colour-link: var(--colour-primary-theme);
       --colour-hover: var(--colour-primary-theme);
     }
@@ -126,6 +126,7 @@ table.border-0 {
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
   border-radius: rem(8);
   margin-bottom: rem(32);
+  overflow: hidden;
 
   &:before {
     display: none!important;
@@ -249,7 +250,7 @@ table.border-0 {
         top: 2.5rem;
       }
 
-      tbody tr:first-child td:not(:first-child) {
+      tbody tr td:not(:first-child) {
         border-top: var(--border-width) solid currentColor!important;
         border-color: var(--colour-border)!important;
       }
@@ -334,7 +335,7 @@ table.border-0 {
 // #endregion
 
 // #region CTA column
-@include media-breakpoint-up(sm) {
+@container (width > 23.4375em) {
 
   :is(iam-table) {
     
@@ -369,7 +370,7 @@ table.border-0 {
       top: auto;
       z-index: 3;
       background: transparent;
-      width: calc(var(--cta-width) + 1.5rem);
+      width: calc(var(--cta-width) + 1rem);
       padding-left: rem(40);
       margin-left: rem(-40);
       min-height: var(--row-height);
@@ -388,6 +389,7 @@ table.border-0 {
 
       a {
         white-space: nowrap;
+        padding-right: 0.2rem;
       }
     }
 

package/assets/ts/components/table/table.component.ts

@@ -15,6 +15,7 @@ class iamTable extends HTMLElement {
     let classList = this.classList.toString();
 
     classList = classList.replace('table--cta','');
+    classList = classList.replace('table--loading','');
 
     const template = document.createElement('template');
     template.innerHTML = `

package/assets/ts/modules/table.ts

@@ -43,20 +43,18 @@ export const getLargestLastColWidth = (table) => {
  
   let largestWidth = 0;
 
-  Array.from(table.querySelectorAll('tr')).forEach((row, index) => {
+  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
 
     let htmlStyles = window.getComputedStyle(document.querySelector('html'));
     let lastColChild = row.querySelector(':scope > *:last-child > *:first-child');
 
     if(lastColChild){
 
+      lastColChild.classList.add('text-nowrap');
       let responsiveWidth = lastColChild.offsetWidth/parseFloat(htmlStyles.fontSize);
-      responsiveWidth += 1.5;
+      responsiveWidth += 1.7;
       largestWidth = largestWidth > responsiveWidth ? largestWidth : responsiveWidth;
     }
-
-    let rowHeight = row.offsetHeight/parseFloat(htmlStyles.fontSize);
-    row.style.setProperty("--row-height", `${rowHeight}rem`);
   });
 
   return largestWidth;
@@ -780,6 +778,16 @@ export const makeTableFunctional = function(table, form, pagination, wrapper){
 
     const largestWidth = getLargestLastColWidth(table);
     wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
+
+    function outputsize() {
+
+      Array.from(table.querySelectorAll('tr')).forEach((row, index) => {
+        let rowHeight = row.offsetHeight;
+        row.style.setProperty("--row-height", `${rowHeight}px`);
+      });
+    }
+    
+    new ResizeObserver(outputsize).observe(table)
   }
 }