fleetcor-lwc 3.15.0 → 3.16.0

package/README.md

@@ -952,6 +952,11 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.16.0
+
+- Update `flt-input-text` -  it's become more powerfull with type number 
+
+---
 v.3.15.0
 
 - Added to `flt-input-with-picklist` api attribute `inputmode` and `input-type`

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

@@ -225,4 +225,45 @@ describe('flt-input-text', () => {
             })
         })
     })
+
+    it('flt-input-text number', async () => {
+        const inputTextElement = createElement('flt-input-text', { is: InputText })
+        inputTextElement.name = 'Currency'
+        inputTextElement.label = 'Currency'
+        inputTextElement.type = 'number'
+        inputTextElement.inputmode = 'number'
+        inputTextElement.placeholder = 'Currency'
+        document.body.appendChild(inputTextElement)
+
+        await expect(inputTextElement.firstChild.classList).toContain('flt-input-text')
+        inputTextElement.validate()
+        return Promise.resolve().then(async () => {
+            await expect(inputTextElement.firstChild.classList).not.toContain(
+                'flt-input-text_success'
+            )
+            await expect(inputTextElement.isValid()).toBeTruthy()
+            let data = inputTextElement.getData()
+            await expect(data.placeholder).toBe('Currency')
+
+            inputTextElement.value = '100'
+            inputTextElement.dispatchEvent(new CustomEvent('change'))
+            inputTextElement.validate()
+
+            return Promise.resolve().then(async () => {
+                await expect(inputTextElement.firstChild.classList).toContain(
+                    'flt-input-text_success'
+                )
+                await expect(inputTextElement.isValid()).toBeTruthy()
+                await expect(inputTextElement.getData().value).toBe('100')
+
+                const inputEl = inputTextElement.querySelector('input')
+                inputEl.focus()
+                inputEl.value = '3435234523'
+                inputEl.dispatchEvent(new CustomEvent('input'))
+                return Promise.resolve().then(async () => {
+                    await expect(inputTextElement.getData().isValid).toBeTruthy()
+                })
+            })
+        })
+    })
 })

package/frontend/components/flt/inputText/inputText.html

@@ -6,11 +6,12 @@
                 <span lwc:if={prefix} class="flt-input-text__prefix" lwc:inner-html={prefix}></span>
                 <input
                     id={name}
+                    lwc:ref="input"
                     onfocus={handleFocused}
                     onblur={handleBlur}
                     class="flt-input-text__input"
                     maxlength={maxLength}
-                    type={type}
+                    type={htmlInputType}
                     inputmode={inputmode}
                     disabled={disabled}
                     value={displayValue}

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

@@ -1,16 +1,26 @@
 import { api } from 'lwc'
 import { InputElement } from 'fleetcor-lwc'
+import IMask from 'imask'
 import './inputText.scss'
 
+const TYPE_NUMBER = 'number'
+const TYPE_TEXT = 'text'
+
 export default class InputText extends InputElement {
     focused
     touched
+    mask
+
     @api prefix
-    @api type = 'text'
-    @api inputmode = 'text'
+    @api type = TYPE_TEXT
+    @api inputmode = TYPE_TEXT
     @api placeholderVisible
     @api errorMessage
 
+    get htmlInputType() {
+        return this.type == TYPE_NUMBER ? TYPE_TEXT : this.type
+    }
+
     get displayValue() {
         return this.value || ''
     }
@@ -78,7 +88,7 @@ export default class InputText extends InputElement {
         if (this.disabled) {
             event.target.value = ''
             event.preventDefault()
-        } else {
+        } else if (this.type != TYPE_NUMBER) {
             this.value = event.target.value
             this.dispatchEvent(
                 new CustomEvent('change', {
@@ -91,7 +101,7 @@ export default class InputText extends InputElement {
     handleChange(event) {
         if (this.disabled) {
             event.target.value = ''
-        } else {
+        } else if (this.type != TYPE_NUMBER) {
             this.value = (event.target.value || '').trim()
             event.target.value = this.value
 
@@ -105,4 +115,36 @@ export default class InputText extends InputElement {
         event.stopPropagation()
         event.preventDefault()
     }
+
+    renderedCallback() {
+        super.renderedCallback()
+        if (this.type == TYPE_NUMBER && !this.mask) {
+            this.mask = IMask(this.refs.input, {
+                mask: Number, // Enable built-in number mask
+                scale: 0, // Number of digits after decimal (0 for integers only)
+                signed: false, // Disallow negative numbers
+                thousandsSeparator: '',
+                padFractionalZeros: false,
+                normalizeZeros: true,
+                min: 0,
+                commit: (value, masked) => {
+                    this.value = masked._value
+                    this.dispatchEvent(
+                        new CustomEvent('change', {
+                            detail: { ...this.getData(), _onchage: true }
+                        })
+                    )
+                }
+            })
+
+            this.mask.on('accept', () => {
+                this.value = this.mask.value
+                this.dispatchEvent(
+                    new CustomEvent('change', {
+                        detail: { ...this.getData(), _oninput: true }
+                    })
+                )
+            })
+        }
+    }
 }

package/package.json

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