@iamproperty/components 4.0.0 → 4.0.1

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -132,6 +132,43 @@ class iamActionbar extends HTMLElement {
         });
       }
     }
+
+    // Wtach div for the select inputs
+    if(this.hasAttribute('data-select-watch')){
+
+      const element = document.getElementById(this.getAttribute('data-select-watch'));
+      element.setAttribute('data-select-container','true');
+      Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+        input.parentElement.setAttribute('slot','checkbox');
+      });
+      element.addEventListener('change',(event) => {
+
+        if (event && event.target instanceof HTMLElement && event.target.closest('[type="checkbox"]')){
+
+          let count = element.querySelectorAll('input[type="checkbox"]').length;
+          let countChecked = element.querySelectorAll('input[type="checkbox"]:checked').length;
+          that.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
+
+          let input = event.target.closest('[type="checkbox"]');
+
+          if(countChecked){
+            Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+              if(input.closest('iam-card'))
+                input.closest('iam-card').setAttribute('data-selected','true');
+            });
+          }
+          else {
+            Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+
+              if(input.closest('iam-card'))
+                input.closest('iam-card').removeAttribute('data-selected');
+            });
+          }
+          
+        };
+      });
+    }
     // #endregion
 
     // #region switchviews
@@ -385,8 +422,36 @@ class iamActionbar extends HTMLElement {
         
         if(selectAll)
           setSelectAllInput(selectAll, newVal);
-          const event = new CustomEvent("selected", { detail: { selected: newVal } });
-          this.dispatchEvent(event);
+
+        const event = new CustomEvent("selected", { detail: { selected: newVal } });
+        this.dispatchEvent(event);
+
+        if(newVal == "all" && this.hasAttribute('data-select-watch')){
+
+          const element = document.getElementById(this.getAttribute('data-select-watch'));
+
+          Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = true;
+
+            if(input.closest('iam-card'))
+              input.closest('iam-card').setAttribute('data-selected','true');
+          });
+        }
+
+        if(newVal == "0" && this.hasAttribute('data-select-watch')){
+
+          const element = document.getElementById(this.getAttribute('data-select-watch'));
+
+          Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = false;
+
+            if(input.closest('iam-card'))
+              input.closest('iam-card').removeAttribute('data-selected','true');
+          });
+        }
+
         break;
       }
     }

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

@@ -37,6 +37,8 @@ class iamCard extends HTMLElement {
       ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
         <slot></slot>
       </div>
+        
+      <slot name="checkbox"></slot>
       ${this.hasAttribute('data-cta') ? `<div class="card__footer"><span class="link">${this.getAttribute('data-cta')}</span></div>` : ''}
     </div>
     `;
@@ -44,7 +46,7 @@ class iamCard extends HTMLElement {
   }
 
 	connectedCallback() {
-    
+
     this.classList.add('loaded');
     
     // Mimic clicking the parent node so the focus and target events can be on the card
@@ -64,6 +66,13 @@ class iamCard extends HTMLElement {
         card.classList.remove('checked');
     }
 
+    // Click event down
+    this.addEventListener('click', (event) => {
+
+      let clickEvent = new Event('click');
+      card.dispatchEvent(clickEvent);
+    });
+
     card.addEventListener('click', (event) => {
 
       if(parentNode.matches('label[for]')){
@@ -151,7 +160,8 @@ class iamCard extends HTMLElement {
   attributeChangedCallback(attrName, oldVal, newVal) {
     switch (attrName) {
       case "data-total": {
-        this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
+        if(this.shadowRoot.querySelector('.card__total'))
+          this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
         break;
       }
       case "class": {

package/assets/ts/components/table/table.component.ts

@@ -65,6 +65,10 @@ class iamTable extends HTMLElement {
     classList = classList.replace('table--loading','');
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
+    // set actionbar class if needed
+    if(this.querySelector('.actionbar__sticky'))
+      this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
+
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
     this.pagination = this.shadowRoot.querySelector('.table__pagination');

package/assets/ts/modules/applied-filters.ts

@@ -96,17 +96,14 @@ function createAppliedFilters(container,filters) {
   Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).forEach((input, index) => {
     addFilterButton(filters, input)
   });
-  
-  container.addEventListener('change', function(event){
 
-    if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')){
-
-      let input = event.target.closest('input[data-filter-text]');
-
-      addFilterButton (filters, input);
-    };
+  Array.from(container.querySelectorAll('input[data-filter-text]')).forEach((input, index) => {
     
-  }, false);
+    input.addEventListener('change', function(event){
+
+      addFilterButton(filters, input)
+    });
+  });
 
   filters.addEventListener('click', function(event){
 
@@ -136,7 +133,8 @@ function createAppliedFilters(container,filters) {
             input.checked = false;
 
             var event = new Event('force');
-            input.closest('form').dispatchEvent(event);
+            if(!container.hasAttribute('data-nosubmit'))
+              input.closest('form').dispatchEvent(event);
           }
         }
       }

package/assets/ts/modules/dialogs.ts

@@ -36,6 +36,23 @@ const extendDialogs = (body) => {
       dialog.showModal();
       dialog.focus();
 
+      let firstWidth = dialog.offsetWidth;
+      dialog.setAttribute('style',`max-width: ${firstWidth}px;`);
+
+      // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
+      Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
+        
+        const id = element.getAttribute('data-duplicate');
+        const originalInput = document.getElementById(id);
+
+        if(element.checked != originalInput.checked){
+
+          element.checked = originalInput.checked;
+          let changeEvent = new Event('change');
+          element.dispatchEvent(changeEvent);
+        }
+      });
+
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         "event": "openModal",
@@ -244,6 +261,7 @@ export const createMultiFormDialog = (dialog) => {
 
   let buttons = "";
   let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
+  let form = dialog.querySelector('form');
 
   fieldsets.forEach((fieldset,index) => {
     buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`;
@@ -258,8 +276,18 @@ export const createMultiFormDialog = (dialog) => {
     if(index != fieldsets.length - 1)
       btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
 
-    if(index == fieldsets.length - 1)
-      btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+    // Last fieldset
+    if(index == fieldsets.length - 1){
+      if(form && form.querySelector(':scope > button[type="submit"]')){
+
+        let existingButton = form.querySelector(':scope > button[type="submit"]');
+        existingButton.classList.add('mb-0')
+
+        btnWrapper.insertAdjacentElement('beforeend',existingButton);
+      }
+      else
+        btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+    }  
   });
 
   dialog.insertAdjacentHTML('afterbegin',`<div class="steps bg-primary">${buttons}</div>`);
