@iamproperty/components 5.1.0-beta → 5.1.0-beta11

package/assets/ts/modules/carousel.ts

@@ -1,33 +1,32 @@
 // @ts-nocheck
-function carousel(carouselElement) {
+function carousel(carouselElement, row) {
 
   var scrollTimeout;
 
   let carouselInner = carouselElement.querySelector('.carousel__inner');
-  let itemCount = carouselElement.querySelectorAll('.carousel__item').length;
-  let cols = carouselElement.getAttribute('data-cols');
-  let smCols = carouselElement.getAttribute('data-sm-cols');
-  let mdCols = carouselElement.getAttribute('data-md-cols');
-
-  carouselElement.querySelector('.carousel__controls a').setAttribute('aria-current', true);
+  let carouselControls = carouselElement.querySelector('.carousel__controls');
+  let itemCount = row.querySelectorAll('.col').length;
 
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
   carouselInner.addEventListener('scroll', function(e){
     clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function(){ 
+    scrollTimeout = setTimeout(function(){
 
       let scrollArea = carouselInner.clientWidth;
       let scrollWidth = carouselInner.scrollWidth;
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-      let lastItemOffset = carouselElement.querySelector('.carousel__item:last-child').offsetLeft;
+      let lastItemOffset = row.querySelector('.col:last-child').offsetLeft + 50;
+
+      if(carouselInner.scrollLeft + scrollArea >= lastItemOffset)
+        targetSlide = itemCount;
 
-      Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-        link.removeAttribute('aria-current');
+      Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
+        button.removeAttribute('aria-current');
       });
 
       carouselElement.querySelector('.control-'+targetSlide).setAttribute('aria-current', true);
-      
+
       // Disable the previous button
       if(targetSlide == 1)
         carouselElement.querySelector('.btn-prev').setAttribute('disabled','disabled');
@@ -35,29 +34,29 @@ function carousel(carouselElement) {
         carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
 
       // Disable the next button if the last item is in view
-      if(carouselInner.scrollLeft + scrollArea > lastItemOffset)
+      if(targetSlide == itemCount)
         carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
       else
         carouselElement.querySelector('.btn-next').removeAttribute('disabled');
-
+      
     }, 100); 
 
   }, false);
 
   // when the buttons are used we need to make sure the carousel scrolls to the correct place
-  carouselElement.addEventListener('click', function(e){
+  carouselControls.addEventListener('click', function(e){
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.carousel__controls a')) {
+      if (typeof target.matches == "function" && target.matches('button')) {
         
         e.preventDefault();
 
-        Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-          link.removeAttribute('aria-current');
+        Array.from(carouselControls.querySelectorAll('button')).forEach((button, index) => {
+          button.removeAttribute('aria-current');
         });
         target.setAttribute('aria-current', true);
-
-        const el = document.querySelector(target.getAttribute('href'));
+        
+        const el = row.querySelector(`*:nth-child(${target.getAttribute('data-slide')})`);
 
         carouselInner.scroll({
           top: 0,
@@ -69,11 +68,11 @@ function carousel(carouselElement) {
       }
     }
   }, false);
-
+  
   carouselElement.addEventListener('click', function(e){
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.btn-next, .btn-prev')) {
+      if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {
         
         e.preventDefault();
         let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
@@ -87,17 +86,6 @@ function carousel(carouselElement) {
       }
     }
   }, false);
-
-
-  // Add responsive hide button classes
-  if(itemCount == 1)
-    carouselElement.classList.add('hide-btns');
-
-  if(smCols >= itemCount)
-    carouselElement.classList.add('hide-sm-btns');
-
-  if(mdCols >= itemCount)
-    carouselElement.classList.add('hide-md-btns');
 }
 
 export default carousel

package/assets/ts/modules/dynamicEvents.ts

@@ -77,43 +77,63 @@ const runEvent = (element,event,eventType) => {
   switch (event[eventType]){
     case "hide":
 
-      let hideElement =  document.querySelector(event['target'])
-      hideElement.classList.add('js-hide');
-
-      Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
-        
-          input.removeAttribute('required');
-      });
+      if(document.querySelector(event['target'])){
+          
+        let hideElement =  document.querySelector(event['target']);
+        hideElement.classList.add('js-hide');
+
+        Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+          
+            input.removeAttribute('required');
+        });
+      }
       break;
     case "show":
 
-      let 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(document.querySelector(event['target'])){
+            
+        let 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');
+        });
+      }
+      break;
+    case "populate-form":
+      populateForm(element,event);
+      break;
+    case "dispatchEvent":
+      let theEvent = new Event(event['value']);
+      document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
       break;
-      case "populate-form":
-        populateForm(element,event);
-        break;
-      case "dispatchEvent":
-        let theEvent = new Event(event['value']);
-        document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
-        break;
     case "setAttribute":
-      document.querySelector(`${event['target']}`).setAttribute(event['attribute'],event['value']);
+
+      Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
+        element.setAttribute(event['attribute'],event['value']);
+      });
       break;
     case "removeAttribute":
