fleetcor-lwc 3.7.0 → 3.8.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.
Files changed (15) hide show
  1. package/README.md +70 -17
  2. package/frontend/components/flt/inputPhone/__test__/inputPhone.test.js +113 -0
  3. package/frontend/components/flt/inputPhone/inputPhone.html +24 -103
  4. package/frontend/components/flt/inputPhone/inputPhone.js +91 -187
  5. package/frontend/components/flt/inputPhone/inputPhone.scss +56 -238
  6. package/frontend/components/flt/inputText/inputText.js +3 -3
  7. package/frontend/components/flt/inputText/inputText.scss +7 -7
  8. package/frontend/components/flt/picklist/picklist.html +5 -7
  9. package/frontend/components/flt/picklist/picklist.js +32 -3
  10. package/frontend/components/flt/picklist/picklist.scss +16 -2
  11. package/frontend/components/flt/picklist/picklistModal.html +5 -7
  12. package/package.json +3 -3
  13. package/frontend/components/flt/inputPhone/__test__/radioItem.test.js +0 -56
  14. package/frontend/components/flt/inputPhone/arrow.svg +0 -3
  15. package/frontend/components/flt/inputPhone/close-button.svg +0 -3
package/README.md CHANGED
@@ -357,18 +357,18 @@ Add / update `lwc.config.json` file in your project
357
357
 
358
358
  #### Picklist variables
359
359
 
360
- | @api variables | type | values | required | description |
361
- | ------------------- | ------ | -------- | -------- | --------------------------------------------------------------------------------------------- |
362
- | name | string | | + | |
363
- | options | array | | + | Array of available items with `label` and `value` as unique string |
364
- | size | string | `medium` | - | Size of buttons (button sizes) |
365
- | showDropdownAsModal | bool | | - | Show modal with selected options |
366
- | modalDimentionStart | int | 1280 | - | If showDropdownAsModal is true, by default modal become visible window width less then 1280px |
367
- | value | string | | - | Current value from options items value |
368
- | disabled | bool | | - | |
369
- | required | bool | | - | |
370
- | group | string | | - | |
371
- | error-message | string | | - | |
360
+ | @api variables | type | values | required | description |
361
+ | ---------------------- | ------ | -------- | -------- | --------------------------------------------------------------------------------------------- |
362
+ | name | string | | + | |
363
+ | options | array | | + | Array of available items with `label` and `value` as unique string |
364
+ | size | string | `medium` | - | Size of buttons (button sizes) |
365
+ | show-dropdown-as-modal | bool | | - | Show modal with selected options |
366
+ | modal-dimention-start | int | 1280 | - | If showDropdownAsModal is true, by default modal become visible window width less then 1280px |
367
+ | value | string | | - | Current value from options items value |
368
+ | disabled | bool | | - | |
369
+ | required | bool | | - | |
370
+ | group | string | | - | |
371
+ | error-message | string | | - | |
372
372
 
373
373
  #### Picklist methods
374
374
 
@@ -447,11 +447,11 @@ Add / update `lwc.config.json` file in your project
447
447
 
448
448
  #### Input Text events
449
449
 
450
- | name | handle | return | description |
451
- | ------------- | ------------ | ------ | ------------------------------------- |
452
- | focus_happend | event | object | Return common Event object |
453
- | blur_happend | event | object | Return common Event object |
454
- | change | event.detail | object | Return full data of component's state |
450
+ | name | handle | return | description |
451
+ | ------ | ------------ | ------ | ------------------------------------- |
452
+ | focus | event | object | Return common Event object |
453
+ | blur | event | object | Return common Event object |
454
+ | change | event.detail | object | Return full data of component's state |
455
455
 
456
456
  ### Input Email
457
457
 
@@ -471,6 +471,50 @@ This component fully extends from `Input Text`
471
471
  ...
