@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/modules/dynamicEvents.ts

@@ -1,185 +1,152 @@
 // @ts-nocheck
 
-// Create the event listeners 
+// Create the event listeners
 const createDynamicEvents = () => {
-
   // Change event
   document.addEventListener('change', (event) => {
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))
-      splitEvents(event.target,event.target.closest('[data-change-events]').getAttribute('data-change-events'));
+      splitEvents(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));
   });
   document.addEventListener('keyup', (event) => {
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))
-      splitEvents(event.target,event.target.closest('[data-change-events]').getAttribute('data-change-events'));
+      splitEvents(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));
   });
 
   // Click event
   document.addEventListener('click', (event) => {
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-click-events]'))
-      splitEvents(event.target,event.target.closest('[data-click-events]').getAttribute('data-click-events'));
+      splitEvents(event.target, event.target.closest('[data-click-events]').getAttribute('data-click-events'));
   });
 };
 
 // Parse the JSON and trigger the events, this may be singular or multiple set of events
-const splitEvents = (element,events) => {
-
-  // an empty events will trigger looking up the dom chain for 
-  if(!events){
+const splitEvents = (element, events) => {
+  // an empty events will trigger looking up the dom chain for
+  if (!events) {
     events = element.parentNode.getAttribute('data-change-events');
   }
-  
+
   // If still empty bail out
-  if(!events)
-    return false;
+  if (!events) return false;
 
   // Split out each event
   Array.from(JSON.parse(events)).forEach((event, index) => {
-    checkConditions(element,event);
+    checkConditions(element, event);
   });
 };
-    
-const checkConditions = (element,event) => {
-
-  if("matches" in event){
-    if(event['matches'] == 'any')
-      runEvent(element,event,'if');
-    else if(element.value == event.matches)
-      runEvent(element,event,'if');
-    else
-      runEvent(element,event,'else');
-    
-    return false;
-  }
-  else if("in-list" in event){
 
-    // Pass the matched datalist element instead of the triggered element
-    let match = document.querySelector(`${event['in-list']} option[value="${element.value}"]`);
+const checkConditions = (element, event) => {
+  if ('matches' in event) {
+    if (event['matches'] == 'any') runEvent(element, event, 'if');
+    else if (element.value == event.matches) runEvent(element, event, 'if');
+    else runEvent(element, event, 'else');
 
-    if(document.querySelector(`${event['in-list']} option[value="${element.value}"]`)){
+    return false;
+  } else if ('in-list' in event) {
+    // Pass the matched datalist element instead of the triggered element
+    const match = document.querySelector(`${event['in-list']} option[value="${element.value}"]`);
 
-      runEvent(match,event,'if');
-    }
-    else
-      runEvent(match,event,'else');
+    if (document.querySelector(`${event['in-list']} option[value="${element.value}"]`)) {
+      runEvent(match, event, 'if');
+    } else runEvent(match, event, 'else');
 
     return false;
-  }
-  else if("event" in event){
-    runEvent(element,event,'event');
+  } else if ('event' in event) {
+    runEvent(element, event, 'event');
   }
 };
 
-const runEvent = (element,event,eventType) => {
-
-  if(eventType in event == false)
-    return false;
-
-  switch (event[eventType]){
-    case "hide":
+const runEvent = (element, event, eventType) => {
+  if (eventType in event == false) return false;
 
-      if(document.querySelector(event['target'])){
-          
-        let hideElement =  document.querySelector(event['target']);
+  switch (event[eventType]) {
+    case 'hide':
+      if (document.querySelector(event['target'])) {
+        const hideElement = document.querySelector(event['target']);
         hideElement.classList.add('js-hide');
 
         Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
-          
-            input.removeAttribute('required');
+          input.removeAttribute('required');
         });
       }
       break;
-    case "show":
-
-      if(document.querySelector(event['target'])){
-            
-        let showElement =  document.querySelector(event['target']);
+    case 'show':
+      if (document.querySelector(event['target'])) {
+        const showElement = document.querySelector(event['target']);
         showElement.classList.remove('js-hide');
 
         Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
-          
-          if(!input.closest('.js-hide'))
-            input.setAttribute('required','true');
+          if (!input.closest('.js-hide')) input.setAttribute('required', 'true');
         });
       }
       break;
-    case "populate-form":
-      populateForm(element,event);
+    case 'populate-form':
+      populateForm(element, event);
       break;
-    case "dispatchEvent":
-      let theEvent = new Event(event['value']);
+    case 'dispatchEvent':
+      const theEvent = new Event(event['value']);
       document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
       break;
-    case "setAttribute":
-
-      Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
-        element.setAttribute(event['attribute'],event['value']);
+    case 'setAttribute':
+      Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element, index) {
+        element.setAttribute(event['attribute'], event['value']);
       });
       break;
-    case "focus":
+    case 'focus':
       document.querySelector(`${event['target']}`).focus();
       break;
-    case "removeAttribute":
-      Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
+    case 'removeAttribute':
+      Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element, index) {
         element.removeAttribute(event['attribute']);
       });
       break;
-    case "updateValue":
-      document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : "";
-      
-      let changeEvent = new Event('change');
+    case 'updateValue':
+      document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : '';
+
+      const changeEvent = new Event('change');
       document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);
       break;
-    case "submitForm":
+    case 'submitForm':
       document.querySelector(`${event['target']}`).submit();
       break;
-    case "openLink":
-
-      if(document.querySelector(`${event['target']}`).value)
+    case 'openLink':
+      if (document.querySelector(`${event['target']}`).value)
         window.location.href = document.querySelector(`${event['target']}`).value;
 
       break;
     default:
       break;
   }
