@aquera/nile-elements 0.1.32-beta-1.1 → 0.1.32-beta-1.3

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 (174) hide show
  1. package/README.md +7 -21
  2. package/demo/index.html +9 -5
  3. package/dist/axe.min-2b379f29.cjs.js +12 -0
  4. package/dist/axe.min-2b379f29.cjs.js.map +1 -0
  5. package/dist/axe.min-c2cd8733.esm.js +12 -0
  6. package/dist/{fixture-3acb409b.cjs.js → fixture-161dee0b.cjs.js} +2 -2
  7. package/dist/{fixture-3acb409b.cjs.js.map → fixture-161dee0b.cjs.js.map} +1 -1
  8. package/dist/{fixture-db35a8ae.esm.js → fixture-372df3b0.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-accordion/nile-accordion.cjs.js +1 -1
  17. package/dist/nile-accordion/nile-accordion.cjs.js.map +1 -1
  18. package/dist/nile-accordion/nile-accordion.css.cjs.js +1 -1
  19. package/dist/nile-accordion/nile-accordion.css.cjs.js.map +1 -1
  20. package/dist/nile-accordion/nile-accordion.css.esm.js +1 -1
  21. package/dist/nile-accordion/nile-accordion.esm.js +4 -4
  22. package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
  23. package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
  24. package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
  25. package/dist/nile-avatar/nile-avatar.test.esm.js +1 -1
  26. package/dist/nile-badge/nile-badge.test.cjs.js +1 -1
  27. package/dist/nile-badge/nile-badge.test.esm.js +1 -1
  28. package/dist/nile-button/nile-button.test.cjs.js +1 -1
  29. package/dist/nile-button/nile-button.test.esm.js +1 -1
  30. package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.js +1 -1
  31. package/dist/nile-button-toggle-group/nile-button-toggle-group.test.esm.js +1 -1
  32. package/dist/nile-calendar/nile-calendar.test.cjs.js +1 -1
  33. package/dist/nile-calendar/nile-calendar.test.esm.js +1 -1
  34. package/dist/nile-card/nile-card.test.cjs.js +1 -1
  35. package/dist/nile-card/nile-card.test.esm.js +1 -1
  36. package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
  37. package/dist/nile-checkbox/nile-checkbox.test.esm.js +1 -1
  38. package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
  39. package/dist/nile-chip/nile-chip.test.esm.js +1 -1
  40. package/dist/nile-circular-progressbar/nile-circular-progressbar.css.cjs.js +1 -1
  41. package/dist/nile-circular-progressbar/nile-circular-progressbar.css.cjs.js.map +1 -1
  42. package/dist/nile-circular-progressbar/nile-circular-progressbar.css.esm.js +49 -49
  43. package/dist/nile-code-editor/extensionSetup.cjs.js +7 -7
  44. package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
  45. package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
  46. package/dist/nile-code-editor/nile-code-editor.cjs.js +2 -2
  47. package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
  48. package/dist/nile-code-editor/nile-code-editor.esm.js +2 -2
  49. package/dist/nile-dialog/nile-dialog.test.cjs.js +1 -1
  50. package/dist/nile-dialog/nile-dialog.test.esm.js +1 -1
  51. package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
  52. package/dist/nile-drawer/nile-drawer.test.esm.js +1 -1
  53. package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
  54. package/dist/nile-dropdown/nile-dropdown.test.esm.js +1 -1
  55. package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
  56. package/dist/nile-empty-state/nile-empty-state.test.esm.js +1 -1
  57. package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
  58. package/dist/nile-error-message/nile-error-message.test.esm.js +1 -1
  59. package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
  60. package/dist/nile-form-group/nile-form-group.test.esm.js +1 -1
  61. package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
  62. package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
  63. package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
  64. package/dist/nile-hero/nile-hero.test.esm.js +1 -1
  65. package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
  66. package/dist/nile-icon/nile-icon.test.esm.js +1 -1
  67. package/dist/nile-input/nile-input.css.cjs.js +1 -1
  68. package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
  69. package/dist/nile-input/nile-input.css.esm.js +8 -0
  70. package/dist/nile-input/nile-input.test.cjs.js +1 -1
  71. package/dist/nile-input/nile-input.test.esm.js +1 -1
  72. package/dist/nile-link/nile-link.test.cjs.js +1 -1
  73. package/dist/nile-link/nile-link.test.esm.js +1 -1
  74. package/dist/nile-loader/nile-loader.test.cjs.js +1 -1
  75. package/dist/nile-loader/nile-loader.test.esm.js +1 -1
  76. package/dist/nile-popover/nile-popover.test.cjs.js +1 -1
  77. package/dist/nile-popover/nile-popover.test.esm.js +1 -1
  78. package/dist/nile-popup/nile-popup.test.cjs.js +1 -1
  79. package/dist/nile-popup/nile-popup.test.esm.js +1 -1
  80. package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
  81. package/dist/nile-progress-bar/nile-progress-bar.test.esm.js +1 -1
  82. package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
  83. package/dist/nile-radio/nile-radio.test.esm.js +1 -1
  84. package/dist/nile-radio-group/nile-radio-group.test.cjs.js +1 -1
  85. package/dist/nile-radio-group/nile-radio-group.test.esm.js +1 -1
  86. package/dist/nile-select/nile-select.test.cjs.js +1 -1
  87. package/dist/nile-select/nile-select.test.esm.js +1 -1
  88. package/dist/nile-slide-toggle/nile-slide-toggle.test.cjs.js +1 -1
  89. package/dist/nile-slide-toggle/nile-slide-toggle.test.esm.js +1 -1
  90. package/dist/nile-tab-group/nile-tab-group.test.cjs.js +1 -1
  91. package/dist/nile-tab-group/nile-tab-group.test.esm.js +1 -1
  92. package/dist/nile-table-body/nile-table-body.cjs.js +1 -1
  93. package/dist/nile-table-body/nile-table-body.cjs.js.map +1 -1
  94. package/dist/nile-table-body/nile-table-body.esm.js +2 -2
  95. package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js +1 -1
  96. package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js.map +1 -1
  97. package/dist/nile-table-cell-item/nile-table-cell-item.css.esm.js +2 -4
  98. package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js +1 -1
  99. package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js.map +1 -1
  100. package/dist/nile-table-header-item/nile-table-header-item.css.esm.js +0 -2
  101. package/dist/nile-table-row/nile-table-row.cjs.js.map +1 -1
  102. package/dist/nile-textarea/nile-textarea.test.cjs.js +1 -1
  103. package/dist/nile-textarea/nile-textarea.test.esm.js +1 -1
  104. package/dist/nile-tooltip/index.cjs.js +1 -1
  105. package/dist/nile-tooltip/index.esm.js +1 -1
  106. package/dist/nile-tooltip/nile-tooltip.cjs.js +1 -1
  107. package/dist/nile-tooltip/nile-tooltip.cjs.js.map +1 -1
  108. package/dist/nile-tooltip/nile-tooltip.css.cjs.js +1 -1
  109. package/dist/nile-tooltip/nile-tooltip.css.cjs.js.map +1 -1
  110. package/dist/nile-tooltip/nile-tooltip.css.esm.js +56 -115
  111. package/dist/nile-tooltip/nile-tooltip.esm.js +30 -13
  112. package/dist/src/index.d.ts +0 -1
  113. package/dist/src/index.js +0 -1
  114. package/dist/src/index.js.map +1 -1
  115. package/dist/src/nile-accordion/nile-accordion.css.js +1 -1
  116. package/dist/src/nile-accordion/nile-accordion.css.js.map +1 -1
  117. package/dist/src/nile-accordion/nile-accordion.d.ts +5 -6
  118. package/dist/src/nile-accordion/nile-accordion.js +8 -21
  119. package/dist/src/nile-accordion/nile-accordion.js.map +1 -1
  120. package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js +49 -49
  121. package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js.map +1 -1
  122. package/dist/src/nile-input/nile-input.css.js +8 -0
  123. package/dist/src/nile-input/nile-input.css.js.map +1 -1
  124. package/dist/src/nile-table-body/nile-table-body.d.ts +1 -3
  125. package/dist/src/nile-table-body/nile-table-body.js +1 -9
  126. package/dist/src/nile-table-body/nile-table-body.js.map +1 -1
  127. package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js +2 -4
  128. package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map +1 -1
  129. package/dist/src/nile-table-header-item/nile-table-header-item.css.js +0 -2
  130. package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map +1 -1
  131. package/dist/src/nile-table-row/nile-table-row.js.map +1 -1
  132. package/dist/src/nile-tooltip/nile-tooltip.css.js +54 -113
  133. package/dist/src/nile-tooltip/nile-tooltip.css.js.map +1 -1
  134. package/dist/src/nile-tooltip/nile-tooltip.d.ts +62 -22
  135. package/dist/src/nile-tooltip/nile-tooltip.js +244 -180
  136. package/dist/src/nile-tooltip/nile-tooltip.js.map +1 -1
  137. package/dist/tsconfig.tsbuildinfo +1 -1
  138. package/package.json +3 -3
  139. package/src/index.ts +1 -2
  140. package/src/nile-accordion/nile-accordion.css.ts +1 -1
  141. package/src/nile-accordion/nile-accordion.ts +4 -15
  142. package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts +56 -55
  143. package/src/nile-input/nile-input.css.ts +8 -0
  144. package/src/nile-table-body/nile-table-body.ts +2 -8
  145. package/src/nile-table-cell-item/nile-table-cell-item.css.ts +2 -4
  146. package/src/nile-table-header-item/nile-table-header-item.css.ts +0 -2
  147. package/src/nile-table-row/nile-table-row.ts +2 -1
  148. package/src/nile-tooltip/nile-tooltip.css.ts +54 -113
  149. package/src/nile-tooltip/nile-tooltip.ts +269 -207
  150. package/vscode-html-custom-data.json +18 -36
  151. package/dist/axe.min-5bf06036.esm.js +0 -12
  152. package/dist/axe.min-ff35bfba.cjs.js +0 -12
  153. package/dist/axe.min-ff35bfba.cjs.js.map +0 -1
  154. package/dist/nile-table/index.cjs.js +0 -2
  155. package/dist/nile-table/index.cjs.js.map +0 -1
  156. package/dist/nile-table/index.esm.js +0 -1
  157. package/dist/nile-table/nile-table.cjs.js +0 -2
  158. package/dist/nile-table/nile-table.cjs.js.map +0 -1
  159. package/dist/nile-table/nile-table.css.cjs.js +0 -2
  160. package/dist/nile-table/nile-table.css.cjs.js.map +0 -1
  161. package/dist/nile-table/nile-table.css.esm.js +0 -6
  162. package/dist/nile-table/nile-table.esm.js +0 -3
  163. package/dist/src/nile-table/index.d.ts +0 -1
  164. package/dist/src/nile-table/index.js +0 -2
  165. package/dist/src/nile-table/index.js.map +0 -1
  166. package/dist/src/nile-table/nile-table.css.d.ts +0 -12
  167. package/dist/src/nile-table/nile-table.css.js +0 -18
  168. package/dist/src/nile-table/nile-table.css.js.map +0 -1
  169. package/dist/src/nile-table/nile-table.d.ts +0 -47
  170. package/dist/src/nile-table/nile-table.js +0 -137
  171. package/dist/src/nile-table/nile-table.js.map +0 -1
  172. package/src/nile-table/index.ts +0 -1
  173. package/src/nile-table/nile-table.css.ts +0 -20
  174. package/src/nile-table/nile-table.ts +0 -154
@@ -1,239 +1,303 @@
1
+ /**
2
+ * Copyright Aquera Inc 2023
3
+ *
4
+ * This source code is licensed under the BSD-3-Clause license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
1
7
  import { __decorate } from "tslib";
2
- import { html } from 'lit';
3
- import { customElement, property, query } from 'lit/decorators.js';
4
- import { classMap } from 'lit/directives/class-map.js';
5
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
+ import { html } from 'lit';
15
+ // import { LocalizeController } from '../utilities/localize';
16
+ import { waitForEvent } from '../internal/event';
17
+ import { watch } from '../internal/watch';
6
18
  import NileElement from '../internal/nile-element';
7
- // CSS Anchor positiong
19
+ /**
20
+ * Nile icon component.
21
+ *
22
+ * @tag nile-tooltip
23
+ *
24
+ */
8
25
  let NileTooltip = class NileTooltip extends NileElement {
9
26
  constructor() {
10
27
  super(...arguments);
28
+ /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
11
29
  this.content = '';
30
+ /** Size Property to decide the tool tip size */
12
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
+ */
13
36
  this.placement = 'top';
37
+ /** Disables the tooltip so it won't show when triggered. */
14
38
  this.disabled = false;
15
- this.open = false;
16
- this.trigger = 'hover focus';
39
+ /** The distance in pixels from which to offset the tooltip away from its target. */
17
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
+ this.open = false;
43
+ /** The distance in pixels from which to offset the tooltip along its target. */
18
44
  this.skidding = 0;
45
+ /**
46
+ * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
47
+ * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
48
+ * programmatically.
49
+ */
50
+ 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
+ */
19
56
  this.hoist = false;
20
- this.updateTooltipPosition = () => {
21
- if (!this.tooltip || !this.open)
22
- return;
23
- const triggerEl = this.slotElement.assignedElements()[0];
24
- if (!triggerEl)
25
- return;
26
- const triggerRect = triggerEl.getBoundingClientRect();
27
- const tooltipRect = this.tooltip.getBoundingClientRect();
28
- const viewportWidth = window.innerWidth;
29
- const viewportHeight = window.innerHeight;
30
- let top = 0, left = 0;
31
- let finalPlacement = this.placement;
32
- const basePlacement = this.getBasePlacement(this.placement);
33
- const alignment = this.getAlignmentModifier(this.placement);
34
- const fitsLeft = triggerRect.left - tooltipRect.width - this.distance > 0;
35
- const fitsRight = triggerRect.right + tooltipRect.width + this.distance < viewportWidth;
36
- const fitsBottom = triggerRect.bottom + tooltipRect.height + this.distance < viewportHeight;
37
- const fitsTop = triggerRect.top - tooltipRect.height - this.distance > 0;
38
- let finalBasePlacement = basePlacement;
39
- if ((basePlacement === 'left' && !fitsLeft) || (basePlacement === 'right' && !fitsRight)) {
40
- finalBasePlacement = fitsBottom ? 'bottom' : (fitsTop ? 'top' : 'bottom');
41
- }
42
- else if (basePlacement === 'top' && !fitsTop) {
43
- finalBasePlacement = fitsBottom ? 'bottom' : (fitsLeft ? 'left' : 'right');
44
- }
45
- else if (basePlacement === 'bottom' && !fitsBottom) {
46
- finalBasePlacement = fitsTop ? 'top' : (fitsLeft ? 'left' : 'right');
47
- }
48
- let finalAlignment = alignment;
49
- if ((basePlacement === 'left' || basePlacement === 'right') &&
50
- (finalBasePlacement === 'top' || finalBasePlacement === 'bottom')) {
51
- if (alignment === 'start') {
52
- finalAlignment = 'start';
53
- }
54
- else if (alignment === 'end') {
55
- finalAlignment = 'end';
56
- }
57
- }
58
- switch (finalBasePlacement) {
59
- case 'left':
60
- top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;
61
- left = triggerRect.left - tooltipRect.width - this.distance;
62
- break;
63
- case 'right':
64
- top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;
65
- left = triggerRect.right + this.distance;
66
- break;
67
- case 'top':
68
- top = triggerRect.top - tooltipRect.height - this.distance;
69
- left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;
70
- break;
71
- case 'bottom':
72
- top = triggerRect.bottom + this.distance;
73
- left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;
74
- break;
75
- }
76
- if ((finalBasePlacement === 'top' || finalBasePlacement === 'bottom') && finalAlignment) {
77
- if (finalAlignment === 'start') {
78
- left = triggerRect.left + this.skidding;
79
- }
80
- else if (finalAlignment === 'end') {
81
- left = triggerRect.right - tooltipRect.width + this.skidding;
82
- }
83
- }
84
- if ((finalBasePlacement === 'left' || finalBasePlacement === 'right') && finalAlignment) {
85
- if (finalAlignment === 'start') {
86
- top = triggerRect.top + this.skidding;
87
- }
88
- else if (finalAlignment === 'end') {
89
- top = triggerRect.bottom - tooltipRect.height + this.skidding;
90
- }
91
- }
92
- finalPlacement = finalAlignment ? `${finalBasePlacement}-${finalAlignment}` : finalBasePlacement;
93
- if (left < 0)
94
- left = 5;
95
- if (left + tooltipRect.width > viewportWidth)
96
- left = viewportWidth - tooltipRect.width - 5;
97
- if (top < 0)
98
- top = 5;
99
- if (top + tooltipRect.height > viewportHeight)
100
- top = viewportHeight - tooltipRect.height - 5;
101
- this.tooltip.style.top = `${top}px`;
102
- this.tooltip.style.left = `${left}px`;
103
- this.tooltip.setAttribute('data-placement', finalPlacement);
104
- };
105
- this.showTooltip = () => {
106
- if (!this.disabled &&
107
- this.content.trim() !== '') {
108
- this.open = true;
109
- this.emit('nile-show');
110
- this.updateComplete.then(() => {
111
- this.updateTooltipPosition();
112
- this.tooltip.addEventListener('transitionend', this.handleAfterShow, { once: true });
113
- });
114
- }
115
- };
116
- this.handleAfterShow = () => {
117
- this.emit('nile-after-show');
118
- };
119
- this.hideTooltip = () => {
120
- if (!this.open)
121
- return;
122
- this.emit('nile-hide');
123
- this.open = false;
124
- this.tooltip.addEventListener('transitionend', this.handleAfterHide, { once: true });
125
- };
126
- this.handleAfterHide = () => {
127
- this.emit('nile-after-hide');
128
- };
129
- this.handleMouseOver = () => {
130
- if (this.trigger.includes('hover')) {
131
- clearTimeout(this.hoverTimeout);
132
- this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);
133
- }
134
- };
135
- this.handleMouseOut = () => {
136
- if (this.trigger.includes('hover')) {
137
- clearTimeout(this.hoverTimeout);
138
- this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);
139
- }
140
- };
141
- this.handleClick = () => {
142
- if (this.trigger.includes('click')) {
143
- this.open = !this.open;
144
- this.emit('nile-show');
145
- this.updateComplete.then(() => this.updateTooltipPosition());
146
- }
147
- };
148
- this.handleFocus = () => {
149
- if (this.trigger.includes('focus')) {
150
- this.showTooltip();
151
- }
152
- };
153
- this.handleBlur = () => {
154
- if (this.trigger.includes('focus')) {
155
- this.hideTooltip();
156
- }
157
- };
158
57
  }
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
+ */
159
62
  static get styles() {
160
63
  return [styles];
161
64
  }
