@iamproperty/components 3.7.6 → 3.7.8--beta

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/sass/foundations/links.scss

@@ -105,11 +105,15 @@ a:where(:not(.btn):not(:has(.card)):not(:has(iam-card))),
   background: none;
   padding:0;
   display: flex;
-  margin: 0 0 rem(24) 0;
+
+  &:not([class*="col"]){
+    margin: 0 0 rem(24) 0;
+  }
+
   outline: none!important;
   text-decoration: none;
 
-  &:not(.d-inline-block){
+  &:not(.d-inline-block):not([class*="col"]){
       
     width: 100%;
   }

package/assets/sass/foundations/reboot.scss

@@ -55,18 +55,18 @@ body {
 }
 
 // #region scrollbars
-:is(div,form,fieldset)::-webkit-scrollbar {
+:is(div,form,fieldset,textarea)::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
  
-:is(div,form,fieldset)::-webkit-scrollbar-track {
+:is(div,form,fieldset,textarea)::-webkit-scrollbar-track {
   background-color: #f1f1f1;
   border-top: 4px solid var(--colour-canvas-2);
   border-left: 4px solid var(--colour-canvas-2);
 }
  
-:is(div,form,fieldset)::-webkit-scrollbar-thumb {
+:is(div,form,fieldset,textarea)::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
   width: 6px;
   border-top: 4px solid var(--colour-canvas-2);

package/assets/ts/bundle.ts

@@ -3,6 +3,7 @@
 import * as helpers from '../js/modules/helpers'
 import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
 //import accordion from './modules/accordion'
 import testimonial from '../js/modules/testimonial'
@@ -27,6 +28,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
   extendDialogs(document.body);
+  extendInputs(document.body);
   //helpers.checkElements(document.body);
 
   if (!window.customElements.get(`iam-header`))

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

@@ -53,30 +53,53 @@ class iamCard extends HTMLElement {
 
     parentNode.setAttribute('tabindex','-1');
     
+
     if(parentNode.matches('label[for]')){
 
-      let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+      let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;
         
       if(isChecked)
-        card.classList.add('active');
+        card.classList.add('checked');
+      else
+        card.classList.remove('checked');
     }
 
     card.addEventListener('click', (event) => {
 
       if(parentNode.matches('label[for]')){
 
-        let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+        event.stopPropagation();
+        event.preventDefault();
+
+        const input = document.getElementById(parentNode.getAttribute('for'))
+
+        const inputName = input.getAttribute('name');
+        const inputID = input.getAttribute('id');
+
+        const inputs = Array.from(document.querySelectorAll(`[name="${inputName}"]:not([id="${inputID}"])`));
+    
+        inputs.forEach((input, index) => {
           
-        if(!isChecked)
-          card.classList.add('active');
-        else
-          card.classList.remove('active');
-      }
-      else {
+          const otherCard = document.querySelector(`[for="${input.getAttribute('id')}"] iam-card`);
+          
+          otherCard.dispatchEvent(new Event('inactive'));
+        });
+
         parentNode.click();
+        let isChecked = input.checked
+          
+        if(isChecked)
+          card.classList.add('checked');
+        else
+          card.classList.remove('checked');
+
       }
     });
 
+    this.addEventListener('inactive', (event) => {
+      card.classList.remove('checked');
+    });
+
     card.addEventListener('keydown', (event) => {
 
       switch(event.keyCode)
@@ -85,12 +108,31 @@ class iamCard extends HTMLElement {
           case 13:
             if(parentNode.matches('label[for]')){
 
-              let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+              event.stopPropagation();
+              event.preventDefault();
+      
+              const input = document.getElementById(parentNode.getAttribute('for'))
+      
+              const inputName = input.getAttribute('name');
+              const inputID = input.getAttribute('id');
+      
+              const inputs = Array.from(document.querySelectorAll(`[name="${inputName}"]:not([id="${inputID}"])`));
+          
+              inputs.forEach((input, index) => {
+                
+                const otherCard = document.querySelector(`[for="${input.getAttribute('id')}"] iam-card`);
+                
+                otherCard.dispatchEvent(new Event('inactive'));
+              });
+      
+              parentNode.click();
+              let isChecked = input.checked
                 
-              if(!isChecked)
-                card.classList.add('active');
+              if(isChecked)
+                card.classList.add('checked');
               else
-                card.classList.remove('active');
+                card.classList.remove('checked');
+      
             }
             else {
               parentNode.click();

package/assets/ts/dynamic.ts

@@ -3,6 +3,7 @@
 import * as helpers from '../js/modules/helpers'
 import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
 import table from '../js/modules/table'
 //import accordion from './modules/accordion'
@@ -63,6 +64,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addGlobalEvents(document.body);
   //helpers.checkElements(document.body);
   extendDialogs(document.body);
+  extendInputs(document.body);
 
   
   if (!window.customElements.get(`iam-notification`))

package/assets/ts/flat-components.ts

@@ -3,6 +3,7 @@
 import * as helpers from '../js/modules/helpers'
 import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
 import * as tableModule from './modules/table'
 import accordion from './modules/accordion'
@@ -25,6 +26,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addGlobalEvents(document.body);
   //helpers.checkElements(document.body);
   extendDialogs(document.body);
+  extendInputs(document.body);
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {

package/assets/ts/modules/dialogs.ts

@@ -86,7 +86,8 @@ const extendDialogs = (body) => {
 
         if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
 
-          dialog.close()
+          if(!event.target.closest('input[type="radio"]')) // Weird bug when interacting with radio input fields within dialogs cuases it to close
+            dialog.close()
           
           window.dataLayer = window.dataLayer || [];
           window.dataLayer.push({

package/assets/ts/modules/inputs.ts

@@ -0,0 +1,88 @@
+// @ts-nocheck
+const extendInputs = (body) => {
+
+  document.addEventListener("load", function() {
+
+    console.log(Array.from(document.querySelectorAll('input[maxlength]')))
+    // maxlength counter init
+    Array.from(document.querySelectorAll('input')).forEach((input,index) => {
+      let wrapper = input.parentElement;
+      setMaxlengthVars(input,wrapper);
+    });
+  });
+
+  body.addEventListener('input', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('input,textarea,select')){
+
+      const input = event.target.closest('input,textarea,select');
+      const wrapper = input.parentElement;
+
+      // Output the color hex
+      if(input.hasAttribute('type') && input.getAttribute('type') == 'color')
+        input.nextElementSibling.value = input.value;
+
+      if(input.hasAttribute('maxlength') && input.nextElementSibling)
+        input.nextElementSibling.setAttribute("data-count", input.value.length);
+    }
+  });
+
+  body.addEventListener('change', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('select')){
+
+      const select = event.target.closest('select');
+
+      console.log(select)
+
+      if(select.hasAttribute('data-change-type') && select.hasAttribute('data-input')){
+
+        const input = document.getElementById(select.getAttribute('data-input'));
+        const newType = select.value;
+        changeType(input,newType);
+      }
+    }
+  });
+
+  body.addEventListener('click', (event) => {
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-type][data-input]:not(select)')){
+
+      const button = event.target.closest('[data-change-type]');
+      const input = document.getElementById(button.getAttribute('data-input'));
+      const newType = button.getAttribute('data-change-type');
+      button.setAttribute('data-change-type',input.getAttribute('type'));
+
+      changeType(input,newType);
+
+      if(button.hasAttribute('data-alt-class')){
+        const newClass = button.getAttribute('data-alt-class');
+        button.setAttribute('data-alt-class',button.getAttribute('class'));
+        button.setAttribute('class',newClass);
+      }
+    }
+  });
+}
+
+export const setMaxlengthVars = (input) => {
+  let wrapper = input.parentElement;
+  let maxlength = input.getAttribute('maxlength')
+  
+  wrapper.style.setProperty("--maxlength", maxlength);
+
+
+  let span = input.nextElementSibling;
+
+  if(!span || (span && span.classList.contains('invalid-feedback'))){
+
+    span = document.createElement('span');
+    wrapper.insertBefore(span, input.nextSibling);
+  }
+
+  span.setAttribute('data-count',input.value.length);
+}
+
+export const changeType = (input,type) => {
+
+  input.setAttribute('type',type);
+}
+
+export default extendInputs;

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);