fleetcor-lwc 3.15.0 → 3.17.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/frontend/components/flt/loader/loader.html

@@ -3,6 +3,11 @@
         <div class="flt-loader__circle">
             <div class="flt-loader__inner-circle"></div>
         </div>
-        <slot></slot>
+        <template lwc:if={tempMessage}>
+            <p>{tempMessage}</p>
+        </template>
+        <template lwc:else>
+            <slot></slot>
+        </template>
     </div>
 </template>

package/frontend/components/flt/loader/loader.js

@@ -1,4 +1,7 @@
 import { LightningDomElement } from 'fleetcor-lwc'
+import { api } from 'lwc'
 import './loader.scss'
 
-export default class Loader extends LightningDomElement {}
+export default class Loader extends LightningDomElement {
+    @api tempMessage;
+}

package/frontend/components/flt/picklist/picklist.html

@@ -1,5 +1,11 @@
 <template lwc:render-mode="light">
-    <div class={computedStyles} tabindex="0" onfocus={handleShowView} onblur={handleHideView}>
+    <div 
+        tabindex="0"    
+        class={computedStyles}  
+        onmousedown={handleMousedownView} 
+        onfocus={handleShowView} 
+        onblur={handleHideView}
+    >
         <div class="flt-picklist__wrapp">
             <div class="flt-picklist__wrapp-text">
                 <div lwc:if={placeholderVisible} class="flt-picklist__placeholder">{placeholder}</div>
@@ -10,13 +16,15 @@
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
-                class="flt-picklist__view-arrow">
+                class="flt-picklist__view-arrow"
+            >
                 <path
                     d="M19 9L12 16L5 9"
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round"
-                    class="flt-picklist__view-arrow-path"></path>
+                    class="flt-picklist__view-arrow-path"
+                ></path>
             </svg>
         </div>
         <div class="flt-picklist__dropdown-container">
@@ -28,14 +36,16 @@
                         onclick={handleChange}
                         data-value={option.value}
                         class="flt-picklist__option flt-picklist__option_selected"
-                        lwc:inner-html={option.label}></div>
+                        lwc:inner-html={option.label}
+                    ></div>
                     <div
                         lwc:else
                         onclick={handleChange}
                         key={option.value}
                         data-value={option.value}
                         class="flt-picklist__option"
-                        lwc:inner-html={option.label}></div>
+                        lwc:inner-html={option.label}
+                    ></div>
                 </template>
             </div>
         </div>

package/frontend/components/flt/picklist/picklist.js

@@ -75,6 +75,13 @@ export default class Picklist extends SelectElement {
         this.querySelector('.flt-picklist').blur()
     }
 
+    handleMousedownView(event) {
+        if (event.currentTarget === document.activeElement) {
+            event.currentTarget.blur();
+            event.preventDefault();
+        }
+    }
+
     handleShowView(event) {
         event.stopPropagation()
         if (!this.disabled) {

package/package.json

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