@iamproperty/components 3.5.0 → 3.7.0

package/assets/ts/dynamic.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
 // Modules
 import * as helpers from '../js/modules/helpers'
+import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
 import nav from '../js/modules/nav'
 import table from '../js/modules/table'
@@ -16,7 +17,7 @@ const options = {
   rootMargin: '50px',
   threshold: 0.1
 }
-const componentExt = ".component.js";
+const componentExt = ".component.min.js";
 
 // Load components - Each component will load once the first of its type has been loaded
 components.forEach((component) => {
@@ -59,6 +60,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
   //helpers.checkElements(document.body);
+  extendDialogs(document.body);
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {

package/assets/ts/flat-components.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
 // Modules
 import * as helpers from '../js/modules/helpers'
+import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
 import nav from '../js/modules/nav'
 import * as tableModule from './modules/table'
@@ -22,6 +23,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
   //helpers.checkElements(document.body);
+  extendDialogs(document.body);
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {

package/assets/ts/html.d.ts

@@ -1,4 +1,10 @@
 declare module '*.html' {
   const value: string;
   export default value
-}
+}
+
+type WindowWithDataLayer = Window & {
+  dataLayer: Record<string, any>[];
+};
+
+declare const window: WindowWithDataLayer;

package/assets/ts/modules/applied-filters.ts

@@ -103,7 +103,7 @@ function createAppliedFilters(container,filters) {
 
       let input = event.target.closest('input[data-filter-text]');
 
-      addFilterButton (filters, input)
+      addFilterButton (filters, input);
     };
     
   }, false);
@@ -125,13 +125,19 @@ function createAppliedFilters(container,filters) {
         }
 
         let inputs = container.querySelectorAll(selector);
+
         for(var i=0;i<inputs.length;i++){
           let input = inputs[i];
 
+
           if(input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox')
-            inputs[i].value = "";
+            input.value = "";
+          else {
+            input.checked = false;
 
-          inputs[i].checked = false;
+            var event = new Event('force');
+            input.closest('form').dispatchEvent(event);
+          }
         }
       }
 

package/assets/ts/modules/dialogs.ts

@@ -0,0 +1,237 @@
+// @ts-nocheck
+import { createEmbed } from "./youtubevideo"; 
+
+const extendDialogs = (body) => {
+
+  // Dialogs/modals
+  body.addEventListener('click', (event) => {
+
+    // Modal
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
+
+      const button = event.target.closest('[data-modal]');
+      const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
+      const dialog = document.querySelector(`dialog#${modalID}`);
+      
+      createDialog(dialog);
+
+      
+      // Prevent the user from escaping the model when transactional
+      if(dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') && !dialog.classList.contains('dialog--multi')) {
+        dialog.addEventListener("cancel", (e) => {
+          e.preventDefault();
+        });        
+      }
+
+      // Create the video embed
+      let videoButton = dialog.querySelector('.youtube-embed a');
+      if (videoButton){
+        createEmbed(videoButton)
+      }
+
+      // Open the modal!
+      dialog.showModal();
+
+      dialog.focus();
+
+      console.log(dialog.querySelector('button'));
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "openModal",
+        "id": modalID
+      });
+    };
+  
+    // Close modal
+    if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')){
+      const dialog = event.target.closest('dialog[open]');
+
+      event.preventDefault();
+      dialog.close()
+        
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "closeModal",
+        "id": dialog.getAttribute('id')
+      });
+    }
+
+    // Track default close buttons
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[formmethod="dialog"]')){
+      const dialog = event.target.closest('dialog[open]');
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "closeModal",
+        "id": dialog.getAttribute('id')
+      });
+    }
+    
+    // Close the modal when clicked on the backdrop
+    if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')){
+      const dialog = event.target.closest('dialog[open]');
+      
+      // Dont allow the backdrop to be clicked when transactional
+      if(!dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') || dialog.classList.contains('dialog--multi')){
+
+        const dialogDimensions = dialog.getBoundingClientRect()
+
+        if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
+
+          dialog.close()
+          
+          window.dataLayer = window.dataLayer || [];
+          window.dataLayer.push({
+            "event": "closeModal",
+            "id": dialog.getAttribute('id')
+          });
+        }
+      }
+    }
+
+    // Popover
+    if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
+
+      // Close existing open popover
+
+      let btn = event.target.closest('.dialog__wrapper > button');
+      let parent = event.target.closest('.dialog__wrapper > button').parentNode;
+      let dataEvent = "openPopover"
+      let popover = parent.querySelector(':scope > dialog');
+      
+
+      if(document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
+        document.querySelector('dialog[open]').close();
+
+
+      if(popover.hasAttribute('open')){
+        
+        popover.close();
+        dataEvent = "closePopover"
+
+        popover.removeAttribute('style');
+        btn.classList.remove('active');
+      }
+      else {
+        
+        popover.show();
+        btn.classList.add('active');
+      
+        var position = btn.getBoundingClientRect();
+        let topOffset = position.top;
+        let leftOffset = position.left;
+
+        if(btn.closest('iam-table')){
+
+          let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+
+          topOffset -= container.top;
+          leftOffset -= container.left;
+
+        }
+
+        if(popover.classList.contains('dialog--fix')){
+          popover.setAttribute('style',`position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`)
+        }
+      }
+      
+      // When the dialog is fixed it could dip under the viewport
+      // Lets check the dimensions and transform it to appear above
+      let boundingRec = popover.getBoundingClientRect();
+      let popoverBottom = boundingRec.bottom - window.scrollY;
+      let windowPos = window.innerHeight - window.scrollY;
+      if(popoverBottom > windowPos){
+
+        let currentStyle = popover.getAttribute('style');
+
+        popover.setAttribute('style',currentStyle+`transform: translate(0, calc(-100% - 4rem))`);
+      }
+
+      window.dataLayer = window.dataLayer || [];
+      
+      window.dataLayer.push({
+        "event": dataEvent,
+        "id": btn.textContent
+      });
+    };
+  });
+
+  return null
+}
+
+export const createDialog = (dialog) => {
+
+  // Multi dialog
+  if(dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
+    createMultiFormDialog(dialog);
+  }
+
+  if(!dialog.querySelector(':scope > .mh-lg') && !dialog.classList.contains('dialog--multi')){
+    dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
+
+    let dialogContent = dialog.querySelector('.mh-lg');
+    let titleElement = dialog.querySelector('.mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)');
+
+    if(titleElement){
+        
+      let optionalElement = titleElement.previousSibling;
+
+      dialogContent.before(titleElement);
+      
+      if(optionalElement)
+        titleElement.before(optionalElement);
+    }
+  }
+
+  // Create close button is needed
+  if(!dialog.querySelector(':scope > button:first-child'))
+    dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
+
+}
+
+const createMultiFormDialog = (dialog) => {
+  let buttons = "";
+  let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
+  fieldsets.forEach((fieldset,index) => {
+    buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}">${fieldset.getAttribute('data-title')}</button>`;
+
+    const btnWrapper = document.createElement("div");
+    btnWrapper.classList.add('btn--wrapper');
+    fieldset.appendChild(btnWrapper);
+    
+
+    if(index != 0)
+      btnWrapper.innerHTML += `<button data-title="${fieldsets[index-1].getAttribute('data-title')}" class="btn btn-secondary mb-0" type="button">Previous</button>`;
+
+    if(index != fieldsets.length - 1)
+      btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" type="button">Next</button>`;
+
+    if(index == fieldsets.length - 1)
+      btnWrapper.innerHTML += `<button class="btn btn-primary mb-0">Submit</button>`;
+  });
+
+  dialog.innerHTML = `<div class="steps bg-primary">${buttons}</div>${dialog.innerHTML}`;
+
+
+  dialog.addEventListener('click', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
+      const button = event.target.closest('button[data-title]');
+      const fieldset = dialog.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
+      const step = dialog.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
+
+      Array.from(dialog.querySelectorAll('button')).forEach((button, index) => {
+        button.classList.remove('active');
+      });
+      Array.from(dialog.querySelectorAll('fieldset')).forEach((button, index) => {
+        button.classList.remove('active');
+      });
+
+      step.classList.add('active');
+      fieldset.classList.add('active');
+    };
+    return null
+  });
+}
+
+export default extendDialogs;

