@aquera/nile-elements 0.1.34 → 0.1.35-beta-1.2

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 (188) hide show
  1. package/README.md +29 -8
  2. package/demo/index.css +7 -4
  3. package/demo/index.html +20 -36
  4. package/demo/variables.css +13 -0
  5. package/demo/variables_v2.css +13 -0
  6. package/dist/{fixture-161dee0b.cjs.js → fixture-d5b55278.cjs.js} +3 -3
  7. package/dist/fixture-d5b55278.cjs.js.map +1 -0
  8. package/dist/{fixture-372df3b0.esm.js → fixture-df8b52d7.esm.js} +1 -1
  9. package/dist/index.cjs.js +1 -1
  10. package/dist/index.esm.js +1 -1
  11. package/dist/internal/animate.cjs.js +1 -1
  12. package/dist/internal/animate.cjs.js.map +1 -1
  13. package/dist/internal/animate.esm.js +1 -1
  14. package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
  15. package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
  16. package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
  17. package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
  18. package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
  19. package/dist/nile-avatar/nile-avatar.test.esm.js +1 -1
  20. package/dist/nile-badge/nile-badge.test.cjs.js +1 -1
  21. package/dist/nile-badge/nile-badge.test.esm.js +1 -1
  22. package/dist/nile-button/nile-button.test.cjs.js +1 -1
  23. package/dist/nile-button/nile-button.test.esm.js +1 -1
  24. package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.js +1 -1
  25. package/dist/nile-button-toggle-group/nile-button-toggle-group.test.esm.js +1 -1
  26. package/dist/nile-calendar/nile-calendar.test.cjs.js +1 -1
  27. package/dist/nile-calendar/nile-calendar.test.esm.js +1 -1
  28. package/dist/nile-card/nile-card.test.cjs.js +1 -1
  29. package/dist/nile-card/nile-card.test.esm.js +1 -1
  30. package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
  31. package/dist/nile-checkbox/nile-checkbox.test.esm.js +1 -1
  32. package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
  33. package/dist/nile-chip/nile-chip.test.esm.js +1 -1
  34. package/dist/nile-code-editor/extensionSetup.cjs.js +1 -1
  35. package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
  36. package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
  37. package/dist/nile-code-editor/nile-code-editor.cjs.js +1 -1
  38. package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
  39. package/dist/nile-code-editor/nile-code-editor.esm.js +2 -2
  40. package/dist/nile-dialog/nile-dialog.test.cjs.js +1 -1
  41. package/dist/nile-dialog/nile-dialog.test.esm.js +1 -1
  42. package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
  43. package/dist/nile-drawer/nile-drawer.test.esm.js +1 -1
  44. package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
  45. package/dist/nile-dropdown/nile-dropdown.test.esm.js +1 -1
  46. package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
  47. package/dist/nile-empty-state/nile-empty-state.test.esm.js +1 -1
  48. package/dist/nile-error-message/nile-error-message.cjs.js +1 -1
  49. package/dist/nile-error-message/nile-error-message.cjs.js.map +1 -1
  50. package/dist/nile-error-message/nile-error-message.css.cjs.js +1 -1
  51. package/dist/nile-error-message/nile-error-message.css.cjs.js.map +1 -1
  52. package/dist/nile-error-message/nile-error-message.css.esm.js +6 -4
  53. package/dist/nile-error-message/nile-error-message.esm.js +4 -4
  54. package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
  55. package/dist/nile-error-message/nile-error-message.test.esm.js +1 -1
  56. package/dist/nile-error-notification/nile-error-notification.css.cjs.js +1 -1
  57. package/dist/nile-error-notification/nile-error-notification.css.cjs.js.map +1 -1
  58. package/dist/nile-error-notification/nile-error-notification.css.esm.js +1 -1
  59. package/dist/nile-filter-chip/index.cjs.js +2 -0
  60. package/dist/nile-filter-chip/index.cjs.js.map +1 -0
  61. package/dist/nile-filter-chip/index.esm.js +1 -0
  62. package/dist/nile-filter-chip/nile-filter-chip.cjs.js +2 -0
  63. package/dist/nile-filter-chip/nile-filter-chip.cjs.js.map +1 -0
  64. package/dist/nile-filter-chip/nile-filter-chip.css.cjs.js +2 -0
  65. package/dist/nile-filter-chip/nile-filter-chip.css.cjs.js.map +1 -0
  66. package/dist/nile-filter-chip/nile-filter-chip.css.esm.js +98 -0
  67. package/dist/nile-filter-chip/nile-filter-chip.esm.js +34 -0
  68. package/dist/nile-filter-chip/nile-filter-chip.test.cjs.js +2 -0
  69. package/dist/nile-filter-chip/nile-filter-chip.test.cjs.js.map +1 -0
  70. package/dist/nile-filter-chip/nile-filter-chip.test.esm.js +20 -0
  71. package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
  72. package/dist/nile-form-group/nile-form-group.test.esm.js +1 -1
  73. package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
  74. package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
  75. package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
  76. package/dist/nile-hero/nile-hero.test.esm.js +1 -1
  77. package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
  78. package/dist/nile-icon/nile-icon.test.esm.js +1 -1
  79. package/dist/nile-input/nile-input.test.cjs.js +1 -1
  80. package/dist/nile-input/nile-input.test.esm.js +1 -1
  81. package/dist/nile-link/nile-link.test.cjs.js +1 -1
  82. package/dist/nile-link/nile-link.test.esm.js +1 -1
  83. package/dist/nile-loader/nile-loader.test.cjs.js +1 -1
  84. package/dist/nile-loader/nile-loader.test.esm.js +1 -1
  85. package/dist/nile-popover/nile-popover.test.cjs.js +1 -1
  86. package/dist/nile-popover/nile-popover.test.esm.js +1 -1
  87. package/dist/nile-popup/nile-popup.test.cjs.js +1 -1
  88. package/dist/nile-popup/nile-popup.test.esm.js +1 -1
  89. package/dist/nile-progress-bar/nile-progress-bar.css.cjs.js +1 -1
  90. package/dist/nile-progress-bar/nile-progress-bar.css.cjs.js.map +1 -1
  91. package/dist/nile-progress-bar/nile-progress-bar.css.esm.js +1 -0
  92. package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
  93. package/dist/nile-progress-bar/nile-progress-bar.test.esm.js +1 -1
  94. package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
  95. package/dist/nile-radio/nile-radio.test.esm.js +1 -1
  96. package/dist/nile-radio-group/nile-radio-group.test.cjs.js +1 -1
  97. package/dist/nile-radio-group/nile-radio-group.test.esm.js +1 -1
  98. package/dist/nile-select/nile-select.cjs.js +1 -1
  99. package/dist/nile-select/nile-select.cjs.js.map +1 -1
  100. package/dist/nile-select/nile-select.esm.js +1 -1
  101. package/dist/nile-select/nile-select.test.cjs.js +1 -1
  102. package/dist/nile-select/nile-select.test.esm.js +1 -1
  103. package/dist/nile-slide-toggle/nile-slide-toggle.test.cjs.js +1 -1
  104. package/dist/nile-slide-toggle/nile-slide-toggle.test.esm.js +1 -1
  105. package/dist/nile-tab-group/nile-tab-group.test.cjs.js +1 -1
  106. package/dist/nile-tab-group/nile-tab-group.test.esm.js +1 -1
  107. package/dist/nile-table/nile-table.cjs.js.map +1 -1
  108. package/dist/nile-textarea/nile-textarea.test.cjs.js +1 -1
  109. package/dist/nile-textarea/nile-textarea.test.esm.js +1 -1
  110. package/dist/nile-tooltip/index.cjs.js +1 -1
  111. package/dist/nile-tooltip/index.esm.js +1 -1
  112. package/dist/nile-tooltip/nile-tooltip-utils.cjs.js +2 -0
  113. package/dist/nile-tooltip/nile-tooltip-utils.cjs.js.map +1 -0
  114. package/dist/nile-tooltip/nile-tooltip-utils.esm.js +1 -0
  115. package/dist/nile-tooltip/nile-tooltip.cjs.js +1 -1
  116. package/dist/nile-tooltip/nile-tooltip.cjs.js.map +1 -1
  117. package/dist/nile-tooltip/nile-tooltip.css.cjs.js +1 -1
  118. package/dist/nile-tooltip/nile-tooltip.css.cjs.js.map +1 -1
  119. package/dist/nile-tooltip/nile-tooltip.css.esm.js +78 -45
  120. package/dist/nile-tooltip/nile-tooltip.esm.js +23 -28
  121. package/dist/nile-tooltip/nile-tooltip.test.cjs.js +2 -0
  122. package/dist/nile-tooltip/nile-tooltip.test.cjs.js.map +1 -0
  123. package/dist/nile-tooltip/nile-tooltip.test.esm.js +47 -0
  124. package/dist/src/index.d.ts +1 -0
  125. package/dist/src/index.js +1 -0
  126. package/dist/src/index.js.map +1 -1
  127. package/dist/src/nile-code-editor/extensionSetup.d.ts +2 -1
  128. package/dist/src/nile-code-editor/extensionSetup.js +8 -0
  129. package/dist/src/nile-code-editor/extensionSetup.js.map +1 -1
  130. package/dist/src/nile-code-editor/nile-code-editor.d.ts +2 -0
  131. package/dist/src/nile-code-editor/nile-code-editor.js +12 -3
  132. package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
  133. package/dist/src/nile-error-message/nile-error-message.css.js +6 -4
  134. package/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
  135. package/dist/src/nile-error-message/nile-error-message.d.ts +4 -0
  136. package/dist/src/nile-error-message/nile-error-message.js +20 -0
  137. package/dist/src/nile-error-message/nile-error-message.js.map +1 -1
  138. package/dist/src/nile-error-notification/nile-error-notification.css.js +1 -1
  139. package/dist/src/nile-error-notification/nile-error-notification.css.js.map +1 -1
  140. package/dist/src/nile-filter-chip/index.d.ts +1 -0
  141. package/dist/src/nile-filter-chip/index.js +2 -0
  142. package/dist/src/nile-filter-chip/index.js.map +1 -0
  143. package/dist/src/nile-filter-chip/nile-filter-chip.css.d.ts +12 -0
  144. package/dist/src/nile-filter-chip/nile-filter-chip.css.js +110 -0
  145. package/dist/src/nile-filter-chip/nile-filter-chip.css.js.map +1 -0
  146. package/dist/src/nile-filter-chip/nile-filter-chip.d.ts +35 -0
  147. package/dist/src/nile-filter-chip/nile-filter-chip.js +128 -0
  148. package/dist/src/nile-filter-chip/nile-filter-chip.js.map +1 -0
  149. package/dist/src/nile-filter-chip/nile-filter-chip.test.d.ts +1 -0
  150. package/dist/src/nile-filter-chip/nile-filter-chip.test.js +80 -0
  151. package/dist/src/nile-filter-chip/nile-filter-chip.test.js.map +1 -0
  152. package/dist/src/nile-progress-bar/nile-progress-bar.css.js +1 -0
  153. package/dist/src/nile-progress-bar/nile-progress-bar.css.js.map +1 -1
  154. package/dist/src/nile-select/nile-select.js +1 -1
  155. package/dist/src/nile-select/nile-select.js.map +1 -1
  156. package/dist/src/nile-table/nile-table.js.map +1 -1
  157. package/dist/src/nile-tooltip/nile-tooltip-utils.d.ts +18 -0
  158. package/dist/src/nile-tooltip/nile-tooltip-utils.js +216 -0
  159. package/dist/src/nile-tooltip/nile-tooltip-utils.js.map +1 -0
  160. package/dist/src/nile-tooltip/nile-tooltip.css.js +76 -43
  161. package/dist/src/nile-tooltip/nile-tooltip.css.js.map +1 -1
  162. package/dist/src/nile-tooltip/nile-tooltip.d.ts +24 -46
  163. package/dist/src/nile-tooltip/nile-tooltip.js +235 -232
  164. package/dist/src/nile-tooltip/nile-tooltip.js.map +1 -1
  165. package/dist/src/nile-tooltip/nile-tooltip.test.d.ts +1 -0
  166. package/dist/src/nile-tooltip/nile-tooltip.test.js +148 -0
  167. package/dist/src/nile-tooltip/nile-tooltip.test.js.map +1 -0
  168. package/dist/tsconfig.tsbuildinfo +1 -1
  169. package/package.json +2 -2
  170. package/src/index.ts +2 -1
  171. package/src/nile-code-editor/extensionSetup.ts +13 -1
  172. package/src/nile-code-editor/nile-code-editor.ts +9 -4
  173. package/src/nile-error-message/nile-error-message.css.ts +6 -4
  174. package/src/nile-error-message/nile-error-message.ts +18 -0
  175. package/src/nile-error-notification/nile-error-notification.css.ts +1 -1
  176. package/src/nile-filter-chip/index.ts +1 -0
  177. package/src/nile-filter-chip/nile-filter-chip.css.ts +115 -0
  178. package/src/nile-filter-chip/nile-filter-chip.test.ts +92 -0
  179. package/src/nile-filter-chip/nile-filter-chip.ts +125 -0
  180. package/src/nile-progress-bar/nile-progress-bar.css.ts +1 -0
  181. package/src/nile-select/nile-select.ts +1 -1
  182. package/src/nile-table/nile-table.ts +2 -2
  183. package/src/nile-tooltip/nile-tooltip-utils.ts +271 -0
  184. package/src/nile-tooltip/nile-tooltip.css.ts +77 -44
  185. package/src/nile-tooltip/nile-tooltip.test.ts +168 -0
  186. package/src/nile-tooltip/nile-tooltip.ts +268 -230
  187. package/vscode-html-custom-data.json +150 -96
  188. package/dist/fixture-161dee0b.cjs.js.map +0 -1
