@vaadin/popover 25.0.0-alpha9 → 25.0.0-beta1
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/package.json +11 -14
- package/src/lit/renderer-directives.d.ts +2 -1
- package/src/lit/renderer-directives.js +2 -1
- package/src/styles/vaadin-popover-overlay-base-styles.js +5 -4
- package/src/vaadin-popover-overlay.js +36 -4
- package/src/vaadin-popover.d.ts +21 -20
- package/src/vaadin-popover.js +120 -96
- package/vaadin-popover.js +1 -1
- package/web-types.json +41 -41
- package/web-types.lit.json +18 -18
- package/src/styles/vaadin-popover-overlay-core-styles.d.ts +0 -8
- package/src/styles/vaadin-popover-overlay-core-styles.js +0 -74
- package/theme/lumo/vaadin-popover-styles.d.ts +0 -4
- package/theme/lumo/vaadin-popover-styles.js +0 -107
- package/theme/lumo/vaadin-popover.d.ts +0 -2
- package/theme/lumo/vaadin-popover.js +0 -2
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/popover",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,17 +10,6 @@
|
|
|
10
10
|
"name": "vaadin-popover",
|
|
11
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.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
|
-
{
|
|
14
|
-
"name": "overlay-class",
|
|
15
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
16
|
-
"value": {
|
|
17
|
-
"type": [
|
|
18
|
-
"string",
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
13
|
{
|
|
25
14
|
"name": "position",
|
|
26
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`.",
|
|
@@ -78,7 +67,7 @@
|
|
|
78
67
|
},
|
|
79
68
|
{
|
|
80
69
|
"name": "height",
|
|
81
|
-
"description": "Set the height of the
|
|
70
|
+
"description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
82
71
|
"value": {
|
|
83
72
|
"type": [
|
|
84
73
|
"string",
|
|
@@ -89,7 +78,7 @@
|
|
|
89
78
|
},
|
|
90
79
|
{
|
|
91
80
|
"name": "width",
|
|
92
|
-
"description": "Set the width of the
|
|
81
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
93
82
|
"value": {
|
|
94
83
|
"type": [
|
|
95
84
|
"string",
|
|
@@ -133,7 +122,7 @@
|
|
|
133
122
|
},
|
|
134
123
|
{
|
|
135
124
|
"name": "opened",
|
|
136
|
-
"description": "True if the popover
|
|
125
|
+
"description": "True if the popover is visible and available for interaction.",
|
|
137
126
|
"value": {
|
|
138
127
|
"type": [
|
|
139
128
|
"boolean",
|
|
@@ -142,9 +131,20 @@
|
|
|
142
131
|
]
|
|
143
132
|
}
|
|
144
133
|
},
|
|
134
|
+
{
|
|
135
|
+
"name": "role",
|
|
136
|
+
"description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
|
|
137
|
+
"value": {
|
|
138
|
+
"type": [
|
|
139
|
+
"string",
|
|
140
|
+
"null",
|
|
141
|
+
"undefined"
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
145
|
{
|
|
146
146
|
"name": "overlay-role",
|
|
147
|
-
"description": "The `role` attribute value to be set on the
|
|
147
|
+
"description": "The `role` attribute value to be set on the popover.",
|
|
148
148
|
"value": {
|
|
149
149
|
"type": [
|
|
150
150
|
"string",
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
},
|
|
156
156
|
{
|
|
157
157
|
"name": "modal",
|
|
158
|
-
"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
|
|
158
|
+
"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 popover.",
|
|
159
159
|
"value": {
|
|
160
160
|
"type": [
|
|
161
161
|
"boolean",
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
"name": "no-close-on-outside-click",
|
|
169
|
-
"description": "Set to true to disable closing popover
|
|
169
|
+
"description": "Set to true to disable closing popover on outside click.",
|
|
170
170
|
"value": {
|
|
171
171
|
"type": [
|
|
172
172
|
"boolean",
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
179
|
"name": "no-close-on-esc",
|
|
180
|
-
"description": "Set to true to disable closing popover
|
|
180
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
181
181
|
"value": {
|
|
182
182
|
"type": [
|
|
183
183
|
"boolean",
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
},
|
|
189
189
|
{
|
|
190
190
|
"name": "with-backdrop",
|
|
191
|
-
"description": "When true, the
|
|
191
|
+
"description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
192
192
|
"value": {
|
|
193
193
|
"type": [
|
|
194
194
|
"boolean",
|
|
@@ -211,17 +211,6 @@
|
|
|
211
211
|
],
|
|
212
212
|
"js": {
|
|
213
213
|
"properties": [
|
|
214
|
-
{
|
|
215
|
-
"name": "overlayClass",
|
|
216
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
217
|
-
"value": {
|
|
218
|
-
"type": [
|
|
219
|
-
"string",
|
|
220
|
-
"null",
|
|
221
|
-
"undefined"
|
|
222
|
-
]
|
|
223
|
-
}
|
|
224
|
-
},
|
|
225
214
|
{
|
|
226
215
|
"name": "position",
|
|
227
216
|
"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`.",
|
|
@@ -290,7 +279,7 @@
|
|
|
290
279
|
},
|
|
291
280
|
{
|
|
292
281
|
"name": "height",
|
|
293
|
-
"description": "Set the height of the
|
|
282
|
+
"description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
294
283
|
"value": {
|
|
295
284
|
"type": [
|
|
296
285
|
"string",
|
|
@@ -301,7 +290,7 @@
|
|
|
301
290
|
},
|
|
302
291
|
{
|
|
303
292
|
"name": "width",
|
|
304
|
-
"description": "Set the width of the
|
|
293
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
305
294
|
"value": {
|
|
306
295
|
"type": [
|
|
307
296
|
"string",
|
|
@@ -345,7 +334,7 @@
|
|
|
345
334
|
},
|
|
346
335
|
{
|
|
347
336
|
"name": "opened",
|
|
348
|
-
"description": "True if the popover
|
|
337
|
+
"description": "True if the popover is visible and available for interaction.",
|
|
349
338
|
"value": {
|
|
350
339
|
"type": [
|
|
351
340
|
"boolean",
|
|
@@ -354,9 +343,20 @@
|
|
|
354
343
|
]
|
|
355
344
|
}
|
|
356
345
|
},
|
|
346
|
+
{
|
|
347
|
+
"name": "role",
|
|
348
|
+
"description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
|
|
349
|
+
"value": {
|
|
350
|
+
"type": [
|
|
351
|
+
"string",
|
|
352
|
+
"null",
|
|
353
|
+
"undefined"
|
|
354
|
+
]
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
357
|
{
|
|
358
358
|
"name": "overlayRole",
|
|
359
|
-
"description": "The `role` attribute value to be set on the
|
|
359
|
+
"description": "The `role` attribute value to be set on the popover.",
|
|
360
360
|
"value": {
|
|
361
361
|
"type": [
|
|
362
362
|
"string",
|
|
@@ -367,7 +367,7 @@
|
|
|
367
367
|
},
|
|
368
368
|
{
|
|
369
369
|
"name": "renderer",
|
|
370
|
-
"description": "Custom function for rendering the content of the
|
|
370
|
+
"description": "Custom function for rendering the content of the popover.\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.",
|
|
371
371
|
"value": {
|
|
372
372
|
"type": [
|
|
373
373
|
"Object",
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
},
|
|
379
379
|
{
|
|
380
380
|
"name": "modal",
|
|
381
|
-
"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
|
|
381
|
+
"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 popover.",
|
|
382
382
|
"value": {
|
|
383
383
|
"type": [
|
|
384
384
|
"boolean",
|
|
@@ -389,7 +389,7 @@
|
|
|
389
389
|
},
|
|
390
390
|
{
|
|
391
391
|
"name": "noCloseOnOutsideClick",
|
|
392
|
-
"description": "Set to true to disable closing popover
|
|
392
|
+
"description": "Set to true to disable closing popover on outside click.",
|
|
393
393
|
"value": {
|
|
394
394
|
"type": [
|
|
395
395
|
"boolean",
|
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
},
|
|
401
401
|
{
|
|
402
402
|
"name": "noCloseOnEsc",
|
|
403
|
-
"description": "Set to true to disable closing popover
|
|
403
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
404
404
|
"value": {
|
|
405
405
|
"type": [
|
|
406
406
|
"boolean",
|
|
@@ -411,7 +411,7 @@
|
|
|
411
411
|
},
|
|
412
412
|
{
|
|
413
413
|
"name": "trigger",
|
|
414
|
-
"description": "Popover trigger mode, used to configure how the
|
|
414
|
+
"description": "Popover trigger mode, used to configure how the popover 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 content keeps the popover opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover content keeps the popover 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 programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
|
|
415
415
|
"value": {
|
|
416
416
|
"type": [
|
|
417
417
|
"Array",
|
|
@@ -422,7 +422,7 @@
|
|
|
422
422
|
},
|
|
423
423
|
{
|
|
424
424
|
"name": "withBackdrop",
|
|
425
|
-
"description": "When true, the
|
|
425
|
+
"description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
426
426
|
"value": {
|
|
427
427
|
"type": [
|
|
428
428
|
"boolean",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/popover",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -28,42 +28,35 @@
|
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
"name": "?opened",
|
|
31
|
-
"description": "True if the popover
|
|
31
|
+
"description": "True if the popover is visible and available for interaction.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
"name": "?modal",
|
|
38
|
-
"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
|
|
38
|
+
"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 popover.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
44
|
"name": "?noCloseOnOutsideClick",
|
|
45
|
-
"description": "Set to true to disable closing popover
|
|
45
|
+
"description": "Set to true to disable closing popover on outside click.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"name": "?noCloseOnEsc",
|
|
52
|
-
"description": "Set to true to disable closing popover
|
|
52
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
"name": "?withBackdrop",
|
|
59
|
-
"description": "When true, the
|
|
60
|
-
"value": {
|
|
61
|
-
"kind": "expression"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"name": ".overlayClass",
|
|
66
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
59
|
+
"description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
67
60
|
"value": {
|
|
68
61
|
"kind": "expression"
|
|
69
62
|
}
|
|
@@ -105,14 +98,14 @@
|
|
|
105
98
|
},
|
|
106
99
|
{
|
|
107
100
|
"name": ".height",
|
|
108
|
-
"description": "Set the height of the
|
|
101
|
+
"description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
109
102
|
"value": {
|
|
110
103
|
"kind": "expression"
|
|
111
104
|
}
|
|
112
105
|
},
|
|
113
106
|
{
|
|
114
107
|
"name": ".width",
|
|
115
|
-
"description": "Set the width of the
|
|
108
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
116
109
|
"value": {
|
|
117
110
|
"kind": "expression"
|
|
118
111
|
}
|
|
@@ -138,23 +131,30 @@
|
|
|
138
131
|
"kind": "expression"
|
|
139
132
|
}
|
|
140
133
|
},
|
|
134
|
+
{
|
|
135
|
+
"name": ".role",
|
|
136
|
+
"description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
141
|
{
|
|
142
142
|
"name": ".overlayRole",
|
|
143
|
-
"description": "The `role` attribute value to be set on the
|
|
143
|
+
"description": "The `role` attribute value to be set on the popover.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
149
|
"name": ".renderer",
|
|
150
|
-
"description": "Custom function for rendering the content of the
|
|
150
|
+
"description": "Custom function for rendering the content of the popover.\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.",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
"name": ".trigger",
|
|
157
|
-
"description": "Popover trigger mode, used to configure how the
|
|
157
|
+
"description": "Popover trigger mode, used to configure how the popover 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 content keeps the popover opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover content keeps the popover 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 programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2024 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
|
|
8
|
-
|
|
9
|
-
const popoverOverlay = css`
|
|
10
|
-
:host {
|
|
11
|
-
--_default-offset: 0;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
:host([modeless][with-backdrop]) [part='backdrop'] {
|
|
15
|
-
pointer-events: none;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
:host([position^='top'][top-aligned]) [part='overlay'],
|
|
19
|
-
:host([position^='bottom'][top-aligned]) [part='overlay'] {
|
|
20
|
-
margin-top: var(--vaadin-popover-offset-top, var(--_default-offset));
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
[part='overlay'] {
|
|
24
|
-
position: relative;
|
|
25
|
-
overflow: visible;
|
|
26
|
-
max-height: 100%;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
[part='content'] {
|
|
30
|
-
overflow: auto;
|
|
31
|
-
box-sizing: border-box;
|
|
32
|
-
max-height: 100%;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* Increase the area of the popover so the pointer can go from the target directly to it. */
|
|
36
|
-
[part='overlay']::before {
|
|
37
|
-
position: absolute;
|
|
38
|
-
content: '';
|
|
39
|
-
inset-block: calc(var(--vaadin-popover-offset-top, var(--_default-offset)) * -1)
|
|
40
|
-
calc(var(--vaadin-popover-offset-bottom, var(--_default-offset)) * -1);
|
|
41
|
-
inset-inline: calc(var(--vaadin-popover-offset-start, var(--_default-offset)) * -1)
|
|
42
|
-
calc(var(--vaadin-popover-offset-end, var(--_default-offset)) * -1);
|
|
43
|
-
z-index: -1;
|
|
44
|
-
pointer-events: auto;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
:host([position^='top'][bottom-aligned]) [part='overlay'],
|
|
48
|
-
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
|
|
49
|
-
margin-bottom: var(--vaadin-popover-offset-bottom, var(--_default-offset));
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
:host([position^='start'][start-aligned]) [part='overlay'],
|
|
53
|
-
:host([position^='end'][start-aligned]) [part='overlay'] {
|
|
54
|
-
margin-inline-start: var(--vaadin-popover-offset-start, var(--_default-offset));
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
:host([position^='start'][end-aligned]) [part='overlay'],
|
|
58
|
-
:host([position^='end'][end-aligned]) [part='overlay'] {
|
|
59
|
-
margin-inline-end: var(--vaadin-popover-offset-end, var(--_default-offset));
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
[part='arrow'] {
|
|
63
|
-
display: none;
|
|
64
|
-
position: absolute;
|
|
65
|
-
height: 0;
|
|
66
|
-
width: 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
:host([theme~='arrow']) [part='arrow'] {
|
|
70
|
-
display: block;
|
|
71
|
-
}
|
|
72
|
-
`;
|
|
73
|
-
|
|
74
|
-
export const popoverOverlayStyles = [overlayStyles, popoverOverlay];
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
4
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
5
|
-
import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
|
|
6
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
|
-
|
|
8
|
-
const popoverOverlay = css`
|
|
9
|
-
:host {
|
|
10
|
-
--vaadin-popover-arrow-size: 0.5rem;
|
|
11
|
-
--_default-offset: var(--lumo-space-xs);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
[part='overlay'] {
|
|
15
|
-
outline: none;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
[part='content'] {
|
|
19
|
-
padding: var(--lumo-space-xs) var(--lumo-space-s);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:host([theme~='no-padding']) [part='content'] {
|
|
23
|
-
padding: 0 !important;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:host([theme~='arrow']) {
|
|
27
|
-
--_default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* top / bottom position */
|
|
31
|
-
:host([theme~='arrow'][position^='top']) [part='arrow'],
|
|
32
|
-
:host([theme~='arrow'][position^='bottom']) [part='arrow'] {
|
|
33
|
-
border-left: var(--vaadin-popover-arrow-size) solid transparent;
|
|
34
|
-
border-right: var(--vaadin-popover-arrow-size) solid transparent;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
:host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
|
|
38
|
-
:host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
|
|
39
|
-
bottom: calc(var(--vaadin-popover-arrow-size) * -1);
|
|
40
|
-
border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
|
|
41
|
-
filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
:host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
|
|
45
|
-
:host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
|
|
46
|
-
top: calc(var(--vaadin-popover-arrow-size) * -1);
|
|
47
|
-
border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
|
|
48
|
-
filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
:host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
|
|
52
|
-
:host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
|
|
53
|
-
transform: translateX(-50%);
|
|
54
|
-
inset-inline-start: 1.5rem;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
:host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
|
|
58
|
-
:host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
|
|
59
|
-
transform: translateX(50%);
|
|
60
|
-
inset-inline-end: 1.5rem;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
:host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
|
|
64
|
-
:host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
|
|
65
|
-
transform: translateX(-50%);
|
|
66
|
-
inset-inline-start: 50%;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* start / end position */
|
|
70
|
-
:host([theme~='arrow'][position^='start']) [part='arrow'],
|
|
71
|
-
:host([theme~='arrow'][position^='end']) [part='arrow'] {
|
|
72
|
-
border-top: var(--vaadin-popover-arrow-size) solid transparent;
|
|
73
|
-
border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
:host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
|
|
77
|
-
:host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
|
|
78
|
-
inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
|
|
79
|
-
border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
|
|
80
|
-
filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
:host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
|
|
84
|
-
:host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
|
|
85
|
-
inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
|
|
86
|
-
border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
|
|
87
|
-
filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
:host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
|
|
91
|
-
:host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
|
|
92
|
-
top: 0.5rem;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
:host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
|
|
96
|
-
:host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
|
|
97
|
-
top: 50%;
|
|
98
|
-
transform: translateY(-50%);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
:host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
|
|
102
|
-
:host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
|
|
103
|
-
bottom: 0.5rem;
|
|
104
|
-
}
|
|
105
|
-
`;
|
|
106
|
-
|
|
107
|
-
registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'lumo-popover-overlay' });
|