@empathyco/x-components 3.0.0-alpha.281 → 3.0.0-alpha.282

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 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
+ ## [3.0.0-alpha.282](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.281...@empathyco/x-components@3.0.0-alpha.282) (2023-01-17)
7
+
8
+
9
+ ### Features
10
+
11
+ * add dynamic classes to the suggestion item inside the `base-suggestions` (#1008) ([3e0b683](https://github.com/empathyco/x/commit/3e0b683eb83b9b2e9f6ebb0a17b80a9ff46d6e3c)), closes [EX-7834](https://searchbroker.atlassian.net/browse/EX-7834)
12
+
13
+
14
+
6
15
  ## [3.0.0-alpha.281](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.280...@empathyco/x-components@3.0.0-alpha.281) (2023-01-16)
7
16
 
8
17
 
@@ -2012,6 +2012,329 @@
2012
2012
  --x-size-gap-list-20: var(--x-size-base-20);
2013
2013
  }
2014
2014
  /* @deprecated */
2015
+ [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
2016
+ padding-right: 0;
2017
+ }
2018
+ [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-bottom) {
2019
+ padding-bottom: 0;
2020
+ }
2021
+ [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-left) {
2022
+ padding-left: 0;
2023
+ }
2024
+ [class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-top) {
2025
+ padding-top: 0;
2026
+ }
2027
+ [class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-bottom) {
2028
+ padding-bottom: 0;
2029
+ }
2030
+ [class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-left) {
2031
+ padding-left: 0;
2032
+ }
2033
+ [class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-top) {
2034
+ padding-top: 0;
2035
+ }
2036
+ [class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-right) {
2037
+ padding-right: 0;
2038
+ }
2039
+ [class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-left) {
2040
+ padding-left: 0;
2041
+ }
2042
+ [class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-top) {
2043
+ padding-top: 0;
2044
+ }
2045
+ [class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-right) {
2046
+ padding-right: 0;
2047
+ }
2048
+ [class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-bottom) {
2049
+ padding-bottom: 0;
2050
+ }
2051
+
2052
+ .x-list--padding-01.x-list {
2053
+ padding: var(--x-size-padding-list-01);
2054
+ }
2055
+
2056
+ .x-list--gap-.x-list {
2057
+ gap: var(--x-size-gap-list-01);
2058
+ }
2059
+ @media not all and (min-resolution: 0.001dpcm) {
2060
+ .x-list--gap-.x-list {
2061
+ gap: 0;
2062
+ }
2063
+ .x-list--gap-.x-list > *:not(:last-child) {
2064
+ margin-bottom: var(--x-size-gap-list-01);
2065
+ }
2066
+ .x-list--gap-.x-list.x-list--horizontal {
2067
+ gap: 0;
2068
+ }
2069
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2070
+ margin-right: var(--x-size-gap-list-01);
2071
+ }
2072
+ }
2073
+
2074
+ .x-list--padding-02.x-list {
2075
+ padding: var(--x-size-padding-list-02);
2076
+ }
2077
+
2078
+ .x-list--gap-.x-list {
2079
+ gap: var(--x-size-gap-list-02);
2080
+ }
2081
+ @media not all and (min-resolution: 0.001dpcm) {
2082
+ .x-list--gap-.x-list {
2083
+ gap: 0;
2084
+ }
2085
+ .x-list--gap-.x-list > *:not(:last-child) {
2086
+ margin-bottom: var(--x-size-gap-list-02);
2087
+ }
2088
+ .x-list--gap-.x-list.x-list--horizontal {
2089
+ gap: 0;
2090
+ }
2091
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2092
+ margin-right: var(--x-size-gap-list-02);
2093
+ }
2094
+ }
2095
+
2096
+ .x-list--padding-03.x-list {
2097
+ padding: var(--x-size-padding-list-03);
2098
+ }
2099
+
2100
+ .x-list--gap-.x-list {
2101
+ gap: var(--x-size-gap-list-03);
2102
+ }
2103
+ @media not all and (min-resolution: 0.001dpcm) {
2104
+ .x-list--gap-.x-list {
2105
+ gap: 0;
2106
+ }
2107
+ .x-list--gap-.x-list > *:not(:last-child) {
2108
+ margin-bottom: var(--x-size-gap-list-03);
2109
+ }
2110
+ .x-list--gap-.x-list.x-list--horizontal {
2111
+ gap: 0;
2112
+ }
2113
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2114
+ margin-right: var(--x-size-gap-list-03);
2115
+ }
2116
+ }
2117
+
2118
+ .x-list--padding-04.x-list {
2119
+ padding: var(--x-size-padding-list-04);
2120
+ }
2121
+
2122
+ .x-list--gap-.x-list {
2123
+ gap: var(--x-size-gap-list-04);
2124
+ }
2125
+ @media not all and (min-resolution: 0.001dpcm) {
2126
+ .x-list--gap-.x-list {
2127
+ gap: 0;
2128
+ }
2129
+ .x-list--gap-.x-list > *:not(:last-child) {
2130
+ margin-bottom: var(--x-size-gap-list-04);
2131
+ }
2132
+ .x-list--gap-.x-list.x-list--horizontal {
2133
+ gap: 0;
2134
+ }
2135
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2136
+ margin-right: var(--x-size-gap-list-04);
2137
+ }
2138
+ }
2139
+
2140
+ .x-list--padding-05.x-list {
2141
+ padding: var(--x-size-padding-list-05);
2142
+ }
2143
+
2144
+ .x-list--gap-.x-list {
2145
+ gap: var(--x-size-gap-list-05);
2146
+ }
2147
+ @media not all and (min-resolution: 0.001dpcm) {
2148
+ .x-list--gap-.x-list {
2149
+ gap: 0;
2150
+ }
2151
+ .x-list--gap-.x-list > *:not(:last-child) {
2152
+ margin-bottom: var(--x-size-gap-list-05);
2153
+ }
2154
+ .x-list--gap-.x-list.x-list--horizontal {
2155
+ gap: 0;
2156
+ }
2157
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2158
+ margin-right: var(--x-size-gap-list-05);
2159
+ }
2160
+ }
2161
+
2162
+ .x-list--padding-06.x-list {
2163
+ padding: var(--x-size-padding-list-06);
2164
+ }
2165
+
2166
+ .x-list--gap-.x-list {
2167
+ gap: var(--x-size-gap-list-06);
2168
+ }
2169
+ @media not all and (min-resolution: 0.001dpcm) {
2170
+ .x-list--gap-.x-list {
2171
+ gap: 0;
2172
+ }
2173
+ .x-list--gap-.x-list > *:not(:last-child) {
2174
+ margin-bottom: var(--x-size-gap-list-06);
2175
+ }
2176
+ .x-list--gap-.x-list.x-list--horizontal {
2177
+ gap: 0;
2178
+ }
2179
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2180
+ margin-right: var(--x-size-gap-list-06);
2181
+ }
2182
+ }
2183
+
2184
+ .x-list--padding-07.x-list {
2185
+ padding: var(--x-size-padding-list-07);
2186
+ }
2187
+
2188
+ .x-list--gap-.x-list {
2189
+ gap: var(--x-size-gap-list-07);
2190
+ }
2191
+ @media not all and (min-resolution: 0.001dpcm) {
2192
+ .x-list--gap-.x-list {
2193
+ gap: 0;
2194
+ }
2195
+ .x-list--gap-.x-list > *:not(:last-child) {
2196
+ margin-bottom: var(--x-size-gap-list-07);
2197
+ }
2198
+ .x-list--gap-.x-list.x-list--horizontal {
2199
+ gap: 0;
2200
+ }
2201
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2202
+ margin-right: var(--x-size-gap-list-07);
2203
+ }
2204
+ }
2205
+
2206
+ .x-list--padding-08.x-list {
2207
+ padding: var(--x-size-padding-list-08);
2208
+ }
2209
+
2210
+ .x-list--gap-.x-list {
2211
+ gap: var(--x-size-gap-list-08);
2212
+ }
2213
+ @media not all and (min-resolution: 0.001dpcm) {
2214
+ .x-list--gap-.x-list {
2215
+ gap: 0;
2216
+ }
2217
+ .x-list--gap-.x-list > *:not(:last-child) {
2218
+ margin-bottom: var(--x-size-gap-list-08);
2219
+ }
2220
+ .x-list--gap-.x-list.x-list--horizontal {
2221
+ gap: 0;
2222
+ }
2223
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2224
+ margin-right: var(--x-size-gap-list-08);
2225
+ }
2226
+ }
2227
+
2228
+ .x-list--padding-09.x-list {
2229
+ padding: var(--x-size-padding-list-09);
2230
+ }
2231
+
2232
+ .x-list--gap-.x-list {
2233
+ gap: var(--x-size-gap-list-09);
2234
+ }
2235
+ @media not all and (min-resolution: 0.001dpcm) {
2236
+ .x-list--gap-.x-list {
2237
+ gap: 0;
2238
+ }
2239
+ .x-list--gap-.x-list > *:not(:last-child) {
2240
+ margin-bottom: var(--x-size-gap-list-09);
2241
+ }
2242
+ .x-list--gap-.x-list.x-list--horizontal {
2243
+ gap: 0;
2244
+ }
2245
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2246
+ margin-right: var(--x-size-gap-list-09);
2247
+ }
2248
+ }
2249
+
2250
+ .x-list--padding-10.x-list {
2251
+ padding: var(--x-size-padding-list-10);
2252
+ }
2253
+
2254
+ .x-list--gap-.x-list {
2255
+ gap: var(--x-size-gap-list-10);
2256
+ }
2257
+ @media not all and (min-resolution: 0.001dpcm) {
2258
+ .x-list--gap-.x-list {
2259
+ gap: 0;
2260
+ }
2261
+ .x-list--gap-.x-list > *:not(:last-child) {
2262
+ margin-bottom: var(--x-size-gap-list-10);
2263
+ }
2264
+ .x-list--gap-.x-list.x-list--horizontal {
2265
+ gap: 0;
2266
+ }
2267
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2268
+ margin-right: var(--x-size-gap-list-10);
2269
+ }
2270
+ }
2271
+
2272
+ .x-list--padding-11.x-list {
2273
+ padding: var(--x-size-padding-list-11);
2274
+ }
2275
+
2276
+ .x-list--gap-.x-list {
2277
+ gap: var(--x-size-gap-list-11);
2278
+ }
2279
+ @media not all and (min-resolution: 0.001dpcm) {
2280
+ .x-list--gap-.x-list {
2281
+ gap: 0;
2282
+ }
2283
+ .x-list--gap-.x-list > *:not(:last-child) {
2284
+ margin-bottom: var(--x-size-gap-list-11);
2285
+ }
2286
+ .x-list--gap-.x-list.x-list--horizontal {
2287
+ gap: 0;
2288
+ }
2289
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2290
+ margin-right: var(--x-size-gap-list-11);
2291
+ }
2292
+ }
2293
+
2294
+ .x-list--padding-12.x-list {
2295
+ padding: var(--x-size-padding-list-12);
2296
+ }
2297
+
2298
+ .x-list--gap-.x-list {
2299
+ gap: var(--x-size-gap-list-12);
2300
+ }
2301
+ @media not all and (min-resolution: 0.001dpcm) {
2302
+ .x-list--gap-.x-list {
2303
+ gap: 0;
2304
+ }
2305
+ .x-list--gap-.x-list > *:not(:last-child) {
2306
+ margin-bottom: var(--x-size-gap-list-12);
2307
+ }
2308
+ .x-list--gap-.x-list.x-list--horizontal {
2309
+ gap: 0;
2310
+ }
2311
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2312
+ margin-right: var(--x-size-gap-list-12);
2313
+ }
2314
+ }
2315
+
2316
+ .x-list--padding-13.x-list {
2317
+ padding: var(--x-size-padding-list-13);
2318
+ }
2319
+
2320
+ .x-list--gap-.x-list {
2321
+ gap: var(--x-size-gap-list-13);
2322
+ }
2323
+ @media not all and (min-resolution: 0.001dpcm) {
2324
+ .x-list--gap-.x-list {
2325
+ gap: 0;
2326
+ }
2327
+ .x-list--gap-.x-list > *:not(:last-child) {
2328
+ margin-bottom: var(--x-size-gap-list-13);
2329
+ }
2330
+ .x-list--gap-.x-list.x-list--horizontal {
2331
+ gap: 0;
2332
+ }
2333
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
2334
+ margin-right: var(--x-size-gap-list-13);
2335
+ }
2336
+ }
2337
+ /* @deprecated */
2015
2338
  :root {
2016
2339
  --x-size-padding-list-01: var(--x-size-base-01);
2017
2340
  --x-size-padding-list-02: var(--x-size-base-02);
@@ -6244,429 +6567,105 @@
6244
6567
  padding-bottom: var(--x-size-base-16) !important;
6245
6568
  }
