@spectrum-web-components/tooltip 0.34.0 → 0.34.1-rc.0
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/custom-elements.json +81 -153
- package/package.json +4 -4
- package/src/Tooltip.d.ts +10 -36
- package/src/Tooltip.dev.js +102 -166
- package/src/Tooltip.dev.js.map +3 -3
- package/src/Tooltip.js +25 -5
- package/src/Tooltip.js.map +3 -3
- package/src/spectrum-config.js +120 -17
- package/src/spectrum-tooltip.css.dev.js +19 -19
- package/src/spectrum-tooltip.css.dev.js.map +1 -1
- package/src/spectrum-tooltip.css.js +19 -19
- package/src/spectrum-tooltip.css.js.map +1 -1
- package/src/tooltip.css.dev.js +23 -20
- package/src/tooltip.css.dev.js.map +2 -2
- package/src/tooltip.css.js +23 -20
- package/src/tooltip.css.js.map +2 -2
- package/stories/tooltip.stories.js +12 -15
- package/stories/tooltip.stories.js.map +2 -2
- package/test/tooltip.test.js +21 -57
- package/test/tooltip.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-tooltip.
|
|
7
|
+
"path": "sp-tooltip.ts",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,24 +19,71 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "src/Tooltip.
|
|
22
|
+
"path": "src/Tooltip.ts",
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
26
26
|
"description": "",
|
|
27
|
-
"name": "
|
|
28
|
-
"
|
|
27
|
+
"name": "TooltipOpenable",
|
|
28
|
+
"members": [
|
|
29
29
|
{
|
|
30
|
-
"
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "open",
|
|
31
32
|
"type": {
|
|
32
|
-
"text": "
|
|
33
|
+
"text": "boolean"
|
|
33
34
|
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"kind": "field",
|
|
38
|
+
"name": "_open",
|
|
39
|
+
"type": {
|
|
40
|
+
"text": "boolean"
|
|
41
|
+
},
|
|
42
|
+
"privacy": "private",
|
|
43
|
+
"default": "false"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"kind": "field",
|
|
47
|
+
"name": "placement",
|
|
48
|
+
"type": {
|
|
49
|
+
"text": "Placement"
|
|
50
|
+
},
|
|
51
|
+
"attribute": "placement"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"kind": "field",
|
|
55
|
+
"name": "_placement",
|
|
56
|
+
"type": {
|
|
57
|
+
"text": "Placement"
|
|
58
|
+
},
|
|
59
|
+
"privacy": "private",
|
|
60
|
+
"default": "'top'"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"kind": "field",
|
|
64
|
+
"name": "tipElement",
|
|
65
|
+
"type": {
|
|
66
|
+
"text": "HTMLElement"
|
|
67
|
+
},
|
|
68
|
+
"readonly": true
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"attributes": [
|
|
72
|
+
{
|
|
73
|
+
"name": "open"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "placement",
|
|
77
|
+
"type": {
|
|
78
|
+
"text": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
|
|
79
|
+
},
|
|
80
|
+
"fieldName": "placement"
|
|
34
81
|
}
|
|
35
82
|
],
|
|
36
83
|
"superclass": {
|
|
37
84
|
"name": "HTMLElement"
|
|
38
85
|
},
|
|
39
|
-
"tagName": "tooltip-
|
|
86
|
+
"tagName": "sp-tooltip-openable",
|
|
40
87
|
"customElement": true
|
|
41
88
|
},
|
|
42
89
|
{
|
|
@@ -54,22 +101,6 @@
|
|
|
54
101
|
}
|
|
55
102
|
],
|
|
56
103
|
"members": [
|
|
57
|
-
{
|
|
58
|
-
"kind": "field",
|
|
59
|
-
"name": "instanceCount",
|
|
60
|
-
"type": {
|
|
61
|
-
"text": "number"
|
|
62
|
-
},
|
|
63
|
-
"static": true,
|
|
64
|
-
"default": "0",
|
|
65
|
-
"privacy": "private"
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
"kind": "field",
|
|
69
|
-
"name": "_tooltipId",
|
|
70
|
-
"privacy": "private",
|
|
71
|
-
"default": "`sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`"
|
|
72
|
-
},
|
|
73
104
|
{
|
|
74
105
|
"kind": "field",
|
|
75
106
|
"name": "selfManaged",
|
|
@@ -92,15 +123,6 @@
|
|
|
92
123
|
"attribute": "offset",
|
|
93
124
|
"reflects": true
|
|
94
125
|
},
|
|
95
|
-
{
|
|
96
|
-
"kind": "field",
|
|
97
|
-
"name": "hadTooltipId",
|
|
98
|
-
"type": {
|
|
99
|
-
"text": "boolean"
|
|
100
|
-
},
|
|
101
|
-
"privacy": "private",
|
|
102
|
-
"default": "false"
|
|
103
|
-
},
|
|
104
126
|
{
|
|
105
127
|
"kind": "field",
|
|
106
128
|
"name": "open",
|
|
@@ -116,10 +138,9 @@
|
|
|
116
138
|
"kind": "field",
|
|
117
139
|
"name": "placement",
|
|
118
140
|
"type": {
|
|
119
|
-
"text": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"
|
|
141
|
+
"text": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
|
|
120
142
|
},
|
|
121
143
|
"privacy": "public",
|
|
122
|
-
"default": "'top'",
|
|
123
144
|
"attribute": "placement",
|
|
124
145
|
"reflects": true
|
|
125
146
|
},
|
|
@@ -129,7 +150,7 @@
|
|
|
129
150
|
"type": {
|
|
130
151
|
"text": "HTMLSpanElement"
|
|
131
152
|
},
|
|
132
|
-
"privacy": "
|
|
153
|
+
"privacy": "public"
|
|
133
154
|
},
|
|
134
155
|
{
|
|
135
156
|
"kind": "field",
|
|
@@ -149,64 +170,20 @@
|
|
|
149
170
|
"privacy": "public",
|
|
150
171
|
"attribute": "variant"
|
|
151
172
|
},
|
|
152
|
-
{
|
|
153
|
-
"kind": "method",
|
|
154
|
-
"name": "onOverlayQuery",
|
|
155
|
-
"privacy": "public",
|
|
156
|
-
"return": {
|
|
157
|
-
"type": {
|
|
158
|
-
"text": "void"
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
"parameters": [
|
|
162
|
-
{
|
|
163
|
-
"name": "event",
|
|
164
|
-
"type": {
|
|
165
|
-
"text": "CustomEvent<OverlayDisplayQueryDetail>"
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
]
|
|
169
|
-
},
|
|
170
173
|
{
|
|
171
174
|
"kind": "field",
|
|
172
|
-
"name": "
|
|
173
|
-
"type": {
|
|
174
|
-
"text": "HTMLElement"
|
|
175
|
-
},
|
|
175
|
+
"name": "handleOpenOverlay",
|
|
176
176
|
"privacy": "private"
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
|
-
"kind": "
|
|
180
|
-
"name": "
|
|
181
|
-
"privacy": "
|
|
182
|
-
"return": {
|
|
183
|
-
"type": {
|
|
184
|
-
"text": "void"
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
},
|
|
188
|
-
{
|
|
189
|
-
"kind": "method",
|
|
190
|
-
"name": "overlayWillOpenCallback",
|
|
191
|
-
"privacy": "public",
|
|
192
|
-
"return": {
|
|
193
|
-
"type": {
|
|
194
|
-
"text": "void"
|
|
195
|
-
}
|
|
196
|
-
},
|
|
197
|
-
"parameters": [
|
|
198
|
-
{
|
|
199
|
-
"name": "{\n trigger,\n }",
|
|
200
|
-
"type": {
|
|
201
|
-
"text": "{\n trigger: HTMLElement;\n }"
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
]
|
|
179
|
+
"kind": "field",
|
|
180
|
+
"name": "handleCloseOverlay",
|
|
181
|
+
"privacy": "protected"
|
|
205
182
|
},
|
|
206
183
|
{
|
|
207
184
|
"kind": "method",
|
|
208
|
-
"name": "
|
|
209
|
-
"privacy": "
|
|
185
|
+
"name": "handleTransitionrun",
|
|
186
|
+
"privacy": "protected",
|
|
210
187
|
"return": {
|
|
211
188
|
"type": {
|
|
212
189
|
"text": "void"
|
|
@@ -214,17 +191,17 @@
|
|
|
214
191
|
},
|
|
215
192
|
"parameters": [
|
|
216
193
|
{
|
|
217
|
-
"name": "
|
|
194
|
+
"name": "event",
|
|
218
195
|
"type": {
|
|
219
|
-
"text": "
|
|
196
|
+
"text": "TransitionEvent"
|
|
220
197
|
}
|
|
221
198
|
}
|
|
222
199
|
]
|
|
223
200
|
},
|
|
224
201
|
{
|
|
225
202
|
"kind": "method",
|
|
226
|
-
"name": "
|
|
227
|
-
"privacy": "
|
|
203
|
+
"name": "handleTransitionend",
|
|
204
|
+
"privacy": "protected",
|
|
228
205
|
"return": {
|
|
229
206
|
"type": {
|
|
230
207
|
"text": "void"
|
|
@@ -232,65 +209,25 @@
|
|
|
232
209
|
},
|
|
233
210
|
"parameters": [
|
|
234
211
|
{
|
|
235
|
-
"name": "
|
|
212
|
+
"name": "event",
|
|
236
213
|
"type": {
|
|
237
|
-
"text": "
|
|
214
|
+
"text": "TransitionEvent"
|
|
238
215
|
}
|
|
239
216
|
}
|
|
240
217
|
]
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
"name": "removeProxy",
|
|
245
|
-
"privacy": "private",
|
|
246
|
-
"return": {
|
|
247
|
-
"type": {
|
|
248
|
-
"text": "void"
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
},
|
|
218
|
+
}
|
|
219
|
+
],
|
|
220
|
+
"events": [
|
|
252
221
|
{
|
|
253
|
-
"
|
|
254
|
-
"name": "closeOverlayCallback",
|
|
222
|
+
"name": "transitionrun",
|
|
255
223
|
"type": {
|
|
256
|
-
"text": "
|
|
257
|
-
}
|
|
258
|
-
"privacy": "private"
|
|
259
|
-
},
|
|
260
|
-
{
|
|
261
|
-
"kind": "field",
|
|
262
|
-
"name": "abortOverlay",
|
|
263
|
-
"type": {
|
|
264
|
-
"text": "(cancelled: boolean) => void"
|
|
265
|
-
},
|
|
266
|
-
"privacy": "private"
|
|
267
|
-
},
|
|
268
|
-
{
|
|
269
|
-
"kind": "field",
|
|
270
|
-
"name": "openOverlay",
|
|
271
|
-
"privacy": "private"
|
|
272
|
-
},
|
|
273
|
-
{
|
|
274
|
-
"kind": "field",
|
|
275
|
-
"name": "closeOverlay",
|
|
276
|
-
"privacy": "private"
|
|
224
|
+
"text": "TransitionEvent"
|
|
225
|
+
}
|
|
277
226
|
},
|
|
278
227
|
{
|
|
279
|
-
"
|
|
280
|
-
"name": "previousSlot",
|
|
228
|
+
"name": "transitionend",
|
|
281
229
|
"type": {
|
|
282
|
-
"text": "
|
|
283
|
-
},
|
|
284
|
-
"privacy": "private"
|
|
285
|
-
},
|
|
286
|
-
{
|
|
287
|
-
"kind": "method",
|
|
288
|
-
"name": "manageTooltip",
|
|
289
|
-
"privacy": "private",
|
|
290
|
-
"return": {
|
|
291
|
-
"type": {
|
|
292
|
-
"text": "void"
|
|
293
|
-
}
|
|
230
|
+
"text": "TransitionEvent"
|
|
294
231
|
}
|
|
295
232
|
}
|
|
296
233
|
],
|
|
@@ -298,9 +235,8 @@
|
|
|
298
235
|
{
|
|
299
236
|
"name": "placement",
|
|
300
237
|
"type": {
|
|
301
|
-
"text": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"
|
|
238
|
+
"text": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
|
|
302
239
|
},
|
|
303
|
-
"default": "'top'",
|
|
304
240
|
"fieldName": "placement",
|
|
305
241
|
"attribute": "placement"
|
|
306
242
|
},
|
|
@@ -346,20 +282,12 @@
|
|
|
346
282
|
}
|
|
347
283
|
],
|
|
348
284
|
"exports": [
|
|
349
|
-
{
|
|
350
|
-
"kind": "js",
|
|
351
|
-
"name": "TooltipProxy",
|
|
352
|
-
"declaration": {
|
|
353
|
-
"name": "TooltipProxy",
|
|
354
|
-
"module": "src/Tooltip.js"
|
|
355
|
-
}
|
|
356
|
-
},
|
|
357
285
|
{
|
|
358
286
|
"kind": "custom-element-definition",
|
|
359
|
-
"name": "tooltip-
|
|
287
|
+
"name": "sp-tooltip-openable",
|
|
360
288
|
"declaration": {
|
|
361
|
-
"name": "
|
|
362
|
-
"module": "src/Tooltip.
|
|
289
|
+
"name": "TooltipOpenable",
|
|
290
|
+
"module": "src/Tooltip.ts"
|
|
363
291
|
}
|
|
364
292
|
},
|
|
365
293
|
{
|
|
@@ -367,7 +295,7 @@
|
|
|
367
295
|
"name": "Tooltip",
|
|
368
296
|
"declaration": {
|
|
369
297
|
"name": "Tooltip",
|
|
370
|
-
"module": "src/Tooltip.
|
|
298
|
+
"module": "src/Tooltip.ts"
|
|
371
299
|
}
|
|
372
300
|
}
|
|
373
301
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tooltip",
|
|
3
|
-
"version": "0.34.0",
|
|
3
|
+
"version": "0.34.1-rc.0+1647bfed5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.34.0",
|
|
61
|
-
"@spectrum-web-components/overlay": "^0.34.0"
|
|
60
|
+
"@spectrum-web-components/base": "^0.34.1-rc.0+1647bfed5",
|
|
61
|
+
"@spectrum-web-components/overlay": "^0.34.1-rc.0+1647bfed5"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@spectrum-css/tooltip": "^4.0.10"
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"./sp-*.js",
|
|
70
70
|
"./**/*.dev.js"
|
|
71
71
|
],
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "1647bfed54cb29f3513343cd0d2c2d9e73e1c508"
|
|
73
73
|
}
|
package/src/Tooltip.d.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import { CSSResultArray,
|
|
2
|
-
import type {
|
|
3
|
-
|
|
4
|
-
disconnectedCallback(): void;
|
|
5
|
-
}
|
|
1
|
+
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
import type { Placement } from '@spectrum-web-components/overlay';
|
|
3
|
+
import '@spectrum-web-components/overlay/sp-overlay.js';
|
|
6
4
|
/**
|
|
7
5
|
* @element sp-tooltip
|
|
8
6
|
*
|
|
@@ -11,48 +9,24 @@ export declare class TooltipProxy extends HTMLElement {
|
|
|
11
9
|
*/
|
|
12
10
|
export declare class Tooltip extends SpectrumElement {
|
|
13
11
|
static get styles(): CSSResultArray;
|
|
14
|
-
/**
|
|
15
|
-
* @private
|
|
16
|
-
*/
|
|
17
|
-
static instanceCount: number;
|
|
18
|
-
private _tooltipId;
|
|
19
12
|
/**
|
|
20
13
|
* Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.
|
|
21
14
|
*/
|
|
22
15
|
selfManaged: boolean;
|
|
23
16
|
offset: number;
|
|
24
|
-
private hadTooltipId;
|
|
25
17
|
open: boolean;
|
|
26
18
|
/**
|
|
27
|
-
* @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
|
|
19
|
+
* @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"}
|
|
28
20
|
* @attr
|
|
29
21
|
*/
|
|
30
|
-
placement
|
|
31
|
-
|
|
22
|
+
placement?: Placement;
|
|
23
|
+
tipElement: HTMLSpanElement;
|
|
32
24
|
private _variant;
|
|
33
25
|
get variant(): string;
|
|
34
26
|
set variant(variant: string);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
overlayWillOpenCallback({ trigger, }: {
|
|
40
|
-
trigger: HTMLElement;
|
|
41
|
-
}): void;
|
|
42
|
-
overlayOpenCancelledCallback({ trigger, }: {
|
|
43
|
-
trigger: HTMLElement;
|
|
44
|
-
}): void;
|
|
45
|
-
overlayCloseCallback({ trigger }: {
|
|
46
|
-
trigger: HTMLElement;
|
|
47
|
-
}): void;
|
|
48
|
-
private removeProxy;
|
|
49
|
-
private closeOverlayCallback?;
|
|
50
|
-
private abortOverlay;
|
|
51
|
-
private openOverlay;
|
|
52
|
-
private closeOverlay;
|
|
53
|
-
private previousSlot?;
|
|
54
|
-
private manageTooltip;
|
|
27
|
+
private handleOpenOverlay;
|
|
28
|
+
protected handleCloseOverlay: () => void;
|
|
29
|
+
protected handleTransitionrun(event: TransitionEvent): void;
|
|
30
|
+
protected handleTransitionend(event: TransitionEvent): void;
|
|
55
31
|
render(): TemplateResult;
|
|
56
|
-
protected update(changed: PropertyValues<this>): Promise<void>;
|
|
57
|
-
protected updated(changed: PropertyValues<this>): void;
|
|
58
32
|
}
|