fleetcor-lwc 3.8.4 → 3.8.5

package/README.md

@@ -665,6 +665,10 @@ You can override them as you wish by global css variables as priority.
 
 ## Release Notes:
 
+- v.3.8.5
+
+  - Bug fix visiability of `flt-input-phone`
+
 - v.3.8.4
 
   - Bug fix visiability of `flt-input-text`

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

@@ -50,16 +50,12 @@ describe('flt-input-phone', () => {
             return Promise.resolve().then(async () => {
                 const data = picklistEl.getData()
                 await expect(data.value).toBe('+44')
-                const inputEl = inputPhoneEl.querySelector('flt-input-text')
-                inputEl.firstChild.focus()
-                inputEl.value = '3456'
-                inputEl.dispatchEvent(new CustomEvent('change', { detail: inputEl.getData() }))
+                const inputEl = inputPhoneEl.querySelector('input')
+                inputEl.focus()
+                inputEl.value = '3435234523'
+                inputEl.dispatchEvent(new CustomEvent('input'))
                 return Promise.resolve().then(async () => {
-                    inputEl.value = '03435234523'
-                    inputEl.dispatchEvent(new CustomEvent('change', { detail: inputEl.getData() }))
-                    return Promise.resolve().then(async () => {
-                        await expect(inputPhoneEl.getData().isValid).toBeTruthy()
-                    })
+                    await expect(inputPhoneEl.getData().isValid).toBeTruthy()
                 })
             })
         })

package/frontend/components/flt/inputPhone/inputPhone.html

@@ -17,12 +17,9 @@
                 class="flt-input-phone__number"
                 prefix={prefix}
                 disabled={disabled}
-                type="number"
                 onfocus={handleFocus}
                 onblur={handleBlur}
                 placeholder={placeholder}
-                value={phoneNumber}
-                onchange={handlePhoneNumberChanged}
                 name="phoneNumber"></flt-input-text>
         </div>
         <div class="flt-input-phone__error">{errorMessage}</div>

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

@@ -2,6 +2,7 @@ import { api } from 'lwc'
 import { COUNTRIES } from './utils'
 import LIB_PHONE_NUMBER from 'google-libphonenumber'
 import { UserDataValidator } from 'fleetcor-lwc'
+import IMask from 'imask'
 import './inputPhone.scss'
 
 const CODE_BY_DEFAULT = 'GB'
@@ -34,7 +35,7 @@ export default class InputPhone extends UserDataValidator {
             let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
             let number = phoneNumberUtil.parseAndKeepRawInput(value)
             this.codeValue = `+${number.getCountryCode()}`
-            this.phoneNumber = number.getNationalNumber()
+            this.phoneNumber = number.getNationalNumber() + ''
         } catch (error) {
             this.phoneNumber = ''
         }
@@ -81,6 +82,7 @@ export default class InputPhone extends UserDataValidator {
     codeValue = ''
     touched
     focused
+    mask
 
     get prefix() {
         return this.codeValue === CODE_VALUE_SB ? CODE_VALUE_SB + '(0)' : this.codeValue
@@ -129,24 +131,76 @@ export default class InputPhone extends UserDataValidator {
         this.codeValue = this.codeValue || this.codePrefixByCountryCode
     }
 
-    handleFlagChanged(event) {
-        this.codeValue = event.detail.value
-        this.handleChange()
+    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)
+        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
+            }
+            this.phoneNumber = this.mask.unmaskedValue
+            this.handleChange()
+        })
+    }
+
+    renderedCallback() {
+        super.renderedCallback()
+        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)
+                }
+            }
+        }
     }
 
-    handlePhoneNumberChanged(event) {
-        this.phoneNumber = event.detail.value
+    handleFlagChanged(event) {
+        this.codeValue = event.detail.value
+        this.reInitIMask()
         this.handleChange()
     }
 
     handleChange(event) {
-        if (
-            this.codeValue === CODE_VALUE_SB &&
-            this.phoneNumber[0] === '0' &&
-            this.phoneNumber.length > 1
-        ) {
-            this.phoneNumber = this.phoneNumber.slice(1)
-        }
         this.dispatchEvent(
             new CustomEvent('change', {
                 detail: this.getData()

package/frontend/components/flt/inputPhone/inputPhone.scss

@@ -37,7 +37,7 @@
         flex-shrink: 0;
         position: relative;
         z-index: 1;
-        width: 72px;
+        width: 76px;
     }
 
     &__error {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.8.4",
+    "version": "3.8.5",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -79,5 +79,8 @@
         "webpack": "^5.105.2",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.3"
+    },
+    "dependencies": {
+        "imask": "^7.6.1"
     }
-}
+}