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

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

@@ -34,6 +34,14 @@ class iamAddressLookup extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <div class="wrapper">
 
+      <div class="matched d-none">
+        <div class="inner">
+          <p><span class="matched-address"></span></p>
+          <button class="link use-matched">Yes, use this address</button>
+          <button class="link use-entered">No, use the address I entered</button>
+        </div>
+        <span class="invalid-feedback">We found a matching address based on the details you entered. Is this address correct?</span>
+      </div>
       <div class="postcode-lookup was-validated">
         <div>
         <label class="mb-1"><span class="title text-lowercase"></span>
@@ -101,6 +109,11 @@ class iamAddressLookup extends HTMLElement {
     let pageNumber = 1;
     const atleastone = this.querySelector('.atleastone');
 
+    const matchedAddress = this.shadowRoot.querySelector('.matched-address');
+    const matchedAddressWrapper = this.shadowRoot.querySelector('.matched');
+    const matchedAddressUse = this.shadowRoot.querySelector('.matched .use-matched');
+    const matchedAddressEntered = this.shadowRoot.querySelector('.matched .use-entered');
+
     Array.from(this.shadowRoot.querySelectorAll('.title')).forEach((titleElement) => {
       titleElement.innerHTML = title;
     });
@@ -588,6 +601,53 @@ class iamAddressLookup extends HTMLElement {
     });
     // #endregion
 
+    // #region Matched address
+
+    if(this.hasAttribute('data-matched')){
+
+      matchedAddressWrapper?.classList.remove('d-none');
+
+
+      if(this.hasAttribute('data-matched-label'))
+        matchedAddress?.innerHTML = this.getAttribute('data-matched-label');
+
+      matchedAddressEntered?.addEventListener('click', () => {
+
+        matchedAddressWrapper?.remove();
+
+        const useCheckbox = this.shadowRoot?.querySelector('[name="use"]');
+        useCheckbox.checked = true;
+
+        lookupWrapper.classList.add('js-hide');
+        manualWrapper.classList.remove('js-hide');
+
+        const values = JSON.parse(this.getAttribute('data-use'));
+        
+        Object.keys(values).forEach((key) => {
+          const value = values[key];
+          if (this.querySelector(`[data-name="${key}"]`)) this.querySelector(`[data-name="${key}"]`).value = value;
+          else if (this.querySelector(`[name="${key}"]`)) this.querySelector(`[name="${key}"]`).value = value;
+        });
+        
+        checkFilled(this);
+      });
+
+      
+      matchedAddressUse?.addEventListener('click', () => {
+
+        matchedAddressWrapper?.remove();
+
+        const values = JSON.parse(this.getAttribute('data-matched'));
+
+        fillInputs(values);
+        checkFilled(this);
+      });
+    }
+    else {
+      matchedAddressWrapper?.remove();
+    }
+    // #endregion
+
     advancedSelect(this, lookup, list, true);
   }
 }

package/assets/ts/components/applied-filters/applied-filters.component.ts

