@empathyco/x-components 6.0.0-alpha.47 → 6.0.0-alpha.48

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 (11) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/design-system/deprecated-full-theme.css +234 -234
  3. package/docs/API-reference/components/related-prompts/x-components.related-prompt.md +6 -0
  4. package/docs/API-reference/components/related-prompts/x-components.related-prompts-tag-list.md +6 -5
  5. package/js/x-modules/related-prompts/components/related-prompt.vue.js +2 -1
  6. package/js/x-modules/related-prompts/components/related-prompt.vue.js.map +1 -1
  7. package/js/x-modules/related-prompts/components/related-prompt.vue2.js.map +1 -1
  8. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js +7 -1
  9. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js.map +1 -1
  10. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js.map +1 -1
  11. package/package.json +2 -2
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
+ ## [6.0.0-alpha.48](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.47...@empathyco/x-components@6.0.0-alpha.48) (2025-03-14)
7
+
8
+
9
+ ### Features
10
+
11
+ * add slot for extra content in related prompts component (#1719) ([7247c90](https://github.com/empathyco/x/commit/7247c90b239caa6e928b378a10208ee9ffe09fb5))
12
+
13
+
14
+
6
15
  ## [6.0.0-alpha.47](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.46...@empathyco/x-components@6.0.0-alpha.47) (2025-03-13)
7
16
 
8
17
 
package/design-system/deprecated-full-theme.css CHANGED
@@ -33,6 +33,7 @@
33
33
  -webkit-text-decoration-line: none;
34
34
  text-decoration-line: none;
35
35
  }
36
+
36
37
  .x-static {
37
38
  position: static !important;
38
39
  }
@@ -3316,6 +3317,24 @@
3316
3317
  .x-border-color--transparent {
3317
3318
  border-color: var(--x-color-base-transparent) !important;
3318
3319
  }
3320
+ .x-text--stroke.x-text {
3321
+ --x-string-text-decoration: line-through;
3322
+ }
3323
+ .x-text--stroke.x-title1 {
3324
+ --x-string-text-decoration-title1: line-through;
3325
+ }
3326
+ .x-text--stroke.x-title2 {
3327
+ --x-string-text-decoration-title2: line-through;
3328
+ }
3329
+ .x-text--stroke.x-title3 {
3330
+ --x-string-text-decoration-title3: line-through;
3331
+ }
3332
+ .x-text--stroke.x-small {
3333
+ --x-string-text-decoration-small: line-through;
3334
+ }
3335
+ :root {
3336
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3337
+ }
3319
3338
  .x-background--lead {
3320
3339
  background-color: var(--x-color-base-lead) !important;
3321
3340
  }
@@ -3359,42 +3378,9 @@
3359
3378
  .x-background--transparent {
3360
3379
  background-color: var(--x-color-base-transparent) !important;
3361
3380
  }
3362
- .x-text--stroke.x-text {
3363
- --x-string-text-decoration: line-through;
3364
- }
3365
- .x-text--stroke.x-title1 {
3366
- --x-string-text-decoration-title1: line-through;
3367
- }
3368
- .x-text--stroke.x-title2 {
3369
- --x-string-text-decoration-title2: line-through;
3370
- }
3371
- .x-text--stroke.x-title3 {
3372
- --x-string-text-decoration-title3: line-through;
3373
- }
3374
- .x-text--stroke.x-small {
3375
- --x-string-text-decoration-small: line-through;
3376
- }
3377
- :root {
3378
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3379
- }
3380
3381
  .x-text--secondary {
3381
3382
  --x-color-text-default: var(--x-color-text-secondary);
3382
3383
  }
3383
- .x-text--light.x-text {
3384
- --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3385
- }
3386
- .x-text--light.x-title1 {
3387
- --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3388
- }
3389
- .x-text--light.x-title2 {
3390
- --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3391
- }
3392
- .x-text--light.x-title3 {
3393
- --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3394
- }
3395
- .x-text--light.x-small {
3396
- --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3397
- }
3398
3384
  :root {
3399
3385
  --x-font-family-base: "Montserrat", sans-serif;
3400
3386
  --x-size-font-base-xs: 12px;
@@ -3435,6 +3421,21 @@
3435
3421
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3436
3422
  --x-string-text-decoration-small: none;
3437
3423
  }
3424
+ .x-text--light.x-text {
3425
+ --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3426
+ }
3427
+ .x-text--light.x-title1 {
3428
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3429
+ }
3430
+ .x-text--light.x-title2 {
3431
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3432
+ }
3433
+ .x-text--light.x-title3 {
3434
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3435
+ }
3436
+ .x-text--light.x-small {
3437
+ --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3438
+ }
3438
3439
  :root {
3439
3440
  --x-font-family-base: "Montserrat", sans-serif;
3440
3441
  --x-size-font-base-xs: 12px;
@@ -3537,6 +3538,9 @@
3537
3538
  overflow: hidden;
3538
3539
  white-space: nowrap;
3539
3540
  }
3541
+ :root {
3542
+ --x-color-text-accent: var(--x-color-base-accent);
3543
+ }
3540
3544
  .x-text--bold.x-text {
3541
3545
  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3542
3546
  }
@@ -3552,9 +3556,6 @@
3552
3556
  .x-text--bold.x-small {
3553
3557
  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3554
3558
  }
3555
- :root {
3556
- --x-color-text-accent: var(--x-color-base-accent);
3557
- }
3558
3559
  .x-text--accent {
3559
3560
  --x-color-text-default: var(--x-color-text-accent);
3560
3561
  }
@@ -3671,52 +3672,6 @@
3671
3672
  --x-number-font-weight-tag-default-selected
3672
3673
  );
3673
3674
  }
3674
- :root {
3675
- --x-color-background-tag-default: var(--x-color-base-neutral-100);
3676
- --x-color-border-tag-default: var(--x-color-text-tag-default);
3677
- --x-color-text-tag-default: var(--x-color-text-default);
3678
- --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3679
- --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3680
- --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3681
- --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3682
- --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3683
- --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3684
- --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3685
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3686
- --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3687
- --x-size-border-width-tag-default: var(--x-size-border-width-base);
3688
- --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3689
- --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3690
- --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3691
- --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3692
- --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3693
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3694
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3695
- --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3696
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3697
- --x-size-height-tag-default: var(--x-size-base-07);
3698
- --x-size-padding-right-tag-default: var(--x-size-base-04);
3699
- --x-size-padding-left-tag-default: var(--x-size-base-04);
3700
- --x-size-gap-tag-default: var(--x-size-base-02);
3701
- --x-font-family-tag-default: var(--x-font-family-text);
3702
- --x-size-font-tag-default: var(--x-size-font-text);
3703
- --x-size-line-height-tag-default: var(--x-size-line-height-text);
3704
- --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3705
- --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3706
- --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3707
- --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3708
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3709
- --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3710
- --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3711
- --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3712
- --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3713
- --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3714
- --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3715
- --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3716
- --x-number-font-weight-tag-default-curated-selected: var(
3717
- --x-number-font-weight-tag-default-selected
3718
- );
3719
- }
3720
3675
 
3721
3676
  [dir="ltr"] .x-tag {
3722
3677
  border-left-width: var(--x-size-border-width-left-tag-default);
@@ -3892,6 +3847,52 @@
3892
3847
  );
3893
3848
  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
3894
3849
  }
3850
+ :root {
3851
+ --x-color-background-tag-default: var(--x-color-base-neutral-100);
3852
+ --x-color-border-tag-default: var(--x-color-text-tag-default);
3853
+ --x-color-text-tag-default: var(--x-color-text-default);
3854
+ --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3855
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3856
+ --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3857
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3858
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3859
+ --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3860
+ --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3861
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3862
+ --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3863
+ --x-size-border-width-tag-default: var(--x-size-border-width-base);
3864
+ --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3865
+ --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3866
+ --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3867
+ --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3868
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3869
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3870
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3871
+ --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3872
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3873
+ --x-size-height-tag-default: var(--x-size-base-07);
3874
+ --x-size-padding-right-tag-default: var(--x-size-base-04);
3875
+ --x-size-padding-left-tag-default: var(--x-size-base-04);
3876
+ --x-size-gap-tag-default: var(--x-size-base-02);
3877
+ --x-font-family-tag-default: var(--x-font-family-text);
3878
+ --x-size-font-tag-default: var(--x-size-font-text);
3879
+ --x-size-line-height-tag-default: var(--x-size-line-height-text);
3880
+ --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3881
+ --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3882
+ --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3883
+ --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3884
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3885
+ --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3886
+ --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3887
+ --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3888
+ --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3889
+ --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3890
+ --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3891
+ --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3892
+ --x-number-font-weight-tag-default-curated-selected: var(
3893
+ --x-number-font-weight-tag-default-selected
3894
+ );
3895
+ }
3895
3896
  :root {
3896
3897
  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3897
3898
  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
@@ -4499,14 +4500,6 @@
4499
4500
  --x-size-padding-row-05: var(--x-size-base-05);
4500
4501
  --x-size-padding-row-06: var(--x-size-base-06);
4501
4502
  }