162
65
  connectedCallback() {
163
66
  super.connectedCallback();
164
- window.addEventListener('resize', this.updateTooltipPosition);
165
- window.addEventListener('scroll', this.updateTooltipPosition, true);
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
+ });
81
+ }
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();
88
+ }
166
89
  }
167
90
  disconnectedCallback() {
168
91
  super.disconnectedCallback();
169
- window.removeEventListener('resize', this.updateTooltipPosition);
170
- window.removeEventListener('scroll', this.updateTooltipPosition, true);
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);
171
98
  }
172
- getBasePlacement(placement) {
173
- return placement.split('-')[0];
99
+ handleBlur() {
100
+ if (this.hasTrigger('focus')) {
101
+ this.hide();
102
+ }
174
103
  }
175
- getAlignmentModifier(placement) {
176
- const parts = placement.split('-');
177
- return parts.length > 1 ? parts[1] : null;
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
+ }
178
118
  }
179
- updated(changedProperties) {
180
- super.updated(changedProperties);
181
- if (changedProperties.has('open') || changedProperties.has('hoist')) {
182
- if (this.open && this.hoist) {
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;
183
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: '',
156
+ });
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
+ }
172
+ }
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();
184
182
  }
185
183
  }
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');
199
+ }
186
200
  render() {
187
201
  return html `
188
- <div class=${classMap({ tooltip: true, 'tooltip__body--large': this.size === 'large' })}>
189
- ${this.content}
190
- </div>
191
- <slot
192
- @mouseover=${this.handleMouseOver}
193
- @mouseout=${this.handleMouseOut}
194
- @click=${this.handleClick}
195
- @focus=${this.handleFocus}
196
- @blur=${this.handleBlur}
197
- aria-describedby="tooltip"
198
- ></slot>
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
219
+ >
220
+ <slot slot="anchor" aria-describedby="tooltip"></slot>
221
+
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>
199
236
  `;
200
237
  }