@@ -1,23 +1,17 @@
1
+ import { __decorate } from "tslib";
1
2
  /**
2
3
  * Copyright Aquera Inc 2023
3
4
  *
4
5
  * This source code is licensed under the BSD-3-Clause license found in the
5
6
  * LICENSE file in the root directory of this source tree.
6
7
  */
7
- import { __decorate } from "tslib";
8
- import { styles } from './nile-tooltip.css';
9
- import '../nile-popup/nile-popup';
10
- import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
11
- import { classMap } from 'lit/directives/class-map.js';
12
- import { customElement, property, query } from 'lit/decorators.js';
13
- import { getAnimation, setDefaultAnimation, } from '../utilities/animation-registry';
14
8
  import { html } from 'lit';
15
- // import { LocalizeController } from '../utilities/localize';
16
- import { waitForEvent } from '../internal/event';
17
- import { watch } from '../internal/watch';
9
+ import { customElement, property, query } from 'lit/decorators.js';
10
+ import { styles } from './nile-tooltip.css';
18
11
  import NileElement from '../internal/nile-element';
12
+ import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';
19
13
  /**
20
- * Nile icon component.
14
+ * Nile tooltip component.
21
15
  *
22
16
  * @tag nile-tooltip
23
17
  *
@@ -25,279 +19,288 @@ import NileElement from '../internal/nile-element';
25
19
  let NileTooltip = class NileTooltip extends NileElement {
26
20
  constructor() {
27
21
  super(...arguments);
28
- /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
29
22
  this.content = '';
30
- /** Size Property to decide the tool tip size */
31
- this.size = 'small';
32
- /**
33
- * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
34
- * inside of the viewport.
35
- */
36
23
  this.placement = 'top';
