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

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,42 @@ 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');
+
+    });
+  }
+
+  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');
+
+    });
+  }
+
   connectedCallback(): void {
 
     const form = this.querySelector('form');
@@ -96,7 +132,20 @@ class iamTag extends HTMLElement {
           input.setAttribute('data-required', 'true');
       });
     });
+
+    // #region if
+
+    this.showIf();
+    this.disabledIf();
+
+    form.addEventListener('change', (e) => {
+
+      this.showIf();
+      this.disabledIf();
+    });
+
+    // #endregion
   }
 }
 
-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) => {