@iamproperty/components 3.7.1 → 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

@@ -58,13 +58,34 @@ thead {
   }
 }
 
+// Error messages
+tr td[colspan="100%"]:first-child:last-child span {
+
+  max-width: rem(624);
+  font-weight: bold;
+  padding: 3rem;
+  text-align: center;
+  display: block;
+  color: var(--colour-heading);
+
+  @include media-breakpoint-up(md) {
+    max-width: rem(1048);
+  }
+}
+
 @container (width >= 60em) {
   thead {
 
     th {
       white-space: nowrap;
-        min-width: #{$td-mw};
-      }
+      min-width: #{$td-mw};
+    }
+    th.th--mw-md {
+      min-width: rem(240);
+    }
+    th.th--mw-lg {
+      min-width: rem(360);
+    }
   }
 }
 
@@ -79,30 +100,12 @@ 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);
     }
   }
 
-  /*
-  :is(td, th) {
-      
-    border-top: var(--border-width) solid currentColor;
-    @include var(border-color,--colour-border);
-  }
-
-
-  &:first-child :is(td, th){
-    border-top: var(--border-width) solid currentColor;
-    @include var(border-color,--colour-primary);
-  }
-
-  &:last-child :is(td, th){
-    border-bottom: var(--border-width) solid currentColor;
-    @include var(border-color,--colour-border);
-  }
-  */
 }
 
 .border-0 > table,
@@ -123,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;
@@ -246,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;
       }
@@ -312,7 +316,7 @@ table.border-0 {
       display: none !important;;
     }
   }
