@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.
- package/README.md +7 -21
- package/demo/index.html +9 -5
- package/dist/axe.min-2b379f29.cjs.js +12 -0
- package/dist/axe.min-2b379f29.cjs.js.map +1 -0
- package/dist/axe.min-c2cd8733.esm.js +12 -0
- package/dist/{fixture-3acb409b.cjs.js → fixture-161dee0b.cjs.js} +2 -2
- package/dist/{fixture-3acb409b.cjs.js.map → fixture-161dee0b.cjs.js.map} +1 -1
- package/dist/{fixture-db35a8ae.esm.js → fixture-372df3b0.esm.js} +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/internal/animate.cjs.js +1 -1
- package/dist/internal/animate.cjs.js.map +1 -1
- package/dist/internal/animate.esm.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
- package/dist/nile-accordion/nile-accordion.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordion.cjs.js.map +1 -1
- package/dist/nile-accordion/nile-accordion.css.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordion.css.cjs.js.map +1 -1
- package/dist/nile-accordion/nile-accordion.css.esm.js +1 -1
- package/dist/nile-accordion/nile-accordion.esm.js +4 -4
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.esm.js +1 -1
- package/dist/nile-badge/nile-badge.test.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.test.esm.js +1 -1
- package/dist/nile-button/nile-button.test.cjs.js +1 -1
- package/dist/nile-button/nile-button.test.esm.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.esm.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.esm.js +1 -1
- package/dist/nile-card/nile-card.test.cjs.js +1 -1
- package/dist/nile-card/nile-card.test.esm.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.esm.js +1 -1
- package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.test.esm.js +1 -1
- package/dist/nile-circular-progressbar/nile-circular-progressbar.css.cjs.js +1 -1
- package/dist/nile-circular-progressbar/nile-circular-progressbar.css.cjs.js.map +1 -1
- package/dist/nile-circular-progressbar/nile-circular-progressbar.css.esm.js +49 -49
- package/dist/nile-code-editor/extensionSetup.cjs.js +7 -7
- package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
- package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js +2 -2
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +2 -2
- package/dist/nile-dialog/nile-dialog.test.cjs.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.esm.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.esm.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.esm.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.esm.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.esm.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.esm.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
- package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
- package/dist/nile-hero/nile-hero.test.esm.js +1 -1
- package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
- package/dist/nile-icon/nile-icon.test.esm.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +8 -0
- package/dist/nile-input/nile-input.test.cjs.js +1 -1
- package/dist/nile-input/nile-input.test.esm.js +1 -1
- package/dist/nile-link/nile-link.test.cjs.js +1 -1
- package/dist/nile-link/nile-link.test.esm.js +1 -1
- package/dist/nile-loader/nile-loader.test.cjs.js +1 -1
- package/dist/nile-loader/nile-loader.test.esm.js +1 -1
- package/dist/nile-popover/nile-popover.test.cjs.js +1 -1
- package/dist/nile-popover/nile-popover.test.esm.js +1 -1
- package/dist/nile-popup/nile-popup.test.cjs.js +1 -1
- package/dist/nile-popup/nile-popup.test.esm.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.esm.js +1 -1
- package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
- package/dist/nile-radio/nile-radio.test.esm.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.cjs.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.esm.js +1 -1
- package/dist/nile-select/nile-select.test.cjs.js +1 -1
- package/dist/nile-select/nile-select.test.esm.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.cjs.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.esm.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.cjs.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.esm.js +1 -1
- package/dist/nile-table-body/nile-table-body.cjs.js +1 -1
- package/dist/nile-table-body/nile-table-body.cjs.js.map +1 -1
- package/dist/nile-table-body/nile-table-body.esm.js +2 -2
- package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js.map +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.esm.js +2 -4
- package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js.map +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.css.esm.js +0 -2
- package/dist/nile-table-row/nile-table-row.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.test.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.test.esm.js +1 -1
- package/dist/nile-tooltip/index.cjs.js +1 -1
- package/dist/nile-tooltip/index.esm.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.cjs.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.cjs.js.map +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.cjs.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.cjs.js.map +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.esm.js +56 -115
- package/dist/nile-tooltip/nile-tooltip.esm.js +30 -13
- package/dist/src/index.d.ts +0 -1
- package/dist/src/index.js +0 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/nile-accordion/nile-accordion.css.js +1 -1
- package/dist/src/nile-accordion/nile-accordion.css.js.map +1 -1
- package/dist/src/nile-accordion/nile-accordion.d.ts +5 -6
- package/dist/src/nile-accordion/nile-accordion.js +8 -21
- package/dist/src/nile-accordion/nile-accordion.js.map +1 -1
- package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js +49 -49
- package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js.map +1 -1
- package/dist/src/nile-input/nile-input.css.js +8 -0
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-table-body/nile-table-body.d.ts +1 -3
- package/dist/src/nile-table-body/nile-table-body.js +1 -9
- package/dist/src/nile-table-body/nile-table-body.js.map +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js +2 -4
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.css.js +0 -2
- package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map +1 -1
- package/dist/src/nile-table-row/nile-table-row.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip.css.js +54 -113
- package/dist/src/nile-tooltip/nile-tooltip.css.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip.d.ts +62 -22
- package/dist/src/nile-tooltip/nile-tooltip.js +244 -180
- package/dist/src/nile-tooltip/nile-tooltip.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/index.ts +1 -2
- package/src/nile-accordion/nile-accordion.css.ts +1 -1
- package/src/nile-accordion/nile-accordion.ts +4 -15
- package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts +56 -55
- package/src/nile-input/nile-input.css.ts +8 -0
- package/src/nile-table-body/nile-table-body.ts +2 -8
- package/src/nile-table-cell-item/nile-table-cell-item.css.ts +2 -4
- package/src/nile-table-header-item/nile-table-header-item.css.ts +0 -2
- package/src/nile-table-row/nile-table-row.ts +2 -1
- package/src/nile-tooltip/nile-tooltip.css.ts +54 -113
- package/src/nile-tooltip/nile-tooltip.ts +269 -207
- package/vscode-html-custom-data.json +18 -36
- package/dist/axe.min-5bf06036.esm.js +0 -12
- package/dist/axe.min-ff35bfba.cjs.js +0 -12
- package/dist/axe.min-ff35bfba.cjs.js.map +0 -1
- package/dist/nile-table/index.cjs.js +0 -2
- package/dist/nile-table/index.cjs.js.map +0 -1
- package/dist/nile-table/index.esm.js +0 -1
- package/dist/nile-table/nile-table.cjs.js +0 -2
- package/dist/nile-table/nile-table.cjs.js.map +0 -1
- package/dist/nile-table/nile-table.css.cjs.js +0 -2
- package/dist/nile-table/nile-table.css.cjs.js.map +0 -1
- package/dist/nile-table/nile-table.css.esm.js +0 -6
- package/dist/nile-table/nile-table.esm.js +0 -3
- package/dist/src/nile-table/index.d.ts +0 -1
- package/dist/src/nile-table/index.js +0 -2
- package/dist/src/nile-table/index.js.map +0 -1
- package/dist/src/nile-table/nile-table.css.d.ts +0 -12
- package/dist/src/nile-table/nile-table.css.js +0 -18
- package/dist/src/nile-table/nile-table.css.js.map +0 -1
- package/dist/src/nile-table/nile-table.d.ts +0 -47
- package/dist/src/nile-table/nile-table.js +0 -137
- package/dist/src/nile-table/nile-table.js.map +0 -1
- package/src/nile-table/index.ts +0 -1
- package/src/nile-table/nile-table.css.ts +0 -20
- 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
|
-
|
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
|
-
|
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
|
-
|
165
|
-
|
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
|
-
|
170
|
-
|
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
|
-
|
173
|
-
|
99
|
+
handleBlur() {
|
100
|
+
if (this.hasTrigger('focus')) {
|
101
|
+
this.hide();
|
102
|
+
}
|
174
103
|
}
|
175
|
-
|
176
|
-
|
177
|
-
|
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
|
-
|
180
|
-
|
181
|
-
if (
|
182
|
-
|
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
|
-
<
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
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
|
-
|
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(
|
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
|
-
|
231
|
-
], NileTooltip.prototype, "
|
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
|
-
|
234
|
-
], NileTooltip.prototype, "
|
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":"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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"]}
|