@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -1,133 +1,113 @@
 // @ts-nocheck
-function createAppliedFilters(container,filters) {
-
-
-  function addFilterButton (filters, input,notSet=true){
-
+function createAppliedFilters(container, filters) {
+  function addFilterButton(filters, input, notSet = true) {
     let shouldRemoveFilter = false;
     let inputName = input.getAttribute('name');
 
-    if(!inputName){ return false; }
-    
-    if(inputName.includes('[]')){
-      inputName = inputName.replace('[]',`[${input.value}]`);
+    if (!inputName) {
+      return false;
+    }
+
+    if (inputName.includes('[]')) {
+      inputName = inputName.replace('[]', `[${input.value}]`);
     }
 
     let filter = filters.querySelector(`[data-name="${inputName}"]`);
 
-    if(filter && input.getAttribute('type') == 'checkbox')
-      shouldRemoveFilter = !input.checked ? true : false;
+    if (filter && input.getAttribute('type') == 'checkbox') shouldRemoveFilter = !input.checked ? true : false;
+
+    const filterText = input.getAttribute('data-filter-text');
 
-    let filterText = input.getAttribute('data-filter-text');
-    
-    if(!filter) {
+    if (!filter) {
       filter = document.createElement('button');
       filters.appendChild(filter);
     }
-    
-    filter.setAttribute('type','button')
+
+    filter.setAttribute('type', 'button');
     filter.classList.add('filter');
     filter.classList.add('tag');
 
-    if(notSet)
-      filter.classList.add('tag--not-set');
+    if (notSet) filter.classList.add('tag--not-set');
 
-    filter.setAttribute('data-name',inputName);
+    filter.setAttribute('data-name', inputName);
 
     filter.innerHTML = filterText.replace('$value', input.value);
 
     // If the value
-    if(!input.value || shouldRemoveFilter)
-      filter.remove();
-
-
+    if (!input.value || shouldRemoveFilter) filter.remove();
 
     // If input has an ancestor with data-filter and all of inputs in that parent have been filled in then we need to transform the filter
-    if(input.parentNode.closest('[data-filter-text]')){
-      let parent = input.parentNode.closest('[data-filter-text]');
+    if (input.parentNode.closest('[data-filter-text]')) {
+      const parent = input.parentNode.closest('[data-filter-text]');
       let allValuesSet = true;
-      inputName = "";
+      inputName = '';
 
-      parent.querySelectorAll('input').forEach((element,index) => {
-
-        let name = element.getAttribute('name');
+      parent.querySelectorAll('input').forEach((element, index) => {
+        const name = element.getAttribute('name');
 
         // create a joined inputname for the parent filter
-        inputName += `${index!=0?',':''}${name}`;
-
-        if(filters.querySelector(`[data-name="${name}"]`))
-          filters.querySelector(`[data-name="${name}"]`).remove();
+        inputName += `${index != 0 ? ',' : ''}${name}`;
 
-        if(element.value){
+        if (filters.querySelector(`[data-name="${name}"]`)) filters.querySelector(`[data-name="${name}"]`).remove();
 
-          let childFilter = document.createElement('button');
-          childFilter.setAttribute('type','button')
+        if (element.value) {
+          const childFilter = document.createElement('button');
+          childFilter.setAttribute('type', 'button');
           childFilter.classList.add('filter');
           childFilter.classList.add('tag');
-          
-          if(notSet)
-            filter.classList.add('tag--not-set');
-          
-          childFilter.setAttribute('data-name',name);
+
+          if (notSet) filter.classList.add('tag--not-set');
+
+          childFilter.setAttribute('data-name', name);
           childFilter.innerHTML = filterText.replace('$value', element.value);
           filters.appendChild(childFilter);
-        }
-        else
-          allValuesSet = false;
+        } else allValuesSet = false;
       });
 
-      
-      if(filters.querySelector(`[data-name="${inputName}"]`))
+      if (filters.querySelector(`[data-name="${inputName}"]`))
         filters.querySelector(`[data-name="${inputName}"]`).remove();
 
-
-      if(allValuesSet){
-
+      if (allValuesSet) {
         let newFilterText = parent.getAttribute('data-filter-text');
-        parent.querySelectorAll('input').forEach((element,index) => {
-          
-          let name = element.getAttribute('name');
+        parent.querySelectorAll('input').forEach((element, index) => {
+          const name = element.getAttribute('name');
 
           // Remove all the child filter tags
-          if(filters.querySelector(`[data-name="${name}"]`))
-            filters.querySelector(`[data-name="${name}"]`).remove();
+          if (filters.querySelector(`[data-name="${name}"]`)) filters.querySelector(`[data-name="${name}"]`).remove();
 
-          newFilterText = newFilterText.replace(`$${index+1}`,element.value);
+          newFilterText = newFilterText.replace(`$${index + 1}`, element.value);
         });
 
-        let parentFilter = document.createElement('button');
-        parentFilter.setAttribute('type','button')
+        const parentFilter = document.createElement('button');
+        parentFilter.setAttribute('type', 'button');
         parentFilter.classList.add('filter');
         parentFilter.classList.add('tag');
-            
-        if(notSet)
-          filter.classList.add('tag--not-set');
 
-        parentFilter.setAttribute('data-name',inputName);
+        if (notSet) filter.classList.add('tag--not-set');
+
+        parentFilter.setAttribute('data-name', inputName);
         parentFilter.innerHTML = newFilterText;
         filters.appendChild(parentFilter);
       }
-
-
     }
-
   }
 
   // check for inputs on load
-  Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
-
-    addFilterButton(filters, input, false)
+  Array.from(
+    container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
+  ).forEach((input, index) => {
+    addFilterButton(filters, input, false);
   });
 
-  let dialog = container.closest('dialog')
-  
-  if(dialog){
-    
-    let observer = new MutationObserver(function(event)  {
-      if (event[0].attributeName == 'open') {
-        Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
+  const dialog = container.closest('dialog');
 
-          addFilterButton(filters, input, false)
+  if (dialog) {
+    const observer = new MutationObserver(function (event) {
+      if (event[0].attributeName == 'open') {
+        Array.from(
+          container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
+        ).forEach((input, index) => {
+          addFilterButton(filters, input, false);
         });
       }
     });
@@ -135,86 +115,75 @@ function createAppliedFilters(container,filters) {
     observer.observe(dialog, { attributes: true });
   }
 
-
-  
-
-  container.addEventListener('tags-set', function(event){
-
+  container.addEventListener('tags-set', function (event) {
     filters.innerHTML = '';
-    Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
-
-      addFilterButton(filters, input, false)
-    });  
+    Array.from(
+      container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
+    ).forEach((input, index) => {
+      addFilterButton(filters, input, false);
+    });
   });
 
-
   // check for change in displayed inputs
-  Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
-
-    input.addEventListener('change', function(event){
-
-      if(!container.hasAttribute('data-keep-same'))
-        addFilterButton(filters, input);
+  Array.from(
+    container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
+  ).forEach((input, index) => {
+    input.addEventListener('change', function (event) {
+      if (!container.hasAttribute('data-keep-same')) addFilterButton(filters, input);
 
       event.stopPropagation(); // Don't allow the below event handler to trigger
     });
   });
 
   // Some change event aren't getting triggered above so this event listener on the container will pick them up. This happens with input in modals
-  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]');
-      if(!container.hasAttribute('data-keep-same'))
-        addFilterButton(filters, input);
+  container.addEventListener('change', function (event) {
+    if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')) {
+      const input = event.target.closest('input[data-filter-text]');
+      if (!container.hasAttribute('data-keep-same')) addFilterButton(filters, input);
     }
   });
 
-  filters.addEventListener('click', function(event){
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('.filter')){
-      let filter = event.target.closest('.filter');
-      let names = filter.getAttribute('data-name').split(',')
-
-      for(var t=0;t<names.length;t++){
-        let name = names[t];
-        let selector = `[name="${name}"]`;
-
-        if(name.match(/\[(.*)\]/)){
-          let newName = name.replace(/\[(.*)\]/,`[]`);
-          let value = name.replace(/.*\[(.*)\]/,`$1`);
-          selector = `[value="${value}"]`;
-        }
+  filters.addEventListener(
+    'click',
+    function (event) {
+      if (event && event.target instanceof HTMLElement && event.target.closest('.filter')) {
+        const filter = event.target.closest('.filter');
+        const names = filter.getAttribute('data-name').split(',');
+
+        for (let t = 0; t < names.length; t++) {
+          const name = names[t];
+          let selector = `[name="${name}"]`;
+
+          if (name.match(/\[(.*)\]/)) {
+            const newName = name.replace(/\[(.*)\]/, `[]`);
+            const value = name.replace(/.*\[(.*)\]/, `$1`);
+            selector = `[value="${value}"]`;
+          }
 
-        let inputs = container.querySelectorAll(selector);
+          const inputs = container.querySelectorAll(selector);
 
-        for(var i=0;i<inputs.length;i++){
-          let input = inputs[i];
+          for (let i = 0; i < inputs.length; i++) {
+            const input = inputs[i];
 
+            if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox') {
+              input.value = '';
 
-          if(input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox'){
-            input.value = "";
-            
-            var event = new Event('force');
-            if(!container.hasAttribute('data-nosubmit'))
-              input.closest('form').dispatchEvent(event);
-          }
-          else {
-            input.checked = false;
+              var event = new Event('force');
+              if (!container.hasAttribute('data-nosubmit')) input.closest('form').dispatchEvent(event);
+            } else {
+              input.checked = false;
 
-            var event = new Event('force');
-            if(!container.hasAttribute('data-nosubmit'))
-              input.closest('form').dispatchEvent(event);
+              var event = new Event('force');
+              if (!container.hasAttribute('data-nosubmit')) input.closest('form').dispatchEvent(event);
+            }
           }
         }
-      }
-
-      filter.remove();
-    }
-
-  }, false);
-
 
+        filter.remove();
+      }
+    },
+    false
+  );
 }
 
-export default createAppliedFilters;
+export default createAppliedFilters;

package/assets/ts/modules/card.module.ts

@@ -14,33 +14,28 @@ export const cardHTML = `<div class="card__head" part="head">
   <slot name="footer"></slot>
 </div>`;
 
-
-export const setupCard = (cardComponent:any) => {
-
+export const setupCard = (cardComponent: any) => {
   cardComponent.classList.add('card');
-  const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
-  const cardBody =  cardComponent.shadowRoot.querySelector('.card__body');
-
-  if(cardComponent.hasAttribute('data-image')){
+  const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
+  const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
 
+  if (cardComponent.hasAttribute('data-image')) {
     cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-image')}" alt="" loading="lazy" part="image" />`;
   }
 
-
   // Inset the HTML for the data total or icon fallback
-  if(cardComponent.hasAttribute('data-total')){
-
-    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`);
-  }
-  else if(cardComponent.querySelector('[slot="total-icon"]')){
-    
+  if (cardComponent.hasAttribute('data-total')) {
+    cardBody.insertAdjacentHTML(
+      'beforeend',
+      `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`
+    );
+  } else if (cardComponent.querySelector('[slot="total-icon"]')) {
     cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
   }
 
-  if(!cardComponent.querySelector('[slot="badges"]')){
+  if (!cardComponent.querySelector('[slot="badges"]')) {
     cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');
-  }
-  else{
+  } else {
     cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');
   }
-}
+};