@empathyco/x-components 6.0.0-alpha.85 → 6.0.0-alpha.86

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 +95 -94
  3. package/js/components/base-teleport.vue.js.map +1 -1
  4. package/js/components/base-teleport.vue2.js +11 -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.86](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.85...@empathyco/x-components@6.0.0-alpha.86) (2025-05-19)
7
+
8
+
9
+ ### Features
10
+
11
+ * **base-teleport:** support SSR ensuring DOM existence ([5ad6f28](https://github.com/empathyco/x/commit/5ad6f28c46fea6e6e665796cf7ddb722285746ce))
12
+
13
+
14
+
6
15
  ## [6.0.0-alpha.85](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.84...@empathyco/x-components@6.0.0-alpha.85) (2025-05-19)
7
16
 
8
17
  **Note:** Version bump only for package @empathyco/x-components
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,3 +1,5 @@
1
+
2
+
1
3
  .x-uppercase {
2
4
  text-transform: uppercase;
3
5
  }
@@ -13,7 +15,6 @@
13
15
  .x-normal-case {
14
16
  text-transform: none;
15
17
  }
16
-
17
18
  .x-underline {
18
19
  -webkit-text-decoration-line: underline;
19
20
  text-decoration-line: underline;
@@ -3595,6 +3596,9 @@
3595
3596
  :root {
3596
3597
  --x-color-text-accent: var(--x-color-base-accent);
3597
3598
  }
3599
+ .x-text--accent {
3600
+ --x-color-text-default: var(--x-color-text-accent);
3601
+ }
3598
3602
  :root {
3599
3603
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3600
3604
  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3602,9 +3606,6 @@
3602
3606
  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3603
3607
  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3604
3608
  }
3605
- .x-text--accent {
3606
- --x-color-text-default: var(--x-color-text-accent);
3607
- }
3608
3609
  :root {
3609
3610
  --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3610
3611
  --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3635,6 +3636,18 @@
3635
3636
  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3636
3637
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3637
3638
  }
3639
+ :root {
3640
+ --x-color-background-tag-ghost: transparent;
3641
+ --x-color-border-tag-ghost: transparent;
3642
+ --x-color-background-tag-selected-ghost: transparent;
3643
+ --x-color-border-tag-selected-ghost: transparent;
3644
+ --x-color-background-tag-curated-ghost: transparent;
3645
+ --x-color-border-tag-curated-ghost: transparent;
3646
+ --x-color-background-tag-curated-selected-ghost: transparent;
3647
+ --x-color-border-tag-curated-selected-ghost: transparent;
3648
+ --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3649
+ --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3650
+ }
3638
3651
 
3639
3652
  .x-tag--ghost.x-tag,
3640
3653
  .x-tag--ghost .x-tag {
@@ -3699,18 +3712,6 @@
3699
3712
  --x-number-font-weight-tag-default-selected
3700
3713
  );
3701
3714
  }
3702
- :root {
3703
- --x-color-background-tag-ghost: transparent;
3704
- --x-color-border-tag-ghost: transparent;
3705
- --x-color-background-tag-selected-ghost: transparent;
3706
- --x-color-border-tag-selected-ghost: transparent;
3707
- --x-color-background-tag-curated-ghost: transparent;
3708
- --x-color-border-tag-curated-ghost: transparent;
3709
- --x-color-background-tag-curated-selected-ghost: transparent;
3710
- --x-color-border-tag-curated-selected-ghost: transparent;
3711
- --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3712
- --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3713
- }
3714
3715
  :root {
3715
3716
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3716
3717
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -5090,6 +5091,12 @@
5090
5091
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5091
5092
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5092
5093
  }
5094
+ :root {
5095
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5096
+ --x-mix-blend-mode-picture-colored: multiply;
5097
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5098
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5099
+ }
5093
5100
 
5094
5101
  .x-picture--colored.x-picture {
5095
5102
  --x-color-background-picture-default: var(--x-color-background-picture-colored);
@@ -5103,12 +5110,6 @@
5103
5110
  .x-picture--colored.x-picture .x-picture--placeholder {
5104
5111
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5105
5112
  }
5106
- :root {
5107
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5108
- --x-mix-blend-mode-picture-colored: multiply;
5109
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5110
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5111
- }
5112
5113
  :root {
5113
5114
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5114
5115
  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5448,6 +5449,10 @@
5448
5449
  --x-number-font-weight-base-regular
5449
5450
  );
5450
5451
  }
5452
+ :root {
5453
+ --x-modal-overlay-color: rgb(0, 0, 0);
5454
+ --x-modal-overlay-opacity: 0.7;
5455
+ }
5451
5456
  :root {
5452
5457
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5453
5458
  --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -5583,10 +5588,6 @@
5583
5588
  --x-modal-overlay-color: rgb(0, 0, 0);
5584
5589
  --x-modal-overlay-opacity: 0.7;
5585
5590
  }
5586
- :root {
5587
- --x-modal-overlay-color: rgb(0, 0, 0);
5588
- --x-modal-overlay-opacity: 0.7;
5589
- }
5590
5591
 
5591
5592
  .x-modal__overlay {
5592
5593
  background-color: var(--x-modal-overlay-color) !important;
@@ -5700,6 +5701,22 @@
5700
5701
  --x-size-padding-list-12: var(--x-size-base-12);
5701
5702
  --x-size-padding-list-13: var(--x-size-base-13);
5702
5703
  }
5704
+ /* @deprecated */
5705
+ :root {
5706
+ --x-size-padding-list-01: var(--x-size-base-01);
5707
+ --x-size-padding-list-02: var(--x-size-base-02);
5708
+ --x-size-padding-list-03: var(--x-size-base-03);
5709
+ --x-size-padding-list-04: var(--x-size-base-04);
5710
+ --x-size-padding-list-05: var(--x-size-base-05);
5711
+ --x-size-padding-list-06: var(--x-size-base-06);
5712
+ --x-size-padding-list-07: var(--x-size-base-07);
5713
+ --x-size-padding-list-08: var(--x-size-base-08);
5714
+ --x-size-padding-list-09: var(--x-size-base-09);
5715
+ --x-size-padding-list-10: var(--x-size-base-10);
5716
+ --x-size-padding-list-11: var(--x-size-base-11);
5717
+ --x-size-padding-list-12: var(--x-size-base-12);
5718
+ --x-size-padding-list-13: var(--x-size-base-13);
5719
+ }
5703
5720
 
5704
5721
  /* @deprecated */
5705
5722
  [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -6024,22 +6041,6 @@
6024
6041
  margin-right: var(--x-size-gap-list-13);
6025
6042
  }
6026
6043
  }
6027
- /* @deprecated */
6028
- :root {
6029
- --x-size-padding-list-01: var(--x-size-base-01);
6030
- --x-size-padding-list-02: var(--x-size-base-02);
6031
- --x-size-padding-list-03: var(--x-size-base-03);
6032
- --x-size-padding-list-04: var(--x-size-base-04);
6033
- --x-size-padding-list-05: var(--x-size-base-05);
6034
- --x-size-padding-list-06: var(--x-size-base-06);
6035
- --x-size-padding-list-07: var(--x-size-base-07);
6036
- --x-size-padding-list-08: var(--x-size-base-08);
6037
- --x-size-padding-list-09: var(--x-size-base-09);
6038
- --x-size-padding-list-10: var(--x-size-base-10);
6039
- --x-size-padding-list-11: var(--x-size-base-11);
6040
- --x-size-padding-list-12: var(--x-size-base-12);
6041
- --x-size-padding-list-13: var(--x-size-base-13);
6042
- }
6043
6044
  :root {
6044
6045
  --x-size-gap-list-01: var(--x-size-base-01);
6045
6046
  --x-size-gap-list-02: var(--x-size-base-02);
@@ -6784,15 +6785,6 @@
6784
6785
  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6785
6786
  --x-size-border-width-left-input-group-line: 0;
6786
6787
  }
6787
- :root {
6788
- --x-size-padding-left-input-group-line: 0;
6789
- --x-size-padding-right-input-group-line: 0;
6790
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6791
- --x-size-border-width-top-input-group-line: 0;
6792
- --x-size-border-width-right-input-group-line: 0;
6793
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6794
- --x-size-border-width-left-input-group-line: 0;
6795
- }
6796
6788
 
6797
6789
  .x-input-group--line .x-input-group,
6798
6790
  .x-input-group--line.x-input-group {
@@ -6831,6 +6823,15 @@
6831
6823
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6832
6824
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6833
6825
  }
6826
+ :root {
6827
+ --x-size-padding-left-input-group-line: 0;
6828
+ --x-size-padding-right-input-group-line: 0;
6829
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6830
+ --x-size-border-width-top-input-group-line: 0;
6831
+ --x-size-border-width-right-input-group-line: 0;
6832
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6833
+ --x-size-border-width-left-input-group-line: 0;
6834
+ }
6834
6835
  :root {
6835
6836
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6836
6837
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7692,6 +7693,30 @@
7692
7693
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7693
7694
  --x-size-border-width-left-facet-header-line: 0;
7694
7695
  }
7696
+ :root {
7697
+ --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7698
+ --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7699
+ --x-size-border-width-top-facet-header-line: 0;
7700
+ --x-size-border-width-right-facet-header-line: 0;
7701
+ --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7702
+ --x-size-border-width-left-facet-header-line: 0;
7703
+ }
7704
+
7705
+ .x-facet--line.x-facet,
7706
+ .x-facet--line .x-facet {
7707
+ --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
7708
+ --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
7709
+ --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
7710
+ --x-size-border-width-right-facet-header-default: var(
7711
+ --x-size-border-width-right-facet-header-line
7712
+ );
7713
+ --x-size-border-width-bottom-facet-header-default: var(
7714
+ --x-size-border-width-bottom-facet-header-line
7715
+ );
7716
+ --x-size-border-width-left-facet-header-default: var(
7717
+ --x-size-border-width-left-facet-header-line
7718
+ );
7719
+ }
7695
7720
  :root {
7696
7721
  --x-color-background-facet-default: transparent;
7697
7722
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7890,30 +7915,6 @@
7890
7915
  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
7891
7916
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
7892
7917
  }
7893
- :root {
7894
- --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7895
- --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7896
- --x-size-border-width-top-facet-header-line: 0;
7897
- --x-size-border-width-right-facet-header-line: 0;
7898
- --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7899
- --x-size-border-width-left-facet-header-line: 0;
7900
- }
7901
-
7902
- .x-facet--line.x-facet,
7903
- .x-facet--line .x-facet {
7904
- --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
7905
- --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
7906
- --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
7907
- --x-size-border-width-right-facet-header-default: var(
7908
- --x-size-border-width-right-facet-header-line
7909
- );
7910
- --x-size-border-width-bottom-facet-header-default: var(
7911
- --x-size-border-width-bottom-facet-header-line
7912
- );
7913
- --x-size-border-width-left-facet-header-default: var(
7914
- --x-size-border-width-left-facet-header-line
7915
- );
7916
- }
7917
7918
  :root {
7918
7919
  --x-size-width-dropdown-xl: 282px;
7919
7920
  }
@@ -8087,13 +8088,13 @@
8087
8088
  :root {
8088
8089
  --x-size-width-dropdown-l: 202px;
8089
8090
  }
8090
- :root {
8091
- --x-size-width-dropdown-l: 202px;
8092
- }
8093
8091
 
8094
8092
  .x-dropdown.x-dropdown--l {
8095
8093
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8096
8094
  }
8095
+ :root {
8096
+ --x-size-width-dropdown-l: 202px;
8097
+ }
8097
8098
  :root {
8098
8099
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8099
8100
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8669,13 +8670,6 @@
8669
8670
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8670
8671
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8671
8672
  }
8672
- :root {
8673
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8674
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8675
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8676
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8677
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8678
- }
8679
8673
  :root {
8680
8674
  --x-color-background-button-default: var(--x-color-base-lead);
8681
8675
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8762,14 +8756,11 @@
8762
8756
  }
8763
8757
  }