4502
- /* @deprecated */
4503
- :root {
4504
- --x-size-padding-row-02: var(--x-size-base-02);
4505
- --x-size-padding-row-03: var(--x-size-base-03);
4506
- --x-size-padding-row-04: var(--x-size-base-04);
4507
- --x-size-padding-row-05: var(--x-size-base-05);
4508
- --x-size-padding-row-06: var(--x-size-base-06);
4509
- }
4510
4503
 
4511
4504
  /* @deprecated */
4512
4505
  .x-row--padding-02 {
@@ -4528,6 +4521,14 @@
4528
4521
  .x-row--padding-06 {
4529
4522
  --x-size-padding-row: var(--x-size-padding-row-06);
4530
4523
  }
4524
+ /* @deprecated */
4525
+ :root {
4526
+ --x-size-padding-row-02: var(--x-size-base-02);
4527
+ --x-size-padding-row-03: var(--x-size-base-03);
4528
+ --x-size-padding-row-04: var(--x-size-base-04);
4529
+ --x-size-padding-row-05: var(--x-size-base-05);
4530
+ --x-size-padding-row-06: var(--x-size-base-06);
4531
+ }
4531
4532
  :root {
4532
4533
  --x-size-gap-row-01: var(--x-size-base-01);
4533
4534
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -5024,6 +5025,12 @@
5024
5025
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5025
5026
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5026
5027
  }
5028
+ :root {
5029
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5030
+ --x-mix-blend-mode-picture-colored: multiply;
5031
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5032
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5033
+ }
5027
5034
  :root {
5028
5035
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5029
5036
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
@@ -5050,12 +5057,6 @@
5050
5057
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5051
5058
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5052
5059
  }
5053
- :root {
5054
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5055
- --x-mix-blend-mode-picture-colored: multiply;
5056
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5057
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5058
- }
5059
5060
 
5060
5061
  .x-picture--colored.x-picture {
5061
5062
  --x-color-background-picture-default: var(--x-color-background-picture-colored);
@@ -6022,28 +6023,6 @@
6022
6023
  --x-size-gap-list-19: var(--x-size-base-19);
6023
6024
  --x-size-gap-list-20: var(--x-size-base-20);
6024
6025
  }
6025
- :root {
6026
- --x-size-gap-list-01: var(--x-size-base-01);
6027
- --x-size-gap-list-02: var(--x-size-base-02);
6028
- --x-size-gap-list-03: var(--x-size-base-03);
6029
- --x-size-gap-list-04: var(--x-size-base-04);
6030
- --x-size-gap-list-05: var(--x-size-base-05);
6031
- --x-size-gap-list-06: var(--x-size-base-06);
6032
- --x-size-gap-list-07: var(--x-size-base-07);
6033
- --x-size-gap-list-08: var(--x-size-base-08);
6034
- --x-size-gap-list-09: var(--x-size-base-09);
6035
- --x-size-gap-list-10: var(--x-size-base-10);
6036
- --x-size-gap-list-11: var(--x-size-base-11);
6037
- --x-size-gap-list-12: var(--x-size-base-12);
6038
- --x-size-gap-list-13: var(--x-size-base-13);
6039
- --x-size-gap-list-14: var(--x-size-base-14);
6040
- --x-size-gap-list-15: var(--x-size-base-15);
6041
- --x-size-gap-list-16: var(--x-size-base-16);
6042
- --x-size-gap-list-17: var(--x-size-base-17);
6043
- --x-size-gap-list-18: var(--x-size-base-18);
6044
- --x-size-gap-list-19: var(--x-size-base-19);
6045
- --x-size-gap-list-20: var(--x-size-base-20);
6046
- }
6047
6026
 
6048
6027
  .x-list--gap-01.x-list {
6049
6028
  gap: var(--x-size-gap-list-01);
@@ -6544,6 +6523,28 @@
6544
6523
  margin-bottom: var(--x-size-gap-list-20);
6545
6524
  }
6546
6525
  }
6526
+ :root {
6527
+ --x-size-gap-list-01: var(--x-size-base-01);
6528
+ --x-size-gap-list-02: var(--x-size-base-02);
6529
+ --x-size-gap-list-03: var(--x-size-base-03);
6530
+ --x-size-gap-list-04: var(--x-size-base-04);
6531
+ --x-size-gap-list-05: var(--x-size-base-05);
6532
+ --x-size-gap-list-06: var(--x-size-base-06);
6533
+ --x-size-gap-list-07: var(--x-size-base-07);
6534
+ --x-size-gap-list-08: var(--x-size-base-08);
6535
+ --x-size-gap-list-09: var(--x-size-base-09);
6536
+ --x-size-gap-list-10: var(--x-size-base-10);
6537
+ --x-size-gap-list-11: var(--x-size-base-11);
6538
+ --x-size-gap-list-12: var(--x-size-base-12);
6539
+ --x-size-gap-list-13: var(--x-size-base-13);
6540
+ --x-size-gap-list-14: var(--x-size-base-14);
6541
+ --x-size-gap-list-15: var(--x-size-base-15);
6542
+ --x-size-gap-list-16: var(--x-size-base-16);
6543
+ --x-size-gap-list-17: var(--x-size-base-17);
6544
+ --x-size-gap-list-18: var(--x-size-base-18);
6545
+ --x-size-gap-list-19: var(--x-size-base-19);
6546
+ --x-size-gap-list-20: var(--x-size-base-20);
6547
+ }
6547
6548
  :root {
6548
6549
  --x-string-flow-list: column nowrap;
6549
6550
  --x-size-padding-list: 0;
@@ -7291,6 +7292,10 @@
7291
7292
  --x-size-width-icon-s: var(--x-size-base-03);
7292
7293
  --x-size-height-icon-s: var(--x-size-base-03);
7293
7294
  }
7295
+ :root {
7296
+ --x-size-width-icon-m: var(--x-size-base-05);
7297
+ --x-size-height-icon-m: var(--x-size-base-05);
7298
+ }
7294
7299
  :root {
7295
7300
  --x-size-width-icon-s: var(--x-size-base-03);
7296
7301
  --x-size-height-icon-s: var(--x-size-base-03);
@@ -7304,10 +7309,6 @@
7304
7309
  --x-size-width-icon-m: var(--x-size-base-05);
7305
7310
  --x-size-height-icon-m: var(--x-size-base-05);
7306
7311
  }
7307
- :root {
7308
- --x-size-width-icon-m: var(--x-size-base-05);
7309
- --x-size-height-icon-m: var(--x-size-base-05);
7310
- }
7311
7312
 
7312
7313
  .x-icon--m {
7313
7314
  --x-size-width-icon-default: var(--x-size-width-icon-m);
@@ -7335,6 +7336,15 @@
7335
7336
  --x-string-stroke-linejoin-icon-default: mitter;
7336
7337
  --x-size-stroke-width-icon-default: 1px;
7337
7338
  }
7339
+ :root {
7340
+ --x-color-stroke-icon-default: currentColor;
7341
+ --x-color-fill-icon-default: none;
7342
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7343
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7344
+ --x-string-stroke-linecap-icon-default: butt;
7345
+ --x-string-stroke-linejoin-icon-default: mitter;
7346
+ --x-size-stroke-width-icon-default: 1px;
7347
+ }
7338
7348
 
