@iamproperty/components 3.7.7 → 3.7.8--beta

package/assets/ts/bundle.ts

@@ -3,6 +3,7 @@
 import * as helpers from '../js/modules/helpers'
 import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
 //import accordion from './modules/accordion'
 import testimonial from '../js/modules/testimonial'
@@ -27,6 +28,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
   extendDialogs(document.body);
+  extendInputs(document.body);
   //helpers.checkElements(document.body);
 
   if (!window.customElements.get(`iam-header`))

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

@@ -53,30 +53,53 @@ class iamCard extends HTMLElement {
 
     parentNode.setAttribute('tabindex','-1');
     
+
     if(parentNode.matches('label[for]')){
 
-      let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+      let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;
         
       if(isChecked)
-        card.classList.add('active');
+        card.classList.add('checked');
+      else
+        card.classList.remove('checked');
     }
 
     card.addEventListener('click', (event) => {
 
       if(parentNode.matches('label[for]')){
 
-        let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+        event.stopPropagation();
+        event.preventDefault();
+
+        const input = document.getElementById(parentNode.getAttribute('for'))
+
+        const inputName = input.getAttribute('name');
+        const inputID = input.getAttribute('id');
+
+        const inputs = Array.from(document.querySelectorAll(`[name="${inputName}"]:not([id="${inputID}"])`));
+    
+        inputs.forEach((input, index) => {
           
-        if(!isChecked)
-          card.classList.add('active');
-        else
-          card.classList.remove('active');
-      }
-      else {
+          const otherCard = document.querySelector(`[for="${input.getAttribute('id')}"] iam-card`);
+          
+          otherCard.dispatchEvent(new Event('inactive'));
+        });
+
         parentNode.click();
+        let isChecked = input.checked
+          
+        if(isChecked)
+          card.classList.add('checked');
+        else
+          card.classList.remove('checked');
+
       }
     });
 
+    this.addEventListener('inactive', (event) => {
+      card.classList.remove('checked');
+    });
+
     card.addEventListener('keydown', (event) => {
 
       switch(event.keyCode)
@@ -85,12 +108,31 @@ class iamCard extends HTMLElement {
           case 13:
             if(parentNode.matches('label[for]')){
 
-              let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+              event.stopPropagation();
+              event.preventDefault();
+      
+              const input = document.getElementById(parentNode.getAttribute('for'))
+      
+              const inputName = input.getAttribute('name');
+              const inputID = input.getAttribute('id');
+      
+              const inputs = Array.from(document.querySelectorAll(`[name="${inputName}"]:not([id="${inputID}"])`));
+          
+              inputs.forEach((input, index) => {
+                
+                const otherCard = document.querySelector(`[for="${input.getAttribute('id')}"] iam-card`);
+                
+                otherCard.dispatchEvent(new Event('inactive'));
+              });
+      
+              parentNode.click();
+              let isChecked = input.checked
                 
-              if(!isChecked)
-                card.classList.add('active');
+              if(isChecked)
+                card.classList.add('checked');
               else
-                card.classList.remove('active');
+                card.classList.remove('checked');
+      
             }
             else {
               parentNode.click();

package/assets/ts/dynamic.ts

@@ -3,6 +3,7 @@
 import * as helpers from '../js/modules/helpers'
 import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
 import table from '../js/modules/table'
 //import accordion from './modules/accordion'
@@ -63,6 +64,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addGlobalEvents(document.body);
   //helpers.checkElements(document.body);
   extendDialogs(document.body);
+  extendInputs(document.body);
 
   
   if (!window.customElements.get(`iam-notification`))

package/assets/ts/flat-components.ts

@@ -3,6 +3,7 @@
 import * as helpers from '../js/modules/helpers'
 import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
 import * as tableModule from './modules/table'
 import accordion from './modules/accordion'
@@ -25,6 +26,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addGlobalEvents(document.body);
   //helpers.checkElements(document.body);
   extendDialogs(document.body);
+  extendInputs(document.body);
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {

package/assets/ts/modules/dialogs.ts

@@ -86,7 +86,8 @@ const extendDialogs = (body) => {
 
         if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
 
-          dialog.close()
+          if(!event.target.closest('input[type="radio"]')) // Weird bug when interacting with radio input fields within dialogs cuases it to close
+            dialog.close()
           
           window.dataLayer = window.dataLayer || [];
           window.dataLayer.push({

package/assets/ts/modules/inputs.ts

@@ -0,0 +1,88 @@
+// @ts-nocheck
+const extendInputs = (body) => {
+
+  document.addEventListener("load", function() {
+
+    console.log(Array.from(document.querySelectorAll('input[maxlength]')))
+    // maxlength counter init
+    Array.from(document.querySelectorAll('input')).forEach((input,index) => {
+      let wrapper = input.parentElement;
+      setMaxlengthVars(input,wrapper);
+    });
+  });
+
+  body.addEventListener('input', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('input,textarea,select')){
+
+      const input = event.target.closest('input,textarea,select');
+      const wrapper = input.parentElement;
+
+      // Output the color hex
+      if(input.hasAttribute('type') && input.getAttribute('type') == 'color')
+        input.nextElementSibling.value = input.value;
+
+      if(input.hasAttribute('maxlength') && input.nextElementSibling)
+        input.nextElementSibling.setAttribute("data-count", input.value.length);
+    }
+  });
+
+  body.addEventListener('change', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('select')){
+
+      const select = event.target.closest('select');
+
+      console.log(select)
+
+      if(select.hasAttribute('data-change-type') && select.hasAttribute('data-input')){
+
+        const input = document.getElementById(select.getAttribute('data-input'));
+        const newType = select.value;
+        changeType(input,newType);
+      }
+    }
+  });
+
+  body.addEventListener('click', (event) => {
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-type][data-input]:not(select)')){
+
+      const button = event.target.closest('[data-change-type]');
+      const input = document.getElementById(button.getAttribute('data-input'));
+      const newType = button.getAttribute('data-change-type');
+      button.setAttribute('data-change-type',input.getAttribute('type'));
+
+      changeType(input,newType);
+
+      if(button.hasAttribute('data-alt-class')){
+        const newClass = button.getAttribute('data-alt-class');
+        button.setAttribute('data-alt-class',button.getAttribute('class'));
+        button.setAttribute('class',newClass);
+      }
+    }
+  });
+}
+
+export const setMaxlengthVars = (input) => {
+  let wrapper = input.parentElement;
+  let maxlength = input.getAttribute('maxlength')
+  
+  wrapper.style.setProperty("--maxlength", maxlength);
+
+
+  let span = input.nextElementSibling;
+
+  if(!span || (span && span.classList.contains('invalid-feedback'))){
+
+    span = document.createElement('span');
+    wrapper.insertBefore(span, input.nextSibling);
+  }
+
+  span.setAttribute('data-count',input.value.length);
+}
+
+export const changeType = (input,type) => {
+
+  input.setAttribute('type',type);
+}
+
+export default extendInputs;