@iamproperty/components 7.5.1--beta6 → 7.5.1--beta8

package/assets/ts/components/multi-step-modal/multi-step-modal.component.ts

@@ -0,0 +1,304 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-multi-step-modal');
+
+class iamMultiStepModal extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const loadCSS = `@import "${assetLocation}/css/components/multi-step-modal.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <dialog>
+      <button class="btn btn-compact btn-secondary fa-xmark-large" data-close>Close</button>
+      <div class="steps" parts="steps">
+      </div>
+      <slot></slot>
+    </dialog>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+    const originalDialog = this.querySelector('dialog');
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const MultiStepComponent = this;
+    const id = this.hasAttribute('id') ? this.getAttribute('id') : originalDialog?.getAttribute('id');
+    const dialog = this.shadowRoot?.querySelector('dialog');
+    
+    const closeButton = this.shadowRoot?.querySelector('[data-close]');
+    const button = document.querySelector(`[data-modal="${id}"]`);
+
+    const steps = this.shadowRoot.querySelector('.steps');
+    const form = this.querySelector('form');
+
+    const openModal = () => {
+      dialog?.showModal();
+      dialog?.focus();
+
+      const closeEvent = new CustomEvent('modal-opened', {
+        bubbles: true,
+        cancelable: true,
+        detail: { modalId: id },
+      });
+
+      this.dispatchEvent(closeEvent);
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: 'openModal',
+        id: id,
+      });
+    }
+
+    // Disable the original event 
+    originalDialog?.addEventListener('command', (e) => {
+
+      if (event.command == "show-modal") {
+        e.preventDefault();
+      }
+    });
+
+    document.addEventListener('click', (e) => {
+
+      if(e.target.matches(`[command="show-modal"][commandfor="${id}"]`) || e.target.matches(`[data-modal="${id}"]`)){
+        openModal();
+      }
+    });
+
+    button?.addEventListener('click', () => {
+      dialog?.showModal();
+      dialog?.focus();
+
+      const closeEvent = new CustomEvent('modal-opened', {
+        bubbles: true,
+        cancelable: true,
+        detail: { modalId: id },
+      });
+
+      this.dispatchEvent(closeEvent);
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: 'openModal',
+        id: id,
+      });
+    });
+
+    const closeModal = () => {
+      dialog?.close();
+      
+      const closeEvent = new CustomEvent('modal-closed', {
+        bubbles: true,
+        cancelable: true,
+        detail: { modalId: id },
+      });
+
+      this.dispatchEvent(closeEvent);
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: 'closeModal',
+        id: id,
+      });
+    }
+
+    closeButton?.addEventListener('click', () => {
+      closeModal();
+    });
+
+    const fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));
+
+    fieldsets.forEach((fieldset, index) => {
+      steps.insertAdjacentHTML(
+        'beforeend',
+        `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? 'active' : ''}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`
+      );
+
+      if (index === 0) fieldset.classList.add('active');
+
+      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" 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" data-next type="button">Next</button>`;
+
+      // Last fieldset
+      if (index == fieldsets.length - 1) {
+        if (form && form.querySelector(':scope > button[type="submit"]')) {
+          const existingButton = form.querySelector(':scope > button[type="submit"]');
+          existingButton.classList.add('mb-0');
+
+          btnWrapper.insertAdjacentElement('beforeend', existingButton);
+        } else
+          btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+      }
+    });
+
+    // Open the fieldset with an error inside
+    const validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));
+    for (let i = 0; i < validatedFieldsets.length; i++) {
+      const fieldset = validatedFieldsets[i];
+      const fieldsetID = fieldset.getAttribute('data-title');
+
+      if (fieldset.querySelector('.is-invalid')) {
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element) => {
+          element.classList.add('active');
+        });
+
+        break;
+      } else {
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element) => {
+          element.classList.add('valid');
+        });
+      }
+    }
+
+    // Prevent the bubble messages
+    MultiStepComponent.addEventListener(
+      'invalid',
+      (function () {
+        return function (e): any {
+          e.preventDefault();
+        };
+      })(),
+      true
+    );
+
+    function validateFieldset(button): void {
+      const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)
+        ? MultiStepComponent.querySelector(`fieldset.active`)
+        : MultiStepComponent.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) => {
+        if (!input.checkValidity()) isFieldsetValid = false;
+      });
+
+      // If valid mode to next field set
+      if (!isFieldsetValid) {
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
+          element.classList.remove('valid');
+        });
+
+        Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
+          (element) => {
+            element.classList.remove('valid');
+          }
+        );
+      } else {
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
+          element.classList.add('valid');
+        });
+
+        Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
+          (element) => {
+            element.classList.add('valid');
+          }
+        );
+      }
+
+      // Allow the previous button to navigate
+      if (isFieldsetValid || !button.hasAttribute('data-next')) {
+        const fieldset = MultiStepComponent.querySelector(
+          `fieldset[data-title="${button.getAttribute('data-title')}"]`
+        );
+        const step = MultiStepComponent.shadowRoot.querySelector(
+          `.steps button[data-title="${button.getAttribute('data-title')}"]`
+        );
+
+        Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button) => {
+          button.classList.remove('active');
+        });
+        Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button) => {
+          button.classList.remove('active');
+        });
+
+        step.classList.add('active');
+        fieldset.classList.add('active');
+      }
+
+      const fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;
+      const validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;
+
+      // update the progress bar
+      MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1)) * 100}%`);
+    }
+
+    // remove error messages from server
+    MultiStepComponent.addEventListener('keydown', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
+        const button = event.target.closest('button');
+
+        if (event.keyCode == 13 && button.getAttribute('type') != 'submit') {
+          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');
+
+        if (event.keyCode == 13) {
+          event.preventDefault();
+        }
+      }
+    });
+
+    MultiStepComponent.addEventListener('click', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')) {
+        const form = event.target.closest('form');
+        form.classList.add('was-validated');
+      }
+      return null;
+    });
+
+    MultiStepComponent.shadowRoot.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;
+    });
+
+    trackComponent(MultiStepComponent, 'iam-multi-step', []);
+  }
+
+  static get observedAttributes(): any {
+    return ['data-image'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+    switch (attrName) {
+      case 'data-total': {
+        if (this.shadowRoot.querySelector('.card__total'))
+          this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
+        break;
+      }
+    }
+  }
+}
+
+export default iamMultiStepModal;

package/assets/ts/components/pagination/pagination.component.ts

@@ -201,8 +201,6 @@ class iamPagination extends HTMLElement {
         if (oldVal && oldVal != newVal) {
           this.setup();
 
-          console.log(newVal);
-
           // Dispact the event for other components to use as triggers
           this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));
         }

package/assets/ts/components/password/password.component.ts

@@ -0,0 +1,118 @@
+import { trackComponentRegistered } from '../_global';
+import hibpCheck from '../../vendor/hibp.js';
+
+trackComponentRegistered('iam-password');
+
+class iamPassword extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/password.component.css";`;
+
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+      <style>
+      ${loadCSS}
+      </style>
+      <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+      <div class="wrapper">
+        <slot></slot>
+        <button type="button" class="suffix fa-solid fa-eye-slash" data-alt-class="suffix fa-solid fa-eye" aria-hidden="true"><span class="visually-hidden">Show password</span></button>
+      </div>
+      <span class="pwd-checker"></span>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+  
+    const input = this.querySelector('input');
+
+    const buttonEle = this.shadowRoot.querySelector('button')
+    const pwdChecker = this.shadowRoot?.querySelector('.pwd-checker')
+
+    // Switch icon and input type
+    buttonEle.addEventListener('click', (event) => {
+      const currentType = input.type;
+
+      const newType = currentType === 'password' ? 'text' : 'password';
+      const isPasswordType = currentType === 'password';
+
+      input.setAttribute('type', newType);
+      input.setAttribute('data-password-type', isPasswordType);
+
+      if (buttonEle.hasAttribute('data-alt-class')) {
+        const newClass = buttonEle.getAttribute('data-alt-class');
+        buttonEle.setAttribute('data-alt-class', buttonEle.getAttribute('class'));
+        buttonEle.setAttribute('class', newClass);
+      }
+    });
+
+
+    
+    input.addEventListener('input', (event) => {
+    
+
+      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) {
+        hibpCheck(password, input);
+
+        input.addEventListener('hibpCheck', function (event) {
+          checkhibpCheck(event, input);
+        });
+
+        function checkhibpCheck(event, input): void {
+          console.log(event.detail);
+          if (event.detail) {
+            // found
+            strength = 3;
+            extraMsg = `(this password is very common)`;
+            
+            pwdChecker.innerHTML = `Password strength: ${strengthName[strength - 1]} ${extraMsg}`;
+          } 
+
+          input.removeEventListener('hibpCheck', checkhibpCheck); // Succeeds
+        } 
+      }
+      
+      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}`;
+      
+    });
+    
+  }
+}
+
+export default iamPassword;

package/assets/ts/components/std-address-lookup/std-address-lookup.component.ts

@@ -1566,6 +1566,8 @@ class iamSTDAddressLookup extends HTMLElement {
     ${this.hasAttribute('data-error-msg') ? `data-error-msg='${this.getAttribute('data-error-msg')}'` : ''}
     ${this.hasAttribute('data-use-default') ? `data-use-default` : ''}
     ${this.hasAttribute('data-force-manual') ? `data-force-manual` : ''}
+    ${this.hasAttribute('data-matched') ? `data-matched='${this.getAttribute('data-matched')}'` : ''}
+    ${this.hasAttribute('data-matched-label') ? `data-matched-label='${this.getAttribute('data-matched-label')}'` : ''}
     data-postcode-lookup-label="Back to UK postcode lookup">
 
     <p class="hint pb-2 d-block" slot="hint">Unsure of the postcode? Check with the <a href="https://www.royalmail.com/find-a-postcode" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i>Royal Mail address finder</a></p>
@@ -1751,7 +1753,6 @@ class iamSTDAddressLookup extends HTMLElement {
       }
     });
 
-
   }
 }
 

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,143 @@ 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');
+  };
 
-  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);
-        });
-      }
-    });
+  const checkForChecked = (setFilter = 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);
+      addFilterButton(filters, input, setFilter);
     });
-  });
+  };
+  // Check for which inputs have been set, setting true sets the filter as set (blue)
+  checkForChecked(true);
 
-  // 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);
+  // Create the main event listener for the component watching for inputs to change
 
-      event.stopPropagation(); // Don't allow the below event handler to trigger
+  Array.from(container.querySelectorAll('input[data-filter-text]')).forEach((input) => {
+    
+    input.addEventListener('change', function (event) { 
+      
+      const setFilter = container.closest('dialog') ? false : true;
+
+      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);
+      }
     });
   });
 
-  // 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
-  container.addEventListener('change', function (event) {
-    if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')) {
-      const input = event.target.closest('input[data-filter-text]');
-      if (!container.hasAttribute('data-keep-same')) addFilterButton(filters, input);
+
+  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;
+        }
+
+        const changeEvent = new CustomEvent('change');
+        input?.dispatchEvent(changeEvent);
+      }
     }
-  });
+
+    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');
 
-        for (let t = 0; t < names.length; t++) {
-          const name = names[t];
-          let selector = `[name="${name}"]`;
+        filterClicked(filter);
 
-          if (name.match(/\[(.*)\]/)) {
-            //const newName = name.replace(/\[(.*)\]/, `[]`);
-            const value = name.replace(/.*\[(.*)\]/, `$1`);
-            selector = `[value="${value}"]`;
-          }
+        // 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
+  );
 
-          const inputs = container.querySelectorAll(selector);
+  // Listen for 
+  container.addEventListener('filter', (e) => {
 
-          for (let i = 0; i < inputs.length; i++) {
-            const input = inputs[i];
+    const filter = container.shadowRoot.querySelector(`[data-name="${e.detail}"]`);
 
-            if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox') {
-              input.value = '';
+    filterClicked(filter);
+  });
 
-              const event = new Event('force');
-              if (!container.hasAttribute('data-nosubmit')) input.closest('form').dispatchEvent(event);
-            } else {
-              input.checked = false;
+  container.addEventListener('set-filters', (e) => {
 
-              const event = new Event('force');
-              if (!container.hasAttribute('data-nosubmit')) input.closest('form').dispatchEvent(event);
-            }
-          }
-        }
+    checkForChecked(true);
+  });
 
-        filter.remove();
+  if(dialog){
+    // Force the filters inside of the dialog to effect the filters above
+    container.querySelector('.btn-primary')?.addEventListener('click', (e) => {
+
+      const event = new CustomEvent('update');
+      
+      if(container.parentElement.closest('iam-applied-filters'))
+        container.parentElement.closest('iam-applied-filters').dispatchEvent(event);
+
+      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;