@iamproperty/components 7.6.4--beta1 → 7.6.4--beta2

package/assets/sass/templates/form.scss

@@ -50,21 +50,30 @@
       outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
       width: 100%;
 
-      @media screen and (min-width: 36em) {
+      > *:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    @media screen and (min-width: 36em) {
+      .form-panel {
         max-width: calc(100% - 5rem); // Guess
         margin-inline: auto;
       }
+    }
 
-      @media screen and (min-width: 62em) {
+    @media screen and (min-width: 62em) {
+      .form-panel {
         max-width: rem(924); // Guess
         border-radius: 0.5rem;
         padding-inline: rem(94);
         padding-block: 2.5rem;
         margin-bottom: 2rem;
       }
-
-      > *:last-child {
-        margin-bottom: 0 !important;
+      
+      .form-panel--sm {
+        max-width: 40rem; /* 640px */
+        padding-inline: 2rem;
       }
     }
 

package/assets/ts/components/form/form.component.ts

@@ -0,0 +1,102 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { searchAjax, filterList, setTag } from '../../modules/dropdown';
+
+trackComponentRegistered('iam-tag');
+
+class iamTag extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <div class="wrapper">
+      <slot></slot>
+    </div>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  isFormValid(form):boolean {
+
+    if (form.querySelector(':invalid'))
+      return false;
+
+    if (form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]'))
+      return false;
+
+    if (form.querySelector('iam-multiselect[data-is-required][data-error]'))
+      return false;
+
+    return true;
+  };
+
+  connectedCallback(): void {
+
+    const form = this.querySelector('form');
+
+    if(!form)
+      return false;
+
+    form.setAttribute('novalidate','true');
+
+    // Form validation
+    form.addEventListener('submit', (e) => {
+
+      form.classList.add('was-validated');
+
+      if (!this.isFormValid(form)) {
+
+      console.log('hey2');
+
+        e.preventDefault();
+        form?.querySelector('input:invalid')?.scrollIntoView();
+      }
+    });
+
+
+    // conditional reveal required fields
+    Array.from(form.querySelectorAll('.conditional [required]')).forEach((input) => {
+
+      input.setAttribute('data-conditional-required','true');
+      input.removeAttribute('required');
+    });
+
+    // conditional reveal required fields (for fields inside of components like the address lookup)
+    Array.from(form.querySelectorAll('.conditional [data-required]')).forEach((input) => {
+
+      input.setAttribute('data-conditional-data-required','true');
+      input.removeAttribute('data-required');
+    });
+
+    form.addEventListener('change', () => {
+
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-required], .conditional [data-conditional-data-required]')).forEach((input) => {
+
+        input.removeAttribute('required');
+        input.removeAttribute('data-required');
+      });
+
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-required]')).forEach((input) => {
+
+        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
+
+        if(conditionalStyles.getPropertyValue("display") == 'block')
+          input.setAttribute('required', 'required');
+      });
+
+      Array.from(form.querySelectorAll('.conditional [data-conditional-data-required]')).forEach((input) => {
+
+        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
+
+        if(conditionalStyles.getPropertyValue("display") == 'block')
+          input.setAttribute('data-required', 'true');
+      });
+    });
+  }
+}
+
+export default iamTag;

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

@@ -66,16 +66,18 @@ class iamInput extends HTMLElement {
 
 
     const setCurrencyRules = (): void => {
-      
+      let originalValue = input.value.replace(',','');
+
+      input?.setAttribute('data-value',originalValue);
       input.setAttribute('type','text');
-      input?.setAttribute('data-value',input.value);
-      input.value = new Intl.NumberFormat("en-GB", { 
+      originalValue = new Intl.NumberFormat("en-GB", { 
         style: "currency", 
         currency: "GBP",
-        minimumFractionDigits: Number.isInteger(input.value) ? 0 : 2,
-        maximumFractionDigits: Number.isInteger(input.value) ? 0 : 2,
+        minimumFractionDigits: Number.isInteger(originalValue) ? 0 : 2,
+        maximumFractionDigits: Number.isInteger(originalValue) ? 0 : 2,
         trailingZeroDisplay: 'stripIfInteger' // Strip zeros if it's an integer
-      }).format(input.value).replace("£", "");
+      }).format(originalValue).replace("£", "");
+      input.value = originalValue;
     }
 
 

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

@@ -1786,6 +1786,38 @@ class iamSTDAddressLookup extends HTMLElement {
         }
       });
     }
+
+
+    // If inside conditional
+    
+
+    if(this.closest('.conditional')){
+
+
+      Array.from(this.querySelectorAll('[required]')).forEach((input) => {
+
+        input.setAttribute('data-conditional-required','true');
+        input.removeAttribute('required');
+      });
+      
+      Array.from(this.querySelectorAll('[data-required]')).forEach((input) => {
+
+        input.setAttribute('data-conditional-data-required','true');
+        input.removeAttribute('data-required');
+      });
+      
+      const conditionalStyles = window.getComputedStyle(this.closest('.conditional'));
+
+      if(conditionalStyles.getPropertyValue("display") == 'block'){
+        Array.from(this.querySelectorAll('[data-conditional-data-required]')).forEach((input) => {
+          input.setAttribute('data-required', 'true');
+        });
+        Array.from(this.querySelectorAll('[data-conditional-required]')).forEach((input) => {
+          input.setAttribute('required', 'true');
+        });
+      }
+    }
+
   }
 }
 

package/assets/ts/modules/helpers.ts

@@ -55,15 +55,18 @@ export const addGlobalEvents = (body): void => {
   });
 
   Array.from(document.querySelectorAll('form')).forEach((form) => {
-    form.addEventListener('submit', (event) => {
-      if (
-        form.querySelector(':invalid')
-      ) {
-        form.classList.add('was-validated');
-        form?.querySelector('input:invalid')?.scrollIntoView();
-        event.preventDefault();
-      }
-    });
+    
+    if(!form?.closest('iam-form')){
+      form.addEventListener('submit', (event) => {
+        if (
+          form.querySelector(':invalid')
+        ) {
+          form.classList.add('was-validated');
+          form?.querySelector('input:invalid')?.scrollIntoView();
+          event.preventDefault();
+        }
+      });
+    }
   });
   
   document.addEventListener('click', (event) => {
@@ -71,24 +74,26 @@ export const addGlobalEvents = (body): void => {
     if (event && event.target instanceof HTMLElement && event.target.matches('form button:not([type=button])')) {
       const form = event.target.closest('form');
 
-      // Reset password types
-      Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {
-        input.setAttribute('type', 'password');
-      });
-
-      if (
-        form.querySelector(':invalid') ||
-        form.querySelector('.pwd-checker[data-strength="1"]') ||
-        form.querySelector('.pwd-checker[data-strength="2"]')
-      ) {
-        form.classList.add('was-validated');
-        form?.querySelector('input:invalid')?.scrollIntoView();
-        event.preventDefault();
-      }
-
-      if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {
-        form.classList.add('was-validated');
-        event.preventDefault();
+      if(!form?.closest('iam-form')){
+        // Reset password types
+        Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {
+          input.setAttribute('type', 'password');
+        });
+
+        if (
+          form.querySelector(':invalid') ||
+          form.querySelector('.pwd-checker[data-strength="1"]') ||
+          form.querySelector('.pwd-checker[data-strength="2"]')
+        ) {
+          form.classList.add('was-validated');
+          form?.querySelector('input:invalid')?.scrollIntoView();
+          event.preventDefault();
+        }
+
+        if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {
+          form.classList.add('was-validated');
+          event.preventDefault();
+        }  
       }
     }
   });