-  .table--cta:not(.table--fullwidth) tr td:last-child {
+  .table--cta:not(.table--fullwidth) tr td:not(:first-child):last-child {
     display: block!important;
     position: static;
     width: 100%;
@@ -331,44 +335,48 @@ table.border-0 {
 // #endregion
 
 // #region CTA column
-@include media-breakpoint-up(sm) {
+@container (width > 23.4375em) {
 
   :is(iam-table) {
     
     --cta-width: 8rem;
   }
 
+  :is(iam-table).table--loading {
+    
+    --cta-width: 1.5rem!important;
+  }
+
   :not(iam-table).table--cta {
     
     position: relative;
     margin-right: calc(var(--cta-width) - 1.5rem);
-
-    
   }
 
   .table--cta .table__wrapper {
     overflow-y: hidden;
     margin-bottom: 0;
   }
-    
-  .table--cta {
+  
+  .table--cta:not(.table--loading):has(tr:first-child td:first-child:last-child) {
+    padding-right: calc(var(--wrapper-padding) + 1.5rem);
+  }
+  .table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) {
 
-    tr > *:last-child {
+    tr > *:not(:first-child):last-child {
 
       position: absolute;
       left: 100%;
       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);
       text-align: right;
       background: linear-gradient(90deg, transparent 0%, var(--colour-canvas-2) 1.25rem);
 
-      //border-bottom: var(--border-width) solid var(--colour-border);
-
       &:after {
         bottom: 0;
         left: 0;
@@ -381,18 +389,19 @@ table.border-0 {
 
       a {
         white-space: nowrap;
+        padding-right: 0.2rem;
       }
     }
 
-    tr > th:last-child {
+    tr > th:not(:first-child):last-child {
       --colour-border: var(--colour-primary);
     }
 
-    tbody tr:hover > *:last-child {
+    tbody tr:hover > *:not(:first-child):last-child {
       background: linear-gradient(90deg, transparent 0%, var(--hover-background) 1.25rem);
     }
 
-    thead tr > *:last-child {
+    thead tr > *:not(:first-child):last-child {
       margin-top: 1px;
     }
   }
@@ -470,11 +479,27 @@ table:not(.table--filtered):not(.table--ajax) tbody tr:nth-child(15) ~ tr {
 
 // Loading via ajax
 .table--loading {
-  opacity: 0.8;
   pointer-events: none;
+  position: relative;
 
-  &.table--cta thead th:last-child {
-    opacity: 0;
+  table {
+    min-height: 20rem;
+    opacity: 0.5;
+  }
+
+  &::after {
+    content: "Loading...";
+    position: absolute;
+    top: rem(100);
+    left: 50%;
+    transform: translate(-50%,0);
+    font-weight: bold;
+    color: var(--colour-heading);
+    font-size: 1.5rem;
+    text-shadow: 0px 0px 10px var(--colour-canvas-2);
+    padding-inline: 2rem;
+    text-shadow: 0px 0px 10px var(--colour-canvas-2);
+    background: radial-gradient(var(--colour-canvas-2), transparent);
   }
 }
 

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;
@@ -284,8 +282,8 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       if(!forms.includes(parentForm))
         forms.push(parentForm);
 
-      if(!fields.includes(mimicInput))
-        fields.push(mimicInput);
+      if(!fields.includes(mimicField))
+        fields.push(mimicField);
       
     });
   });
@@ -297,7 +295,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     const updateMimicInput = function(){
       let mimickedAlready = [];
       let formData = new FormData(parentForm);
-
+      
       let i = 1;
       for (const [key, value] of formData) {
 
@@ -316,6 +314,19 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         const event = new Event("force");
         form.dispatchEvent(event);
       }
+
+
+      // Check for empties
+      for (const field of fields) {
+        if(!formData.has(field) && parentForm.querySelector(`[name="${field}"]`)){
+          
+          document.querySelector(`[data-mimic="${field}"]`).value = "";
+          
+          const event = new Event("force");
+          form.dispatchEvent(event);
+        }
+      }
+
     }
 
     parentForm.addEventListener('force', (event) => {
@@ -767,10 +778,22 @@ 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)
   }
 }
 
-export const loadAjaxTable = function (table, form, pagination, wrapper){
+
+
+export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
   const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
 
@@ -778,89 +801,144 @@ export const loadAjaxTable = function (table, form, pagination, wrapper){
   let queryString = new URLSearchParams(formData).toString();
   let columns = table.querySelectorAll('thead tr th');
   let tbody = table.querySelector('tbody');
+  let ajaxURL = form.getAttribute('data-ajax');
 
   wrapper.classList.add('table--loading');
-
-  fetch(form.getAttribute('data-ajax')+'?'+queryString, {
-    method: 'get',
-    credentials: 'same-origin',
-    headers: new Headers({
-      'Content-Type': 'application/json',
-      Accept: 'application/json',
-      'X-Requested-With': 'XMLHttpRequest'
+  
+  // Setup controller vars if not already set
+  if(!window.controller)
+    window.controller = [];
+
+  // Abort if controller already present for this url
+  if(window.controller[ajaxURL])
+    window.controller[ajaxURL].abort();
+
+  // Create a new controller so it can be aborted if new fetch made
+  window.controller[ajaxURL] = new AbortController();
+  const { signal } = controller[ajaxURL];
+
+  try {
+    await fetch(ajaxURL+'?'+queryString, {
+      signal: signal,
+      method: 'get',
+      credentials: 'same-origin',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        'X-Requested-With': 'XMLHttpRequest'
+      })
     })
-  }).then((response) => response.json()).then((response) => {
+    .then((response) => response.json()).then((response) => {
 
-    let schema = form.hasAttribute('data-schema') ? form.getAttribute('data-schema') : 'data';
-    let totalNumberSchema = form.hasAttribute('data-schema-total') ? form.getAttribute('data-schema-total') : 'meta.total';
-    let currentPageSchema = form.hasAttribute('data-schema-page') ? form.getAttribute('data-schema-page') : 'meta.current_page';
+      let schema = form.hasAttribute('data-schema') ? form.getAttribute('data-schema') : 'data';
+      let totalNumberSchema = form.hasAttribute('data-schema-total') ? form.getAttribute('data-schema-total') : 'meta.total';
+      let currentPageSchema = form.hasAttribute('data-schema-page') ? form.getAttribute('data-schema-page') : 'meta.current_page';
 
-    let totalNumber = resolvePath(response, totalNumberSchema, 1);
-    let currentPage = resolvePath(response, currentPageSchema, 1);
-    let data = resolvePath(response, schema);
-    
-    if (data) {
+      let totalNumber = resolvePath(response, totalNumberSchema, 1);
+      let currentPage = resolvePath(response, currentPageSchema, 1);
+      let data = resolvePath(response, schema);
+      let emptyMsg = wrapper.hasAttribute('data-empty-msg') ? wrapper.getAttribute('data-empty-msg') : "No results found";
+      
+      if (data) {
 
-      tbody.innerHTML = '';
+        tbody.innerHTML = '';
 
-      data.forEach((row, index) => {
+        data.forEach((row, index) => {
 
-        var table_row = document.createElement('tr');
+          var table_row = document.createElement('tr');
 
-        columns.forEach((col, index) => {
+          columns.forEach((col, index) => {
 
-          let cellOutput = '';
-          var table_cell  = document.createElement('td');
-          // Add some data to help with the mobile layout design
-          table_cell.setAttribute('data-label',col.innerText);
+            let cellOutput = '';
+            var table_cell  = document.createElement('td');
+            // Add some data to help with the mobile layout design
+            table_cell.setAttribute('data-label',col.innerText);
 
-          if(col.getAttribute('data-output')){
-            var cellTemplate = col.getAttribute('data-output');
-            // Use a regex to replace {var} with actual values from the json data
-            cellOutput = cellTemplate.replace( new RegExp(/{(.*?)}/,"gm"), function(matched){ return resolvePath(row, matched.replace('{','').replace('}','')); });
-          }
+            if(col.getAttribute('data-output')){
+              var cellTemplate = col.getAttribute('data-output');
+              // Use a regex to replace {var} with actual values from the json data
+              cellOutput = cellTemplate.replace( new RegExp(/{(.*?)}/,"gm"), function(matched){ return resolvePath(row, matched.replace('{','').replace('}','')); });
+            }
 
-          if(col.hasAttribute('data-transform')){
+            // If an output array is defined then the content is going to made of of multiple values from an array
+            if(col.hasAttribute('data-output-array')){
+              
+              var cellTemplate = col.getAttribute('data-output');
+              let arrValue = resolvePath(row, cellTemplate.replace('{','').replace('}',''));
 
-            const transforms = JSON.parse(col.getAttribute('data-transform'));
-            cellOutput = transforms[cellOutput];
+              cellOutput = "";
+              arrValue.forEach((rowValue, i) => {
 
-            if(!cellOutput && col.hasAttribute('data-default'))
-              cellOutput = col.getAttribute('data-default');
-          }
+                let cellTemplateValue = col.getAttribute('data-output-array');
+                let cellOutputValue = "";
+
+                // If we need to transform some of the data
+                if(col.hasAttribute('data-output-array-property') && col.hasAttribute('data-output-array-transform')){
+
+                  const propertyValue = resolvePath(rowValue, col.getAttribute('data-output-array-property'));
+                  const transforms = JSON.parse(col.getAttribute('data-output-array-transform'));
+                  const transformValue = transforms[propertyValue];
+
+                  cellOutputValue = cellTemplateValue.replace(`{${col.getAttribute('data-output-array-property')}}`,transformValue);
+                }
+
+                cellOutputValue = cellOutputValue.replace( new RegExp(/{(.*?)}/,"gm"), function(matched){ return resolvePath(rowValue, matched.replace('{','').replace('}','')); });
+                cellOutput += cellOutputValue;
+              });
+            }
+
+
+            if(col.hasAttribute('data-transform')){
+
+              const transforms = JSON.parse(col.getAttribute('data-transform'));
+              cellOutput = transforms[cellOutput];
+
+              if(!cellOutput && col.hasAttribute('data-default'))
+                cellOutput = col.getAttribute('data-default');
+            }
+
+            table_cell.innerHTML = cellOutput;
+            table_row.appendChild(table_cell)
+          });
 
-          table_cell.innerHTML = cellOutput;
-          table_row.appendChild(table_cell)
+          tbody.appendChild(table_row)
         });
 
-        tbody.appendChild(table_row)
-      });
+        createSearchDataList(table, form)
+        // Add data to the pagination 
+        wrapper.setAttribute('data-total', parseInt(totalNumber));
+        wrapper.setAttribute('data-page', parseInt(currentPage));
+        wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
 
-      createSearchDataList(table, form)
-      // Add data to the pagination 
+        makeTableFunctional(table, form, pagination, wrapper);
+        createPaginationButttons(wrapper, pagination);
 
-      wrapper.setAttribute('data-total', parseInt(totalNumber));
-      wrapper.setAttribute('data-page', parseInt(currentPage));
-      wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
+        if(parseInt(totalNumber) == 0){
+          tbody.innerHTML = `<tr><td colspan="100%"><span>${emptyMsg}</span></td></tr>`;
+        }
 
-      makeTableFunctional(table, form, pagination, wrapper);
-      createPaginationButttons(wrapper, pagination);
+        wrapper.classList.remove('table--loading');
 
-      if(response.data.length == 0){
-        tbody.innerHTML = '<tr><td colspan="100%"><span class="h4 m-0">No results found</span></td></tr>';
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({
+          "event": "Ajax table loaded",
+          "url": ajaxURL,
+          "formData": queryString
+        });
+      }
+      else {
+        tbody.innerHTML = '<tr><td colspan="100%"><span>Error loading table</span></td></tr>';
       }
 
-      wrapper.classList.remove('table--loading');
-    }
-    else {
-      tbody.innerHTML = '<tr><td colspan="100%"><span class="h6 m-0">Error loading table</span></td></tr>';
-    }
-  });
-
-  if(form.hasAttribute('data-ajax-post')){
-    const http = new XMLHttpRequest()
-    http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
-    http.send()
+      // Pass post data back to the page
+      if(form.hasAttribute('data-ajax-post')){
+        const http = new XMLHttpRequest()
+        http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
+        http.send();
+      }
+    });
+  } catch (error) {
+    console.log(error);
   }
 }