@iamproperty/components 7.5.1--beta5 → 7.5.1--beta7

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

@@ -1,5 +1,8 @@
 function createAppliedFilters(container, filters): void {
-  function addFilterButton(filters, input, notSet = true): void | boolean {
+
+  const dialog = container.closest('dialog');
+
+  const addFilterButton = (filters, input, setFilter = false): void | boolean => {
     let shouldRemoveFilter = false;
     let inputName = input.getAttribute('name');
 
@@ -26,7 +29,7 @@ function createAppliedFilters(container, filters): void {
     filter.classList.add('filter');
     filter.classList.add('tag');
 
-    if (notSet) filter.classList.add('tag--not-set');
+    if (!setFilter) filter.classList.add('tag--not-set');
 
     filter.setAttribute('data-name', inputName);
 
@@ -55,7 +58,7 @@ function createAppliedFilters(container, filters): void {
           childFilter.classList.add('filter');
           childFilter.classList.add('tag');
 
-          if (notSet) filter.classList.add('tag--not-set');
+          if (!setFilter) filter.classList.add('tag--not-set');
 
           childFilter.setAttribute('data-name', name);
           childFilter.innerHTML = filterText.replace('$value', element.value);
@@ -82,107 +85,140 @@ function createAppliedFilters(container, filters): void {
         parentFilter.classList.add('filter');
         parentFilter.classList.add('tag');
 
-        if (notSet) filter.classList.add('tag--not-set');
+        if (!setFilter) filter.classList.add('tag--not-set');
 
         parentFilter.setAttribute('data-name', inputName);
         parentFilter.innerHTML = newFilterText;
         filters.appendChild(parentFilter);
       }
     }
-  }
+  };
 
-  // check for inputs on load
-  Array.from(
-    container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
-  ).forEach((input) => {
-    addFilterButton(filters, input, false);
-  });
-
-  const dialog = container.closest('dialog');
+  const checkForChecked = (setFilter = false) => {
 
-  if (dialog) {
-    const observer = new MutationObserver(function (event) {
-      if (event[0].attributeName == 'open') {
-        Array.from(
-          container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
-        ).forEach((input) => {
-          addFilterButton(filters, input, false);
-        });
-      }
-    });
-
-    observer.observe(dialog, { attributes: true });
-  }
-
-  container.addEventListener('tags-set', function () {
     filters.innerHTML = '';
     Array.from(
-      container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
+      container.querySelectorAll('input:is([type="checkbox"],[type="radio"]):checked, input:not([type="checkbox"], [type="radio"])')
     ).forEach((input) => {
-      addFilterButton(filters, input, false);
-    });
-  });
-
-  // check for change in displayed inputs
-  Array.from(
-    container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
-  ).forEach((input) => {
-    input.addEventListener('change', function (event) {
-      if (!container.hasAttribute('data-keep-same')) addFilterButton(filters, input);
-
-      event.stopPropagation(); // Don't allow the below event handler to trigger
+      addFilterButton(filters, input, setFilter);
     });
-  });
+  };
+  // Check for which inputs have been set, setting true sets the filter as set (blue)
+  checkForChecked(true);
 
-  // Some change event aren't getting triggered above so this event listener on the container will pick them up. This happens with input in modals
+  // Create the main event listener for the component watching for inputs to change
   container.addEventListener('change', function (event) {
     if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')) {
+
+      const setFilter = container.closest('dialog') ? false : true;
+
       const input = event.target.closest('input[data-filter-text]');
-      if (!container.hasAttribute('data-keep-same')) addFilterButton(filters, input);
+
+      if (!container.hasAttribute('data-keep-same') && !container.querySelector('dialog')) 
+        addFilterButton(filters, input, setFilter);
+
+      if(setFilter){
+        
+        const event = new CustomEvent('update');
+        container.parentElement.closest('iam-applied-filters')?.dispatchEvent(event);
+      }
     }
   });
 
+
+  const filterClicked = (filter) => {
+    const names = filter.getAttribute('data-name').split(',');
+
+    for (let t = 0; t < names.length; t++) {
+      const name = names[t];
+      let selector = `[name="${name}"]`;
+
+      if (name.match(/\[(.*)\]/)) {
+        //const newName = name.replace(/\[(.*)\]/, `[]`);
+        const value = name.replace(/.*\[(.*)\]/, `$1`);
+        selector = `[value="${value}"]`;
+      }
+
+      const inputs = container.querySelectorAll(selector);
+
+      for (let i = 0; i < inputs.length; i++) {
+        const input = inputs[i];
+
+        if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox') {
+          input.value = '';
+        } else {
+          input.checked = false;
+        }
+      }
+    }
+
+    filter.remove();
+    checkForChecked();
+  };
+
+
+
+
+
   filters.addEventListener(
     'click',
     function (event) {
       if (event && event.target instanceof HTMLElement && event.target.closest('.filter')) {
         const filter = event.target.closest('.filter');
-        const names = filter.getAttribute('data-name').split(',');
+        const filterName = filter.getAttribute('data-name');
+
+        filterClicked(filter);
+
+        // If you clicked on the filter on the parent component we want to tell the child component which filter to copy
+        if(container.querySelector('dialog iam-applied-filters')) {
+          const event = new CustomEvent('filter',{'detail':filterName });
+          container.querySelector('dialog iam-applied-filters').dispatchEvent(event);
+        }
+      }
+    },
+    false
+  );
 