package/assets/ts/modules/helpers.ts

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import { createEmbed } from "./youtubevideo"; 
-
 /** 
  * Global helper functions to help maintain and enhance framework elements.
  * @module Helpers 
@@ -49,7 +47,7 @@ export const addGlobalEvents = (body) => {
 
   addEventListener("popstate", (event) => {
 
-    if(event.state.type == "pagination"){
+    if(event && event.state.type && event.state.type == "pagination"){
       let form = document.querySelector(`#${event.state.form}`);
       let pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
       
@@ -62,118 +60,6 @@ export const addGlobalEvents = (body) => {
     }
   });
 
-  // Dialogs/modals
-  document.addEventListener('click', (event) => {
-
-    // Modal
-    if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
-
-      const button = event.target.closest('[data-modal]');
-      const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
-      const dialog = document.querySelector(`dialog#${modalID}`);
-      
-      // Create close button is needed
-      dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
-      
-      let videoButton = dialog.querySelector('.youtube-embed a');
-
-      if (videoButton){
-        createEmbed(videoButton)
-      }
-
-      dialog.showModal();
-
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({
-        "event": "openModal",
-        "id": modalID
-      });
-    };
-    // Close modal
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')){
-      const dialog = event.target.closest('dialog[open]');
-
-      event.preventDefault();
-      dialog.close()
-        
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({
-        "event": "closeModal",
-        "id": dialog.getAttribute('id')
-      });
-    }
-    
-    if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')){
-      const dialog = event.target.closest('dialog[open]');
-      const dialogDimensions = dialog.getBoundingClientRect()
-      if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
-        dialog.close()
-        
-        window.dataLayer = window.dataLayer || [];
-        window.dataLayer.push({
-          "event": "closeModal",
-          "id": dialog.getAttribute('id')
-        });
-      }
-    }
-
-    // Popover
-    if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
-
-      // Close existing open popover
-
-      let btn = event.target.closest('.dialog__wrapper > button');
-      let parent = event.target.closest('.dialog__wrapper > button').parentNode;
-      let dataEvent = "openPopover"
-      let popover = parent.querySelector(':scope > dialog');
-      
-
-      if(document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
-        document.querySelector('dialog[open]').close();
-
-
-      if(popover.hasAttribute('open')){
-        
-        popover.close();
-        dataEvent = "closePopover"
-
-        popover.removeAttribute('style');
-        btn.classList.remove('active');
-      }
-      else {
-        
-        popover.show();
-        btn.classList.add('active');
-      
-        var position = btn.getBoundingClientRect();
-        let topOffset = position.top;
-        let leftOffset = position.left;
-
-        if(btn.closest('iam-table')){
-
-          let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
-
-          topOffset -= container.top;
-          leftOffset -= container.left;
-
-        }
-
-        if(popover.classList.contains('dialog--fix')){
-          popover.setAttribute('style',`position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`)
-        }
-      }
-        
-
-      window.dataLayer = window.dataLayer || [];
-      
-      window.dataLayer.push({
-        "event": dataEvent,
-        "id": btn.textContent
-      });
-    };
-  });
-
   return null
 }
 

package/assets/ts/modules/table.ts

@@ -23,8 +23,8 @@ export const addDataAttributes = (table) => {
         let headingText = tempDiv.textContent || tempDiv.innerText || "";
         cell.setAttribute('data-label',headingText);
 
-        if(heading.hasAttribute('class'))
-          cell.setAttribute('class',heading.getAttribute('class'))
+        if(heading.hasAttribute('data-td-class'))
+          cell.setAttribute('class',heading.getAttribute('data-td-class'))
 
         if(heading.hasAttribute('data-format')){
           cell.setAttribute('data-format',heading.getAttribute('data-format'))
@@ -67,10 +67,21 @@ export const createMobileButton = (table) => {
   if(table.closest('.table--fullwidth'))
     return false;
 
+  if(table.querySelectorAll('thead tr th').length < 4)
+    return false;
+
   Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
     let firstCol = row.querySelector(':scope > :is(td,th):first-child');
+
     let colContent = firstCol.textContent;
-    firstCol.innerHTML =`<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
+
+    if(colContent != "")
+      firstCol.innerHTML =`<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
+    else {
+      let secondCol = row.querySelector(':scope > :is(td,th):nth-child(2)');
+      let secondColContent = secondCol.textContent;
+      secondCol.innerHTML =`<span class="td__content">${secondColContent}</span><button type="button" class="d-none">${secondColContent}</button>`;
+    }
   });
 }
 
@@ -140,6 +151,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     else {
       filterTable(table, form, wrapper);
       createPaginationButttons(wrapper,pagination);
+      populateDataQueries(table,form);
     }
   }
 
@@ -172,6 +184,11 @@ 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')){
+      
+      formSubmit();
+    }
+
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')){
       
       formSubmit();
@@ -223,6 +240,11 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
     formSubmit();
   });
+
+  form.addEventListener('force', (event) => {
+
+    formSubmit();
+  });
 }
 
 export const sortTable = (table, form, savedTableBody) => {
@@ -301,6 +323,15 @@ export const filterTable = (table, form, wrapper) => {
   let page = form.querySelector('[data-pagination]') ? parseInt(form.querySelector('[data-pagination]').value) : 1;
   let showRows = form.querySelector('[data-show]') ? parseInt(form.querySelector('[data-show]').value) : 15;
 
+  // Reset
+  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
+    row.classList.remove('filtered');
+    row.classList.remove('filtered--matched');
+    row.classList.remove('filtered--show');
+    
+    row.removeAttribute('data-filtered-by');
+  });
+
   // Filter
   let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
 
@@ -348,30 +379,16 @@ export const filterTable = (table, form, wrapper) => {
   Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
     element.innerHTML = '';
   });
+
   if(filters.length) {
       
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
       element.innerHTML += `(${filters.length})`;
     });
   }
-
-  // Stop function if no filters identified
-  if(!Object.keys(searches).length && !Object.keys(filters).length)
-    return false;
   
-  table.classList.add('table--filtered');
-
-  // Reset
-  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
-    row.classList.remove('filtered');
-    row.classList.remove('filtered--matched');
-    row.classList.remove('filtered--show');
-    
-    row.removeAttribute('data-filtered-by');
-  });
-
   // Filter the table
-
+  table.classList.add('table--filtered');
   for (const [key, filterValue] of Object.entries(filters)) {
     
     Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
@@ -483,8 +500,10 @@ export const filterTable = (table, form, wrapper) => {
     matched++;
 
     row.classList.add('filtered--matched');
+
     // pagination bit 
-    if(Math.ceil(matched/showRows) == parseInt(page))
+    let matchesPage = Math.ceil(matched/showRows);
+    if(matchesPage == parseInt(page))
       row.classList.add('filtered--show');
   });
 
@@ -495,7 +514,6 @@ export const filterTable = (table, form, wrapper) => {
     wrapper.setAttribute('data-show',showRows);
   }
 
-  populateDataQueries(table,form);
 }
 
 export const populateDataQueries = (table,form) => {
@@ -508,7 +526,7 @@ export const populateDataQueries = (table,form) => {
     let numberOfMatchedRows: 0;
 
     if(query == 'total'){
-      numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr:not(.filtered)').length : table.querySelectorAll('tbody tr').length;
+      numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr').length : table.querySelectorAll('tbody tr').length;
     }
     else if(!query.includes(' == ') && query.includes(' & ')){
 
@@ -548,7 +566,7 @@ export const populateDataQueries = (table,form) => {
     else {
 
       let queryParts = query.split(' == ');
-      numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr:not([class*="filtered"]) td[data-label="${queryParts[0]}"], tbody tr[data-filtered-by="${queryParts[0]}"] td[data-label="${queryParts[0]}"]`)).filter(function(element){
+      numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr.filtered--matched td[data-label="${queryParts[0]}"], tbody tr[data-filtered-by="${queryParts[0]}"] td[data-label="${queryParts[0]}"]`)).filter(function(element){
         return element.textContent === queryParts[1];
       }).length;
     }
@@ -575,9 +593,12 @@ export const addPaginationEventListeners = function(table, form, pagination, wra
       wrapper.setAttribute('data-page', newPage);
       form.dispatchEvent(new Event("submit"));
 
-      const url = new URL(location);
-      url.searchParams.set("page", newPage);
-      history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
+      if(table.hasAttribute('data-show-history')){
+          
+        const url = new URL(location);
+        url.searchParams.set("page", newPage);
+        history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
+      }
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){

package/assets/ts/modules/tabs.ts

@@ -46,15 +46,16 @@ export const setTabsEventHandlers = function(tabsElement: Element){
 
   let details = tabsElement.querySelectorAll(':scope > details');
   let summaries = tabsElement.querySelectorAll(':scope > details > summary');
-  let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+  let buttons = tabsElement.querySelectorAll(':scope .tabs__links > .link');
 
   if(tabsElement.shadowRoot)
-    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > .link');
 
   // Set the on click for the tab buttons, these will open the details box it matches too
   buttons.forEach((button) => {
 
     button.addEventListener("click", (e) => {
+
       e.preventDefault();
       buttons.forEach((buttonLoopItem) => {