fleetcor-lwc 3.13.0 → 3.13.3

package/README.md

@@ -946,6 +946,24 @@ 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
+
+---
+
 v.3.13.0
 
 - Update `flt-collapsible-section` 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,34 +173,35 @@ export default class InputPhone extends UserDataValidator {
     reInitIMask() {
         this.mask?.destroy()
         this.mask = null
-        let settings = {
-            mask: Number,
-            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', () => {
-            if (this.pastePhoneNumber) {
-                inputElement.value = this.pastePhoneNumber
-                this.mask.value = this.pastePhoneNumber
-                this.pastePhoneNumber = null
+            let value = inputElement.value?.replace(/[^\w\\s]/gi, '')
+            if (inputElement.value?.at(0) == '+' || inputElement.value?.at(0) == '0') {
+                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 regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
+                let result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
+                if (result) {
+                    const newCodeValue = `+${number.getCountryCode()}`
+                    const newPhoneNumber = number.getNationalNumber() + ''
+                    if (newCodeValue != this.codeValue) {
+                        this.codeValue = newCodeValue
+                        this.mask.updateOptions(this.maskOptions)
+                    }
+                    inputElement.value = newPhoneNumber
+                    this.mask.value = newPhoneNumber
+                }
             }
+
             this.phoneNumber = this.mask.unmaskedValue
             this.handleChange()
         })
@@ -191,24 +212,13 @@ export default class InputPhone extends UserDataValidator {
         if (!this.mask) {
             this.reInitIMask()
             this.querySelector('input').onpaste = (event) => {
-                const value =
-                    '+' + event.clipboardData.getData('text/plain').replace(/[^\w\\s]/gi, '')
-                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()
-                        }
-                    }
-                } catch (error) {
-                    console.log('error', error)
+                let value = event.clipboardData.getData('text/plain').replace(/[^\w\\s]/gi, '')
+                if (value?.at(0) == '0') {
+                    value = CODE_VALUE_SB + value.slice(1)
+                } else {
+                    value = '+' + value
                 }
+                this.querySelector('input').value = ''
             }
         }
     }

package/frontend/components/flt/inputText/inputText.js

@@ -63,7 +63,7 @@ export default class InputText extends InputElement {
         if (this.disabled) return
         this.focused = false
         this.touched = true
-        this.value = (event.target.value || '').trimEnd()
+        this.value = (event.target.value || '').trim()
         event.target.value = this.value
         this.dispatchEvent(
             new CustomEvent('blur', {

package/package.json

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