@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/modules/form.ts

@@ -1,103 +1,100 @@
 // @ts-nocheck
 // Create a link between two input/selects with one acting as setting a minimum value and the second a maximum
 // The link between the two will prevent the max input field form setting a lower value than the min and vice versa
-function inputRange(inputWrapper){
-
-  inputWrapper.addEventListener('change', function(e){
-
-    var min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
-    var max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
-
-    // Set attributes for input fields
-    Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input, index) => {
-
-      input.setAttribute('max',max);
-    });
-
-    Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input, index) => {
-
-      input.setAttribute('min',min);
-    });
-
-    // Hide select options if they are higher or lower than the min and max values
-    Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option, index) => {
-
-      if(parseInt(option.getAttribute('value')) > max)
-        option.classList.add('d-none');
-      else
-        option.classList.remove('d-none');
-    });
-
-    Array.from(inputWrapper.querySelectorAll('[data-max] select option')).forEach((option, index) => {
-
-      if(parseInt(option.getAttribute('value')) < min)
-        option.classList.add('d-none');
-      else
-        option.classList.remove('d-none');
-    });
-
-  }, false);
+function inputRange(inputWrapper) {
+  inputWrapper.addEventListener(
+    'change',
+    function (e) {
+      const min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
+      const max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
+
+      // Set attributes for input fields
+      Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input, index) => {
+        input.setAttribute('max', max);
+      });
+
+      Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input, index) => {
+        input.setAttribute('min', min);
+      });
+
+      // Hide select options if they are higher or lower than the min and max values
+      Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option, index) => {
+        if (parseInt(option.getAttribute('value')) > max) option.classList.add('d-none');
+        else option.classList.remove('d-none');
+      });
+
+      Array.from(inputWrapper.querySelectorAll('[data-max] select option')).forEach((option, index) => {
+        if (parseInt(option.getAttribute('value')) < min) option.classList.add('d-none');
+        else option.classList.remove('d-none');
+      });
+    },
+    false
+  );
 }
 
-function inputRedirect(inputWrapper){
-
-
-  inputWrapper.addEventListener('change', function(e){
-
-    if(inputWrapper.matches('[data-value-if]')) {
-
-      const url = inputWrapper.getAttribute('data-redirect');
-      const desiredValue = inputWrapper.getAttribute('data-value-if');
-
-      if(inputWrapper.value == desiredValue)
-        document.location.href = url;
-    }
-    else {
-
-      if(typeof inputWrapper.value != "undefined")
-        document.location.href = inputWrapper.value;
-    }
-
-  }, false);
+function inputRedirect(inputWrapper) {
+  inputWrapper.addEventListener(
+    'change',
+    function (e) {
+      if (inputWrapper.matches('[data-value-if]')) {
+        const url = inputWrapper.getAttribute('data-redirect');
+        const desiredValue = inputWrapper.getAttribute('data-value-if');
+
+        if (inputWrapper.value == desiredValue) document.location.href = url;
+      } else {
+        if (typeof inputWrapper.value != 'undefined') document.location.href = inputWrapper.value;
+      }
+    },
+    false
+  );
 }
 
 //
-function multipleFileUploads(wrapper){
-
+function multipleFileUploads(wrapper) {
   const fileTenplate = wrapper.querySelector('.row');
   const clone = fileTenplate.cloneNode(true);
   const addButton = wrapper.querySelector('[data-add]');
 
-  wrapper.addEventListener('click', function(e){
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('[data-add]')) {  // Add a new row upload file input fields
-
-        const tempClone = clone.cloneNode(true);
-        wrapper.insertBefore(tempClone,target);
-
-        if(addButton.matches('[data-maxfiles]') && Array.from(wrapper.querySelectorAll(':scope > .row')).length >= addButton.dataset.maxfiles)
-          addButton.setAttribute('disabled','disabled');
-
-      break;
-      }
-      if (target.matches('[data-delete]')) { // Delete the current row
-
-        let row = target.closest('.row');
-        row.remove();
-
-        if(addButton.matches('[data-maxfiles]') && Array.from(wrapper.querySelectorAll(':scope > .row')).length < addButton.dataset.maxfiles)
-          addButton.removeAttribute('disabled');
-
-      break;
+  wrapper.addEventListener(
+    'click',
+    function (e) {
+      for (let target = e.target; target && target != this; target = target.parentNode) {
+        if (target.matches('[data-add]')) {
+          // Add a new row upload file input fields
+
+          const tempClone = clone.cloneNode(true);
+          wrapper.insertBefore(tempClone, target);
+
+          if (
+            addButton.matches('[data-maxfiles]') &&
+            Array.from(wrapper.querySelectorAll(':scope > .row')).length >= addButton.dataset.maxfiles
+          )
+            addButton.setAttribute('disabled', 'disabled');
+
+          break;
+        }
+        if (target.matches('[data-delete]')) {
+          // Delete the current row
+
+          const row = target.closest('.row');
+          row.remove();
+
+          if (
+            addButton.matches('[data-maxfiles]') &&
+            Array.from(wrapper.querySelectorAll(':scope > .row')).length < addButton.dataset.maxfiles
+          )
+            addButton.removeAttribute('disabled');
+
+          break;
+        }
       }
-    }
-
-  }, false);
+    },
+    false
+  );
 }
 
 // Acts as an overall initialise function to trigger other functions.
 function form(formElement) {
-
   // Check for input range groups
   Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement, index) => {
     inputRange(arrayElement);
@@ -111,59 +108,60 @@ function form(formElement) {
     multipleFileUploads(arrayElement);
   });
 
-
   // Check the file size of a file when uploaded in case it exceeds the max file size set
-  formElement.addEventListener('change', function(e){
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('[type="file"][data-filesize]') && target.files && target.files[0]) {
-
+  formElement.addEventListener(
+    'change',
+    function (e) {
+      for (let target = e.target; target && target != this; target = target.parentNode) {
+        if (target.matches('[type="file"][data-filesize]') && target.files && target.files[0]) {
           const maxAllowedSize = target.dataset.filesize;
           if (target.files[0].size > maxAllowedSize) {
-
             target.value = '';
             alert('File too large');
           }
-        break;
+          break;
+        }
       }
-    }
-  }, false);
-
+    },
+    false
+  );
 
   // When a form is updated we may want to update some of the existing input fields; setting active fields when some data is selected.
