@iamproperty/components 3.7.9-beta-2 → 3.8.0

package/assets/ts/modules/dialogs.ts

@@ -3,6 +3,20 @@ import { createEmbed } from "./youtubevideo";
 
 const extendDialogs = (body) => {
 
+  Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
+
+    let parent = dialog.closest('.dialog__wrapper');
+
+    if(!parent){
+        
+      dialog.removeAttribute('open');
+      dialog.showModal();
+      dialog.focus();
+
+      createDialog(dialog);
+    }
+  });
+
   // Dialogs/modals
   body.addEventListener('click', (event) => {
 
@@ -15,20 +29,6 @@ const extendDialogs = (body) => {
       
       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();
@@ -77,7 +77,12 @@ const extendDialogs = (body) => {
     
     // 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]');
+      let dialog = event.target.closest('dialog[open]');
+
+      // Small fix to make sure the dialog isn't a dialog inside of a dialog.
+      var style = window.getComputedStyle(dialog);
+      if(style.display === 'contents')
+        dialog = dialog.parentNode.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')){
@@ -106,8 +111,8 @@ const extendDialogs = (body) => {
       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(document.querySelector('*:not([data-keep-open]) > dialog[open]') && document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover)
+        document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
 
       // Remove active class from exiting active buttons
       Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement,index) => {
@@ -152,8 +157,14 @@ const extendDialogs = (body) => {
       if(popoverBottom > windowPos){
 
         let currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style')+' ' : '';
-
         popover.setAttribute('style',currentStyle+`transform: translate(0, calc(-100% - 4rem))`);
+
+        // Check that the dialog doesn't go over the top of the page
+        boundingRec = popover.getBoundingClientRect();
+        let popoverTop = boundingRec.top - window.scrollY;
+
+        if(popoverTop < 100)
+          popover.removeAttribute('style');
       }
 
       window.dataLayer = window.dataLayer || [];
@@ -181,11 +192,25 @@ const extendDialogs = (body) => {
 
 export const 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)
+  }
+
   // Multi dialog
   if(dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
     createMultiFormDialog(dialog);
   }
 
+  // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
   if(!dialog.querySelector(':scope > .mh-lg') && !dialog.classList.contains('dialog--multi')){
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
@@ -205,37 +230,101 @@ export const createDialog = (dialog) => {
 
   // Create close button is needed
   if(!dialog.querySelector(':scope > button:first-child'))
-    dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
+    dialog.insertAdjacentHTML('afterbegin', `<button class="dialog__close">Close</button>`);
 
 }
 
-const createMultiFormDialog = (dialog) => {
+export 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>`;
+    buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}" tabindex="-1">${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>`;
+      btnWrapper.innerHTML += `<button data-title="${fieldsets[index-1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous 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>`;
+      btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
 
     if(index == fieldsets.length - 1)
-      btnWrapper.innerHTML += `<button class="btn btn-primary mb-0">Submit</button>`;
+      btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
   });
 
-  dialog.innerHTML = `<div class="steps bg-primary">${buttons}</div>${dialog.innerHTML}`;
+  dialog.insertAdjacentHTML('afterbegin',`<div class="steps bg-primary">${buttons}</div>`);
 
 
-  dialog.addEventListener('click', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
-      const button = event.target.closest('button[data-title]');
+  // Open the fieldset with an error inside
+  let validatedFieldsets = Array.from(dialog.querySelectorAll('fieldset.was-validated'));
+  for (let i = 0; i < validatedFieldsets.length; i++) {
+
+    let fieldset = validatedFieldsets[i];
+    let fieldsetID = fieldset.getAttribute('data-title');
+    
+    if(fieldset.querySelector('.is-invalid')){
+
+      Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
+
+        element.classList.add('active');
+      });
+
+      break;
+    }
+    else {
+
+      Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
+
+        element.classList.add('valid');
+      });
+    }
+  }
+
+  // Prevent the bubble messages
+  dialog.addEventListener('invalid', (function () {
+    return function (e) {
+      e.preventDefault();
+    };
+  })(), true);
+
+
+  function validateFieldset(button){
+
+    const currentFieldset = dialog.querySelector(`fieldset.active`) ? dialog.querySelector(`fieldset.active`) : dialog.querySelector(`fieldset[data-title]`);
+    const currentFieldsetID = currentFieldset.getAttribute('data-title');
+    let isFieldsetValid = true;
+
+    currentFieldset.classList.add('was-validated');
+
+    Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
+
+      if (!input.checkValidity())
+        isFieldsetValid = false;
+    });
+
+    // If valid mode to next field set
+    if(!isFieldsetValid){
+
+      Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+
+        element.classList.remove('valid');
+      });
+    }
+    else {
+
+      Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+
+        element.classList.add('valid');
+      });
+    }
+
+    // Allow the previous button to navigate
+    if(isFieldsetValid || !button.hasAttribute('data-next')){
+
       const fieldset = dialog.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
       const step = dialog.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
 
@@ -248,6 +337,44 @@ const createMultiFormDialog = (dialog) => {
 
       step.classList.add('active');
       fieldset.classList.add('active');
+    }
+
+
+    let fieldsetCount = Array.from(dialog.querySelectorAll(`fieldset`)).length;
+    let validFieldsetCount = Array.from(dialog.querySelectorAll(`fieldset.valid`)).length;
+
+    // update the progress bar
+    dialog.style.setProperty('--progress', `${(validFieldsetCount/(fieldsetCount - 1) * 100)}%`);
+  }
+
+  // remove error messages from server
+  dialog.addEventListener('keydown', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('button')){
+
+      const button = event.target.closest('button');
+
+      if(event.keyCode == 13){
+        
+        event.preventDefault();
+        validateFieldset(button);
+      }
+    }
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('input')){
+      const input = event.target.closest('input');
+
+      input.classList.remove('is-invalid');
+
+
+    }
+  });
+
+
+  dialog.addEventListener('click', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
+
+      const button = event.target.closest('button[data-title]');
+      validateFieldset(button);
     };
     return null
   });