-}
+};
 
-const populateForm = function (element,event) {
-  
-  let values = JSON.parse(element.getAttribute('data-values'));
-  let form = document.querySelector(event['target']);
+const populateForm = function (element, event) {
+  const values = JSON.parse(element.getAttribute('data-values'));
+  const form = document.querySelector(event['target']);
 
-  if(!values)
-    return false;
+  if (!values) return false;
 
   Object.keys(values).forEach((field, index) => {
-
-    if(document.getElementById(field) && document.getElementById(field).tagName == "SPAN")
+    if (document.getElementById(field) && document.getElementById(field).tagName == 'SPAN')
       document.getElementById(field).innerHTML = values[field];
 
-
-    if(form.querySelector(`select[name="${field}"] [value="${values[field]}"]`)){
-
+    if (form.querySelector(`select[name="${field}"] [value="${values[field]}"]`)) {
       form.querySelector(`select[name="${field}"]`).value = values[field];
 
-      if(element.hasAttribute('data-lock-fields'))
-        form.querySelector(`select[name="${field}"]`).disabled = true;
-    }
-    else if(form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`)){
-      
-      Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function(input,index){
+      if (element.hasAttribute('data-lock-fields')) form.querySelector(`select[name="${field}"]`).disabled = true;
+    } else if (form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`)) {
+      Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function (input, index) {
         input.disabled = true;
       });
 
       form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`).checked = true;
       form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`).disabled = false;
-    }
-    else if(form.querySelector(`input[name="${field}"]`)){
+    } else if (form.querySelector(`input[name="${field}"]`)) {
       form.querySelector(`input[name="${field}"]`).value = values[field];
 
-      if(element.hasAttribute('data-lock-fields'))
-        form.querySelector(`input[name="${field}"]`).setAttribute('readonly','true');
+      if (element.hasAttribute('data-lock-fields'))
+        form.querySelector(`input[name="${field}"]`).setAttribute('readonly', 'true');
     }
   });
-}
+};
 
-export default createDynamicEvents;
+export default createDynamicEvents;

package/assets/ts/modules/file-upload.ts