-        for (let t = 0; t < names.length; t++) {
-          const name = names[t];
-          let selector = `[name="${name}"]`;
+  // Listen for 
+  container.addEventListener('filter', (e) => {
 
-          if (name.match(/\[(.*)\]/)) {
-            //const newName = name.replace(/\[(.*)\]/, `[]`);
-            const value = name.replace(/.*\[(.*)\]/, `$1`);
-            selector = `[value="${value}"]`;
-          }
+    const filter = container.shadowRoot.querySelector(`[data-name="${e.detail}"]`);
 
-          const inputs = container.querySelectorAll(selector);
+    filterClicked(filter);
+  });
 
-          for (let i = 0; i < inputs.length; i++) {
-            const input = inputs[i];
+  container.addEventListener('set-filters', (e) => {
 
-            if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox') {
-              input.value = '';
+    checkForChecked(true);
+  });
 
-              const event = new Event('force');
-              if (!container.hasAttribute('data-nosubmit')) input.closest('form').dispatchEvent(event);
-            } else {
-              input.checked = false;
+  if(dialog){
+    // Force the filters inside of the dialog to effect the filters above
+    container.querySelector('.btn-primary')?.addEventListener('click', (e) => {
 
-              const event = new Event('force');
-              if (!container.hasAttribute('data-nosubmit')) input.closest('form').dispatchEvent(event);
-            }
-          }
-        }
+      const event = new CustomEvent('update');
+      
+      if(container.parentElement.closest('iam-applied-filters'))
+        container.parentElement.closest('iam-applied-filters').dispatchEvent(event);
 
-        filter.remove();
+      if(container.parentElement && container.parentElement.closest('iam-applied-filters') && !container.parentElement.closest('iam-applied-filters').closest('dialog')){
+
+        const event = new CustomEvent('set-filters');
+        container.parentElement.closest('iam-applied-filters').dispatchEvent(event);
       }
-    },
-    false
-  );
+
+
+      checkForChecked(true);
+
+      if(!container.querySelector('.btn-primary').hasAttribute('command')){
+        
+        dialog.close();
+        const event = new Event('close');
+        dialog.dispatchEvent(event);
+      }
+
+    });
+  }
 }
 
 export default createAppliedFilters;

package/assets/ts/modules/card.module.ts

