xv-webcomponents 0.1.44 → 0.1.46

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 (98) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/xv-accordion-v2_34.cjs.entry.js +121 -89
  3. package/dist/cjs/xv-accordion-v2_34.cjs.entry.js.map +1 -1
  4. package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js +1 -1
  5. package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js.map +1 -1
  6. package/dist/cjs/xv-breadcrumbs-v2.entry.cjs.js.map +1 -1
  7. package/dist/cjs/xv-webcomponents.cjs.js +1 -1
  8. package/dist/collection/components/xv-accordion/xv-accordion.css +95 -0
  9. package/dist/collection/components/xv-accordion-item/xv-accordion-item.css +95 -0
  10. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.css +95 -0
  11. package/dist/collection/components/xv-button/xv-button-v2.css +95 -0
  12. package/dist/collection/components/xv-card/xv-card.css +95 -0
  13. package/dist/collection/components/xv-checkbox/xv-checkbox.css +95 -0
  14. package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.css +95 -0
  15. package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js +29 -5
  16. package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js.map +1 -1
  17. package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.css +95 -0
  18. package/dist/collection/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js +1 -1
  19. package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.css +104 -7
  20. package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js +9 -3
  21. package/dist/collection/components/xv-data-table/xv-data-table-row/xv-data-table-row.js.map +1 -1
  22. package/dist/collection/components/xv-data-table/xv-data-table.css +112 -2
  23. package/dist/collection/components/xv-data-table/xv-data-table.js +20 -1
  24. package/dist/collection/components/xv-data-table/xv-data-table.js.map +1 -1
  25. package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.css +95 -0
  26. package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
  27. package/dist/collection/components/xv-dropdown/xv-dropdown.css +95 -0
  28. package/dist/collection/components/xv-dropdown/xv-dropdown.js +1 -1
  29. package/dist/collection/components/xv-file-uploader/xv-file-uploader.css +98 -1
  30. package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +76 -10
  31. package/dist/collection/components/xv-file-uploader/xv-file-uploader.js.map +1 -1
  32. package/dist/collection/components/xv-footer/xv-footer.css +95 -0
  33. package/dist/collection/components/xv-footer/xv-footer.js +1 -1
  34. package/dist/collection/components/xv-header/xv-header.css +95 -0
  35. package/dist/collection/components/xv-header/xv-header.js +1 -1
  36. package/dist/collection/components/xv-link/xv-link.css +95 -0
  37. package/dist/collection/components/xv-link/xv-link.js +1 -1
  38. package/dist/collection/components/xv-loader/xv-loader.css +95 -0
  39. package/dist/collection/components/xv-login-modal/xv-login-modal.css +95 -0
  40. package/dist/collection/components/xv-modal/xv-modal.css +108 -0
  41. package/dist/collection/components/xv-modal/xv-modal.js +20 -1
  42. package/dist/collection/components/xv-modal/xv-modal.js.map +1 -1
  43. package/dist/collection/components/xv-notification/xv-notification.css +95 -0
  44. package/dist/collection/components/xv-notification/xv-notification.js +1 -1
  45. package/dist/collection/components/xv-number-input/xv-number-input.css +95 -0
  46. package/dist/collection/components/xv-number-input/xv-number-input.js +2 -2
  47. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.css +95 -0
  48. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js +1 -1
  49. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.css +95 -0
  50. package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +1 -1
  51. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.css +96 -1
  52. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +1 -1
  53. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.css +95 -0
  54. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
  55. package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.css +95 -0
  56. package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +1 -1
  57. package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.css +95 -0
  58. package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +1 -1
  59. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.css +95 -0
  60. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +1 -1
  61. package/dist/collection/components/xv-table/xv-table.css +95 -0
  62. package/dist/collection/components/xv-table/xv-table.js +1 -1
  63. package/dist/collection/components/xv-tabs/xv-tab/xv-tab.css +95 -0
  64. package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +1 -1
  65. package/dist/collection/components/xv-tabs/xv-tabs.css +100 -11
  66. package/dist/collection/components/xv-tag/xv-tag.css +95 -0
  67. package/dist/collection/components/xv-tag/xv-tag.js +1 -1
  68. package/dist/collection/components/xv-text-input/xv-text-input.css +98 -0
  69. package/dist/collection/components/xv-text-input/xv-text-input.js +21 -2
  70. package/dist/collection/components/xv-text-input/xv-text-input.js.map +1 -1
  71. package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.css +95 -0
  72. package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +1 -1
  73. package/dist/collection/components/xv-tooltip/xv-tooltip.css +92 -28
  74. package/dist/collection/components/xv-tooltip/xv-tooltip.js +66 -18
  75. package/dist/collection/components/xv-tooltip/xv-tooltip.js.map +1 -1
  76. package/dist/esm/loader.js +1 -1
  77. package/dist/esm/xv-accordion-v2_34.entry.js +121 -89
  78. package/dist/esm/xv-accordion-v2_34.entry.js.map +1 -1
  79. package/dist/esm/xv-breadcrumbs-v2.entry.js +1 -1
  80. package/dist/esm/xv-breadcrumbs-v2.entry.js.map +1 -1
  81. package/dist/esm/xv-webcomponents.js +1 -1
  82. package/dist/types/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.d.ts +2 -0
  83. package/dist/types/components/xv-data-table/xv-data-table.d.ts +1 -0
  84. package/dist/types/components/xv-file-uploader/xv-file-uploader.d.ts +3 -0
  85. package/dist/types/components/xv-modal/xv-modal.d.ts +4 -0
  86. package/dist/types/components/xv-text-input/xv-text-input.d.ts +1 -0
  87. package/dist/types/components/xv-tooltip/xv-tooltip.d.ts +5 -3
  88. package/dist/types/components.d.ts +29 -0
  89. package/dist/xv-webcomponents/p-851c4716.entry.js +2 -0
  90. package/dist/xv-webcomponents/{p-5b63a259.entry.js.map → p-851c4716.entry.js.map} +1 -1
  91. package/dist/xv-webcomponents/p-d96c1b6a.entry.js +2 -0
  92. package/dist/xv-webcomponents/p-d96c1b6a.entry.js.map +1 -0
  93. package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.esm.js.map +1 -1
  94. package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
  95. package/package.json +1 -1
  96. package/dist/xv-webcomponents/p-5b63a259.entry.js +0 -2
  97. package/dist/xv-webcomponents/p-9c06f44c.entry.js +0 -2
  98. package/dist/xv-webcomponents/p-9c06f44c.entry.js.map +0 -1