package/assets/ts/modules/table.ts

@@ -453,15 +453,26 @@ export const filterTable = (table, form, wrapper) => {
     });
   }
 
-  //Display the filter count
+  // Display the filter count
   Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
     element.innerHTML = '';
+    element.parentNode.classList.remove('hover');
   });
 
-  if(Object.keys(filters).length) {
-      
+  let filterCount = 0;
+  Object.values(filters).forEach((filter, index) => {
+    
+    if(typeof filter == "object" && Object.values(filter).length)
+      filterCount += Object.values(filter).length;
+    else
+      filterCount++;
+  });
+
+  if(filterCount) {
+    
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
-      element.innerHTML += `(${Object.keys(filters).length})`;
+      element.innerHTML += `(${filterCount})`;
+      element.parentNode.classList.add('hover');
     });
   }
   
@@ -829,12 +840,23 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
   Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
     element.innerHTML = '';
+    element.parentNode.classList.remove('hover');
   });
 
-  if(Object.keys(filters).length) {
-      
+  let filterCount = 0;
+  Object.values(filters).forEach((filter, index) => {
+
+    if(typeof filter == "object" && Object.values(filter).length)
+      filterCount += Object.values(filter).length;
+    else
+      filterCount++;
+  });
+
+  if(filterCount) {
+    
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
-      element.innerHTML += `(${Object.keys(filters).length})`;
+      element.innerHTML += `(${filterCount})`;
+      element.parentNode.classList.add('hover');
     });
   }
 

package/assets/ts/tests/dialogs.spec.js

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import { createMultiFormDialog } from "../modules/dialogs";
+
+
+describe('createMultiFormDialog', () => {
+  let dialog;
+
+  beforeEach(() => {
+    // Create a fresh dialog element before each test
+    dialog = document.createElement('dialog');
+    dialog.innerHTML = `
+      <fieldset data-title="fieldset1">
+        <input type="text" >
+      </fieldset>
+      <fieldset data-title="fieldset2">
+        <input type="text" >
+      </fieldset>
+    `;
+  });
+
+  test('it initializes buttons and fieldsets', () => {
+    createMultiFormDialog(dialog);
+
+    expect(dialog.querySelectorAll('.steps').length).toEqual(1);
+  });
+
+  test('it validates fieldsets and updates classes', () => {
+    createMultiFormDialog(dialog);
+
+    // Simulate a button click to trigger validation
+    const button = dialog.querySelector('button[data-title="fieldset1"]');
+    button.click();
+
+    // Add your assertions here to check if validation and class updates are working as expected
+    expect(dialog.querySelectorAll('fieldset[data-title="fieldset1"].active').length).toEqual(1);
+  });
+
+  test('it navigates to the next fieldset', () => {
+    createMultiFormDialog(dialog);
+
+    // Simulate a button click to navigate to the next fieldset
+    const button = dialog.querySelector('button[data-title="fieldset2"]');
+    button.click();
+
+    // Add your assertions here to check if navigation to the next fieldset is working
+    expect(dialog.querySelectorAll('fieldset[data-title="fieldset2"].active').length).toEqual(1);
+  });
+
+});

package/assets/ts/tests/filterlist.spec.ts

@@ -16,7 +16,7 @@ const listHTML = `
 
 describe('addDataAttributes', () => {
 
-  let list = document.createElement('ul');
+  let list = document.createElement('div');
   list.innerHTML = listHTML;
 
   filterTheList(list, "Lucas");