@spectrum-web-components/tooltip 0.33.1-overlay.41 → 0.33.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +139 -77
- package/package.json +4 -4
- package/src/Tooltip.d.ts +32 -10
- package/src/Tooltip.dev.js +162 -102
- package/src/Tooltip.dev.js.map +3 -3
- package/src/Tooltip.js +5 -25
- package/src/Tooltip.js.map +3 -3
- package/src/spectrum-config.js +17 -120
- 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 +20 -23
- package/src/tooltip.css.dev.js.map +2 -2
- package/src/tooltip.css.js +20 -23
- package/src/tooltip.css.js.map +2 -2
- package/stories/tooltip.stories.js +15 -12
- package/stories/tooltip.stories.js.map +2 -2
- package/test/tooltip.test.js +57 -21
- package/test/tooltip.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -24,66 +24,19 @@
|
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
26
26
|
"description": "",
|
|
27
|
-
"name": "
|
|
28
|
-
"
|
|
27
|
+
"name": "TooltipProxy",
|
|
28
|
+
"events": [
|
|
29
29
|
{
|
|
30
|
-
"
|
|
31
|
-
"name": "open",
|
|
30
|
+
"name": "disconnected",
|
|
32
31
|
"type": {
|
|
33
|
-
"text": "
|
|
32
|
+
"text": "Event"
|
|
34
33
|
}
|
|
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"
|
|
81
34
|
}
|
|
82
35
|
],
|
|
83
36
|
"superclass": {
|
|
84
37
|
"name": "HTMLElement"
|
|
85
38
|
},
|
|
86
|
-
"tagName": "
|
|
39
|
+
"tagName": "tooltip-proxy",
|
|
87
40
|
"customElement": true
|
|
88
41
|
},
|
|
89
42
|
{
|
|
@@ -111,6 +64,12 @@
|
|
|
111
64
|
"default": "0",
|
|
112
65
|
"privacy": "private"
|
|
113
66
|
},
|
|
67
|
+
{
|
|
68
|
+
"kind": "field",
|
|
69
|
+
"name": "_tooltipId",
|
|
70
|
+
"privacy": "private",
|
|
71
|
+
"default": "`sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`"
|
|
72
|
+
},
|
|
114
73
|
{
|
|
115
74
|
"kind": "field",
|
|
116
75
|
"name": "selfManaged",
|
|
@@ -132,6 +91,15 @@
|
|
|
132
91
|
"attribute": "offset",
|
|
133
92
|
"reflects": true
|
|
134
93
|
},
|
|
94
|
+
{
|
|
95
|
+
"kind": "field",
|
|
96
|
+
"name": "hadTooltipId",
|
|
97
|
+
"type": {
|
|
98
|
+
"text": "boolean"
|
|
99
|
+
},
|
|
100
|
+
"privacy": "private",
|
|
101
|
+
"default": "false"
|
|
102
|
+
},
|
|
135
103
|
{
|
|
136
104
|
"kind": "field",
|
|
137
105
|
"name": "open",
|
|
@@ -147,9 +115,10 @@
|
|
|
147
115
|
"kind": "field",
|
|
148
116
|
"name": "placement",
|
|
149
117
|
"type": {
|
|
150
|
-
"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\""
|
|
118
|
+
"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\" | \"none\""
|
|
151
119
|
},
|
|
152
120
|
"privacy": "public",
|
|
121
|
+
"default": "'top'",
|
|
153
122
|
"attribute": "placement",
|
|
154
123
|
"reflects": true
|
|
155
124
|
},
|
|
@@ -159,7 +128,7 @@
|
|
|
159
128
|
"type": {
|
|
160
129
|
"text": "HTMLSpanElement"
|
|
161
130
|
},
|
|
162
|
-
"privacy": "
|
|
131
|
+
"privacy": "private"
|
|
163
132
|
},
|
|
164
133
|
{
|
|
165
134
|
"kind": "field",
|
|
@@ -179,20 +148,46 @@
|
|
|
179
148
|
"privacy": "public",
|
|
180
149
|
"attribute": "variant"
|
|
181
150
|
},
|
|
151
|
+
{
|
|
152
|
+
"kind": "method",
|
|
153
|
+
"name": "onOverlayQuery",
|
|
154
|
+
"privacy": "public",
|
|
155
|
+
"return": {
|
|
156
|
+
"type": {
|
|
157
|
+
"text": "void"
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
"parameters": [
|
|
161
|
+
{
|
|
162
|
+
"name": "event",
|
|
163
|
+
"type": {
|
|
164
|
+
"text": "CustomEvent<OverlayDisplayQueryDetail>"
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
]
|
|
168
|
+
},
|
|
182
169
|
{
|
|
183
170
|
"kind": "field",
|
|
184
|
-
"name": "
|
|
171
|
+
"name": "_proxy",
|
|
172
|
+
"type": {
|
|
173
|
+
"text": "HTMLElement"
|
|
174
|
+
},
|
|
185
175
|
"privacy": "private"
|
|
186
176
|
},
|
|
187
177
|
{
|
|
188
|
-
"kind": "
|
|
189
|
-
"name": "
|
|
190
|
-
"privacy": "
|
|
178
|
+
"kind": "method",
|
|
179
|
+
"name": "generateProxy",
|
|
180
|
+
"privacy": "private",
|
|
181
|
+
"return": {
|
|
182
|
+
"type": {
|
|
183
|
+
"text": "void"
|
|
184
|
+
}
|
|
185
|
+
}
|
|
191
186
|
},
|
|
192
187
|
{
|
|
193
188
|
"kind": "method",
|
|
194
|
-
"name": "
|
|
195
|
-
"privacy": "
|
|
189
|
+
"name": "overlayWillOpenCallback",
|
|
190
|
+
"privacy": "public",
|
|
196
191
|
"return": {
|
|
197
192
|
"type": {
|
|
198
193
|
"text": "void"
|
|
@@ -200,17 +195,17 @@
|
|
|
200
195
|
},
|
|
201
196
|
"parameters": [
|
|
202
197
|
{
|
|
203
|
-
"name": "
|
|
198
|
+
"name": "{\n trigger,\n }",
|
|
204
199
|
"type": {
|
|
205
|
-
"text": "
|
|
200
|
+
"text": "{\n trigger: HTMLElement;\n }"
|
|
206
201
|
}
|
|
207
202
|
}
|
|
208
203
|
]
|
|
209
204
|
},
|
|
210
205
|
{
|
|
211
206
|
"kind": "method",
|
|
212
|
-
"name": "
|
|
213
|
-
"privacy": "
|
|
207
|
+
"name": "overlayOpenCancelledCallback",
|
|
208
|
+
"privacy": "public",
|
|
214
209
|
"return": {
|
|
215
210
|
"type": {
|
|
216
211
|
"text": "void"
|
|
@@ -218,25 +213,83 @@
|
|
|
218
213
|
},
|
|
219
214
|
"parameters": [
|
|
220
215
|
{
|
|
221
|
-
"name": "
|
|
216
|
+
"name": "{\n trigger,\n }",
|
|
222
217
|
"type": {
|
|
223
|
-
"text": "
|
|
218
|
+
"text": "{\n trigger: HTMLElement;\n }"
|
|
224
219
|
}
|
|
225
220
|
}
|
|
226
221
|
]
|
|
227
|
-
}
|
|
228
|
-
],
|
|
229
|
-
"events": [
|
|
222
|
+
},
|
|
230
223
|
{
|
|
231
|
-
"
|
|
232
|
-
"
|
|
233
|
-
|
|
224
|
+
"kind": "method",
|
|
225
|
+
"name": "overlayCloseCallback",
|
|
226
|
+
"privacy": "public",
|
|
227
|
+
"return": {
|
|
228
|
+
"type": {
|
|
229
|
+
"text": "void"
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
"parameters": [
|
|
233
|
+
{
|
|
234
|
+
"name": "{ trigger }",
|
|
235
|
+
"type": {
|
|
236
|
+
"text": "{ trigger: HTMLElement }"
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
]
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"kind": "method",
|
|
243
|
+
"name": "removeProxy",
|
|
244
|
+
"privacy": "private",
|
|
245
|
+
"return": {
|
|
246
|
+
"type": {
|
|
247
|
+
"text": "void"
|
|
248
|
+
}
|
|
234
249
|
}
|
|
235
250
|
},
|
|
236
251
|
{
|
|
237
|
-
"
|
|
252
|
+
"kind": "field",
|
|
253
|
+
"name": "closeOverlayCallback",
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "Promise<() => void> | undefined"
|
|
256
|
+
},
|
|
257
|
+
"privacy": "private"
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"kind": "field",
|
|
261
|
+
"name": "abortOverlay",
|
|
238
262
|
"type": {
|
|
239
|
-
"text": "
|
|
263
|
+
"text": "(cancelled: boolean) => void"
|
|
264
|
+
},
|
|
265
|
+
"privacy": "private"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"kind": "field",
|
|
269
|
+
"name": "openOverlay",
|
|
270
|
+
"privacy": "private"
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"kind": "field",
|
|
274
|
+
"name": "closeOverlay",
|
|
275
|
+
"privacy": "private"
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"kind": "field",
|
|
279
|
+
"name": "previousSlot",
|
|
280
|
+
"type": {
|
|
281
|
+
"text": "string | undefined"
|
|
282
|
+
},
|
|
283
|
+
"privacy": "private"
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"kind": "method",
|
|
287
|
+
"name": "manageTooltip",
|
|
288
|
+
"privacy": "private",
|
|
289
|
+
"return": {
|
|
290
|
+
"type": {
|
|
291
|
+
"text": "void"
|
|
292
|
+
}
|
|
240
293
|
}
|
|
241
294
|
}
|
|
242
295
|
],
|
|
@@ -244,8 +297,9 @@
|
|
|
244
297
|
{
|
|
245
298
|
"name": "placement",
|
|
246
299
|
"type": {
|
|
247
|
-
"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\""
|
|
300
|
+
"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\" | \"none\""
|
|
248
301
|
},
|
|
302
|
+
"default": "'top'",
|
|
249
303
|
"fieldName": "placement",
|
|
250
304
|
"attribute": "placement"
|
|
251
305
|
},
|
|
@@ -290,11 +344,19 @@
|
|
|
290
344
|
}
|
|
291
345
|
],
|
|
292
346
|
"exports": [
|
|
347
|
+
{
|
|
348
|
+
"kind": "js",
|
|
349
|
+
"name": "TooltipProxy",
|
|
350
|
+
"declaration": {
|
|
351
|
+
"name": "TooltipProxy",
|
|
352
|
+
"module": "src/Tooltip.ts"
|
|
353
|
+
}
|
|
354
|
+
},
|
|
293
355
|
{
|
|
294
356
|
"kind": "custom-element-definition",
|
|
295
|
-
"name": "
|
|
357
|
+
"name": "tooltip-proxy",
|
|
296
358
|
"declaration": {
|
|
297
|
-
"name": "
|
|
359
|
+
"name": "TooltipProxy",
|
|
298
360
|
"module": "src/Tooltip.ts"
|
|
299
361
|
}
|
|
300
362
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tooltip",
|
|
3
|
-
"version": "0.33.
|
|
3
|
+
"version": "0.33.2",
|
|
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.33.
|
|
61
|
-
"@spectrum-web-components/overlay": "^0.33.
|
|
60
|
+
"@spectrum-web-components/base": "^0.33.2",
|
|
61
|
+
"@spectrum-web-components/overlay": "^0.33.2"
|
|
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": "6d5d6b3c31d92a058202a242a283125d25131f81"
|
|
73
73
|
}
|
package/src/Tooltip.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
-
import type { Placement } from '@spectrum-web-components/overlay';
|
|
3
|
-
|
|
1
|
+
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
import type { OverlayDisplayQueryDetail, Placement } from '@spectrum-web-components/overlay';
|
|
3
|
+
export declare class TooltipProxy extends HTMLElement {
|
|
4
|
+
disconnectedCallback(): void;
|
|
5
|
+
}
|
|
4
6
|
/**
|
|
5
7
|
* @element sp-tooltip
|
|
6
8
|
*
|
|
@@ -13,21 +15,41 @@ export declare class Tooltip extends SpectrumElement {
|
|
|
13
15
|
* @private
|
|
14
16
|
*/
|
|
15
17
|
static instanceCount: number;
|
|
18
|
+
private _tooltipId;
|
|
16
19
|
selfManaged: boolean;
|
|
17
20
|
offset: number;
|
|
21
|
+
private hadTooltipId;
|
|
18
22
|
open: boolean;
|
|
19
23
|
/**
|
|
20
|
-
* @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"}
|
|
24
|
+
* @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" | "none"}
|
|
21
25
|
* @attr
|
|
22
26
|
*/
|
|
23
|
-
placement
|
|
24
|
-
tipElement
|
|
27
|
+
placement: Placement;
|
|
28
|
+
private tipElement;
|
|
25
29
|
private _variant;
|
|
26
30
|
get variant(): string;
|
|
27
31
|
set variant(variant: string);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
constructor();
|
|
33
|
+
onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void;
|
|
34
|
+
private _proxy;
|
|
35
|
+
private generateProxy;
|
|
36
|
+
overlayWillOpenCallback({ trigger, }: {
|
|
37
|
+
trigger: HTMLElement;
|
|
38
|
+
}): void;
|
|
39
|
+
overlayOpenCancelledCallback({ trigger, }: {
|
|
40
|
+
trigger: HTMLElement;
|
|
41
|
+
}): void;
|
|
42
|
+
overlayCloseCallback({ trigger }: {
|
|
43
|
+
trigger: HTMLElement;
|
|
44
|
+
}): void;
|
|
45
|
+
private removeProxy;
|
|
46
|
+
private closeOverlayCallback?;
|
|
47
|
+
private abortOverlay;
|
|
48
|
+
private openOverlay;
|
|
49
|
+
private closeOverlay;
|
|
50
|
+
private previousSlot?;
|
|
51
|
+
private manageTooltip;
|
|
32
52
|
render(): TemplateResult;
|
|
53
|
+
protected update(changed: PropertyValues<this>): Promise<void>;
|
|
54
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
33
55
|
}
|