@@ -21,9 +21,7 @@ class iamAppliedFilters extends HTMLElement {
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    
     ${loadCSS}
-    
     </style>
     <div class="applied-filters ${classList}"></div>
     <slot></slot>

package/assets/ts/components/filter-card/filter-card.component.ts

@@ -74,6 +74,33 @@ class iamFilerCard extends HTMLElement {
 
     trackComponent(cardComponent, 'iam-filter-card', ['select-card', 'unselect-card']);
   }
+
+  static get observedAttributes(): any {
+    return ['data-total'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+
+    
+
+    switch (attrName) {
+      case 'data-total': {
+        if (oldVal != newVal) {
+           
+          const cardBody = this.shadowRoot.querySelector('.card__body');
+
+          if(!cardBody?.querySelector('.card__total'))
+            cardBody.insertAdjacentHTML('beforeend',`<div class="card__total">${newVal}</div>`);
+          else {
+            cardBody?.querySelector('.card__total')?.innerHTML = newVal;
+          }
+
+
+        }
+        break;
+      }
+    }
+  }
 }
 
 export default iamFilerCard;

package/assets/ts/components/input/input.component.ts

@@ -0,0 +1,168 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-iamPrefix');
+class iamInput 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/input.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" part="wrapper">
+      <span part="prefix"><slot name="prefix"></slot></span>
+      <slot></slot>
+      <slot part="suffix"><slot name="suffix"></slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    
+    const component = this;
+    const input = this.querySelector('input');
+    const inputType = input?.hasAttribute('type') ? input?.getAttribute('type') : 'text';
+    const prefixIcon = this.shadowRoot?.querySelector('[part="prefix"]');
+    const suffixIcon = this.shadowRoot?.querySelector('[part="suffix"]');
+
+    
+    if(this.closest('label'))
+      this.classList.add('mb-0');
+
+
+    const setIcon = (inputType) => {
+        
+      // Pre set the icons
+      switch (inputType) {
+        case "date":
+        case "datetime-local":
+        case "year":
+        case "month":
+        case "week":
+          this.setAttribute('data-suffix-icon','calendar') ;
+          suffixIcon?.setAttribute('role','button');
+          break;
+        case "time":
+          this.setAttribute('data-suffix-icon','clock') ;
+          suffixIcon?.setAttribute('role','button');
+          break;
+        default:
+          this.removeAttribute('data-suffix-icon') ;
+          suffixIcon?.removeAttribute('role');
+          break;
+      }
+    }
+    setIcon(inputType);
+
+    // Colour input field
+    if(input?.matches('[type="color"]')){
+      this.insertAdjacentHTML('beforeend', `<output></output>`);
+
+      input.addEventListener('input', () => {
+
+        input.nextElementSibling.value = input.value;
+      });
+    }
+
+
+    if(this.hasAttribute('data-prefix-icon')){
+      prefixIcon?.className = `prefix fa-${this.hasAttribute('data-prefix-weight') ? this.getAttribute('data-prefix-weight') : 'regular'} fa-${this.getAttribute('data-prefix-icon')}`;
+      this.querySelector('input')?.classList.add('has-prefix');
+    }
+    if(this.hasAttribute('data-suffix-icon')){
+      suffixIcon?.className = `suffix fa-${this.hasAttribute('data-suffix-weight') ? this.getAttribute('data-suffix-weight') : 'regular'} fa-${this.getAttribute('data-suffix-icon')}`;
+      this.querySelector('input')?.classList.add('has-suffix');
+    }
+
+    if(this.shadowRoot.querySelector('[name="prefix"]')?.assignedElements().length){
+      this.shadowRoot.querySelector('[name="prefix"]')?.classList.add('prefix');
+      this.querySelector('input')?.classList.add('has-prefix');
+    }
+
+    if(this.shadowRoot.querySelector('[name="suffix"]')?.assignedElements().length){
+      this.shadowRoot.querySelector('[name="suffix"]')?.classList.add('suffix');
+      this.querySelector('input')?.classList.add('has-suffix');
+    }
+
+
+    // Change type
+
+    if(this.querySelector('[data-change-type]')){
+      const select = this.querySelector('[data-change-type]');
+
+      select.addEventListener('change', () => {
+        
+        input.setAttribute('type', select.value);
+
+        setIcon(select.value);
+        if(this.getAttribute('data-suffix-icon')){
+            
+          suffixIcon?.className = `suffix fa-${this.hasAttribute('data-suffix-weight') ? this.getAttribute('data-suffix-weight') : 'regular'} fa-${this.getAttribute('data-suffix-icon')}`;
+          input?.classList.add('has-suffix');
+        }
+        else {
+          suffixIcon?.removeAttribute('class');
+          input?.classList.remove('has-suffix');
+        }
+      });
+    }
+    
+
+    
+    // #region Date restrictions
+      const today = new Date();
+
+      function formatDate(date, type = "date"): string {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+
+        if(type == "datetime-local")
+          return `${year}-${month}-${day}T00:00:00`;
+
+        return `${year}-${month}-${day}`;
+      }
+
+      const checkDayAllowed = (input,allowedDays) => {
+
+        const day = new Date(input.value).getUTCDay();
+
+        if (allowedDays.includes(day)) input.setCustomValidity('');
+        else input.setCustomValidity('That day of the week is not allowed');
+      }
+
+      if(input?.matches('[type="date"], [type="datetime-local"]') && this.hasAttribute('data-allowed-days')){
+        const allowedDays = JSON.parse(`[${this.getAttribute('data-allowed-days')}]`);
+        
+        checkDayAllowed(input,allowedDays);
+        input.addEventListener('input', () => { checkDayAllowed(input,allowedDays); });
+      }
+    // #endregion
+
+    suffixIcon.addEventListener('click', function () {
+      
+      if(!component?.querySelector('select[data-change-type][slot="suffix"]'))
+        input.showPicker();
+    });
+    
+    prefixIcon.addEventListener('click', function () {
+      
+      if(!component?.querySelector('select[data-change-type][slot="prefix"]'))
+        input.showPicker();
+    });
+    
+
+  }
+}
+
+export default iamInput;

package/assets/ts/components/input-range/input-range.component.ts

@@ -0,0 +1,78 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-iamPrefix');
+class iamDaterange 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/input-range.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" part="wrapper">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    
+    const inputs = this.querySelectorAll('input,select');
+
+    if(inputs.length > 1){
+        
+      const setMinMax = ():void => {
+
+        const min = inputs[0].value;
+        let max = inputs[1].value;
+      
+        // Make sure the second input/select is always higher than the first input/select
+        if(parseInt(inputs[1].value) < parseInt(inputs[0].value)){
+          max = min;
+          inputs[1].value = min;
+        }
+
+        // First input/select
+        if(inputs[0].matches('input'))
+          inputs[0].setAttribute('max',max);
+
+        if(inputs[0].matches('select')){
+          Array.from(inputs[0].querySelectorAll('option')).forEach((option) => {
+
+            if (parseInt(option.getAttribute('value')) > max) option.classList.add('d-none');
+            else option.classList.remove('d-none');
+          });
+        }
+
+        // Second input/select
+        if(inputs[1].matches('input'))
+          inputs[1].setAttribute('min',min);
+
+        Array.from(inputs[1].querySelectorAll('option')).forEach((option) => {
+
+          if (parseInt(option.getAttribute('value')) < min) option.classList.add('d-none');
+          else option.classList.remove('d-none');
+        });
+      }
+      setMinMax();
+
+      this.addEventListener('change', () => {
+
+        setMinMax();
+      });
+    }
+    
+  }
+}
+
+export default iamDaterange;

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;