472
472
  ```
473
473
 
474
+ ### Input Phone
475
+
476
+ ```html
477
+ <flt-input-phone
478
+ name="phone"
479
+ value="+44 3435234523"
480
+ error-message="Error! Required field"
481
+ required
482
+ placeholder="Phone Number"
483
+ error-message="Please enter a valid phone"
484
+ ></flt-input-phone>
485
+ ...
486
+ ```
487
+
488
+ #### Input Phone variables
489
+
490
+ | @api variables | type | values | required | description |
491
+ | ---------------------- | ------ | ------ | -------- | --------------------------------------------------------------------------------------------- |
492
+ | name | string | | + | |
493
+ | error-message | string | | - | |
494
+ | value | string | | - | |
495
+ | required | bool | | - | |
496
+ | disabled | bool | | - | |
497
+ | placeholder | string | | - | |
498
+ | code-by-default | string | `GB` | - | Country code. by default UK country code `GB` |
499
+ | show-dropdown-as-modal | bool | | - | |
500
+ | modal-dimention-start | int | 1280 | - | If showDropdownAsModal is true, by default modal become visible window width less then 1280px |
501
+
502
+ #### Input Phone methods
503
+
504
+ | @api | params | return type | description |
505
+ | -------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
506
+ | validate | | void | Check component validation and show error message to user |
507
+ | isValid | | bool | Return `true` or `false` |
508
+ | getData | silent:bool | object | Return full data of component's state. If `silent` true - return value will be without any errors displaying for client |
509
+
510
+ #### Input Phone events
511
+
512
+ | name | handle | return | description |
513
+ | ------ | ------------ | ------ | ------------------------------------- |
514
+ | focus | event | object | Return common Event object |
515
+ | blur | event | object | Return common Event object |
516
+ | change | event.detail | object | Return full data of component's state |
517
+
474
518
  ## Interfaces
475
519
 
476
520
  #### ModalViewer
@@ -563,7 +607,9 @@ You can override them as you wish by global css variables as priority.
563
607
  --flt-input-text-font-weight: 400;
564
608
  --flt-input-border-color-active: #6b7280;
565
609
  --flt-input-border-color-success: #59eb9c;
610
+ --flt-input-border-color-error: #ed123d;
566
611
  --flt-input-border-radius: 12px;
612
+ --flt-input-prefix-gap: 8px;
567
613
  --flt-card-bgc: #fff;
568
614
  --flt-card-padding: 24px;
569
615
  --flt-card-border-radius: 20px;
@@ -612,11 +658,18 @@ You can override them as you wish by global css variables as priority.
612
658
  --flt-picklist-option-first-child-padding: 32px 16px 12px;
613
659
  --flt-picklist-option-padding: 12px 16px;
614
660
  --flt-picklist-dropdown-modal-header-bgc: #f3f4f6;
661
+ --flt-input-phone-border-color-success: #59eb9c;
662
+ --flt-input-phone-border-color-error: #ed123d;
615
663
  }
616
664
  ```
617
665
 
618
666
  ## Release Notes:
619
667
 
668
+ - v.3.8.0
669
+
670
+ - Added new component `flt-input-phone`
671
+ - Updated: `flt-input-text`, `flt-picklist`
672
+
620
673
  - v.3.7.0
621
674
 
622
675
  - Added new component `flt-picklist`