@@ -25,10 +25,15 @@ export const setupCard = (cardComponent: any): void => {
 
   // Inset the HTML for the data total or icon fallback
   if (cardComponent.hasAttribute('data-total')) {
-    cardBody.insertAdjacentHTML(
-      'beforeend',
-      `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`
-    );
+
+    if(!cardBody?.querySelector('.card__total'))
+      cardBody.insertAdjacentHTML(
+        'beforeend',
+        `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`
+      );
+    else {
+      cardBody?.querySelector('.card__total')?.innerHTML = cardComponent.getAttribute('data-total');
+    }
   } else if (cardComponent.querySelector('[slot="total-icon"]')) {
     cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
   }

package/assets/ts/modules/dialogs.ts

@@ -23,6 +23,10 @@ const extendDialogs = (body): void => {
         : button.getAttribute('data-filter');
       const dialog = document.querySelector(`dialog#${modalID}`);
 
+      if(document.querySelector(`iam-modal#${modalID}`)) return false;
+
+      if(document.querySelector(`iam-multi-step-modal#${modalID}`)) return false;
+
       createDialog(dialog);
 
       // Open the modal!
@@ -232,7 +236,7 @@ const extendDialogs = (body): void => {
 
 export const createDialog = (dialog): void => {
   // 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.querySelector('iam-multi-step')) {
+  if (dialog && !dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')) {
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
     const dialogContent = dialog.querySelector('.mh-lg');
@@ -248,7 +252,7 @@ export const createDialog = (dialog): void => {
   }
 
   // Create close button is needed
-  if (!dialog.querySelector(':scope > button:first-child'))
+  if (dialog && !dialog.querySelector(':scope > button:first-child'))
     dialog.insertAdjacentHTML('afterbegin', `<button class="dialog__close">Close</button>`);
 };
 

package/assets/ts/modules/password.ts

@@ -0,0 +1,82 @@
+import hibpCheck from '../vendor/hibp.js';
+
+export const changeType = function (element: Element): void {
+    const buttonEle = element.querySelector('button')
+    const associatedInput = element?.parentNode?.querySelector('input');
+
+    element.addEventListener('click', (event) => {
+      const currentType = associatedInput.type;
+
+      const newType = currentType === 'password' ? 'text' : 'password';
+      const isPasswordType = currentType === 'password';
+
+      associatedInput.setAttribute('type', newType);
+      associatedInput.setAttribute('data-password-type', isPasswordType);
+
+      if (element.hasAttribute('data-alt-class')) {
+        const newClass = element.getAttribute('data-alt-class');
+        element.setAttribute('data-alt-class', buttonEle.getAttribute('class'));
+        buttonEle.setAttribute('class', newClass);
+      }
+    
+    });
+}
+
+
+export const checkPWDStrength = (input, check = 'no'): void => {
+  const pwdChecker = document.getElementById(input.getAttribute('data-strength-checker'));
+  const password = input.value;
+  const minChars = input.hasAttribute('minlength') ? input.getAttribute('minlength') : 12;
+
+  let strength = 1;
+  const strengthName = ['Very weak', 'Weak', 'Average', 'Strong', 'Very strong'];
+  let extraMsg = '';
+
+  //has number
+  if (password.match(/(?=.*[0-9])/)) strength += 1;
+  // has special character
+  if (password.match(/(?=.*[!,%,&,#,$,^,*,?,_,~,<,>,])/)) strength += 1;
+  // has lowercase alpha
+  if (password.match(/(?=.*[a-z])/)) strength += 1;
+  // has uppercase alpha
+  if (password.match(/(?=.*[A-Z])/)) strength += 1;
+
+  if (password.length < minChars) {
+    strength = 1;
+    extraMsg = `(must be at least ${minChars} characters.)`;
+  }
+
+  // if the strength is above weak and above the minimum length do some kind of api call to check if its in a list of passwords
+
+  if (strength >= 3 && check == 'no') {
+    hibpCheck(password, input);
+
+    input.addEventListener('hibpCheck', function (event) {
+      checkhibpCheck(event, input);
+    });
+
+    function checkhibpCheck(event, input): void {
+      if (event.detail) {
+        // found
+        checkPWDStrength(input, 'danger');
+      } else {
+        // not found
+        checkPWDStrength(input, 'success');
+      }
+
+      input.removeEventListener('hibpCheck', checkhibpCheck); // Succeeds
+    }
+  } else if (strength >= 3 && check == 'danger') {
+    strength = 3;
+    extraMsg = `(this password is very common)`;
+  }
+
+  if (pwdChecker) {
+    if (strength <= 3) pwdChecker.classList.add('invalid-feedback');
+    else pwdChecker.classList.remove('invalid-feedback');
+
+    pwdChecker.setAttribute('data-strength', strength);
+    pwdChecker.innerHTML = `Password strength: ${strengthName[strength - 1]} ${extraMsg}`;
+  }
+};
+

package/assets/ts/modules/table.ts

@@ -1257,6 +1257,14 @@ export const setupAjaxTable = (component, table, form, pagination): void => {
     event.preventDefault();
   });
 
+  form.addEventListener('change', (event) => {
+    
+    if(!event.target.closest('iam-modal')){
+      
+      loadAjaxTable(component, table, form, pagination);
+    }
+  });
+
   if (actionbar) {
     actionbar.addEventListener('change', (event) => {
       loadAjaxTable(component, table, form, pagination);
@@ -1278,7 +1286,6 @@ export const setupAjaxTable = (component, table, form, pagination): void => {
       component.dispatchEvent(submitEvent);
 
       loadAjaxTable(component, table, form, pagination);
-      console.log('hello');
     });
   }
 
@@ -1372,12 +1379,12 @@ export const loadAjaxTable = async function (component, table, form, pagination)
     })
       .then((response) => response.json())
       .then((response) => {
-        const schema = form.hasAttribute('data-schema') ? form.getAttribute('data-schema') : 'data';
-        const totalNumberSchema = form.hasAttribute('data-schema-total')
-          ? form.getAttribute('data-schema-total')
+        const schema = component.hasAttribute('data-schema') ? component.getAttribute('data-schema') : 'data';
+        const totalNumberSchema = component.hasAttribute('data-schema-total')
+          ? component.getAttribute('data-schema-total')
           : 'meta.total';
-        const currentPageSchema = form.hasAttribute('data-schema-page')
-          ? form.getAttribute('data-schema-page')
+        const currentPageSchema = component.hasAttribute('data-schema-page')
+          ? component.getAttribute('data-schema-page')
           : 'meta.current_page';
 
         const totalNumber = resolvePath(response, totalNumberSchema, 15);

package/assets/ts/scripts.ts

@@ -2,7 +2,7 @@
 import * as helpers from './modules/helpers';
 import extendDialogs from './modules/dialogs';
 import createDataLayer from './modules/data-layer';
-import extendInputs from './modules/inputs';
+
 import createDynamicEvents from './modules/dynamicEvents';
 import videoSupport from './modules/videos';
 
@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', async (): void => {
   helpers.addGlobalEvents(document.body);
 
   extendDialogs(document.body);
-  extendInputs(document.body);
+  
 
   videoSupport(document.body);
 

package/assets/ts/tests/helpers.spec.ts

@@ -3,6 +3,7 @@ import { isValidPostcode } from '../modules/helpers';
 
 describe('The postcode helper function', () => {
   
+  // #region valid pattern variations
   test('should return true when testing the postcode "ne33hd"', () => {
     
     expect(isValidPostcode("ne33hd")).toBe(true);
@@ -29,10 +30,108 @@ describe('The postcode helper function', () => {
     
     expect(isValidPostcode(" NE33HD ")).toBe(true);
   });
+  // #endregion
+  
+  // #region Valid postcodes
+  
+  test('should return true when testing the postcode "NE3 5DP"', () => {
+    
+    expect(isValidPostcode("NE3 5DP")).toBe(true);
+  });
+
+  test('should return true when testing the postcode "CW11 1SX"', () => {
+    
+    expect(isValidPostcode("CW11 1SX")).toBe(true);
+  });
+
+  
+  test('should return true when testing the postcode "NE21 6RB"', () => {
+    
+    expect(isValidPostcode("NE21 6RB")).toBe(true);
+  });
+
+  
+  test('should return true when testing the postcode "SW1A 1AA"', () => {
+    
+    expect(isValidPostcode("SW1A 1AA")).toBe(true);
+  });
 
-  // false results
+  
+  test('should return true when testing the postcode "M1 1AE"', () => {
+    
+    expect(isValidPostcode("M1 1AE")).toBe(true);
+  });
+
+  // #endregion
+
+  // incorrect pattern
   test('should return false when testing the postcode "NE3"', () => {
     
     expect(isValidPostcode("NE3")).toBe(false);
   });
+
+  // #region Invalid postcodes correct pattern
+
+  test('should return false when testing the postcode "Q1A 4BT"', () => {
+    
+    expect(isValidPostcode("Q1A 4BT")).toBe(true);
+  });
+
+  test('should return false when testing the postcode "AB0 7RE"', () => {
+    
+    expect(isValidPostcode("AB0 7RE")).toBe(true);
+  });
+
+  test('should return false when testing the postcode "LN0A 4JP"', () => {
+    
+    expect(isValidPostcode("LN0A 4JP")).toBe(true);
+  });
+
+  test('should return false when testing the postcode "WS0 9ND"', () => {
+    
+    expect(isValidPostcode("WS0 9ND")).toBe(true);
+  });
+
+  test('should return false when testing the postcode "X8 2HR"', () => {
+    
+    expect(isValidPostcode("X8 2HR")).toBe(true);
+  });
+
+  // #endregion
+
+  // #region Invalid postcodes incorrect pattern
+
+  test('should return false when testing the postcode "ZZ2 TYD"', () => {
+    
+    expect(isValidPostcode("ZZ2 TYD")).toBe(false);
+  });
+
+
+  test('should return false when testing the postcode "ABC EFG"', () => {
+    
+    expect(isValidPostcode("ABC EFG")).toBe(false);
+  });
+
+
+  test('should return false when testing the postcode "1234 567"', () => {
+    
+    expect(isValidPostcode("1234 567")).toBe(false);
+  });
+
+
+  test('should return false when testing the postcode "23A PP2"', () => {
+    
+    expect(isValidPostcode("23A PP2")).toBe(false);
+  });
+
+
+  test('should return false when testing the postcode "NE3 H23"', () => {
+    
+    expect(isValidPostcode("NE3 H23")).toBe(false);
+  });
+
+
+  // #endregion
+
+
 });