@iamproperty/components 3.7.6 → 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/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);