@empathyco/x-components 3.0.0-alpha.192 → 3.0.0-alpha.194

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/design-system/default-theme.css +102 -102
  3. package/design-system/full-theme.css +51 -52
  4. package/js/components/animations/animate-clip-path/animate-clip-path.factory.js +2 -2
  5. package/js/components/animations/animate-clip-path/animate-clip-path.factory.js.map +1 -1
  6. package/js/components/animations/animate-clip-path/animate-clip-path.style.scss.js +1 -1
  7. package/js/components/animations/animate-scale/animate-scale.factory.js +2 -2
  8. package/js/components/animations/animate-scale/animate-scale.factory.js.map +1 -1
  9. package/js/components/animations/animate-scale/animate-scale.style.scss.js +1 -1
  10. package/js/components/animations/animate-translate/animate-translate.factory.js +2 -2
  11. package/js/components/animations/animate-translate/animate-translate.factory.js.map +1 -1
  12. package/js/components/animations/animate-translate/animate-translate.style.scss.js +1 -1
  13. package/js/components/animations/create-directional-animation-factory.js.map +1 -1
  14. package/package.json +2 -2
  15. package/report/x-components.api.json +3 -3
  16. package/types/components/animations/animate-clip-path/animate-clip-path.factory.d.ts +2 -2
  17. package/types/components/animations/animate-scale/animate-scale.factory.d.ts +2 -2
  18. package/types/components/animations/animate-translate/animate-translate.factory.d.ts +2 -2
  19. package/types/components/animations/create-directional-animation-factory.d.ts +1 -1
  20. package/types/components/animations/create-directional-animation-factory.d.ts.map +1 -1
  21. package/types/views/home/types.d.ts +6 -0
  22. package/types/views/home/types.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,32 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.194](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.193...@empathyco/x-components@3.0.0-alpha.194) (2022-10-18)
7
+
8
+ ### Features
9
+
10
+ - **components:** Add new origins to the `animateClipPath` animation factory. (#777)
11
+ ([d016057](https://github.com/empathyco/x/commit/d016057ea0c92901dc88df755351b4acee32f472)),
12
+ closes [EX-7195](https://searchbroker.atlassian.net/browse/EX-7195)
13
+
14
+ # Change Log
15
+
16
+ All notable changes to this project will be documented in this file. See
17
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
18
+
19
+ ## [3.0.0-alpha.193](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.192...@empathyco/x-components@3.0.0-alpha.193) (2022-10-17)
20
+
21
+ ### Testing
22
+
23
+ - **next-queries:** next queries preview e2e tests (#759)
24
+ ([adccbf4](https://github.com/empathyco/x/commit/adccbf4a111ac65915b017aca799ac523347ddc1)),
25
+ closes [EX-6848](https://searchbroker.atlassian.net/browse/EX-6848)
26
+
27
+ # Change Log
28
+
29
+ All notable changes to this project will be documented in this file. See
30
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
31
+
6
32
  ## [3.0.0-alpha.192](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.191...@empathyco/x-components@3.0.0-alpha.192) (2022-10-14)
7
33
 
8
34
  ### Continuous Integration
@@ -47,6 +47,16 @@
47
47
  .x-badge-container {
48
48
  position: relative;
49
49
  }
50
+ :root {
51
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
52
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
53
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
54
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
55
+ --x-size-border-width-badge-default: 0;
56
+ --x-size-width-badge-default: 1.5em;
57
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
58
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
59
+ }
50
60
  :root {
51
61
  --x-color-background-button-default: var(--x-color-base-lead);
52
62
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -133,14 +143,27 @@
133
143
  }
134
144
  }
135
145
  :root {
136
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
137
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
138
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
139
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
140
- --x-size-border-width-badge-default: 0;
141
- --x-size-width-badge-default: 1.5em;
142
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
143
- --x-size-font-badge-default: var(--x-size-font-base-xs);
146
+ --x-color-background-button-default: var(--x-color-base-lead);
147
+ --x-color-border-button-default: var(--x-color-background-button-default);
148
+ --x-color-text-button-default: var(--x-color-base-neutral-100);
149
+ --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
150
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
151
+ --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
152
+ --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
153
+ --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
154
+ --x-size-border-width-button-default: var(--x-size-border-width-base);
155
+ --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
156
+ --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
157
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
158
+ --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
159
+ --x-size-height-button-default: var(--x-size-base-08);
160
+ --x-size-padding-right-button-default: var(--x-size-base-05);
161
+ --x-size-padding-left-button-default: var(--x-size-base-05);
162
+ --x-size-gap-button-default: var(--x-size-base-03);
163
+ --x-font-family-button-default: var(--x-font-family-text);
164
+ --x-size-font-button-default: var(--x-size-font-text);
165
+ --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
166
+ --x-size-line-height-button-default: var(--x-size-line-height-text);
144
167
  }
145
168
  :root {
146
169
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
@@ -584,29 +607,6 @@
584
607
  .x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
585
608
  margin-left: auto;
586
609
  }
587
- :root {
588
- --x-color-background-button-default: var(--x-color-base-lead);
589
- --x-color-border-button-default: var(--x-color-background-button-default);
590
- --x-color-text-button-default: var(--x-color-base-neutral-100);
591
- --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
592
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
593
- --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
594
- --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
595
- --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
596
- --x-size-border-width-button-default: var(--x-size-border-width-base);
597
- --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
598
- --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
599
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
600
- --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
601
- --x-size-height-button-default: var(--x-size-base-08);
602
- --x-size-padding-right-button-default: var(--x-size-base-05);
603
- --x-size-padding-left-button-default: var(--x-size-base-05);
604
- --x-size-gap-button-default: var(--x-size-base-03);
605
- --x-font-family-button-default: var(--x-font-family-text);
606
- --x-size-font-button-default: var(--x-size-font-text);
607
- --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
608
- --x-size-line-height-button-default: var(--x-size-line-height-text);
609
- }
610
610
  :root {
611
611
  --x-color-background-facet-default: transparent;
612
612
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -1421,6 +1421,27 @@
1421
1421
  .x-message > p {
1422
1422
  margin: 0;
1423
1423
  }
1424
+ :root {
1425
+ --x-string-justify-message-default: center;
1426
+ --x-size-gap-message-default: var(--x-size-base-03);
1427
+ --x-size-padding-message-default: var(--x-size-base-06);
1428
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
1429
+ --x-color-border-message-default: var(--x-color-background-message-default);
1430
+ --x-color-text-message-default: var(--x-color-text-default);
1431
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
1432
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
1433
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
1434
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
1435
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
1436
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
1437
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
1438
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
1439
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
1440
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
1441
+ --x-font-family-message-default: var(--x-font-family-title3);
1442
+ --x-size-font-message-default: var(--x-size-font-title3);
1443
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
1444
+ }
1424
1445
  :root {
1425
1446
  --x-color-background-option-list-button-default: transparent;
1426
1447
  --x-color-border-option-list-button-default: transparent;
@@ -1693,27 +1714,6 @@
1693
1714
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
1694
1715
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
1695
1716
  }
1696
- :root {
1697
- --x-string-justify-message-default: center;
1698
- --x-size-gap-message-default: var(--x-size-base-03);
1699
- --x-size-padding-message-default: var(--x-size-base-06);
1700
- --x-color-background-message-default: var(--x-color-base-neutral-95);
1701
- --x-color-border-message-default: var(--x-color-background-message-default);
1702
- --x-color-text-message-default: var(--x-color-text-default);
1703
- --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
1704
- --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
1705
- --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
1706
- --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
1707
- --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
1708
- --x-size-border-width-message-default: var(--x-size-border-width-base);
1709
- --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
1710
- --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
1711
- --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
1712
- --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
1713
- --x-font-family-message-default: var(--x-font-family-title3);
1714
- --x-size-font-message-default: var(--x-size-font-title3);
1715
- --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
1716
- }
1717
1717
  :root {
1718
1718
  --x-size-border-radius-picture-default: 0;
1719
1719
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -2046,6 +2046,56 @@
2046
2046
  --x-color-background-scroll-bar-hover: transparent;
2047
2047
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
2048
2048
  }
2049
+ .x-sliding-panel {
2050
+ z-index: 0;
2051
+ background-color: var(--x-color-background-sliding-panel);
2052
+ }
2053
+ .x-sliding-panel__button.x-button {
2054
+ --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
2055
+ pointer-events: none;
2056
+ }
2057
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
2058
+ pointer-events: all;
2059
+ }
2060
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
2061
+ transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
2062
+ }
2063
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
2064
+ transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
2065
+ }
2066
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
2067
+ opacity: 0;
2068
+ }
2069
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
2070
+ opacity: 1;
2071
+ pointer-events: all;
2072
+ }
2073
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
2074
+ opacity: 1;
2075
+ pointer-events: all;
2076
+ }
2077
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
2078
+ -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
2079
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
2080
+ }
2081
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
2082
+ -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
2083
+ mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
2084
+ }
2085
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
2086
+ -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
2087
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
2088
+ }
2089
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
2090
+ -webkit-mask: none;
2091
+ mask: none;
2092
+ }
2093
+ .x-sliding-panel__scroll > * {
2094
+ flex: 0 0 auto;
2095
+ }
2096
+ .x-sliding-panel__scroll > .x-list {
2097
+ --x-string-flow-list: row nowrap;
2098
+ }
2049
2099
  :root {
2050
2100
  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
2051
2101
  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
@@ -2177,56 +2227,6 @@
2177
2227
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
2178
2228
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
2179
2229
  }