7339
7349
  .x-icon {
7340
7350
  stroke: var(--x-color-stroke-icon-default);
@@ -7361,20 +7371,6 @@
7361
7371
  --x-size-gap-grid: var(--x-size-base-03);
7362
7372
  --x-size-min-width-grid-item: 150px;
7363
7373
  }
7364
- :root {
7365
- --x-color-stroke-icon-default: currentColor;
7366
- --x-color-fill-icon-default: none;
7367
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7368
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7369
- --x-string-stroke-linecap-icon-default: butt;
7370
- --x-string-stroke-linejoin-icon-default: mitter;
7371
- --x-size-stroke-width-icon-default: 1px;
7372
- }
7373
- :root {
7374
- --x-size-padding-grid: 0;
7375
- --x-size-gap-grid: var(--x-size-base-03);
7376
- --x-size-min-width-grid-item: 150px;
7377
- }
7378
7374
 
7379
7375
  .x-grid-list {
7380
7376
  margin: 0;
@@ -7396,6 +7392,11 @@
7396
7392
  .x-grid-list--cols-auto .x-grid-list__item {
7397
7393
  min-width: var(--x-size-min-width-grid-item);
7398
7394
  }
7395
+ :root {
7396
+ --x-size-padding-grid: 0;
7397
+ --x-size-gap-grid: var(--x-size-base-03);
7398
+ --x-size-min-width-grid-item: 150px;
7399
+ }
7399
7400
  .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7400
7401
  .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7401
7402
  .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
@@ -7409,38 +7410,6 @@
7409
7410
  --x-size-padding-bottom-filter-children: 0;
7410
7411
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7411
7412
  }
7412
- :root {
7413
- --x-color-background-filter-default: transparent;
7414
- --x-color-border-filter-default: var(--x-color-background-filter-default);
7415
- --x-color-text-filter-default: var(--x-color-text-default);
7416
- --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7417
- --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7418
- --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7419
- --x-size-border-width-filter-default: var(--x-size-border-width-base);
7420
- --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7421
- --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7422
- --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7423
- --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7424
- --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7425
- --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7426
- --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7427
- --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7428
- --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7429
- --x-size-padding-top-filter-default: var(--x-size-base-03);
7430
- --x-size-padding-right-filter-default: 0;
7431
- --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7432
- --x-size-padding-left-filter-default: 0;
7433
- --x-size-gap-filter-default: var(--x-size-base-03);
7434
- --x-font-family-filter-default: var(--x-font-family-text);
7435
- --x-size-font-filter-default: var(--x-size-font-text);
7436
- --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7437
- --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7438
- --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7439
- --x-number-font-weight-filter-count-default-selected: var(
7440
- --x-number-font-weight-filter-count-default
7441
- );
7442
- --x-size-line-height-filter-default: var(--x-size-line-height-text);
7443
- }
7444
7413
  :root {
7445
7414
  --x-size-margin-filter-children: 0;
7446
7415
  --x-size-padding-top-filter-children: 0;
@@ -7505,6 +7474,38 @@
7505
7474
  );
7506
7475
  --x-size-line-height-filter-default: var(--x-size-line-height-text);
7507
7476
  }
7477
+ :root {
7478
+ --x-color-background-filter-default: transparent;
7479
+ --x-color-border-filter-default: var(--x-color-background-filter-default);
7480
+ --x-color-text-filter-default: var(--x-color-text-default);
7481
+ --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
7482
+ --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
7483
+ --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
7484
+ --x-size-border-width-filter-default: var(--x-size-border-width-base);
7485
+ --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
7486
+ --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
7487
+ --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
7488
+ --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
7489
+ --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
7490
+ --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
7491
+ --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
7492
+ --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
7493
+ --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
7494
+ --x-size-padding-top-filter-default: var(--x-size-base-03);
7495
+ --x-size-padding-right-filter-default: 0;
7496
+ --x-size-padding-bottom-filter-default: var(--x-size-base-03);
7497
+ --x-size-padding-left-filter-default: 0;
7498
+ --x-size-gap-filter-default: var(--x-size-base-03);
7499
+ --x-font-family-filter-default: var(--x-font-family-text);
7500
+ --x-size-font-filter-default: var(--x-size-font-text);
7501
+ --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
7502
+ --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
7503
+ --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
7504
+ --x-number-font-weight-filter-count-default-selected: var(
7505
+ --x-number-font-weight-filter-count-default
7506
+ );
7507
+ --x-size-line-height-filter-default: var(--x-size-line-height-text);
7508
+ }
7508
7509
 
7509
7510
  [dir="ltr"] .x-filter,[dir="ltr"] .x-facet-filter {
7510
7511
  padding-left: var(--x-size-padding-left-filter-default);
@@ -7860,13 +7861,13 @@
7860
7861
  :root {
7861
7862
  --x-size-width-dropdown-xl: 282px;
7862
7863
  }
7864
+ :root {
7865
+ --x-size-width-dropdown-xl: 282px;
7866
+ }
7863
7867
 
7864
7868
  .x-dropdown.x-dropdown--xl {
7865
7869
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
7866
7870
  }
7867
- :root {
7868
- --x-size-width-dropdown-xl: 282px;
7869
- }
7870
7871
  :root {
7871
7872
  --x-size-width-dropdown-s: 74px;
7872
7873
  }
@@ -8426,6 +8427,27 @@
8426
8427
  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8427
8428
  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8428
8429
  }
8430
+ :root {
8431
+ --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8432
+ --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8433
+ --x-color-text-button-tertiary: var(--x-color-text-default);
8434
+ --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8435
+ --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8436
+ --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8437
+ --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8438
+ --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8439
+ }
8440
+
8441
+ .x-button--tertiary.x-button,
8442
+ .x-button--tertiary .x-button {
8443
+ --x-color-background-button-default: var(--x-color-background-button-tertiary);
8444
+ --x-color-border-button-default: var(--x-color-border-button-tertiary);
8445
+ --x-color-text-button-default: var(--x-color-text-button-tertiary);
8446
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
8447
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
8448
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8449
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8450
+ }
8429
8451
  :root {
8430
8452
  --x-color-background-button-secondary: transparent;
8431
8453
  --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8479,7 +8501,6 @@
8479
8501
  --x-size-padding-left-button-default: 0;
8480
8502
  --x-size-padding-right-button-default: 0;
8481
8503
  }
8482
-
8483
8504
  :root {
8484
8505
  --x-color-background-button-primary: var(--x-color-background-button-default);
8485
8506
  --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8518,13 +8539,6 @@
8518
8539
  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8519
8540
  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8520
8541
  }
8521
- :root {
8522
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8523
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8524
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8525
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8526
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8527
- }
8528
8542
 
8529
8543
  .x-button--pill.x-button,
8530
8544
  .x-button--pill .x-button {
@@ -8541,32 +8555,17 @@
8541
8555
  );
8542
8556
  }
8543
8557
  :root {
8544
- --x-color-background-button-ghost: transparent;
8545
- --x-color-border-button-ghost: transparent;
8546
- --x-color-text-button-ghost: var(--x-color-base-lead);
8558
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8559
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8560
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8561
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8562
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8547
8563
  }
8548
8564
  :root {
8549
8565
  --x-color-background-button-ghost: transparent;
8550
8566
  --x-color-border-button-ghost: transparent;
8551
8567
  --x-color-text-button-ghost: var(--x-color-base-lead);
8552
8568
  }
8553
-
8554
- .x-button--ghost.x-button,
8555
- .x-button--ghost .x-button {
8556
- --x-color-background-button-default: var(--x-color-background-button-ghost);
8557
- --x-color-border-button-default: var(--x-color-border-button-ghost);
8558
- --x-color-text-button-default: var(--x-color-text-button-ghost);
8559
- }
8560
-
8561
- .x-button--ghost.x-button--ghost-start.x-button,
8562
- .x-button--ghost.x-button--ghost-start .x-button {
8563
- --x-size-padding-left-button-default: 0;
8564
- }
8565
-
8566
- .x-button--ghost.x-button--ghost-end.x-button,
8567
- .x-button--ghost.x-button--ghost-end .x-button {
8568
- --x-size-padding-right-button-default: 0;
8569
- }
8570
8569
  :root {
8571
8570
  --x-color-background-button-default: var(--x-color-base-lead);
8572
8571
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8676,21 +8675,26 @@
8676
8675
  }
