@iamproperty/components 7.7.1--beta10 → 7.7.1--beta12

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

@@ -3,7 +3,7 @@ import { searchAjax, filterList, setTag } from '../../modules/dropdown';
 
 trackComponentRegistered('iam-tag');
 
-class iamTag extends HTMLElement {
+class iamForm extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -32,6 +32,90 @@ class iamTag extends HTMLElement {
     return true;
   };
 
+  checkConditions = (conditions):boolean => {
+
+    let meetsCondition = true;
+
+    JSON.parse(conditions).forEach((condition) => {
+      if(this.querySelector(`#${condition['if']}`).value != condition['equals'])
+        meetsCondition = false;
+    });
+
+    return meetsCondition;
+  }
+
+  showIf = ():void => {
+
+    Array.from(this.querySelectorAll('[data-show-if]')).forEach((element) => {
+
+      if(!this.checkConditions(element.getAttribute('data-show-if')))
+        element.classList.add('d-none');
+      else 
+        element.classList.remove('d-none');
+
+    });
+  }
+
+  hideIf = ():void => {
+
+    Array.from(this.querySelectorAll('[data-hide-if]')).forEach((element) => {
+
+      if(this.checkConditions(element.getAttribute('data-hide-if')))
+        element.classList.add('d-none');
+      else 
+        element.classList.remove('d-none');
+
+    });
+  }
+
+  disabledIf = ():void => {
+
+    Array.from(this.querySelectorAll('[data-disabled-if]')).forEach((element) => {
+
+      if(this.checkConditions(element.getAttribute('data-disabled-if')))
+        element.setAttribute('disabled','disabled');
+      else 
+        element.removeAttribute('disabled');
+
+    });
+  }
+
+  enabledIf = ():void => {
+
+    Array.from(this.querySelectorAll('[data-enabled-if]')).forEach((element) => {
+
+      if(!this.checkConditions(element.getAttribute('data-enabled-if')))
+        element.setAttribute('disabled','disabled');
+      else 
+        element.removeAttribute('disabled');
+
+    });
+  }
+
+  requiredIf = ():void => {
+
+    Array.from(this.querySelectorAll('[data-required-if]')).forEach((element) => {
+
+      if(this.checkConditions(element.getAttribute('data-required-if')))
+        element.setAttribute('required','required');
+      else
+        element.removeAttribute('required');
+
+    });
+  }
+
+  readonlyIf = ():void => {
+
+    Array.from(this.querySelectorAll('[data-readonly-if]')).forEach((element) => {
+
+      if(this.checkConditions(element.getAttribute('data-readonly-if')))
+        element.setAttribute('readonly','readonly');
+      else
+        element.removeAttribute('readonly');
+
+    });
+  }
+
   connectedCallback(): void {
 
     const form = this.querySelector('form');
@@ -48,14 +132,11 @@ class iamTag extends HTMLElement {
 
       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) => {
 
@@ -70,8 +151,22 @@ class iamTag extends HTMLElement {
       input.removeAttribute('data-required');
     });
 
+    this.showIf();
+    this.hideIf();
+    this.disabledIf();
+    this.enabledIf();
+    this.requiredIf();
+    this.readonlyIf();
+    
+
     form.addEventListener('change', () => {
 
+      this.showIf();
+      this.hideIf();
+      this.disabledIf();
+      this.enabledIf();
+      this.requiredIf();
+      this.readonlyIf();
 
       Array.from(form.querySelectorAll('.conditional [data-conditional-required], .conditional [data-conditional-data-required]')).forEach((input) => {
 
@@ -99,4 +194,4 @@ class iamTag extends HTMLElement {
   }
 }
 
-export default iamTag;
+export default iamForm;

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

@@ -56,7 +56,8 @@ class iamModal extends HTMLElement {
 
       this.dispatchEvent(agreedEvent);
 
-      closeModal(this);
+      if(!this.querySelector(':invalid'))
+        closeModal(this);
     }
 
     document.addEventListener('click', (e) => {