fleetcor-lwc 3.12.2 → 3.13.1

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 (9) hide show
  1. package/README.md +60 -10
  2. package/frontend/components/flt/alertInfo/alertInfo.scss +3 -0
  3. package/frontend/components/flt/collapsibleSection/__test__/collapsibleSection.test.js +40 -0
  4. package/frontend/components/flt/collapsibleSection/collapsibleSection.html +23 -6
  5. package/frontend/components/flt/collapsibleSection/collapsibleSection.js +11 -34
  6. package/frontend/components/flt/collapsibleSection/collapsibleSection.scss +45 -34
  7. package/frontend/components/flt/inputPhone/inputPhone.js +59 -24
  8. package/frontend/components/flt/inputText/inputText.js +1 -1
  9. package/package.json +4 -3
package/README.md CHANGED
@@ -700,10 +700,18 @@ This component fully extends from `Input Text`
700
700
  ### Collapsible Section
701
701
 
702
702
  ```html
703
- <flt-collapsible-section>
704
- <div slot="title">Collapsible Section Title</div>
705
- <div>
706
- <div>Any Content...</div>
703
+ <flt-collapsible-section title="Details">
704
+ <div class="collapsible-section__body-item">
705
+ <flt-icon icon="oil"></flt-icon>
706
+ <span>Oil</span>
707
+ </div>
708
+ <div class="collapsible-section__body-item">
709
+ <flt-icon icon="fuel"></flt-icon>
710
+ <span>Fuel</span>
711
+ </div>
712
+ <div class="collapsible-section__body-item">
713
+ <flt-icon icon="hgv"></flt-icon>
714
+ <span>Hgv</span>
707
715
  </div>
708
716
  </flt-collapsible-section>
709
717
  ```
@@ -713,17 +721,23 @@ This component fully extends from `Input Text`
713
721
 
714
722
  #### Collapsible Section variables
715
723
 
716
- | @api variables | type | values | required | description |
717
- | -------------- | ---- | ------ | -------- | ------------------------------------------------------------------------------ |
718
- | closed | bool | | - | To control section status `closed/opened` (default - false) |
719
- | styleOff | bool | | - | To be able to turn off default styles for named slot `title` (default - false) |
724
+ | @api variables | type | values | required | description |
725
+ | -------------- | ---- | ------ | -------- | ------------------------------------------------------------------- |
726
+ | opened | bool | | - | To control section status `closed` or `opened` (default - `closed`) |
727
+ | title | html | | - | Any html text |
728
+
729
+ #### Collapsible Section methods
730
+
731
+ | @api | params | return type | description |
732
+ | -------------------- | ------ | ----------- | -------------------- |
733
+ | handleToggleCollapse | | void | Toggle `opened` flag |
720
734
 
721
735
  #### Collapsible Section slots
722
736
 
723
737
  | slot | description |
724
738
  | ------- | ----------------------------- |
739
+ | header | any html element can be there |
725
740
  | default | any html element can be there |
726
- | title | any html element can be there |
727
741
 
728
742
  </details>
729
743
 
@@ -897,6 +911,29 @@ You can override them as you wish by global css variables as priority.
897
911
  --flt-alert-info-content-color: #1a1a1a;
898
912
  --flt-alert-info-icon-max-width: 20px;
899
913
  --flt-alert-info-gap: 16px;
914
+ --flt-collapsible-section-background: initial;
915
+ --flt-collapsible-section-padding: initial;
916
+ --flt-collapsible-section-border: initial;
917
+ --flt-collapsible-section-border-radius: initial;
918
+ --flt-collapsible-section-box-shadow: initial;
919
+ --flt-collapsible-section-opened-header-base-icon-transform: rotate(180deg) scale(
920
+ -1
921
+ );
922
+ --flt-collapsible-section-body-animation-duration: 0.5s;
923
+ --flt-collapsible-section-body-animation-type: ease;
924
+ --flt-collapsible-section-header-base-padding: initial;
925
+ --flt-collapsible-section-header-base-border: initial;
926
+ --flt-collapsible-section-header-base-border-radius: initial;
927
+ --flt-collapsible-section-header-base-background: initial;
928
+ --flt-collapsible-section-header-base-cursor: pointer;
929
+ --flt-collapsible-section-header-base-title-color: #1a1a1a;
930
+ --flt-collapsible-section-header-base-font-size: 16px;
931
+ --flt-collapsible-section-header-base-line-height: 24px;
932
+ --flt-collapsible-section-header-base-font-weight: 700;
933
+ --flt-collapsible-section-body-animation-duration: 0.5s;
934
+ --flt-collapsible-section-body-animation-type: ease;
935
+ --flt-collapsible-section-header-base-icon-transform: rotate(180deg);
936
+ --flt-collapsible-section-header-base-icon-fill: #1a1a1a;
900
937
  }