8677
8676
  }
8678
8677
  :root {
8679
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8680
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8681
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8682
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8683
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8678
+ --x-color-background-button-ghost: transparent;
8679
+ --x-color-border-button-ghost: transparent;
8680
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8684
8681
  }
8685
- :root {
8686
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8687
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8688
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8689
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8690
- --x-size-border-width-badge-default: 0;
8691
- --x-size-width-badge-default: 1.5em;
8692
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8693
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8682
+
8683
+ .x-button--ghost.x-button,
8684
+ .x-button--ghost .x-button {
8685
+ --x-color-background-button-default: var(--x-color-background-button-ghost);
8686
+ --x-color-border-button-default: var(--x-color-border-button-ghost);
8687
+ --x-color-text-button-default: var(--x-color-text-button-ghost);
8688
+ }
8689
+
8690
+ .x-button--ghost.x-button--ghost-start.x-button,
8691
+ .x-button--ghost.x-button--ghost-start .x-button {
8692
+ --x-size-padding-left-button-default: 0;
8693
+ }
8694
+
8695
+ .x-button--ghost.x-button--ghost-end.x-button,
8696
+ .x-button--ghost.x-button--ghost-end .x-button {
8697
+ --x-size-padding-right-button-default: 0;
8694
8698
  }
8695
8699
  :root {
8696
8700
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8714,6 +8718,23 @@
8714
8718
  --x-size-border-radius-bottom-left-button-card
8715
8719
  );
8716
8720
  }
8721
+ :root {
8722
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8723
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8724
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8725
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8726
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8727
+ }
8728
+ :root {
8729
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8730
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8731
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8732
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8733
+ --x-size-border-width-badge-default: 0;
8734
+ --x-size-width-badge-default: 1.5em;
8735
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8736
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8737
+ }
8717
8738
  :root {
8718
8739
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8719
8740
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8804,25 +8825,4 @@
8804
8825
  --x-size-border-radius-base-m: var(--x-size-base-06);
8805
8826
  --x-size-border-radius-base-pill: 99999px;
8806
8827
  --x-size-border-width-base: 1px;
8807
- }
8808
- :root {
8809
- --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8810
- --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8811
- --x-color-text-button-tertiary: var(--x-color-text-default);
8812
- --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8813
- --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8814
- --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8815
- --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8816
- --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8817
- }
8818
-
8819
- .x-button--tertiary.x-button,
8820
- .x-button--tertiary .x-button {
8821
- --x-color-background-button-default: var(--x-color-background-button-tertiary);
8822
- --x-color-border-button-default: var(--x-color-border-button-tertiary);
8823
- --x-color-text-button-default: var(--x-color-text-button-tertiary);
8824
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
8825
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
8826
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8827
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8828
8828
  }
package/docs/API-reference/components/related-prompts/x-components.related-prompt.md CHANGED
@@ -14,3 +14,9 @@ This component shows a suggested related prompt.
14
14
  | -------------------------- | ----------- | -------------------------- | ------------------ |
15
15
  | <code>relatedPrompt</code> | | <code>RelatedPrompt</code> | <code></code> |
16
16
  | <code>selected</code> | | <code>boolean</code> | <code>false</code> |
17
+
18
+ ## Slots
19
+
20
+ | Name | Description | Bindings<br />(name - type - description) |
21
+ | ----------------------------------------- | ----------- | ----------------------------------------- |
22
+ | <code>related-prompt-extra-content</code> | | |
package/docs/API-reference/components/related-prompts/x-components.related-prompts-tag-list.md CHANGED
@@ -24,8 +24,9 @@ handle the selection of the related prompt and to trigger the stagger-fade-slide
24
24
 
25
25
  ## Slots
26
26
 
27
- | Name | Description | Bindings<br />(name - type - description) |
28
- | --------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------- |
29
- | <code>sliding-panel-left-button</code> | The button to be displayed on the left side of the sliding panel. | None |
30
- | <code>default</code> | - The slot to render related prompt information. | <br /><br /> |
31
- | <code>sliding-panel-right-button</code> | The button to be displayed on the right side of the sliding panel. | None |
27
+ | Name | Description | Bindings<br />(name - type - description) |
28
+ | ----------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------- |
29
+ | <code>sliding-panel-left-button</code> | The button to be displayed on the left side of the sliding panel. | None |
30
+ | <code>default</code> | - The slot to render related prompt information. | <br /><br /> |
31
+ | <code>related-prompt-extra-content</code> | | |
32
+ | <code>sliding-panel-right-button</code> | The button to be displayed on the right side of the sliding panel. | None |
package/js/x-modules/related-prompts/components/related-prompt.vue.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _sfc_main from './related-prompt.vue2.js';
2
- import { resolveDirective, openBlock, createElementBlock, withDirectives, createElementVNode, createBlock, resolveDynamicComponent } from 'vue';
2
+ import { resolveDirective, openBlock, createElementBlock, renderSlot, withDirectives, createElementVNode, createBlock, resolveDynamicComponent } from 'vue';
3
3
  import './related-prompt.vue3.js';
4
4
  import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
5
5
 
@@ -7,6 +7,7 @@ const _hoisted_1 = { class: "x-related-prompt" };
7
7
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
8
8
  const _directive_typing = resolveDirective("typing");
9
9
  return openBlock(), createElementBlock("button", _hoisted_1, [
10
+ renderSlot(_ctx.$slots, "related-prompt-extra-content", { relatedPrompt: _ctx.relatedPrompt }),
10
11
  withDirectives(createElementVNode(
11
12
  "span",
12
13
  null,
package/js/x-modules/related-prompts/components/related-prompt.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt\">\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon\"\n />\n </button>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { typing } from '../../../directives/typing';\n\n /**\n * This component shows a suggested related prompt.\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing\n },\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n }\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n }\n .x-related-prompt-icon {\n align-self: start;\n }\n</style>\n"],"names":["_resolveDirective","relatedPrompt","_withDirectives","_createElementVNode","selected"],"mappings":";;;;;;;AACE,EAAA,MAAA,iBAAA,GAAAA,gBAAA,CAMS,QANT,CAAA,CAAA;yCAC0BC,QAAc,EAAA,UAAA,EAAA;AAAA,IAAAC,cAAA,CAAAC,kBAAA;;;;;;;AACtC,MAAA,CAAA,iBAAA,EAAA,EAAA,IAAA,EAHJ,mCAIWC,KAAQ,EAAA,EAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;"}
1
+ {"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt\">\n <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon\"\n />\n </button>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { typing } from '../../../directives/typing';\n\n /**\n * This component shows a suggested related prompt.\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing\n },\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n }\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n }\n .x-related-prompt-icon {\n align-self: start;\n }\n</style>\n"],"names":["_resolveDirective","_createElementBlock","_renderSlot","_withDirectives","_createElementVNode","selected"],"mappings":";;;;;;;AACE,EAAA,MAAA,iBAAA,GAAAA,gBAAA,CAOS,QAPT,CAAA,CAAA;oBAEuE,EAAAC,kBAAA,CAAA,QAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,8BAAA,EAA/B,EAAc,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA,IAAAC,cAAA,CAAAC,kBAAA;;;;;;;AACpD,MAAA,CAAA,iBAAA,EAAA,EAAA,IAAA,EAJJ,mCAKWC,KAAQ,EAAA,EAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;"}
package/js/x-modules/related-prompts/components/related-prompt.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt\">\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon\"\n />\n </button>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { typing } from '../../../directives/typing';\n\n /**\n * This component shows a suggested related prompt.\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing\n },\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n }\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n }\n .x-related-prompt-icon {\n align-self: start;\n }\n</style>\n"],"names":[],"mappings":";;;;;AAgBE;;AAEE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,MAAK;AACN,KAAA;AACD,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAO;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}
1
+ {"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt\">\n <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon\"\n />\n </button>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { typing } from '../../../directives/typing';\n\n /**\n * This component shows a suggested related prompt.\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing\n },\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n }\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n }\n .x-related-prompt-icon {\n align-self: start;\n }\n</style>\n"],"names":[],"mappings":";;;;;AAiBE;;AAEE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,MAAK;AACN,KAAA;AACD,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAO;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}
package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js CHANGED
@@ -63,7 +63,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
63
63
  onClick: ($event) => _ctx.onSelect(index),