6246
6569
  [dir="ltr"] .x-padding--right-16 {
6247
- padding-right: var(--x-size-base-16) !important;
6248
- }
6249
- [dir="rtl"] .x-padding--right-16 {
6250
- padding-left: var(--x-size-base-16) !important;
6251
- }
6252
- [dir="ltr"] .x-padding--left-16 {
6253
- padding-left: var(--x-size-base-16) !important;
6254
- }
6255
- [dir="rtl"] .x-padding--left-16 {
6256
- padding-right: var(--x-size-base-16) !important;
6257
- }
6258
- .x-padding--top-17 {
6259
- padding-top: var(--x-size-base-17) !important;
6260
- }
6261
- .x-padding--bottom-17 {
6262
- padding-bottom: var(--x-size-base-17) !important;
6263
- }
6264
- [dir="ltr"] .x-padding--right-17 {
6265
- padding-right: var(--x-size-base-17) !important;
6266
- }
6267
- [dir="rtl"] .x-padding--right-17 {
6268
- padding-left: var(--x-size-base-17) !important;
6269
- }
6270
- [dir="ltr"] .x-padding--left-17 {
6271
- padding-left: var(--x-size-base-17) !important;
6272
- }
6273
- [dir="rtl"] .x-padding--left-17 {
6274
- padding-right: var(--x-size-base-17) !important;
6275
- }
6276
- .x-padding--top-18 {
6277
- padding-top: var(--x-size-base-18) !important;
6278
- }
6279
- .x-padding--bottom-18 {
6280
- padding-bottom: var(--x-size-base-18) !important;
6281
- }
6282
- [dir="ltr"] .x-padding--right-18 {
6283
- padding-right: var(--x-size-base-18) !important;
6284
- }
6285
- [dir="rtl"] .x-padding--right-18 {
6286
- padding-left: var(--x-size-base-18) !important;
6287
- }
6288
- [dir="ltr"] .x-padding--left-18 {
6289
- padding-left: var(--x-size-base-18) !important;
6290
- }
6291
- [dir="rtl"] .x-padding--left-18 {
6292
- padding-right: var(--x-size-base-18) !important;
6293
- }
6294
- .x-padding--top-19 {
6295
- padding-top: var(--x-size-base-19) !important;
6296
- }
6297
- .x-padding--bottom-19 {
6298
- padding-bottom: var(--x-size-base-19) !important;
6299
- }
6300
- [dir="ltr"] .x-padding--right-19 {
6301
- padding-right: var(--x-size-base-19) !important;
6302
- }
6303
- [dir="rtl"] .x-padding--right-19 {
6304
- padding-left: var(--x-size-base-19) !important;
6305
- }
6306
- [dir="ltr"] .x-padding--left-19 {
6307
- padding-left: var(--x-size-base-19) !important;
6308
- }
6309
- [dir="rtl"] .x-padding--left-19 {
6310
- padding-right: var(--x-size-base-19) !important;
6311
- }
6312
- .x-padding--top-20 {
6313
- padding-top: var(--x-size-base-20) !important;
6314
- }
6315
- .x-padding--bottom-20 {
6316
- padding-bottom: var(--x-size-base-20) !important;
6317
- }
6318
- [dir="ltr"] .x-padding--right-20 {
6319
- padding-right: var(--x-size-base-20) !important;
6320
- }
6321
- [dir="rtl"] .x-padding--right-20 {
6322
- padding-left: var(--x-size-base-20) !important;
6323
- }
6324
- [dir="ltr"] .x-padding--left-20 {
6325
- padding-left: var(--x-size-base-20) !important;
6326
- }
6327
- [dir="rtl"] .x-padding--left-20 {
6328
- padding-right: var(--x-size-base-20) !important;
6329
- }
6330
- .x-static {
6331
- position: static !important;
6332
- }
6333
-
6334
- .x-fixed {
6335
- position: fixed !important;
6336
- }
6337
-
6338
- .x-absolute {
6339
- position: absolute !important;
6340
- }
6341
-
6342
- .x-relative {
6343
- position: relative !important;
6344
- }
6345
-
6346
- .x-sticky {
6347
- position: sticky !important;
6348
- }
6349
-
6350
- /* @deprecated */
6351
- [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
6352
- padding-right: 0;
6353
- }
6354
- [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-bottom) {
6355
- padding-bottom: 0;
6356
- }
6357
- [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-left) {
6358
- padding-left: 0;
6359
- }
6360
- [class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-top) {
6361
- padding-top: 0;
6362
- }
6363
- [class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-bottom) {
6364
- padding-bottom: 0;
6365
- }
6366
- [class*=x-list--padding-].x-list.x-list--padding-right:not(.x-list--padding-left) {
6367
- padding-left: 0;
6368
- }
6369
- [class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-top) {
6370
- padding-top: 0;
6371
- }
6372
- [class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-right) {
6373
- padding-right: 0;
6374
- }
6375
- [class*=x-list--padding-].x-list.x-list--padding-bottom:not(.x-list--padding-left) {
6376
- padding-left: 0;
6377
- }
6378
- [class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-top) {
6379
- padding-top: 0;
6380
- }
6381
- [class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-right) {
6382
- padding-right: 0;
6383
- }
6384
- [class*=x-list--padding-].x-list.x-list--padding-left:not(.x-list--padding-bottom) {
6385
- padding-bottom: 0;
6386
- }
6387
-
6388
- .x-list--padding-01.x-list {
6389
- padding: var(--x-size-padding-list-01);
6390
- }
6391
-
6392
- .x-list--gap-.x-list {
6393
- gap: var(--x-size-gap-list-01);
6394
- }
6395
- @media not all and (min-resolution: 0.001dpcm) {
6396
- .x-list--gap-.x-list {
6397
- gap: 0;
6398
- }
6399
- .x-list--gap-.x-list > *:not(:last-child) {
6400
- margin-bottom: var(--x-size-gap-list-01);
6401
- }
6402
- .x-list--gap-.x-list.x-list--horizontal {
6403
- gap: 0;
6404
- }
6405
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6406
- margin-right: var(--x-size-gap-list-01);
6407
- }
6408
- }
6409
-
6410
- .x-list--padding-02.x-list {
6411
- padding: var(--x-size-padding-list-02);
6412
- }
6413
-
6414
- .x-list--gap-.x-list {
6415
- gap: var(--x-size-gap-list-02);
6416
- }
6417
- @media not all and (min-resolution: 0.001dpcm) {
6418
- .x-list--gap-.x-list {
6419
- gap: 0;
6420
- }
6421
- .x-list--gap-.x-list > *:not(:last-child) {
6422
- margin-bottom: var(--x-size-gap-list-02);
6423
- }
6424
- .x-list--gap-.x-list.x-list--horizontal {
6425
- gap: 0;
6426
- }
6427
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6428
- margin-right: var(--x-size-gap-list-02);
6429
- }
6430
- }
6431
-
6432
- .x-list--padding-03.x-list {
6433
- padding: var(--x-size-padding-list-03);
6434
- }
6435
-
6436
- .x-list--gap-.x-list {
6437
- gap: var(--x-size-gap-list-03);
6438
- }
6439
- @media not all and (min-resolution: 0.001dpcm) {
6440
- .x-list--gap-.x-list {
6441
- gap: 0;
6442
- }
6443
- .x-list--gap-.x-list > *:not(:last-child) {
6444
- margin-bottom: var(--x-size-gap-list-03);
6445
- }
6446
- .x-list--gap-.x-list.x-list--horizontal {
6447
- gap: 0;
6448
- }
6449
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6450
- margin-right: var(--x-size-gap-list-03);
6451
- }
6570
+ padding-right: var(--x-size-base-16) !important;
6452
6571
  }
