fleetcor-lwc 3.13.1 → 3.13.3

package/README.md

@@ -946,6 +946,18 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.13.3
+
+- Bug fix `flt-input-phone` component
+
+---
+
+v.3.13.2
+
+- Bug fix `flt-input-phone` component
+
+---
+
 v.3.13.1
 
 - Bug fix `flt-input-phone` and `flt-input-text` component

package/frontend/components/flt/inputPhone/inputPhone.js

@@ -41,6 +41,26 @@ export default class InputPhone extends UserDataValidator {
         }
     }
 
+    get maskOptions() {
+        let settings = {
+            mask: /[1-9]/,
+            overwrite: false,
+            lazy: false
+        }
+
+        if (this.codeValue == CODE_VALUE_SB) {
+            settings = {
+                mask: '#000000000',
+                definitions: {
+                    '#': /[1-9]/
+                },
+                overwrite: false,
+                lazy: false
+            }
+        }
+        return settings
+    }
+
     @api getData(silent) {
         return {
             ...super.getData(silent),
@@ -153,63 +173,37 @@ export default class InputPhone extends UserDataValidator {
     reInitIMask() {
         this.mask?.destroy()
         this.mask = null
-        let settings = {
-            mask: /[1-9]/,
-            overwrite: false,
-            lazy: false
-        }
-
-        if (this.codeValue == CODE_VALUE_SB) {
-            settings = {
-                mask: '#000000000',
-                definitions: {
-                    '#': /[1-9]/
-                },
-                overwrite: false,
-                lazy: false
-            }
-        }
-
         const inputEl = this.querySelector('input')
-        this.mask = IMask(inputEl, settings)
+        this.mask = IMask(inputEl, this.maskOptions)
         const inputElement = this.querySelector('flt-input-text')
         this.mask.unmaskedValue = this.phoneNumber
         inputElement.value = this.mask.value
         this.mask.on('accept', () => {
+            let value = inputElement.value?.replace(/[^\w\\s]/gi, '')
             if (inputElement.value?.at(0) == '+' || inputElement.value?.at(0) == '0') {
-                let value = inputElement.value.replace(/[^\w\\s]/gi, '')
                 if (inputElement.value?.at(0) == '0') {
                     value = CODE_VALUE_SB + value.slice(1)
+                } else {
+                    value = '+' + value
                 }
                 let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
-                let number = phoneNumberUtil.parseAndKeepRawInput('+' + value)
+                let number = phoneNumberUtil.parseAndKeepRawInput(value)
                 let regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
                 let result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
                 if (result) {
                     const newCodeValue = `+${number.getCountryCode()}`
-                    this.pastePhoneNumber = number.getNationalNumber() + ''
-
-                    inputElement.value = this.pastePhoneNumber
-                    this.mask.value = this.pastePhoneNumber
-                    this.pastePhoneNumber = null
-                    this.phoneNumber = this.mask.unmaskedValue
-
+                    const newPhoneNumber = number.getNationalNumber() + ''
                     if (newCodeValue != this.codeValue) {
                         this.codeValue = newCodeValue
-                        requestAnimationFrame(() => {
-                            this.reInitIMask()
-                        })
+                        this.mask.updateOptions(this.maskOptions)
                     }
+                    inputElement.value = newPhoneNumber
+                    this.mask.value = newPhoneNumber
                 }
-            } else {
-                if (this.pastePhoneNumber) {
-                    inputElement.value = this.pastePhoneNumber
-                    this.mask.value = this.pastePhoneNumber
-                    this.pastePhoneNumber = null
-                }
-                this.phoneNumber = this.mask.unmaskedValue
-                this.handleChange()
             }
+
+            this.phoneNumber = this.mask.unmaskedValue
+            this.handleChange()
         })
     }
 
@@ -224,27 +218,8 @@ export default class InputPhone extends UserDataValidator {
                 } else {
                     value = '+' + value
                 }
-                this.pastePhone(value)
-            }
-        }
-    }
-
-    pastePhone(value) {
-        try {
-            let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
-            let number = phoneNumberUtil.parseAndKeepRawInput(value)
-            let regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
-            let result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
-            if (result) {
-                const newCodeValue = `+${number.getCountryCode()}`
-                this.pastePhoneNumber = number.getNationalNumber() + ''
-                if (newCodeValue != this.codeValue) {
-                    this.codeValue = newCodeValue
-                    this.reInitIMask()
-                }
+                this.querySelector('input').value = ''
             }
-        } catch (error) {
-            console.log('error', error)
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.13.1",
+    "version": "3.13.3",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",