901
938
  ```
902
939
 
@@ -909,7 +946,20 @@ You can override them as you wish by global css variables as priority.
909
946
  <details>
910
947
  <summary>Click to expand/collapse</summary>
911
948
 
912
- v.3.12.1
949
+ v.3.13.1
950
+
951
+ - Bug fix `flt-input-phone` and `flt-input-text` component
952
+
953
+ ---
954
+
955
+ v.3.13.0
956
+
957
+ - Update `flt-collapsible-section` component
958
+ - Update Demo page
959
+
960
+ ---
961
+
962
+ v.3.12.2
913
963
 
914
964
  - Bugfix `flt-alert-info`
915
965
 
package/frontend/components/flt/alertInfo/alertInfo.scss CHANGED
@@ -27,9 +27,12 @@
27
27
 
28
28
  &__icon {
29
29
  flex-shrink: 0;
30
+
30
31
  .flt-icon {
31
32
  max-width: var(--flt-alert-info-icon-max-width, 20px);
33
+ max-height: var(--flt-alert-info-icon-max-heigth, 20px);
32
34
  }
35
+ max-height: var(--flt-alert-info-icon-max-heigth, 20px);
33
36
  max-width: var(--flt-alert-info-icon-max-width, 20px);
34
37
  }
35
38
  }
package/frontend/components/flt/collapsibleSection/__test__/collapsibleSection.test.js ADDED
@@ -0,0 +1,40 @@
1
+ import { createElement, setHooks } from 'lwc'
2
+
3
+ setHooks({
4
+ sanitizeHtmlContent(content) {
5
+ return content
6
+ }
7
+ })
8
+
9
+ import CollapsibleSection from 'flt/collapsibleSection'
10
+
11
+ describe('flt-collapsible-section', () => {
12
+ afterEach(() => {
13
+ while (document.body.firstChild) {
14
+ document.body.removeChild(document.body.firstChild)
15
+ }
16
+ })
17
+
18
+ it('flt collapsible section base', () => {
19
+ const collapsibleSectionEl = createElement('flt-collapsible-section', {
20
+ is: CollapsibleSection
21
+ })
22
+ document.body.appendChild(collapsibleSectionEl)
23
+ expect(collapsibleSectionEl.firstChild.classList).toContain('flt-collapsible-section')
24
+
25
+ collapsibleSectionEl.opened = true
26
+
27
+ return Promise.resolve().then(async () => {
28
+ expect(collapsibleSectionEl.firstChild.classList).toContain(
29
+ 'flt-collapsible-section_opened'
30
+ )
31
+
32
+ collapsibleSectionEl.handleToggleCollapse()
33
+ return Promise.resolve().then(async () => {
34
+ expect(collapsibleSectionEl.firstChild.classList).not.toContain(
35
+ 'flt-collapsible-section_opened'
36
+ )
37
+ })
38
+ })
39
+ })
40
+ })
package/frontend/components/flt/collapsibleSection/collapsibleSection.html CHANGED
@@ -1,10 +1,27 @@
1
1
  <template lwc:render-mode="light">
2
- <div class={titleClass} onclick={handleToggleWrapper}>
3
- <slot name="title"><span class="title-empty-slot"></span></slot>
4
- </div>
5
- <div class={containerWrapperClass}>
6
- <div>
7
- <slot></slot>
2
+ <div class={collapsibleSectionStyles}>
3
+ <div class="flt-collapsible-section__header">
4
+ <slot name="header">
5
+ <div class="flt-collapsible-section__header-base" onclick={handleToggleCollapse}>
6
+ <div
7
+ class="flt-collapsible-section__header-base-title"
8
+ lwc:inner-html={title}></div>
9
+ <svg
10
+ class="flt-collapsible-section__header-base-icon"
11
+ width="24"
12
+ height="24"
13
+ viewBox="0 0 24 24"
14
+ fill="none">
15
+ <path
16
+ d="M5 14.7949L6.41 16.2049L12 10.6249L17.59 16.2049L19 14.7949L12 7.79492L5 14.7949Z"></path>
17
+ </svg>
18
+ </div>
19
+ </slot>
20
+ </div>
21
+ <div class="flt-collapsible-section__body">
22
+ <div class="flt-collapsible-section__content">
23
+ <slot></slot>
24
+ </div>
8
25
  </div>
9
26
  </div>
10
27
  </template>
package/frontend/components/flt/collapsibleSection/collapsibleSection.js CHANGED
@@ -1,43 +1,20 @@
1
- import { api } from 'lwc';
1
+ import { api } from 'lwc'
2
2
  import { BaseElement } from 'fleetcor-lwc'
3
- import './collapsibleSection.scss';
3
+ import './collapsibleSection.scss'
4
4
 
5
5
  export default class CollapsibleSection extends BaseElement {
6
- titleSlotNonEmpty;
6
+ @api opened
7
+ @api title = 'Section Title'
7
8
 
8
- @api closed = false;
9
- @api styleOff = false;
10
-
11
- get containerWrapperClass() {
12
- return this.generateClassNameList({
13
- 'collapsible-section__container-wrapper': true,
14
- 'collapsible-section__container-wrapper_expanded': !this.closed
15
- })
9
+ @api
10
+ handleToggleCollapse() {
11
+ this.opened = !this.opened
16
12
  }
17
13
 
18
- get titleClass() {
19
- if (this.styleOff) {
20
- return '';
21
- }
14
+ get collapsibleSectionStyles() {
22
15
  return this.generateClassNameList({
23
- 'collapsible-section__title': this.titleSlotNonEmpty,
24
- 'collapsible-section__title-active': !this.closed && this.titleSlotNonEmpty
25
- });
26
- }
27
-
28
-
29
- renderedCallback() {
30
- const titleEmptySlot = this.querySelector('.title-empty-slot');
31
- if (titleEmptySlot) {
32
- this.titleSlotNonEmpty = false;
33
- } else {
34
- this.titleSlotNonEmpty = true;
35
- }
36
- }
37
-
38
- handleToggleWrapper() {
39
- if (this.titleSlotNonEmpty) {
40
- this.closed = !this.closed;
41
- }
16
+ 'flt-collapsible-section': true,
17
+ 'flt-collapsible-section_opened': this.opened
18
+ })
42
19
  }
43
20
  }
package/frontend/components/flt/collapsibleSection/collapsibleSection.scss CHANGED
@@ -1,50 +1,61 @@
1
- .collapsible-section {
2
- &__container {
3
- animation: fadeOut 0.5s ease-in;
1
+ .flt-collapsible-section {
2
+ background: var(--flt-collapsible-section-background, initial);
3
+ padding: var(--flt-collapsible-section-padding, initial);
4
+ border: var(--flt-collapsible-section-border, initial);
5
+ border-radius: var(--flt-collapsible-section-border-radius, initial);
6
+ box-shadow: var(--flt-collapsible-section-box-shadow, initial);
7
+
8
+ &_opened {
9
+ .flt-collapsible-section__body {
10
+ grid-template-rows: 1fr;
11
+ }
12
+
13
+ .flt-collapsible-section__header-base-icon {
14
+ transform: var(
15
+ --flt-collapsible-section-opened-header-base-icon-transform,
16
+ rotate(180deg) scale(-1)
17
+ );
18
+ }
4
19
  }
5
20
 
6
- &__container-wrapper {
21
+ &__body {
7
22
  display: grid;
8
23
  grid-template-rows: 0fr;
9
- transition: grid-template-rows 500ms, margin-top 500ms;
10
-
11
- &_expanded {
12
- grid-template-rows: 1fr;
13
- }
24
+ transition: grid-template-rows var(--flt-collapsible-section-body-animation-duration, 0.5s)
25
+ var(--flt-collapsible-section-body-animation-type, ease);
14
26
  }
15
27
 
16
- &__container-wrapper > div {
28
+ &__content {
17
29
  overflow: hidden;
18
- margin-top: 0px;
30
+ min-height: 0;
19
31
  }
20
32
 
21
- &__title {
22
- font-size: 16px;
23
- font-weight: 700;
24
- padding-bottom: 12px;
25
- cursor: pointer;
33
+ &__header-base {
26
34
  display: flex;
27
- justify-content: space-between;
28
35
  align-items: center;
36
+ justify-content: space-between;
37
+ padding: var(--flt-collapsible-section-header-base-padding, initial);
38
+ border: var(--flt-collapsible-section-header-base-border, initial);
39
+ border-radius: var(--flt-collapsible-section-header-base-border-radius, initial);
40
+ background: var(--flt-collapsible-section-header-base-background, initial);
41
+ cursor: var(--flt-collapsible-section-header-base-cursor, pointer);
42
+ gap: 8px;
43
+ }
29
44
 
30
- &:after {
31
- content: '';
32
- display: inline-block;
33
- margin-left: 0.75rem;
34
- width: 10px;
35
- height: 10px;
36
- border-bottom: 2px solid #111827;
37
- border-left: 2px solid #111827;
38
- transform: rotate(-45deg);
39
- margin-top: -8px;
40
- transition: all 0.4s ease-out;
41
- }
45
+ &__header-base-title {
46
+ color: var(--flt-collapsible-section-header-base-title-color, #1a1a1a);
47
+ font-size: var(--flt-collapsible-section-header-base-font-size, 16px);
48
+ line-height: var(--flt-collapsible-section-header-base-line-height, 24px);
49
+ font-weight: var(--flt-collapsible-section-header-base-font-weight, 700);
50
+ }
42
51
 
43
- &_active {
44
- &:after {
45
- transform: rotate(135deg);
46
- margin-top: 2px;
47
- }
52
+ &__header-base-icon {
53
+ transition: transform var(--flt-collapsible-section-body-animation-duration, 0.5s)
54
+ var(--flt-collapsible-section-body-animation-type, ease);
55
+ transform: var(--flt-collapsible-section-header-base-icon-transform, rotate(180deg));
56
+ flex-shrink: 0;
57
+ path {
58
+ fill: var(--flt-collapsible-section-header-base-icon-fill, #1a1a1a);
48
59
  }
49
60
  }
50
61
  }
package/frontend/components/flt/inputPhone/inputPhone.js CHANGED
@@ -154,7 +154,7 @@ export default class InputPhone extends UserDataValidator {
154
154
  this.mask?.destroy()
155
155
  this.mask = null
156
156
  let settings = {
157
- mask: Number,
157
+ mask: /[1-9]/,
158
158
  overwrite: false,
159
159
  lazy: false
160
160
  }
@@ -176,13 +176,40 @@ export default class InputPhone extends UserDataValidator {
176
176
  this.mask.unmaskedValue = this.phoneNumber
177
177
  inputElement.value = this.mask.value
178
178
  this.mask.on('accept', () => {
179
- if (this.pastePhoneNumber) {
180
- inputElement.value = this.pastePhoneNumber
181
- this.mask.value = this.pastePhoneNumber
182
- this.pastePhoneNumber = null
179
+ if (inputElement.value?.at(0) == '+' || inputElement.value?.at(0) == '0') {
180
+ let value = inputElement.value.replace(/[^\w\\s]/gi, '')
181
+ if (inputElement.value?.at(0) == '0') {
182
+ value = CODE_VALUE_SB + value.slice(1)
183
+ }
184
+ let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
185
+ let number = phoneNumberUtil.parseAndKeepRawInput('+' + value)
186
+ let regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
187
+ let result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
188
+ if (result) {
189
+ const newCodeValue = `+${number.getCountryCode()}`
190
+ this.pastePhoneNumber = number.getNationalNumber() + ''
191
+
192
+ inputElement.value = this.pastePhoneNumber
193
+ this.mask.value = this.pastePhoneNumber
194
+ this.pastePhoneNumber = null
195
+ this.phoneNumber = this.mask.unmaskedValue
196
+
197
+ if (newCodeValue != this.codeValue) {
198
+ this.codeValue = newCodeValue
199
+ requestAnimationFrame(() => {
200
+ this.reInitIMask()
201
+ })
202
+ }
203
+ }
204
+ } else {
205
+ if (this.pastePhoneNumber) {
206
+ inputElement.value = this.pastePhoneNumber
207
+ this.mask.value = this.pastePhoneNumber
208
+ this.pastePhoneNumber = null
209
+ }
210
+ this.phoneNumber = this.mask.unmaskedValue
211
+ this.handleChange()
183
212
  }
184
- this.phoneNumber = this.mask.unmaskedValue
185
- this.handleChange()
186
213
  })
187
214
  }
188
215
 
@@ -191,25 +218,33 @@ export default class InputPhone extends UserDataValidator {
191
218
  if (!this.mask) {
192
219
  this.reInitIMask()
193
220
  this.querySelector('input').onpaste = (event) => {
194
- const value =
195
- '+' + event.clipboardData.getData('text/plain').replace(/[^\w\\s]/gi, '')
196
- try {
197
- let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
198
- let number = phoneNumberUtil.parseAndKeepRawInput(value)
199
- let regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
200
- let result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
201
- if (result) {
202
- const newCodeValue = `+${number.getCountryCode()}`
203
- this.pastePhoneNumber = number.getNationalNumber() + ''
204
- if (newCodeValue != this.codeValue) {
205
- this.codeValue = newCodeValue
206
- this.reInitIMask()
207
- }
208
- }
209
- } catch (error) {
210
- console.log('error', error)
221
+ let value = event.clipboardData.getData('text/plain').replace(/[^\w\\s]/gi, '')
222
+ if (value?.at(0) == '0') {
223
+ value = CODE_VALUE_SB + value.slice(1)
224
+ } else {
225
+ value = '+' + value
226
+ }
227
+ this.pastePhone(value)
228
+ }
229
+ }
230
+ }
231
+
232
+ pastePhone(value) {
233
+ try {
234
+ let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
235
+ let number = phoneNumberUtil.parseAndKeepRawInput(value)
236
+ let regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
237
+ let result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
238
+ if (result) {
239
+ const newCodeValue = `+${number.getCountryCode()}`
240
+ this.pastePhoneNumber = number.getNationalNumber() + ''
241
+ if (newCodeValue != this.codeValue) {
242
+ this.codeValue = newCodeValue
243
+ this.reInitIMask()
211
244
  }
212
245
  }
246
+ } catch (error) {
247
+ console.log('error', error)
213
248
  }
214
249
  }
215
250
 
package/frontend/components/flt/inputText/inputText.js CHANGED
@@ -63,7 +63,7 @@ export default class InputText extends InputElement {
63
63
  if (this.disabled) return
64
64
  this.focused = false
65
65
  this.touched = true
66
- this.value = (event.target.value || '').trimEnd()
66
+ this.value = (event.target.value || '').trim()
67
67
  event.target.value = this.value
68
68
  this.dispatchEvent(
69
69
  new CustomEvent('blur', {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fleetcor-lwc",
3
- "version": "3.12.2",
3
+ "version": "3.13.1",
4
4
  "description": "LWC framework by Fleetcor",
5
5
  "repository": {
6
6
  "type": "git",
@@ -84,6 +84,7 @@
84
84
  "webpack-dev-server": "^5.2.3"
85
85
  },
86
86
  "dependencies": {
87
- "imask": "^7.6.1"
87
+ "imask": "^7.6.1",
88
+ "prismjs": "^1.30.0"
88
89
  }
89
- }
90
+ }