@@ -1,43 +1,107 @@
1
- :host {
2
- position: relative;
3
- display: contents;
4
- }
5
-
6
1
  .xv-tooltip[role=tooltip] {
7
2
  position: absolute;
8
- background-color: var(--background-inverse);
3
+ background-color: var(--background-inverse, #333333);
9
4
  color: var(--text-on-color);
10
5
  padding: var(--spacing-03) var(--spacing-04);
11
6
  border-radius: 3px;
12
- font-size: var(--fz-md);
7
+ font-size: var(--fz-sm);
13
8
  z-index: 999;
9
+ min-width: min(150px, 90vw);
14
10
  max-width: min(400px, 90vw);
15
- overflow: visible;
16
11
  }
17
- .xv-tooltip[role=tooltip] [data-popper-arrow] {
12
+ .xv-tooltip[role=tooltip]::after {
13
+ content: "";
18
14
  position: absolute;
19
- width: 10px;
20
- height: 10px;
21
- background-color: transparent;
22
- z-index: -1;
15
+ width: 0;
16
+ height: 0;
17
+ border-style: solid;
23
18
  }
24
- .xv-tooltip[role=tooltip] [data-popper-arrow]:before {
25
- content: "";
26
- transform: rotate(45deg);
27
- background-color: var(--background-inverse);
28
- width: inherit;
29
- height: inherit;
30
- display: inline-block;
19
+ .xv-tooltip[role=tooltip][data-popper-placement=top]::after {
20
+ bottom: -5px;
21
+ left: 50%;
22
+ transform: translateX(-50%);
23
+ border-width: 5px 5px 0 5px;
24
+ border-color: var(--background-inverse, black) transparent transparent transparent;
25
+ }
26
+ .xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
27
+ bottom: -5px;
28
+ left: 12px;
29
+ border-width: 5px 5px 0 5px;
30
+ border-color: var(--background-inverse, black) transparent transparent transparent;
31
+ }
32
+ .xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
33
+ bottom: -5px;
34
+ right: 12px;
35
+ border-width: 5px 5px 0 5px;
36
+ border-color: var(--background-inverse, black) transparent transparent transparent;
37
+ }
38
+ .xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
39
+ top: -5px;
40
+ left: 50%;
41
+ transform: translateX(-50%);
42
+ border-width: 0 5px 5px 5px;
43
+ border-color: transparent transparent var(--background-inverse, black) transparent;
44
+ }
45
+ .xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
46
+ top: -5px;
47
+ left: 12px;
48
+ border-width: 0 5px 5px 5px;
49
+ border-color: transparent transparent var(--background-inverse, black) transparent;
31
50
  }
