@empathyco/x-components 6.0.0-alpha.83 → 6.0.0-alpha.84

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 (7) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/design-system/deprecated-full-theme.css +179 -179
  3. package/js/components/base-teleport.vue.js.map +1 -1
  4. package/js/components/base-teleport.vue2.js +8 -5
  5. package/js/components/base-teleport.vue2.js.map +1 -1
  6. package/package.json +2 -2
  7. package/types/components/base-teleport.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.0.0-alpha.84](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.83...@empathyco/x-components@6.0.0-alpha.84) (2025-05-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **base-teleport:** improve target element observation logic ([4304720](https://github.com/empathyco/x/commit/4304720aaf81202f32555a87d04c078cbfb8f122))
12
+
13
+
14
+
6
15
  ## [6.0.0-alpha.83](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.82...@empathyco/x-components@6.0.0-alpha.83) (2025-05-14)
7
16
 
8
17
 
package/design-system/deprecated-full-theme.css CHANGED
@@ -4433,51 +4433,6 @@
4433
4433
  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4434
4434
  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4435
4435
  }
4436
- :root {
4437
- --x-string-overflow-scroll: auto;
4438
- --x-color-background-scroll-bar: transparent;
4439
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4440
- --x-color-background-scroll-bar-hover: transparent;
4441
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4442
- }
4443
- :root {
4444
- --x-string-overflow-scroll: auto;
4445
- --x-color-background-scroll-bar: transparent;
4446
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4447
- --x-color-background-scroll-bar-hover: transparent;
4448
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4449
- }
4450
-
4451
- .x-scroll {
4452
- overflow-y: var(--x-string-overflow-scroll);
4453
- }
4454
- @media (hover: hover) {
4455
- .x-scroll {
4456
- scrollbar-width: auto;
4457
- scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4458
- }
4459
- .x-scroll::-webkit-scrollbar {
4460
- width: 17px;
4461
- }
4462
- .x-scroll::-webkit-scrollbar-track {
4463
- background: var(--x-color-background-scroll-bar);
4464
- }
4465
- .x-scroll::-webkit-scrollbar-thumb {
4466
- width: 5px;
4467
- border-radius: 15px;
4468
- background: var(--x-color-thumb-scroll-bar);
4469
- background-clip: content-box;
4470
- border: solid 4px rgba(0, 0, 0, 0.00001);
4471
- }
4472
- .x-scroll:hover {
4473
- --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4474
- --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4475
- }
4476
- }
4477
-
4478
- .x-base-scroll {
4479
- overflow-y: var(--x-string-overflow-scroll, auto);
4480
- }
4481
4436
  .x-sliding-panel {
4482
4437
  z-index: 0;
4483
4438
  background-color: var(--x-color-background-sliding-panel);
@@ -4532,6 +4487,51 @@
4532
4487
  opacity: 1;
4533
4488
  pointer-events: all;
4534
4489
  }
4490
+ :root {
4491
+ --x-string-overflow-scroll: auto;
4492
+ --x-color-background-scroll-bar: transparent;
4493
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4494
+ --x-color-background-scroll-bar-hover: transparent;
4495
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4496
+ }
4497
+ :root {
4498
+ --x-string-overflow-scroll: auto;
4499
+ --x-color-background-scroll-bar: transparent;
4500
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4501
+ --x-color-background-scroll-bar-hover: transparent;
4502
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4503
+ }
4504
+
4505
+ .x-scroll {
4506
+ overflow-y: var(--x-string-overflow-scroll);
4507
+ }
4508
+ @media (hover: hover) {
4509
+ .x-scroll {
4510
+ scrollbar-width: auto;
4511
+ scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4512
+ }
4513
+ .x-scroll::-webkit-scrollbar {
4514
+ width: 17px;
4515
+ }
4516
+ .x-scroll::-webkit-scrollbar-track {
4517
+ background: var(--x-color-background-scroll-bar);
4518
+ }
4519
+ .x-scroll::-webkit-scrollbar-thumb {
4520
+ width: 5px;
4521
+ border-radius: 15px;
4522
+ background: var(--x-color-thumb-scroll-bar);
4523
+ background-clip: content-box;
4524
+ border: solid 4px rgba(0, 0, 0, 0.00001);
4525
+ }
4526
+ .x-scroll:hover {
4527
+ --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4528
+ --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4529
+ }
4530
+ }
4531
+
4532
+ .x-base-scroll {
4533
+ overflow-y: var(--x-string-overflow-scroll, auto);
4534
+ }
4535
4535
  /* @deprecated */
4536
4536
  :root {
4537
4537
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4965,6 +4965,10 @@
4965
4965
  --x-number-zoom-scale-picture: 1.1;
4966
4966
  --x-number-zoom-duration-picture: 0.3s;
4967
4967
  }
4968
+ :root {
4969
+ --x-number-zoom-scale-picture: 1.1;
4970
+ --x-number-zoom-duration-picture: 0.3s;
4971
+ }
4968
4972
 
4969
4973
  .x-picture--zoom .x-picture-image {
4970
4974
  transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4975,10 +4979,6 @@
4975
4979
  :root {
4976
4980
  --x-number-aspect-ratio-picture: 1;
4977
4981
  }
4978
- :root {
4979
- --x-number-zoom-scale-picture: 1.1;
4980
- --x-number-zoom-duration-picture: 0.3s;
4981
- }
4982
4982
  :root {
4983
4983
  --x-number-aspect-ratio-picture: 1;
4984
4984
  }
@@ -6593,50 +6593,6 @@
6593
6593
  --x-size-align-list: stretch;
6594
6594
  --x-size-align-list-stretch: stretch;
6595
6595
  }
6596
- :root {
6597
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6598
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6599
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6600
- --x-size-border-radius-bottom-right-input-group-pill: var(
6601
- --x-size-border-radius-input-group-pill
6602
- );
6603
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6604
- }
6605
- :root {
6606
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6607
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6608
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6609
- --x-size-border-radius-bottom-right-input-group-pill: var(
6610
- --x-size-border-radius-input-group-pill
6611
- );
6612
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6613
- }
6614
-
6615
- .x-input-group--pill.x-input-group,
6616
- .x-input-group--pill .x-input-group {
6617
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6618
- --x-size-border-radius-top-left-input-group-default: var(
6619
- --x-size-border-radius-top-left-input-group-pill
6620
- );
6621
- --x-size-border-radius-top-right-input-group-default: var(
6622
- --x-size-border-radius-top-right-input-group-pill
6623
- );
6624
- --x-size-border-radius-bottom-right-input-group-default: var(
6625
- --x-size-border-radius-bottom-right-input-group-pill
6626
- );
6627
- --x-size-border-radius-bottom-left-input-group-default: var(
6628
- --x-size-border-radius-bottom-left-input-group-pill
6629
- );
6630
- }
6631
- :root {
6632
- --x-size-padding-left-input-group-line: 0;
6633
- --x-size-padding-right-input-group-line: 0;
6634
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6635
- --x-size-border-width-top-input-group-line: 0;
6636
- --x-size-border-width-right-input-group-line: 0;
6637
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6638
- --x-size-border-width-left-input-group-line: 0;
6639
- }
6640
6596
  :root {
6641
6597
  --x-string-flow-list: column nowrap;
6642
6598
  --x-size-padding-list: 0;
@@ -6785,6 +6741,97 @@
6785
6741
  .x-list > .x-list__item--12 {
6786
6742
  flex: 12 1 auto;
6787
6743
  }
6744
+ :root {
6745
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6746
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6747
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6748
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6749
+ --x-size-border-radius-input-group-pill
6750
+ );
6751
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6752
+ }
6753
+ :root {
6754
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6755
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6756
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6757
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6758
+ --x-size-border-radius-input-group-pill
6759
+ );
6760
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6761
+ }
6762
+
6763
+ .x-input-group--pill.x-input-group,
6764
+ .x-input-group--pill .x-input-group {
6765
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6766
+ --x-size-border-radius-top-left-input-group-default: var(
6767
+ --x-size-border-radius-top-left-input-group-pill
6768
+ );
6769
+ --x-size-border-radius-top-right-input-group-default: var(
6770
+ --x-size-border-radius-top-right-input-group-pill
6771
+ );
6772
+ --x-size-border-radius-bottom-right-input-group-default: var(
6773
+ --x-size-border-radius-bottom-right-input-group-pill
6774
+ );
6775
+ --x-size-border-radius-bottom-left-input-group-default: var(
6776
+ --x-size-border-radius-bottom-left-input-group-pill
6777
+ );
6778
+ }
6779
+ :root {
6780
+ --x-size-padding-left-input-group-line: 0;
6781
+ --x-size-padding-right-input-group-line: 0;
6782
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6783
+ --x-size-border-width-top-input-group-line: 0;
6784
+ --x-size-border-width-right-input-group-line: 0;
6785
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6786
+ --x-size-border-width-left-input-group-line: 0;
6787
+ }
6788
+ :root {
6789
+ --x-size-padding-left-input-group-line: 0;
6790
+ --x-size-padding-right-input-group-line: 0;
6791
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6792
+ --x-size-border-width-top-input-group-line: 0;
6793
+ --x-size-border-width-right-input-group-line: 0;
6794
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6795
+ --x-size-border-width-left-input-group-line: 0;
6796
+ }
6797
+
6798
+ .x-input-group--line .x-input-group,
6799
+ .x-input-group--line.x-input-group {
6800
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
6801
+ --x-size-border-width-right-input-group-default: var(
6802
+ --x-size-border-width-right-input-group-line
6803
+ );
6804
+ --x-size-border-width-bottom-input-group-default: var(
6805
+ --x-size-border-width-bottom-input-group-line
6806
+ );
6807
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
6808
+ }
6809
+ .x-input-group--line .x-input-group > *:not(.x-input-group__action),
6810
+ .x-input-group--line.x-input-group > *:not(.x-input-group__action) {
6811
+ --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
6812
+ --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
6813
+ }
6814
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6815
+ .x-input-group--line.x-input-group > .x-input-group__action {
6816
+ margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6817
+ }
6818
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6819
+ .x-input-group--line.x-input-group > .x-input-group__action {
6820
+ margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
6821
+ }
6822
+ [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
6823
+ .x-input-group--line.x-input-group > .x-input-group__action {
6824
+ margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6825
+ }
6826
+ [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
6827
+ .x-input-group--line.x-input-group > .x-input-group__action {
6828
+ margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
6829
+ }
6830
+ .x-input-group--line .x-input-group > .x-input-group__action,
6831
+ .x-input-group--line.x-input-group > .x-input-group__action {
6832
+ margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6833
+ margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6834
+ }
6788
6835
  :root {
6789
6836
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6790
6837
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7014,53 +7061,6 @@
7014
7061
  );
7015
7062
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7016
7063
  }
7017
- :root {
7018
- --x-size-padding-left-input-group-line: 0;
7019
- --x-size-padding-right-input-group-line: 0;
7020
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
7021
- --x-size-border-width-top-input-group-line: 0;
7022
- --x-size-border-width-right-input-group-line: 0;
7023
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
7024
- --x-size-border-width-left-input-group-line: 0;
7025
- }
7026
-
7027
- .x-input-group--line .x-input-group,
7028
- .x-input-group--line.x-input-group {
7029
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
7030
- --x-size-border-width-right-input-group-default: var(
7031
- --x-size-border-width-right-input-group-line
7032
- );
7033
- --x-size-border-width-bottom-input-group-default: var(
7034
- --x-size-border-width-bottom-input-group-line
7035
- );
7036
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
7037
- }
7038
- .x-input-group--line .x-input-group > *:not(.x-input-group__action),
7039
- .x-input-group--line.x-input-group > *:not(.x-input-group__action) {
7040
- --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
7041
- --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
7042
- }
7043
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
7044
- .x-input-group--line.x-input-group > .x-input-group__action {
7045
- margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
7046
- }
7047
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
7048
- .x-input-group--line.x-input-group > .x-input-group__action {
7049
- margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
7050
- }
7051
- [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"]
7052
- .x-input-group--line.x-input-group > .x-input-group__action {
7053
- margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
7054
- }
7055
- [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"]
7056
- .x-input-group--line.x-input-group > .x-input-group__action {
7057
- margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
7058
- }
7059
- .x-input-group--line .x-input-group > .x-input-group__action,
7060
- .x-input-group--line.x-input-group > .x-input-group__action {
7061
- margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
7062
- margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
7063
- }
7064
7064
  :root {
7065
7065
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7066
7066
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7345,6 +7345,10 @@
7345
7345
  --x-size-width-icon-m: var(--x-size-base-05);
7346
7346
  --x-size-height-icon-m: var(--x-size-base-05);
7347
7347
  }
7348
+ :root {
7349
+ --x-size-width-icon-m: var(--x-size-base-05);
7350
+ --x-size-height-icon-m: var(--x-size-base-05);
7351
+ }
7348
7352
 
7349
7353
  .x-icon--m {
7350
7354
  --x-size-width-icon-default: var(--x-size-width-icon-m);
@@ -7354,10 +7358,6 @@
7354
7358
  --x-size-width-icon-l: var(--x-size-base-06);
7355
7359
  --x-size-height-icon-l: var(--x-size-base-06);
7356
7360
  }
7357
- :root {
7358
- --x-size-width-icon-m: var(--x-size-base-05);
7359
- --x-size-height-icon-m: var(--x-size-base-05);
7360
- }
7361
7361
  :root {
7362
7362
  --x-size-width-icon-l: var(--x-size-base-06);
7363
7363
  --x-size-height-icon-l: var(--x-size-base-06);
@@ -8423,6 +8423,19 @@
8423
8423
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8424
8424
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8425
8425
  }
8426
+ :root {
8427
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8428
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8429
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8430
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8431
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8432
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8433
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8434
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8435
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8436
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8437
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8438
+ }
8426
8439
 
8427
8440
  .x-dropdown--card {
8428
8441
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8453,19 +8466,6 @@
8453
8466
  --x-size-border-width-left-dropdown-list-card
8454
8467
  );
8455
8468
  }
8456
- :root {
8457
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8458
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8459
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8460
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8461
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8462
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8463
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8464
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8465
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8466
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8467
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8468
- }
8469
8469
  :root {
8470
8470
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8471
8471
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8762,6 +8762,28 @@
8762
8762
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8763
8763
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8764
8764
  }
8765
+ :root {
8766
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8767
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8768
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8769
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8770
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8771
+ }
8772
+
8773
+ .x-button--card.x-button,
8774
+ .x-button--card .x-button {
8775
+ --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
8776
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
8777
+ --x-size-border-radius-top-right-button-default: var(
8778
+ --x-size-border-radius-top-right-button-card
8779
+ );
8780
+ --x-size-border-radius-bottom-right-button-default: var(
8781
+ --x-size-border-radius-bottom-right-button-card
8782
+ );
8783
+ --x-size-border-radius-bottom-left-button-default: var(
8784
+ --x-size-border-radius-bottom-left-button-card
8785
+ );
8786
+ }
8765
8787
  :root {
8766
8788
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8767
8789
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8862,26 +8884,4 @@
8862
8884
  --x-size-border-radius-base-m: var(--x-size-base-06);
8863
8885
  --x-size-border-radius-base-pill: 99999px;
8864
8886
  --x-size-border-width-base: 1px;
8865
- }
8866
- :root {
8867
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8868
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8869
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8870
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8871
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8872
- }
8873
-
8874
- .x-button--card.x-button,
8875
- .x-button--card .x-button {
8876
- --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
8877
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
8878
- --x-size-border-radius-top-right-button-default: var(
8879
- --x-size-border-radius-top-right-button-card
8880
- );
8881
- --x-size-border-radius-bottom-right-button-default: var(
8882
- --x-size-border-radius-bottom-right-button-card
8883
- );
8884
- --x-size-border-radius-bottom-left-button-default: var(
8885
- --x-size-border-radius-bottom-left-button-card
8886
- );
8887
8887
  }
package/js/components/base-teleport.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n watch,\n watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n name: 'BaseTeleport',\n props: {\n /** The element or css selector to which the component will be teleported. */\n target: {\n type: [String, Object] as PropType<string | Element>,\n required: true,\n },\n /**\n * The position relative to the target\n * - `beforebegin`: Before the target element.\n * - `afterbegin`: Inside the target element, before its first child.\n * - `beforeend`: Inside the target element, after its last child.\n * - `afterend`: After the target element.\n * - `onlychild`: Adds it as child and hides all other children of the target element.\n */\n position: {\n type: String as PropType<\n 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n >,\n default: 'onlychild',\n },\n /** If disabled, the slot content will not be teleported */\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n const instance = getCurrentInstance()\n /** Hook where the slot content will be teleported to. */\n const teleportHost = ref<Element>()\n /** The page element where the teleport host will be inserted. */\n const targetElement = ref<Element>()\n let isIsolated = false\n\n // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n if (instance?.appContext.app._container) {\n createHost()\n } else {\n afterAppMount(createHost)\n }\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onUnmounted(() => {\n if (isIsolated && teleportHost.value) {\n ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n }\n })\n\n onBeforeUnmount(() => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n teleportHost.value?.remove()\n })\n\n // Handles target prop changes and init the observers accordingly.\n watch(\n () => props.target,\n newTarget => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n if (target?.isConnected) {\n targetAdded()\n } else {\n targetRemoved()\n }\n },\n { immediate: true },\n )\n\n // Updates the teleport host when props change.\n watchEffect(() => {\n if (!teleportHost.value) {\n return\n }\n if (props.disabled) {\n teleportHost.value.remove()\n return\n }\n teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n if (!targetElement.value) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.value.insertAdjacentElement(position, teleportHost.value)\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n const target =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (target?.isConnected) {\n targetAddedObserver.disconnect()\n targetRemovedObserver.observe(target.parentElement!, { childList: true })\n targetElement.value = target\n }\n }\n\n /** Checks if the target was disconnected from the DOM and updates the observers */\n function targetRemoved() {\n if (!targetElement.value?.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n /** Creates and sets the teleport host element */\n function createHost() {\n teleportHost.value = document.createElement('div')\n isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.value.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n }\n }\n\n function afterAppMount(fn: () => void) {\n onMounted(() => setTimeout(fn, 0))\n }\n\n return { teleportHost }\n },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nconst css = document.createElement('style')\ncss.textContent = ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\ndocument.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n</script>\n"],"names":["_openBlock","_Teleport","teleportHost","_renderSlot","_createCommentVNode"],"mappings":";;;;qBACE,IAEW,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAHb,EAAA,OAAA,IAAA,CAAA,YAAA,IAAAA,SAAA,gBACkDC,QAAcC,EAAAA;AAAAA,IAAe,GAAA,EAAA,CAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA,CAAA,UAAA,IAAA,IAAA,CAAA,YAAA;IAC3E,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AAFjB,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
1
+ {"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n watch,\n watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n name: 'BaseTeleport',\n props: {\n /** The element or css selector to which the component will be teleported. */\n target: {\n type: [String, Object] as PropType<string | Element>,\n required: true,\n },\n /**\n * The position relative to the target\n * - `beforebegin`: Before the target element.\n * - `afterbegin`: Inside the target element, before its first child.\n * - `beforeend`: Inside the target element, after its last child.\n * - `afterend`: After the target element.\n * - `onlychild`: Adds it as child and hides all other children of the target element.\n */\n position: {\n type: String as PropType<\n 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n >,\n default: 'onlychild',\n },\n /** If disabled, the slot content will not be teleported */\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n const instance = getCurrentInstance()\n /** Hook where the slot content will be teleported to. */\n const teleportHost = ref<Element>()\n /** The page element where the teleport host will be inserted. */\n const targetElement = ref<Element>()\n let isIsolated = false\n\n // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n if (instance?.appContext.app._container) {\n createHost()\n } else {\n afterAppMount(createHost)\n }\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onUnmounted(() => {\n if (isIsolated && teleportHost.value) {\n ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n }\n })\n\n onBeforeUnmount(() => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n teleportHost.value?.remove()\n })\n\n // Handles target prop changes and init the observers accordingly.\n watch(\n () => props.target,\n newTarget => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n if (target?.isConnected) {\n targetAdded()\n } else {\n targetRemoved()\n }\n },\n { immediate: true },\n )\n\n // Updates the teleport host when props change.\n watchEffect(() => {\n if (!teleportHost.value) {\n return\n }\n if (props.disabled) {\n teleportHost.value.remove()\n return\n }\n teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n if (!targetElement.value) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.value.insertAdjacentElement(position, teleportHost.value)\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n let element =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (element?.isConnected) {\n targetAddedObserver.disconnect()\n targetElement.value = element\n while (element.parentElement) {\n element = element.parentElement\n targetRemovedObserver.observe(element, { childList: true })\n }\n }\n }\n\n /** Checks if the target was disconnected from the DOM and updates the observers */\n function targetRemoved() {\n if (targetElement.value && !targetElement.value.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n /** Creates and sets the teleport host element */\n function createHost() {\n teleportHost.value = document.createElement('div')\n isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.value.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n }\n }\n\n function afterAppMount(fn: () => void) {\n onMounted(() => setTimeout(fn, 0))\n }\n\n return { teleportHost }\n },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nconst css = document.createElement('style')\ncss.textContent = ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\ndocument.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n</script>\n"],"names":["_openBlock","_Teleport","teleportHost","_renderSlot","_createCommentVNode"],"mappings":";;;;qBACE,IAEW,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAHb,EAAA,OAAA,IAAA,CAAA,YAAA,IAAAA,SAAA,gBACkDC,QAAcC,EAAAA;AAAAA,IAAe,GAAA,EAAA,CAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA,CAAA,UAAA,IAAA,IAAA,CAAA,YAAA;IAC3E,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AAFjB,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
package/js/components/base-teleport.vue2.js CHANGED
@@ -83,16 +83,19 @@ var _sfc_main = defineComponent({
83
83
  });
84
84
  /** Checks if the target element exists in the DOM and updates the observers */
85
85
  function targetAdded() {
86
- const target = typeof props.target === 'string' ? document.querySelector(props.target) : props.target;
87
- if (target?.isConnected) {
86
+ let element = typeof props.target === 'string' ? document.querySelector(props.target) : props.target;
87
+ if (element?.isConnected) {
88
88
  targetAddedObserver.disconnect();
89
- targetRemovedObserver.observe(target.parentElement, { childList: true });
90
- targetElement.value = target;
89
+ targetElement.value = element;
90
+ while (element.parentElement) {
91
+ element = element.parentElement;
92
+ targetRemovedObserver.observe(element, { childList: true });
93
+ }
91
94
  }
92
95
  }
93
96
  /** Checks if the target was disconnected from the DOM and updates the observers */
94
97
  function targetRemoved() {
95
- if (!targetElement.value?.isConnected) {
98
+ if (targetElement.value && !targetElement.value.isConnected) {
96
99
  targetRemovedObserver.disconnect();
97
100
  targetAddedObserver.observe(document.body, { childList: true, subtree: true });
98
101
  targetElement.value = undefined;
package/js/components/base-teleport.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n watch,\n watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n name: 'BaseTeleport',\n props: {\n /** The element or css selector to which the component will be teleported. */\n target: {\n type: [String, Object] as PropType<string | Element>,\n required: true,\n },\n /**\n * The position relative to the target\n * - `beforebegin`: Before the target element.\n * - `afterbegin`: Inside the target element, before its first child.\n * - `beforeend`: Inside the target element, after its last child.\n * - `afterend`: After the target element.\n * - `onlychild`: Adds it as child and hides all other children of the target element.\n */\n position: {\n type: String as PropType<\n 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n >,\n default: 'onlychild',\n },\n /** If disabled, the slot content will not be teleported */\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n const instance = getCurrentInstance()\n /** Hook where the slot content will be teleported to. */\n const teleportHost = ref<Element>()\n /** The page element where the teleport host will be inserted. */\n const targetElement = ref<Element>()\n let isIsolated = false\n\n // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n if (instance?.appContext.app._container) {\n createHost()\n } else {\n afterAppMount(createHost)\n }\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onUnmounted(() => {\n if (isIsolated && teleportHost.value) {\n ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n }\n })\n\n onBeforeUnmount(() => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n teleportHost.value?.remove()\n })\n\n // Handles target prop changes and init the observers accordingly.\n watch(\n () => props.target,\n newTarget => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n if (target?.isConnected) {\n targetAdded()\n } else {\n targetRemoved()\n }\n },\n { immediate: true },\n )\n\n // Updates the teleport host when props change.\n watchEffect(() => {\n if (!teleportHost.value) {\n return\n }\n if (props.disabled) {\n teleportHost.value.remove()\n return\n }\n teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n if (!targetElement.value) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.value.insertAdjacentElement(position, teleportHost.value)\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n const target =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (target?.isConnected) {\n targetAddedObserver.disconnect()\n targetRemovedObserver.observe(target.parentElement!, { childList: true })\n targetElement.value = target\n }\n }\n\n /** Checks if the target was disconnected from the DOM and updates the observers */\n function targetRemoved() {\n if (!targetElement.value?.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n /** Creates and sets the teleport host element */\n function createHost() {\n teleportHost.value = document.createElement('div')\n isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.value.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n }\n }\n\n function afterAppMount(fn: () => void) {\n onMounted(() => setTimeout(fn, 0))\n }\n\n return { teleportHost }\n },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nconst css = document.createElement('style')\ncss.textContent = ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\ndocument.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n</script>\n"],"names":[],"mappings":";;AAmBA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA+B;AACpD,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;;AAOE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAEL;AACD,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;;AAED,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,QAAO,GAAI,kBAAkB,EAAC,CAAA;;AAEpC,QAAA,MAAM,YAAW,GAAI,GAAG,EAAU,CAAA;;AAElC,QAAA,MAAM,aAAY,GAAI,GAAG,EAAU,CAAA;QACnC,IAAI,UAAW,GAAE,KAAI,CAAA;;AAGrB,QAAA,IAAI,QAAQ,EAAE,UAAU,CAAC,GAAG,CAAC,UAAU,EAAE;AACvC,YAAA,UAAU,EAAC,CAAA;AACX,SAAA;AAAK,aAAA;YACL,aAAa,CAAC,UAAU,CAAA,CAAA;AAC1B,SAAA;AAEA,QAAA,MAAM,mBAAkB,GAAI,IAAI,gBAAgB,CAAC,WAAW,CAAA,CAAA;AAC5D,QAAA,MAAM,qBAAoB,GAAI,IAAI,gBAAgB,CAAC,aAAa,CAAA,CAAA;QAEhE,WAAW,CAAC,MAAM;AAChB,YAAA,IAAI,UAAW,IAAG,YAAY,CAAC,KAAK,EAAE;gBAClC,MAAc,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAA,CAAA;AACxE,aAAA;AACF,SAAC,CAAA,CAAA;QAED,eAAe,CAAC,MAAM;YACpB,mBAAmB,CAAC,UAAU,EAAC,CAAA;YAC/B,qBAAqB,CAAC,UAAU,EAAC,CAAA;AACjC,YAAA,YAAY,CAAC,KAAK,EAAE,MAAM,EAAC,CAAA;AAC7B,SAAC,CAAA,CAAA;;QAGD,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,SAAU,IAAG;YACX,mBAAmB,CAAC,UAAU,EAAC,CAAA;YAC/B,qBAAqB,CAAC,UAAU,EAAC,CAAA;AACjC,YAAA,MAAM,MAAK,GAAI,OAAO,cAAc,WAAW,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAE,GAAE,SAAQ,CAAA;YAC3F,IAAI,MAAM,EAAE,WAAW,EAAE;AACvB,gBAAA,WAAW,EAAC,CAAA;AACZ,aAAA;AAAK,iBAAA;AACL,gBAAA,aAAa,EAAC,CAAA;AAChB,aAAA;AACF,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;;QAGA,WAAW,CAAC,MAAM;AAChB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;gBACvB,OAAK;AACP,aAAA;YACA,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,gBAAA,YAAY,CAAC,KAAK,CAAC,MAAM,EAAC,CAAA;gBAC1B,OAAK;AACP,aAAA;YACA,YAAY,CAAC,KAAK,CAAC,SAAU,GAAE,oCAAoC,KAAK,CAAC,QAAQ,CAAA,CAAC,CAAA;AAElF,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;gBACxB,OAAO,CAAC,IAAI,CAAC,CAAA,8BAAA,EAAiC,KAAK,CAAC,MAAM,CAAc,YAAA,CAAA,CAAA,CAAA;gBACxE,OAAK;AACP,aAAA;AACA,YAAA,MAAM,QAAO,GAAI,KAAK,CAAC,QAAS,KAAI,WAAU,GAAI,WAAY,GAAE,KAAK,CAAC,QAAO,CAAA;YAC7E,aAAa,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,EAAE,YAAY,CAAC,KAAK,CAAA,CAAA;AACxE,SAAC,CAAA,CAAA;;AAGD,QAAA,SAAS,WAAW,GAAA;YAClB,MAAM,MAAO,GACX,OAAO,KAAK,CAAC,MAAO,KAAI,QAAO,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAA,GAAI,KAAK,CAAC,MAAK,CAAA;YACvF,IAAI,MAAM,EAAE,WAAW,EAAE;gBACvB,mBAAmB,CAAC,UAAU,EAAC,CAAA;AAC/B,gBAAA,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,aAAc,EAAE,EAAE,SAAS,EAAE,MAAM,CAAA,CAAA;AACxE,gBAAA,aAAa,CAAC,KAAI,GAAI,MAAK,CAAA;AAC7B,aAAA;SACF;;AAGA,QAAA,SAAS,aAAa,GAAA;AACpB,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,WAAW,EAAE;gBACrC,qBAAqB,CAAC,UAAU,EAAC,CAAA;AACjC,gBAAA,mBAAmB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,CAAA,CAAA;AAC7E,gBAAA,aAAa,CAAC,KAAI,GAAI,SAAQ,CAAA;AAChC,aAAA;SACF;;AAGA,QAAA,SAAS,UAAU,GAAA;YACjB,YAAY,CAAC,QAAQ,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAA,CAAA;YACjD,UAAW,GAAE,QAAQ,EAAE,UAAU,CAAC,GAAG,CAAC,UAAS,YAAa,UAAS,CAAA;AACrE,YAAA,IAAI,UAAU,EAAE;gBACd,YAAY,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAA,CAC/C;gBAAC,MAAc,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAA,CAAA;AACrE,aAAA;SACF;QAEA,SAAS,aAAa,CAAC,EAAc,EAAA;YACnC,SAAS,CAAC,MAAM,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA,CAAA;SACnC;QAEA,OAAO,EAAE,YAAa,EAAA,CAAA;KACvB;AACF,CAAA,CAAA,CAAA;AAED;AACA,MAAM,GAAI,GAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAA,CAAA;AAC1C,GAAG,CAAC,WAAY,GAAE,kFAAiF,CAAA;AACnG,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,GAAG;AAC5B,IAAA,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;;;;"}
1
+ {"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n <slot></slot>\n </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n onMounted,\n onUnmounted,\n ref,\n watch,\n watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n name: 'BaseTeleport',\n props: {\n /** The element or css selector to which the component will be teleported. */\n target: {\n type: [String, Object] as PropType<string | Element>,\n required: true,\n },\n /**\n * The position relative to the target\n * - `beforebegin`: Before the target element.\n * - `afterbegin`: Inside the target element, before its first child.\n * - `beforeend`: Inside the target element, after its last child.\n * - `afterend`: After the target element.\n * - `onlychild`: Adds it as child and hides all other children of the target element.\n */\n position: {\n type: String as PropType<\n 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n >,\n default: 'onlychild',\n },\n /** If disabled, the slot content will not be teleported */\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n const instance = getCurrentInstance()\n /** Hook where the slot content will be teleported to. */\n const teleportHost = ref<Element>()\n /** The page element where the teleport host will be inserted. */\n const targetElement = ref<Element>()\n let isIsolated = false\n\n // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n if (instance?.appContext.app._container) {\n createHost()\n } else {\n afterAppMount(createHost)\n }\n\n const targetAddedObserver = new MutationObserver(targetAdded)\n const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n onUnmounted(() => {\n if (isIsolated && teleportHost.value) {\n ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n }\n })\n\n onBeforeUnmount(() => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n teleportHost.value?.remove()\n })\n\n // Handles target prop changes and init the observers accordingly.\n watch(\n () => props.target,\n newTarget => {\n targetAddedObserver.disconnect()\n targetRemovedObserver.disconnect()\n const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n if (target?.isConnected) {\n targetAdded()\n } else {\n targetRemoved()\n }\n },\n { immediate: true },\n )\n\n // Updates the teleport host when props change.\n watchEffect(() => {\n if (!teleportHost.value) {\n return\n }\n if (props.disabled) {\n teleportHost.value.remove()\n return\n }\n teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n if (!targetElement.value) {\n console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n return\n }\n const position = props.position === 'onlychild' ? 'beforeend' : props.position\n targetElement.value.insertAdjacentElement(position, teleportHost.value)\n })\n\n /** Checks if the target element exists in the DOM and updates the observers */\n function targetAdded() {\n let element =\n typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n if (element?.isConnected) {\n targetAddedObserver.disconnect()\n targetElement.value = element\n while (element.parentElement) {\n element = element.parentElement\n targetRemovedObserver.observe(element, { childList: true })\n }\n }\n }\n\n /** Checks if the target was disconnected from the DOM and updates the observers */\n function targetRemoved() {\n if (targetElement.value && !targetElement.value.isConnected) {\n targetRemovedObserver.disconnect()\n targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n targetElement.value = undefined\n }\n }\n\n /** Creates and sets the teleport host element */\n function createHost() {\n teleportHost.value = document.createElement('div')\n isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n if (isIsolated) {\n teleportHost.value.attachShadow({ mode: 'open' })\n ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n }\n }\n\n function afterAppMount(fn: () => void) {\n onMounted(() => setTimeout(fn, 0))\n }\n\n return { teleportHost }\n },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nconst css = document.createElement('style')\ncss.textContent = ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\ndocument.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n</script>\n"],"names":[],"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.83",
3
+ "version": "6.0.0-alpha.84",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -142,5 +142,5 @@
142
142
  "access": "public",
143
143
  "directory": "dist"
144
144
  },
145
- "gitHead": "c212041511d1553f4dccd93d33c175799c85b96a"
145
+ "gitHead": "c298f7de8b504c699c2b020c2ecc9d11e5eaf442"
146
146
  }
package/types/components/base-teleport.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAe/B,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;;AAtB/D,wBAiIE"}
1
+ {"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAe/B,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;IAnB3D,6EAA6E;;;;;IAK7E;;;;;;;OAOG;;;;;IAOH,2DAA2D;;;;;;;;;AAtB/D,wBAoIE"}