201
238
  };
202
239
  __decorate([
203
- property({ type: String })
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 })
204
250
  ], NileTooltip.prototype, "content", void 0);
205
251
  __decorate([
206
252
  property({ reflect: true })
207
253
  ], NileTooltip.prototype, "size", void 0);
208
254
  __decorate([
209
- property({ type: String })
255
+ property()
210
256
  ], NileTooltip.prototype, "placement", void 0);
211
257
  __decorate([
212
258
  property({ type: Boolean, reflect: true })
213
259
  ], NileTooltip.prototype, "disabled", void 0);
214
- __decorate([
215
- property({ type: Boolean, reflect: true })
216
- ], NileTooltip.prototype, "open", void 0);
217
- __decorate([
218
- property()
219
- ], NileTooltip.prototype, "trigger", void 0);
220
260
  __decorate([
221
261
  property({ type: Number })
222
262
  ], NileTooltip.prototype, "distance", void 0);
263
+ __decorate([
264
+ property({ type: Boolean, reflect: true })
265
+ ], NileTooltip.prototype, "open", void 0);
223
266
  __decorate([
224
267
  property({ type: Number })
225
268
  ], NileTooltip.prototype, "skidding", void 0);
269
+ __decorate([
270
+ property()
271
+ ], NileTooltip.prototype, "trigger", void 0);
226
272
  __decorate([
227
273
  property({ type: Boolean })
228
274
  ], NileTooltip.prototype, "hoist", void 0);
