@empathyco/x-components 5.0.0-alpha.82 → 5.0.0-alpha.83
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/CHANGELOG.md +9 -0
- package/design-system/deprecated-full-theme.css +414 -413
- package/docs/API-reference/api/x-components.snippetconfigextraparams.md +1 -1
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue2.js +1 -1
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue2.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +11 -2
- package/report/x-components.api.md +1 -1
- package/types/x-modules/extra-params/components/snippet-config-extra-params.vue.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.0.0-alpha.83](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.82...@empathyco/x-components@5.0.0-alpha.83) (2024-10-03)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* snippet config extra params reactivity (#1628) ([c87788a](https://github.com/empathyco/x/commit/c87788a6f194e6b8f59b520f05e9ed617c98bae6))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [5.0.0-alpha.82](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.81...@empathyco/x-components@5.0.0-alpha.82) (2024-09-30)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -14,25 +14,6 @@
|
|
|
14
14
|
.x-normal-case {
|
|
15
15
|
text-transform: none;
|
|
16
16
|
}
|
|
17
|
-
.x-underline {
|
|
18
|
-
-webkit-text-decoration-line: underline;
|
|
19
|
-
text-decoration-line: underline;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.x-overline {
|
|
23
|
-
-webkit-text-decoration-line: overline;
|
|
24
|
-
text-decoration-line: overline;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.x-line-through {
|
|
28
|
-
-webkit-text-decoration-line: line-through;
|
|
29
|
-
text-decoration-line: line-through;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.x-no-underline {
|
|
33
|
-
-webkit-text-decoration-line: none;
|
|
34
|
-
text-decoration-line: none;
|
|
35
|
-
}
|
|
36
17
|
.x-static {
|
|
37
18
|
position: static !important;
|
|
38
19
|
}
|
|
@@ -52,6 +33,7 @@
|
|
|
52
33
|
.x-sticky {
|
|
53
34
|
position: sticky !important;
|
|
54
35
|
}
|
|
36
|
+
|
|
55
37
|
.x-padding--00 {
|
|
56
38
|
padding: 0 !important;
|
|
57
39
|
}
|
|
@@ -955,6 +937,25 @@
|
|
|
955
937
|
[dir="rtl"] .x-margin--left-20 {
|
|
956
938
|
margin-right: var(--x-size-base-20) !important;
|
|
957
939
|
}
|
|
940
|
+
.x-underline {
|
|
941
|
+
-webkit-text-decoration-line: underline;
|
|
942
|
+
text-decoration-line: underline;
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
.x-overline {
|
|
946
|
+
-webkit-text-decoration-line: overline;
|
|
947
|
+
text-decoration-line: overline;
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
.x-line-through {
|
|
951
|
+
-webkit-text-decoration-line: line-through;
|
|
952
|
+
text-decoration-line: line-through;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
.x-no-underline {
|
|
956
|
+
-webkit-text-decoration-line: none;
|
|
957
|
+
text-decoration-line: none;
|
|
958
|
+
}
|
|
958
959
|
.x-line-height--none {
|
|
959
960
|
line-height: 1 !important;
|
|
960
961
|
}
|
|
@@ -1777,6 +1778,92 @@
|
|
|
1777
1778
|
.x-border-width--left-10 {
|
|
1778
1779
|
border-style: solid !important;
|
|
1779
1780
|
}
|
|
1781
|
+
.x-border-color--lead {
|
|
1782
|
+
border-color: var(--x-color-base-lead) !important;
|
|
1783
|
+
}
|
|
1784
|
+
|
|
1785
|
+
.x-border-color--auxiliary {
|
|
1786
|
+
border-color: var(--x-color-base-auxiliary) !important;
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1789
|
+
.x-border-color--neutral-10 {
|
|
1790
|
+
border-color: var(--x-color-base-neutral-10) !important;
|
|
1791
|
+
}
|
|
1792
|
+
|
|
1793
|
+
.x-border-color--neutral-35 {
|
|
1794
|
+
border-color: var(--x-color-base-neutral-35) !important;
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
.x-border-color--neutral-70 {
|
|
1798
|
+
border-color: var(--x-color-base-neutral-70) !important;
|
|
1799
|
+
}
|
|
1800
|
+
|
|
1801
|
+
.x-border-color--neutral-95 {
|
|
1802
|
+
border-color: var(--x-color-base-neutral-95) !important;
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
.x-border-color--neutral-100 {
|
|
1806
|
+
border-color: var(--x-color-base-neutral-100) !important;
|
|
1807
|
+
}
|
|
1808
|
+
|
|
1809
|
+
.x-border-color--accent {
|
|
1810
|
+
border-color: var(--x-color-base-accent) !important;
|
|
1811
|
+
}
|
|
1812
|
+
|
|
1813
|
+
.x-border-color--enable {
|
|
1814
|
+
border-color: var(--x-color-base-enable) !important;
|
|
1815
|
+
}
|
|
1816
|
+
|
|
1817
|
+
.x-border-color--disable {
|
|
1818
|
+
border-color: var(--x-color-base-disable) !important;
|
|
1819
|
+
}
|
|
1820
|
+
|
|
1821
|
+
.x-border-color--transparent {
|
|
1822
|
+
border-color: var(--x-color-base-transparent) !important;
|
|
1823
|
+
}
|
|
1824
|
+
.x-background--lead {
|
|
1825
|
+
background-color: var(--x-color-base-lead) !important;
|
|
1826
|
+
}
|
|
1827
|
+
|
|
1828
|
+
.x-background--auxiliary {
|
|
1829
|
+
background-color: var(--x-color-base-auxiliary) !important;
|
|
1830
|
+
}
|
|
1831
|
+
|
|
1832
|
+
.x-background--neutral-10 {
|
|
1833
|
+
background-color: var(--x-color-base-neutral-10) !important;
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1836
|
+
.x-background--neutral-35 {
|
|
1837
|
+
background-color: var(--x-color-base-neutral-35) !important;
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
.x-background--neutral-70 {
|
|
1841
|
+
background-color: var(--x-color-base-neutral-70) !important;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
.x-background--neutral-95 {
|
|
1845
|
+
background-color: var(--x-color-base-neutral-95) !important;
|
|
1846
|
+
}
|
|
1847
|
+
|
|
1848
|
+
.x-background--neutral-100 {
|
|
1849
|
+
background-color: var(--x-color-base-neutral-100) !important;
|
|
1850
|
+
}
|
|
1851
|
+
|
|
1852
|
+
.x-background--accent {
|
|
1853
|
+
background-color: var(--x-color-base-accent) !important;
|
|
1854
|
+
}
|
|
1855
|
+
|
|
1856
|
+
.x-background--enable {
|
|
1857
|
+
background-color: var(--x-color-base-enable) !important;
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
.x-background--disable {
|
|
1861
|
+
background-color: var(--x-color-base-disable) !important;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.x-background--transparent {
|
|
1865
|
+
background-color: var(--x-color-base-transparent) !important;
|
|
1866
|
+
}
|
|
1780
1867
|
.x-border-radius--00 {
|
|
1781
1868
|
border-radius: 0 !important;
|
|
1782
1869
|
}
|
|
@@ -3285,92 +3372,6 @@
|
|
|
3285
3372
|
[dir="rtl"] .x-border-radius--bottom-right-20 {
|
|
3286
3373
|
border-bottom-left-radius: var(--x-size-base-20) !important;
|
|
3287
3374
|
}
|
|
3288
|
-
.x-border-color--lead {
|
|
3289
|
-
border-color: var(--x-color-base-lead) !important;
|
|
3290
|
-
}
|
|
3291
|
-
|
|
3292
|
-
.x-border-color--auxiliary {
|
|
3293
|
-
border-color: var(--x-color-base-auxiliary) !important;
|
|
3294
|
-
}
|
|
3295
|
-
|
|
3296
|
-
.x-border-color--neutral-10 {
|
|
3297
|
-
border-color: var(--x-color-base-neutral-10) !important;
|
|
3298
|
-
}
|
|
3299
|
-
|
|
3300
|
-
.x-border-color--neutral-35 {
|
|
3301
|
-
border-color: var(--x-color-base-neutral-35) !important;
|
|
3302
|
-
}
|
|
3303
|
-
|
|
3304
|
-
.x-border-color--neutral-70 {
|
|
3305
|
-
border-color: var(--x-color-base-neutral-70) !important;
|
|
3306
|
-
}
|
|
3307
|
-
|
|
3308
|
-
.x-border-color--neutral-95 {
|
|
3309
|
-
border-color: var(--x-color-base-neutral-95) !important;
|
|
3310
|
-
}
|
|
3311
|
-
|
|
3312
|
-
.x-border-color--neutral-100 {
|
|
3313
|
-
border-color: var(--x-color-base-neutral-100) !important;
|
|
3314
|
-
}
|
|
3315
|
-
|
|
3316
|
-
.x-border-color--accent {
|
|
3317
|
-
border-color: var(--x-color-base-accent) !important;
|
|
3318
|
-
}
|
|
3319
|
-
|
|
3320
|
-
.x-border-color--enable {
|
|
3321
|
-
border-color: var(--x-color-base-enable) !important;
|
|
3322
|
-
}
|
|
3323
|
-
|
|
3324
|
-
.x-border-color--disable {
|
|
3325
|
-
border-color: var(--x-color-base-disable) !important;
|
|
3326
|
-
}
|
|
3327
|
-
|
|
3328
|
-
.x-border-color--transparent {
|
|
3329
|
-
border-color: var(--x-color-base-transparent) !important;
|
|
3330
|
-
}
|
|
3331
|
-
.x-background--lead {
|
|
3332
|
-
background-color: var(--x-color-base-lead) !important;
|
|
3333
|
-
}
|
|
3334
|
-
|
|
3335
|
-
.x-background--auxiliary {
|
|
3336
|
-
background-color: var(--x-color-base-auxiliary) !important;
|
|
3337
|
-
}
|
|
3338
|
-
|
|
3339
|
-
.x-background--neutral-10 {
|
|
3340
|
-
background-color: var(--x-color-base-neutral-10) !important;
|
|
3341
|
-
}
|
|
3342
|
-
|
|
3343
|
-
.x-background--neutral-35 {
|
|
3344
|
-
background-color: var(--x-color-base-neutral-35) !important;
|
|
3345
|
-
}
|
|
3346
|
-
|
|
3347
|
-
.x-background--neutral-70 {
|
|
3348
|
-
background-color: var(--x-color-base-neutral-70) !important;
|
|
3349
|
-
}
|
|
3350
|
-
|
|
3351
|
-
.x-background--neutral-95 {
|
|
3352
|
-
background-color: var(--x-color-base-neutral-95) !important;
|
|
3353
|
-
}
|
|
3354
|
-
|
|
3355
|
-
.x-background--neutral-100 {
|
|
3356
|
-
background-color: var(--x-color-base-neutral-100) !important;
|
|
3357
|
-
}
|
|
3358
|
-
|
|
3359
|
-
.x-background--accent {
|
|
3360
|
-
background-color: var(--x-color-base-accent) !important;
|
|
3361
|
-
}
|
|
3362
|
-
|
|
3363
|
-
.x-background--enable {
|
|
3364
|
-
background-color: var(--x-color-base-enable) !important;
|
|
3365
|
-
}
|
|
3366
|
-
|
|
3367
|
-
.x-background--disable {
|
|
3368
|
-
background-color: var(--x-color-base-disable) !important;
|
|
3369
|
-
}
|
|
3370
|
-
|
|
3371
|
-
.x-background--transparent {
|
|
3372
|
-
background-color: var(--x-color-base-transparent) !important;
|
|
3373
|
-
}
|
|
3374
3375
|
.x-text--stroke.x-text {
|
|
3375
3376
|
--x-string-text-decoration: line-through;
|
|
3376
3377
|
}
|
|
@@ -3447,6 +3448,21 @@
|
|
|
3447
3448
|
--x-size-line-height-small: var(--x-size-line-height-base-s);
|
|
3448
3449
|
--x-string-text-decoration-small: none;
|
|
3449
3450
|
}
|
|
3451
|
+
.x-text--bold.x-text {
|
|
3452
|
+
--x-number-font-weight-text: var(--x-number-font-weight-base-bold);
|
|
3453
|
+
}
|
|
3454
|
+
.x-text--bold.x-title1 {
|
|
3455
|
+
--x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
|
|
3456
|
+
}
|
|
3457
|
+
.x-text--bold.x-title2 {
|
|
3458
|
+
--x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
|
|
3459
|
+
}
|
|
3460
|
+
.x-text--bold.x-title3 {
|
|
3461
|
+
--x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
|
|
3462
|
+
}
|
|
3463
|
+
.x-text--bold.x-small {
|
|
3464
|
+
--x-number-font-weight-small: var(--x-number-font-weight-base-bold);
|
|
3465
|
+
}
|
|
3450
3466
|
:root {
|
|
3451
3467
|
--x-font-family-base: "Montserrat", sans-serif;
|
|
3452
3468
|
--x-size-font-base-xs: 12px;
|
|
@@ -3549,27 +3565,12 @@
|
|
|
3549
3565
|
overflow: hidden;
|
|
3550
3566
|
white-space: nowrap;
|
|
3551
3567
|
}
|
|
3552
|
-
|
|
3553
|
-
--x-
|
|
3554
|
-
}
|
|
3555
|
-
.x-text--bold.x-title1 {
|
|
3556
|
-
--x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
|
|
3557
|
-
}
|
|
3558
|
-
.x-text--bold.x-title2 {
|
|
3559
|
-
--x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
|
|
3560
|
-
}
|
|
3561
|
-
.x-text--bold.x-title3 {
|
|
3562
|
-
--x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
|
|
3563
|
-
}
|
|
3564
|
-
.x-text--bold.x-small {
|
|
3565
|
-
--x-number-font-weight-small: var(--x-number-font-weight-base-bold);
|
|
3568
|
+
:root {
|
|
3569
|
+
--x-color-text-accent: var(--x-color-base-accent);
|
|
3566
3570
|
}
|
|
3567
3571
|
.x-text--accent {
|
|
3568
3572
|
--x-color-text-default: var(--x-color-text-accent);
|
|
3569
3573
|
}
|
|
3570
|
-
:root {
|
|
3571
|
-
--x-color-text-accent: var(--x-color-base-accent);
|
|
3572
|
-
}
|
|
3573
3574
|
:root {
|
|
3574
3575
|
--x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
|
|
3575
3576
|
--x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
|
|
@@ -3607,36 +3608,6 @@
|
|
|
3607
3608
|
--x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3608
3609
|
--x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3609
3610
|
}
|
|
3610
|
-
:root {
|
|
3611
|
-
--x-color-background-tag-ghost: transparent;
|
|
3612
|
-
--x-color-border-tag-ghost: transparent;
|
|
3613
|
-
--x-color-background-tag-selected-ghost: transparent;
|
|
3614
|
-
--x-color-border-tag-selected-ghost: transparent;
|
|
3615
|
-
--x-color-background-tag-curated-ghost: transparent;
|
|
3616
|
-
--x-color-border-tag-curated-ghost: transparent;
|
|
3617
|
-
--x-color-background-tag-curated-selected-ghost: transparent;
|
|
3618
|
-
--x-color-border-tag-curated-selected-ghost: transparent;
|
|
3619
|
-
--x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3620
|
-
--x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3621
|
-
}
|
|
3622
|
-
|
|
3623
|
-
.x-tag--ghost.x-tag,
|
|
3624
|
-
.x-tag--ghost .x-tag {
|
|
3625
|
-
--x-color-background-tag-default: var(--x-color-background-tag-ghost);
|
|
3626
|
-
--x-color-border-tag-default: var(--x-color-border-tag-ghost);
|
|
3627
|
-
--x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
|
|
3628
|
-
--x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
|
|
3629
|
-
--x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
|
|
3630
|
-
--x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
|
|
3631
|
-
--x-color-background-tag-default-curated-selected: var(
|
|
3632
|
-
--x-color-background-tag-curated-selected-ghost
|
|
3633
|
-
);
|
|
3634
|
-
--x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
|
|
3635
|
-
--x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
|
|
3636
|
-
--x-number-font-weight-tag-default-curated-selected: var(
|
|
3637
|
-
--x-number-font-weight-tag-curated-selected-ghost
|
|
3638
|
-
);
|
|
3639
|
-
}
|
|
3640
3611
|
:root {
|
|
3641
3612
|
--x-color-background-tag-default: var(--x-color-base-neutral-100);
|
|
3642
3613
|
--x-color-border-tag-default: var(--x-color-text-tag-default);
|
|
@@ -3970,6 +3941,36 @@
|
|
|
3970
3941
|
--x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
|
|
3971
3942
|
--x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
|
|
3972
3943
|
}
|
|
3944
|
+
:root {
|
|
3945
|
+
--x-color-background-tag-ghost: transparent;
|
|
3946
|
+
--x-color-border-tag-ghost: transparent;
|
|
3947
|
+
--x-color-background-tag-selected-ghost: transparent;
|
|
3948
|
+
--x-color-border-tag-selected-ghost: transparent;
|
|
3949
|
+
--x-color-background-tag-curated-ghost: transparent;
|
|
3950
|
+
--x-color-border-tag-curated-ghost: transparent;
|
|
3951
|
+
--x-color-background-tag-curated-selected-ghost: transparent;
|
|
3952
|
+
--x-color-border-tag-curated-selected-ghost: transparent;
|
|
3953
|
+
--x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3954
|
+
--x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
|
|
3955
|
+
}
|
|
3956
|
+
|
|
3957
|
+
.x-tag--ghost.x-tag,
|
|
3958
|
+
.x-tag--ghost .x-tag {
|
|
3959
|
+
--x-color-background-tag-default: var(--x-color-background-tag-ghost);
|
|
3960
|
+
--x-color-border-tag-default: var(--x-color-border-tag-ghost);
|
|
3961
|
+
--x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
|
|
3962
|
+
--x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
|
|
3963
|
+
--x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
|
|
3964
|
+
--x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
|
|
3965
|
+
--x-color-background-tag-default-curated-selected: var(
|
|
3966
|
+
--x-color-background-tag-curated-selected-ghost
|
|
3967
|
+
);
|
|
3968
|
+
--x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
|
|
3969
|
+
--x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
|
|
3970
|
+
--x-number-font-weight-tag-default-curated-selected: var(
|
|
3971
|
+
--x-number-font-weight-tag-curated-selected-ghost
|
|
3972
|
+
);
|
|
3973
|
+
}
|
|
3973
3974
|
:root {
|
|
3974
3975
|
--x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
|
|
3975
3976
|
--x-color-text-suggestion-group-matching-part-default: var(
|
|
@@ -4469,6 +4470,43 @@
|
|
|
4469
4470
|
--x-color-background-scroll-bar-hover: transparent;
|
|
4470
4471
|
--x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
|
|
4471
4472
|
}
|
|
4473
|
+
/* @deprecated */
|
|
4474
|
+
:root {
|
|
4475
|
+
--x-size-padding-row-02: var(--x-size-base-02);
|
|
4476
|
+
--x-size-padding-row-03: var(--x-size-base-03);
|
|
4477
|
+
--x-size-padding-row-04: var(--x-size-base-04);
|
|
4478
|
+
--x-size-padding-row-05: var(--x-size-base-05);
|
|
4479
|
+
--x-size-padding-row-06: var(--x-size-base-06);
|
|
4480
|
+
}
|
|
4481
|
+
/* @deprecated */
|
|
4482
|
+
:root {
|
|
4483
|
+
--x-size-padding-row-02: var(--x-size-base-02);
|
|
4484
|
+
--x-size-padding-row-03: var(--x-size-base-03);
|
|
4485
|
+
--x-size-padding-row-04: var(--x-size-base-04);
|
|
4486
|
+
--x-size-padding-row-05: var(--x-size-base-05);
|
|
4487
|
+
--x-size-padding-row-06: var(--x-size-base-06);
|
|
4488
|
+
}
|
|
4489
|
+
|
|
4490
|
+
/* @deprecated */
|
|
4491
|
+
.x-row--padding-02 {
|
|
4492
|
+
--x-size-padding-row: var(--x-size-padding-row-02);
|
|
4493
|
+
}
|
|
4494
|
+
|
|
4495
|
+
.x-row--padding-03 {
|
|
4496
|
+
--x-size-padding-row: var(--x-size-padding-row-03);
|
|
4497
|
+
}
|
|
4498
|
+
|
|
4499
|
+
.x-row--padding-04 {
|
|
4500
|
+
--x-size-padding-row: var(--x-size-padding-row-04);
|
|
4501
|
+
}
|
|
4502
|
+
|
|
4503
|
+
.x-row--padding-05 {
|
|
4504
|
+
--x-size-padding-row: var(--x-size-padding-row-05);
|
|
4505
|
+
}
|
|
4506
|
+
|
|
4507
|
+
.x-row--padding-06 {
|
|
4508
|
+
--x-size-padding-row: var(--x-size-padding-row-06);
|
|
4509
|
+
}
|
|
4472
4510
|
:root {
|
|
4473
4511
|
--x-string-overflow-scroll: auto;
|
|
4474
4512
|
--x-color-background-scroll-bar: transparent;
|
|
@@ -4507,43 +4545,6 @@
|
|
|
4507
4545
|
.x-base-scroll {
|
|
4508
4546
|
overflow-y: var(--x-string-overflow-scroll, auto);
|
|
4509
4547
|
}
|
|
4510
|
-
/* @deprecated */
|
|
4511
|
-
:root {
|
|
4512
|
-
--x-size-padding-row-02: var(--x-size-base-02);
|
|
4513
|
-
--x-size-padding-row-03: var(--x-size-base-03);
|
|
4514
|
-
--x-size-padding-row-04: var(--x-size-base-04);
|
|
4515
|
-
--x-size-padding-row-05: var(--x-size-base-05);
|
|
4516
|
-
--x-size-padding-row-06: var(--x-size-base-06);
|
|
4517
|
-
}
|
|
4518
|
-
/* @deprecated */
|
|
4519
|
-
:root {
|
|
4520
|
-
--x-size-padding-row-02: var(--x-size-base-02);
|
|
4521
|
-
--x-size-padding-row-03: var(--x-size-base-03);
|
|
4522
|
-
--x-size-padding-row-04: var(--x-size-base-04);
|
|
4523
|
-
--x-size-padding-row-05: var(--x-size-base-05);
|
|
4524
|
-
--x-size-padding-row-06: var(--x-size-base-06);
|
|
4525
|
-
}
|
|
4526
|
-
|
|
4527
|
-
/* @deprecated */
|
|
4528
|
-
.x-row--padding-02 {
|
|
4529
|
-
--x-size-padding-row: var(--x-size-padding-row-02);
|
|
4530
|
-
}
|
|
4531
|
-
|
|
4532
|
-
.x-row--padding-03 {
|
|
4533
|
-
--x-size-padding-row: var(--x-size-padding-row-03);
|
|
4534
|
-
}
|
|
4535
|
-
|
|
4536
|
-
.x-row--padding-04 {
|
|
4537
|
-
--x-size-padding-row: var(--x-size-padding-row-04);
|
|
4538
|
-
}
|
|
4539
|
-
|
|
4540
|
-
.x-row--padding-05 {
|
|
4541
|
-
--x-size-padding-row: var(--x-size-padding-row-05);
|
|
4542
|
-
}
|
|
4543
|
-
|
|
4544
|
-
.x-row--padding-06 {
|
|
4545
|
-
--x-size-padding-row: var(--x-size-padding-row-06);
|
|
4546
|
-
}
|
|
4547
4548
|
:root {
|
|
4548
4549
|
--x-size-gap-row-01: var(--x-size-base-01);
|
|
4549
4550
|
--x-size-gap-row-02: var(--x-size-base-02);
|
|
@@ -4676,6 +4677,96 @@
|
|
|
4676
4677
|
--x-size-span-row-item: 1;
|
|
4677
4678
|
--x-size-start-row-item: 0;
|
|
4678
4679
|
}
|
|
4680
|
+
:root {
|
|
4681
|
+
--x-color-border-result-default: var(--x-color-base-lead);
|
|
4682
|
+
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
4683
|
+
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
4684
|
+
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
4685
|
+
--x-color-background-result-default: transparent;
|
|
4686
|
+
--x-size-padding-result-default: 0;
|
|
4687
|
+
--x-size-padding-result-overlay-default: 0;
|
|
4688
|
+
--x-size-padding-result-description-default: 0;
|
|
4689
|
+
--x-size-gap-result-default: var(--x-size-base-03);
|
|
4690
|
+
--x-size-padding-result-picture-default: 0;
|
|
4691
|
+
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
4692
|
+
--x-size-border-width-result-default: 0;
|
|
4693
|
+
--x-size-border-width-result-overlay-default: 0;
|
|
4694
|
+
--x-size-border-width-result-description-default: 0;
|
|
4695
|
+
--x-size-border-width-result-picture-default: 0;
|
|
4696
|
+
}
|
|
4697
|
+
:root {
|
|
4698
|
+
--x-color-border-result-default: var(--x-color-base-lead);
|
|
4699
|
+
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
4700
|
+
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
4701
|
+
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
4702
|
+
--x-color-background-result-default: transparent;
|
|
4703
|
+
--x-size-padding-result-default: 0;
|
|
4704
|
+
--x-size-padding-result-overlay-default: 0;
|
|
4705
|
+
--x-size-padding-result-description-default: 0;
|
|
4706
|
+
--x-size-gap-result-default: var(--x-size-base-03);
|
|
4707
|
+
--x-size-padding-result-picture-default: 0;
|
|
4708
|
+
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
4709
|
+
--x-size-border-width-result-default: 0;
|
|
4710
|
+
--x-size-border-width-result-overlay-default: 0;
|
|
4711
|
+
--x-size-border-width-result-description-default: 0;
|
|
4712
|
+
--x-size-border-width-result-picture-default: 0;
|
|
4713
|
+
}
|
|
4714
|
+
|
|
4715
|
+
.x-result {
|
|
4716
|
+
display: grid;
|
|
4717
|
+
grid-template-columns: [result-start] 1fr [result-end];
|
|
4718
|
+
grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
|
|
4719
|
+
box-sizing: border-box;
|
|
4720
|
+
background-color: var(--x-color-background-result-default);
|
|
4721
|
+
border-color: var(--x-color-border-result-default);
|
|
4722
|
+
padding: var(--x-size-padding-result-default);
|
|
4723
|
+
gap: var(--x-size-gap-result-default);
|
|
4724
|
+
border-style: solid;
|
|
4725
|
+
border-width: var(--x-size-border-width-result-default);
|
|
4726
|
+
border-radius: var(--x-size-border-radius-result-default);
|
|
4727
|
+
}
|
|
4728
|
+
.x-result > * {
|
|
4729
|
+
min-width: 0;
|
|
4730
|
+
}
|
|
4731
|
+
.x-result__picture {
|
|
4732
|
+
grid-column: result;
|
|
4733
|
+
grid-row: picture;
|
|
4734
|
+
}
|
|
4735
|
+
.x-result__overlay {
|
|
4736
|
+
grid-column: result;
|
|
4737
|
+
grid-row: overlay;
|
|
4738
|
+
z-index: 1;
|
|
4739
|
+
border-color: var(--x-color-border-result-overlay-default);
|
|
4740
|
+
padding: var(--x-size-padding-result-overlay-default);
|
|
4741
|
+
border-style: solid;
|
|
4742
|
+
border-width: var(--x-size-border-width-result-overlay-default);
|
|
4743
|
+
opacity: 0;
|
|
4744
|
+
}
|
|
4745
|
+
.x-result__description {
|
|
4746
|
+
grid-column: result;
|
|
4747
|
+
grid-row: description;
|
|
4748
|
+
border-color: var(--x-color-border-result-description-default);
|
|
4749
|
+
padding: var(--x-size-padding-result-description-default);
|
|
4750
|
+
border-style: solid;
|
|
4751
|
+
border-width: var(--x-size-border-width-result-description-default);
|
|
4752
|
+
}
|
|
4753
|
+
.x-result__picture {
|
|
4754
|
+
border-color: var(--x-color-border-result-picture-default);
|
|
4755
|
+
padding: var(--x-size-padding-result-picture-default);
|
|
4756
|
+
border-style: solid;
|
|
4757
|
+
border-width: var(--x-size-border-width-result-picture-default);
|
|
4758
|
+
}
|
|
4759
|
+
.x-result:hover .x-result__overlay {
|
|
4760
|
+
opacity: 1;
|
|
4761
|
+
}
|
|
4762
|
+
@media (hover: none) {
|
|
4763
|
+
.x-result .x-result__overlay {
|
|
4764
|
+
opacity: 1;
|
|
4765
|
+
}
|
|
4766
|
+
}
|
|
4767
|
+
:root {
|
|
4768
|
+
--x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
|
|
4769
|
+
}
|
|
4679
4770
|
:root {
|
|
4680
4771
|
--x-size-gap-row: 0;
|
|
4681
4772
|
--x-size-padding-row: 0;
|
|
@@ -4804,105 +4895,6 @@
|
|
|
4804
4895
|
.x-row--align-stretch {
|
|
4805
4896
|
--x-size-align-row: stretch;
|
|
4806
4897
|
}
|
|
4807
|
-
:root {
|
|
4808
|
-
--x-color-border-result-default: var(--x-color-base-lead);
|
|
4809
|
-
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
4810
|
-
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
4811
|
-
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
4812
|
-
--x-color-background-result-default: transparent;
|
|
4813
|
-
--x-size-padding-result-default: 0;
|
|
4814
|
-
--x-size-padding-result-overlay-default: 0;
|
|
4815
|
-
--x-size-padding-result-description-default: 0;
|
|
4816
|
-
--x-size-gap-result-default: var(--x-size-base-03);
|
|
4817
|
-
--x-size-padding-result-picture-default: 0;
|
|
4818
|
-
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
4819
|
-
--x-size-border-width-result-default: 0;
|
|
4820
|
-
--x-size-border-width-result-overlay-default: 0;
|
|
4821
|
-
--x-size-border-width-result-description-default: 0;
|
|
4822
|
-
--x-size-border-width-result-picture-default: 0;
|
|
4823
|
-
}
|
|
4824
|
-
:root {
|
|
4825
|
-
--x-color-border-result-default: var(--x-color-base-lead);
|
|
4826
|
-
--x-color-border-result-overlay-default: var(--x-color-border-result-default);
|
|
4827
|
-
--x-color-border-result-description-default: var(--x-color-border-result-default);
|
|
4828
|
-
--x-color-border-result-picture-default: var(--x-color-border-result-default);
|
|
4829
|
-
--x-color-background-result-default: transparent;
|
|
4830
|
-
--x-size-padding-result-default: 0;
|
|
4831
|
-
--x-size-padding-result-overlay-default: 0;
|
|
4832
|
-
--x-size-padding-result-description-default: 0;
|
|
4833
|
-
--x-size-gap-result-default: var(--x-size-base-03);
|
|
4834
|
-
--x-size-padding-result-picture-default: 0;
|
|
4835
|
-
--x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
|
|
4836
|
-
--x-size-border-width-result-default: 0;
|
|
4837
|
-
--x-size-border-width-result-overlay-default: 0;
|
|
4838
|
-
--x-size-border-width-result-description-default: 0;
|
|
4839
|
-
--x-size-border-width-result-picture-default: 0;
|
|
4840
|
-
}
|
|
4841
|
-
|
|
4842
|
-
.x-result {
|
|
4843
|
-
display: grid;
|
|
4844
|
-
grid-template-columns: [result-start] 1fr [result-end];
|
|
4845
|
-
grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
|
|
4846
|
-
box-sizing: border-box;
|
|
4847
|
-
background-color: var(--x-color-background-result-default);
|
|
4848
|
-
border-color: var(--x-color-border-result-default);
|
|
4849
|
-
padding: var(--x-size-padding-result-default);
|
|
4850
|
-
gap: var(--x-size-gap-result-default);
|
|
4851
|
-
border-style: solid;
|
|
4852
|
-
border-width: var(--x-size-border-width-result-default);
|
|
4853
|
-
border-radius: var(--x-size-border-radius-result-default);
|
|
4854
|
-
}
|
|
4855
|
-
.x-result > * {
|
|
4856
|
-
min-width: 0;
|
|
4857
|
-
}
|
|
4858
|
-
.x-result__picture {
|
|
4859
|
-
grid-column: result;
|
|
4860
|
-
grid-row: picture;
|
|
4861
|
-
}
|
|
4862
|
-
.x-result__overlay {
|
|
4863
|
-
grid-column: result;
|
|
4864
|
-
grid-row: overlay;
|
|
4865
|
-
z-index: 1;
|
|
4866
|
-
border-color: var(--x-color-border-result-overlay-default);
|
|
4867
|
-
padding: var(--x-size-padding-result-overlay-default);
|
|
4868
|
-
border-style: solid;
|
|
4869
|
-
border-width: var(--x-size-border-width-result-overlay-default);
|
|
4870
|
-
opacity: 0;
|
|
4871
|
-
}
|
|
4872
|
-
.x-result__description {
|
|
4873
|
-
grid-column: result;
|
|
4874
|
-
grid-row: description;
|
|
4875
|
-
border-color: var(--x-color-border-result-description-default);
|
|
4876
|
-
padding: var(--x-size-padding-result-description-default);
|
|
4877
|
-
border-style: solid;
|
|
4878
|
-
border-width: var(--x-size-border-width-result-description-default);
|
|
4879
|
-
}
|
|
4880
|
-
.x-result__picture {
|
|
4881
|
-
border-color: var(--x-color-border-result-picture-default);
|
|
4882
|
-
padding: var(--x-size-padding-result-picture-default);
|
|
4883
|
-
border-style: solid;
|
|
4884
|
-
border-width: var(--x-size-border-width-result-picture-default);
|
|
4885
|
-
}
|
|
4886
|
-
.x-result:hover .x-result__overlay {
|
|
4887
|
-
opacity: 1;
|
|
4888
|
-
}
|
|
4889
|
-
@media (hover: none) {
|
|
4890
|
-
.x-result .x-result__overlay {
|
|
4891
|
-
opacity: 1;
|
|
4892
|
-
}
|
|
4893
|
-
}
|
|
4894
|
-
:root {
|
|
4895
|
-
--x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
|
|
4896
|
-
}
|
|
4897
|
-
:root {
|
|
4898
|
-
--x-size-height-progress-bar-line-default: var(--x-size-base-02);
|
|
4899
|
-
--x-size-width-progress-bar-line-default: var(--x-size-base-20);
|
|
4900
|
-
--x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
|
|
4901
|
-
--x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
|
|
4902
|
-
--x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
|
|
4903
|
-
--x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
|
|
4904
|
-
--x-size-border-width-progress-bar-default: 0;
|
|
4905
|
-
}
|
|
4906
4898
|
:root {
|
|
4907
4899
|
--x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
|
|
4908
4900
|
}
|
|
@@ -4920,6 +4912,15 @@
|
|
|
4920
4912
|
--x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
|
|
4921
4913
|
--x-size-border-width-progress-bar-default: 0;
|
|
4922
4914
|
}
|
|
4915
|
+
:root {
|
|
4916
|
+
--x-size-height-progress-bar-line-default: var(--x-size-base-02);
|
|
4917
|
+
--x-size-width-progress-bar-line-default: var(--x-size-base-20);
|
|
4918
|
+
--x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
|
|
4919
|
+
--x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
|
|
4920
|
+
--x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
|
|
4921
|
+
--x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
|
|
4922
|
+
--x-size-border-width-progress-bar-default: 0;
|
|
4923
|
+
}
|
|
4923
4924
|
|
|
4924
4925
|
.x-progress-bar {
|
|
4925
4926
|
display: inline-block;
|
|
@@ -4954,9 +4955,6 @@
|
|
|
4954
4955
|
:root {
|
|
4955
4956
|
--x-number-aspect-ratio-picture: 1;
|
|
4956
4957
|
}
|
|
4957
|
-
:root {
|
|
4958
|
-
--x-number-aspect-ratio-picture: 1;
|
|
4959
|
-
}
|
|
4960
4958
|
|
|
4961
4959
|
.x-picture--fixed-ratio.x-picture {
|
|
4962
4960
|
aspect-ratio: var(--x-number-aspect-ratio-picture);
|
|
@@ -5036,6 +5034,9 @@
|
|
|
5036
5034
|
.x-picture-image--placeholder > path {
|
|
5037
5035
|
fill: var(--x-color-fill-picture-placeholder-path-default) !important;
|
|
5038
5036
|
}
|
|
5037
|
+
:root {
|
|
5038
|
+
--x-number-aspect-ratio-picture: 1;
|
|
5039
|
+
}
|
|
5039
5040
|
:root {
|
|
5040
5041
|
--x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
|
|
5041
5042
|
--x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
|
|
@@ -5424,6 +5425,51 @@
|
|
|
5424
5425
|
--x-number-font-weight-base-regular
|
|
5425
5426
|
);
|
|
5426
5427
|
}
|
|
5428
|
+
:root {
|
|
5429
|
+
--x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
|
|
5430
|
+
--x-color-text-option-list-button-bottom-selected-hover: var(
|
|
5431
|
+
--x-color-text-option-list-button-bottom-selected
|
|
5432
|
+
);
|
|
5433
|
+
--x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
|
|
5434
|
+
--x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
|
|
5435
|
+
--x-color-border-option-list-item-bottom: transparent;
|
|
5436
|
+
--x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
|
|
5437
|
+
--x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
|
|
5438
|
+
--x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
|
|
5439
|
+
--x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
|
|
5440
|
+
--x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
|
|
5441
|
+
--x-color-border-top-option-list-item-bottom-selected: var(
|
|
5442
|
+
--x-color-border-option-list-item-bottom
|
|
5443
|
+
);
|
|
5444
|
+
--x-color-border-right-option-list-item-bottom-selected: var(
|
|
5445
|
+
--x-color-border-option-list-item-bottom
|
|
5446
|
+
);
|
|
5447
|
+
--x-color-border-bottom-option-list-item-bottom-selected: var(
|
|
5448
|
+
--x-color-border-option-list-item-bottom-selected
|
|
5449
|
+
);
|
|
5450
|
+
--x-color-border-left-option-list-item-bottom-selected: var(
|
|
5451
|
+
--x-color-border-option-list-item-bottom
|
|
5452
|
+
);
|
|
5453
|
+
--x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
|
|
5454
|
+
--x-size-border-width-top-option-list-item-bottom: 0;
|
|
5455
|
+
--x-size-border-width-right-option-list-item-bottom: 0;
|
|
5456
|
+
--x-size-border-width-bottom-option-list-item-bottom: var(
|
|
5457
|
+
--x-size-border-width-option-list-item-bottom
|
|
5458
|
+
);
|
|
5459
|
+
--x-size-border-width-left-option-list-item-bottom: 0;
|
|
5460
|
+
--x-size-border-width-top-option-list-item-bottom-selected: 0;
|
|
5461
|
+
--x-size-border-width-right-option-list-item-bottom-selected: 0;
|
|
5462
|
+
--x-size-border-width-bottom-option-list-item-bottom-selected: var(
|
|
5463
|
+
--x-size-border-width-option-list-item-bottom
|
|
5464
|
+
);
|
|
5465
|
+
--x-size-border-width-left-option-list-item-bottom-selected: 0;
|
|
5466
|
+
--x-size-font-option-list-button-bottom: var(--x-size-font-text);
|
|
5467
|
+
--x-font-decoration-option-list-button-bottom-hover: none;
|
|
5468
|
+
--x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
|
|
5469
|
+
--x-number-font-weight-option-list-button-bottom-selected: var(
|
|
5470
|
+
--x-number-font-weight-base-regular
|
|
5471
|
+
);
|
|
5472
|
+
}
|
|
5427
5473
|
|
|
5428
5474
|
.x-option-list--bottom.x-option-list,
|
|
5429
5475
|
.x-option-list--bottom .x-option-list {
|
|
@@ -5510,51 +5556,6 @@
|
|
|
5510
5556
|
--x-size-border-width-bottom-option-list-item-default: inherit;
|
|
5511
5557
|
--x-size-border-width-left-option-list-item-default: inherit;
|
|
5512
5558
|
}
|
|
5513
|
-
:root {
|
|
5514
|
-
--x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
|
|
5515
|
-
--x-color-text-option-list-button-bottom-selected-hover: var(
|
|
5516
|
-
--x-color-text-option-list-button-bottom-selected
|
|
5517
|
-
);
|
|
5518
|
-
--x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
|
|
5519
|
-
--x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
|
|
5520
|
-
--x-color-border-option-list-item-bottom: transparent;
|
|
5521
|
-
--x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
|
|
5522
|
-
--x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
|
|
5523
|
-
--x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
|
|
5524
|
-
--x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
|
|
5525
|
-
--x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
|
|
5526
|
-
--x-color-border-top-option-list-item-bottom-selected: var(
|
|
5527
|
-
--x-color-border-option-list-item-bottom
|
|
5528
|
-
);
|
|
5529
|
-
--x-color-border-right-option-list-item-bottom-selected: var(
|
|
5530
|
-
--x-color-border-option-list-item-bottom
|
|
5531
|
-
);
|
|
5532
|
-
--x-color-border-bottom-option-list-item-bottom-selected: var(
|
|
5533
|
-
--x-color-border-option-list-item-bottom-selected
|
|
5534
|
-
);
|
|
5535
|
-
--x-color-border-left-option-list-item-bottom-selected: var(
|
|
5536
|
-
--x-color-border-option-list-item-bottom
|
|
5537
|
-
);
|
|
5538
|
-
--x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
|
|
5539
|
-
--x-size-border-width-top-option-list-item-bottom: 0;
|
|
5540
|
-
--x-size-border-width-right-option-list-item-bottom: 0;
|
|
5541
|
-
--x-size-border-width-bottom-option-list-item-bottom: var(
|
|
5542
|
-
--x-size-border-width-option-list-item-bottom
|
|
5543
|
-
);
|
|
5544
|
-
--x-size-border-width-left-option-list-item-bottom: 0;
|
|
5545
|
-
--x-size-border-width-top-option-list-item-bottom-selected: 0;
|
|
5546
|
-
--x-size-border-width-right-option-list-item-bottom-selected: 0;
|
|
5547
|
-
--x-size-border-width-bottom-option-list-item-bottom-selected: var(
|
|
5548
|
-
--x-size-border-width-option-list-item-bottom
|
|
5549
|
-
);
|
|
5550
|
-
--x-size-border-width-left-option-list-item-bottom-selected: 0;
|
|
5551
|
-
--x-size-font-option-list-button-bottom: var(--x-size-font-text);
|
|
5552
|
-
--x-font-decoration-option-list-button-bottom-hover: none;
|
|
5553
|
-
--x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
|
|
5554
|
-
--x-number-font-weight-option-list-button-bottom-selected: var(
|
|
5555
|
-
--x-number-font-weight-base-regular
|
|
5556
|
-
);
|
|
5557
|
-
}
|
|
5558
5559
|
:root {
|
|
5559
5560
|
--x-modal-overlay-color: rgb(0, 0, 0);
|
|
5560
5561
|
--x-modal-overlay-opacity: 0.7;
|
|
@@ -6725,15 +6726,6 @@
|
|
|
6725
6726
|
);
|
|
6726
6727
|
--x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6727
6728
|
}
|
|
6728
|
-
:root {
|
|
6729
|
-
--x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
|
|
6730
|
-
--x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6731
|
-
--x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6732
|
-
--x-size-border-radius-bottom-right-input-group-pill: var(
|
|
6733
|
-
--x-size-border-radius-input-group-pill
|
|
6734
|
-
);
|
|
6735
|
-
--x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6736
|
-
}
|
|
6737
6729
|
|
|
6738
6730
|
.x-input-group--pill.x-input-group,
|
|
6739
6731
|
.x-input-group--pill .x-input-group {
|
|
@@ -6760,6 +6752,15 @@
|
|
|
6760
6752
|
--x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
|
|
6761
6753
|
--x-size-border-width-left-input-group-line: 0;
|
|
6762
6754
|
}
|
|
6755
|
+
:root {
|
|
6756
|
+
--x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
|
|
6757
|
+
--x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6758
|
+
--x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6759
|
+
--x-size-border-radius-bottom-right-input-group-pill: var(
|
|
6760
|
+
--x-size-border-radius-input-group-pill
|
|
6761
|
+
);
|
|
6762
|
+
--x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
6763
|
+
}
|
|
6763
6764
|
:root {
|
|
6764
6765
|
--x-size-padding-left-input-group-line: 0;
|
|
6765
6766
|
--x-size-padding-right-input-group-line: 0;
|
|
@@ -7333,15 +7334,6 @@
|
|
|
7333
7334
|
--x-size-width-icon-l: var(--x-size-base-06);
|
|
7334
7335
|
--x-size-height-icon-l: var(--x-size-base-06);
|
|
7335
7336
|
}
|
|
7336
|
-
:root {
|
|
7337
|
-
--x-size-width-icon-l: var(--x-size-base-06);
|
|
7338
|
-
--x-size-height-icon-l: var(--x-size-base-06);
|
|
7339
|
-
}
|
|
7340
|
-
|
|
7341
|
-
.x-icon--l {
|
|
7342
|
-
--x-size-width-icon-default: var(--x-size-width-icon-l);
|
|
7343
|
-
--x-size-height-icon-default: var(--x-size-height-icon-l);
|
|
7344
|
-
}
|
|
7345
7337
|
:root {
|
|
7346
7338
|
--x-color-stroke-icon-default: currentColor;
|
|
7347
7339
|
--x-color-fill-icon-default: none;
|
|
@@ -7352,9 +7344,13 @@
|
|
|
7352
7344
|
--x-size-stroke-width-icon-default: 1px;
|
|
7353
7345
|
}
|
|
7354
7346
|
:root {
|
|
7355
|
-
--x-size-
|
|
7356
|
-
--x-size-
|
|
7357
|
-
|
|
7347
|
+
--x-size-width-icon-l: var(--x-size-base-06);
|
|
7348
|
+
--x-size-height-icon-l: var(--x-size-base-06);
|
|
7349
|
+
}
|
|
7350
|
+
|
|
7351
|
+
.x-icon--l {
|
|
7352
|
+
--x-size-width-icon-default: var(--x-size-width-icon-l);
|
|
7353
|
+
--x-size-height-icon-default: var(--x-size-height-icon-l);
|
|
7358
7354
|
}
|
|
7359
7355
|
:root {
|
|
7360
7356
|
--x-color-stroke-icon-default: currentColor;
|
|
@@ -7391,6 +7387,11 @@
|
|
|
7391
7387
|
--x-size-gap-grid: var(--x-size-base-03);
|
|
7392
7388
|
--x-size-min-width-grid-item: 150px;
|
|
7393
7389
|
}
|
|
7390
|
+
:root {
|
|
7391
|
+
--x-size-padding-grid: 0;
|
|
7392
|
+
--x-size-gap-grid: var(--x-size-base-03);
|
|
7393
|
+
--x-size-min-width-grid-item: 150px;
|
|
7394
|
+
}
|
|
7394
7395
|
|
|
7395
7396
|
.x-grid-list {
|
|
7396
7397
|
margin: 0;
|
|
@@ -7886,13 +7887,13 @@
|
|
|
7886
7887
|
:root {
|
|
7887
7888
|
--x-size-width-dropdown-s: 74px;
|
|
7888
7889
|
}
|
|
7889
|
-
:root {
|
|
7890
|
-
--x-size-width-dropdown-s: 74px;
|
|
7891
|
-
}
|
|
7892
7890
|
|
|
7893
7891
|
.x-dropdown.x-dropdown--s {
|
|
7894
7892
|
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
|
|
7895
7893
|
}
|
|
7894
|
+
:root {
|
|
7895
|
+
--x-size-width-dropdown-s: 74px;
|
|
7896
|
+
}
|
|
7896
7897
|
:root {
|
|
7897
7898
|
--x-size-gap-dropdown-pill: var(--x-size-base-03);
|
|
7898
7899
|
--x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
|
|
@@ -8044,13 +8045,6 @@
|
|
|
8044
8045
|
:root {
|
|
8045
8046
|
--x-size-width-dropdown-l: 202px;
|
|
8046
8047
|
}
|
|
8047
|
-
:root {
|
|
8048
|
-
--x-size-width-dropdown-l: 202px;
|
|
8049
|
-
}
|
|
8050
|
-
|
|
8051
|
-
.x-dropdown.x-dropdown--l {
|
|
8052
|
-
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
|
|
8053
|
-
}
|
|
8054
8048
|
:root {
|
|
8055
8049
|
--x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
|
|
8056
8050
|
--x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
|
|
@@ -8124,6 +8118,13 @@
|
|
|
8124
8118
|
--x-string-overflow-dropdown-toggle-default: hidden;
|
|
8125
8119
|
--x-string-overflow-dropdown-list-default: hidden;
|
|
8126
8120
|
}
|
|
8121
|
+
:root {
|
|
8122
|
+
--x-size-width-dropdown-l: 202px;
|
|
8123
|
+
}
|
|
8124
|
+
|
|
8125
|
+
.x-dropdown.x-dropdown--l {
|
|
8126
|
+
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
|
|
8127
|
+
}
|
|
8127
8128
|
:root {
|
|
8128
8129
|
--x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
|
|
8129
8130
|
--x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
|
|
@@ -8432,16 +8433,6 @@
|
|
|
8432
8433
|
--x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8433
8434
|
--x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8434
8435
|
}
|
|
8435
|
-
:root {
|
|
8436
|
-
--x-color-background-button-tertiary: var(--x-color-base-neutral-95);
|
|
8437
|
-
--x-color-border-button-tertiary: var(--x-color-base-neutral-70);
|
|
8438
|
-
--x-color-text-button-tertiary: var(--x-color-text-default);
|
|
8439
|
-
--x-size-border-width-button-tertiary: var(--x-size-border-width-base);
|
|
8440
|
-
--x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8441
|
-
--x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8442
|
-
--x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8443
|
-
--x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8444
|
-
}
|
|
8445
8436
|
|
|
8446
8437
|
.x-button--tertiary.x-button,
|
|
8447
8438
|
.x-button--tertiary .x-button {
|
|
@@ -8453,6 +8444,16 @@
|
|
|
8453
8444
|
--x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
|
|
8454
8445
|
--x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
|
|
8455
8446
|
}
|
|
8447
|
+
:root {
|
|
8448
|
+
--x-color-background-button-tertiary: var(--x-color-base-neutral-95);
|
|
8449
|
+
--x-color-border-button-tertiary: var(--x-color-base-neutral-70);
|
|
8450
|
+
--x-color-text-button-tertiary: var(--x-color-text-default);
|
|
8451
|
+
--x-size-border-width-button-tertiary: var(--x-size-border-width-base);
|
|
8452
|
+
--x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8453
|
+
--x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8454
|
+
--x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8455
|
+
--x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
|
|
8456
|
+
}
|
|
8456
8457
|
:root {
|
|
8457
8458
|
--x-color-background-button-secondary: transparent;
|
|
8458
8459
|
--x-color-border-button-secondary: var(--x-color-border-button-default);
|
|
@@ -8526,12 +8527,16 @@
|
|
|
8526
8527
|
--x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
|
|
8527
8528
|
--x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
|
|
8528
8529
|
}
|
|
8529
|
-
|
|
8530
|
-
|
|
8531
|
-
|
|
8532
|
-
--x-
|
|
8533
|
-
--x-
|
|
8534
|
-
--x-
|
|
8530
|
+
|
|
8531
|
+
.x-button--primary.x-button,
|
|
8532
|
+
.x-button--primary .x-button {
|
|
8533
|
+
--x-color-background-button-default: var(--x-color-background-button-primary);
|
|
8534
|
+
--x-color-border-button-default: var(--x-color-border-button-primary);
|
|
8535
|
+
--x-color-text-button-default: var(--x-color-text-button-primary);
|
|
8536
|
+
--x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
|
|
8537
|
+
--x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
|
|
8538
|
+
--x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
|
|
8539
|
+
--x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
|
|
8535
8540
|
}
|
|
8536
8541
|
:root {
|
|
8537
8542
|
--x-color-background-button-primary: var(--x-color-background-button-default);
|
|
@@ -8543,16 +8548,12 @@
|
|
|
8543
8548
|
--x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
|
|
8544
8549
|
--x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
|
|
8545
8550
|
}
|
|
8546
|
-
|
|
8547
|
-
|
|
8548
|
-
|
|
8549
|
-
--x-
|
|
8550
|
-
--x-
|
|
8551
|
-
--x-
|
|
8552
|
-
--x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
|
|
8553
|
-
--x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
|
|
8554
|
-
--x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
|
|
8555
|
-
--x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
|
|
8551
|
+
:root {
|
|
8552
|
+
--x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
|
|
8553
|
+
--x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
|
|
8554
|
+
--x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
|
|
8555
|
+
--x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
|
|
8556
|
+
--x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
|
|
8556
8557
|
}
|
|
8557
8558
|
:root {
|
|
8558
8559
|
--x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
|
|
@@ -8581,11 +8582,6 @@
|
|
|
8581
8582
|
--x-color-border-button-ghost: transparent;
|
|
8582
8583
|
--x-color-text-button-ghost: var(--x-color-base-lead);
|
|
8583
8584
|
}
|
|
8584
|
-
:root {
|
|
8585
|
-
--x-color-background-button-ghost: transparent;
|
|
8586
|
-
--x-color-border-button-ghost: transparent;
|
|
8587
|
-
--x-color-text-button-ghost: var(--x-color-base-lead);
|
|
8588
|
-
}
|
|
8589
8585
|
|
|
8590
8586
|
.x-button--ghost.x-button,
|
|
8591
8587
|
.x-button--ghost .x-button {
|
|
@@ -8603,6 +8599,11 @@
|
|
|
8603
8599
|
.x-button--ghost.x-button--ghost-end .x-button {
|
|
8604
8600
|
--x-size-padding-right-button-default: 0;
|
|
8605
8601
|
}
|
|
8602
|
+
:root {
|
|
8603
|
+
--x-color-background-button-ghost: transparent;
|
|
8604
|
+
--x-color-border-button-ghost: transparent;
|
|
8605
|
+
--x-color-text-button-ghost: var(--x-color-base-lead);
|
|
8606
|
+
}
|
|
8606
8607
|
:root {
|
|
8607
8608
|
--x-color-background-button-default: var(--x-color-base-lead);
|
|
8608
8609
|
--x-color-border-button-default: var(--x-color-background-button-default);
|
|
@@ -8718,13 +8719,6 @@
|
|
|
8718
8719
|
--x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
|
|
8719
8720
|
--x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
|
|
8720
8721
|
}
|
|
8721
|
-
:root {
|
|
8722
|
-
--x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
|
|
8723
|
-
--x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
|
|
8724
|
-
--x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
|
|
8725
|
-
--x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
|
|
8726
|
-
--x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
|
|
8727
|
-
}
|
|
8728
8722
|
|
|
8729
8723
|
.x-button--card.x-button,
|
|
8730
8724
|
.x-button--card .x-button {
|
|
@@ -8740,6 +8734,13 @@
|
|
|
8740
8734
|
--x-size-border-radius-bottom-left-button-card
|
|
8741
8735
|
);
|
|
8742
8736
|
}
|
|
8737
|
+
:root {
|
|
8738
|
+
--x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
|
|
8739
|
+
--x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
|
|
8740
|
+
--x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
|
|
8741
|
+
--x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
|
|
8742
|
+
--x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
|
|
8743
|
+
}
|
|
8743
8744
|
:root {
|
|
8744
8745
|
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
8745
8746
|
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
@@ -8821,6 +8822,13 @@
|
|
|
8821
8822
|
--x-size-base-19: 280px;
|
|
8822
8823
|
--x-size-base-20: 344px;
|
|
8823
8824
|
}
|
|
8825
|
+
:root {
|
|
8826
|
+
--x-size-border-radius-base-none: 0;
|
|
8827
|
+
--x-size-border-radius-base-s: var(--x-size-base-02);
|
|
8828
|
+
--x-size-border-radius-base-m: var(--x-size-base-06);
|
|
8829
|
+
--x-size-border-radius-base-pill: 99999px;
|
|
8830
|
+
--x-size-border-width-base: 1px;
|
|
8831
|
+
}
|
|
8824
8832
|
:root {
|
|
8825
8833
|
--x-color-base-lead: #243d48;
|
|
8826
8834
|
--x-color-base-auxiliary: #bfe1ec;
|
|
@@ -8833,11 +8841,4 @@
|
|
|
8833
8841
|
--x-color-base-enable: #00705c;
|
|
8834
8842
|
--x-color-base-disable: #e11f26;
|
|
8835
8843
|
--x-color-base-transparent: transparent;
|
|
8836
|
-
}
|
|
8837
|
-
:root {
|
|
8838
|
-
--x-size-border-radius-base-none: 0;
|
|
8839
|
-
--x-size-border-radius-base-s: var(--x-size-base-02);
|
|
8840
|
-
--x-size-border-radius-base-m: var(--x-size-base-06);
|
|
8841
|
-
--x-size-border-radius-base-pill: 99999px;
|
|
8842
|
-
--x-size-border-width-base: 1px;
|
|
8843
|
-
}
|
|
8844
|
+
}
|
|
@@ -16,7 +16,7 @@ _default: import("vue").DefineComponent<{
|
|
|
16
16
|
default: () => Array<keyof SnippetConfig>;
|
|
17
17
|
};
|
|
18
18
|
}, {
|
|
19
|
-
extraParams: import("vue").Ref<
|
|
19
|
+
extraParams: import("vue").Ref<Record<string, any>>;
|
|
20
20
|
}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
|
|
21
21
|
values: {
|
|
22
22
|
type: PropType<Dictionary<unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet-config-extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\n import { forEach, Dictionary } from '@empathyco/x-utils';\n import { defineComponent, inject, PropType, ref, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n export default defineComponent({\n name: 'SnippetConfigExtraParams',\n xModule: extraParamsXModule.name,\n components: {\n ExtraParams\n },\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>\n },\n excludedExtraParams: {\n type: Array as PropType<Array<keyof SnippetConfig>>,\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'uiLang',\n 'consent',\n 'documentDirection',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n }\n },\n setup(props) {\n const snippetConfig = inject('snippetConfig') as SnippetConfig;\n const extraParams = ref({});\n\n watch(\n [() => snippetConfig, () => props.values],\n () => {\n forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n if (!props.excludedExtraParams.includes(name)) {\n extraParams.value = { ...extraParams.value, [name]: value };\n }\n });\n },\n {\n deep: true,\n immediate: true\n }\n );\n\n return {\n extraParams\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n <Provider>\n <SnippetConfigExtraParams />\n </Provider>\n</template>\n\n<script>\n import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params';\n\n const Provider = {\n provide: {\n snippetConfig: {\n instance: 'demo',\n lang: 'es',\n warehouse: 1234\n }\n }\n };\n\n export default {\n name: 'SnippetConfigExtraParamsDemo',\n components: {\n Provider,\n SnippetConfigExtraParams\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"snippet-config-extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\n import { forEach, Dictionary } from '@empathyco/x-utils';\n import { defineComponent, inject, PropType, ref, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n export default defineComponent({\n name: 'SnippetConfigExtraParams',\n xModule: extraParamsXModule.name,\n components: {\n ExtraParams\n },\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>\n },\n excludedExtraParams: {\n type: Array as PropType<Array<keyof SnippetConfig>>,\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'uiLang',\n 'consent',\n 'documentDirection',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n }\n },\n setup(props) {\n const snippetConfig = inject('snippetConfig') as SnippetConfig;\n const extraParams = ref<Record<string, any>>({});\n\n watch(\n [() => snippetConfig, () => props.values],\n () => {\n forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n extraParams.value = { ...extraParams.value, [name]: value };\n }\n });\n },\n {\n deep: true,\n immediate: true\n }\n );\n\n return {\n extraParams\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n <Provider>\n <SnippetConfigExtraParams />\n </Provider>\n</template>\n\n<script>\n import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params';\n\n const Provider = {\n provide: {\n snippetConfig: {\n instance: 'demo',\n lang: 'es',\n warehouse: 1234\n }\n }\n };\n\n export default {\n name: 'SnippetConfigExtraParamsDemo',\n components: {\n Provider,\n SnippetConfigExtraParams\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -32,7 +32,7 @@ var script = defineComponent({
|
|
|
32
32
|
const extraParams = ref({});
|
|
33
33
|
watch([() => snippetConfig, () => props.values], () => {
|
|
34
34
|
forEach({ ...props.values, ...snippetConfig }, (name, value) => {
|
|
35
|
-
if (!props.excludedExtraParams.includes(name)) {
|
|
35
|
+
if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {
|
|
36
36
|
extraParams.value = { ...extraParams.value, [name]: value };
|
|
37
37
|
}
|
|
38
38
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet-config-extra-params.vue2.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n import { forEach, Dictionary } from '@empathyco/x-utils';\n import { defineComponent, inject, PropType, ref, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n export default defineComponent({\n name: 'SnippetConfigExtraParams',\n xModule: extraParamsXModule.name,\n components: {\n ExtraParams\n },\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>\n },\n excludedExtraParams: {\n type: Array as PropType<Array<keyof SnippetConfig>>,\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'uiLang',\n 'consent',\n 'documentDirection',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n }\n },\n setup(props) {\n const snippetConfig = inject('snippetConfig') as SnippetConfig;\n const extraParams = ref({});\n\n watch(\n [() => snippetConfig, () => props.values],\n () => {\n forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n if (!props.excludedExtraParams.includes(name)) {\n extraParams.value = { ...extraParams.value, [name]: value };\n }\n });\n },\n {\n deep: true,\n immediate: true\n }\n );\n\n return {\n extraParams\n };\n }\n });\n"],"names":["ExtraParams"],"mappings":";;;;;AAWE,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;qBACVA,iBAAW;AACZ,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC9C,SAAA;AACD,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,KAA6C;YACnD,OAAO,EAAE,MAAkC;gBACzC,WAAW;gBACX,WAAW;gBACX,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,SAAS;gBACT,OAAO;gBACP,gBAAgB;AACjB,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,eAAe,CAAkB,CAAC;AAC/D,QAAA,MAAM,WAAW,GAAG,GAAG,
|
|
1
|
+
{"version":3,"file":"snippet-config-extra-params.vue2.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n import { forEach, Dictionary } from '@empathyco/x-utils';\n import { defineComponent, inject, PropType, ref, watch } from 'vue';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n export default defineComponent({\n name: 'SnippetConfigExtraParams',\n xModule: extraParamsXModule.name,\n components: {\n ExtraParams\n },\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>\n },\n excludedExtraParams: {\n type: Array as PropType<Array<keyof SnippetConfig>>,\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'uiLang',\n 'consent',\n 'documentDirection',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n }\n },\n setup(props) {\n const snippetConfig = inject('snippetConfig') as SnippetConfig;\n const extraParams = ref<Record<string, any>>({});\n\n watch(\n [() => snippetConfig, () => props.values],\n () => {\n forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n extraParams.value = { ...extraParams.value, [name]: value };\n }\n });\n },\n {\n deep: true,\n immediate: true\n }\n );\n\n return {\n extraParams\n };\n }\n });\n"],"names":["ExtraParams"],"mappings":";;;;;AAWE,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;qBACVA,iBAAW;AACZ,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC9C,SAAA;AACD,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,KAA6C;YACnD,OAAO,EAAE,MAAkC;gBACzC,WAAW;gBACX,WAAW;gBACX,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,SAAS;gBACT,OAAO;gBACP,gBAAgB;AACjB,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,eAAe,CAAkB,CAAC;AAC/D,QAAA,MAAM,WAAW,GAAG,GAAG,CAAsB,EAAE,CAAC,CAAC;AAEjD,QAAA,KAAK,CACH,CAAC,MAAM,aAAa,EAAE,MAAM,KAAK,CAAC,MAAM,CAAC,EACzC,MAAK;AACH,YAAA,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;AAC7D,gBAAA,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,EAAE;AAClF,oBAAA,WAAW,CAAC,KAAK,GAAG,EAAE,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,KAAK,EAAE,CAAC;AAC7D,iBAAA;AACH,aAAC,CAAC,CAAC;AACL,SAAC,EACD;AACE,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CACF,CAAC;QAEF,OAAO;YACL,WAAW;SACZ,CAAC;KACH;AACF,CAAA,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "5.0.0-alpha.
|
|
3
|
+
"version": "5.0.0-alpha.83",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -143,5 +143,5 @@
|
|
|
143
143
|
"access": "public",
|
|
144
144
|
"directory": "dist"
|
|
145
145
|
},
|
|
146
|
-
"gitHead": "
|
|
146
|
+
"gitHead": "5415b6b6ac6e2e8221934414e9e10079ccaf3401"
|
|
147
147
|
}
|
|
@@ -75047,7 +75047,16 @@
|
|
|
75047
75047
|
},
|
|
75048
75048
|
{
|
|
75049
75049
|
"kind": "Content",
|
|
75050
|
-
"text": "<
|
|
75050
|
+
"text": "<"
|
|
75051
|
+
},
|
|
75052
|
+
{
|
|
75053
|
+
"kind": "Reference",
|
|
75054
|
+
"text": "Record",
|
|
75055
|
+
"canonicalReference": "!Record:type"
|
|
75056
|
+
},
|
|
75057
|
+
{
|
|
75058
|
+
"kind": "Content",
|
|
75059
|
+
"text": "<string, any>>;\n}, {}, {}, {}, import(\"vue/types/v3-component-options\")."
|
|
75051
75060
|
},
|
|
75052
75061
|
{
|
|
75053
75062
|
"kind": "Reference",
|
|
@@ -75155,7 +75164,7 @@
|
|
|
75155
75164
|
"name": "SnippetConfigExtraParams",
|
|
75156
75165
|
"variableTypeTokenRange": {
|
|
75157
75166
|
"startIndex": 1,
|
|
75158
|
-
"endIndex":
|
|
75167
|
+
"endIndex": 42
|
|
75159
75168
|
}
|
|
75160
75169
|
},
|
|
75161
75170
|
{
|
|
@@ -7113,7 +7113,7 @@ type: PropType<(keyof SnippetConfig)[]>;
|
|
|
7113
7113
|
default: () => Array<keyof SnippetConfig>;
|
|
7114
7114
|
};
|
|
7115
7115
|
}, {
|
|
7116
|
-
extraParams: Ref<
|
|
7116
|
+
extraParams: Ref<Record<string, any>>;
|
|
7117
7117
|
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, Readonly<ExtractPropTypes< {
|
|
7118
7118
|
values: {
|
|
7119
7119
|
type: PropType<Dictionary<unknown>>;
|
|
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
10
10
|
default: () => Array<keyof SnippetConfig>;
|
|
11
11
|
};
|
|
12
12
|
}, {
|
|
13
|
-
extraParams: import("vue").Ref<
|
|
13
|
+
extraParams: import("vue").Ref<Record<string, any>>;
|
|
14
14
|
}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
|
|
15
15
|
values: {
|
|
16
16
|
type: PropType<Dictionary<unknown>>;
|