fleetcor-lwc 3.10.0 → 3.11.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 +96 -46
- package/frontend/components/flt/alertInfo/__test__/alertInfo.test.js +28 -0
- package/frontend/components/flt/alertInfo/alertInfo.html +17 -0
- package/frontend/components/flt/alertInfo/alertInfo.js +21 -0
- package/frontend/components/flt/alertInfo/alertInfo.scss +35 -0
- package/frontend/components/flt/collapsibleSection/collapsibleSection.html +1 -1
- package/frontend/components/flt/collapsibleSection/collapsibleSection.js +3 -3
- package/frontend/components/flt/collapsibleSection/collapsibleSection.scss +18 -19
- package/frontend/components/flt/icon/icon.js +54 -50
- package/frontend/components/flt/icon/icons/tmpl-info.html +10 -0
- package/frontend/components/flt/icon/icons/tmpl-warning.html +7 -0
- package/frontend/core/interface/Animation.js +104 -1
- package/frontend/core/interface/InputElement.js +7 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,9 +31,6 @@ Add / update `lwc.config.json` file in your project
|
|
|
31
31
|
|
|
32
32
|
## Components
|
|
33
33
|
|
|
34
|
-
<details open>
|
|
35
|
-
<summary>Click to expand/collapse Components</summary>
|
|
36
|
-
|
|
37
34
|
### Radio Group Icon
|
|
38
35
|
|
|
39
36
|
```html
|
|
@@ -77,6 +74,7 @@ Add / update `lwc.config.json` file in your project
|
|
|
77
74
|
| name | handle | return | description |
|
|
78
75
|
| ------ | ------------ | ------ | ------------------------------------- |
|
|
79
76
|
| change | event.detail | object | Return full data of component's state |
|
|
77
|
+
|
|
80
78
|
</details>
|
|
81
79
|
|
|
82
80
|
---
|
|
@@ -128,12 +126,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
128
126
|
| name | handle | return | description |
|
|
129
127
|
| ------ | ------------ | ------ | ------------------------------------- |
|
|
130
128
|
| change | event.detail | object | Return full data of component's state |
|
|
129
|
+
|
|
131
130
|
</details>
|
|
132
131
|
|
|
133
132
|
---
|
|
134
133
|
|
|
135
|
-
|
|
136
|
-
|
|
137
134
|
### Checkbox
|
|
138
135
|
|
|
139
136
|
```html
|
|
@@ -148,7 +145,6 @@ Add / update `lwc.config.json` file in your project
|
|
|
148
145
|
></flt-checkbox>
|
|
149
146
|
```
|
|
150
147
|
|
|
151
|
-
|
|
152
148
|
<details>
|
|
153
149
|
<summary>Details</summary>
|
|
154
150
|
|
|
@@ -178,11 +174,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
178
174
|
| name | handle | return | description |
|
|
179
175
|
| ------ | ------------ | ------ | ------------------------------------- |
|
|
180
176
|
| change | event.detail | object | Return full data of component's state |
|
|
177
|
+
|
|
181
178
|
</details>
|
|
182
179
|
|
|
183
180
|
---
|
|
184
181
|
|
|
185
|
-
|
|
186
182
|
### Button
|
|
187
183
|
|
|
188
184
|
```html
|
|
@@ -219,12 +215,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
219
215
|
| default | any html element can be there |
|
|
220
216
|
| iconLeft | any html element can override left icon place |
|
|
221
217
|
| iconRight | any html element can override right icon place |
|
|
218
|
+
|
|
222
219
|
</details>
|
|
223
220
|
|
|
224
221
|
---
|
|
225
222
|
|
|
226
|
-
|
|
227
|
-
|
|
228
223
|
### Icon
|
|
229
224
|
|
|
230
225
|
```html
|
|
@@ -236,14 +231,14 @@ Add / update `lwc.config.json` file in your project
|
|
|
236
231
|
|
|
237
232
|
#### Icon variables
|
|
238
233
|
|
|
239
|
-
| @api variables | type | values
|
|
240
|
-
| -------------- | ------ |
|
|
241
|
-
| icon | string | `arrow-left, ev, carwash, car, van, unleaded, fuel, driver, vehicle, both, shared-card, ev-and-fuel, oil, key, blocked, multiple-users,arrow-right, diesel, hydrogen, signature, plus, plus-small, document, close, hgv, eye, sign, check,discount,pin-drop,credit-card,receipt,gear-wheel,app-shortcut,drug-indicator,sell,parking-sign,headset-mic,gas-station,directions-car,local-shipping,public,place` | - | |
|
|
234
|
+
| @api variables | type | values | required | description |
|
|
235
|
+
| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
|
|
236
|
+
| icon | string | `arrow-left, ev, carwash, car, van, unleaded, fuel, driver, vehicle, both, shared-card, ev-and-fuel, oil, key, blocked, multiple-users,arrow-right, diesel, hydrogen, signature, plus, plus-small, document, close, hgv, eye, sign, check, discount, pin-drop, credit-card, receipt, gear-wheel, app-shortcut, drug-indicator, sell, parking-sign, headset-mic, gas-station, directions-car, local-shipping, public, place, info, warning` | - | |
|
|
237
|
+
|
|
242
238
|
</details>
|
|
243
239
|
|
|
244
240
|
---
|
|
245
241
|
|
|
246
|
-
|
|
247
242
|
### Card
|
|
248
243
|
|
|
249
244
|
```html
|
|
@@ -258,11 +253,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
258
253
|
| slot | description |
|
|
259
254
|
| ------- | ----------------------------- |
|
|
260
255
|
| default | any html element can be there |
|
|
256
|
+
|
|
261
257
|
</details>
|
|
262
258
|
|
|
263
259
|
---
|
|
264
260
|
|
|
265
|
-
|
|
266
261
|
### Tooltip
|
|
267
262
|
|
|
268
263
|
```html
|
|
@@ -287,12 +282,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
287
282
|
| slot | description |
|
|
288
283
|
| ------- | ----------------------------- |
|
|
289
284
|
| default | any html element can be there |
|
|
285
|
+
|
|
290
286
|
</details>
|
|
291
287
|
|
|
292
288
|
---
|
|
293
289
|
|
|
294
|
-
|
|
295
|
-
|
|
296
290
|
### Loader
|
|
297
291
|
|
|
298
292
|
```html
|
|
@@ -309,11 +303,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
309
303
|
| slot | description |
|
|
310
304
|
| ------- | ----------------------------- |
|
|
311
305
|
| default | any html element can be there |
|
|
306
|
+
|
|
312
307
|
</details>
|
|
313
308
|
|
|
314
309
|
---
|
|
315
310
|
|
|
316
|
-
|
|
317
311
|
### Modal
|
|
318
312
|
|
|
319
313
|
```html
|
|
@@ -336,11 +330,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
336
330
|
| slot | description |
|
|
337
331
|
| ------- | ----------------------------- |
|
|
338
332
|
| default | any html element can be there |
|
|
333
|
+
|
|
339
334
|
</details>
|
|
340
335
|
|
|
341
336
|
---
|
|
342
337
|
|
|
343
|
-
|
|
344
338
|
### Progress Step
|
|
345
339
|
|
|
346
340
|
```html
|
|
@@ -357,11 +351,43 @@ Add / update `lwc.config.json` file in your project
|
|
|
357
351
|
| title | string | | + | title for component |
|
|
358
352
|
| total | int | | + | right number position |
|
|
359
353
|
| current | int | | + | left part of position (always less then total) |
|
|
354
|
+
|
|
360
355
|
</details>
|
|
361
356
|
|
|
362
357
|
---
|
|
363
358
|
|
|
359
|
+
### Alert Info
|
|
360
|
+
|
|
361
|
+
```html
|
|
362
|
+
<flt-alert-info
|
|
363
|
+
title="Contacts"
|
|
364
|
+
icon="warning"
|
|
365
|
+
content="Welcome to our application."
|
|
366
|
+
></flt-alert-info>
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
<details>
|
|
370
|
+
<summary>Details</summary>
|
|
371
|
+
|
|
372
|
+
#### Alert Info variables
|
|
373
|
+
|
|
374
|
+
| @api variables | type | values | required | description |
|
|
375
|
+
| -------------- | ------ | --------- | -------- | ----------------------------- |
|
|
376
|
+
| title | html | | + | title for component as HTML |
|
|
377
|
+
| content | html | | + | content for component as HTML |
|
|
378
|
+
| icon | string | icons cmp | + | any value from icons |
|
|
364
379
|
|
|
380
|
+
#### Alert Info slots
|
|
381
|
+
|
|
382
|
+
| slot | description |
|
|
383
|
+
| ------- | ------------------------------------------------ |
|
|
384
|
+
| icon | any html element can be there instead of icon |
|
|
385
|
+
| title | any html element can be there instead of title |
|
|
386
|
+
| content | any html element can be there instead of content |
|
|
387
|
+
|
|
388
|
+
</details>
|
|
389
|
+
|
|
390
|
+
---
|
|
365
391
|
|
|
366
392
|
### Radio Group Chips
|
|
367
393
|
|
|
@@ -382,17 +408,17 @@ Add / update `lwc.config.json` file in your project
|
|
|
382
408
|
|
|
383
409
|
#### Radio Group Chips variables
|
|
384
410
|
|
|
385
|
-
| @api variables | type | values | required | description
|
|
386
|
-
| -------------- | ------ | --------- | -------- |
|
|
387
|
-
| name | string | | + |
|
|
411
|
+
| @api variables | type | values | required | description |
|
|
412
|
+
| -------------- | ------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
413
|
+
| name | string | | + | |
|
|
388
414
|
| options | array | | + | Array of available items with parameters: `label` - string; `value` - unique string; `iconLeft` and `iconRight` - any value from `Icon` component |
|
|
389
|
-
| size | string | `medium` | - | Size of buttons (button sizes)
|
|
390
|
-
| type | string | `primary` | - | Type of selected button (button types)
|
|
391
|
-
| value | string | | - | Current value from options items value
|
|
392
|
-
| disabled | bool | | - |
|
|
393
|
-
| required | bool | | - |
|
|
394
|
-
| group | string | | - |
|
|
395
|
-
| error-message | string | | - |
|
|
415
|
+
| size | string | `medium` | - | Size of buttons (button sizes) |
|
|
416
|
+
| type | string | `primary` | - | Type of selected button (button types) |
|
|
417
|
+
| value | string | | - | Current value from options items value |
|
|
418
|
+
| disabled | bool | | - | |
|
|
419
|
+
| required | bool | | - | |
|
|
420
|
+
| group | string | | - | |
|
|
421
|
+
| error-message | string | | - | |
|
|
396
422
|
|
|
397
423
|
#### Radio Group Chips methods
|
|
398
424
|
|
|
@@ -407,12 +433,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
407
433
|
| name | handle | return | description |
|
|
408
434
|
| ------ | ------------ | ------ | ------------------------------------- |
|
|
409
435
|
| change | event.detail | object | Return full data of component's state |
|
|
436
|
+
|
|
410
437
|
</details>
|
|
411
438
|
|
|
412
439
|
---
|
|
413
440
|
|
|
414
|
-
|
|
415
|
-
|
|
416
441
|
### Picklist Chips
|
|
417
442
|
|
|
418
443
|
```html
|
|
@@ -461,11 +486,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
461
486
|
| name | handle | return | description |
|
|
462
487
|
| ------ | ------------ | ------ | ------------------------------------- |
|
|
463
488
|
| change | event.detail | object | Return full data of component's state |
|
|
489
|
+
|
|
464
490
|
</details>
|
|
465
491
|
|
|
466
492
|
---
|
|
467
493
|
|
|
468
|
-
|
|
469
494
|
### Input Text
|
|
470
495
|
|
|
471
496
|
```html
|
|
@@ -536,11 +561,11 @@ Add / update `lwc.config.json` file in your project
|
|
|
536
561
|
| focus | event | object | Return common Event object |
|
|
537
562
|
| blur | event | object | Return common Event object |
|
|
538
563
|
| change | event.detail | object | Return full data of component's state |
|
|
564
|
+
|
|
539
565
|
</details>
|
|
540
566
|
|
|
541
567
|
---
|
|
542
568
|
|
|
543
|
-
|
|
544
569
|
### Input Email
|
|
545
570
|
|
|
546
571
|
This component fully extends from `Input Text`
|
|
@@ -604,6 +629,7 @@ This component fully extends from `Input Text`
|
|
|
604
629
|
| focus | event | object | Return common Event object |
|
|
605
630
|
| blur | event | object | Return common Event object |
|
|
606
631
|
| change | event.detail | object | Return full data of component's state |
|
|
632
|
+
|
|
607
633
|
</details>
|
|
608
634
|
|
|
609
635
|
---
|
|
@@ -666,7 +692,6 @@ This component fully extends from `Input Text`
|
|
|
666
692
|
| name | handle | return | description |
|
|
667
693
|
| ------ | ------------ | ------ | ------------------------------------- |
|
|
668
694
|
| change | event.detail | object | Return full data of component's state |
|
|
669
|
-
</details>
|
|
670
695
|
|
|
671
696
|
</details>
|
|
672
697
|
|
|
@@ -678,7 +703,7 @@ This component fully extends from `Input Text`
|
|
|
678
703
|
<flt-collapsible-section>
|
|
679
704
|
<div slot="title">Collapsible Section Title</div>
|
|
680
705
|
<div>
|
|
681
|
-
|
|
706
|
+
<div>Any Content...</div>
|
|
682
707
|
</div>
|
|
683
708
|
</flt-collapsible-section>
|
|
684
709
|
```
|
|
@@ -688,22 +713,22 @@ This component fully extends from `Input Text`
|
|
|
688
713
|
|
|
689
714
|
#### Collapsible Section variables
|
|
690
715
|
|
|
691
|
-
| @api variables
|
|
692
|
-
|
|
|
693
|
-
| closed
|
|
694
|
-
| styleOff
|
|
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) |
|
|
695
720
|
|
|
696
721
|
#### Collapsible Section slots
|
|
697
722
|
|
|
698
|
-
| slot
|
|
699
|
-
|
|
|
700
|
-
| default
|
|
701
|
-
| title
|
|
723
|
+
| slot | description |
|
|
724
|
+
| ------- | ----------------------------- |
|
|
725
|
+
| default | any html element can be there |
|
|
726
|
+
| title | any html element can be there |
|
|
727
|
+
|
|
702
728
|
</details>
|
|
703
729
|
|
|
704
730
|
---
|
|
705
731
|
|
|
706
|
-
|
|
707
732
|
## Interfaces
|
|
708
733
|
|
|
709
734
|
#### ModalViewer
|
|
@@ -856,8 +881,24 @@ You can override them as you wish by global css variables as priority.
|
|
|
856
881
|
--flt-input-phone-border-color-error: #ed123d;
|
|
857
882
|
--flt-input-with-picklist-border-color-success: #59eb9c;
|
|
858
883
|
--flt-input-with-picklist-border-color-error: #ed123d;
|
|
884
|
+
--flt-alert-info-padding: 16px;
|
|
885
|
+
--flt-alert-info-border-radius: 8px;
|
|
886
|
+
--flt-alert-info-border: initial;
|
|
887
|
+
--flt-alert-info-background: #d6e7fc;
|
|
888
|
+
--flt-alert-info-warning-background: #f8d8d8;
|
|
889
|
+
--flt-alert-info-title-font-size: 16px;
|
|
890
|
+
--flt-alert-info-title-line-height: 24px;
|
|
891
|
+
--flt-alert-info-title-margin-bottom: 8px;
|
|
892
|
+
--flt-alert-info-title-font-weight: 700;
|
|
893
|
+
--flt-alert-info-title-color: #1a1a1a;
|
|
894
|
+
--flt-alert-info-content-font-size: 12px;
|
|
895
|
+
--flt-alert-info-content-line-height: 16px;
|
|
896
|
+
--flt-alert-info-content-font-weight: 400;
|
|
897
|
+
--flt-alert-info-content-color: #1a1a1a;
|
|
898
|
+
--flt-alert-info-icon-max-width: 20px;
|
|
859
899
|
}
|
|
860
900
|
```
|
|
901
|
+
|
|
861
902
|
</details>
|
|
862
903
|
|
|
863
904
|
---
|
|
@@ -867,6 +908,15 @@ You can override them as you wish by global css variables as priority.
|
|
|
867
908
|
<details>
|
|
868
909
|
<summary>Click to expand/collapse</summary>
|
|
869
910
|
|
|
911
|
+
v.3.11.0
|
|
912
|
+
|
|
913
|
+
- Added icons for component `flt-icon` : `info`, `warning`
|
|
914
|
+
- Added `Animation` methods `collapseIn`, `collapseOut`, `toggleCollapse`
|
|
915
|
+
- Bugfix `flt-input-text` method `isValid`
|
|
916
|
+
- Added component `flt-alert-info`
|
|
917
|
+
|
|
918
|
+
---
|
|
919
|
+
|
|
870
920
|
v.3.10.0
|
|
871
921
|
|
|
872
922
|
- Added expose for component `flt-collapsible-section`
|
|
@@ -886,13 +936,13 @@ v.3.9.8
|
|
|
886
936
|
---
|
|
887
937
|
|
|
888
938
|
- v.3.9.7
|
|
889
|
-
|
|
939
|
+
|
|
890
940
|
- Icon component updates to use `--flt-icon-color`
|
|
891
941
|
|
|
892
942
|
---
|
|
893
943
|
|
|
894
944
|
- v.3.9.6
|
|
895
|
-
|
|
945
|
+
|
|
896
946
|
- Added ability to use `iconLeft` and `iconRight` parameters in options (`flt-radio-group-chips`)
|
|
897
947
|
|
|
898
948
|
---
|
|
@@ -1245,4 +1295,4 @@ v.3.9.8
|
|
|
1245
1295
|
- Added hgv icon
|
|
1246
1296
|
- Added $FLT_BUTTON_LABEL_PADDING constant
|
|
1247
1297
|
|
|
1248
|
-
</details>
|
|
1298
|
+
</details>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { createElement, setHooks } from 'lwc'
|
|
2
|
+
import AlertInfo from 'flt/alertInfo'
|
|
3
|
+
|
|
4
|
+
setHooks({
|
|
5
|
+
sanitizeHtmlContent(content) {
|
|
6
|
+
return content
|
|
7
|
+
}
|
|
8
|
+
})
|
|
9
|
+
|
|
10
|
+
describe('flt-alert-info', () => {
|
|
11
|
+
afterEach(() => {
|
|
12
|
+
while (document.body.firstChild) {
|
|
13
|
+
document.body.removeChild(document.body.firstChild)
|
|
14
|
+
}
|
|
15
|
+
})
|
|
16
|
+
|
|
17
|
+
it('flt alert info base', () => {
|
|
18
|
+
const alertInfoEl = createElement('flt-alert-info', { is: AlertInfo })
|
|
19
|
+
document.body.appendChild(alertInfoEl)
|
|
20
|
+
expect(alertInfoEl.firstChild.classList).toContain('flt-alert-info')
|
|
21
|
+
alertInfoEl.title = 'Test'
|
|
22
|
+
alertInfoEl.content = 'Hello world!'
|
|
23
|
+
alertInfoEl.icon = 'warning'
|
|
24
|
+
return Promise.resolve().then(async () => {
|
|
25
|
+
expect(alertInfoEl.firstChild.classList).toContain('flt-alert-info_warning')
|
|
26
|
+
})
|
|
27
|
+
})
|
|
28
|
+
})
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<template lwc:render-mode="light">
|
|
2
|
+
<div class={alertClass}>
|
|
3
|
+
<div class="flt-alert-info__icon">
|
|
4
|
+
<slot name="icon">
|
|
5
|
+
<flt-icon icon={icon}></flt-icon>
|
|
6
|
+
</slot>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="flt-alert-info__block">
|
|
9
|
+
<slot name="title">
|
|
10
|
+
<div class="flt-alert-info__title" lwc:inner-html={title}></div>
|
|
11
|
+
</slot>
|
|
12
|
+
<slot name="content">
|
|
13
|
+
<div class="flt-alert-info__content" lwc:inner-html={content}></div>
|
|
14
|
+
</slot>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import './alertInfo.scss'
|
|
2
|
+
import { BaseElement } from 'fleetcor-lwc'
|
|
3
|
+
import { api } from 'lwc'
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @class AlertInfo
|
|
7
|
+
* @extends BaseElement
|
|
8
|
+
* @description Flt Alert Info component
|
|
9
|
+
*/
|
|
10
|
+
export default class AlertInfo extends BaseElement {
|
|
11
|
+
@api title
|
|
12
|
+
@api content
|
|
13
|
+
@api icon = 'info'
|
|
14
|
+
|
|
15
|
+
get alertClass() {
|
|
16
|
+
return this.generateClassNameList({
|
|
17
|
+
'flt-alert-info': true,
|
|
18
|
+
'flt-alert-info_warning': this.icon === 'warning'
|
|
19
|
+
})
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.flt-alert-info {
|
|
2
|
+
padding: var(--flt-alert-info-padding, 16px);
|
|
3
|
+
border-radius: var(--flt-alert-info-border-radius, 8px);
|
|
4
|
+
border: var(--flt-alert-info-border, initial);
|
|
5
|
+
display: flex;
|
|
6
|
+
gap: 16px;
|
|
7
|
+
background: var(--flt-alert-info-background, #d6e7fc);
|
|
8
|
+
|
|
9
|
+
&_warning {
|
|
10
|
+
background: var(--flt-alert-info-warning-background, #f8d8d8);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&__title {
|
|
14
|
+
font-size: var(--flt-alert-info-title-font-size, 16px);
|
|
15
|
+
line-height: var(--flt-alert-info-title-line-height, 24px);
|
|
16
|
+
margin-bottom: var(--flt-alert-info-title-margin-bottom, 8px);
|
|
17
|
+
font-weight: var(--flt-alert-info-title-font-weight, 700);
|
|
18
|
+
color: var(--flt-alert-info-title-color, #1a1a1a);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&__content {
|
|
22
|
+
font-size: var(--flt-alert-info-content-font-size, 12px);
|
|
23
|
+
line-height: var(--flt-alert-info-content-line-height, 16px);
|
|
24
|
+
font-weight: var(--flt-alert-info-content-font-weight, 400);
|
|
25
|
+
color: var(--flt-alert-info-content-color, #1a1a1a);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&__icon {
|
|
29
|
+
flex-shrink: 0;
|
|
30
|
+
.flt-icon {
|
|
31
|
+
max-width: var(--flt-alert-info-icon-max-width, 20px);
|
|
32
|
+
}
|
|
33
|
+
max-width: var(--flt-alert-info-icon-max-width, 20px);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -20,8 +20,8 @@ export default class CollapsibleSection extends BaseElement {
|
|
|
20
20
|
return '';
|
|
21
21
|
}
|
|
22
22
|
return this.generateClassNameList({
|
|
23
|
-
'collapsible-
|
|
24
|
-
'collapsible-
|
|
23
|
+
'collapsible-section__title': this.titleSlotNonEmpty,
|
|
24
|
+
'collapsible-section__title-active': !this.closed && this.titleSlotNonEmpty
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -35,7 +35,7 @@ export default class CollapsibleSection extends BaseElement {
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
handleToggleWrapper() {
|
|
39
39
|
if (this.titleSlotNonEmpty) {
|
|
40
40
|
this.closed = !this.closed;
|
|
41
41
|
}
|
|
@@ -1,48 +1,47 @@
|
|
|
1
1
|
.collapsible-section {
|
|
2
2
|
&__container {
|
|
3
3
|
animation: fadeOut 0.5s ease-in;
|
|
4
|
+
}
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
&__container-wrapper {
|
|
7
|
+
display: grid;
|
|
8
|
+
grid-template-rows: 0fr;
|
|
9
|
+
transition: grid-template-rows 500ms, margin-top 500ms;
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
11
|
+
&_expanded {
|
|
12
|
+
grid-template-rows: 1fr;
|
|
13
13
|
}
|
|
14
|
+
}
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
16
|
+
&__container-wrapper > div {
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
margin-top: 0px;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
&
|
|
21
|
+
&__title {
|
|
22
22
|
font-size: 16px;
|
|
23
23
|
font-weight: 700;
|
|
24
24
|
padding-bottom: 12px;
|
|
25
|
-
|
|
26
25
|
cursor: pointer;
|
|
27
26
|
display: flex;
|
|
28
27
|
justify-content: space-between;
|
|
29
28
|
align-items: center;
|
|
30
29
|
|
|
31
|
-
&:after{
|
|
32
|
-
content:'';
|
|
30
|
+
&:after {
|
|
31
|
+
content: '';
|
|
33
32
|
display: inline-block;
|
|
34
|
-
margin-left: .75rem;
|
|
33
|
+
margin-left: 0.75rem;
|
|
35
34
|
width: 10px;
|
|
36
35
|
height: 10px;
|
|
37
36
|
border-bottom: 2px solid #111827;
|
|
38
37
|
border-left: 2px solid #111827;
|
|
39
38
|
transform: rotate(-45deg);
|
|
40
39
|
margin-top: -8px;
|
|
41
|
-
transition: all .4s ease-out;
|
|
40
|
+
transition: all 0.4s ease-out;
|
|
42
41
|
}
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
&:after{
|
|
43
|
+
&_active {
|
|
44
|
+
&:after {
|
|
46
45
|
transform: rotate(135deg);
|
|
47
46
|
margin-top: 2px;
|
|
48
47
|
}
|
|
@@ -36,21 +36,23 @@ import TMPL_MAP_PIN from './icons/tmpl-map-pin.html'
|
|
|
36
36
|
import TMPL_EYE from './icons/tmpl-eye.html'
|
|
37
37
|
import TMPL_SIGN from './icons/tmpl-sign.html'
|
|
38
38
|
import TMPL_CHECK from './icons/tmpl-check.html'
|
|
39
|
-
import TMPL_DISCOUNT from './icons/tmpl-discount.html'
|
|
40
|
-
import TMPL_PIN_DROP from './icons/tmpl-pin-drop.html'
|
|
41
|
-
import TMPL_CREDIT_CARD from './icons/tmpl-credit-card.html'
|
|
42
|
-
import TMPL_RECEIPT from './icons/tmpl-receipt.html'
|
|
43
|
-
import TMPL_GEAR_WHEEL from './icons/tmpl-gear-wheel.html'
|
|
44
|
-
import TMPL_APP_SHORTCUT from './icons/tmpl-app-shortcut.html'
|
|
45
|
-
import TMPL_DRAG_INDICATOR from './icons/tmpl-drag-indicator.html'
|
|
46
|
-
import TMPL_SELL from './icons/tmpl-sell.html'
|
|
47
|
-
import TMPL_PARKING_SIGN from './icons/tmpl-parking-sign.html'
|
|
48
|
-
import TMPL_HEADSET_MIC from './icons/tmpl-headset-mic.html'
|
|
49
|
-
import TMPL_GAS_STATION from './icons/tmpl-gas-station.html'
|
|
50
|
-
import TMPL_DIRECTION_CAR from './icons/tmpl-directions-car.html'
|
|
51
|
-
import TMPL_LOCAL_SHIPPING from './icons/tmpl-local-shipping.html'
|
|
52
|
-
import TMPL_PUBLIC from './icons/tmpl-public.html'
|
|
53
|
-
import TMPL_PLACE from './icons/tmpl-place.html'
|
|
39
|
+
import TMPL_DISCOUNT from './icons/tmpl-discount.html'
|
|
40
|
+
import TMPL_PIN_DROP from './icons/tmpl-pin-drop.html'
|
|
41
|
+
import TMPL_CREDIT_CARD from './icons/tmpl-credit-card.html'
|
|
42
|
+
import TMPL_RECEIPT from './icons/tmpl-receipt.html'
|
|
43
|
+
import TMPL_GEAR_WHEEL from './icons/tmpl-gear-wheel.html'
|
|
44
|
+
import TMPL_APP_SHORTCUT from './icons/tmpl-app-shortcut.html'
|
|
45
|
+
import TMPL_DRAG_INDICATOR from './icons/tmpl-drag-indicator.html'
|
|
46
|
+
import TMPL_SELL from './icons/tmpl-sell.html'
|
|
47
|
+
import TMPL_PARKING_SIGN from './icons/tmpl-parking-sign.html'
|
|
48
|
+
import TMPL_HEADSET_MIC from './icons/tmpl-headset-mic.html'
|
|
49
|
+
import TMPL_GAS_STATION from './icons/tmpl-gas-station.html'
|
|
50
|
+
import TMPL_DIRECTION_CAR from './icons/tmpl-directions-car.html'
|
|
51
|
+
import TMPL_LOCAL_SHIPPING from './icons/tmpl-local-shipping.html'
|
|
52
|
+
import TMPL_PUBLIC from './icons/tmpl-public.html'
|
|
53
|
+
import TMPL_PLACE from './icons/tmpl-place.html'
|
|
54
|
+
import TMPL_WARNING from './icons/tmpl-warning.html'
|
|
55
|
+
import TMPL_INFO from './icons/tmpl-info.html'
|
|
54
56
|
|
|
55
57
|
/**
|
|
56
58
|
* @class Icon
|
|
@@ -58,66 +60,68 @@ import TMPL_PLACE from './icons/tmpl-place.html';
|
|
|
58
60
|
* @description Flt icon component
|
|
59
61
|
*/
|
|
60
62
|
export default class Icon extends LightningDomElement {
|
|
61
|
-
@api icon
|
|
63
|
+
@api icon
|
|
62
64
|
|
|
63
|
-
connectedCallback
|
|
65
|
+
connectedCallback() {
|
|
64
66
|
if (!ICONS[this.icon]) {
|
|
65
|
-
console.error(`FltError: Icon '${this.icon}' is not available!`)
|
|
67
|
+
console.error(`FltError: Icon '${this.icon}' is not available!`)
|
|
66
68
|
}
|
|
67
69
|
}
|
|
68
70
|
|
|
69
|
-
render
|
|
70
|
-
return ICONS[this.icon] || TMPL_EMPTY
|
|
71
|
+
render() {
|
|
72
|
+
return ICONS[this.icon] || TMPL_EMPTY
|
|
71
73
|
}
|
|
72
74
|
}
|
|
73
75
|
|
|
74
76
|
const ICONS = {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
+
search: TMPL_SEARCH,
|
|
78
|
+
plus: TMPL_PLUS,
|
|
77
79
|
'plus-small': TMPL_SMALL_PLUS,
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
80
|
+
document: TMPL_DOCUMENT,
|
|
81
|
+
close: TMPL_CLOSE,
|
|
82
|
+
ev: TMPL_EV,
|
|
83
|
+
carwash: TMPL_CARWASH,
|
|
84
|
+
car: TMPL_CAR,
|
|
85
|
+
van: TMPL_VAN,
|
|
86
|
+
unleaded: TMPL_UNLIDEAD,
|
|
87
|
+
diesel: TMPL_DIESEL,
|
|
88
|
+
hydrogen: TMPL_HYDROGEN,
|
|
89
|
+
signature: TMPL_SIGNATURE,
|
|
90
|
+
fuel: TMPL_FUEL,
|
|
91
|
+
driver: TMPL_DRIVER,
|
|
92
|
+
vehicle: TMPL_VEHICLE,
|
|
93
|
+
both: TMPL_BOTH,
|
|
92
94
|
'shared-card': TMPL_SHARED_CARD,
|
|
93
95
|
'ev-and-fuel': TMPL_EV_AND_FUEL,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
96
|
+
oil: TMPL_OIL,
|
|
97
|
+
key: TMPL_KEY,
|
|
98
|
+
blocked: TMPL_BLOCKED,
|
|
97
99
|
'arrow-left': TMPL_ARROW_LEFT,
|
|
98
100
|
'multiple-users': TMPL_MULTIPLE_USERS,
|
|
99
101
|
'arrow-right': TMPL_ARROW_RIGHT,
|
|
100
|
-
|
|
101
|
-
|
|
102
|
+
hgv: TMPL_HGV,
|
|
103
|
+
world: TMPL_WORLD,
|
|
102
104
|
'map-pin': TMPL_MAP_PIN,
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
eye: TMPL_EYE,
|
|
106
|
+
sign: TMPL_SIGN,
|
|
107
|
+
check: TMPL_CHECK,
|
|
108
|
+
discount: TMPL_DISCOUNT,
|
|
107
109
|
'pin-drop': TMPL_PIN_DROP,
|
|
108
110
|
'credit-card': TMPL_CREDIT_CARD,
|
|
109
|
-
|
|
111
|
+
receipt: TMPL_RECEIPT,
|
|
110
112
|
'gear-wheel': TMPL_GEAR_WHEEL,
|
|
111
113
|
'app-shortcut': TMPL_APP_SHORTCUT,
|
|
112
114
|
'drug-indicator': TMPL_DRAG_INDICATOR,
|
|
113
|
-
|
|
115
|
+
sell: TMPL_SELL,
|
|
114
116
|
'parking-sign': TMPL_PARKING_SIGN,
|
|
115
117
|
'headset-mic': TMPL_HEADSET_MIC,
|
|
116
118
|
'gas-station': TMPL_GAS_STATION,
|
|
117
119
|
'directions-car': TMPL_DIRECTION_CAR,
|
|
118
120
|
'local-shipping': TMPL_LOCAL_SHIPPING,
|
|
119
|
-
|
|
120
|
-
|
|
121
|
+
public: TMPL_PUBLIC,
|
|
122
|
+
place: TMPL_PLACE,
|
|
123
|
+
warning: TMPL_WARNING,
|
|
124
|
+
info: TMPL_INFO
|
|
121
125
|
}
|
|
122
126
|
|
|
123
|
-
export const ICONS_LIST = Object.keys(ICONS)
|
|
127
|
+
export const ICONS_LIST = Object.keys(ICONS)
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<template lwc:render-mode="light">
|
|
2
|
+
<svg class="flt-icon flt-icon__info" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3
|
+
<path
|
|
4
|
+
d="M9.375 9.375L9.40957 9.35771C9.88717 9.11891 10.4249 9.55029 10.2954 10.0683L9.70458 12.4317C9.57507 12.9497 10.1128 13.3811 10.5904 13.1423L10.625 13.125M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.875H10.0063V6.88125H10V6.875Z"
|
|
5
|
+
class="flt-icon__prop-stroke"
|
|
6
|
+
stroke-width="1.5"
|
|
7
|
+
stroke-linecap="round"
|
|
8
|
+
stroke-linejoin="round"></path>
|
|
9
|
+
</svg>
|
|
10
|
+
</template>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<template lwc:render-mode="light">
|
|
2
|
+
<svg class="flt-icon flt-icon__warning" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3
|
+
<path
|
|
4
|
+
d="M8.99023 3.99609C9.43932 3.2204 10.5597 3.2204 11.0088 3.99609L17.2832 14.8379C17.7319 15.6133 17.172 16.5869 16.2744 16.5869H3.72461C2.82704 16.5869 2.26703 15.6133 2.71582 14.8379L8.99023 3.99609ZM9.56641 4.32812L3.29199 15.1699L2.85742 15.9199H17.1416L16.707 15.1699L10.4326 4.32812L9.99902 3.58008L9.56641 4.32812ZM10.333 13.4199V14.0869H9.66602V13.4199H10.333ZM9.99902 8.41992C10.1812 8.41992 10.333 8.57172 10.333 8.75391V10.4199C10.333 10.6021 10.1812 10.7539 9.99902 10.7539C9.81702 10.7537 9.66602 10.602 9.66602 10.4199V8.75391C9.66602 8.57186 9.81702 8.42016 9.99902 8.41992Z"
|
|
5
|
+
class="flt-icon__prop-stroke" ></path>
|
|
6
|
+
</svg>
|
|
7
|
+
</template>
|
|
@@ -27,7 +27,7 @@ export default class Animation {
|
|
|
27
27
|
}
|
|
28
28
|
})
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
|
|
31
31
|
static fadeOut = ({
|
|
32
32
|
el,
|
|
33
33
|
duration = 300,
|
|
@@ -55,6 +55,109 @@ export default class Animation {
|
|
|
55
55
|
})
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
static collapseIn = ({
|
|
59
|
+
el,
|
|
60
|
+
duration = 300,
|
|
61
|
+
beforeAction,
|
|
62
|
+
afterAction,
|
|
63
|
+
timing = (timeFraction) => 1 - timeFraction * timeFraction
|
|
64
|
+
}) => {
|
|
65
|
+
if (!el.offsetHeight || el.getAttribute('flt-collapsing') === 'true') {
|
|
66
|
+
return
|
|
67
|
+
}
|
|
68
|
+
el.setAttribute('flt-collapsing', 'true')
|
|
69
|
+
const HEIGHT = el.offsetHeight
|
|
70
|
+
el.style.overflow = 'hidden'
|
|
71
|
+
|
|
72
|
+
if (typeof beforeAction === 'function') {
|
|
73
|
+
beforeAction()
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
Animation.animate({
|
|
77
|
+
duration: duration,
|
|
78
|
+
timing: timing,
|
|
79
|
+
draw: (progress) => {
|
|
80
|
+
if (progress < 0) progress = 0
|
|
81
|
+
el.style.height = progress * HEIGHT + 'px'
|
|
82
|
+
},
|
|
83
|
+
complete: () => {
|
|
84
|
+
el.removeAttribute('flt-collapsing')
|
|
85
|
+
if (typeof afterAction === 'function') {
|
|
86
|
+
afterAction()
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
static collapseOut = ({
|
|
93
|
+
el,
|
|
94
|
+
duration = 300,
|
|
95
|
+
beforeAction,
|
|
96
|
+
afterAction,
|
|
97
|
+
timing = (timeFraction) => timeFraction * timeFraction
|
|
98
|
+
}) => {
|
|
99
|
+
if (el.offsetHeight || el.getAttribute('flt-collapsing') === 'true') {
|
|
100
|
+
return
|
|
101
|
+
}
|
|
102
|
+
el.setAttribute('flt-collapsing', 'true')
|
|
103
|
+
|
|
104
|
+
el.style.height = null
|
|
105
|
+
el.style.overflow = null
|
|
106
|
+
|
|
107
|
+
requestAnimationFrame(() => {
|
|
108
|
+
const HEIGHT = el.offsetHeight
|
|
109
|
+
el.style.height = 0
|
|
110
|
+
el.style.overflow = 'hidden'
|
|
111
|
+
if (typeof beforeAction === 'function') {
|
|
112
|
+
beforeAction()
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
Animation.animate({
|
|
116
|
+
duration: duration,
|
|
117
|
+
timing: timing,
|
|
118
|
+
draw: (progress) => {
|
|
119
|
+
if (progress > 1) progress = 1
|
|
120
|
+
el.style.height = progress * HEIGHT + 'px'
|
|
121
|
+
},
|
|
122
|
+
complete: () => {
|
|
123
|
+
el.style.overflow = null
|
|
124
|
+
el.style.height = null
|
|
125
|
+
el.removeAttribute('flt-collapsing')
|
|
126
|
+
if (typeof afterAction === 'function') {
|
|
127
|
+
afterAction()
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
})
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
static toggleCollapse = ({
|
|
135
|
+
el,
|
|
136
|
+
duration = 300,
|
|
137
|
+
beforeAction,
|
|
138
|
+
afterAction,
|
|
139
|
+
timingIn = (timeFraction) => 1 - timeFraction * timeFraction,
|
|
140
|
+
timingOut = (timeFraction) => timeFraction * timeFraction
|
|
141
|
+
}) => {
|
|
142
|
+
if (el.offsetHeight) {
|
|
143
|
+
Animation.collapseIn({
|
|
144
|
+
el,
|
|
145
|
+
duration,
|
|
146
|
+
beforeAction,
|
|
147
|
+
afterAction,
|
|
148
|
+
timing: timingIn
|
|
149
|
+
})
|
|
150
|
+
} else {
|
|
151
|
+
Animation.collapseOut({
|
|
152
|
+
el,
|
|
153
|
+
duration,
|
|
154
|
+
beforeAction,
|
|
155
|
+
afterAction,
|
|
156
|
+
timing: timingOut
|
|
157
|
+
})
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
58
161
|
static animate({ timing, duration, draw = () => {}, complete = () => {} }) {
|
|
59
162
|
let start = performance.now()
|
|
60
163
|
|
|
@@ -22,12 +22,13 @@ export default class InputElement extends UserDataValidator {
|
|
|
22
22
|
|
|
23
23
|
@api isValid() {
|
|
24
24
|
let result = true
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
|
|
26
|
+
if (this.required && !this.value) {
|
|
27
|
+
result = false
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
if (result && this.regExp && this.value && !new RegExp(this.regExp).test(this.value)) {
|
|
31
|
+
result = false
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
if (
|