229
275
  __decorate([
230
- query('.tooltip')
231
- ], NileTooltip.prototype, "tooltip", void 0);
276
+ watch('open', { waitUntilFirstUpdate: true })
277
+ ], NileTooltip.prototype, "handleOpenChange", null);
278
+ __decorate([
279
+ watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
280
+ ], NileTooltip.prototype, "handleOptionsChange", null);
232
281
  __decorate([
233
- query('slot')
234
- ], NileTooltip.prototype, "slotElement", void 0);
282
+ watch('disabled')
283
+ ], NileTooltip.prototype, "handleDisabledChange", null);
235
284
  NileTooltip = __decorate([
236
285
  customElement('nile-tooltip')
237
286
  ], NileTooltip);
238
287
  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;
239
303
  //# 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":["import { 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';\n\ntype TooltipPlacement = \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// CSS Anchor positiong\n@customElement('nile-tooltip')\nexport class NileTooltip extends NileElement {\n @property({ type: String }) content = '';\n @property({ reflect: true }) size: 'small' | 'large' = 'small';\n @property({ type: String }) placement: TooltipPlacement = 'top';\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) open = false;\n @property() trigger = 'hover focus';\n @property({ type: Number }) distance = 8;\n @property({ type: Number }) skidding = 0;\n @property({ type: Boolean }) hoist = false;\n\n @query('.tooltip') tooltip!: HTMLElement;\n @query('slot') slotElement!: HTMLSlotElement;\n\n private hoverTimeout: number;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n \n\n \n \n connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this.updateTooltipPosition);\n window.addEventListener('scroll', this.updateTooltipPosition, true);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('resize', this.updateTooltipPosition);\n window.removeEventListener('scroll', this.updateTooltipPosition, true);\n }\n\n private getBasePlacement(placement: TooltipPlacement): 'top' | 'right' | 'bottom' | 'left' {\n return placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n }\n\n private getAlignmentModifier(placement: TooltipPlacement): 'start' | 'end' | null {\n const parts = placement.split('-');\n return parts.length > 1 ? parts[1] as 'start' | 'end' : null;\n }\n\n private updateTooltipPosition = () => {\n if (!this.tooltip || !this.open) return;\n\n const triggerEl = this.slotElement.assignedElements()[0] as HTMLElement;\n if (!triggerEl) return;\n\n \n \n const triggerRect = triggerEl.getBoundingClientRect();\n const tooltipRect = this.tooltip.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n \n let top = 0, left = 0;\n let finalPlacement = this.placement;\n const basePlacement = this.getBasePlacement(this.placement);\n const alignment = this.getAlignmentModifier(this.placement);\n\n \n const fitsLeft = triggerRect.left - tooltipRect.width - this.distance > 0;\n const fitsRight = triggerRect.right + tooltipRect.width + this.distance < viewportWidth;\n const fitsBottom = triggerRect.bottom + tooltipRect.height + this.distance < viewportHeight;\n const fitsTop = triggerRect.top - tooltipRect.height - this.distance > 0;\n\n \n let finalBasePlacement = basePlacement;\n \n \n if ((basePlacement === 'left' && !fitsLeft) || (basePlacement === 'right' && !fitsRight)) {\n finalBasePlacement = fitsBottom ? 'bottom' : (fitsTop ? 'top' : 'bottom');\n } \n \n else if (basePlacement === 'top' && !fitsTop) {\n finalBasePlacement = fitsBottom ? 'bottom' : (fitsLeft ? 'left' : 'right');\n } else if (basePlacement === 'bottom' && !fitsBottom) {\n finalBasePlacement = fitsTop ? 'top' : (fitsLeft ? 'left' : 'right');\n }\n\n \n let finalAlignment = alignment;\n \n \n if ((basePlacement === 'left' || basePlacement === 'right') && \n (finalBasePlacement === 'top' || finalBasePlacement === 'bottom')) {\n \n if (alignment === 'start') {\n finalAlignment = 'start';\n } else if (alignment === 'end') {\n finalAlignment = 'end';\n }\n }\n\n \n switch (finalBasePlacement) {\n case 'left':\n top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;\n left = triggerRect.left - tooltipRect.width - this.distance;\n break;\n case 'right':\n top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;\n left = triggerRect.right + this.distance;\n break;\n case 'top':\n top = triggerRect.top - tooltipRect.height - this.distance;\n left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;\n break;\n case 'bottom':\n top = triggerRect.bottom + this.distance;\n left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;\n break;\n }\n\n \n if ((finalBasePlacement === 'top' || finalBasePlacement === 'bottom') && finalAlignment) {\n if (finalAlignment === 'start') {\n left = triggerRect.left + this.skidding;\n } else if (finalAlignment === 'end') {\n left = triggerRect.right - tooltipRect.width + this.skidding;\n }\n }\n \n \n if ((finalBasePlacement === 'left' || finalBasePlacement === 'right') && finalAlignment) {\n if (finalAlignment === 'start') {\n top = triggerRect.top + this.skidding;\n } else if (finalAlignment === 'end') {\n top = triggerRect.bottom - tooltipRect.height + this.skidding;\n }\n }\n\n \n finalPlacement = finalAlignment ? `${finalBasePlacement}-${finalAlignment}` : finalBasePlacement;\n\n \n if (left < 0) left = 5;\n if (left + tooltipRect.width > viewportWidth) left = viewportWidth - tooltipRect.width - 5;\n if (top < 0) top = 5;\n if (top + tooltipRect.height > viewportHeight) top = viewportHeight - tooltipRect.height - 5;\n\n \n this.tooltip.style.top = `${top}px`;\n this.tooltip.style.left = `${left}px`;\n this.tooltip.setAttribute('data-placement', finalPlacement as string);\n };\n\n private showTooltip = () => {\n if (!this.disabled && \n this.content.trim() !== '') {\n this.open = true;\n this.emit('nile-show');\n this.updateComplete.then(() => {\n this.updateTooltipPosition();\n \n \n this.tooltip.addEventListener('transitionend', this.handleAfterShow, { once: true });\n });\n }\n };\n \n private handleAfterShow = () => {\n this.emit('nile-after-show');\n };\n \n\n private hideTooltip = () => {\n if (!this.open) return;\n \n this.emit('nile-hide');\n this.open = false;\n \n this.tooltip.addEventListener('transitionend', this.handleAfterHide, { once: true });\n };\n \n private handleAfterHide = () => {\n this.emit('nile-after-hide');\n };\n \n private handleMouseOver = () => {\n if (this.trigger.includes('hover')) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);\n }\n };\n\n private handleMouseOut = () => {\n if (this.trigger.includes('hover')) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);\n }\n };\n\n private handleClick = () => {\n if (this.trigger.includes('click')) {\n this.open = !this.open;\n this.emit('nile-show');\n this.updateComplete.then(() => this.updateTooltipPosition());\n }\n };\n\n updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n \n \n if (changedProperties.has('open') || changedProperties.has('hoist')) {\n if (this.open && this.hoist) {\n \n }\n }\n }\n\n private handleFocus = () => {\n if (this.trigger.includes('focus')) {\n this.showTooltip();\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 class=${classMap({ tooltip: true, 'tooltip__body--large': this.size === 'large' })}>\n ${this.content}\n </div>\n <slot\n @mouseover=${this.handleMouseOver}\n @mouseout=${this.handleMouseOut}\n @click=${this.handleClick}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n aria-describedby=\"tooltip\"\n ></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tooltip': NileTooltip;\n }\n}"]}
