fleetcor-lwc 3.13.1 → 3.13.4

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.4
+
+- Bug fix `flt-input-text` component
+
+---
+
+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/frontend/components/flt/inputText/__test__/inputText.test.js

@@ -177,6 +177,23 @@ describe('flt-input-text', () => {
                 return Promise.resolve().then(async () => {
                     await expect(inputTextElement.value).toBeFalsy()
                     await expect(inputElement.value).toBeFalsy()
+
+                    inputTextElement.disabled = false
+                    inputElement.value = 'Aleks '
+                    inputElement.dispatchEvent(new Event('change'))
+
+                    return Promise.resolve().then(async () => {
+                        await expect(inputTextElement.value).toBe('Aleks')
+                        await expect(inputElement.value).toBe('Aleks')
+
+                        inputElement.value = ''
+                        inputElement.dispatchEvent(new Event('change'))
+
+                        return Promise.resolve().then(async () => {
+                            await expect(inputTextElement.value).toBe('')
+                            await expect(inputElement.value).toBe('')
+                        })
+                    })
                 })
             })
         })

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

@@ -63,8 +63,6 @@ export default class InputText extends InputElement {
         if (this.disabled) return
         this.focused = false
         this.touched = true
-        this.value = (event.target.value || '').trim()
-        event.target.value = this.value
         this.dispatchEvent(
             new CustomEvent('blur', {
                 detail: null,
@@ -83,7 +81,7 @@ export default class InputText extends InputElement {
             this.value = event.target.value
             this.dispatchEvent(
                 new CustomEvent('change', {
-                    detail: this.getData()
+                    detail: { ...this.getData(), _oninput: true }
                 })
             )
         }
@@ -92,7 +90,17 @@ export default class InputText extends InputElement {
     handleChange(event) {
         if (this.disabled) {
             event.target.value = ''
+        } else {
+            this.value = (event.target.value || '').trim()
+            event.target.value = this.value
+
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: { ...this.getData(), _onchage: true }
+                })
+            )
         }
+
         event.stopPropagation()
         event.preventDefault()
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.13.1",
+    "version": "3.13.4",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -87,4 +87,4 @@
         "imask": "^7.6.1",
         "prismjs": "^1.30.0"
     }
-}
+}