package/frontend/components/flt/inputPhone/__test__/inputPhone.test.js ADDED
@@ -0,0 +1,113 @@
1
+ import { createElement } from 'lwc'
2
+ import InputPhone from 'flt/inputPhone'
3
+
4
+ Object.defineProperty(window, 'matchMedia', {
5
+ writable: true,
6
+ value: jest.fn().mockImplementation((query) => ({
7
+ matches: false
8
+ // media: query,
9
+ // onchange: null,
10
+ // addListener: jest.fn(), // Deprecated
11
+ // removeListener: jest.fn(), // Deprecated
12
+ // addEventListener: jest.fn(),
13
+ // removeEventListener: jest.fn(),
14
+ // dispatchEvent: jest.fn()
15
+ }))
16
+ })
17
+
18
+ describe('flt-input-phone', () => {
19
+ afterEach(() => {
20
+ while (document.body.firstChild) {
21
+ document.body.removeChild(document.body.firstChild)
22
+ }
23
+ })
24
+
25
+ it('flt-input-phone base', async () => {
26
+ const inputPhoneEl = createElement('flt-input-phone', { is: InputPhone })
27
+ inputPhoneEl.name = 'phone'
28
+ inputPhoneEl.required = true
29
+ inputPhoneEl.errorMessage = 'Please enter a valid phone'
30
+ inputPhoneEl.codeByDefault = 'BY'
31
+ inputPhoneEl.value = '+375 295558386'
32
+ inputPhoneEl.placeholder = 'Phone Number'
33
+ document.body.appendChild(inputPhoneEl)
34
+ await expect(inputPhoneEl.firstChild.classList).toContain('flt-input-phone')
35
+
36
+ const picklistEl = inputPhoneEl.querySelector('flt-picklist')
37
+ picklistEl.firstChild.focus()
38
+ return Promise.resolve().then(async () => {
39
+ const dropDownEl = picklistEl.querySelector('.flt-picklist__dropdown')
40
+ await expect(dropDownEl).toBeTruthy()
41
+ const options = dropDownEl.querySelectorAll('.flt-picklist__option')
42
+ options[options.length - 1].click()
43
+ inputPhoneEl.dispatchEvent(new CustomEvent('change'))
44
+ return Promise.resolve().then(async () => {
45
+ const data = picklistEl.getData()
46
+ await expect(data.value).toBe('+44')
47
+ const inputEl = inputPhoneEl.querySelector('flt-input-text')
48
+ inputEl.firstChild.focus()
49
+ inputEl.value = '3456'
50
+ inputEl.dispatchEvent(new CustomEvent('change', { detail: inputEl.getData() }))
51
+ return Promise.resolve().then(async () => {
52
+ inputEl.value = '03435234523'
53
+ inputEl.dispatchEvent(new CustomEvent('change', { detail: inputEl.getData() }))
54
+ return Promise.resolve().then(async () => {
55
+ await expect(inputPhoneEl.getData().isValid).toBeTruthy()
56
+ })
57
+ })
58
+ })
59
+ })
60
+ })
61
+
62
+ it('flt-input-phone negotive', async () => {
63
+ const inputPhoneEl = createElement('flt-input-phone', { is: InputPhone })
64
+ inputPhoneEl.name = 'phone'
65
+ inputPhoneEl.required = true
66
+ inputPhoneEl.errorMessage = 'Please enter a valid phone'
67
+ inputPhoneEl.codeByDefault = 'gg'
68
+ inputPhoneEl.value = '2958386'
69
+ inputPhoneEl.placeholder = 'Phone Number'
70
+ document.body.appendChild(inputPhoneEl)
71
+ await expect(inputPhoneEl.firstChild.classList).toContain('flt-input-phone')
72
+ await expect(inputPhoneEl.isValid()).toBeFalsy()
73
+ inputPhoneEl.value = ''
74
+ inputPhoneEl.validate()
75
+ await expect(inputPhoneEl.isValid()).toBeFalsy()
76
+ })
77
+
78
+ it('flt-input-phone negotive 2', async () => {
79
+ const inputPhoneEl = createElement('flt-input-phone', { is: InputPhone })
80
+ inputPhoneEl.name = 'phone'
81
+ inputPhoneEl.required = true
82
+ inputPhoneEl.errorMessage = 'Please enter a valid phone'
83
+ inputPhoneEl.value = '+44 3435234523'
84
+ inputPhoneEl.placeholder = 'Phone Number'
85
+ document.body.appendChild(inputPhoneEl)
86
+
87
+ return Promise.resolve().then(async () => {
88
+ await expect(inputPhoneEl.firstChild.classList).toContain('flt-input-phone')
89
+ await expect(inputPhoneEl.isValid()).toBeTruthy()
90
+ inputPhoneEl.value = undefined
91
+ return Promise.resolve().then(async () => {
92
+ await expect(inputPhoneEl.isValid()).toBeFalsy()
93
+ })
94
+ })
95
+ })
96
+
97
+ it('flt-input-phone disabled', async () => {
98
+ const inputPhoneEl = createElement('flt-input-phone', { is: InputPhone })
99
+ inputPhoneEl.name = 'phone'
100
+ inputPhoneEl.required = true
101
+ inputPhoneEl.disabled = true
102
+ inputPhoneEl.errorMessage = 'Please enter a valid phone'
103
+ inputPhoneEl.codeByDefault = 'gg'
104
+ inputPhoneEl.value = '2958386'
105
+ inputPhoneEl.placeholder = 'Phone Number'
106
+ document.body.appendChild(inputPhoneEl)
107
+ return Promise.resolve().then(async () => {
108
+ await expect(inputPhoneEl.firstChild.classList).toContain('flt-input-phone_disabled')
109
+ inputPhoneEl.validate()
110
+ await expect(inputPhoneEl.isValid()).toBeFalsy()
111
+ })
112
+ })
113
+ })
package/frontend/components/flt/inputPhone/inputPhone.html CHANGED
@@ -1,109 +1,30 @@
1
1
  <template lwc:render-mode="light">
2
- <div class={inputStyle} tabindex="0">
2
+ <div class={inputStyle}>
3
3
  <div class="flt-input-phone__block">