64
64
  "related-prompt": relatedPrompt,
65
65
  selected: _ctx.isSelected(index)
66
- }, null, 8, ["onClick", "related-prompt", "selected"])
66
+ }, {
67
+ "related-prompt-extra-content": withCtx(() => [
68
+ renderSlot(_ctx.$slots, "related-prompt-extra-content", { relatedPrompt })
69
+ ]),
70
+ _: 2
71
+ /* DYNAMIC */
72
+ }, 1032, ["onClick", "related-prompt", "selected"])
67
73
  ]),
68
74
  _: 2
69
75
  /* DYNAMIC */
package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompts-tag-list.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n <SlidingPanel\n :key=\"x.query.search\"\n :reset-on-content-change=\"false\"\n :button-class=\"buttonClass\"\n :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n :scroll-container-class=\"['x-related-prompts-tag-list-scroll-container', scrollContainerClass]\"\n >\n <template #sliding-panel-left-button>\n <!--\n @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n -->\n <slot name=\"sliding-panel-left-button\" />\n </template>\n <transition-group\n @before-enter=\"onBeforeEnter\"\n @enter=\"onEnter\"\n @leave=\"onLeave\"\n class=\"x-related-prompts-tag-list\"\n :css=\"false\"\n tag=\"ul\"\n appear\n >\n <li\n v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n ref=\"listItems\"\n :key=\"relatedPrompt.suggestionText\"\n class=\"x-related-prompts-tag-list-item\"\n :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n :data-index=\"index\"\n :style=\"isAnimating && { pointerEvents: 'none' }\"\n data-test=\"related-prompts-tag-list-item\"\n >\n <!--\n @slot - The slot to render related prompt information.\n @prop {Object} relatedPrompt - The related prompt object.\n @prop {Function} onSelect - The function to select the related prompt.\n @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n -->\n <slot\n :relatedPrompt=\"relatedPrompt\"\n :onSelect=\"() => onSelect(index)\"\n :isSelected=\"isSelected(index)\"\n >\n <DisplayEmitter\n :payload=\"relatedPrompt.toolingDisplayTagging\"\n :eventMetadata=\"{\n feature: 'related-prompts',\n displayOriginalQuery: x.query.searchBox,\n replaceable: false\n }\"\n >\n <RelatedPrompt\n @click=\"onSelect(index)\"\n :related-prompt=\"relatedPrompt\"\n :selected=\"isSelected(index)\"\n />\n </DisplayEmitter>\n </slot>\n </li>\n </transition-group>\n <template #sliding-panel-right-button>\n <!--\n @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n -->\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { use$x, useState } from '../../../composables';\n import DisplayEmitter from '../../../components/display-emitter.vue';\n import RelatedPrompt from './related-prompt.vue';\n\n /**\n * This component shows the list of `RelatedPrompts` components.\n *\n * If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n *\n * @public\n */\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n props: {\n /**\n * The CSS class for the left and right button of the sliding panel.\n *\n * @public\n */\n buttonClass: String,\n /**\n * The boolean prop to handle the visiblity of sliding pannel buttons.\n *\n * @public\n */\n showButtons: { type: Boolean, default: true },\n /**\n * The CSS class for the wrapper of all the related prompt wrapper elements.\n *\n * @public\n */\n scrollContainerClass: String,\n /**\n * The CSS class for all the related prompt wrapper elements.\n *\n * @public\n */\n tagClass: String,\n /**\n * Array of colors to apply to the related prompts. It will be applied to tag\n * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n *\n * @public\n */\n tagColors: Array as PropType<string[]>,\n /**\n * The duration of the total animation in milliseconds.\n *\n * @public\n */\n animationDurationInMs: {\n type: Number,\n default: 700\n }\n },\n setup(props) {\n const x = use$x();\n const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const clickedListItemIndex = ref<number | null>(null);\n const initialOffsetLefts: Record<number, number> = {};\n const isAnimating = ref(false);\n const listItems = ref<HTMLElement[]>([]);\n\n const sortedListItems = computed<HTMLElement[]>(() =>\n [...listItems.value].sort(\n (a: HTMLElement, b: HTMLElement) =>\n Number.parseInt(b.getAttribute('data-index')!) -\n Number.parseInt(a.getAttribute('data-index')!)\n )\n );\n\n // The duration of a single animation (enter or leave) in milliseconds\n // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n const singleAnimationDurationInMs = computed(\n () =>\n props.animationDurationInMs /\n (clickedListItemIndex.value !== null\n ? relatedPrompts.value.length - 1\n : relatedPrompts.value.length)\n );\n\n const indexRelatedPrompts = computed(() =>\n (relatedPrompts.value as RelatedPromptModel[]).map(\n (relatedPrompt: RelatedPromptModel, index: number) => ({\n ...relatedPrompt,\n index\n })\n )\n );\n\n const visibleRelatedPrompts = computed(() => {\n return selectedPromptIndex.value !== -1\n ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n : indexRelatedPrompts.value;\n });\n\n let timeOutId: number;\n const resetTransitionStyle = () => {\n if (timeOutId) {\n clearTimeout(timeOutId);\n }\n\n isAnimating.value = true;\n timeOutId = +setTimeout(() => {\n isAnimating.value = false;\n clickedListItemIndex.value = null;\n\n sortedListItems.value.forEach(element => {\n element.style.cssText\n .split(';')\n .map(rule => rule.split(':')[0]?.trim())\n .forEach(property => {\n if (property !== 'width') {\n element.style.removeProperty(property);\n }\n });\n });\n }, props.animationDurationInMs);\n };\n\n const onSelect = (selectedIndex: number): void => {\n resetTransitionStyle();\n\n clickedListItemIndex.value = selectedIndex;\n const selected: HTMLElement = sortedListItems.value.find(\n element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n )!;\n\n // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n if (selectedPromptIndex.value === -1) {\n // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n // sorted in descending order by index.\n sortedListItems.value.forEach(element => {\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n initialOffsetLefts[index] = element.offsetLeft;\n element.style.left = `${element.offsetLeft}px`;\n element.style.position = 'absolute';\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n if (index !== selectedIndex) {\n element.style.opacity = '1';\n element.style.transitionDelay = `${\n (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n }ms`;\n }\n });\n\n // Synchronize the transition delay of the selected element with the last\n // element to leave\n selected.style.transitionDelay = `${\n (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n singleAnimationDurationInMs.value\n }ms`;\n\n // Trigger the animation (selecting) for the selected element\n requestAnimationFrame(() => {\n const maxWidth = getComputedStyle(selected).maxWidth;\n\n selected.style.left = '0px';\n selected.style.setProperty(\n 'width',\n `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n 'important'\n );\n });\n } else {\n // Prepare the selected element for the deselecting animation\n selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n selected.style.left = '0px';\n selected.style.position = 'absolute';\n\n // Trigger the animation (deselecting) for the selected element\n selected.style.removeProperty('width');\n requestAnimationFrame(() => {\n selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n });\n }\n\n x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n relatedPrompt: relatedPrompts.value[selectedIndex],\n selectedPrompt: selectedPromptIndex.value\n });\n };\n\n const onBeforeEnter = (el: Element) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Prepare the element for the enter animation\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n element.style.transitionDelay = `${\n (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n ? index - 1\n : index) * singleAnimationDurationInMs.value\n }ms`;\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n };\n\n const onEnter = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Also part of the preparation for the enter animation, but it needs to be done\n // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n // trigger enter animation\n requestAnimationFrame(() => {\n element.style.opacity = '1';\n element.style.position = 'absolute';\n element.style.transform = 'translateY(0)';\n });\n\n done();\n };\n\n const onLeave = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n\n // trigger leave animation\n requestAnimationFrame(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n });\n\n // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n setTimeout(done, props.animationDurationInMs);\n };\n\n const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n // Changing the query will trigger the appear animation, so we need to reset the\n // style after it finishes\n watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n return {\n isSelected,\n onSelect,\n onBeforeEnter,\n onEnter,\n onLeave,\n selectedPromptIndex,\n visibleRelatedPrompts,\n listItems,\n isAnimating,\n x\n };\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompts-tag-list-scroll-container {\n height: 100%;\n position: relative;\n }\n .x-related-prompts-tag-list {\n display: flex;\n gap: 16px;\n min-width: 100%;\n }\n .x-related-prompts-tag-list-item {\n height: 100%;\n }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createBlock","buttonClass","showButtons","_renderSlot","_withCtx","onBeforeEnter","onEnter","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","isAnimating","_normalizeStyle","onSelect","_createVNode","isSelected"],"mappings":"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"}
1
+ {"version":3,"file":"related-prompts-tag-list.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n <SlidingPanel\n :key=\"x.query.search\"\n :reset-on-content-change=\"false\"\n :button-class=\"buttonClass\"\n :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n :scroll-container-class=\"['x-related-prompts-tag-list-scroll-container', scrollContainerClass]\"\n >\n <template #sliding-panel-left-button>\n <!--\n @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n -->\n <slot name=\"sliding-panel-left-button\" />\n </template>\n <transition-group\n @before-enter=\"onBeforeEnter\"\n @enter=\"onEnter\"\n @leave=\"onLeave\"\n class=\"x-related-prompts-tag-list\"\n :css=\"false\"\n tag=\"ul\"\n appear\n >\n <li\n v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n ref=\"listItems\"\n :key=\"relatedPrompt.suggestionText\"\n class=\"x-related-prompts-tag-list-item\"\n :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n :data-index=\"index\"\n :style=\"isAnimating && { pointerEvents: 'none' }\"\n data-test=\"related-prompts-tag-list-item\"\n >\n <!--\n @slot - The slot to render related prompt information.\n @prop {Object} relatedPrompt - The related prompt object.\n @prop {Function} onSelect - The function to select the related prompt.\n @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n -->\n <slot\n :relatedPrompt=\"relatedPrompt\"\n :onSelect=\"() => onSelect(index)\"\n :isSelected=\"isSelected(index)\"\n >\n <DisplayEmitter\n :payload=\"relatedPrompt.toolingDisplayTagging\"\n :eventMetadata=\"{\n feature: 'related-prompts',\n displayOriginalQuery: x.query.searchBox,\n replaceable: false\n }\"\n >\n <RelatedPrompt\n @click=\"onSelect(index)\"\n :related-prompt=\"relatedPrompt\"\n :selected=\"isSelected(index)\"\n >\n <template #related-prompt-extra-content>\n <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n </template>\n </RelatedPrompt>\n </DisplayEmitter>\n </slot>\n </li>\n </transition-group>\n <template #sliding-panel-right-button>\n <!--\n @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n -->\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { use$x, useState } from '../../../composables';\n import DisplayEmitter from '../../../components/display-emitter.vue';\n import RelatedPrompt from './related-prompt.vue';\n\n /**\n * This component shows the list of `RelatedPrompts` components.\n *\n * If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n *\n * @public\n */\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n props: {\n /**\n * The CSS class for the left and right button of the sliding panel.\n *\n * @public\n */\n buttonClass: String,\n /**\n * The boolean prop to handle the visiblity of sliding pannel buttons.\n *\n * @public\n */\n showButtons: { type: Boolean, default: true },\n /**\n * The CSS class for the wrapper of all the related prompt wrapper elements.\n *\n * @public\n */\n scrollContainerClass: String,\n /**\n * The CSS class for all the related prompt wrapper elements.\n *\n * @public\n */\n tagClass: String,\n /**\n * Array of colors to apply to the related prompts. It will be applied to tag\n * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n *\n * @public\n */\n tagColors: Array as PropType<string[]>,\n /**\n * The duration of the total animation in milliseconds.\n *\n * @public\n */\n animationDurationInMs: {\n type: Number,\n default: 700\n }\n },\n setup(props) {\n const x = use$x();\n const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const clickedListItemIndex = ref<number | null>(null);\n const initialOffsetLefts: Record<number, number> = {};\n const isAnimating = ref(false);\n const listItems = ref<HTMLElement[]>([]);\n\n const sortedListItems = computed<HTMLElement[]>(() =>\n [...listItems.value].sort(\n (a: HTMLElement, b: HTMLElement) =>\n Number.parseInt(b.getAttribute('data-index')!) -\n Number.parseInt(a.getAttribute('data-index')!)\n )\n );\n\n // The duration of a single animation (enter or leave) in milliseconds\n // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n const singleAnimationDurationInMs = computed(\n () =>\n props.animationDurationInMs /\n (clickedListItemIndex.value !== null\n ? relatedPrompts.value.length - 1\n : relatedPrompts.value.length)\n );\n\n const indexRelatedPrompts = computed(() =>\n (relatedPrompts.value as RelatedPromptModel[]).map(\n (relatedPrompt: RelatedPromptModel, index: number) => ({\n ...relatedPrompt,\n index\n })\n )\n );\n\n const visibleRelatedPrompts = computed(() => {\n return selectedPromptIndex.value !== -1\n ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n : indexRelatedPrompts.value;\n });\n\n let timeOutId: number;\n const resetTransitionStyle = () => {\n if (timeOutId) {\n clearTimeout(timeOutId);\n }\n\n isAnimating.value = true;\n timeOutId = +setTimeout(() => {\n isAnimating.value = false;\n clickedListItemIndex.value = null;\n\n sortedListItems.value.forEach(element => {\n element.style.cssText\n .split(';')\n .map(rule => rule.split(':')[0]?.trim())\n .forEach(property => {\n if (property !== 'width') {\n element.style.removeProperty(property);\n }\n });\n });\n }, props.animationDurationInMs);\n };\n\n const onSelect = (selectedIndex: number): void => {\n resetTransitionStyle();\n\n clickedListItemIndex.value = selectedIndex;\n const selected: HTMLElement = sortedListItems.value.find(\n element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n )!;\n\n // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n if (selectedPromptIndex.value === -1) {\n // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n // sorted in descending order by index.\n sortedListItems.value.forEach(element => {\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n initialOffsetLefts[index] = element.offsetLeft;\n element.style.left = `${element.offsetLeft}px`;\n element.style.position = 'absolute';\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n if (index !== selectedIndex) {\n element.style.opacity = '1';\n element.style.transitionDelay = `${\n (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n }ms`;\n }\n });\n\n // Synchronize the transition delay of the selected element with the last\n // element to leave\n selected.style.transitionDelay = `${\n (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n singleAnimationDurationInMs.value\n }ms`;\n\n // Trigger the animation (selecting) for the selected element\n requestAnimationFrame(() => {\n const maxWidth = getComputedStyle(selected).maxWidth;\n\n selected.style.left = '0px';\n selected.style.setProperty(\n 'width',\n `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n 'important'\n );\n });\n } else {\n // Prepare the selected element for the deselecting animation\n selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n selected.style.left = '0px';\n selected.style.position = 'absolute';\n\n // Trigger the animation (deselecting) for the selected element\n selected.style.removeProperty('width');\n requestAnimationFrame(() => {\n selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n });\n }\n\n x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n relatedPrompt: relatedPrompts.value[selectedIndex],\n selectedPrompt: selectedPromptIndex.value\n });\n };\n\n const onBeforeEnter = (el: Element) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Prepare the element for the enter animation\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n element.style.transitionDelay = `${\n (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n ? index - 1\n : index) * singleAnimationDurationInMs.value\n }ms`;\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n };\n\n const onEnter = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Also part of the preparation for the enter animation, but it needs to be done\n // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n // trigger enter animation\n requestAnimationFrame(() => {\n element.style.opacity = '1';\n element.style.position = 'absolute';\n element.style.transform = 'translateY(0)';\n });\n\n done();\n };\n\n const onLeave = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n\n // trigger leave animation\n requestAnimationFrame(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n });\n\n // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n setTimeout(done, props.animationDurationInMs);\n };\n\n const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n // Changing the query will trigger the appear animation, so we need to reset the\n // style after it finishes\n watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n return {\n isSelected,\n onSelect,\n onBeforeEnter,\n onEnter,\n onLeave,\n selectedPromptIndex,\n visibleRelatedPrompts,\n listItems,\n isAnimating,\n x\n };\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompts-tag-list-scroll-container {\n height: 100%;\n position: relative;\n }\n .x-related-prompts-tag-list {\n display: flex;\n gap: 16px;\n min-width: 100%;\n }\n .x-related-prompts-tag-list-item {\n height: 100%;\n }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createBlock","buttonClass","showButtons","_renderSlot","_withCtx","onBeforeEnter","onEnter","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","isAnimating","_normalizeStyle","onSelect","_createVNode","isSelected"],"mappings":"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"}
package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompts-tag-list.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n <SlidingPanel\n :key=\"x.query.search\"\n :reset-on-content-change=\"false\"\n :button-class=\"buttonClass\"\n :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n :scroll-container-class=\"['x-related-prompts-tag-list-scroll-container', scrollContainerClass]\"\n >\n <template #sliding-panel-left-button>\n <!--\n @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n -->\n <slot name=\"sliding-panel-left-button\" />\n </template>\n <transition-group\n @before-enter=\"onBeforeEnter\"\n @enter=\"onEnter\"\n @leave=\"onLeave\"\n class=\"x-related-prompts-tag-list\"\n :css=\"false\"\n tag=\"ul\"\n appear\n >\n <li\n v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n ref=\"listItems\"\n :key=\"relatedPrompt.suggestionText\"\n class=\"x-related-prompts-tag-list-item\"\n :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n :data-index=\"index\"\n :style=\"isAnimating && { pointerEvents: 'none' }\"\n data-test=\"related-prompts-tag-list-item\"\n >\n <!--\n @slot - The slot to render related prompt information.\n @prop {Object} relatedPrompt - The related prompt object.\n @prop {Function} onSelect - The function to select the related prompt.\n @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n -->\n <slot\n :relatedPrompt=\"relatedPrompt\"\n :onSelect=\"() => onSelect(index)\"\n :isSelected=\"isSelected(index)\"\n >\n <DisplayEmitter\n :payload=\"relatedPrompt.toolingDisplayTagging\"\n :eventMetadata=\"{\n feature: 'related-prompts',\n displayOriginalQuery: x.query.searchBox,\n replaceable: false\n }\"\n >\n <RelatedPrompt\n @click=\"onSelect(index)\"\n :related-prompt=\"relatedPrompt\"\n :selected=\"isSelected(index)\"\n />\n </DisplayEmitter>\n </slot>\n </li>\n </transition-group>\n <template #sliding-panel-right-button>\n <!--\n @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n -->\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { use$x, useState } from '../../../composables';\n import DisplayEmitter from '../../../components/display-emitter.vue';\n import RelatedPrompt from './related-prompt.vue';\n\n /**\n * This component shows the list of `RelatedPrompts` components.\n *\n * If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n *\n * @public\n */\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n props: {\n /**\n * The CSS class for the left and right button of the sliding panel.\n *\n * @public\n */\n buttonClass: String,\n /**\n * The boolean prop to handle the visiblity of sliding pannel buttons.\n *\n * @public\n */\n showButtons: { type: Boolean, default: true },\n /**\n * The CSS class for the wrapper of all the related prompt wrapper elements.\n *\n * @public\n */\n scrollContainerClass: String,\n /**\n * The CSS class for all the related prompt wrapper elements.\n *\n * @public\n */\n tagClass: String,\n /**\n * Array of colors to apply to the related prompts. It will be applied to tag\n * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n *\n * @public\n */\n tagColors: Array as PropType<string[]>,\n /**\n * The duration of the total animation in milliseconds.\n *\n * @public\n */\n animationDurationInMs: {\n type: Number,\n default: 700\n }\n },\n setup(props) {\n const x = use$x();\n const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const clickedListItemIndex = ref<number | null>(null);\n const initialOffsetLefts: Record<number, number> = {};\n const isAnimating = ref(false);\n const listItems = ref<HTMLElement[]>([]);\n\n const sortedListItems = computed<HTMLElement[]>(() =>\n [...listItems.value].sort(\n (a: HTMLElement, b: HTMLElement) =>\n Number.parseInt(b.getAttribute('data-index')!) -\n Number.parseInt(a.getAttribute('data-index')!)\n )\n );\n\n // The duration of a single animation (enter or leave) in milliseconds\n // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n const singleAnimationDurationInMs = computed(\n () =>\n props.animationDurationInMs /\n (clickedListItemIndex.value !== null\n ? relatedPrompts.value.length - 1\n : relatedPrompts.value.length)\n );\n\n const indexRelatedPrompts = computed(() =>\n (relatedPrompts.value as RelatedPromptModel[]).map(\n (relatedPrompt: RelatedPromptModel, index: number) => ({\n ...relatedPrompt,\n index\n })\n )\n );\n\n const visibleRelatedPrompts = computed(() => {\n return selectedPromptIndex.value !== -1\n ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n : indexRelatedPrompts.value;\n });\n\n let timeOutId: number;\n const resetTransitionStyle = () => {\n if (timeOutId) {\n clearTimeout(timeOutId);\n }\n\n isAnimating.value = true;\n timeOutId = +setTimeout(() => {\n isAnimating.value = false;\n clickedListItemIndex.value = null;\n\n sortedListItems.value.forEach(element => {\n element.style.cssText\n .split(';')\n .map(rule => rule.split(':')[0]?.trim())\n .forEach(property => {\n if (property !== 'width') {\n element.style.removeProperty(property);\n }\n });\n });\n }, props.animationDurationInMs);\n };\n\n const onSelect = (selectedIndex: number): void => {\n resetTransitionStyle();\n\n clickedListItemIndex.value = selectedIndex;\n const selected: HTMLElement = sortedListItems.value.find(\n element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n )!;\n\n // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n if (selectedPromptIndex.value === -1) {\n // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n // sorted in descending order by index.\n sortedListItems.value.forEach(element => {\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n initialOffsetLefts[index] = element.offsetLeft;\n element.style.left = `${element.offsetLeft}px`;\n element.style.position = 'absolute';\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n if (index !== selectedIndex) {\n element.style.opacity = '1';\n element.style.transitionDelay = `${\n (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n }ms`;\n }\n });\n\n // Synchronize the transition delay of the selected element with the last\n // element to leave\n selected.style.transitionDelay = `${\n (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n singleAnimationDurationInMs.value\n }ms`;\n\n // Trigger the animation (selecting) for the selected element\n requestAnimationFrame(() => {\n const maxWidth = getComputedStyle(selected).maxWidth;\n\n selected.style.left = '0px';\n selected.style.setProperty(\n 'width',\n `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n 'important'\n );\n });\n } else {\n // Prepare the selected element for the deselecting animation\n selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n selected.style.left = '0px';\n selected.style.position = 'absolute';\n\n // Trigger the animation (deselecting) for the selected element\n selected.style.removeProperty('width');\n requestAnimationFrame(() => {\n selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n });\n }\n\n x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n relatedPrompt: relatedPrompts.value[selectedIndex],\n selectedPrompt: selectedPromptIndex.value\n });\n };\n\n const onBeforeEnter = (el: Element) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Prepare the element for the enter animation\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n element.style.transitionDelay = `${\n (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n ? index - 1\n : index) * singleAnimationDurationInMs.value\n }ms`;\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n };\n\n const onEnter = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Also part of the preparation for the enter animation, but it needs to be done\n // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n // trigger enter animation\n requestAnimationFrame(() => {\n element.style.opacity = '1';\n element.style.position = 'absolute';\n element.style.transform = 'translateY(0)';\n });\n\n done();\n };\n\n const onLeave = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n\n // trigger leave animation\n requestAnimationFrame(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n });\n\n // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n setTimeout(done, props.animationDurationInMs);\n };\n\n const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n // Changing the query will trigger the appear animation, so we need to reset the\n // style after it finishes\n watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n return {\n isSelected,\n onSelect,\n onBeforeEnter,\n onEnter,\n onLeave,\n selectedPromptIndex,\n visibleRelatedPrompts,\n listItems,\n isAnimating,\n x\n };\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompts-tag-list-scroll-container {\n height: 100%;\n position: relative;\n }\n .x-related-prompts-tag-list {\n display: flex;\n gap: 16px;\n min-width: 100%;\n }\n .x-related-prompts-tag-list-item {\n height: 100%;\n }\n</style>\n"],"names":["DisplayEmitter"],"mappings":"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"}
1
+ {"version":3,"file":"related-prompts-tag-list.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n <SlidingPanel\n :key=\"x.query.search\"\n :reset-on-content-change=\"false\"\n :button-class=\"buttonClass\"\n :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n :scroll-container-class=\"['x-related-prompts-tag-list-scroll-container', scrollContainerClass]\"\n >\n <template #sliding-panel-left-button>\n <!--\n @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n -->\n <slot name=\"sliding-panel-left-button\" />\n </template>\n <transition-group\n @before-enter=\"onBeforeEnter\"\n @enter=\"onEnter\"\n @leave=\"onLeave\"\n class=\"x-related-prompts-tag-list\"\n :css=\"false\"\n tag=\"ul\"\n appear\n >\n <li\n v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n ref=\"listItems\"\n :key=\"relatedPrompt.suggestionText\"\n class=\"x-related-prompts-tag-list-item\"\n :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n :data-index=\"index\"\n :style=\"isAnimating && { pointerEvents: 'none' }\"\n data-test=\"related-prompts-tag-list-item\"\n >\n <!--\n @slot - The slot to render related prompt information.\n @prop {Object} relatedPrompt - The related prompt object.\n @prop {Function} onSelect - The function to select the related prompt.\n @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n -->\n <slot\n :relatedPrompt=\"relatedPrompt\"\n :onSelect=\"() => onSelect(index)\"\n :isSelected=\"isSelected(index)\"\n >\n <DisplayEmitter\n :payload=\"relatedPrompt.toolingDisplayTagging\"\n :eventMetadata=\"{\n feature: 'related-prompts',\n displayOriginalQuery: x.query.searchBox,\n replaceable: false\n }\"\n >\n <RelatedPrompt\n @click=\"onSelect(index)\"\n :related-prompt=\"relatedPrompt\"\n :selected=\"isSelected(index)\"\n >\n <template #related-prompt-extra-content>\n <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n </template>\n </RelatedPrompt>\n </DisplayEmitter>\n </slot>\n </li>\n </transition-group>\n <template #sliding-panel-right-button>\n <!--\n @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n -->\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { use$x, useState } from '../../../composables';\n import DisplayEmitter from '../../../components/display-emitter.vue';\n import RelatedPrompt from './related-prompt.vue';\n\n /**\n * This component shows the list of `RelatedPrompts` components.\n *\n * If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n *\n * @public\n */\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n props: {\n /**\n * The CSS class for the left and right button of the sliding panel.\n *\n * @public\n */\n buttonClass: String,\n /**\n * The boolean prop to handle the visiblity of sliding pannel buttons.\n *\n * @public\n */\n showButtons: { type: Boolean, default: true },\n /**\n * The CSS class for the wrapper of all the related prompt wrapper elements.\n *\n * @public\n */\n scrollContainerClass: String,\n /**\n * The CSS class for all the related prompt wrapper elements.\n *\n * @public\n */\n tagClass: String,\n /**\n * Array of colors to apply to the related prompts. It will be applied to tag\n * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n *\n * @public\n */\n tagColors: Array as PropType<string[]>,\n /**\n * The duration of the total animation in milliseconds.\n *\n * @public\n */\n animationDurationInMs: {\n type: Number,\n default: 700\n }\n },\n setup(props) {\n const x = use$x();\n const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const clickedListItemIndex = ref<number | null>(null);\n const initialOffsetLefts: Record<number, number> = {};\n const isAnimating = ref(false);\n const listItems = ref<HTMLElement[]>([]);\n\n const sortedListItems = computed<HTMLElement[]>(() =>\n [...listItems.value].sort(\n (a: HTMLElement, b: HTMLElement) =>\n Number.parseInt(b.getAttribute('data-index')!) -\n Number.parseInt(a.getAttribute('data-index')!)\n )\n );\n\n // The duration of a single animation (enter or leave) in milliseconds\n // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n const singleAnimationDurationInMs = computed(\n () =>\n props.animationDurationInMs /\n (clickedListItemIndex.value !== null\n ? relatedPrompts.value.length - 1\n : relatedPrompts.value.length)\n );\n\n const indexRelatedPrompts = computed(() =>\n (relatedPrompts.value as RelatedPromptModel[]).map(\n (relatedPrompt: RelatedPromptModel, index: number) => ({\n ...relatedPrompt,\n index\n })\n )\n );\n\n const visibleRelatedPrompts = computed(() => {\n return selectedPromptIndex.value !== -1\n ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n : indexRelatedPrompts.value;\n });\n\n let timeOutId: number;\n const resetTransitionStyle = () => {\n if (timeOutId) {\n clearTimeout(timeOutId);\n }\n\n isAnimating.value = true;\n timeOutId = +setTimeout(() => {\n isAnimating.value = false;\n clickedListItemIndex.value = null;\n\n sortedListItems.value.forEach(element => {\n element.style.cssText\n .split(';')\n .map(rule => rule.split(':')[0]?.trim())\n .forEach(property => {\n if (property !== 'width') {\n element.style.removeProperty(property);\n }\n });\n });\n }, props.animationDurationInMs);\n };\n\n const onSelect = (selectedIndex: number): void => {\n resetTransitionStyle();\n\n clickedListItemIndex.value = selectedIndex;\n const selected: HTMLElement = sortedListItems.value.find(\n element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n )!;\n\n // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n if (selectedPromptIndex.value === -1) {\n // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n // sorted in descending order by index.\n sortedListItems.value.forEach(element => {\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n initialOffsetLefts[index] = element.offsetLeft;\n element.style.left = `${element.offsetLeft}px`;\n element.style.position = 'absolute';\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n if (index !== selectedIndex) {\n element.style.opacity = '1';\n element.style.transitionDelay = `${\n (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n }ms`;\n }\n });\n\n // Synchronize the transition delay of the selected element with the last\n // element to leave\n selected.style.transitionDelay = `${\n (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n singleAnimationDurationInMs.value\n }ms`;\n\n // Trigger the animation (selecting) for the selected element\n requestAnimationFrame(() => {\n const maxWidth = getComputedStyle(selected).maxWidth;\n\n selected.style.left = '0px';\n selected.style.setProperty(\n 'width',\n `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n 'important'\n );\n });\n } else {\n // Prepare the selected element for the deselecting animation\n selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n selected.style.left = '0px';\n selected.style.position = 'absolute';\n\n // Trigger the animation (deselecting) for the selected element\n selected.style.removeProperty('width');\n requestAnimationFrame(() => {\n selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n });\n }\n\n x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n relatedPrompt: relatedPrompts.value[selectedIndex],\n selectedPrompt: selectedPromptIndex.value\n });\n };\n\n const onBeforeEnter = (el: Element) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Prepare the element for the enter animation\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n element.style.transitionDelay = `${\n (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n ? index - 1\n : index) * singleAnimationDurationInMs.value\n }ms`;\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n };\n\n const onEnter = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Also part of the preparation for the enter animation, but it needs to be done\n // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n // trigger enter animation\n requestAnimationFrame(() => {\n element.style.opacity = '1';\n element.style.position = 'absolute';\n element.style.transform = 'translateY(0)';\n });\n\n done();\n };\n\n const onLeave = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n\n // trigger leave animation\n requestAnimationFrame(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n });\n\n // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n setTimeout(done, props.animationDurationInMs);\n };\n\n const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n // Changing the query will trigger the appear animation, so we need to reset the\n // style after it finishes\n watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n return {\n isSelected,\n onSelect,\n onBeforeEnter,\n onEnter,\n onLeave,\n selectedPromptIndex,\n visibleRelatedPrompts,\n listItems,\n isAnimating,\n x\n };\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompts-tag-list-scroll-container {\n height: 100%;\n position: relative;\n }\n .x-related-prompts-tag-list {\n display: flex;\n gap: 16px;\n min-width: 100%;\n }\n .x-related-prompts-tag-list-item {\n height: 100%;\n }\n</style>\n"],"names":["DisplayEmitter"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.47",
3
+ "version": "6.0.0-alpha.48",
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": "24f068a6b2da6ca75640d28c0ca45976537a5241"
141
+ "gitHead": "1ff54c9cb106325eff36fc4ca7a51a8a47303d65"
142
142
  }