@@ -1,49 +1,52 @@
 // @ts-nocheck
 function fileupload(form, callback) {
-
   const input = form.querySelector('[type="file"]');
   const label = form.querySelector(`[for="${input.getAttribute('id')}"]`);
   const add = form.querySelector('.file-upload__add');
 
-  form.querySelector('button').remove()
-
-  input.addEventListener("change", function( e ) {
-    // prevent default to allow drop
-
-    let url = form.getAttribute('action');
-    let formData = new FormData(form);
-
-    input.setAttribute('disabled', 'disabled');
-
-    fetch(url, {
-      method: 'POST',
-      body: formData
-    })
-    .then(() => {
-
-      form.classList.add('file-uploaded')
-      label.innerHTML = 'File uploaded';
-
-      if(typeof callback == "function")
-        callback();
-    })
-
-
-  }, false);
-
-
-  form.addEventListener("submit", function( e ) {
-    // prevent default to allow drop
-    e.preventDefault();
-  }, false);
-
-  add.addEventListener("click", function( e ) {
-
-    form.classList.remove('file-uploaded')
-    label.innerHTML = 'Select a file to upload';
-    input.removeAttribute('disabled');
-
-  }, false);
+  form.querySelector('button').remove();
+
+  input.addEventListener(
+    'change',
+    function (e) {
+      // prevent default to allow drop
+
+      const url = form.getAttribute('action');
+      const formData = new FormData(form);
+
+      input.setAttribute('disabled', 'disabled');
+
+      fetch(url, {
+        method: 'POST',
+        body: formData,
+      }).then(() => {
+        form.classList.add('file-uploaded');
+        label.innerHTML = 'File uploaded';
+
+        if (typeof callback == 'function') callback();
+      });
+    },
+    false
+  );
+
+  form.addEventListener(
+    'submit',
+    function (e) {
+      // prevent default to allow drop
+      e.preventDefault();
+    },
+    false
+  );
+
+  add.addEventListener(
+    'click',
+    function (e) {
+      form.classList.remove('file-uploaded');
+      label.innerHTML = 'Select a file to upload';
+      input.removeAttribute('disabled');
+    },
+    false
+  );
 }
 
 export default fileupload;

package/assets/ts/modules/fileupload.ts

