fleetcor-lwc 3.13.0 → 3.13.1

package/README.md

@@ -946,6 +946,12 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+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

@@ -154,7 +154,7 @@ export default class InputPhone extends UserDataValidator {
         this.mask?.destroy()
         this.mask = null
         let settings = {
-            mask: Number,
+            mask: /[1-9]/,
             overwrite: false,
             lazy: false
         }
@@ -176,13 +176,40 @@ export default class InputPhone extends UserDataValidator {
         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
+            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)
+                }
+                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() + ''
+
+                    inputElement.value = this.pastePhoneNumber
+                    this.mask.value = this.pastePhoneNumber
+                    this.pastePhoneNumber = null
+                    this.phoneNumber = this.mask.unmaskedValue
+
+                    if (newCodeValue != this.codeValue) {
+                        this.codeValue = newCodeValue
+                        requestAnimationFrame(() => {
+                            this.reInitIMask()
+                        })
+                    }
+                }
+            } 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()
         })
     }
 
@@ -191,25 +218,33 @@ 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.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()
                 }
             }
+        } catch (error) {
+            console.log('error', error)
         }
     }
 

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.1",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",