2180
- .x-sliding-panel {
2181
- z-index: 0;
2182
- background-color: var(--x-color-background-sliding-panel);
2183
- }
2184
- .x-sliding-panel__button.x-button {
2185
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
2186
- pointer-events: none;
2187
- }
2188
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
2189
- pointer-events: all;
2190
- }
2191
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
2192
- transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
2193
- }
2194
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
2195
- transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
2196
- }
2197
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
2198
- opacity: 0;
2199
- }
2200
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
2201
- opacity: 1;
2202
- pointer-events: all;
2203
- }
2204
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
2205
- opacity: 1;
2206
- pointer-events: all;
2207
- }
2208
- .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
2209
- -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
2210
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
2211
- }
2212
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
2213
- -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
2214
- mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
2215
- }
2216
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
2217
- -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
2218
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
2219
- }
2220
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
2221
- -webkit-mask: none;
2222
- mask: none;
2223
- }
2224
- .x-sliding-panel__scroll > * {
2225
- flex: 0 0 auto;
2226
- }
2227
- .x-sliding-panel__scroll > .x-list {
2228
- --x-string-flow-list: row nowrap;
2229
- }
2230
2230
  :root {
2231
2231
  --x-string-align-items-suggestion-default: center;
2232
2232
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -2725,51 +2725,6 @@
2725
2725
  --x-size-border-width-bottom-option-list-item-default: inherit;
2726
2726
  --x-size-border-width-left-option-list-item-default: inherit;
2727
2727
  }
2728
- :root {
2729
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
2730
- --x-color-text-option-list-button-bottom-selected-hover: var(
2731
- --x-color-text-option-list-button-bottom-selected
2732
- );
2733
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
2734
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
2735
- --x-color-border-option-list-item-bottom: transparent;
2736
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
2737
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
2738
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
2739
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
2740
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
2741
- --x-color-border-top-option-list-item-bottom-selected: var(
2742
- --x-color-border-option-list-item-bottom
2743
- );
2744
- --x-color-border-right-option-list-item-bottom-selected: var(
2745
- --x-color-border-option-list-item-bottom
2746
- );
2747
- --x-color-border-bottom-option-list-item-bottom-selected: var(
2748
- --x-color-border-option-list-item-bottom-selected
2749
- );
2750
- --x-color-border-left-option-list-item-bottom-selected: var(
2751
- --x-color-border-option-list-item-bottom
2752
- );
2753
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
2754
- --x-size-border-width-top-option-list-item-bottom: 0;
2755
- --x-size-border-width-right-option-list-item-bottom: 0;
2756
- --x-size-border-width-bottom-option-list-item-bottom: var(
2757
- --x-size-border-width-option-list-item-bottom
2758
- );
2759
- --x-size-border-width-left-option-list-item-bottom: 0;
2760
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
2761
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
2762
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
2763
- --x-size-border-width-option-list-item-bottom
2764
- );
2765
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
2766
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
2767
- --x-font-decoration-option-list-button-bottom-hover: none;
2768
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
2769
- --x-number-font-weight-option-list-button-bottom-selected: var(
2770
- --x-number-font-weight-base-regular
2771
- );
2772
- }
2773
2728
  .x-option-list {
2774
2729
  display: inline-flex;
2775
2730
  flex-flow: row nowrap;
@@ -2975,6 +2930,51 @@
2975
2930
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
2976
2931
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
2977
2932
  }
2933
+ :root {
2934
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
2935
+ --x-color-text-option-list-button-bottom-selected-hover: var(
2936
+ --x-color-text-option-list-button-bottom-selected
2937
+ );
2938
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
2939
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
2940
+ --x-color-border-option-list-item-bottom: transparent;
2941
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
2942
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
2943
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
2944
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
2945
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
2946
+ --x-color-border-top-option-list-item-bottom-selected: var(
2947
+ --x-color-border-option-list-item-bottom
2948
+ );
2949
+ --x-color-border-right-option-list-item-bottom-selected: var(
2950
+ --x-color-border-option-list-item-bottom
2951
+ );
2952
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
2953
+ --x-color-border-option-list-item-bottom-selected
2954
+ );
2955
+ --x-color-border-left-option-list-item-bottom-selected: var(
2956
+ --x-color-border-option-list-item-bottom
2957
+ );
2958
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
2959
+ --x-size-border-width-top-option-list-item-bottom: 0;
2960
+ --x-size-border-width-right-option-list-item-bottom: 0;
2961
+ --x-size-border-width-bottom-option-list-item-bottom: var(
2962
+ --x-size-border-width-option-list-item-bottom
2963
+ );
2964
+ --x-size-border-width-left-option-list-item-bottom: 0;
2965
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
2966
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
2967
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
2968
+ --x-size-border-width-option-list-item-bottom
2969
+ );
2970
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
2971
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
2972
+ --x-font-decoration-option-list-button-bottom-hover: none;
2973
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
2974
+ --x-number-font-weight-option-list-button-bottom-selected: var(
2975
+ --x-number-font-weight-base-regular
2976
+ );
2977
+ }
2978
2978
  .x-picture--colored.x-picture {
2979
2979
  --x-color-background-picture-default: var(--x-color-background-picture-colored);
2980
2980
  }
