fleetcor-lwc 3.14.0 → 3.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -18
- package/frontend/components/flt/inputText/__test__/inputText.test.js +41 -0
- package/frontend/components/flt/inputText/inputText.html +2 -1
- package/frontend/components/flt/inputText/inputText.js +46 -4
- package/frontend/components/flt/inputWithPicklist/inputWithPicklist.html +2 -0
- package/frontend/components/flt/inputWithPicklist/inputWithPicklist.js +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -651,6 +651,8 @@ This component fully extends from `Input Text`
|
|
|
651
651
|
min-value="100"
|
|
652
652
|
max-value="1000"
|
|
653
653
|
max-length="4000"
|
|
654
|
+
inputmode="text"
|
|
655
|
+
inputType="text"
|
|
654
656
|
reg-exp="^([0-9]{1,1}||([1-9]{1,1}[0-9]{1,9}))$"
|
|
655
657
|
error-message="Error message Mounthly Sequrity"
|
|
656
658
|
options="[{label:'Label 1', value:'val_1'}, {label:'Label 2', value:'val_2'}]"
|
|
@@ -662,24 +664,26 @@ This component fully extends from `Input Text`
|
|
|
662
664
|
|
|
663
665
|
#### Input With Picklist variables
|
|
664
666
|
|
|
665
|
-
| @api variables | type | values
|
|
666
|
-
| ------------------------- | ------ |
|
|
667
|
-
| name | object |
|
|
668
|
-
| label | object |
|
|
669
|
-
| value | object |
|
|
670
|
-
| placeholder | object |
|
|
671
|
-
| error-message | string |
|
|
672
|
-
| required | bool |
|
|
673
|
-
| hide-placeholder-picklist | bool |
|
|
674
|
-
| disabled | bool |
|
|
675
|
-
| show-dropdown-as-modal | bool |
|
|
676
|
-
| modal-dimention-start | int | 1280
|
|
677
|
-
| prefix | html |
|
|
678
|
-
| reg-exp | string |
|
|
679
|
-
|
|
|
680
|
-
|
|
|
681
|
-
|
|
|
682
|
-
|
|
|
667
|
+
| @api variables | type | values | required | description |
|
|
668
|
+
| ------------------------- | ------ | -------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------- |
|
|
669
|
+
| name | object | | + | in format `{picklist:'value', input:'value'}` |
|
|
670
|
+
| label | object | | - | in format `{picklist:'value', input:'value'}` |
|
|
671
|
+
| value | object | | - | in format `{picklist:'value', input:'value'}` |
|
|
672
|
+
| placeholder | object | | - | in format `{picklist:'value', input:'value'}` |
|
|
673
|
+
| error-message | string | | - | |
|
|
674
|
+
| required | bool | | - | |
|
|
675
|
+
| hide-placeholder-picklist | bool | | - | Hide placeholder on picklist in desktop version and if value is exist |
|
|
676
|
+
| disabled | bool | | - | |
|
|
677
|
+
| show-dropdown-as-modal | bool | | - | Show modal with selected options |
|
|
678
|
+
| modal-dimention-start | int | 1280 | - | If showDropdownAsModal is true, by default modal become visible window width less then 1280px |
|
|
679
|
+
| prefix | html | | - | |
|
|
680
|
+
| reg-exp | string | | - | |
|
|
681
|
+
| input-type | string | `text`,`tel` | - | |
|
|
682
|
+
| inputmode | string | `text`,`tel`,`decimal`, `email`, `none`, `url`, `search` | - | |
|
|
683
|
+
| max-length | int | | - | |
|
|
684
|
+
| min-value | int | | - | |
|
|
685
|
+
| options | array | | + | Array of available items with `label` and `value` as unique string |
|
|
686
|
+
| max-value | int | | - | |
|
|
683
687
|
|
|
684
688
|
#### Input With Picklist methods
|
|
685
689
|
|
|
@@ -948,6 +952,16 @@ You can override them as you wish by global css variables as priority.
|
|
|
948
952
|
<details>
|
|
949
953
|
<summary>Click to expand/collapse</summary>
|
|
950
954
|
|
|
955
|
+
v.3.16.0
|
|
956
|
+
|
|
957
|
+
- Update `flt-input-text` - it's become more powerfull with type number
|
|
958
|
+
|
|
959
|
+
---
|
|
960
|
+
v.3.15.0
|
|
961
|
+
|
|
962
|
+
- Added to `flt-input-with-picklist` api attribute `inputmode` and `input-type`
|
|
963
|
+
|
|
964
|
+
---
|
|
951
965
|
v.3.14.0
|
|
952
966
|
|
|
953
967
|
- Added to `flt-input-text`, `flt-input-email`, `flt-input-phone` api attribute `inputmode`
|
|
@@ -225,4 +225,45 @@ describe('flt-input-text', () => {
|
|
|
225
225
|
})
|
|
226
226
|
})
|
|
227
227
|
})
|
|
228
|
+
|
|
229
|
+
it('flt-input-text number', async () => {
|
|
230
|
+
const inputTextElement = createElement('flt-input-text', { is: InputText })
|
|
231
|
+
inputTextElement.name = 'Currency'
|
|
232
|
+
inputTextElement.label = 'Currency'
|
|
233
|
+
inputTextElement.type = 'number'
|
|
234
|
+
inputTextElement.inputmode = 'number'
|
|
235
|
+
inputTextElement.placeholder = 'Currency'
|
|
236
|
+
document.body.appendChild(inputTextElement)
|
|
237
|
+
|
|
238
|
+
await expect(inputTextElement.firstChild.classList).toContain('flt-input-text')
|
|
239
|
+
inputTextElement.validate()
|
|
240
|
+
return Promise.resolve().then(async () => {
|
|
241
|
+
await expect(inputTextElement.firstChild.classList).not.toContain(
|
|
242
|
+
'flt-input-text_success'
|
|
243
|
+
)
|
|
244
|
+
await expect(inputTextElement.isValid()).toBeTruthy()
|
|
245
|
+
let data = inputTextElement.getData()
|
|
246
|
+
await expect(data.placeholder).toBe('Currency')
|
|
247
|
+
|
|
248
|
+
inputTextElement.value = '100'
|
|
249
|
+
inputTextElement.dispatchEvent(new CustomEvent('change'))
|
|
250
|
+
inputTextElement.validate()
|
|
251
|
+
|
|
252
|
+
return Promise.resolve().then(async () => {
|
|
253
|
+
await expect(inputTextElement.firstChild.classList).toContain(
|
|
254
|
+
'flt-input-text_success'
|
|
255
|
+
)
|
|
256
|
+
await expect(inputTextElement.isValid()).toBeTruthy()
|
|
257
|
+
await expect(inputTextElement.getData().value).toBe('100')
|
|
258
|
+
|
|
259
|
+
const inputEl = inputTextElement.querySelector('input')
|
|
260
|
+
inputEl.focus()
|
|
261
|
+
inputEl.value = '3435234523'
|
|
262
|
+
inputEl.dispatchEvent(new CustomEvent('input'))
|
|
263
|
+
return Promise.resolve().then(async () => {
|
|
264
|
+
await expect(inputTextElement.getData().isValid).toBeTruthy()
|
|
265
|
+
})
|
|
266
|
+
})
|
|
267
|
+
})
|
|
268
|
+
})
|
|
228
269
|
})
|
|
@@ -6,11 +6,12 @@
|
|
|
6
6
|
<span lwc:if={prefix} class="flt-input-text__prefix" lwc:inner-html={prefix}></span>
|
|
7
7
|
<input
|
|
8
8
|
id={name}
|
|
9
|
+
lwc:ref="input"
|
|
9
10
|
onfocus={handleFocused}
|
|
10
11
|
onblur={handleBlur}
|
|
11
12
|
class="flt-input-text__input"
|
|
12
13
|
maxlength={maxLength}
|
|
13
|
-
type={
|
|
14
|
+
type={htmlInputType}
|
|
14
15
|
inputmode={inputmode}
|
|
15
16
|
disabled={disabled}
|
|
16
17
|
value={displayValue}
|
|
@@ -1,16 +1,26 @@
|
|
|
1
1
|
import { api } from 'lwc'
|
|
2
2
|
import { InputElement } from 'fleetcor-lwc'
|
|
3
|
+
import IMask from 'imask'
|
|
3
4
|
import './inputText.scss'
|
|
4
5
|
|
|
6
|
+
const TYPE_NUMBER = 'number'
|
|
7
|
+
const TYPE_TEXT = 'text'
|
|
8
|
+
|
|
5
9
|
export default class InputText extends InputElement {
|
|
6
10
|
focused
|
|
7
11
|
touched
|
|
12
|
+
mask
|
|
13
|
+
|
|
8
14
|
@api prefix
|
|
9
|
-
@api type =
|
|
10
|
-
@api inputmode =
|
|
15
|
+
@api type = TYPE_TEXT
|
|
16
|
+
@api inputmode = TYPE_TEXT
|
|
11
17
|
@api placeholderVisible
|
|
12
18
|
@api errorMessage
|
|
13
19
|
|
|
20
|
+
get htmlInputType() {
|
|
21
|
+
return this.type == TYPE_NUMBER ? TYPE_TEXT : this.type
|
|
22
|
+
}
|
|
23
|
+
|
|
14
24
|
get displayValue() {
|
|
15
25
|
return this.value || ''
|
|
16
26
|
}
|
|
@@ -78,7 +88,7 @@ export default class InputText extends InputElement {
|
|
|
78
88
|
if (this.disabled) {
|
|
79
89
|
event.target.value = ''
|
|
80
90
|
event.preventDefault()
|
|
81
|
-
} else {
|
|
91
|
+
} else if (this.type != TYPE_NUMBER) {
|
|
82
92
|
this.value = event.target.value
|
|
83
93
|
this.dispatchEvent(
|
|
84
94
|
new CustomEvent('change', {
|
|
@@ -91,7 +101,7 @@ export default class InputText extends InputElement {
|
|
|
91
101
|
handleChange(event) {
|
|
92
102
|
if (this.disabled) {
|
|
93
103
|
event.target.value = ''
|
|
94
|
-
} else {
|
|
104
|
+
} else if (this.type != TYPE_NUMBER) {
|
|
95
105
|
this.value = (event.target.value || '').trim()
|
|
96
106
|
event.target.value = this.value
|
|
97
107
|
|
|
@@ -105,4 +115,36 @@ export default class InputText extends InputElement {
|
|
|
105
115
|
event.stopPropagation()
|
|
106
116
|
event.preventDefault()
|
|
107
117
|
}
|
|
118
|
+
|
|
119
|
+
renderedCallback() {
|
|
120
|
+
super.renderedCallback()
|
|
121
|
+
if (this.type == TYPE_NUMBER && !this.mask) {
|
|
122
|
+
this.mask = IMask(this.refs.input, {
|
|
123
|
+
mask: Number, // Enable built-in number mask
|
|
124
|
+
scale: 0, // Number of digits after decimal (0 for integers only)
|
|
125
|
+
signed: false, // Disallow negative numbers
|
|
126
|
+
thousandsSeparator: '',
|
|
127
|
+
padFractionalZeros: false,
|
|
128
|
+
normalizeZeros: true,
|
|
129
|
+
min: 0,
|
|
130
|
+
commit: (value, masked) => {
|
|
131
|
+
this.value = masked._value
|
|
132
|
+
this.dispatchEvent(
|
|
133
|
+
new CustomEvent('change', {
|
|
134
|
+
detail: { ...this.getData(), _onchage: true }
|
|
135
|
+
})
|
|
136
|
+
)
|
|
137
|
+
}
|
|
138
|
+
})
|
|
139
|
+
|
|
140
|
+
this.mask.on('accept', () => {
|
|
141
|
+
this.value = this.mask.value
|
|
142
|
+
this.dispatchEvent(
|
|
143
|
+
new CustomEvent('change', {
|
|
144
|
+
detail: { ...this.getData(), _oninput: true }
|
|
145
|
+
})
|
|
146
|
+
)
|
|
147
|
+
})
|
|
148
|
+
}
|
|
149
|
+
}
|
|
108
150
|
}
|
|
@@ -14,6 +14,8 @@ export default class InputWithPicklist extends UserDataValidator {
|
|
|
14
14
|
@api regExp
|
|
15
15
|
@api options
|
|
16
16
|
@api inputPrefix
|
|
17
|
+
@api inputType = 'text'
|
|
18
|
+
@api inputmode = 'text'
|
|
17
19
|
@api hidePlaceholderPicklist
|
|
18
20
|
@api showDropdownAsModal
|
|
19
21
|
@api modalDimentionStart = 1280
|