6453
-
6454
- .x-list--padding-04.x-list {
6455
- padding: var(--x-size-padding-list-04);
6572
+ [dir="rtl"] .x-padding--right-16 {
6573
+ padding-left: var(--x-size-base-16) !important;
6456
6574
  }
6457
-
6458
- .x-list--gap-.x-list {
6459
- gap: var(--x-size-gap-list-04);
6575
+ [dir="ltr"] .x-padding--left-16 {
6576
+ padding-left: var(--x-size-base-16) !important;
6460
6577
  }
6461
- @media not all and (min-resolution: 0.001dpcm) {
6462
- .x-list--gap-.x-list {
6463
- gap: 0;
6464
- }
6465
- .x-list--gap-.x-list > *:not(:last-child) {
6466
- margin-bottom: var(--x-size-gap-list-04);
6467
- }
6468
- .x-list--gap-.x-list.x-list--horizontal {
6469
- gap: 0;
6470
- }
6471
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6472
- margin-right: var(--x-size-gap-list-04);
6473
- }
6578
+ [dir="rtl"] .x-padding--left-16 {
6579
+ padding-right: var(--x-size-base-16) !important;
6474
6580
  }
6475
-
6476
- .x-list--padding-05.x-list {
6477
- padding: var(--x-size-padding-list-05);
6581
+ .x-padding--top-17 {
6582
+ padding-top: var(--x-size-base-17) !important;
6478
6583
  }
6479
-
6480
- .x-list--gap-.x-list {
6481
- gap: var(--x-size-gap-list-05);
6584
+ .x-padding--bottom-17 {
6585
+ padding-bottom: var(--x-size-base-17) !important;
6482
6586
  }
6483
- @media not all and (min-resolution: 0.001dpcm) {
6484
- .x-list--gap-.x-list {
6485
- gap: 0;
6486
- }
6487
- .x-list--gap-.x-list > *:not(:last-child) {
6488
- margin-bottom: var(--x-size-gap-list-05);
6489
- }
6490
- .x-list--gap-.x-list.x-list--horizontal {
6491
- gap: 0;
6492
- }
6493
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6494
- margin-right: var(--x-size-gap-list-05);
6495
- }
6587
+ [dir="ltr"] .x-padding--right-17 {
6588
+ padding-right: var(--x-size-base-17) !important;
6496
6589
  }
6497
-
6498
- .x-list--padding-06.x-list {
6499
- padding: var(--x-size-padding-list-06);
6590
+ [dir="rtl"] .x-padding--right-17 {
6591
+ padding-left: var(--x-size-base-17) !important;
6500
6592
  }
6501
-
6502
- .x-list--gap-.x-list {
6503
- gap: var(--x-size-gap-list-06);
6593
+ [dir="ltr"] .x-padding--left-17 {
6594
+ padding-left: var(--x-size-base-17) !important;
6504
6595
  }
6505
- @media not all and (min-resolution: 0.001dpcm) {
6506
- .x-list--gap-.x-list {
6507
- gap: 0;
6508
- }
6509
- .x-list--gap-.x-list > *:not(:last-child) {
6510
- margin-bottom: var(--x-size-gap-list-06);
6511
- }
6512
- .x-list--gap-.x-list.x-list--horizontal {
6513
- gap: 0;
6514
- }
6515
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6516
- margin-right: var(--x-size-gap-list-06);
6517
- }
6596
+ [dir="rtl"] .x-padding--left-17 {
6597
+ padding-right: var(--x-size-base-17) !important;
6518
6598
  }
6519
-
6520
- .x-list--padding-07.x-list {
6521
- padding: var(--x-size-padding-list-07);
6599
+ .x-padding--top-18 {
6600
+ padding-top: var(--x-size-base-18) !important;
6522
6601
  }
6523
-
6524
- .x-list--gap-.x-list {
6525
- gap: var(--x-size-gap-list-07);
6602
+ .x-padding--bottom-18 {
6603
+ padding-bottom: var(--x-size-base-18) !important;
6526
6604
  }
6527
- @media not all and (min-resolution: 0.001dpcm) {
6528
- .x-list--gap-.x-list {
6529
- gap: 0;
6530
- }
6531
- .x-list--gap-.x-list > *:not(:last-child) {
6532
- margin-bottom: var(--x-size-gap-list-07);
6533
- }
6534
- .x-list--gap-.x-list.x-list--horizontal {
6535
- gap: 0;
6536
- }
6537
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6538
- margin-right: var(--x-size-gap-list-07);
6539
- }
6605
+ [dir="ltr"] .x-padding--right-18 {
6606
+ padding-right: var(--x-size-base-18) !important;
6540
6607
  }
6541
-
6542
- .x-list--padding-08.x-list {
6543
- padding: var(--x-size-padding-list-08);
6608
+ [dir="rtl"] .x-padding--right-18 {
6609
+ padding-left: var(--x-size-base-18) !important;
6544
6610
  }
6545
-
6546
- .x-list--gap-.x-list {
6547
- gap: var(--x-size-gap-list-08);
6611
+ [dir="ltr"] .x-padding--left-18 {
6612
+ padding-left: var(--x-size-base-18) !important;
6548
6613
  }
6549
- @media not all and (min-resolution: 0.001dpcm) {
6550
- .x-list--gap-.x-list {
6551
- gap: 0;
6552
- }
6553
- .x-list--gap-.x-list > *:not(:last-child) {
6554
- margin-bottom: var(--x-size-gap-list-08);
6555
- }
6556
- .x-list--gap-.x-list.x-list--horizontal {
6557
- gap: 0;
6558
- }
6559
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6560
- margin-right: var(--x-size-gap-list-08);
6561
- }
6614
+ [dir="rtl"] .x-padding--left-18 {
6615
+ padding-right: var(--x-size-base-18) !important;
6562
6616
  }
6563
-
6564
- .x-list--padding-09.x-list {
6565
- padding: var(--x-size-padding-list-09);
6617
+ .x-padding--top-19 {
6618
+ padding-top: var(--x-size-base-19) !important;
6566
6619
  }
6567
-
6568
- .x-list--gap-.x-list {
6569
- gap: var(--x-size-gap-list-09);
6620
+ .x-padding--bottom-19 {
6621
+ padding-bottom: var(--x-size-base-19) !important;
6570
6622
  }
6571
- @media not all and (min-resolution: 0.001dpcm) {
6572
- .x-list--gap-.x-list {
6573
- gap: 0;
6574
- }
6575
- .x-list--gap-.x-list > *:not(:last-child) {
6576
- margin-bottom: var(--x-size-gap-list-09);
6577
- }
6578
- .x-list--gap-.x-list.x-list--horizontal {
6579
- gap: 0;
6580
- }
6581
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6582
- margin-right: var(--x-size-gap-list-09);
6583
- }
6623
+ [dir="ltr"] .x-padding--right-19 {
6624
+ padding-right: var(--x-size-base-19) !important;
6584
6625
  }
6585
-
6586
- .x-list--padding-10.x-list {
6587
- padding: var(--x-size-padding-list-10);
6626
+ [dir="rtl"] .x-padding--right-19 {
6627
+ padding-left: var(--x-size-base-19) !important;
6588
6628
  }
6589
-
6590
- .x-list--gap-.x-list {
6591
- gap: var(--x-size-gap-list-10);
6629
+ [dir="ltr"] .x-padding--left-19 {
6630
+ padding-left: var(--x-size-base-19) !important;
6592
6631
  }
6593
- @media not all and (min-resolution: 0.001dpcm) {
6594
- .x-list--gap-.x-list {
6595
- gap: 0;
6596
- }
6597
- .x-list--gap-.x-list > *:not(:last-child) {
6598
- margin-bottom: var(--x-size-gap-list-10);
6599
- }
6600
- .x-list--gap-.x-list.x-list--horizontal {
6601
- gap: 0;
6602
- }
6603
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6604
- margin-right: var(--x-size-gap-list-10);
6605
- }
6632
+ [dir="rtl"] .x-padding--left-19 {
6633
+ padding-right: var(--x-size-base-19) !important;
6606
6634
  }
6607
-
6608
- .x-list--padding-11.x-list {
6609
- padding: var(--x-size-padding-list-11);
6635
+ .x-padding--top-20 {
6636
+ padding-top: var(--x-size-base-20) !important;
6610
6637
  }
6611
-
6612
- .x-list--gap-.x-list {
6613
- gap: var(--x-size-gap-list-11);
6638
+ .x-padding--bottom-20 {
6639
+ padding-bottom: var(--x-size-base-20) !important;
6614
6640
  }
6615
- @media not all and (min-resolution: 0.001dpcm) {
6616
- .x-list--gap-.x-list {
6617
- gap: 0;
6618
- }
6619
- .x-list--gap-.x-list > *:not(:last-child) {
6620
- margin-bottom: var(--x-size-gap-list-11);
6621
- }
6622
- .x-list--gap-.x-list.x-list--horizontal {
6623
- gap: 0;
6624
- }
6625
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6626
- margin-right: var(--x-size-gap-list-11);
6627
- }
6641
+ [dir="ltr"] .x-padding--right-20 {
6642
+ padding-right: var(--x-size-base-20) !important;
6628
6643
  }
6629
-
6630
- .x-list--padding-12.x-list {
6631
- padding: var(--x-size-padding-list-12);
6644
+ [dir="rtl"] .x-padding--right-20 {
6645
+ padding-left: var(--x-size-base-20) !important;
6646
+ }
6647
+ [dir="ltr"] .x-padding--left-20 {
6648
+ padding-left: var(--x-size-base-20) !important;
6649
+ }
6650
+ [dir="rtl"] .x-padding--left-20 {
6651
+ padding-right: var(--x-size-base-20) !important;
6652
+ }
6653
+ .x-static {
6654
+ position: static !important;
6632
6655
  }
6633
6656
 
6634
- .x-list--gap-.x-list {
6635
- gap: var(--x-size-gap-list-12);
6657
+ .x-fixed {
6658
+ position: fixed !important;
6636
6659
  }
6637
- @media not all and (min-resolution: 0.001dpcm) {
6638
- .x-list--gap-.x-list {
6639
- gap: 0;
6640
- }
6641
- .x-list--gap-.x-list > *:not(:last-child) {
6642
- margin-bottom: var(--x-size-gap-list-12);
6643
- }
6644
- .x-list--gap-.x-list.x-list--horizontal {
6645
- gap: 0;
6646
- }
6647
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6648
- margin-right: var(--x-size-gap-list-12);
6649
- }
6660
+
6661
+ .x-absolute {
6662
+ position: absolute !important;
6650
6663
  }
6651
6664
 
6652
- .x-list--padding-13.x-list {
6653
- padding: var(--x-size-padding-list-13);
6665
+ .x-relative {
6666
+ position: relative !important;
6654
6667
  }
6655
6668
 
6656
- .x-list--gap-.x-list {
6657
- gap: var(--x-size-gap-list-13);
6669
+ .x-sticky {
6670
+ position: sticky !important;
6658
6671
  }
6659
- @media not all and (min-resolution: 0.001dpcm) {
6660
- .x-list--gap-.x-list {
6661
- gap: 0;
6662
- }
6663
- .x-list--gap-.x-list > *:not(:last-child) {
6664
- margin-bottom: var(--x-size-gap-list-13);
6665
- }
6666
- .x-list--gap-.x-list.x-list--horizontal {
6667
- gap: 0;
6668
- }
6669
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6670
- margin-right: var(--x-size-gap-list-13);
6671
- }
6672
- }
@@ -9,9 +9,9 @@ Paints a list of suggestions passed in by prop. Requires a component for a singl
9
9
  <b>Signature:</b>
10
10
 
11
11
  ```typescript
12
- export default class BaseSuggestions extends Vue
12
+ export default class BaseSuggestions extends BaseSuggestions_base
13
13
  ```
14
- <b>Extends:</b> Vue
14
+ <b>Extends:</b> BaseSuggestions\_base
15
15
 
16
16
  ## Properties
17
17
 
@@ -153,3 +153,39 @@ export default {
153
153
  };
154
154
  </script>
155
155
  ```
156
+
157
+ In this example, the `contentClass` prop can be used to add classes to the suggestion item.
158
+
159
+ ```vue
160
+ <template>
161
+ <BaseSuggestions
162
+ :suggestions="suggestions"
163
+ suggestionItemClass="x-custom-class"
164
+ />
165
+ </template>
166
+
167
+ <script>
168
+ import { BaseSuggestions } from "@empathyco/x-components";
169
+
170
+ export default {
171
+ name: "BaseSuggestionsDemo",
172
+ components: {
173
+ BaseSuggestions
174
+ },
175
+ data() {
176
+ return {
177
+ suggestions: [
178
+ {
179
+ facets: [],
180
+ key: "chips",
181
+ query: "Chips",
182
+ totalResults: 10,
183
+ results: [],
184
+ modelName: "PopularSearch"
185
+ }
186
+ ]
187
+ };
188
+ }
189
+ };
190
+ </script>
191
+ ```
@@ -23,6 +23,7 @@ var __vue_render__ = function () {
23
23
  {
24
24
  key: _vm.suggestionsKeys[index],
25
25
  staticClass: "x-list x-suggestions__item",
26
+ class: _vm.suggestionItemClass,
26
27
  attrs: { "data-test": "suggestion-item" },
27
28
  },
28
29
  [
@@ -45,7 +46,7 @@ __vue_render__._withStripped = true;
45
46
  /* style */
46
47
  const __vue_inject_styles__ = undefined;
47
48
  /* scoped */
48
- const __vue_scope_id__ = "data-v-43ea023e";
49
+ const __vue_scope_id__ = "data-v-7cfe08e4";
49
50
  /* module identifier */
50
51
  const __vue_module_identifier__ = undefined;
51
52
  /* functional template */
@@ -1 +1 @@
1
- {"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-list x-suggestions\">\n <li\n v-for=\"(suggestion, index) in suggestionsToRender\"\n :key=\"suggestionsKeys[index]\"\n class=\"x-list x-suggestions__item\"\n data-test=\"suggestion-item\"\n >\n <!--\n @slot (Required) List item content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {number} index - Suggestion index\n @binding {Filter | undefined} filter - Suggestion's filter\n -->\n <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { Suggestion, Facet, Filter } from '@empathyco/x-types';\n import { isArrayEmpty } from '../../utils/array';\n\n /**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\n @Component\n export default class BaseSuggestions extends Vue {\n /**\n * The list of suggestions to render.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestions!: Suggestion[];\n\n /**\n * Animation component that will be used to animate the suggestion.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of suggestions to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * Boolean value to indicate if the facets should be rendered.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected showFacets!: boolean;\n\n /**\n * When {@link BaseSuggestions.showFacets} is true, it indicates if the suggestion without\n * filter should be rendered.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected showPlainSuggestion!: boolean;\n\n /**\n * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n *\n * @returns An array with the unique keys of the suggestions.\n * @internal\n */\n protected get suggestionsKeys(): string[] {\n return this.suggestionsToRender.map(suggestion =>\n isArrayEmpty(suggestion.facets)\n ? suggestion.query\n : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n );\n }\n\n /**\n * Generates a string from the given facets.\n *\n * @param facets - The list of facets to reduce to a string.\n * @returns - A string representing the list of facets.\n * @internal\n */\n protected getFacetsKey(facets: Facet[]): string {\n // Component methods are bound by Vue:\n // eslint-disable-next-line @typescript-eslint/unbound-method\n return facets.map(this.getFacetKey).join('&');\n }\n\n /**\n * Generates a string from the given facet.\n *\n * @param facet - The facet to reduce to a string.\n * @returns - A string representing the facet.\n * @internal\n */\n protected getFacetKey(facet: Facet): string {\n return facet.filters.map(filter => filter.id).join('&');\n }\n\n /**\n * Creates a list of suggestions to render based on the configuration of this component.\n *\n * @returns - The list of suggestions to be rendered by this component.\n *\n * @internal\n */\n protected get suggestionsToRender(): Suggestion[] {\n return this.suggestions\n .flatMap(suggestion =>\n this.showFacets && suggestion.facets?.length\n ? this.showPlainSuggestion\n ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]\n : this.expandSuggestionFilters(suggestion)\n : { ...suggestion, facets: [] }\n )\n .slice(0, this.maxItemsToRender);\n }\n\n /**\n * Creates a suggestion for each one of the filter inside each facet.\n *\n * @param suggestion - Suggestion to expand.\n * @returns A list of suggestions, each one with a single filter.\n *\n * @internal\n */\n protected expandSuggestionFilters(suggestion: Suggestion): Suggestion[] {\n return (\n suggestion.facets?.flatMap(facet =>\n facet.filters.map(filter => ({\n ...suggestion,\n facets: [{ ...facet, filters: [filter] }]\n }))\n ) ?? []\n );\n }\n\n /**\n * Returns the filter contained by the suggestion.\n *\n * @param suggestion - Suggestion containing the filter.\n * @returns The suggestion filter.\n * @internal\n */\n protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined {\n return suggestion.facets?.[0]?.filters[0];\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-suggestions {\n list-style-type: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n <template #default=\"{ suggestion }\">\n <button @click=\"emitSuggestionSelected($event, suggestion)\">\n {{ suggestion.query }}\n </button>\n </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n computed: {\n ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n },\n methods: {\n emitSuggestionSelected(event, suggestion) {\n this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n }\n }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [\n {\n id: 'exampleFacet',\n label: 'exampleFacet',\n modelName: 'SimpleFacet',\n filters: [\n {\n facetId: 'exampleFacet',\n id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n label: 'EXAMPLE',\n selected: false,\n totalResults: 10,\n modelName: 'SimpleFilter'\n }\n ]\n }\n ],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-list x-suggestions\">\n <li\n v-for=\"(suggestion, index) in suggestionsToRender\"\n :key=\"suggestionsKeys[index]\"\n class=\"x-list x-suggestions__item\"\n :class=\"suggestionItemClass\"\n data-test=\"suggestion-item\"\n >\n <!--\n @slot (Required) List item content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {number} index - Suggestion index\n @binding {Filter | undefined} filter - Suggestion's filter\n -->\n <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Mixins, Prop } from 'vue-property-decorator';\n import { Suggestion, Facet, Filter } from '@empathyco/x-types';\n import { isArrayEmpty } from '../../utils/array';\n import { dynamicPropsMixin } from '../dynamic-props.mixin';\n\n /**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\n @Component\n export default class BaseSuggestions extends Mixins(dynamicPropsMixin(['suggestionItemClass'])) {\n /**\n * The list of suggestions to render.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestions!: Suggestion[];\n\n /**\n * Animation component that will be used to animate the suggestion.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of suggestions to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * Boolean value to indicate if the facets should be rendered.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected showFacets!: boolean;\n\n /**\n * When {@link BaseSuggestions.showFacets} is true, it indicates if the suggestion without\n * filter should be rendered.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected showPlainSuggestion!: boolean;\n\n /**\n * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n *\n * @returns An array with the unique keys of the suggestions.\n * @internal\n */\n protected get suggestionsKeys(): string[] {\n return this.suggestionsToRender.map(suggestion =>\n isArrayEmpty(suggestion.facets)\n ? suggestion.query\n : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n );\n }\n\n /**\n * Generates a string from the given facets.\n *\n * @param facets - The list of facets to reduce to a string.\n * @returns - A string representing the list of facets.\n * @internal\n */\n protected getFacetsKey(facets: Facet[]): string {\n // Component methods are bound by Vue:\n // eslint-disable-next-line @typescript-eslint/unbound-method\n return facets.map(this.getFacetKey).join('&');\n }\n\n /**\n * Generates a string from the given facet.\n *\n * @param facet - The facet to reduce to a string.\n * @returns - A string representing the facet.\n * @internal\n */\n protected getFacetKey(facet: Facet): string {\n return facet.filters.map(filter => filter.id).join('&');\n }\n\n /**\n * Creates a list of suggestions to render based on the configuration of this component.\n *\n * @returns - The list of suggestions to be rendered by this component.\n *\n * @internal\n */\n protected get suggestionsToRender(): Suggestion[] {\n return this.suggestions\n .flatMap(suggestion =>\n this.showFacets && suggestion.facets?.length\n ? this.showPlainSuggestion\n ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]\n : this.expandSuggestionFilters(suggestion)\n : { ...suggestion, facets: [] }\n )\n .slice(0, this.maxItemsToRender);\n }\n\n /**\n * Creates a suggestion for each one of the filter inside each facet.\n *\n * @param suggestion - Suggestion to expand.\n * @returns A list of suggestions, each one with a single filter.\n *\n * @internal\n */\n protected expandSuggestionFilters(suggestion: Suggestion): Suggestion[] {\n return (\n suggestion.facets?.flatMap(facet =>\n facet.filters.map(filter => ({\n ...suggestion,\n facets: [{ ...facet, filters: [filter] }]\n }))\n ) ?? []\n );\n }\n\n /**\n * Returns the filter contained by the suggestion.\n *\n * @param suggestion - Suggestion containing the filter.\n * @returns The suggestion filter.\n * @internal\n */\n protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined {\n return suggestion.facets?.[0]?.filters[0];\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-suggestions {\n list-style-type: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n <template #default=\"{ suggestion }\">\n <button @click=\"emitSuggestionSelected($event, suggestion)\">\n {{ suggestion.query }}\n </button>\n </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n computed: {\n ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n },\n methods: {\n emitSuggestionSelected(event, suggestion) {\n this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n }\n }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [\n {\n id: 'exampleFacet',\n label: 'exampleFacet',\n modelName: 'SimpleFacet',\n filters: [\n {\n facetId: 'exampleFacet',\n id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n label: 'EXAMPLE',\n selected: false,\n totalResults: 10,\n modelName: 'SimpleFilter'\n }\n ]\n }\n ],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,7 +1,7 @@
1
1
  import { __decorate } from 'tslib';
2
- import Vue from 'vue';
3
- import { Prop, Component } from 'vue-property-decorator';
2
+ import { Mixins, Prop, Component } from 'vue-property-decorator';
4
3
  import { isArrayEmpty } from '../../utils/array.js';
4
+ import { dynamicPropsMixin } from '../dynamic-props.mixin.js';
5
5
 
6
6
  /**
7
7
  * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
@@ -9,7 +9,7 @@ import { isArrayEmpty } from '../../utils/array.js';
9
9
  *
10
10
  * @public
11
11
  */
12
- let BaseSuggestions = class BaseSuggestions extends Vue {
12
+ let BaseSuggestions = class BaseSuggestions extends Mixins(dynamicPropsMixin(['suggestionItemClass'])) {
13
13
  /**
14
14
  * An array with the unique keys for each suggestion. Required by the `v-for` loop.
15
15
  *
@@ -1 +1 @@
1
- {"version":3,"file":"base-suggestions.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { Suggestion, Facet, Filter } from '@empathyco/x-types';\n import { isArrayEmpty } from '../../utils/array';\n\n /**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\n @Component\n export default class BaseSuggestions extends Vue {\n /**\n * The list of suggestions to render.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestions!: Suggestion[];\n\n /**\n * Animation component that will be used to animate the suggestion.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of suggestions to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * Boolean value to indicate if the facets should be rendered.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected showFacets!: boolean;\n\n /**\n * When {@link BaseSuggestions.showFacets} is true, it indicates if the suggestion without\n * filter should be rendered.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected showPlainSuggestion!: boolean;\n\n /**\n * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n *\n * @returns An array with the unique keys of the suggestions.\n * @internal\n */\n protected get suggestionsKeys(): string[] {\n return this.suggestionsToRender.map(suggestion =>\n isArrayEmpty(suggestion.facets)\n ? suggestion.query\n : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n );\n }\n\n /**\n * Generates a string from the given facets.\n *\n * @param facets - The list of facets to reduce to a string.\n * @returns - A string representing the list of facets.\n * @internal\n */\n protected getFacetsKey(facets: Facet[]): string {\n // Component methods are bound by Vue:\n // eslint-disable-next-line @typescript-eslint/unbound-method\n return facets.map(this.getFacetKey).join('&');\n }\n\n /**\n * Generates a string from the given facet.\n *\n * @param facet - The facet to reduce to a string.\n * @returns - A string representing the facet.\n * @internal\n */\n protected getFacetKey(facet: Facet): string {\n return facet.filters.map(filter => filter.id).join('&');\n }\n\n /**\n * Creates a list of suggestions to render based on the configuration of this component.\n *\n * @returns - The list of suggestions to be rendered by this component.\n *\n * @internal\n */\n protected get suggestionsToRender(): Suggestion[] {\n return this.suggestions\n .flatMap(suggestion =>\n this.showFacets && suggestion.facets?.length\n ? this.showPlainSuggestion\n ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]\n : this.expandSuggestionFilters(suggestion)\n : { ...suggestion, facets: [] }\n )\n .slice(0, this.maxItemsToRender);\n }\n\n /**\n * Creates a suggestion for each one of the filter inside each facet.\n *\n * @param suggestion - Suggestion to expand.\n * @returns A list of suggestions, each one with a single filter.\n *\n * @internal\n */\n protected expandSuggestionFilters(suggestion: Suggestion): Suggestion[] {\n return (\n suggestion.facets?.flatMap(facet =>\n facet.filters.map(filter => ({\n ...suggestion,\n facets: [{ ...facet, filters: [filter] }]\n }))\n ) ?? []\n );\n }\n\n /**\n * Returns the filter contained by the suggestion.\n *\n * @param suggestion - Suggestion containing the filter.\n * @returns The suggestion filter.\n * @internal\n */\n protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined {\n return suggestion.facets?.[0]?.filters[0];\n }\n }\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"base-suggestions.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n import Vue from 'vue';\n import { Component, Mixins, Prop } from 'vue-property-decorator';\n import { Suggestion, Facet, Filter } from '@empathyco/x-types';\n import { isArrayEmpty } from '../../utils/array';\n import { dynamicPropsMixin } from '../dynamic-props.mixin';\n\n /**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\n @Component\n export default class BaseSuggestions extends Mixins(dynamicPropsMixin(['suggestionItemClass'])) {\n /**\n * The list of suggestions to render.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestions!: Suggestion[];\n\n /**\n * Animation component that will be used to animate the suggestion.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of suggestions to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * Boolean value to indicate if the facets should be rendered.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected showFacets!: boolean;\n\n /**\n * When {@link BaseSuggestions.showFacets} is true, it indicates if the suggestion without\n * filter should be rendered.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected showPlainSuggestion!: boolean;\n\n /**\n * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n *\n * @returns An array with the unique keys of the suggestions.\n * @internal\n */\n protected get suggestionsKeys(): string[] {\n return this.suggestionsToRender.map(suggestion =>\n isArrayEmpty(suggestion.facets)\n ? suggestion.query\n : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n );\n }\n\n /**\n * Generates a string from the given facets.\n *\n * @param facets - The list of facets to reduce to a string.\n * @returns - A string representing the list of facets.\n * @internal\n */\n protected getFacetsKey(facets: Facet[]): string {\n // Component methods are bound by Vue:\n // eslint-disable-next-line @typescript-eslint/unbound-method\n return facets.map(this.getFacetKey).join('&');\n }\n\n /**\n * Generates a string from the given facet.\n *\n * @param facet - The facet to reduce to a string.\n * @returns - A string representing the facet.\n * @internal\n */\n protected getFacetKey(facet: Facet): string {\n return facet.filters.map(filter => filter.id).join('&');\n }\n\n /**\n * Creates a list of suggestions to render based on the configuration of this component.\n *\n * @returns - The list of suggestions to be rendered by this component.\n *\n * @internal\n */\n protected get suggestionsToRender(): Suggestion[] {\n return this.suggestions\n .flatMap(suggestion =>\n this.showFacets && suggestion.facets?.length\n ? this.showPlainSuggestion\n ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]\n : this.expandSuggestionFilters(suggestion)\n : { ...suggestion, facets: [] }\n )\n .slice(0, this.maxItemsToRender);\n }\n\n /**\n * Creates a suggestion for each one of the filter inside each facet.\n *\n * @param suggestion - Suggestion to expand.\n * @returns A list of suggestions, each one with a single filter.\n *\n * @internal\n */\n protected expandSuggestionFilters(suggestion: Suggestion): Suggestion[] {\n return (\n suggestion.facets?.flatMap(facet =>\n facet.filters.map(filter => ({\n ...suggestion,\n facets: [{ ...facet, filters: [filter] }]\n }))\n ) ?? []\n );\n }\n\n /**\n * Returns the filter contained by the suggestion.\n *\n * @param suggestion - Suggestion containing the filter.\n * @returns The suggestion filter.\n * @internal\n */\n protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined {\n return suggestion.facets?.[0]?.filters[0];\n }\n }\n"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
2
2
 
3
- var css = ".x-suggestions[data-v-43ea023e] {\n list-style-type: none;\n}";
3
+ var css = ".x-suggestions[data-v-7cfe08e4] {\n list-style-type: none;\n}";
4
4
  const isBrowser = /*#__PURE__*/ (function () {
5
5
  return (
6
6
  Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.281",
3
+ "version": "3.0.0-alpha.282",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -138,5 +138,5 @@
138
138
  "access": "public",
139
139
  "directory": "dist"
140
140
  },
141
- "gitHead": "080fb2c284455fd577e7284b728db0227cdb90a9"
141
+ "gitHead": "13fce8d2ebc3e20a38e487f4b13cb4e8562aa7a7"
142
142
  }
@@ -6702,8 +6702,8 @@
6702
6702
  },
6703
6703
  {
6704
6704
  "kind": "Reference",
6705
- "text": "Vue",
6706
- "canonicalReference": "vue!Vue:interface"
6705
+ "text": "BaseSuggestions_base",
6706
+ "canonicalReference": "@empathyco/x-components!~BaseSuggestions_base"
6707
6707
  },
6708
6708
  {
6709
6709
  "kind": "Content",
@@ -608,8 +608,10 @@ export class BaseSuggestion extends Vue_2 {
608
608
  protected suggestionSelectedEvents: Partial<XEventsTypes>;
609
609
  }
610
610
 
611
+ // Warning: (ae-forgotten-export) The symbol "BaseSuggestions_base" needs to be exported by the entry point index.d.ts
612
+ //
611
613
  // @public
612
- export class BaseSuggestions extends Vue_2 {
614
+ export class BaseSuggestions extends BaseSuggestions_base {
613
615
  protected animation: Vue_2 | string;
614
616
  // @internal
615
617
  protected expandSuggestionFilters(suggestion: Suggestion): Suggestion[];
@@ -1,12 +1,13 @@
1
1
  import Vue from 'vue';
2
2
  import { Suggestion, Facet, Filter } from '@empathyco/x-types';
3
+ declare const BaseSuggestions_base: import("vue-class-component/lib/declarations").VueClass<object & import("vue/types/v3-component-options").ExtractComputedReturns<{}> & Record<never, any> & Partial<Record<"suggestionItemClass", string>> & import("vue").ShallowUnwrapRef<{}>>;
3
4
  /**
4
5
  * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
5
6
  * in the default slot for working.
6
7
  *
7
8
  * @public
8
9
  */
9
- export default class BaseSuggestions extends Vue {
10
+ export default class BaseSuggestions extends BaseSuggestions_base {
10
11
  /**
11
12
  * The list of suggestions to render.
12
13
  *
@@ -87,4 +88,5 @@ export default class BaseSuggestions extends Vue {
87
88
  */
88
89
  protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined;
89
90
  }
91
+ export {};
90
92
  //# sourceMappingURL=base-suggestions.vue?rollup-plugin-vue=script.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"base-suggestions.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/suggestions/base-suggestions.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAoBE,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAG/D;;;;;GAKG;AAEH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,GAAG;IAC9C;;;;OAIG;IAEH,SAAS,CAAC,WAAW,EAAG,UAAU,EAAE,CAAC;IAErC;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;;OAIG;IAEH,SAAS,CAAC,UAAU,EAAG,OAAO,CAAC;IAE/B;;;;;OAKG;IAEH,SAAS,CAAC,mBAAmB,EAAG,OAAO,CAAC;IAExC;;;;;OAKG;IACH,SAAS,KAAK,eAAe,IAAI,MAAM,EAAE,CAMxC;IAED;;;;;;OAMG;IACH,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM;IAM/C;;;;;;OAMG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAI3C;;;;;;OAMG;IACH,SAAS,KAAK,mBAAmB,IAAI,UAAU,EAAE,CAUhD;IAED;;;;;;;OAOG;IACH,SAAS,CAAC,uBAAuB,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,EAAE;IAWvE;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS;CAG1E"}
1
+ {"version":3,"file":"base-suggestions.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/suggestions/base-suggestions.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAqBE,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;;AAI/D;;;;;GAKG;AAEH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAkD;IAC7F;;;;OAIG;IAEH,SAAS,CAAC,WAAW,EAAG,UAAU,EAAE,CAAC;IAErC;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;;OAIG;IAEH,SAAS,CAAC,UAAU,EAAG,OAAO,CAAC;IAE/B;;;;;OAKG;IAEH,SAAS,CAAC,mBAAmB,EAAG,OAAO,CAAC;IAExC;;;;;OAKG;IACH,SAAS,KAAK,eAAe,IAAI,MAAM,EAAE,CAMxC;IAED;;;;;;OAMG;IACH,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM;IAM/C;;;;;;OAMG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAI3C;;;;;;OAMG;IACH,SAAS,KAAK,mBAAmB,IAAI,UAAU,EAAE,CAUhD;IAED;;;;;;;OAOG;IACH,SAAS,CAAC,uBAAuB,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,EAAE;IAWvE;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS;CAG1E"}