@websy/websy-designs 1.7.1 → 1.7.3

package/dist/websy-designs.debug.js

@@ -2220,6 +2220,8 @@ class WebsyForm {
       // }
       el.addEventListener('change', this.handleChange.bind(this))
       el.addEventListener('click', this.handleClick.bind(this))
+      el.addEventListener('beforeinput', this.handleBeforeInput.bind(this))
+      el.addEventListener('input', this.handleInput.bind(this))
       el.addEventListener('focusout', this.handleFocusOut.bind(this))
       el.addEventListener('keyup', this.handleKeyUp.bind(this))
       el.addEventListener('keydown', this.handleKeyDown.bind(this))
@@ -2312,7 +2314,7 @@ class WebsyForm {
       let index = event.target.getAttribute('data-index')
       if (this.options.fields[index] && (this.options.fields[index].required || this.options.fields[index].validate)) {
         this.validateField(this.options.fields[index], event.target.value)
-      }
+      }      
     }
   }
   handleClick (event) {    
@@ -2334,20 +2336,72 @@ class WebsyForm {
     }
   }
   handleKeyDown (event) {
-    if (event.key === 'enter') {
+    if (event.key === 'enter' && this.options.submitOnEnter === true) {
       this.submitForm()
     }
+    // if (event.target.getAttribute('data-user-type') === 'expiry') {
+    //   let isNumeric = !isNaN(event.key)
+    //   let validKey = false
+    //   if (!validKey) {
+    //     validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
+    //   }
+    //   if ((event.target.value.length === 5 && !validKey) || (!validKey && !isNumeric)) {
+    //     event.preventDefault()
+    //     return false
+    //   }
+    //   if (event.key === 'Backspace') {
+    //     if (event.target.value.indexOf('/') === event.target.selectionStart - 1) {
+    //       let chars = event.target.value.split('')
+    //       chars.pop()
+    //       event.target.value = chars.join('')
+    //     }
+    //   }
+    // }
+    // if (event.target.getAttribute('data-user-type') === 'cvv') {
+    //   let isNumeric = !isNaN(event.key)
+    //   let validKey = false
+    //   if (!validKey) {
+    //     validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
+    //   }
+    //   if ((event.target.value.length === 3 && !validKey) || (!validKey && !isNumeric)) {
+    //     event.preventDefault()
+    //     return false
+    //   }
+    // }
+  }
+  handleKeyUp (event) {
+    // if (event.target.getAttribute('data-user-type') === 'expiry') {
+    //   let chars = event.target.value.split('')
+    //   let isNumeric = !isNaN(event.key)
+    //   if (event.key === 'Backspace') {
+    //     if (chars[chars.length - 1] === '/' && chars.length !== 3) {
+    //       chars.pop()
+    //       event.target.value = chars.join('')
+    //       return 
+    //     }    
+    //   }
+    //   if (event.target.selectionStart === 2) {      
+    //     if (chars[2] && ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].indexOf(event.key) === -1) {
+    //       event.target.setSelectionRange(3, 3)
+    //     }
+    //     else if (isNumeric) {
+    //       event.target.value += '/'
+    //     }
+    //   }
+    // }
+  }
+  handleBeforeInput (event) {
     if (event.target.getAttribute('data-user-type') === 'expiry') {
-      let isNumeric = !isNaN(event.key)
+      let isNumeric = !isNaN(+event.data)
       let validKey = false
       if (!validKey) {
-        validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
+        validKey = ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) !== -1
       }
       if ((event.target.value.length === 5 && !validKey) || (!validKey && !isNumeric)) {
         event.preventDefault()
         return false
       }
-      if (event.key === 'Backspace') {
+      if (event.inputType === 'deleteContentBackward') {
         if (event.target.value.indexOf('/') === event.target.selectionStart - 1) {
           let chars = event.target.value.split('')
           chars.pop()
@@ -2356,10 +2410,10 @@ class WebsyForm {
       }
     }
     if (event.target.getAttribute('data-user-type') === 'cvv') {
-      let isNumeric = !isNaN(event.key)
+      let isNumeric = !isNaN(+event.data)
       let validKey = false
       if (!validKey) {
-        validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
+        validKey = ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) !== -1
       }
       if ((event.target.value.length === 3 && !validKey) || (!validKey && !isNumeric)) {
         event.preventDefault()
@@ -2367,10 +2421,10 @@ class WebsyForm {
       }
     }
   }
-  handleKeyUp (event) {
+  handleInput (event) {
     if (event.target.getAttribute('data-user-type') === 'expiry') {
       let chars = event.target.value.split('')
-      let isNumeric = !isNaN(event.key)
+      let isNumeric = !isNaN(+event.data)
       if (event.key === 'Backspace') {
         if (chars[chars.length - 1] === '/' && chars.length !== 3) {
           chars.pop()
@@ -2379,7 +2433,7 @@ class WebsyForm {
         }    
       }
       if (event.target.selectionStart === 2) {      
-        if (chars[2] && ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].indexOf(event.key) === -1) {
+        if (chars[2] && ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) === -1) {
           event.target.setSelectionRange(3, 3)
         }
         else if (isNumeric) {

package/dist/websy-designs.js

@@ -2511,6 +2511,8 @@ var WebsyForm = /*#__PURE__*/function () {
       // }
       el.addEventListener('change', this.handleChange.bind(this));
       el.addEventListener('click', this.handleClick.bind(this));
+      el.addEventListener('beforeinput', this.handleBeforeInput.bind(this));
+      el.addEventListener('input', this.handleInput.bind(this));
       el.addEventListener('focusout', this.handleFocusOut.bind(this));
       el.addEventListener('keyup', this.handleKeyUp.bind(this));
       el.addEventListener('keydown', this.handleKeyDown.bind(this));
@@ -2623,16 +2625,70 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "handleKeyDown",
     value: function handleKeyDown(event) {
-      if (event.key === 'enter') {
+      if (event.key === 'enter' && this.options.submitOnEnter === true) {
         this.submitForm();
-      }
+      } // if (event.target.getAttribute('data-user-type') === 'expiry') {
+      //   let isNumeric = !isNaN(event.key)
+      //   let validKey = false
+      //   if (!validKey) {
+      //     validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
+      //   }
+      //   if ((event.target.value.length === 5 && !validKey) || (!validKey && !isNumeric)) {
+      //     event.preventDefault()
+      //     return false
+      //   }
+      //   if (event.key === 'Backspace') {
+      //     if (event.target.value.indexOf('/') === event.target.selectionStart - 1) {
+      //       let chars = event.target.value.split('')
+      //       chars.pop()
+      //       event.target.value = chars.join('')
+      //     }
+      //   }
+      // }
+      // if (event.target.getAttribute('data-user-type') === 'cvv') {
+      //   let isNumeric = !isNaN(event.key)
+      //   let validKey = false
+      //   if (!validKey) {
+      //     validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
+      //   }
+      //   if ((event.target.value.length === 3 && !validKey) || (!validKey && !isNumeric)) {
+      //     event.preventDefault()
+      //     return false
+      //   }
+      // }
 
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(event) {// if (event.target.getAttribute('data-user-type') === 'expiry') {
+      //   let chars = event.target.value.split('')
+      //   let isNumeric = !isNaN(event.key)
+      //   if (event.key === 'Backspace') {
+      //     if (chars[chars.length - 1] === '/' && chars.length !== 3) {
+      //       chars.pop()
+      //       event.target.value = chars.join('')
+      //       return 
+      //     }    
+      //   }
+      //   if (event.target.selectionStart === 2) {      
+      //     if (chars[2] && ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].indexOf(event.key) === -1) {
+      //       event.target.setSelectionRange(3, 3)
+      //     }
+      //     else if (isNumeric) {
+      //       event.target.value += '/'
+      //     }
+      //   }
+      // }
+    }
+  }, {
+    key: "handleBeforeInput",
+    value: function handleBeforeInput(event) {
       if (event.target.getAttribute('data-user-type') === 'expiry') {
-        var isNumeric = !isNaN(event.key);
+        var isNumeric = !isNaN(+event.data);
         var validKey = false;
 
         if (!validKey) {
-          validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1;
+          validKey = ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) !== -1;
         }
 
         if (event.target.value.length === 5 && !validKey || !validKey && !isNumeric) {
@@ -2640,7 +2696,7 @@ var WebsyForm = /*#__PURE__*/function () {
           return false;
         }
 
-        if (event.key === 'Backspace') {
+        if (event.inputType === 'deleteContentBackward') {
           if (event.target.value.indexOf('/') === event.target.selectionStart - 1) {
             var chars = event.target.value.split('');
             chars.pop();
@@ -2650,12 +2706,12 @@ var WebsyForm = /*#__PURE__*/function () {
       }
 
       if (event.target.getAttribute('data-user-type') === 'cvv') {
-        var _isNumeric = !isNaN(event.key);
+        var _isNumeric = !isNaN(+event.data);
 
         var _validKey = false;
 
         if (!_validKey) {
-          _validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1;
+          _validKey = ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) !== -1;
         }
 
         if (event.target.value.length === 3 && !_validKey || !_validKey && !_isNumeric) {
@@ -2665,11 +2721,11 @@ var WebsyForm = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "handleKeyUp",
-    value: function handleKeyUp(event) {
+    key: "handleInput",
+    value: function handleInput(event) {
       if (event.target.getAttribute('data-user-type') === 'expiry') {
         var chars = event.target.value.split('');
-        var isNumeric = !isNaN(event.key);
+        var isNumeric = !isNaN(+event.data);
 
         if (event.key === 'Backspace') {
           if (chars[chars.length - 1] === '/' && chars.length !== 3) {
@@ -2680,7 +2736,7 @@ var WebsyForm = /*#__PURE__*/function () {
         }
 
         if (event.target.selectionStart === 2) {
-          if (chars[2] && ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].indexOf(event.key) === -1) {
+          if (chars[2] && ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) === -1) {
             event.target.setSelectionRange(3, 3);
           } else if (isNumeric) {
             event.target.value += '/';