8764
8758
  :root {
8765
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8766
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8767
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8768
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8769
- --x-size-border-width-badge-default: 0;
8770
- --x-size-width-badge-default: 1.5em;
8771
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8772
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8759
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8760
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8761
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8762
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8763
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8773
8764
  }
8774
8765
  :root {
8775
8766
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8842,6 +8833,16 @@
8842
8833
  .x-badge-container {
8843
8834
  position: relative;
8844
8835
  }
8836
+ :root {
8837
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8838
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8839
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8840
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8841
+ --x-size-border-width-badge-default: 0;
8842
+ --x-size-width-badge-default: 1.5em;
8843
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8844
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8845
+ }
8845
8846
  :root {
8846
8847
  --x-size-base-01: 2px;
8847
8848
  --x-size-base-02: 4px;
@@ -8883,4 +8884,4 @@
8883
8884
  --x-size-border-radius-base-m: var(--x-size-base-06);
8884
8885
  --x-size-border-radius-base-pill: 99999px;
8885
8886
  --x-size-border-width-base: 1px;
8886
- }
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 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;;;;;;"}
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 if (typeof document === 'undefined') {\n return { teleportHost: ref<Element>() }\n }\n\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 */\nif (typeof document !== 'undefined') {\n const css = document.createElement('style')\n css.textContent =\n ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n document.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\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
@@ -1,4 +1,4 @@
1
- import { defineComponent, getCurrentInstance, ref, onUnmounted, onBeforeUnmount, watch, watchEffect, onMounted } from 'vue';
1
+ import { defineComponent, ref, getCurrentInstance, onUnmounted, onBeforeUnmount, watch, watchEffect, onMounted } from 'vue';
2
2
 
3
3
  var _sfc_main = defineComponent({
4
4
  name: 'BaseTeleport',
@@ -27,6 +27,9 @@ var _sfc_main = defineComponent({
27
27
  },
28
28
  },
29
29
  setup(props) {
30
+ if (typeof document === 'undefined') {
31
+ return { teleportHost: ref() };
32
+ }
30
33
  const instance = getCurrentInstance();
31
34
  /** Hook where the slot content will be teleported to. */
32
35
  const teleportHost = ref();
@@ -117,10 +120,13 @@ var _sfc_main = defineComponent({
117
120
  },
118
121
  });
119
122
  /** Teleport host styles should be injected outside our shadowRoots */
120
- const css = document.createElement('style');
121
- css.textContent = ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }';
122
- document.head?.appendChild(css) ||
123
- document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css));
123
+ if (typeof document !== 'undefined') {
124
+ const css = document.createElement('style');
125
+ css.textContent =
126
+ ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }';
127
+ document.head?.appendChild(css) ||
128
+ document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css));
129
+ }
124
130
 