37
- /** Disables the tooltip so it won't show when triggered. */
38
24
  this.disabled = false;
39
- /** The distance in pixels from which to offset the tooltip away from its target. */
40
- this.distance = 8;
41
- /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
42
25
  this.open = false;
43
- /** The distance in pixels from which to offset the tooltip along its target. */
44
- this.skidding = 0;
45
26
  /**
46
27
  * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
47
28
  * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
48
29
  * programmatically.
49
30
  */
50
31
  this.trigger = 'hover focus';
51
- /**
52
- * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
53
- * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
54
- * scenarios.
55
- */
32
+ this.distance = 8;
33
+ this.SHIFT_OFFSET = 16;
34
+ /** The distance in pixels from which to offset the tooltip along its target. */
35
+ this.skidding = 0;
56
36
  this.hoist = false;
37
+ this.hasTooltipSlot = false;
38
+ this.hoverTimeout = 0;
39
+ this.caretSize = 6;
40
+ this.originalPlacement = this.placement;
41
+ this.updateTooltipPosition = () => {
42
+ if (!isInViewport(this.triggerContainer)) {
43
+ this.open = false;
44
+ return;
45
+ }
46
+ const triggerRect = this.triggerContainer.getBoundingClientRect();
47
+ const tooltipRect = this.tooltip.getBoundingClientRect();
48
+ const viewportWidth = window.innerWidth;
49
+ const viewportHeight = window.innerHeight;
50
+ let { top, left, placement } = getValidTooltipPosition(triggerRect, tooltipRect, this.originalPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
51
+ // FallBack Positions
52
+ // Bottom
53
+ if (this.originalPlacement.startsWith('bottom')) {
54
+ const availableSpaceBelow = viewportHeight - triggerRect.bottom;
55
+ if (availableSpaceBelow < tooltipRect.height + this.distance) {
56
+ let newPlacement = 'top';
57
+ if (this.originalPlacement === 'bottom-start') {
58
+ newPlacement = 'top';
59
+ }
60
+ else if (this.originalPlacement === 'bottom-end') {
61
+ newPlacement = 'top';
62
+ }
63
+ const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
64
+ top = newPosition.top;
65
+ left = newPosition.left;
66
+ placement = newPosition.placement;
67
+ }
68
+ }
69
+ // Top
70
+ if (this.originalPlacement.startsWith('top')) {
71
+ const availableSpaceAbove = triggerRect.top;
72
+ const availableSpaceBelow = viewportHeight - triggerRect.bottom;
73
+ if (availableSpaceAbove < tooltipRect.height + this.distance && availableSpaceBelow >= tooltipRect.height + this.distance) {
74
+ let newPlacement = 'bottom';
75
+ if (this.originalPlacement === 'top-start') {
76
+ newPlacement = 'bottom-start';
77
+ }
78
+ else if (this.originalPlacement === 'top-end') {
79
+ newPlacement = 'bottom-end';
80
+ }
81
+ const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
82
+ top = newPosition.top;
83
+ left = newPosition.left;
84
+ placement = newPosition.placement;
85
+ }
86
+ }
87
+ // Left
88
+ if (this.originalPlacement.startsWith('left')) {
89
+ const availableSpaceLeft = triggerRect.left;
90
+ const availableSpaceRight = viewportWidth - triggerRect.right;
91
+ if (availableSpaceLeft < tooltipRect.width + this.distance && availableSpaceRight >= tooltipRect.width + this.distance) {
92
+ let newPlacement = 'right';
93
+ if (this.originalPlacement === 'left-start') {
94
+ newPlacement = 'right-start';
95
+ }
96
+ else if (this.originalPlacement === 'left-end') {
97
+ newPlacement = 'right-end';
98
+ }
99
+ const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
100
+ top = newPosition.top;
101
+ left = newPosition.left;
102
+ placement = newPosition.placement;
103
+ }
104
+ }
105
+ // Right
106
+ if (this.originalPlacement.startsWith('right')) {
107
+ const availableSpaceRight = viewportWidth - triggerRect.right;
108
+ const availableSpaceLeft = triggerRect.left;
109
+ if (availableSpaceRight < tooltipRect.width + this.distance && availableSpaceLeft >= tooltipRect.width + this.distance) {
110
+ let newPlacement = 'left';
111
+ if (this.originalPlacement === 'right-start') {
112
+ newPlacement = 'left-start';
113
+ }
114
+ else if (this.originalPlacement === 'right-end') {
115
+ newPlacement = 'left-end';
116
+ }
117
+ const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
118
+ top = newPosition.top;
119
+ left = newPosition.left;
120
+ placement = newPosition.placement;
121
+ }
122
+ }
123
+ this.setAttribute('placement', placement);
124
+ this.tooltip.style.top = `${top}px`;
125
+ this.tooltip.style.left = `${left}px`;
126
+ const { caretLeft, caretTop } = getCaretPosition({
127
+ placement,
128
+ tooltipRect,
129
+ triggerRect,
130
+ caretSize: this.caretSize,
131
+ left,
132
+ top
133
+ });
134
+ this.caret.style.left = `${caretLeft}px`;
135
+ this.caret.style.top = `${caretTop}px`;
136
+ };
137
+ this.showTooltip = () => {
138
+ const trimmedContent = this.content.trim();
139
+ if (!trimmedContent && !this.hasTooltipSlot) {
140
+ return;
141
+ }
142
+ if (!this.disabled && isInViewport(this.triggerContainer)) {
143
+ this.emit('nile-show');
144
+ this.open = true;
145
+ this.updateComplete.then(() => {
146
+ requestAnimationFrame(() => {
147
+ this.updateTooltipPosition();
148
+ this.emit('nile-after-show');
149
+ });
150
+ });
151
+ }
152
+ else {
153
+ this.open = false;
154
+ }
155
+ };
156
+ this.hideTooltip = () => {
157
+ this.emit('nile-hide');
158
+ this.open = false;
159
+ setTimeout(() => {
160
+ this.emit('nile-after-hide');
161
+ }, 200);
162
+ };
163
+ this.handleMouseOver = () => {
164
+ if (this.trigger.includes('hover')) {
165
+ clearTimeout(this.hoverTimeout);
166
+ this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 300);
167
+ }
168
+ };
169
+ this.handleMouseOut = () => {
170
+ if (this.trigger.includes('hover')) {
171
+ clearTimeout(this.hoverTimeout);
172
+ this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 150);
173
+ }
174
+ };
175
+ this.handleClick = () => {
176
+ if (this.trigger.includes('click')) {
177
+ if (!this.open && isInViewport(this.triggerContainer)) {
178
+ this.showTooltip();
179
+ }
180
+ else {
181
+ this.hideTooltip();
182
+ }
183
+ }
184
+ };
185
+ this.handleFocus = () => {
186
+ if (this.trigger.includes('focus')) {
187
+ this.showTooltip();
188
+ }
189
+ };
190
+ this.handleBlur = () => {
191
+ if (this.trigger.includes('focus')) {
192
+ this.hideTooltip();
193
+ }
194
+ };
57
195
  }