-      document.querySelector(`${event['target']}`).removeAttribute(event['attribute']);
+      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');
       document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);
+      break;
+    case "submitForm":
+      document.querySelector(`${event['target']}`).submit();
+      break;
+    case "openLink":
+
+      if(document.querySelector(`${event['target']}`).value)
+        window.location.href = document.querySelector(`${event['target']}`).value;
+
       break;
     default:
       break;

package/assets/ts/modules/helpers.ts

@@ -66,7 +66,12 @@ export const addGlobalEvents = (body) => {
 
       let form = event.target;
 
-      if(form.querySelector(':invalid')){
+      // Reset password types
+      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"]')){
         
         form.classList.add('was-validated');
         event.preventDefault();
@@ -97,4 +102,10 @@ export const safeID = function(str){
   str = str.replace(/\W/g,'');
 
   return str;
-}
+}
+
+// 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);

package/assets/ts/modules/inputs.ts

@@ -1,4 +1,6 @@
 // @ts-nocheck
+import hibpCheck from '../vendor/hibp'
+
 const extendInputs = (body) => {
 
   function loadInput(){
@@ -79,6 +81,10 @@ const extendInputs = (body) => {
 
       if(input.hasAttribute('maxlength') && input.nextElementSibling)
         input.nextElementSibling.setAttribute("data-count", input.value.length);
+
+
+      if(input.hasAttribute('data-strength-checker'))
+        checkPWDStrength(input);
     }
   });
 
@@ -151,7 +157,80 @@ export const setMaxlengthVars = (input) => {
 
 export const changeType = (input,type) => {
 
+  if(input.hasAttribute('type') && input.getAttribute('type') == 'password')
+    input.setAttribute('data-password-type',true);
+
   input.setAttribute('type',type);
 }
 
+export const checkPWDStrength = (input, check = 'no') => {
+
+  const pwdChecker = document.getElementById(input.getAttribute('data-strength-checker'))
+  const password = input.value;
+  const minChars = input.hasAttribute('minlength') ? input.getAttribute('minlength') : 12;
+
+  let strength = 1;
+  let strengthName = ['Very weak', 'Weak', 'Average', 'Strong', 'Very strong'];
+  let extraMsg = '';
+
+  //has number
+  if (password.match(/(?=.*[0-9])/))
+    strength += 1;
+  // has special character
+  if (password.match(/(?=.*[!,%,&,#,$,^,*,?,_,~,<,>,])/))
+    strength += 1;
+  // has lowercase alpha
+  if (password.match(/(?=.*[a-z])/))
+    strength += 1;
+  // has uppercase alpha
+  if (password.match(/(?=.*[A-Z])/))
+    strength += 1;
+
+  if (password.length < minChars){
+    strength = 1;
+    extraMsg = `(must be at least ${minChars} characters.)`;
+  }
+    
+
+  // if the strength is above weak and above the minimum length do some kind of api call to check if its in a list of passwords
+  
+  if(strength >= 3 && check == 'no'){
+    hibpCheck(password,input);
+
+
+    input.addEventListener('hibpCheck', function (event) {
+      checkhibpCheck(event, input)
+    });
+
+    function checkhibpCheck(event, input){
+
+        if(event.detail){ // found
+          checkPWDStrength(input,'danger');
+        } else { // not found
+          checkPWDStrength(input,'success');
+        }
+
+        input.removeEventListener("hibpCheck", checkhibpCheck); // Succeeds   
+    }
+
+  }
+  else if(strength >= 3 && check == 'danger'){
+    strength = 3;
+    extraMsg = `(this password is very common)`;
+  }
+
+
+  if(pwdChecker){
+    if(strength <= 3)
+      pwdChecker.classList.add('invalid-feedback');
+    else
+      pwdChecker.classList.remove('invalid-feedback');
+
+    pwdChecker.setAttribute('data-strength',strength)
+    pwdChecker.innerHTML = `Password strength: ${strengthName[strength-1]} ${extraMsg}`;
+  }
+
+}
+
+
 export default extendInputs;

package/assets/ts/modules/table.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { zeroPad, isNumeric, ucfirst } from "./helpers";
+import { zeroPad, isNumeric, ucfirst, resolvePath } from "./helpers";
 
 // Basic functionality needed
 export const addDataAttributes = (table) => {
@@ -61,20 +61,20 @@ export const getLargestLastColWidth = (table) => {
 
 export const createMobileButton = (table, wrapper) => {
 
-
-  if(wrapper.classList.contains('.table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
+  if(wrapper.classList.contains('table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
     return false;
 
   if(table.querySelectorAll('thead tr th').length < 4 && !wrapper.hasAttribute('data-expandable'))
     return false;
 
-
+  //If the expand column already exists we don't need to add a new one.
   Array.from(table.querySelectorAll('thead tr')).forEach((row,index) => {
-        
-    row.insertAdjacentHTML(
-      'afterbegin',
-      `<th class="th--fixed expand-button-heading"></th>`
-    );
+    if(!table.querySelectorAll('thead tr th.expand-button-heading').length){
+      row.insertAdjacentHTML(
+        'afterbegin',
+        `<th class="th--fixed expand-button-heading"></th>`
+      );    
+    }
   });
 
   Array.from(table.querySelectorAll('tbody tr')).forEach((row,index) => {
@@ -690,7 +690,7 @@ export const populateDataQueries = (table,form,wrapper) => {
   dataQueries.forEach((queryElement, index) => {
 
     let query = queryElement.getAttribute('data-query');
-    let numberOfMatchedRows: 0;
+    let numberOfMatchedRows = 0;
 
     if(query == 'total'){
       if(wrapper.hasAttribute('data-total'))
@@ -903,11 +903,9 @@ const filterFilters = function(form){
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
-  const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
-
   let formData = new FormData(form);
   let queryString = new URLSearchParams(formData).toString();
-  let columns = table.querySelectorAll('thead tr th');
+  let columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');
   let tbody = table.querySelector('tbody');
   let ajaxURL = form.getAttribute('data-ajax');
 
@@ -985,7 +983,6 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
           var table_row = document.createElement('tr');
 
           columns.forEach((col, index) => {
-
             let cellOutput = '';
             var table_cell  = document.createElement('td');
             // Add some data to help with the mobile layout design

package/assets/ts/vendor/hibp.ts

@@ -0,0 +1,81 @@
+// @ts-nocheck
+
+/**
+ * hibp.js
+ * @version v1
+ * @author Mehdi Bounya
+ *
+ * Report any bugs here: https://github.com/mehdibo/hibp-js
+ *
+ * The MIT License (http://www.opensource.org/licenses/mit-license.php)
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without
+ * restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following
+ * conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+function sha1(string){
+  var buffer = new TextEncoder("utf-8").encode(string);
+  return crypto.subtle.digest("SHA-1", buffer).then(function (buffer) {
+      // Get the hex code
+      var hexCodes = [];
+      var view = new DataView(buffer);
+      for (var i = 0; i < view.byteLength; i += 4) {
+          // Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)
+          var value = view.getUint32(i)
+          // toString(16) will give the hex representation of the number without padding
+          var stringValue = value.toString(16)
+          // We use concatenation and slice for padding
+          var padding = '00000000'
+          var paddedValue = (padding + stringValue).slice(-padding.length)
+          hexCodes.push(paddedValue);
+      }
+      // Join all the hex strings into one
+      return hexCodes.join("");
+  });
+}
+
+const hibpCheck = (pwd,input) => {
+  // We hash the pwd first
+  sha1(pwd).then(function(hash){
+      // We send the first 5 chars of the hash to hibp's API
+      const req = new XMLHttpRequest();
+      req.addEventListener("load", function(){
+          // When we get back a response from the server
+          // We create an array of lines and loop through them
+          const resp = this.responseText.split('\n');
+          const hashSub = hash.slice(5).toUpperCase();
+          var result = false;
+          for(let index in resp){
+              // Check if the line matches the rest of the hash
+              if(resp[index].substring(0, 35) == hashSub){
+                  result = true;
+                  break; // If found no need to continue the loop
+              }
+          }
+          // Trigger an event with the result
+          const event = new CustomEvent('hibpCheck', {detail: result});
+          input.dispatchEvent(event);
+      });
+      req.open('GET', 'https://api.pwnedpasswords.com/range/'+hash.substr(0, 5));
+      req.send();
+  });
+}
+
+export default hibpCheck;