@iamproperty/components 3.7.5 → 3.7.7

package/assets/sass/_corefiles.scss

@@ -23,6 +23,8 @@
 @use "components/pagination.scss";
 @use "components/accordion.scss";
 
+@use "components/card-global.scss";
+
 // Bootstrap elements
 @import "../bootstrap/scss/_transitions.scss";
 @import "../bootstrap/scss/_badge.scss";

package/assets/sass/components/card-global.scss

@@ -0,0 +1,20 @@
+// #region card with a flag 
+iam-card.card--flag {
+  position: relative;
+  
+  &:after {
+    content: "\f024";
+    font-family: "Font Awesome 6 Pro";
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    font-size: rem(16);
+    line-height: 1;
+    height: rem(16);
+    width: rem(16);
+    display: inline-block;
+    font-weight: normal;
+    color: var(--colour, var(--colour-primary));
+  }
+}
+// #endregion

package/assets/sass/components/table.scss

@@ -508,14 +508,17 @@ table {
     [data-content="medium"],
     [data-content="high"],
     [data-content="unknown"],
+    [data-content="due"],
     [data-content="overdue"],
     [data-content="incomplete"],
     [data-content="requires approval"],
+    [data-content="upcoming"],
     [data-content="approval required"],
     [data-content="warning"],
     [data-content="verified"],
     [data-content="not started"],
     [data-content="to do"],
+    [data-content="on track"],
     [data-content="completed"],
     [data-content="complete"],
     .alert-status:not([data-content="0"]):not([data-content=""]):not(:empty)
@@ -569,27 +572,34 @@ table {
     color: var(--colour-muted);
   }
 
-  :is([data-content="overdue"],[data-content="incomplete"]):after {
+  :is([data-content="overdue"],[data-content="due"],[data-content="incomplete"]):after {
 
     content: "\f024";
     font-weight: light;
     color: var(--colour-danger);
   }
 
-  :is([data-content="not started"],[data-content="to do"]):after {
+  :is([data-content="not started"],[data-content="to do"],[data-content="on track"]):after {
 
     content: "\f024";
     font-weight: light;
     color: var(--colour-muted);
   }
 
-  :is([data-content="requires approval"],[data-content="approval required"],[data-content="warning"]):after {
+  :is([data-content="requires approval"],[data-content="approval required"],[data-content="upcoming"]):after {
 
     content: "\f024";
     font-weight: light;
     color: var(--colour-warning);
   }
 
+  :is([data-content="warning"]):after {
+
+    content: "\f071";
+    font-weight: light;
+    color: var(--colour-warning);
+  }
+
   :is([data-content="verified"],[data-content="completed"],[data-content="complete"]):after {
     
     content: "\f00c";

package/assets/ts/components/card/README.md

@@ -21,3 +21,4 @@ The card component needs to be wrapped with a link or a button, this is required
 - Adding a class of **.colour-danger** will add a left hand border with the danger colour (See status card). This works with all of the theme
 - Adding a class of **.border-o** will remove the box-shadow of the card and make some minor sizing adjustments. 
 - Adding a class like **.colour-warning** will update the colour of the left berder for the card. The theme colours will be avialable to use.
+- Adding a class of **.card--flag** will add a card to the top right corner. 

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

@@ -10,14 +10,6 @@ class iamTable extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
     const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
 
-    const isCTA = this.classList.contains('table--cta');
-    const isExportable = this.classList.contains('table--export');
-    
-    let classList = this.classList.toString();
-
-    classList = classList.replace('table--cta','');
-    classList = classList.replace('table--loading','');
-
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -35,12 +27,11 @@ class iamTable extends HTMLElement {
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    ${isCTA ? '<div class="table--cta">' : ''}
-    <div class="table__wrapper ${classList}">
+    <div class="table--cta">
+    <div class="table__wrapper">
       <slot></slot>
     </div>
-    ${isCTA ? '</div>' : ''}
-    ${isExportable ? '<button class="link" type="button" data-export>Export table as CSV</button>' : ''}
+    </div>
     <div class="table__pagination"></div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -50,6 +41,7 @@ class iamTable extends HTMLElement {
 	connectedCallback() {
 
     const params = new URLSearchParams(window.location.search)
+
     // Set default attributes
     if(!this.hasAttribute('data-total'))
       this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
@@ -65,10 +57,23 @@ class iamTable extends HTMLElement {
 
     this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
 
+    // Update table__wrapper class
+    let classList = this.classList.toString();
+
+    classList = classList.replace('table--cta','');
+    classList = classList.replace('table--loading','');
+    this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
+
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
     this.pagination = this.shadowRoot.querySelector('.table__pagination');
 
+    // Remove table CTA
+    const isCTA = this.classList.contains('table--cta');
+
+    if(!isCTA)
+      this.shadowRoot.querySelector('.table--cta').classList.remove('table--cta');
+
     // Set events on the filter table
     this.form = document.createElement('form');
     if(this.hasAttribute('data-filterby')){

package/assets/ts/modules/table.ts

@@ -11,7 +11,7 @@ export const addDataAttributes = (table) => {
   colRows.forEach((row, index) => {
 
     const cells = Array.from(row.querySelectorAll('th, td'));
-    const statuses = ['0','low','medium','high','unknown','n/a','pending','verified','overdue','incomplete','complete','completed','approval required','requires approval','to do','not started','warning','error'];
+    const statuses = ['0','low','medium','high','unknown','n/a','pending','verified','due','overdue','incomplete','complete','completed','approval required','upcoming','requires approval','to do','on track','not started','warning','error'];
     
     cells.forEach((cell, cellIndex) => {
 
@@ -191,12 +191,17 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       formSubmit();
     }
 
-    if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter][data-no-ajax]')){ // Allow for input fields to filter the current results without a new ajax call
+
+      filterTable(table, form, wrapper);
+      createPaginationButttons(wrapper,pagination);
+      populateDataQueries(table,form);
+    }
+    else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')){
       
       formSubmit();
     }
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')){
+    else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')){
       
       formSubmit();
     }
@@ -371,6 +376,9 @@ export const sortTable = (table, form, savedTableBody) => {
 
     let rowIndex = tableRow.querySelector('td[data-label="'+sortBy+'"], th[data-label="'+sortBy+'"]').textContent.trim();
 
+    if(tableRow.querySelector('[data-label="'+sortBy+'"] .td__content'))
+      rowIndex = tableRow.querySelector('[data-label="'+sortBy+'"] .td__content').textContent.trim();
+
     // If a predefined order set replace the search term with an ordered numeric value so it can be sorted
     if(orderArray.length && orderArray.includes(rowIndex)){
       rowIndex = orderArray.indexOf(rowIndex);
@@ -781,12 +789,8 @@ export const makeTableFunctional = function(table, form, pagination, wrapper){
   // Work out the largest width of the CTA's in the last column
   if(wrapper && wrapper.classList.contains('table--cta')){
 
-    if(!wrapper.hasAttribute('data-cta-width')){
-        
-      const largestWidth = getLargestLastColWidth(table);
-      wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
-      wrapper.setAttribute("data-cta-width", `${largestWidth}rem`);
-    }
+    const largestWidth = getLargestLastColWidth(table);
+    wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
 
     function outputsize() {
 
@@ -919,6 +923,7 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
         wrapper.setAttribute('data-page', parseInt(currentPage));
         wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
 
+        filterTable(table, form, wrapper);
         makeTableFunctional(table, form, pagination, wrapper);        
         createPaginationButttons(wrapper, pagination);