1
+ {"version":3,"file":"nile-tooltip.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EACL,YAAY,EACZ,mBAAmB,GACpB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,8DAA8D;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QAgBL,0FAA0F;QAC/C,YAAO,GAAG,EAAE,CAAC;QAExD,gDAAgD;QACnB,SAAI,GAAsB,OAAO,CAAC;QAE/D;;;WAGG;QACS,cAAS,GAYJ,KAAK,CAAC;QAEvB,4DAA4D;QAChB,aAAQ,GAAG,KAAK,CAAC;QAE7D,oFAAoF;QACxD,aAAQ,GAAG,CAAC,CAAC;QAEzC,uGAAuG;QAC3D,SAAI,GAAG,KAAK,CAAC;QAEzD,gFAAgF;QACpD,aAAQ,GAAG,CAAC,CAAC;QAEzC;;;;WAIG;QACS,YAAO,GAAG,aAAa,CAAC;QAEpC;;;;WAIG;QAC0B,UAAK,GAAG,KAAK,CAAC;IA4M7C,CAAC;IA3QC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IA2DD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YACvD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACjD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACrD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACzD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAE9B,yDAAyD;QACzD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACxD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACxD,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5D,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,+EAA+E;QAC/E,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACxC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,aAAa,CACzB,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,cAAc,CAAC,CACxD,CAAC;YACF,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,aAAa,CACzB,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,cAAc,CAAC,CACxD,CAAC;YACF,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,WAAmB;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC;IAGK,AAAN,KAAK,CAAC,gBAAgB;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,OAAO;YACP,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAEvB,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;YACzB,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE;gBAChE,GAAG,EAAE,EAAE;aACR,CAAC,CAAC;YACH,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;YAEtD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,OAAO;YACP,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAEvB,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE;gBAChE,GAAG,EAAE,EAAE;aACR,CAAC,CAAC;YACH,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;YACtD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YAExB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC;IAGK,AAAN,KAAK,CAAC,mBAAmB;QACvB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAED,yBAAyB;IACzB,KAAK,CAAC,IAAI;QACR,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAED,wBAAwB;IACxB,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;gBAOC,QAAQ,CAAC;YACf,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI,CAAC,IAAI;SAC3B,CAAC;oBACU,IAAI,CAAC,SAAS;mBACf,IAAI,CAAC,QAAQ;mBACb,IAAI,CAAC,QAAQ;mBACb,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;;;;;;;;;;;kBAWlC,QAAQ,CAAC;YACf,aAAa,EAAE,IAAI;YACnB,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC9C,CAAC;;sBAEU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;;YAEtC,IAAI,CAAC,OAAO;;;KAGnB,CAAC;IACJ,CAAC;CACF,CAAA;AAhQ4B;IAA1B,KAAK,CAAC,kBAAkB,CAAC;gDAA8B;AAC/B;IAAxB,KAAK,CAAC,gBAAgB,CAAC;yCAAmB;AACtB;IAApB,KAAK,CAAC,YAAY,CAAC;0CAAkB;AAGK;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAc;AAG3B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAmC;AAMnD;IAAX,QAAQ,EAAE;8CAYY;AAGqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAGjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AAGG;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAc;AAG7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AAO7B;IAAX,QAAQ,EAAE;4CAAyB;AAOP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAe;AAiGrC;IADL,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;mDAiC7C;AAGK;IADL,KAAK,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;sDAMhE;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;uDAKjB;AAhNU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4QvB;;AAED,mBAAmB,CAAC,cAAc,EAAE;IAClC,SAAS,EAAE;QACT,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;QAC1B,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;KACzB;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;CAC3C,CAAC,CAAC;AAEH,mBAAmB,CAAC,cAAc,EAAE;IAClC,SAAS,EAAE;QACT,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;QACxB,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;KAC3B;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;CAC3C,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","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"]}