@vaadin/popover 24.5.0-alpha1
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/LICENSE +190 -0
- package/README.md +53 -0
- package/package.json +56 -0
- package/src/vaadin-popover-overlay-mixin.js +93 -0
- package/src/vaadin-popover-overlay.js +118 -0
- package/src/vaadin-popover-position-mixin.d.ts +37 -0
- package/src/vaadin-popover-position-mixin.js +67 -0
- package/src/vaadin-popover-target-mixin.d.ts +35 -0
- package/src/vaadin-popover-target-mixin.js +92 -0
- package/src/vaadin-popover.d.ts +191 -0
- package/src/vaadin-popover.js +739 -0
- package/theme/lumo/vaadin-popover-styles.d.ts +3 -0
- package/theme/lumo/vaadin-popover-styles.js +20 -0
- package/theme/lumo/vaadin-popover.d.ts +2 -0
- package/theme/lumo/vaadin-popover.js +2 -0
- package/theme/material/vaadin-popover-styles.d.ts +1 -0
- package/theme/material/vaadin-popover-styles.js +17 -0
- package/theme/material/vaadin-popover.d.ts +2 -0
- package/theme/material/vaadin-popover.js +2 -0
- package/vaadin-popover.d.ts +1 -0
- package/vaadin-popover.js +2 -0
- package/web-types.json +402 -0
- package/web-types.lit.json +160 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
+
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
3
|
+
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
4
|
+
import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
|
|
5
|
+
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
6
|
+
|
|
7
|
+
const popoverOverlay = css`
|
|
8
|
+
:host {
|
|
9
|
+
--vaadin-popover-offset-top: var(--lumo-space-xs);
|
|
10
|
+
--vaadin-popover-offset-bottom: var(--lumo-space-xs);
|
|
11
|
+
--vaadin-popover-offset-start: var(--lumo-space-xs);
|
|
12
|
+
--vaadin-popover-offset-end: var(--lumo-space-xs);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[part='content'] {
|
|
16
|
+
padding: var(--lumo-space-xs) var(--lumo-space-s);
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
|
|
20
|
+
registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'lumo-popover-overlay' });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
|
|
2
|
+
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
3
|
+
|
|
4
|
+
const popoverOverlay = css`
|
|
5
|
+
:host {
|
|
6
|
+
--vaadin-popover-offset-top: 0.25rem;
|
|
7
|
+
--vaadin-popover-offset-bottom: 0.25rem;
|
|
8
|
+
--vaadin-popover-offset-start: 0.25rem;
|
|
9
|
+
--vaadin-popover-offset-end: 0.25rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
[part='content'] {
|
|
13
|
+
padding: 0.25rem 0.5rem;
|
|
14
|
+
}
|
|
15
|
+
`;
|
|
16
|
+
|
|
17
|
+
registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'material-popover-overlay' });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-popover.js';
|
package/web-types.json
ADDED
|
@@ -0,0 +1,402 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/popover",
|
|
4
|
+
"version": "24.5.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-popover",
|
|
11
|
+
"description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "position",
|
|
15
|
+
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "for",
|
|
26
|
+
"description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"string",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "accessible-name",
|
|
37
|
+
"description": "String used to label the overlay to screen reader users.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"string",
|
|
41
|
+
"null",
|
|
42
|
+
"undefined"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "accessible-name-ref",
|
|
48
|
+
"description": "Id of the element used as label of the overlay to screen reader users.",
|
|
49
|
+
"value": {
|
|
50
|
+
"type": [
|
|
51
|
+
"string",
|
|
52
|
+
"null",
|
|
53
|
+
"undefined"
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "content-height",
|
|
59
|
+
"description": "Height to be set on the overlay content.",
|
|
60
|
+
"value": {
|
|
61
|
+
"type": [
|
|
62
|
+
"string",
|
|
63
|
+
"null",
|
|
64
|
+
"undefined"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "content-width",
|
|
70
|
+
"description": "Width to be set on the overlay content.",
|
|
71
|
+
"value": {
|
|
72
|
+
"type": [
|
|
73
|
+
"string",
|
|
74
|
+
"null",
|
|
75
|
+
"undefined"
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "focus-delay",
|
|
81
|
+
"description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"number",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "hide-delay",
|
|
92
|
+
"description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
|
|
93
|
+
"value": {
|
|
94
|
+
"type": [
|
|
95
|
+
"number",
|
|
96
|
+
"null",
|
|
97
|
+
"undefined"
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "hover-delay",
|
|
103
|
+
"description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
|
|
104
|
+
"value": {
|
|
105
|
+
"type": [
|
|
106
|
+
"number",
|
|
107
|
+
"null",
|
|
108
|
+
"undefined"
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "opened",
|
|
114
|
+
"description": "True if the popover overlay is opened, false otherwise.",
|
|
115
|
+
"value": {
|
|
116
|
+
"type": [
|
|
117
|
+
"boolean",
|
|
118
|
+
"null",
|
|
119
|
+
"undefined"
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "overlay-role",
|
|
125
|
+
"description": "The `role` attribute value to be set on the overlay.",
|
|
126
|
+
"value": {
|
|
127
|
+
"type": [
|
|
128
|
+
"string",
|
|
129
|
+
"null",
|
|
130
|
+
"undefined"
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": "modal",
|
|
136
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the overlay.",
|
|
137
|
+
"value": {
|
|
138
|
+
"type": [
|
|
139
|
+
"boolean",
|
|
140
|
+
"null",
|
|
141
|
+
"undefined"
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"name": "no-close-on-outside-click",
|
|
147
|
+
"description": "Set to true to disable closing popover overlay on outside click.",
|
|
148
|
+
"value": {
|
|
149
|
+
"type": [
|
|
150
|
+
"boolean",
|
|
151
|
+
"null",
|
|
152
|
+
"undefined"
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"name": "no-close-on-esc",
|
|
158
|
+
"description": "Set to true to disable closing popover overlay on Escape press.\nWhen the popover is modal, pressing Escape anywhere in the\ndocument closes the overlay. Otherwise, only Escape press\nfrom the popover itself or its target closes the overlay.",
|
|
159
|
+
"value": {
|
|
160
|
+
"type": [
|
|
161
|
+
"boolean",
|
|
162
|
+
"null",
|
|
163
|
+
"undefined"
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"name": "with-backdrop",
|
|
169
|
+
"description": "When true, the overlay has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
170
|
+
"value": {
|
|
171
|
+
"type": [
|
|
172
|
+
"boolean",
|
|
173
|
+
"null",
|
|
174
|
+
"undefined"
|
|
175
|
+
]
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "theme",
|
|
180
|
+
"description": "The theme variants to apply to the component.",
|
|
181
|
+
"value": {
|
|
182
|
+
"type": [
|
|
183
|
+
"string",
|
|
184
|
+
"null",
|
|
185
|
+
"undefined"
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
],
|
|
190
|
+
"js": {
|
|
191
|
+
"properties": [
|
|
192
|
+
{
|
|
193
|
+
"name": "position",
|
|
194
|
+
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
|
|
195
|
+
"value": {
|
|
196
|
+
"type": [
|
|
197
|
+
"string",
|
|
198
|
+
"null",
|
|
199
|
+
"undefined"
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"name": "for",
|
|
205
|
+
"description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
|
|
206
|
+
"value": {
|
|
207
|
+
"type": [
|
|
208
|
+
"string",
|
|
209
|
+
"null",
|
|
210
|
+
"undefined"
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "target",
|
|
216
|
+
"description": "Reference to the DOM element used both to trigger the overlay\nby user interaction and to visually position it on the screen.\n\nDefaults to an element referenced with `for` attribute, in\nwhich case it must be located in the same shadow scope.",
|
|
217
|
+
"value": {
|
|
218
|
+
"type": [
|
|
219
|
+
"Object",
|
|
220
|
+
"null",
|
|
221
|
+
"undefined"
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"name": "accessibleName",
|
|
227
|
+
"description": "String used to label the overlay to screen reader users.",
|
|
228
|
+
"value": {
|
|
229
|
+
"type": [
|
|
230
|
+
"string",
|
|
231
|
+
"null",
|
|
232
|
+
"undefined"
|
|
233
|
+
]
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"name": "accessibleNameRef",
|
|
238
|
+
"description": "Id of the element used as label of the overlay to screen reader users.",
|
|
239
|
+
"value": {
|
|
240
|
+
"type": [
|
|
241
|
+
"string",
|
|
242
|
+
"null",
|
|
243
|
+
"undefined"
|
|
244
|
+
]
|
|
245
|
+
}
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"name": "contentHeight",
|
|
249
|
+
"description": "Height to be set on the overlay content.",
|
|
250
|
+
"value": {
|
|
251
|
+
"type": [
|
|
252
|
+
"string",
|
|
253
|
+
"null",
|
|
254
|
+
"undefined"
|
|
255
|
+
]
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"name": "contentWidth",
|
|
260
|
+
"description": "Width to be set on the overlay content.",
|
|
261
|
+
"value": {
|
|
262
|
+
"type": [
|
|
263
|
+
"string",
|
|
264
|
+
"null",
|
|
265
|
+
"undefined"
|
|
266
|
+
]
|
|
267
|
+
}
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
"name": "focusDelay",
|
|
271
|
+
"description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
|
|
272
|
+
"value": {
|
|
273
|
+
"type": [
|
|
274
|
+
"number",
|
|
275
|
+
"null",
|
|
276
|
+
"undefined"
|
|
277
|
+
]
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"name": "hideDelay",
|
|
282
|
+
"description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
|
|
283
|
+
"value": {
|
|
284
|
+
"type": [
|
|
285
|
+
"number",
|
|
286
|
+
"null",
|
|
287
|
+
"undefined"
|
|
288
|
+
]
|
|
289
|
+
}
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"name": "hoverDelay",
|
|
293
|
+
"description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
|
|
294
|
+
"value": {
|
|
295
|
+
"type": [
|
|
296
|
+
"number",
|
|
297
|
+
"null",
|
|
298
|
+
"undefined"
|
|
299
|
+
]
|
|
300
|
+
}
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"name": "opened",
|
|
304
|
+
"description": "True if the popover overlay is opened, false otherwise.",
|
|
305
|
+
"value": {
|
|
306
|
+
"type": [
|
|
307
|
+
"boolean",
|
|
308
|
+
"null",
|
|
309
|
+
"undefined"
|
|
310
|
+
]
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
"name": "overlayRole",
|
|
315
|
+
"description": "The `role` attribute value to be set on the overlay.",
|
|
316
|
+
"value": {
|
|
317
|
+
"type": [
|
|
318
|
+
"string",
|
|
319
|
+
"null",
|
|
320
|
+
"undefined"
|
|
321
|
+
]
|
|
322
|
+
}
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"name": "renderer",
|
|
326
|
+
"description": "Custom function for rendering the content of the overlay.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element (overlay host).",
|
|
327
|
+
"value": {
|
|
328
|
+
"type": [
|
|
329
|
+
"Object",
|
|
330
|
+
"null",
|
|
331
|
+
"undefined"
|
|
332
|
+
]
|
|
333
|
+
}
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"name": "modal",
|
|
337
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the overlay.",
|
|
338
|
+
"value": {
|
|
339
|
+
"type": [
|
|
340
|
+
"boolean",
|
|
341
|
+
"null",
|
|
342
|
+
"undefined"
|
|
343
|
+
]
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"name": "noCloseOnOutsideClick",
|
|
348
|
+
"description": "Set to true to disable closing popover overlay on outside click.",
|
|
349
|
+
"value": {
|
|
350
|
+
"type": [
|
|
351
|
+
"boolean",
|
|
352
|
+
"null",
|
|
353
|
+
"undefined"
|
|
354
|
+
]
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"name": "noCloseOnEsc",
|
|
359
|
+
"description": "Set to true to disable closing popover overlay on Escape press.\nWhen the popover is modal, pressing Escape anywhere in the\ndocument closes the overlay. Otherwise, only Escape press\nfrom the popover itself or its target closes the overlay.",
|
|
360
|
+
"value": {
|
|
361
|
+
"type": [
|
|
362
|
+
"boolean",
|
|
363
|
+
"null",
|
|
364
|
+
"undefined"
|
|
365
|
+
]
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "trigger",
|
|
370
|
+
"description": "Popover trigger mode, used to configure how the overlay is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover overlay content keeps the overlay opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover overlay content keeps the overlay opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened or closed programmatically by changing `opened` property.",
|
|
371
|
+
"value": {
|
|
372
|
+
"type": [
|
|
373
|
+
"Array",
|
|
374
|
+
"null",
|
|
375
|
+
"undefined"
|
|
376
|
+
]
|
|
377
|
+
}
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"name": "withBackdrop",
|
|
381
|
+
"description": "When true, the overlay has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
382
|
+
"value": {
|
|
383
|
+
"type": [
|
|
384
|
+
"boolean",
|
|
385
|
+
"null",
|
|
386
|
+
"undefined"
|
|
387
|
+
]
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
],
|
|
391
|
+
"events": [
|
|
392
|
+
{
|
|
393
|
+
"name": "opened-changed",
|
|
394
|
+
"description": "Fired when the `opened` property changes."
|
|
395
|
+
}
|
|
396
|
+
]
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
]
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
}
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/popover",
|
|
4
|
+
"version": "24.5.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-popover",
|
|
19
|
+
"description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?opened",
|
|
24
|
+
"description": "True if the popover overlay is opened, false otherwise.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?modal",
|
|
31
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the overlay.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?noCloseOnOutsideClick",
|
|
38
|
+
"description": "Set to true to disable closing popover overlay on outside click.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?noCloseOnEsc",
|
|
45
|
+
"description": "Set to true to disable closing popover overlay on Escape press.\nWhen the popover is modal, pressing Escape anywhere in the\ndocument closes the overlay. Otherwise, only Escape press\nfrom the popover itself or its target closes the overlay.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "?withBackdrop",
|
|
52
|
+
"description": "When true, the overlay has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".position",
|
|
59
|
+
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".for",
|
|
66
|
+
"description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": ".target",
|
|
73
|
+
"description": "Reference to the DOM element used both to trigger the overlay\nby user interaction and to visually position it on the screen.\n\nDefaults to an element referenced with `for` attribute, in\nwhich case it must be located in the same shadow scope.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".accessibleName",
|
|
80
|
+
"description": "String used to label the overlay to screen reader users.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": ".accessibleNameRef",
|
|
87
|
+
"description": "Id of the element used as label of the overlay to screen reader users.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": ".contentHeight",
|
|
94
|
+
"description": "Height to be set on the overlay content.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": ".contentWidth",
|
|
101
|
+
"description": "Width to be set on the overlay content.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".focusDelay",
|
|
108
|
+
"description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
|
|
109
|
+
"value": {
|
|
110
|
+
"kind": "expression"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": ".hideDelay",
|
|
115
|
+
"description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
|
|
116
|
+
"value": {
|
|
117
|
+
"kind": "expression"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": ".hoverDelay",
|
|
122
|
+
"description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": ".overlayRole",
|
|
129
|
+
"description": "The `role` attribute value to be set on the overlay.",
|
|
130
|
+
"value": {
|
|
131
|
+
"kind": "expression"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": ".renderer",
|
|
136
|
+
"description": "Custom function for rendering the content of the overlay.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element (overlay host).",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": ".trigger",
|
|
143
|
+
"description": "Popover trigger mode, used to configure how the overlay is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover overlay content keeps the overlay opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover overlay content keeps the overlay opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened or closed programmatically by changing `opened` property.",
|
|
144
|
+
"value": {
|
|
145
|
+
"kind": "expression"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "@opened-changed",
|
|
150
|
+
"description": "Fired when the `opened` property changes.",
|
|
151
|
+
"value": {
|
|
152
|
+
"kind": "expression"
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|