32
- .xv-tooltip[role=tooltip][data-popper-placement^=top] [data-popper-arrow] {
33
- bottom: 1px;
51
+ .xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
52
+ top: -5px;
53
+ right: 12px;
54
+ border-width: 0 5px 5px 5px;
55
+ border-color: transparent transparent var(--background-inverse, black) transparent;
34
56
  }
35
- .xv-tooltip[role=tooltip][data-popper-placement^=bottom] [data-popper-arrow] {
36
- top: -10px;
57
+ .xv-tooltip[role=tooltip][data-popper-placement=left]::after {
58
+ top: 50%;
59
+ right: -5px;
60
+ transform: translateY(-50%);
61
+ border-width: 5px 0 5px 5px;
62
+ border-color: transparent transparent transparent var(--background-inverse, black);
63
+ }
64
+ .xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
65
+ top: 12px;
66
+ right: -5px;
67
+ border-width: 5px 0 5px 5px;
68
+ border-color: transparent transparent transparent var(--background-inverse, black);
69
+ }
70
+ .xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
71
+ bottom: 12px;
72
+ right: -5px;
73
+ border-width: 5px 0 5px 5px;
74
+ border-color: transparent transparent transparent var(--background-inverse, black);
75
+ }
76
+ .xv-tooltip[role=tooltip][data-popper-placement=right]::after {
77
+ top: 50%;
78
+ left: -5px;
79
+ transform: translateY(-50%);
80
+ border-width: 5px 5px 5px 0;
81
+ border-color: transparent var(--background-inverse, black) transparent transparent;
82
+ }
83
+ .xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
84
+ top: 12px;
85
+ left: -5px;
86
+ border-width: 5px 5px 5px 0;
87
+ border-color: transparent var(--background-inverse, black) transparent transparent;
88
+ }
89
+ .xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
90
+ bottom: 12px;
91
+ left: -5px;
92
+ border-width: 5px 5px 5px 0;
93
+ border-color: transparent var(--background-inverse, black) transparent transparent;
94
+ }
95
+
96
+ .xv-tooltip-wrapper {
97
+ position: relative;
37
98
  }