@@ -359,11 +387,12 @@ export const createMultiFormDialog = (dialog) => {
 
       const button = event.target.closest('button');
 
-      if(event.keyCode == 13){
+      if(event.keyCode == 13 && button.getAttribute('type') != "submit"){
         
         event.preventDefault();
         validateFieldset(button);
       }
+
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('input')){
@@ -371,13 +400,21 @@ export const createMultiFormDialog = (dialog) => {
 
       input.classList.remove('is-invalid');
 
-
+      if(event.keyCode == 13){
+        
+        event.preventDefault();
+      }
     }
   });
 
 
   dialog.addEventListener('click', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')){
+      
+      const form = event.target.closest('form');
+      form.classList.add('was-validated');
+    }
+    else if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
 
       const button = event.target.closest('button[data-title]');
       validateFieldset(button);

package/assets/ts/modules/table.ts

@@ -140,7 +140,35 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
   var timer;
 
   // Check what conditions are set on the table to see what the form actions are
-  let formSubmit = function(paginate = false){
+  let formSubmit = function(event, paginate = false){
+
+    if(form.classList.contains('processing'))
+      return false;
+
+
+    // Before submitting check if any duplicate checkboxes within the filters dialog needs to upset the original input
+    if(event.type == "submit"){
+      form.classList.add('processing');
+      Array.from(form.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
+
+        const id = element.getAttribute('data-duplicate');
+        const input = document.getElementById(id);
+        const card = document.querySelector(`[for="${id}"] iam-card`);
+
+
+        if(input.checked != element.checked){
+            
+          if(card){
+            let clickEvent = new Event('click');
+            card.dispatchEvent(clickEvent);
+          }
+          else {
+            input.checked = element.checked;
+          }
+        }
+      });
+      form.classList.remove('processing');
+    }
 
     if(form.hasAttribute('data-ajax')){
 
@@ -179,7 +207,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')){
 
       timer = setTimeout(function(){
-        formSubmit();
+        formSubmit(event);
       }, 500);
     };
   });
@@ -193,12 +221,12 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       if(!form.hasAttribute('data-submit'))
         sortTable(table, form, savedTableBody);
 
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')){
         
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter][data-no-ajax]')){ // Allow for input fields to filter the current results without a new ajax call
@@ -209,21 +237,21 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     }
     else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')){
       
-      formSubmit();
+      formSubmit(event);
     }
     else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')){
       
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){
         
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-mimic]')){
         
-      formSubmit();
+      formSubmit(event);
     }
   });
 
@@ -249,12 +277,53 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-clear]')){
       
-      form.reset();
+      form.classList.add('processing');
+      // Make sure any applied filters have been removed
+      Array.from(form.querySelectorAll('.applied-filters')).forEach((filters,index) => {
+        filters.innerHTML = "";
+      });
+
+      // Make sure cards are unlicked
+      let frm_elements = form.elements;
+
+      for (let i = 0; i < frm_elements.length; i++)
+      {
+          let field_type = frm_elements[i].type.toLowerCase() ? frm_elements[i].type.toLowerCase() : "text";
+          switch (field_type)
+          {
+          case "text":
+          case "password":
+          case "textarea":
+              frm_elements[i].value = "";
+              break;
+          case "radio":
+          case "checkbox":
+              if (frm_elements[i].checked)
+              {
+                  frm_elements[i].checked = false;
+              }
+              break;
+          case "select-one":
+          case "select-multi":
+              frm_elements[i].selectedIndex = -1;
+              break;
+          case "hidden":
+          default:
+              break;
+          }
+      }
+
+      Array.from(form.querySelectorAll('label iam-card')).forEach((card,index) => {
+        let clickEvent = new Event('click');
+        card.dispatchEvent(clickEvent);
+      });
+
+      form.classList.remove('processing');
 
       if(!form.hasAttribute('data-submit'))
         sortTable(table, form, savedTableBody);
 
-      formSubmit();
+      formSubmit(event);
     }
   });
 
@@ -265,17 +334,17 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     if(!form.hasAttribute('data-submit'))
       event.preventDefault();
 
-    formSubmit();
+    formSubmit(event);
   });
 
   form.addEventListener('force', (event) => {
 
-    formSubmit();
+    formSubmit(event);
   });
 
   form.addEventListener('paginate', (event) => {
 
-    formSubmit(true);
+    formSubmit(event,true);
   });