4
- <div class="flt-input-phone__flag-wrapper">
5
- <div class="flt-input-phone__flag-block" onclick={handleFlagActivate}>
6
- <div class="flt-input-phone__flag-container">
7
- <div class="flt-input-phone__flag-selected-value">
8
- <img
9
- class="flt-input-phone__flag-selected-icon"
10
- src={selectedFlag}
11
- alt="Flag" />
12
- </div>
13
- </div>
14
- </div>
15
- </div>
16
- <label onclick={handleLabelClick} class="flt-input-phone__wrapp" for={name}>
17
- <div class="flt-input-phone__placeholder">{placeholder}</div>
18
- <div class="flt-input-phone__number">
19
- <span class="flt-input-phone__code">{selectedFlagOption.label}</span>
20
- <input
21
- id={name}
22
- onfocus={handleFocused}
23
- onblur={handleBlur}
24
- oninput={handleInput}
25
- class="flt-input-phone__input"
26
- maxlength={maxLength}
27
- type="tel"
28
- name={name} />
29
- </div>
30
- </label>
4
+ <flt-picklist
5
+ class="flt-input-phone__code"
6
+ placeholder="Select country code"
7
+ value={codeValue}
8
+ options={flagOptions}
9
+ disabled={disabled}
10
+ onfocus={handleFocus}
11
+ onblur={handleBlur}
12
+ show-dropdown-as-modal={showDropdownAsModal}
13
+ modal-dimention-start={modalDimentionStart}
14
+ onchange={handleFlagChanged}
15
+ name="phoneCode"></flt-picklist>
16
+ <flt-input-text
17
+ class="flt-input-phone__number"
18
+ prefix={prefix}
19
+ disabled={disabled}
20
+ type="number"
21
+ onfocus={handleFocus}
22
+ onblur={handleBlur}
23
+ placeholder={placeholder}
24
+ value={phoneNumber}
25
+ onchange={handlePhoneNumberChanged}
26
+ name="phoneNumber"></flt-input-text>
31
27
  </div>
32
-
33
- <template if:true={picklistInsideModalView}>
34
- <div class={computedModalClass}>
35
- <div class="flt-input-phone__modal-glass" onclick={handleFlagActivate}></div>
36
- <div class="flt-input-phone__modal-container">
37
- <div class="flt-input-phone__modal-header">
38
- <span class="flt-input-phone__modal-header-title"
39
- >Select country code:</span
40
- >
41
- <a
42
- href="javascript:void(0);"
43
- onclick={handleFlagActivate}
44
- class="flt-input-phone__modal-close-button">
45
- <img
46
- src={closeButton}
47
- class="flt-input-phone__modal-close-button-icon"
48
- alt="close button" />
49
- </a>
50
- </div>
51
- <ul class="flt-input-phone__flag-list">
52
- <template for:each={flagOptions} for:item="item">
53
- <li
54
- if:true={item.selected}
55
- key={item.key}
56
- onclick={handleSelectFlag}
57
- data-value={item.value}
58
- class="flt-input-phone__flag-list-item flt-input-phone__flag-list-item_selected">
59
- <img
60
- class="flt-input-phone__flag-icon"
61
- src={item.icon}
62
- alt={item.value} />
63
- <span class="flt-input-phone__flag-icon-label">{item.label}</span>
64
- </li>
65
- <li
66
- if:false={item.selected}
67
- key={item.key}
68
- onclick={handleSelectFlag}
69
- data-value={item.value}
70
- class="flt-input-phone__flag-list-item">
71
- <img
72
- class="flt-input-phone__flag-icon"
73
- src={item.icon}
74
- alt={item.value} />
75
- <span class="flt-input-phone__flag-icon-label">{item.label}</span>
76
- </li>
77
- </template>
78
- </ul>
79
- </div>
80
- </div>
81
- </template>
82
- <template if:false={picklistInsideModalView}>
83
- <ul class="flt-input-phone__flag-list">
84
- <template for:each={flagOptions} for:item="item">
85
- <li
86
- if:true={item.selected}
87
- key={item.key}
88
- onclick={handleSelectFlag}
89
- data-value={item.value}
90
- class="flt-input-phone__flag-list-item flt-input-phone__flag-list-item_selected">
91
- <img class="flt-input-phone__flag-icon" src={item.icon} alt={item.value} />
92
- <span class="flt-input-phone__flag-icon-label">{item.label}</span>
93
- </li>
94
- <li
95
- if:false={item.selected}
96
- key={item.key}
97
- onclick={handleSelectFlag}
98
- data-value={item.value}
99
- class="flt-input-phone__flag-list-item">
100
- <img class="flt-input-phone__flag-icon" src={item.icon} alt={item.value} />
101
- <span class="flt-input-phone__flag-icon-label">{item.label}</span>
102
- </li>
103
- </template>
104
- </ul>
105
- </template>
106
-
107
28
  <div class="flt-input-phone__error">{errorMessage}</div>
108
29
  </div>
109
30
  </template>