58
- /**
59
- * The styles for Tooltip
60
- * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
61
- */
62
196
  static get styles() {
63
197
  return [styles];
64
198
  }
65
199
  connectedCallback() {
66
200
  super.connectedCallback();
67
- this.handleBlur = this.handleBlur.bind(this);
68
- this.handleClick = this.handleClick.bind(this);
69
- this.handleFocus = this.handleFocus.bind(this);
70
- this.handleKeyDown = this.handleKeyDown.bind(this);
71
- this.handleMouseOver = this.handleMouseOver.bind(this);
72
- this.handleMouseOut = this.handleMouseOut.bind(this);
73
- this.updateComplete.then(() => {
74
- this.addEventListener('blur', this.handleBlur, true);
75
- this.addEventListener('focus', this.handleFocus, true);
76
- this.addEventListener('click', this.handleClick);
77
- this.addEventListener('keydown', this.handleKeyDown);
78
- this.addEventListener('mouseover', this.handleMouseOver);
79
- this.addEventListener('mouseout', this.handleMouseOut);
80
- });
201
+ this.originalPlacement = this.placement;
202
+ window.addEventListener('resize', this.updateTooltipPosition);
203
+ window.addEventListener('scroll', this.updateTooltipPosition, true);
81
204
  }
82
- firstUpdated() {
83
- this.body.hidden = !this.open;
84
- // If the tooltip is visible on init, update its position
85
- if (this.open) {
86
- this.popup.active = true;
87
- this.popup.reposition();
205
+ updated(changedProps) {
206
+ super.updated?.(changedProps);
207
+ const validPlacements = [
208
+ 'top', 'top-start', 'top-end',
209
+ 'right', 'right-start', 'right-end',
210
+ 'bottom', 'bottom-start', 'bottom-end',
211
+ 'left', 'left-start', 'left-end'
212
+ ];
213
+ if (!validPlacements.includes(this.placement)) {
214
+ console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`);
215
+ this.placement = 'top';
88
216
  }
89
- }
90
- disconnectedCallback() {
91
- super.disconnectedCallback();
92
- this.removeEventListener('blur', this.handleBlur, true);
93
- this.removeEventListener('focus', this.handleFocus, true);
94
- this.removeEventListener('click', this.handleClick);
95
- this.removeEventListener('keydown', this.handleKeyDown);
96
- this.removeEventListener('mouseover', this.handleMouseOver);
97
- this.removeEventListener('mouseout', this.handleMouseOut);
98
- }
99
- handleBlur() {
100
- if (this.hasTrigger('focus')) {
101
- this.hide();
217
+ if (!validPlacements.includes(this.originalPlacement)) {
218
+ this.originalPlacement = 'top';
102
219
  }
103
- }
104
- handleClick() {
105
- if (this.hasTrigger('click')) {
106
- if (this.open) {
107
- this.hide();
108
- }
109
- else {
110
- this.show();
111
- }
112
- }
113
- }
114
- handleFocus() {
115
- if (this.hasTrigger('focus')) {
116
- this.show();
117
- }
118
- }
119
- handleKeyDown(event) {
120
- // Pressing escape when the target element has focus should dismiss the tooltip
121
- if (this.open && event.key === 'Escape') {
122
- event.stopPropagation();
123
- this.hide();
124
- }
125
- }
126
- handleMouseOver() {
127
- if (this.hasTrigger('hover')) {
128
- const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
129
- clearTimeout(this.hoverTimeout);
130
- this.hoverTimeout = window.setTimeout(() => this.show(), delay);
131
- }
132
- }
133
- handleMouseOut() {
134
- if (this.hasTrigger('hover')) {
135
- const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
136
- clearTimeout(this.hoverTimeout);
137
- this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
138
- }
139
- }
140
- hasTrigger(triggerType) {
141
- const triggers = this.trigger.split(' ');
142
- return triggers.includes(triggerType);
143
- }
144
- async handleOpenChange() {
145
- if (this.open) {
146
- if (this.disabled) {
147
- return;
148
- }
149
- // Show
150
- this.emit('nile-show');
151
- await stopAnimations(this.body);
152
- this.body.hidden = false;
153
- this.popup.active = true;
154
- const { keyframes, options } = getAnimation(this, 'tooltip.show', {
155
- dir: '',
220
+ if (changedProps.has('open') && this.open) {
221
+ this.updateComplete.then(() => {
222
+ requestAnimationFrame(() => {
223
+ this.updateTooltipPosition();
224
+ });
156
225
  });
157
- await animateTo(this.popup.popup, keyframes, options);
158
- this.emit('nile-after-show');
159
- }
160
- else {
161
- // Hide
162
- this.emit('nile-hide');
163
- await stopAnimations(this.body);
164
- const { keyframes, options } = getAnimation(this, 'tooltip.hide', {
165
- dir: '',
166
- });
167
- await animateTo(this.popup.popup, keyframes, options);
168
- this.popup.active = false;
169
- this.body.hidden = true;
170
- this.emit('nile-after-hide');
171
226
  }
172
227
  }
173
- async handleOptionsChange() {
174
- if (this.hasUpdated) {
175
- await this.updateComplete;
176
- this.popup.reposition();
177
- }
178
- }
179
- handleDisabledChange() {
180
- if (this.disabled && this.open) {
181
- this.hide();
182
- }
228
+ disconnectedCallback() {
229
+ super.disconnectedCallback();
230
+ window.removeEventListener('resize', this.updateTooltipPosition);
231
+ window.removeEventListener('scroll', this.updateTooltipPosition, true);
183
232
  }
184
- /** Shows the tooltip. */
185
- async show() {
186
- if (this.open || !this.content?.trim().length) {
187
- return undefined;
188
- }
189
- this.open = true;
190
- return waitForEvent(this, 'nile-after-show');
191
- }
192
- /** Hides the tooltip */
193
- async hide() {
194
- if (!this.open) {
195
- return undefined;
196
- }
197
- this.open = false;
198
- return waitForEvent(this, 'nile-after-hide');
233
+ handleTooltipSlotChange() {
234
+ const nodes = this.tooltipSlot.assignedNodes({ flatten: true });
235
+ this.hasTooltipSlot = nodes.length > 0;
236
+ this.requestUpdate();
199
237
  }
200
238
  render() {
201
239
  return html `
202
- <nile-popup
203
- part="base"
204
- exportparts="
205
- popup:base__popup,
206
- arrow:base__arrow
207
- "
208
- class=${classMap({
209
- tooltip: true,
210
- 'tooltip--open': this.open,
211
- })}
212
- placement=${this.placement}
213
- distance=${this.distance}
214
- skidding=${this.skidding}
215
- strategy=${this.hoist ? 'fixed' : 'absolute'}
216
- flip
217
- shift
218
- arrow
240
+ <div
241
+ class="tooltip"
242
+ id="tooltip"
219
243
  >
220
- <slot slot="anchor" aria-describedby="tooltip"></slot>
244
+ <div class="tooltip-content" part="content">
245
+ <slot name="content" @slotchange=${this.handleTooltipSlotChange}></slot>
246
+ ${!this.hasTooltipSlot ? html `${this.content}` : null}
247
+ </div>
248
+ <div class="tooltip-caret" style="--caret-size: ${this.caretSize}px;"></div>
249
+ </div>
221
250
 
222
- <slot
223
- name="content"
224
- part="body"
225
- id="tooltip"
226
- class=${classMap({
227
- tooltip__body: true,
228
- 'tooltip__body--large': this.size === 'large',
229
- })}
230
- role="tooltip"
231
- aria-live=${this.open ? 'polite' : 'off'}
232
- >
233
- ${this.content}
234
- </slot>
235
- </nile-popup>
251
+ <div
252
+ class="trigger-container"
253
+ tabindex="0"
254
+ @mouseover=${this.handleMouseOver}
255
+ @mouseout=${this.handleMouseOut}
256
+ @click=${this.handleClick}
257
+ @focusin=${this.handleFocus}
258
+ @focusout=${this.handleBlur}
259
+ aria-describedby="tooltip"
260
+ >
261
+ <slot></slot>
262
+ </div>
236
263
  `;
237
264
  }
238
265
  };
239
266
  __decorate([
240
- query('slot:not([name])')
241
- ], NileTooltip.prototype, "defaultSlot", void 0);
242
- __decorate([
243
- query('.tooltip__body')
244
- ], NileTooltip.prototype, "body", void 0);
245
- __decorate([
246
- query('nile-popup')
247
- ], NileTooltip.prototype, "popup", void 0);
248
- __decorate([
249
- property({ type: String, reflect: true })
267
+ property({ type: String })
250
268
  ], NileTooltip.prototype, "content", void 0);
251
269
  __decorate([
252
- property({ reflect: true })
253
- ], NileTooltip.prototype, "size", void 0);
254
- __decorate([
255
- property()
270
+ property({ type: String })
256
271
  ], NileTooltip.prototype, "placement", void 0);
257
272
  __decorate([
258
273
  property({ type: Boolean, reflect: true })
259
274
  ], NileTooltip.prototype, "disabled", void 0);
260
- __decorate([
261
- property({ type: Number })
262
- ], NileTooltip.prototype, "distance", void 0);
263
275
  __decorate([
264
276
  property({ type: Boolean, reflect: true })
265
277
  ], NileTooltip.prototype, "open", void 0);
266
- __decorate([
267
- property({ type: Number })
268
- ], NileTooltip.prototype, "skidding", void 0);
269
278
  __decorate([
270
279
  property()
271
280
  ], NileTooltip.prototype, "trigger", void 0);
272
281
  __decorate([
273
- property({ type: Boolean })
282
+ property({ type: Number })
283
+ ], NileTooltip.prototype, "distance", void 0);
284
+ __decorate([
285
+ property({ type: Number })
286
+ ], NileTooltip.prototype, "skidding", void 0);
287
+ __decorate([
288
+ property({ type: Boolean, reflect: true })
274
289
  ], NileTooltip.prototype, "hoist", void 0);
275
290
  __decorate([
276
- watch('open', { waitUntilFirstUpdate: true })
277
- ], NileTooltip.prototype, "handleOpenChange", null);
291
+ query('.tooltip')
292
+ ], NileTooltip.prototype, "tooltip", void 0);
293
+ __decorate([
294
+ query('.trigger-container')
295
+ ], NileTooltip.prototype, "triggerContainer", void 0);
278
296
  __decorate([
279
- watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
280
- ], NileTooltip.prototype, "handleOptionsChange", null);
297
+ query('.tooltip-caret')
298
+ ], NileTooltip.prototype, "caret", void 0);
281
299
  __decorate([
282
- watch('disabled')
283
- ], NileTooltip.prototype, "handleDisabledChange", null);
300
+ query('slot[name="content"]')
301
+ ], NileTooltip.prototype, "tooltipSlot", void 0);
284
302
  NileTooltip = __decorate([
285
303
  customElement('nile-tooltip')
286
304
  ], NileTooltip);
287
305
  export { NileTooltip };
288
- setDefaultAnimation('tooltip.show', {
289
- keyframes: [
290
- { opacity: 0, scale: 0.8 },
291
- { opacity: 1, scale: 1 },
292
- ],
293
- options: { duration: 150, easing: 'ease' },
294
- });
295
- setDefaultAnimation('tooltip.hide', {
296
- keyframes: [
297
- { opacity: 1, scale: 1 },
298
- { opacity: 0, scale: 0.8 },
299
- ],
300
- options: { duration: 150, easing: 'ease' },
301
- });
302
- export default NileTooltip;
303
306
  //# sourceMappingURL=nile-tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-tooltip.css';\nimport '../nile-popup/nile-popup';\nimport { animateTo, parseDuration, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n getAnimation,\n setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { html } from 'lit';\n// import { LocalizeController } from '../utilities/localize';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NilePopup from '../nile-popup/nile-popup';\n/**\n * Nile icon component.\n *\n * @tag nile-tooltip\n *\n */\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n /**\n * The styles for Tooltip\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private hoverTimeout: number;\n // private readonly localize = new LocalizeController(this);\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n @query('.tooltip__body') body: HTMLElement;\n @query('nile-popup') popup: NilePopup;\n\n /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */\n @property({ type: String, reflect: true }) content = '';\n\n /** Size Property to decide the tool tip size */\n @property({ reflect: true }) size: 'small' | 'large' = 'small';\n\n /**\n * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n */\n @property() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /** Disables the tooltip so it won't show when triggered. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** The distance in pixels from which to offset the tooltip away from its target. */\n @property({ type: Number }) distance = 8;\n\n /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** The distance in pixels from which to offset the tooltip along its target. */\n @property({ type: Number }) skidding = 0;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @property() trigger = 'hover focus';\n\n /**\n * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n * scenarios.\n */\n @property({ type: Boolean }) hoist = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.handleBlur = this.handleBlur.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleMouseOver = this.handleMouseOver.bind(this);\n this.handleMouseOut = this.handleMouseOut.bind(this);\n\n this.updateComplete.then(() => {\n this.addEventListener('blur', this.handleBlur, true);\n this.addEventListener('focus', this.handleFocus, true);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeyDown);\n this.addEventListener('mouseover', this.handleMouseOver);\n this.addEventListener('mouseout', this.handleMouseOut);\n });\n }\n\n firstUpdated() {\n this.body.hidden = !this.open;\n\n // If the tooltip is visible on init, update its position\n if (this.open) {\n this.popup.active = true;\n this.popup.reposition();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('blur', this.handleBlur, true);\n this.removeEventListener('focus', this.handleFocus, true);\n this.removeEventListener('click', this.handleClick);\n this.removeEventListener('keydown', this.handleKeyDown);\n this.removeEventListener('mouseover', this.handleMouseOver);\n this.removeEventListener('mouseout', this.handleMouseOut);\n }\n\n private handleBlur() {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n }\n\n private handleClick() {\n if (this.hasTrigger('click')) {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n }\n\n private handleFocus() {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n }\n\n private handleMouseOver() {\n if (this.hasTrigger('hover')) {\n const delay = parseDuration(\n getComputedStyle(this).getPropertyValue('--show-delay')\n );\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.show(), delay);\n }\n }\n\n private handleMouseOut() {\n if (this.hasTrigger('hover')) {\n const delay = parseDuration(\n getComputedStyle(this).getPropertyValue('--hide-delay')\n );\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.hide(), delay);\n }\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n if (this.disabled) {\n return;\n }\n\n // Show\n this.emit('nile-show');\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n this.popup.active = true;\n const { keyframes, options } = getAnimation(this, 'tooltip.show', {\n dir: '',\n });\n await animateTo(this.popup.popup, keyframes, options);\n\n this.emit('nile-after-show');\n } else {\n // Hide\n this.emit('nile-hide');\n\n await stopAnimations(this.body);\n const { keyframes, options } = getAnimation(this, 'tooltip.hide', {\n dir: '',\n });\n await animateTo(this.popup.popup, keyframes, options);\n this.popup.active = false;\n this.body.hidden = true;\n\n this.emit('nile-after-hide');\n }\n }\n\n @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])\n async handleOptionsChange() {\n if (this.hasUpdated) {\n await this.updateComplete;\n this.popup.reposition();\n }\n }\n\n @watch('disabled')\n handleDisabledChange() {\n if (this.disabled && this.open) {\n this.hide();\n }\n }\n\n /** Shows the tooltip. */\n async show() {\n if (this.open || !this.content?.trim().length) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'nile-after-show');\n }\n\n /** Hides the tooltip */\n async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'nile-after-hide');\n }\n\n render() {\n return html`\n <nile-popup\n part=\"base\"\n exportparts=\"\n popup:base__popup,\n arrow:base__arrow\n \"\n class=${classMap({\n tooltip: true,\n 'tooltip--open': this.open,\n })}\n placement=${this.placement}\n distance=${this.distance}\n skidding=${this.skidding}\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n flip\n shift\n arrow\n >\n <slot slot=\"anchor\" aria-describedby=\"tooltip\"></slot>\n\n <slot\n name=\"content\"\n part=\"body\"\n id=\"tooltip\"\n class=${classMap({\n tooltip__body: true,\n 'tooltip__body--large': this.size === 'large',\n })}\n role=\"tooltip\"\n aria-live=${this.open ? 'polite' : 'off'}\n >\n ${this.content}\n </slot>\n </nile-popup>\n `;\n }\n}\n\nsetDefaultAnimation('tooltip.show', {\n keyframes: [\n { opacity: 0, scale: 0.8 },\n { opacity: 1, scale: 1 },\n ],\n options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('tooltip.hide', {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.8 },\n ],\n options: { duration: 150, easing: 'ease' },\n});\n\nexport default NileTooltip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tooltip': NileTooltip;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["\n/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { LitElement, html, css, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-tooltip.css';\nimport NileElement from '../internal/nile-element';\nimport { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';\n\n/**\n * Nile tooltip component.\n *\n * @tag nile-tooltip\n *\n */\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n @property({ type: String }) content = '';\n @property({ type: String })\n placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) open = false;\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @property() trigger = 'hover focus';\n @property({ type: Number }) distance = 8;\n private readonly SHIFT_OFFSET = 16;\n /** The distance in pixels from which to offset the tooltip along its target. */\n @property({ type: Number }) skidding = 0;\n @property({ type: Boolean, reflect: true }) hoist = false;\n\n @query('.tooltip') tooltip!: HTMLElement;\n @query('.trigger-container') triggerContainer!: HTMLElement;\n @query('.tooltip-caret') caret!: HTMLElement;\n @query('slot[name=\"content\"]') tooltipSlot!: HTMLSlotElement;\n\n private hasTooltipSlot = false;\n private hoverTimeout: number = 0;\n private caretSize = 6;\n private originalPlacement: string = this.placement;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.originalPlacement = this.placement;\n window.addEventListener('resize', this.updateTooltipPosition);\n window.addEventListener('scroll', this.updateTooltipPosition, true);\n }\n\n updated(changedProps: Map<string, unknown>) {\n super.updated?.(changedProps);\n\n const validPlacements = [\n 'top', 'top-start', 'top-end',\n 'right', 'right-start', 'right-end',\n 'bottom', 'bottom-start', 'bottom-end',\n 'left', 'left-start', 'left-end'\n ];\n\n if (!validPlacements.includes(this.placement)) {\n console.warn(`[nile-tooltip] Invalid placement \"${this.placement}\", defaulting to \"bottom\".`);\n this.placement = 'top';\n }\n\n if (!validPlacements.includes(this.originalPlacement)) {\n this.originalPlacement = 'top';\n }\n \n if (changedProps.has('open') && this.open) {\n this.updateComplete.then(() => {\n requestAnimationFrame(() => {\n this.updateTooltipPosition();\n });\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('resize', this.updateTooltipPosition);\n window.removeEventListener('scroll', this.updateTooltipPosition, true);\n }\n\n private handleTooltipSlotChange() {\n const nodes = this.tooltipSlot.assignedNodes({ flatten: true });\n this.hasTooltipSlot = nodes.length > 0;\n this.requestUpdate();\n }\n\n private updateTooltipPosition = () => {\n if (!isInViewport(this.triggerContainer)) {\n this.open = false;\n return;\n }\n\n const triggerRect = this.triggerContainer.getBoundingClientRect();\n const tooltipRect = this.tooltip.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n \n let { top, left, placement } = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n this.originalPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n\n // FallBack Positions\n\n // Bottom\n if (this.originalPlacement.startsWith('bottom')) {\n const availableSpaceBelow = viewportHeight - triggerRect.bottom;\n if (availableSpaceBelow < tooltipRect.height + this.distance) {\n let newPlacement: typeof this.originalPlacement = 'top';\n if (this.originalPlacement === 'bottom-start') {\n newPlacement = 'top';\n } else if (this.originalPlacement === 'bottom-end') {\n newPlacement = 'top';\n }\n \n const newPosition = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n newPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n top = newPosition.top;\n left = newPosition.left;\n placement = newPosition.placement;\n }\n }\n // Top\n if (this.originalPlacement.startsWith('top')) {\n const availableSpaceAbove = triggerRect.top;\n const availableSpaceBelow = viewportHeight - triggerRect.bottom;\n if (availableSpaceAbove < tooltipRect.height + this.distance && availableSpaceBelow >= tooltipRect.height + this.distance) {\n let newPlacement: typeof this.originalPlacement = 'bottom';\n if (this.originalPlacement === 'top-start') {\n newPlacement = 'bottom-start';\n } else if (this.originalPlacement === 'top-end') {\n newPlacement = 'bottom-end';\n }\n \n const newPosition = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n newPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n top = newPosition.top;\n left = newPosition.left;\n placement = newPosition.placement;\n }\n }\n\n // Left\n if (this.originalPlacement.startsWith('left')) {\n const availableSpaceLeft = triggerRect.left;\n const availableSpaceRight = viewportWidth - triggerRect.right;\n if (availableSpaceLeft < tooltipRect.width + this.distance && availableSpaceRight >= tooltipRect.width + this.distance) {\n let newPlacement: typeof this.originalPlacement = 'right';\n if (this.originalPlacement === 'left-start') {\n newPlacement = 'right-start';\n } else if (this.originalPlacement === 'left-end') {\n newPlacement = 'right-end';\n }\n \n const newPosition = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n newPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n top = newPosition.top;\n left = newPosition.left;\n placement = newPosition.placement;\n }\n }\n\n // Right\n if (this.originalPlacement.startsWith('right')) {\n const availableSpaceRight = viewportWidth - triggerRect.right;\n const availableSpaceLeft = triggerRect.left;\n if (availableSpaceRight < tooltipRect.width + this.distance && availableSpaceLeft >= tooltipRect.width + this.distance) {\n let newPlacement: typeof this.originalPlacement = 'left';\n if (this.originalPlacement === 'right-start') {\n newPlacement = 'left-start';\n } else if (this.originalPlacement === 'right-end') {\n newPlacement = 'left-end';\n }\n \n const newPosition = getValidTooltipPosition(\n triggerRect,\n tooltipRect,\n newPlacement,\n this.distance,\n this.skidding,\n this.caretSize,\n viewportWidth,\n viewportHeight\n );\n top = newPosition.top;\n left = newPosition.left;\n placement = newPosition.placement;\n }\n }\n\n this.setAttribute('placement', placement);\n this.tooltip.style.top = `${top}px`;\n this.tooltip.style.left = `${left}px`;\n\n const { caretLeft, caretTop } = getCaretPosition({\n placement,\n tooltipRect,\n triggerRect,\n caretSize: this.caretSize,\n left,\n top\n });\n\n this.caret.style.left = `${caretLeft}px`;\n this.caret.style.top = `${caretTop}px`;\n };\n\n private showTooltip = () => {\n const trimmedContent = this.content.trim();\n if (!trimmedContent && !this.hasTooltipSlot) {\n return;\n }\n if (!this.disabled && isInViewport(this.triggerContainer)) {\n this.emit('nile-show');\n this.open = true;\n this.updateComplete.then(() => {\n requestAnimationFrame(() => {\n this.updateTooltipPosition();\n this.emit('nile-after-show');\n });\n });\n } else {\n this.open = false;\n }\n };\n\n private hideTooltip = () => {\n this.emit('nile-hide');\n this.open = false;\n setTimeout(() => {\n this.emit('nile-after-hide');\n }, 200);\n };\n\n private handleMouseOver = () => {\n if (this.trigger.includes('hover')) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 300);\n }\n };\n\n private handleMouseOut = () => {\n if (this.trigger.includes('hover')) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 150);\n }\n };\n\n private handleClick = () => {\n if (this.trigger.includes('click')) {\n if (!this.open && isInViewport(this.triggerContainer)) {\n this.showTooltip();\n } else {\n this.hideTooltip();\n }\n }\n };\n\n private handleFocus = () => {\n if (this.trigger.includes('focus')) {\n this.showTooltip();\n }\n };\n \n\n private handleBlur = () => {\n if (this.trigger.includes('focus')) {\n this.hideTooltip();\n }\n };\n\n render() {\n return html`\n <div\n class=\"tooltip\"\n id=\"tooltip\"\n >\n <div class=\"tooltip-content\" part=\"content\">\n <slot name=\"content\" @slotchange=${this.handleTooltipSlotChange}></slot>\n ${!this.hasTooltipSlot ? html`${this.content}` : null}\n </div>\n <div class=\"tooltip-caret\" style=\"--caret-size: ${this.caretSize}px;\"></div>\n </div>\n\n <div\n class=\"trigger-container\"\n tabindex=\"0\"\n @mouseover=${this.handleMouseOver}\n @mouseout=${this.handleMouseOut}\n @click=${this.handleClick}\n @focusin=${this.handleFocus}\n @focusout=${this.handleBlur}\n aria-describedby=\"tooltip\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tooltip': NileTooltip;\n }\n}\n"]}
@@ -0,0 +1 @@
1
+ import './nile-tooltip';