125
131
  export { _sfc_main as default };
126
132
  //# sourceMappingURL=base-teleport.vue2.js.map
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 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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"}
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 if (typeof document === 'undefined') {\n return { teleportHost: ref<Element>() }\n }\n\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 */\nif (typeof document !== 'undefined') {\n const css = document.createElement('style')\n css.textContent =\n ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n document.head?.appendChild(css) ||\n document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\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,IAAI,OAAO,QAAS,KAAI,WAAW,EAAE;AACnC,YAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAY,EAAA,CAAA;AACxC,SAAA;AAEA,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,IAAI,OAAQ,GACV,OAAO,KAAK,CAAC,MAAO,KAAI,QAAO,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAA,GAAI,KAAK,CAAC,MAAK,CAAA;YACvF,IAAI,OAAO,EAAE,WAAW,EAAE;gBACxB,mBAAmB,CAAC,UAAU,EAAC,CAAA;AAC/B,gBAAA,aAAa,CAAC,KAAM,GAAE,OAAM,CAAA;gBAC5B,OAAO,OAAO,CAAC,aAAa,EAAE;AAC5B,oBAAA,OAAQ,GAAE,OAAO,CAAC,aAAY,CAAA;oBAC9B,qBAAqB,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAA,CAAA;AAC5D,iBAAA;AACF,aAAA;SACF;;AAGA,QAAA,SAAS,aAAa,GAAA;YACpB,IAAI,aAAa,CAAC,KAAI,IAAK,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE;gBAC3D,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,IAAI,OAAO,QAAS,KAAI,WAAW,EAAE;IACnC,MAAM,GAAI,GAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAA,CAAA;AAC1C,IAAA,GAAG,CAAC,WAAY;AACd,QAAA,kFAAiF,CAAA;AACnF,IAAA,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,GAAG;AAC5B,QAAA,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA,CAAA;AACtF;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.85",
3
+ "version": "6.0.0-alpha.86",
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": "5fe2507e4b13bb83eec94df393bb1d2534fca4d7"
145
+ "gitHead": "cc603b69a9d06f7a890d86c1b03a855d986b4d80"
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,wBAoIE"}
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,wBAwIE"}