@@ -1,6 +1,5 @@
 // @ts-nocheck
 function fileupload(fileupload: Element, wrapper: Element) {
-
   const filesWrapper = wrapper.querySelector('.files');
   const dropArea = wrapper.querySelector('.drop-area');
   const input = fileupload.querySelector('input');
@@ -12,28 +11,23 @@ function fileupload(fileupload: Element, wrapper: Element) {
   const cloneInput = input.cloneNode();
   dropArea.append(cloneInput);
 
-  let checkFileExt = function(filename){
-
-    if(!input.hasAttribute('accept'))
-      return true;
+  const checkFileExt = function (filename) {
+    if (!input.hasAttribute('accept')) return true;
 
     const nameExtension = filename.split('.').pop();
     const acceptedTypes = input.getAttribute('accept');
 
-    if(acceptedTypes.includes(nameExtension))
-      return true;
-  
+    if (acceptedTypes.includes(nameExtension)) return true;
+
     return false;
-  }
+  };
 
   wrapper.addEventListener('click', (event) => {
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')){
-
+    if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {
       const button = event.target.closest('.btn-primary');
 
       // If the input allows multiples then use the buffer clone input
-      
+
       errorMsgExt.classList.remove('d-block');
       errorMsgSize.classList.remove('d-block');
       const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;
@@ -43,22 +37,18 @@ function fileupload(fileupload: Element, wrapper: Element) {
   });
 
   wrapper.addEventListener('click', (event) => {
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('.files button')){
-
+    if (event && event.target instanceof HTMLElement && event.target.closest('.files button')) {
       const dt = new DataTransfer();
       const { files } = input;
       const button = event.target.closest('.files button');
 
-
       for (let i = 0; i < files.length; i++) {
-        const file = files[i]
-        
-        if(file.name != button.getAttribute('data-file'))
-          dt.items.add(file) // here you exclude the file. thus removing it.
+        const file = files[i];
+
+        if (file.name != button.getAttribute('data-file')) dt.items.add(file); // here you exclude the file. thus removing it.
       }
-      
-      input.files = dt.files // Assign the updates list
+
+      input.files = dt.files; // Assign the updates list
 
       const changeEvent = new Event('change');
       input.dispatchEvent(changeEvent);
@@ -67,29 +57,26 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
   // Buffer input change event
   cloneInput.addEventListener('change', (event) => {
-
-    if(input.hasAttribute('multiple')){
-
+    if (input.hasAttribute('multiple')) {
       const filesArray = [...input.files, ...cloneInput.files];
-      
-      let fileNames = [];
+
+      const fileNames = [];
 
       const dt = new DataTransfer();
 
       for (let i = 0; i < filesArray.length; i++) {
-        const file = filesArray[i]
+        const file = filesArray[i];
+
+        const size = file.size / 1000;
 
-        const size = file.size/1000;
+        if (!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize) && checkFileExt(file.name))
+          dt.items.add(file); // here you exclude the file. thus removing it.
 
-        if(!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize) && checkFileExt(file.name))
-          dt.items.add(file) // here you exclude the file. thus removing it.
-  
-  
-        if(!checkFileExt(file.name)){
+        if (!checkFileExt(file.name)) {
           errorMsgExt.classList.add('d-block');
         }
-  
-        if(size > maxSize){
+
+        if (size > maxSize) {
           errorMsgSize.classList.add('d-block');
         }
 
@@ -97,9 +84,7 @@ function fileupload(fileupload: Element, wrapper: Element) {
       }
 
       input.files = dt.files;
-    }
-    else {
-      
+    } else {
       input.files = cloneInput.files;
     }
 
@@ -107,67 +92,60 @@ function fileupload(fileupload: Element, wrapper: Element) {
     input.dispatchEvent(changeEvent);
   });
 
-
   cloneInput.addEventListener('dragenter', (event) => {
-
     cloneInput.classList.add('focus');
   });
 
   cloneInput.addEventListener('dragleave', (event) => {
-
     cloneInput.classList.remove('focus');
   });
 
   cloneInput.addEventListener('drop', (event) => {
-
     cloneInput.classList.remove('focus');
   });
 
   input.addEventListener('change', (event) => {
+    if (input.files.length == 1) {
+      const file = input.files[0];
 
-    if(input.files.length == 1) {
+      const size = file.size / 1000;
 
-      let file = input.files[0];
-
-      const size = file.size/1000;
-
-      if(!checkFileExt(file.name)){
+      if (!checkFileExt(file.name)) {
         errorMsgExt.classList.add('d-block');
 
         const dt = new DataTransfer();
         input.files = dt.files;
       }
-      if(size > maxSize){
+      if (size > maxSize) {
         errorMsgSize.classList.add('d-block');
 
         const dt = new DataTransfer();
         input.files = dt.files;
       }
     }
-    
+
     // Reset
     filesWrapper.innerHTML = '';
 
-    for (const file of input.files){
+    for (const file of input.files) {
       filesWrapper.innerHTML += `<span class="file" part="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
     }
 
-    const elementChangeEvent = new CustomEvent('elementchange', {detail: {"files": input.files}});
+    const elementChangeEvent = new CustomEvent('elementchange', { detail: { files: input.files } });
     fileupload.dispatchEvent(elementChangeEvent);
 
-    if(input.files.length == 0){
+    if (input.files.length == 0) {
       const emptyEvent = new CustomEvent('empty');
       fileupload.dispatchEvent(emptyEvent);
     }
   });
 
-  if(fileupload.hasAttribute('data-filename')){
-    
-    let filename = fileupload.getAttribute('data-filename');
+  if (fileupload.hasAttribute('data-filename')) {
+    const filename = fileupload.getAttribute('data-filename');
 
-    if(filename)
+    if (filename)
       filesWrapper.innerHTML = `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
   }
 }
 
-export default fileupload;
+export default fileupload;

package/assets/ts/modules/filterlist.ts

@@ -1,46 +1,40 @@
 // @ts-nocheck
-function filterlist(list: Element, input:Element) {
-
-  addFilterlistEventListeners(list,input);
+function filterlist(list: Element, input: Element) {
+  addFilterlistEventListeners(list, input);
 }
 
-function addFilterlistEventListeners(list: Element, input:Element) {
-
-  var timer;
+function addFilterlistEventListeners(list: Element, input: Element) {
+  let timer;
 
   input.addEventListener('keyup', (event) => {
-
     clearTimeout(timer);
-      timer = setTimeout(function(){
-        filterTheList(list,input.value);
-      }, 500);
+    timer = setTimeout(function () {
+      filterTheList(list, input.value);
+    }, 500);
   });
 
   input.addEventListener('change', (event) => {
-
     clearTimeout(timer);
-    
+
     filterTheList(list, input.value);
   });
 }
 
-export const filterTheList =  function (list: Element, searchTerm){
-
+export const filterTheList = function (list: Element, searchTerm) {
   Array.from(list.querySelectorAll(':scope > li')).forEach((item, index) => {
-    let content = item.textContent.toLowerCase();
+    const content = item.textContent.toLowerCase();
 
     item.classList.add('d-none');
 
-    if(content.includes(searchTerm.toLowerCase()))
-      item.classList.remove('d-none');
+    if (content.includes(searchTerm.toLowerCase())) item.classList.remove('d-none');
   });
 
   // Data layer Web component created
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
-    "event": "Filtered list",
-    "value": searchTerm
+    event: 'Filtered list',
+    value: searchTerm,
   });
-}
+};
 
 export default filterlist;