-  formElement.addEventListener('change', function(e){
-
-    // Remove disabled attribute when a pre-selected input field equals a certain value
-    Array.from(formElement.querySelectorAll('select[data-activeif][data-equals],input[data-activeif][data-equals]')).forEach((arrayElement, index) => {
-
-      let group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
-      let selector = arrayElement.dataset.activeif;
-      let value = arrayElement.dataset.equals;
-      let testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
-
-      if(testElement.value == value){
-        arrayElement.removeAttribute('disabled');
-      }
-      else {
-        arrayElement.setAttribute('disabled','disabled');
-        arrayElement.value = '';
-      }
-    });
-
-    // Show this input wrapper when a pre-selected input field equals a certain value
-    Array.from(formElement.querySelectorAll('.form-control__wrapper[data-displayif][data-equals]')).forEach((arrayElement, index) => {
-
-      let group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
-      let selector = arrayElement.dataset.activeif;
-      let value = arrayElement.dataset.equals;
-      let testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
-
-      if(testElement.value == value)
-        arrayElement.classList.remove('d-none');
-      else
-        arrayElement.classList.add('d-none');
-    });
-
-  }, false);
+  formElement.addEventListener(
+    'change',
+    function (e) {
+      // Remove disabled attribute when a pre-selected input field equals a certain value
+      Array.from(
+        formElement.querySelectorAll('select[data-activeif][data-equals],input[data-activeif][data-equals]')
+      ).forEach((arrayElement, index) => {
+        const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
+        const selector = arrayElement.dataset.activeif;
+        const value = arrayElement.dataset.equals;
+        const testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
+
+        if (testElement.value == value) {
+          arrayElement.removeAttribute('disabled');
+        } else {
+          arrayElement.setAttribute('disabled', 'disabled');
+          arrayElement.value = '';
+        }
+      });
+
+      // Show this input wrapper when a pre-selected input field equals a certain value
+      Array.from(formElement.querySelectorAll('.form-control__wrapper[data-displayif][data-equals]')).forEach(
+        (arrayElement, index) => {
+          const group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
+          const selector = arrayElement.dataset.activeif;
+          const value = arrayElement.dataset.equals;
+          const testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
+
+          if (testElement.value == value) arrayElement.classList.remove('d-none');
+          else arrayElement.classList.add('d-none');
+        }
+      );
+    },
+    false
+  );
 }
 
-export default form
+export default form;