@@ -2987,6 +2987,12 @@
2987
2987
  .x-picture--colored.x-picture .x-picture--placeholder {
2988
2988
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
2989
2989
  }
2990
+ :root {
2991
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
2992
+ --x-mix-blend-mode-picture-colored: multiply;
2993
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
2994
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
2995
+ }
2990
2996
  .x-picture--cover.x-picture {
2991
2997
  position: relative;
2992
2998
  }
@@ -7473,10 +7479,3 @@
7473
7479
  .x-normal-case {
7474
7480
  text-transform: none;
7475
7481
  }
7476
-
7477
- :root {
7478
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
7479
- --x-mix-blend-mode-picture-colored: multiply;
7480
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
7481
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
7482
- }
@@ -6,8 +6,8 @@ import { createDirectionalAnimationFactory } from '../create-directional-animati
6
6
  * clip-path using inset and with the origin passed as parameter.
7
7
  *
8
8
  * @param animationOrigin - The origin of the animation. This means where the animation starts and
9
- * ends. For example 'left' makes the element to animate from the left. If not provided the default
10
- * value is 'top'.
9
+ * ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes
10
+ * it animate from left to right. If not provided the default value is 'top'.
11
11
  * @returns A Transition Component.
12
12
  *
13
13
  * @public
@@ -1 +1 @@
1
- {"version":3,"file":"animate-clip-path.factory.js","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"sourcesContent":["import './animate-clip-path.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and\n * ends. For example 'left' makes the element to animate from the left. If not provided the default\n * value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateClipPath = createDirectionalAnimationFactory('animate-clip-path');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,eAAe,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
1
+ {"version":3,"file":"animate-clip-path.factory.js","sources":["../../../../../src/components/animations/animate-clip-path/animate-clip-path.factory.ts"],"sourcesContent":["import './animate-clip-path.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and\n * ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes\n * it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateClipPath = createDirectionalAnimationFactory('animate-clip-path');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,eAAe,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
2
2
 
3
- var css = ".x-animate-clip-path--enter-active, .x-animate-clip-path--leave-active {\n transition: -webkit-clip-path var(--x-duration-animation, 0.3s) ease-out;\n transition: clip-path var(--x-duration-animation, 0.3s) ease-out;\n transition: clip-path var(--x-duration-animation, 0.3s) ease-out, -webkit-clip-path var(--x-duration-animation, 0.3s) ease-out;\n -webkit-clip-path: inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--enter.x-animate-clip-path--top, .x-animate-clip-path--leave-to.x-animate-clip-path--top {\n -webkit-clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--enter.x-animate-clip-path--bottom, .x-animate-clip-path--leave-to.x-animate-clip-path--bottom {\n -webkit-clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--enter.x-animate-clip-path--left, .x-animate-clip-path--leave-to.x-animate-clip-path--left {\n -webkit-clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--enter.x-animate-clip-path--right, .x-animate-clip-path--leave-to.x-animate-clip-path--right {\n -webkit-clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n}";
3
+ var css = ".x-animate-clip-path--enter-active, .x-animate-clip-path--leave-active {\n transition: -webkit-clip-path var(--x-duration-animation, 0.3s) ease-out;\n transition: clip-path var(--x-duration-animation, 0.3s) ease-out;\n transition: clip-path var(--x-duration-animation, 0.3s) ease-out, -webkit-clip-path var(--x-duration-animation, 0.3s) ease-out;\n -webkit-clip-path: inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--top.x-animate-clip-path--enter, .x-animate-clip-path--top.x-animate-clip-path--leave-to {\n -webkit-clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--bottom.x-animate-clip-path--enter, .x-animate-clip-path--bottom.x-animate-clip-path--leave-to {\n -webkit-clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--top-to-bottom.x-animate-clip-path--enter {\n -webkit-clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--top-to-bottom.x-animate-clip-path--leave-to {\n -webkit-clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--bottom-to-top.x-animate-clip-path--enter {\n -webkit-clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--bottom-to-top.x-animate-clip-path--leave-to {\n -webkit-clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--left.x-animate-clip-path--enter, .x-animate-clip-path--left.x-animate-clip-path--leave-to {\n -webkit-clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--right.x-animate-clip-path--enter, .x-animate-clip-path--right.x-animate-clip-path--leave-to {\n -webkit-clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--left-to-right.x-animate-clip-path--enter {\n -webkit-clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--left-to-right.x-animate-clip-path--leave-to {\n -webkit-clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--right-to-left.x-animate-clip-path--enter {\n -webkit-clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--right-to-left.x-animate-clip-path--leave-to {\n -webkit-clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}";
4
4
  const isBrowser = /*#__PURE__*/ (function () {
5
5
  return (
6
6
  Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
@@ -6,8 +6,8 @@ import { createDirectionalAnimationFactory } from '../create-directional-animati
6
6
  * scale using transform and with the transform origin passed as parameter.
7
7
  *
8
8
  * @param animationOrigin - The origin of the transform animation. This means where the animation
9
- * starts and ends. For example 'left' makes the element to animate from the left. If not provided
10
- * the default value is 'top'.
9
+ * starts and ends. For example 'left' makes the element animate from the left and back;
10
+ * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.
11
11
  * @returns A Transition Component.
12
12
  *
13
13
  * @public
@@ -1 +1 @@
1
- {"version":3,"file":"animate-scale.factory.js","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"sourcesContent":["import './animate-scale.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element to animate from the left. If not provided\n * the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateScale = createDirectionalAnimationFactory('animate-scale');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,YAAY,GAAG,iCAAiC,CAAC,eAAe;;;;"}
1
+ {"version":3,"file":"animate-scale.factory.js","sources":["../../../../../src/components/animations/animate-scale/animate-scale.factory.ts"],"sourcesContent":["import './animate-scale.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateScale = createDirectionalAnimationFactory('animate-scale');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,YAAY,GAAG,iCAAiC,CAAC,eAAe;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
2
2
 
3
- var css = ".x-animate-scale--enter-active, .x-animate-scale--leave-active, .x-animate-scale--enter-active *, .x-animate-scale--leave-active * {\n animation-duration: var(--x-duration-animation, 0.3s);\n animation-timing-function: linear;\n}\n.x-animate-scale--enter-active, .x-animate-scale--leave-active {\n overflow: hidden;\n}\n.x-animate-scale--enter-active.x-animate-scale--top, .x-animate-scale--enter-active.x-animate-scale--bottom, .x-animate-scale--leave-active.x-animate-scale--top, .x-animate-scale--leave-active.x-animate-scale--bottom {\n animation-name: containerAnimationY;\n}\n.x-animate-scale--enter-active.x-animate-scale--left, .x-animate-scale--enter-active.x-animate-scale--right, .x-animate-scale--leave-active.x-animate-scale--left, .x-animate-scale--leave-active.x-animate-scale--right {\n animation-name: containerAnimationX;\n}\n.x-animate-scale--enter-active.x-animate-scale--top > *, .x-animate-scale--enter-active.x-animate-scale--bottom > *, .x-animate-scale--leave-active.x-animate-scale--top > *, .x-animate-scale--leave-active.x-animate-scale--bottom > * {\n animation-name: contentAnimationY;\n}\n.x-animate-scale--enter-active.x-animate-scale--left > *, .x-animate-scale--enter-active.x-animate-scale--right > *, .x-animate-scale--leave-active.x-animate-scale--left > *, .x-animate-scale--leave-active.x-animate-scale--right > * {\n animation-name: contentAnimationX;\n}\n.x-animate-scale--leave-active, .x-animate-scale--leave-active > * {\n animation-direction: reverse;\n}\n.x-animate-scale--top.x-animate-scale--enter-active, .x-animate-scale--top.x-animate-scale--leave-active, .x-animate-scale--top.x-animate-scale--enter-active > *, .x-animate-scale--top.x-animate-scale--leave-active > * {\n transform-origin: top center;\n}\n.x-animate-scale--bottom.x-animate-scale--enter-active, .x-animate-scale--bottom.x-animate-scale--leave-active, .x-animate-scale--bottom.x-animate-scale--enter-active > *, .x-animate-scale--bottom.x-animate-scale--leave-active > * {\n transform-origin: bottom center;\n}\n.x-animate-scale--left.x-animate-scale--enter-active, .x-animate-scale--left.x-animate-scale--leave-active, .x-animate-scale--left.x-animate-scale--enter-active > *, .x-animate-scale--left.x-animate-scale--leave-active > * {\n transform-origin: left center;\n}\n.x-animate-scale--right.x-animate-scale--enter-active, .x-animate-scale--right.x-animate-scale--leave-active, .x-animate-scale--right.x-animate-scale--enter-active > *, .x-animate-scale--right.x-animate-scale--leave-active > * {\n transform-origin: right center;\n}\n\n@keyframes containerAnimationY {\n 0% {\n transform: scaleY(0);\n }\n 5.5555555556% {\n transform: scaleY(0.0000762079);\n }\n 11.1111111111% {\n transform: scaleY(0.0012193263);\n }\n 16.6666666667% {\n transform: scaleY(0.0061728395);\n }\n 22.2222222222% {\n transform: scaleY(0.0195092212);\n }\n 27.7777777778% {\n transform: scaleY(0.0476299345);\n }\n 33.3333333333% {\n transform: scaleY(0.0987654321);\n }\n 38.8888888889% {\n transform: scaleY(0.1829751562);\n }\n 44.4444444444% {\n transform: scaleY(0.3121475385);\n }\n 50% {\n transform: scaleY(0.5);\n }\n 55.5555555556% {\n transform: scaleY(0.6878524615);\n }\n 61.1111111111% {\n transform: scaleY(0.8170248438);\n }\n 66.6666666667% {\n transform: scaleY(0.9012345679);\n }\n 72.2222222222% {\n transform: scaleY(0.9523700655);\n }\n 77.7777777778% {\n transform: scaleY(0.9804907788);\n }\n 83.3333333333% {\n transform: scaleY(0.9938271605);\n }\n 88.8888888889% {\n transform: scaleY(0.9987806737);\n }\n 94.4444444444% {\n transform: scaleY(0.9999237921);\n }\n 100% {\n transform: scaleY(1);\n }\n}\n@keyframes contentAnimationY {\n 0% {\n transform: scaleY(99999999);\n }\n 5.5555555556% {\n transform: scaleY(13122);\n }\n 11.1111111111% {\n transform: scaleY(820.125);\n }\n 16.6666666667% {\n transform: scaleY(162);\n }\n 22.2222222222% {\n transform: scaleY(51.2578125);\n }\n 27.7777777778% {\n transform: scaleY(20.9952);\n }\n 33.3333333333% {\n transform: scaleY(10.125);\n }\n 38.8888888889% {\n transform: scaleY(5.4652228238);\n }\n 44.4444444444% {\n transform: scaleY(3.2036132813);\n }\n 50% {\n transform: scaleY(2);\n }\n 55.5555555556% {\n transform: scaleY(1.4538001329);\n }\n 61.1111111111% {\n transform: scaleY(1.2239529895);\n }\n 66.6666666667% {\n transform: scaleY(1.1095890411);\n }\n 72.2222222222% {\n transform: scaleY(1.0500120029);\n }\n 77.7777777778% {\n transform: scaleY(1.019897404);\n }\n 83.3333333333% {\n transform: scaleY(1.0062111801);\n }\n 88.8888888889% {\n transform: scaleY(1.0012208149);\n }\n 94.4444444444% {\n transform: scaleY(1.0000762137);\n }\n 100% {\n transform: scaleY(1);\n }\n}\n@keyframes containerAnimationX {\n 0% {\n transform: scaleX(0);\n }\n 5.5555555556% {\n transform: scaleX(0.0000762079);\n }\n 11.1111111111% {\n transform: scaleX(0.0012193263);\n }\n 16.6666666667% {\n transform: scaleX(0.0061728395);\n }\n 22.2222222222% {\n transform: scaleX(0.0195092212);\n }\n 27.7777777778% {\n transform: scaleX(0.0476299345);\n }\n 33.3333333333% {\n transform: scaleX(0.0987654321);\n }\n 38.8888888889% {\n transform: scaleX(0.1829751562);\n }\n 44.4444444444% {\n transform: scaleX(0.3121475385);\n }\n 50% {\n transform: scaleX(0.5);\n }\n 55.5555555556% {\n transform: scaleX(0.6878524615);\n }\n 61.1111111111% {\n transform: scaleX(0.8170248438);\n }\n 66.6666666667% {\n transform: scaleX(0.9012345679);\n }\n 72.2222222222% {\n transform: scaleX(0.9523700655);\n }\n 77.7777777778% {\n transform: scaleX(0.9804907788);\n }\n 83.3333333333% {\n transform: scaleX(0.9938271605);\n }\n 88.8888888889% {\n transform: scaleX(0.9987806737);\n }\n 94.4444444444% {\n transform: scaleX(0.9999237921);\n }\n 100% {\n transform: scaleX(1);\n }\n}\n@keyframes contentAnimationX {\n 0% {\n transform: scaleX(99999999);\n }\n 5.5555555556% {\n transform: scaleX(13122);\n }\n 11.1111111111% {\n transform: scaleX(820.125);\n }\n 16.6666666667% {\n transform: scaleX(162);\n }\n 22.2222222222% {\n transform: scaleX(51.2578125);\n }\n 27.7777777778% {\n transform: scaleX(20.9952);\n }\n 33.3333333333% {\n transform: scaleX(10.125);\n }\n 38.8888888889% {\n transform: scaleX(5.4652228238);\n }\n 44.4444444444% {\n transform: scaleX(3.2036132813);\n }\n 50% {\n transform: scaleX(2);\n }\n 55.5555555556% {\n transform: scaleX(1.4538001329);\n }\n 61.1111111111% {\n transform: scaleX(1.2239529895);\n }\n 66.6666666667% {\n transform: scaleX(1.1095890411);\n }\n 72.2222222222% {\n transform: scaleX(1.0500120029);\n }\n 77.7777777778% {\n transform: scaleX(1.019897404);\n }\n 83.3333333333% {\n transform: scaleX(1.0062111801);\n }\n 88.8888888889% {\n transform: scaleX(1.0012208149);\n }\n 94.4444444444% {\n transform: scaleX(1.0000762137);\n }\n 100% {\n transform: scaleX(1);\n }\n}";
3
+ var css = ".x-animate-scale--enter-active, .x-animate-scale--leave-active, .x-animate-scale--enter-active *, .x-animate-scale--leave-active * {\n animation-duration: var(--x-duration-animation, 0.3s);\n animation-timing-function: linear;\n}\n.x-animate-scale--enter-active, .x-animate-scale--leave-active {\n overflow: hidden;\n}\n.x-animate-scale--enter-active.x-animate-scale--top, .x-animate-scale--enter-active.x-animate-scale--bottom, .x-animate-scale--enter-active.x-animate-scale--top-to-bottom, .x-animate-scale--enter-active.x-animate-scale--bottom-to-top, .x-animate-scale--leave-active.x-animate-scale--top, .x-animate-scale--leave-active.x-animate-scale--bottom, .x-animate-scale--leave-active.x-animate-scale--top-to-bottom, .x-animate-scale--leave-active.x-animate-scale--bottom-to-top {\n animation-name: containerAnimationY;\n}\n.x-animate-scale--enter-active.x-animate-scale--top > *, .x-animate-scale--enter-active.x-animate-scale--bottom > *, .x-animate-scale--enter-active.x-animate-scale--top-to-bottom > *, .x-animate-scale--enter-active.x-animate-scale--bottom-to-top > *, .x-animate-scale--leave-active.x-animate-scale--top > *, .x-animate-scale--leave-active.x-animate-scale--bottom > *, .x-animate-scale--leave-active.x-animate-scale--top-to-bottom > *, .x-animate-scale--leave-active.x-animate-scale--bottom-to-top > * {\n animation-name: contentAnimationY;\n}\n.x-animate-scale--enter-active.x-animate-scale--left, .x-animate-scale--enter-active.x-animate-scale--right, .x-animate-scale--enter-active.x-animate-scale--left-to-right, .x-animate-scale--enter-active.x-animate-scale--right-to-left, .x-animate-scale--leave-active.x-animate-scale--left, .x-animate-scale--leave-active.x-animate-scale--right, .x-animate-scale--leave-active.x-animate-scale--left-to-right, .x-animate-scale--leave-active.x-animate-scale--right-to-left {\n animation-name: containerAnimationX;\n}\n.x-animate-scale--enter-active.x-animate-scale--left > *, .x-animate-scale--enter-active.x-animate-scale--right > *, .x-animate-scale--enter-active.x-animate-scale--left-to-right > *, .x-animate-scale--enter-active.x-animate-scale--right-to-left > *, .x-animate-scale--leave-active.x-animate-scale--left > *, .x-animate-scale--leave-active.x-animate-scale--right > *, .x-animate-scale--leave-active.x-animate-scale--left-to-right > *, .x-animate-scale--leave-active.x-animate-scale--right-to-left > * {\n animation-name: contentAnimationX;\n}\n.x-animate-scale--leave-active, .x-animate-scale--leave-active > * {\n animation-direction: reverse;\n}\n.x-animate-scale--top.x-animate-scale--enter-active, .x-animate-scale--top.x-animate-scale--leave-active, .x-animate-scale--top.x-animate-scale--enter-active > *, .x-animate-scale--top.x-animate-scale--leave-active > * {\n transform-origin: top center;\n}\n.x-animate-scale--bottom.x-animate-scale--enter-active, .x-animate-scale--bottom.x-animate-scale--leave-active, .x-animate-scale--bottom.x-animate-scale--enter-active > *, .x-animate-scale--bottom.x-animate-scale--leave-active > * {\n transform-origin: bottom center;\n}\n.x-animate-scale--left.x-animate-scale--enter-active, .x-animate-scale--left.x-animate-scale--leave-active, .x-animate-scale--left.x-animate-scale--enter-active > *, .x-animate-scale--left.x-animate-scale--leave-active > * {\n transform-origin: left center;\n}\n.x-animate-scale--right.x-animate-scale--enter-active, .x-animate-scale--right.x-animate-scale--leave-active, .x-animate-scale--right.x-animate-scale--enter-active > *, .x-animate-scale--right.x-animate-scale--leave-active > * {\n transform-origin: right center;\n}\n.x-animate-scale--top-to-bottom.x-animate-scale--enter-active, .x-animate-scale--top-to-bottom > *.x-animate-scale--enter-active {\n transform-origin: top center;\n}\n.x-animate-scale--top-to-bottom.x-animate-scale--leave-active, .x-animate-scale--top-to-bottom > *.x-animate-scale--leave-active {\n transform-origin: bottom center;\n}\n.x-animate-scale--bottom-to-top.x-animate-scale--enter-active, .x-animate-scale--bottom-to-top > *.x-animate-scale--enter-active {\n transform-origin: bottom center;\n}\n.x-animate-scale--bottom-to-top.x-animate-scale--leave-active, .x-animate-scale--bottom-to-top > *.x-animate-scale--leave-active {\n transform-origin: top center;\n}\n.x-animate-scale--left-to-right.x-animate-scale--enter-active, .x-animate-scale--left-to-right > *.x-animate-scale--enter-active {\n transform-origin: left center;\n}\n.x-animate-scale--left-to-right.x-animate-scale--leave-active, .x-animate-scale--left-to-right > *.x-animate-scale--leave-active {\n transform-origin: right center;\n}\n.x-animate-scale--right-to-left.x-animate-scale--enter-active, .x-animate-scale--right-to-left > *.x-animate-scale--enter-active {\n transform-origin: right center;\n}\n.x-animate-scale--right-to-left.x-animate-scale--leave-active, .x-animate-scale--right-to-left > *.x-animate-scale--leave-active {\n transform-origin: left center;\n}\n\n@keyframes containerAnimationY {\n 0% {\n transform: scaleY(0);\n }\n 5.5555555556% {\n transform: scaleY(0.0000762079);\n }\n 11.1111111111% {\n transform: scaleY(0.0012193263);\n }\n 16.6666666667% {\n transform: scaleY(0.0061728395);\n }\n 22.2222222222% {\n transform: scaleY(0.0195092212);\n }\n 27.7777777778% {\n transform: scaleY(0.0476299345);\n }\n 33.3333333333% {\n transform: scaleY(0.0987654321);\n }\n 38.8888888889% {\n transform: scaleY(0.1829751562);\n }\n 44.4444444444% {\n transform: scaleY(0.3121475385);\n }\n 50% {\n transform: scaleY(0.5);\n }\n 55.5555555556% {\n transform: scaleY(0.6878524615);\n }\n 61.1111111111% {\n transform: scaleY(0.8170248438);\n }\n 66.6666666667% {\n transform: scaleY(0.9012345679);\n }\n 72.2222222222% {\n transform: scaleY(0.9523700655);\n }\n 77.7777777778% {\n transform: scaleY(0.9804907788);\n }\n 83.3333333333% {\n transform: scaleY(0.9938271605);\n }\n 88.8888888889% {\n transform: scaleY(0.9987806737);\n }\n 94.4444444444% {\n transform: scaleY(0.9999237921);\n }\n 100% {\n transform: scaleY(1);\n }\n}\n@keyframes contentAnimationY {\n 0% {\n transform: scaleY(99999999);\n }\n 5.5555555556% {\n transform: scaleY(13122);\n }\n 11.1111111111% {\n transform: scaleY(820.125);\n }\n 16.6666666667% {\n transform: scaleY(162);\n }\n 22.2222222222% {\n transform: scaleY(51.2578125);\n }\n 27.7777777778% {\n transform: scaleY(20.9952);\n }\n 33.3333333333% {\n transform: scaleY(10.125);\n }\n 38.8888888889% {\n transform: scaleY(5.4652228238);\n }\n 44.4444444444% {\n transform: scaleY(3.2036132813);\n }\n 50% {\n transform: scaleY(2);\n }\n 55.5555555556% {\n transform: scaleY(1.4538001329);\n }\n 61.1111111111% {\n transform: scaleY(1.2239529895);\n }\n 66.6666666667% {\n transform: scaleY(1.1095890411);\n }\n 72.2222222222% {\n transform: scaleY(1.0500120029);\n }\n 77.7777777778% {\n transform: scaleY(1.019897404);\n }\n 83.3333333333% {\n transform: scaleY(1.0062111801);\n }\n 88.8888888889% {\n transform: scaleY(1.0012208149);\n }\n 94.4444444444% {\n transform: scaleY(1.0000762137);\n }\n 100% {\n transform: scaleY(1);\n }\n}\n@keyframes containerAnimationX {\n 0% {\n transform: scaleX(0);\n }\n 5.5555555556% {\n transform: scaleX(0.0000762079);\n }\n 11.1111111111% {\n transform: scaleX(0.0012193263);\n }\n 16.6666666667% {\n transform: scaleX(0.0061728395);\n }\n 22.2222222222% {\n transform: scaleX(0.0195092212);\n }\n 27.7777777778% {\n transform: scaleX(0.0476299345);\n }\n 33.3333333333% {\n transform: scaleX(0.0987654321);\n }\n 38.8888888889% {\n transform: scaleX(0.1829751562);\n }\n 44.4444444444% {\n transform: scaleX(0.3121475385);\n }\n 50% {\n transform: scaleX(0.5);\n }\n 55.5555555556% {\n transform: scaleX(0.6878524615);\n }\n 61.1111111111% {\n transform: scaleX(0.8170248438);\n }\n 66.6666666667% {\n transform: scaleX(0.9012345679);\n }\n 72.2222222222% {\n transform: scaleX(0.9523700655);\n }\n 77.7777777778% {\n transform: scaleX(0.9804907788);\n }\n 83.3333333333% {\n transform: scaleX(0.9938271605);\n }\n 88.8888888889% {\n transform: scaleX(0.9987806737);\n }\n 94.4444444444% {\n transform: scaleX(0.9999237921);\n }\n 100% {\n transform: scaleX(1);\n }\n}\n@keyframes contentAnimationX {\n 0% {\n transform: scaleX(99999999);\n }\n 5.5555555556% {\n transform: scaleX(13122);\n }\n 11.1111111111% {\n transform: scaleX(820.125);\n }\n 16.6666666667% {\n transform: scaleX(162);\n }\n 22.2222222222% {\n transform: scaleX(51.2578125);\n }\n 27.7777777778% {\n transform: scaleX(20.9952);\n }\n 33.3333333333% {\n transform: scaleX(10.125);\n }\n 38.8888888889% {\n transform: scaleX(5.4652228238);\n }\n 44.4444444444% {\n transform: scaleX(3.2036132813);\n }\n 50% {\n transform: scaleX(2);\n }\n 55.5555555556% {\n transform: scaleX(1.4538001329);\n }\n 61.1111111111% {\n transform: scaleX(1.2239529895);\n }\n 66.6666666667% {\n transform: scaleX(1.1095890411);\n }\n 72.2222222222% {\n transform: scaleX(1.0500120029);\n }\n 77.7777777778% {\n transform: scaleX(1.019897404);\n }\n 83.3333333333% {\n transform: scaleX(1.0062111801);\n }\n 88.8888888889% {\n transform: scaleX(1.0012208149);\n }\n 94.4444444444% {\n transform: scaleX(1.0000762137);\n }\n 100% {\n transform: scaleX(1);\n }\n}";
4
4
  const isBrowser = /*#__PURE__*/ (function () {
5
5
  return (
6
6
  Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
@@ -6,8 +6,8 @@ import { createDirectionalAnimationFactory } from '../create-directional-animati
6
6
  * translate using transform and with the transform origin passed as parameter.
7
7
  *
8
8
  * @param animationOrigin - The origin of the transform animation. This means where the animation
9
- * starts and ends. For example 'left' makes the element to animate from the left. If not provided
10
- * the default value is 'top'.
9
+ * starts and ends. For example 'left' makes the element animate from the left and back;
10
+ * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.
11
11
  * @returns A Transition Component.
12
12
  *
13
13
  * @public
@@ -1 +1 @@
1
- {"version":3,"file":"animate-translate.factory.js","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"sourcesContent":["import './animate-translate.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element to animate from the left. If not provided\n * the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateTranslate = createDirectionalAnimationFactory('animate-translate');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,gBAAgB,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
1
+ {"version":3,"file":"animate-translate.factory.js","sources":["../../../../../src/components/animations/animate-translate/animate-translate.factory.ts"],"sourcesContent":["import './animate-translate.style.scss';\nimport { createDirectionalAnimationFactory } from '../create-directional-animation-factory';\n\n/**\n * Returns a transition component to wrap an element passed in the default slot and animating its\n * translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation\n * starts and ends. For example 'left' makes the element animate from the left and back;\n * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n * @returns A Transition Component.\n *\n * @public\n */\nexport const animateTranslate = createDirectionalAnimationFactory('animate-translate');\n"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;MAWa,gBAAgB,GAAG,iCAAiC,CAAC,mBAAmB;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
2
2
 
3
- var css = ".x-animate-translate--enter-active, .x-animate-translate--leave-active {\n transition: transform var(--x-duration-animation, 0.3s) ease-out;\n}\n.x-animate-translate--enter.x-animate-translate--top, .x-animate-translate--leave-to.x-animate-translate--top {\n transform: translateY(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--bottom, .x-animate-translate--leave-to.x-animate-translate--bottom {\n transform: translateY(100%);\n}\n.x-animate-translate--enter.x-animate-translate--left, .x-animate-translate--leave-to.x-animate-translate--left {\n transform: translateX(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--right, .x-animate-translate--leave-to.x-animate-translate--right {\n transform: translateX(100%);\n}\n.x-animate-translate--enter.x-animate-translate--top-to-bottom {\n transform: translateY(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--bottom-to-top {\n transform: translateY(100%);\n}\n.x-animate-translate--enter.x-animate-translate--left-to-right {\n transform: translateX(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--right-to-left {\n transform: translateX(100%);\n}\n.x-animate-translate--leave-to.x-animate-translate--top-to-bottom {\n transform: translateY(100%);\n}\n.x-animate-translate--leave-to.x-animate-translate--bottom-to-top {\n transform: translateY(-100%);\n}\n.x-animate-translate--leave-to.x-animate-translate--left-to-right {\n transform: translateX(100%);\n}\n.x-animate-translate--leave-to.x-animate-translate--right-to-left {\n transform: translateX(-100%);\n}";
3
+ var css = ".x-animate-translate--enter-active, .x-animate-translate--leave-active {\n transition: transform var(--x-duration-animation, 0.3s) ease-out;\n}\n.x-animate-translate--top.x-animate-translate--enter, .x-animate-translate--top.x-animate-translate--leave-to {\n transform: translateY(-100%);\n}\n.x-animate-translate--bottom.x-animate-translate--enter, .x-animate-translate--bottom.x-animate-translate--leave-to {\n transform: translateY(100%);\n}\n.x-animate-translate--top-to-bottom.x-animate-translate--enter {\n transform: translateY(-100%);\n}\n.x-animate-translate--top-to-bottom.x-animate-translate--leave-to {\n transform: translateY(100%);\n}\n.x-animate-translate--bottom-to-top.x-animate-translate--enter {\n transform: translateY(100%);\n}\n.x-animate-translate--bottom-to-top.x-animate-translate--leave-to {\n transform: translateY(-100%);\n}\n.x-animate-translate--left.x-animate-translate--enter, .x-animate-translate--left.x-animate-translate--leave-to {\n transform: translateX(-100%);\n}\n.x-animate-translate--right.x-animate-translate--enter, .x-animate-translate--right.x-animate-translate--leave-to {\n transform: translateX(100%);\n}\n.x-animate-translate--left-to-right.x-animate-translate--enter {\n transform: translateX(-100%);\n}\n.x-animate-translate--left-to-right.x-animate-translate--leave-to {\n transform: translateX(100%);\n}\n.x-animate-translate--right-to-left.x-animate-translate--enter {\n transform: translateX(100%);\n}\n.x-animate-translate--right-to-left.x-animate-translate--leave-to {\n transform: translateX(-100%);\n}";
4
4
  const isBrowser = /*#__PURE__*/ (function () {
5
5
  return (
6
6
  Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
@@ -1 +1 @@
1
- {"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import Vue, { VueConstructor } from 'vue';\n\n/**\n * Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n *\n * @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n *\n * @internal\n */\nexport function createDirectionalAnimationFactory(\n animationName: string\n): (animationOrigin?: AnimationOrigin) => VueConstructor {\n return (animationOrigin = 'top') => {\n return Vue.extend({\n name: `transition-${animationName}-${animationOrigin}`,\n inheritAttrs: false,\n render(h) {\n return h(\n 'transition',\n {\n props: {\n name: `x-${animationName}--${animationOrigin} x-${animationName}-`,\n ...this.$attrs\n },\n on: this.$listeners\n },\n this.$slots.default\n );\n }\n });\n };\n}\n\nexport type AnimationOrigin =\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'top-to-bottom'\n | 'bottom-to-top'\n | 'left-to-right'\n | 'right-to-left';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;SASgB,iCAAiC,CAC/C,aAAqB;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK;QAC7B,OAAO,GAAG,CAAC,MAAM,CAAC;YAChB,IAAI,EAAE,cAAc,aAAa,IAAI,eAAe,EAAE;YACtD,YAAY,EAAE,KAAK;YACnB,MAAM,CAAC,CAAC;gBACN,OAAO,CAAC,CACN,YAAY,EACZ;oBACE,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK,aAAa,KAAK,eAAe,MAAM,aAAa,GAAG;wBAClE,GAAG,IAAI,CAAC,MAAM;qBACf;oBACD,EAAE,EAAE,IAAI,CAAC,UAAU;iBACpB,EACD,IAAI,CAAC,MAAM,CAAC,OAAO,CACpB,CAAC;aACH;SACF,CAAC,CAAC;KACJ,CAAC;AACJ;;;;"}
1
+ {"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import Vue, { VueConstructor } from 'vue';\n\n/**\n * Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n *\n * @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n *\n * @internal\n */\nexport function createDirectionalAnimationFactory(\n animationName: string\n): (animationOrigin?: AnimationOrigin) => VueConstructor {\n return (animationOrigin = 'top') => {\n return Vue.extend({\n name: `transition-${animationName}-${animationOrigin}`,\n inheritAttrs: false,\n render(h) {\n return h(\n 'transition',\n {\n props: {\n name: `x-${animationName}--${animationOrigin} x-${animationName}-`,\n ...this.$attrs\n },\n on: this.$listeners\n },\n this.$slots.default\n );\n }\n });\n };\n}\n\nexport type AnimationOrigin =\n | 'top'\n | 'bottom'\n | 'top-to-bottom'\n | 'bottom-to-top'\n | 'left'\n | 'right'\n | 'left-to-right'\n | 'right-to-left';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;SASgB,iCAAiC,CAC/C,aAAqB;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK;QAC7B,OAAO,GAAG,CAAC,MAAM,CAAC;YAChB,IAAI,EAAE,cAAc,aAAa,IAAI,eAAe,EAAE;YACtD,YAAY,EAAE,KAAK;YACnB,MAAM,CAAC,CAAC;gBACN,OAAO,CAAC,CACN,YAAY,EACZ;oBACE,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK,aAAa,KAAK,eAAe,MAAM,aAAa,GAAG;wBAClE,GAAG,IAAI,CAAC,MAAM;qBACf;oBACD,EAAE,EAAE,IAAI,CAAC,UAAU;iBACpB,EACD,IAAI,CAAC,MAAM,CAAC,OAAO,CACpB,CAAC;aACH;SACF,CAAC,CAAC;KACJ,CAAC;AACJ;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.192",
3
+ "version": "3.0.0-alpha.194",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -136,5 +136,5 @@
136
136
  "access": "public",
137
137
  "directory": "dist"
138
138
  },
139
- "gitHead": "17d5671eee5423faac83cdb48fdd38723a7dbbc6"
139
+ "gitHead": "50b11e634337d308acad43d3483850017fa0a8aa"
140
140
  }
@@ -782,7 +782,7 @@
782
782
  {
783
783
  "kind": "Variable",
784
784
  "canonicalReference": "@empathyco/x-components!animateClipPath:var",
785
- "docComment": "/**\n * Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and ends. For example 'left' makes the element to animate from the left. If not provided the default value is 'top'.\n *\n * @returns A Transition Component.\n *\n * @public\n */\n",
785
+ "docComment": "/**\n * Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter.\n *\n * @param animationOrigin - The origin of the animation. This means where the animation starts and ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n *\n * @returns A Transition Component.\n *\n * @public\n */\n",
786
786
  "excerptTokens": [
787
787
  {
788
788
  "kind": "Content",
@@ -830,7 +830,7 @@
830
830
  {
831
831
  "kind": "Variable",
832
832
  "canonicalReference": "@empathyco/x-components!animateScale:var",
833
- "docComment": "/**\n * Returns a transition component to wrap an element passed in the default slot and animating its scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation starts and ends. For example 'left' makes the element to animate from the left. If not provided the default value is 'top'.\n *\n * @returns A Transition Component.\n *\n * @public\n */\n",
833
+ "docComment": "/**\n * Returns a transition component to wrap an element passed in the default slot and animating its scale using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation starts and ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n *\n * @returns A Transition Component.\n *\n * @public\n */\n",
834
834
  "excerptTokens": [
835
835
  {
836
836
  "kind": "Content",
@@ -878,7 +878,7 @@
878
878
  {
879
879
  "kind": "Variable",
880
880
  "canonicalReference": "@empathyco/x-components!animateTranslate:var",
881
- "docComment": "/**\n * Returns a transition component to wrap an element passed in the default slot and animating its translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation starts and ends. For example 'left' makes the element to animate from the left. If not provided the default value is 'top'.\n *\n * @returns A Transition Component.\n *\n * @public\n */\n",
881
+ "docComment": "/**\n * Returns a transition component to wrap an element passed in the default slot and animating its translate using transform and with the transform origin passed as parameter.\n *\n * @param animationOrigin - The origin of the transform animation. This means where the animation starts and ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.\n *\n * @returns A Transition Component.\n *\n * @public\n */\n",
882
882
  "excerptTokens": [
883
883
  {
884
884
  "kind": "Content",
@@ -4,8 +4,8 @@ import './animate-clip-path.style.scss';
4
4
  * clip-path using inset and with the origin passed as parameter.
5
5
  *
6
6
  * @param animationOrigin - The origin of the animation. This means where the animation starts and
7
- * ends. For example 'left' makes the element to animate from the left. If not provided the default
8
- * value is 'top'.
7
+ * ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes
8
+ * it animate from left to right. If not provided the default value is 'top'.
9
9
  * @returns A Transition Component.
10
10
  *
11
11
  * @public
@@ -4,8 +4,8 @@ import './animate-scale.style.scss';
4
4
  * scale using transform and with the transform origin passed as parameter.
5
5
  *
6
6
  * @param animationOrigin - The origin of the transform animation. This means where the animation
7
- * starts and ends. For example 'left' makes the element to animate from the left. If not provided
8
- * the default value is 'top'.
7
+ * starts and ends. For example 'left' makes the element animate from the left and back;
8
+ * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.
9
9
  * @returns A Transition Component.
10
10
  *
11
11
  * @public
@@ -4,8 +4,8 @@ import './animate-translate.style.scss';
4
4
  * translate using transform and with the transform origin passed as parameter.
5
5
  *
6
6
  * @param animationOrigin - The origin of the transform animation. This means where the animation
7
- * starts and ends. For example 'left' makes the element to animate from the left. If not provided
8
- * the default value is 'top'.
7
+ * starts and ends. For example 'left' makes the element animate from the left and back;
8
+ * 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.
9
9
  * @returns A Transition Component.
10
10
  *
11
11
  * @public
@@ -9,5 +9,5 @@ import { VueConstructor } from 'vue';
9
9
  * @internal
10
10
  */
11
11
  export declare function createDirectionalAnimationFactory(animationName: string): (animationOrigin?: AnimationOrigin) => VueConstructor;
12
- export declare type AnimationOrigin = 'top' | 'bottom' | 'left' | 'right' | 'top-to-bottom' | 'bottom-to-top' | 'left-to-right' | 'right-to-left';
12
+ export declare type AnimationOrigin = 'top' | 'bottom' | 'top-to-bottom' | 'bottom-to-top' | 'left' | 'right' | 'left-to-right' | 'right-to-left';
13
13
  //# sourceMappingURL=create-directional-animation-factory.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"create-directional-animation-factory.d.ts","sourceRoot":"","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"names":[],"mappings":"AAAA,OAAY,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,iCAAiC,CAC/C,aAAa,EAAE,MAAM,GACpB,CAAC,eAAe,CAAC,EAAE,eAAe,KAAK,cAAc,CAoBvD;AAED,oBAAY,eAAe,GACvB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,CAAC"}
1
+ {"version":3,"file":"create-directional-animation-factory.d.ts","sourceRoot":"","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"names":[],"mappings":"AAAA,OAAY,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,iCAAiC,CAC/C,aAAa,EAAE,MAAM,GACpB,CAAC,eAAe,CAAC,EAAE,eAAe,KAAK,cAAc,CAoBvD;AAED,oBAAY,eAAe,GACvB,KAAK,GACL,QAAQ,GACR,eAAe,GACf,eAAe,GACf,MAAM,GACN,OAAO,GACP,eAAe,GACf,eAAe,CAAC"}
@@ -12,6 +12,12 @@ export interface HomeControls {
12
12
  historyQueries: {
13
13
  maxItemsToRender: number;
14
14
  };
15
+ nextQueriesPreview: {
16
+ maxItemsToRender: number;
17
+ };
18
+ nextQueriesList: {
19
+ showOnlyAfterOffset: boolean;
20
+ };
15
21
  adapter: {
16
22
  useE2EAdapter: boolean;
17
23
  };
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/home/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,eAAe,EAAE;QACf,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,aAAa,EAAE;QACb,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,cAAc,EAAE;QACd,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,OAAO,EAAE;QACP,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/home/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,eAAe,EAAE;QACf,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,aAAa,EAAE;QACb,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,cAAc,EAAE;QACd,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,kBAAkB,EAAE;QAClB,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,eAAe,EAAE;QACf,mBAAmB,EAAE,OAAO,CAAC;KAC9B,CAAC;IACF,OAAO,EAAE;QACP,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH"}