38
- .xv-tooltip[role=tooltip][data-popper-placement^=left] [data-popper-arrow] {
39
- right: -4px;
99
+ .xv-tooltip-wrapper__dashed {
100
+ text-decoration-line: underline;
101
+ text-decoration-style: dashed;
102
+ text-decoration-color: var(--text-secondary, #515151);
103
+ text-underline-offset: 4px;
40
104
  }
41
- .xv-tooltip[role=tooltip][data-popper-placement^=right] [data-popper-arrow] {
42
- left: -4px;
105
+ .xv-tooltip-wrapper__block {
106
+ display: block;
43
107
  }
@@ -3,31 +3,46 @@ import { createPopper } from "@popperjs/core";
3
3
  export class XvTooltip {
4
4
  constructor() {
5
5
  this.position = 'auto';
6
- this.visible = false;
7
6
  }
8
7
  onMouseEnter() {
9
- this.visible = true;
10
- requestAnimationFrame(() => this.createPopper());
8
+ this.createTooltip();
11
9
  }
12
10
  onMouseLeave() {
13
- this.visible = false;
14
- this.destroyPopper();
11
+ this.destroyTooltip();
15
12
  }
16
- createPopper() {
17
- if (this.tooltipEl) {
18
- this.popperInstance = createPopper(this.el, this.tooltipEl, {
19
- placement: this.position,
20
- modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
21
- });
13
+ createTooltip() {
14
+ if (!this.message)
15
+ return;
16
+ if (!this.tooltipEl) {
17
+ this.tooltipEl = document.createElement('div');
18
+ this.tooltipEl.className = 'xv-tooltip';
19
+ this.tooltipEl.role = 'tooltip';
20
+ this.tooltipEl.textContent = this.message;
21
+ document.body.appendChild(this.tooltipEl);
22
22
  }
23
+ this.popperInstance = createPopper(this.el, this.tooltipEl, {
24
+ placement: this.position,
25
+ modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
26
+ });
23
27
  }
24
- destroyPopper() {
28
+ destroyTooltip() {
25
29
  var _a;
30
+ if (this.tooltipEl) {
31
+ document.body.removeChild(this.tooltipEl);
32
+ this.tooltipEl = null;
33
+ }
26
34
  (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
27
35
  this.popperInstance = null;
28
36
  }
37
+ disconnectedCallback() {
38
+ this.destroyTooltip();
39
+ }
29
40
  render() {
30
- return (h(Host, { key: 'd1f0178c3853f96716217630ff0349a0396f33a0' }, h("slot", { key: '11af6ea09c3d833318118164f0493bf4c98316a3' }, h("svg", { key: '614c37cd6eda62cc3745f49252627f1383a46166', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '11f2da0b818971c6f17145e1fa5b17b1852faafd', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }))), this.visible && (h("div", { key: '8f0db2decd3ff2993b0b618e2111cac861fec058', class: "xv-tooltip", ref: (el) => (this.tooltipEl = el), role: "tooltip" }, this.message, h("div", { key: 'a8e05a8dbe988e7df14da6a16f42e528a68708c0', class: "xv-tooltip-arrow", "data-popper-arrow": "" })))));
41
+ return (h(Host, { key: 'a31731405df8b7c320cf6ae0bcefea0595fd1449', role: "tooltip", class: {
42
+ 'xv-tooltip-wrapper': true,
43
+ [`xv-tooltip-wrapper__block`]: !!this.block,
44
+ [`xv-tooltip-wrapper__dashed`]: !!this.dashed,
45
+ } }, h("slot", { key: '250e1f32fa6d59ad7e57027677b65b8e51da7756' }, h("svg", { key: '16a1db6965a2cdd69558ac0d9980bab1f9378542', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '5404bdc0afab8af4d6b1f9f1d19ac99ae29c3c53', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
31
46
  }
32
47
  static get is() { return "xv-tooltip-v2"; }
33
48
  static get originalStyleUrls() {
@@ -86,14 +101,47 @@ export class XvTooltip {
86
101
  "setter": false,
87
102
  "reflect": false,
88
103
  "defaultValue": "'auto'"
104
+ },
105
+ "block": {
106
+ "type": "boolean",
107
+ "attribute": "block",
108
+ "mutable": false,
109
+ "complexType": {
110
+ "original": "boolean",
111
+ "resolved": "boolean",
112
+ "references": {}
113
+ },
114
+ "required": false,
115
+ "optional": true,
116
+ "docs": {
117
+ "tags": [],
118
+ "text": ""
119
+ },
120
+ "getter": false,
121
+ "setter": false,
122
+ "reflect": false
123
+ },
124
+ "dashed": {
125
+ "type": "boolean",
126
+ "attribute": "dashed",
127
+ "mutable": false,
128
+ "complexType": {
129
+ "original": "boolean",
130
+ "resolved": "boolean",
131
+ "references": {}
132
+ },
133
+ "required": false,
134
+ "optional": true,
135
+ "docs": {
136
+ "tags": [],
137
+ "text": ""
138
+ },
139
+ "getter": false,
140
+ "setter": false,
141
+ "reflect": false
89
142
  }
90
143
  };
91
144
  }
92
- static get states() {
93
- return {
94
- "visible": {}
95
- };
96
- }
97
145
  static get elementRef() { return "el"; }
98
146
  static get listeners() {
99
147
  return [{
@@ -1 +1 @@
1
- {"version":3,"file":"xv-tooltip.js","sourceRoot":"","sources":["../../../src/components/xv-tooltip/xv-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,YAAY,EAAuB,MAAM,gBAAgB,CAAC;AAOnE,MAAM,OAAO,SAAS;IALtB;QASU,aAAQ,GAAc,MAAM,CAAC;QAE5B,YAAO,GAAY,KAAK,CAAC;KAuDnC;IAjDC,YAAY;QACV,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACnD,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE;gBAC1D,SAAS,EAAE,IAAI,CAAC,QAAQ;gBACxB,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;aAC7D,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,aAAa;;QACnB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;oBACjF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yTAAyT,GAC3T,CACE,CACD;YACN,IAAI,CAAC,OAAO,IAAI,CACf,4DACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,OAAO;gBACb,4DAAK,KAAK,EAAC,kBAAkB,uBAAmB,EAAE,GAAG,CACjD,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core';\nimport { createPopper, Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'xv-tooltip-v2',\n styleUrl: 'xv-tooltip.scss',\n shadow: false,\n})\nexport class XvTooltip {\n @Element() el: HTMLElement;\n\n @Prop() message: string;\n @Prop() position: Placement = 'auto';\n\n @State() visible: boolean = false;\n\n private tooltipEl: HTMLElement;\n private popperInstance: Instance;\n\n @Listen('mouseenter')\n onMouseEnter() {\n this.visible = true;\n requestAnimationFrame(() => this.createPopper());\n }\n\n @Listen('mouseleave')\n onMouseLeave() {\n this.visible = false;\n this.destroyPopper();\n }\n\n private createPopper() {\n if (this.tooltipEl) {\n this.popperInstance = createPopper(this.el, this.tooltipEl, {\n placement: this.position,\n modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],\n });\n }\n }\n\n private destroyPopper() {\n this.popperInstance?.destroy();\n this.popperInstance = null;\n }\n\n render() {\n return (\n <Host>\n <slot>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\n <path\n fill=\"currentColor\"\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\n />\n </svg>\n </slot>\n {this.visible && (\n <div\n class=\"xv-tooltip\"\n ref={(el) => (this.tooltipEl = el)}\n role=\"tooltip\"\n >\n {this.message}\n <div class=\"xv-tooltip-arrow\" data-popper-arrow=\"\" />\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"xv-tooltip.js","sourceRoot":"","sources":["../../../src/components/xv-tooltip/xv-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAuB,MAAM,gBAAgB,CAAC;AAOnE,MAAM,OAAO,SAAS;IALtB;QASU,aAAQ,GAAc,MAAM,CAAC;KAmEtC;IA3DC,YAAY;QACV,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC/C,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,YAAY,CAAC;YACxC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC;YAChC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;YAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE;YAC1D,SAAS,EAAE,IAAI,CAAC,QAAQ;YACxB,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;SAC7D,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;;QACpB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC1C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;QACD,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI;gBAC1B,CAAC,2BAA2B,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3C,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM;aAC9C;YACD;gBACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;oBACjF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yTAAyT,GAC3T,CACE,CACD,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Listen } from '@stencil/core';\nimport { createPopper, Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'xv-tooltip-v2',\n styleUrl: 'xv-tooltip.scss',\n shadow: false,\n})\nexport class XvTooltip {\n @Element() el: HTMLElement;\n\n @Prop() message: string;\n @Prop() position: Placement = 'auto';\n @Prop() block?: boolean;\n @Prop() dashed?: boolean;\n\n private tooltipEl: HTMLElement;\n private popperInstance: Instance;\n\n @Listen('mouseenter')\n onMouseEnter() {\n this.createTooltip();\n }\n\n @Listen('mouseleave')\n onMouseLeave() {\n this.destroyTooltip();\n }\n\n private createTooltip() {\n if (!this.message) return;\n\n if (!this.tooltipEl) {\n this.tooltipEl = document.createElement('div');\n this.tooltipEl.className = 'xv-tooltip';\n this.tooltipEl.role = 'tooltip';\n this.tooltipEl.textContent = this.message;\n document.body.appendChild(this.tooltipEl);\n }\n\n this.popperInstance = createPopper(this.el, this.tooltipEl, {\n placement: this.position,\n modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],\n });\n }\n\n private destroyTooltip() {\n if (this.tooltipEl) {\n document.body.removeChild(this.tooltipEl);\n this.tooltipEl = null;\n }\n this.popperInstance?.destroy();\n this.popperInstance = null;\n }\n\n disconnectedCallback() {\n this.destroyTooltip();\n }\n\n render() {\n return (\n <Host\n role=\"tooltip\"\n class={{\n 'xv-tooltip-wrapper': true,\n [`xv-tooltip-wrapper__block`]: !!this.block,\n [`xv-tooltip-wrapper__dashed`]: !!this.dashed,\n }}>\n <slot>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\n <path\n fill=\"currentColor\"\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\n />\n </svg>\n </slot>\n </Host>\n );\n }\n}\n"]}
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
7
7
  await globalScripts();
8
- return bootstrapLazy([["xv-breadcrumbs-v2",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_34",[[1,"xv-data-table-row",{"variant":[1],"name":[1025],"collapse":[1],"collapsable":[516],"checked":[1028],"partial":[1028],"hover":[1028],"header":[4],"footer":[4],"disabled":[4],"readonly":[4],"required":[4],"value":[8],"collapsed":[32]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040,"loading-states"],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[0,"xv-header",{"htmlContent":[32],"showLoginModal":[32]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16,"colssize"],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-data-table",{"size":[1],"block":[4],"columnWidths":[16,"column-widths"],"hover":[4]}],[1,"xv-data-table-collapse",{"collapsed":[1540],"setCollapsed":[64]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"openModal":[64],"closeModal":[64]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-toggle-tip",{"open":[1540],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-data-table-cell",{"name":[1025],"sort":[1537],"multiline":[2],"width":[1],"align":[1]},[[0,"click","handleSort"]]],[1,"xv-login-modal",{"visible":[4],"oauthProviders":[32],"bookNow":[32],"returnUrl":[32],"passwordLoginEnabled":[32],"oauthLoginEnabled":[32],"passwordRegistrationEnabled":[32],"configurationName":[32],"xvMvcConfigName":[32],"contactUrl":[32]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[4,"xv-tooltip-v2",{"message":[1],"position":[1],"visible":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[65,"xv-button-v2",{"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
8
+ return bootstrapLazy([["xv-breadcrumbs-v2",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_34",[[1,"xv-data-table-row",{"variant":[1],"name":[1025],"collapse":[1],"collapsable":[516],"checked":[1028],"partial":[1028],"hover":[1028],"header":[4],"footer":[4],"disabled":[4],"readonly":[4],"required":[4],"value":[8],"collapsed":[32]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"buttonVariant":[1,"button-variant"],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040,"loading-states"],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32],"clearFiles":[64]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[1,"xv-data-table",{"size":[1],"block":[4],"loading":[4],"columnWidths":[16,"column-widths"],"hover":[4]}],[0,"xv-header",{"htmlContent":[32],"showLoginModal":[32]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"loading":[4],"openModal":[64],"closeModal":[64]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16,"colssize"],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"autocomplete":[1],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-data-table-collapse",{"collapsed":[1540],"setCollapsed":[64]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-toggle-tip",{"open":[1540],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-data-table-cell",{"name":[1025],"sort":[1537],"multiline":[2],"width":[1],"align":[1],"tooltip":[1]},[[0,"click","handleSort"]]],[1,"xv-login-modal",{"visible":[4],"oauthProviders":[32],"bookNow":[32],"returnUrl":[32],"passwordLoginEnabled":[32],"oauthLoginEnabled":[32],"passwordRegistrationEnabled":[32],"configurationName":[32],"xvMvcConfigName":[32],"contactUrl":[32]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[65,"xv-button-v2",{"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[4,"xv-tooltip-v2",{"message":[1],"position":[1],"block":[4],"dashed":[4]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
9
9
  };
10
10
 
11
11
  export { defineCustomElements };