package/assets/ts/modules/helpers.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
-/** 
+/**
  * Global helper functions to help maintain and enhance framework elements.
- * @module Helpers 
+ * @module Helpers
  */
 
 /**
@@ -9,180 +9,174 @@
  * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
  */
 export const addBodyClasses = (body) => {
-  
-  body.classList.add("js-enabled");
+  body.classList.add('js-enabled');
 
-  if(navigator.userAgent.indexOf('MSIE')!==-1 || navigator.appVersion.indexOf('Trident/') > 0){
-    
-    body.classList.add("ie");
+  if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
+    body.classList.add('ie');
   }
 
-  return null
-}
+  return null;
+};
 
 /**
  * Add global events.
  * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
  */
 export const addGlobalEvents = (body) => {
-
-  const checkElements = function(hash){
-
-    const label = document.querySelector(`label[for="${hash.replace('#','')}"]`);
-    const summary = document.querySelector(hash+' summary');
+  const checkElements = function (hash) {
+    const label = document.querySelector(`label[for="${hash.replace('#', '')}"]`);
+    const summary = document.querySelector(hash + ' summary');
     const dialog = document.querySelector(`dialog${hash}`);
     const detail = document.querySelector(`detail${hash}`);
 
-    if(label instanceof HTMLElement)
-      label.click();
-    else if(summary instanceof HTMLElement)
-      summary.click();
-    else if(dialog instanceof HTMLElement)
-      dialog.showModal();
-    else if(detail instanceof HTMLElement)
-      detail.addAttribute('open');
-  }
+    if (label instanceof HTMLElement) label.click();
+    else if (summary instanceof HTMLElement) summary.click();
+    else if (dialog instanceof HTMLElement) dialog.showModal();
+    else if (detail instanceof HTMLElement) detail.addAttribute('open');
+  };
+
+  if (location.hash) checkElements(location.hash);
 
-  if(location.hash)
-    checkElements(location.hash);
+  window.addEventListener(
+    'hashchange',
+    function () {
+      checkElements(location.hash);
+    },
+    false
+  );
 
-  window.addEventListener('hashchange', function() { checkElements(location.hash); }, false);
+  addEventListener('popstate', (event) => {
+    if (event && event.state && event.state.type && event.state.type == 'pagination') {
+      const form = document.querySelector(`#${event.state.form}`);
+      const pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
 
-  addEventListener("popstate", (event) => {
+      if (pageInput) pageInput.value = event.state.page;
+      else form.innerHTML += `<input name="page" type="hidden" data-pagination="true" value="${event.state.page}" />`;
 
-    if(event && event.state && event.state.type && event.state.type == "pagination"){
-      let form = document.querySelector(`#${event.state.form}`);
-      let pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
-      
-      if(pageInput)
-        pageInput.value = event.state.page;
-      else
-        form.innerHTML += `<input name="page" type="hidden" data-pagination="true" value="${event.state.page}" />`
-      
-      form.dispatchEvent(new Event("submit"));
+      form.dispatchEvent(new Event('submit'));
     }
   });
 
-  document.addEventListener("submit", (event) => {
-
-    if (event && event.target instanceof HTMLElement && event.target.matches('form')){
-
-      let form = event.target;
+  document.addEventListener('submit', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.matches('form')) {
+      const form = event.target;
 
       // Reset password types
-      Array.from(form.querySelectorAll('[data-password-type]')).forEach((input,index) => {
-        input.setAttribute('type','password');
+      Array.from(form.querySelectorAll('[data-password-type]')).forEach((input, index) => {
+        input.setAttribute('type', 'password');
       });
 
-      if(form.querySelector(':invalid') || form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]')){
-        
+      if (
+        form.querySelector(':invalid') ||
+        form.querySelector('.pwd-checker[data-strength="1"]') ||
+        form.querySelector('.pwd-checker[data-strength="2"]')
+      ) {
         form.classList.add('was-validated');
         event.preventDefault();
       }
 
-      if(form.querySelector('iam-multiselect[data-is-required][data-error]')){
-        
+      if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {
         form.classList.add('was-validated');
         event.preventDefault();
       }
     }
-
   });
 
-  document.addEventListener("keydown", (e) => {
-
-    if(e.key === "Escape") {
-      
-      if(document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')){
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      if (document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')) {
         e.preventDefault();
         e.stopPropagation();
       }
     }
   });
 
-  Array.from(document.querySelectorAll('label progress')).forEach((progress,index) => {
-    let label = progress.closest('label');
+  Array.from(document.querySelectorAll('label progress')).forEach((progress, index) => {
+    const label = progress.closest('label');
 
-    label.setAttribute('data-percent',progress.getAttribute('value'));
+    label.setAttribute('data-percent', progress.getAttribute('value'));
   });
 
-  return null
-}
-
-export const isNumeric = function(str) {
-  if (typeof str != "string") return false // we only process strings!  
-  return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
-         !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
-}
-
-export const zeroPad = (num, places) => String(num).padStart(places, '0')
-
-export const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
-export const ucwords = (str) => str.split(' ').map(s => ucfirst(s)).join(' ')
-export const unsnake = (str) => str.replace(/_/g, ' ')
-export const snake = (str) => str.replace(/ /g, '_')
-export const safeID = function(str){
-
+  return null;
+};
+
+export const isNumeric = function (str) {
+  if (typeof str != 'string') return false; // we only process strings!
+  return (
+    !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+    !isNaN(parseFloat(str))
+  ); // ...and ensure strings of whitespace fail
+};
+
+export const zeroPad = (num, places) => String(num).padStart(places, '0');
+
+export const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+export const ucwords = (str) =>
+  str
+    .split(' ')
+    .map((s) => ucfirst(s))
+    .join(' ');
+export const unsnake = (str) => str.replace(/_/g, ' ');
+export const snake = (str) => str.replace(/ /g, '_');
+export const safeID = function (str) {
   str = str.toLowerCase();
   str = snake(str);
-  str = str.replace(/\W/g,'');
+  str = str.replace(/\W/g, '');
 
   return str;
-}
+};
 
-export const numberOfDays = function(startDateString:string,endDateString:string){
+export const numberOfDays = function (startDateString: string, endDateString: string) {
+  const convertStart = startDateString.split('/');
+  const convertEnd = endDateString.split('/');
+  const dateStart: any = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);
+  const dateEnd: any = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);
 
-  let convertStart = startDateString.split('/');
-  let convertEnd = endDateString.split('/');
-  let dateStart:any = new Date(convertStart[1]+'/'+convertStart[0]+'/'+convertStart[2]);
-  let dateEnd:any = new Date(convertEnd[1]+'/'+convertEnd[0]+'/'+convertEnd[2]);
+  if (dateStart == 'Invalid Date') throw 'Start date is not a valid date';
 
-  if(dateStart == "Invalid Date")
-    throw "Start date is not a valid date"
-
-  if(dateEnd == "Invalid Date")
-    throw "End date is not a valid date"
+  if (dateEnd == 'Invalid Date') throw 'End date is not a valid date';
 
   // To calculate the time difference of two dates
-  let diffTime = dateEnd.getTime() - dateStart.getTime();
-  let numberOfDays = (diffTime / (1000 * 3600 * 24) + 1);
+  const diffTime = dateEnd.getTime() - dateStart.getTime();
+  const numberOfDays = diffTime / (1000 * 3600 * 24) + 1;
+
+  if (numberOfDays < 0) throw 'The start date should be before the end date';
 
-  if(numberOfDays < 0)
-    throw "The start date should be before the end date";
-  
   return numberOfDays;
-}
+};
 // Used to get values from nested json objects
-export const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
-
-
-export const isTraversable = o => Array.isArray(o) || o !== null && ['function', 'object'].includes(typeof o);
-
-export const getSwipeDirection = (touchstartX,touchstartY,touchendX,touchendY) => {
-    
-  const limit = Math.tan(45 * 1.5 / 180 * Math.PI);  
-  let pageWidth = window.innerWidth || document.body.clientWidth;
-  let treshold = Math.max(1,Math.floor(0.01 * (pageWidth)));
-  let x = touchendX - touchstartX;
-  let y = touchendY - touchstartY;
-  let xy = Math.abs(x / y);
-  let yx = Math.abs(y / x);
+export const resolvePath = (object, path, defaultValue) =>
+  path
+    .split(/[\.\[\]\'\"]/)
+    .filter((p) => p)
+    .reduce((o, p) => (o ? o[p] : defaultValue), object);
+
+export const isTraversable = (o) => Array.isArray(o) || (o !== null && ['function', 'object'].includes(typeof o));
+
+export const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY) => {
+  const limit = Math.tan(((45 * 1.5) / 180) * Math.PI);
+  const pageWidth = window.innerWidth || document.body.clientWidth;
+  const treshold = Math.max(1, Math.floor(0.01 * pageWidth));
+  const x = touchendX - touchstartX;
+  const y = touchendY - touchstartY;
+  const xy = Math.abs(x / y);
+  const yx = Math.abs(y / x);
   if (Math.abs(x) > treshold || Math.abs(y) > treshold) {
-      if (yx <= limit) {
-          if (x < 0) {
-              return "left";
-          } else {
-            return "right";
-          }
+    if (yx <= limit) {
+      if (x < 0) {
+        return 'left';
+      } else {
+        return 'right';
       }
-      if (xy <= limit) {
-          if (y < 0) {
-            return "top";
-          } else {
-            return "bottom";
-          }
+    }
+    if (xy <= limit) {
+      if (y < 0) {
+        return 'top';
+      } else {
+        return 'bottom';
       }
+    }
   } else {
-    return "tap";
+    return 'tap';
   }
-}
+};