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

package/assets/ts/components/modal/modal.component.ts

@@ -0,0 +1,188 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { cardHTML, setupCard } from '../../modules/card.module';
+import iamMenu from '../menu/menu.component';
+import Modal from '../../../../src/components/Modal/Modal.vue';
+
+trackComponentRegistered('iam-card');
+
+class iamModal 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/modal.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${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="scroll">
+        <i class="fa-light fa-circle" aria-hidden="true">
+          <i class="fa-regular fa-${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'info'}" aria-hidden="true"></i>
+        </i>
+        <slot></slot>
+        <div class="btn-group">
+          <button class="btn btn-secondary" data-cancel>Cancel</button>
+          <slot name="agreed-button">
+            <button class="btn btn-primary" data-agreed>${this.hasAttribute('data-agreed-text') ? this.getAttribute('data-agreed-text') : 'Ok'}</button>
+          </slot>
+        </div>
+      </div>
+    </dialog>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+    const originalDialog = this.querySelector('dialog');
+
+    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 cancelButton = this.shadowRoot?.querySelector('[data-cancel]');
+    const agreedButton = this.shadowRoot?.querySelector('[data-agreed]');
+    const slottedAgreedButton = this.querySelector('button[slot="agreed-button"]');
+    const modalType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'passive';
+
+
+
+
+    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,
+      });
+    }
+
+    document.addEventListener('click', (e) => {
+      
+      if(e.target.matches(`[command="show-modal"][commandfor="${id}"]`) || e.target.matches(`[data-modal="${id}"]`)){
+        openModal();
+      }
+    });
+    
+    // Disable the original event 
+    originalDialog?.addEventListener('command', (e) => {
+
+      if (event.command == "show-modal") {
+        e.preventDefault();
+      }
+    });
+
+    originalDialog?.addEventListener('command', (e) => {
+
+      if (event.command == "close") {
+        closeModal();
+      }
+    });
+
+    originalDialog?.addEventListener('close', (e) => {
+
+      closeModal();
+    });
+
+    // Move the submit button so that the slot functionality works
+    Array.from(originalDialog?.querySelectorAll('[slot]')).forEach((element) => {
+      this.moveBefore(element, originalDialog);
+    });
+
+    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();
+    });
+
+    cancelButton?.addEventListener('click', () => {
+      closeModal();
+    });
+
+    agreedButton?.addEventListener('click', () => {
+
+      const agreedEvent = new CustomEvent('agreed', {
+        detail: { modalId: id },
+      });
+
+      this.dispatchEvent(agreedEvent);
+
+      closeModal();
+    });
+    
+    slottedAgreedButton?.addEventListener('click', () => {
+
+      const agreedEvent = new CustomEvent('agreed', {
+        detail: { modalId: id },
+      });
+
+      this.dispatchEvent(agreedEvent);
+
+      closeModal();
+    });
+
+    this.addEventListener('close-modal', () => {
+      closeModal();
+    });
+
+    this.addEventListener('click', (event) => {
+
+      // Small fix to make sure the dialog isn't a dialog inside of a dialog.
+      const style = window.getComputedStyle(dialog);
+      if (style.display === 'contents') dialog = dialog.parentNode.closest('dialog[open]');
+
+      // Dont allow the backdrop to be clicked when transactional
+      if (modalType != 'transactional' && modalType != 'acknowledgement') {
+        const dialogDimensions = dialog.getBoundingClientRect();
+
+        if (
+          event.clientX < dialogDimensions.left ||
+          event.clientX > dialogDimensions.right ||
+          event.clientY < dialogDimensions.top ||
+          event.clientY > dialogDimensions.bottom
+        ) {
+          if (!event.target.closest('dialog *'))
+            closeModal(); // Weird bug when interacting with radio input fields within dialogs cuases it to close
+        }
+      }
+    });
+  }
+}
+
+export default iamModal;

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/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 {
       }
     });
 
-
   }
 }