@spectrum-web-components/popover 0.31.1-react.3 → 0.32.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/README.md +47 -70
- package/custom-elements.json +13 -4
- package/package.json +5 -5
- package/src/Popover.d.ts +2 -1
- package/src/Popover.dev.js +21 -9
- package/src/Popover.dev.js.map +2 -2
- package/src/Popover.js +9 -13
- package/src/Popover.js.map +3 -3
- package/src/popover.css.dev.js +69 -23
- package/src/popover.css.dev.js.map +2 -2
- package/src/popover.css.js +69 -23
- package/src/popover.css.js.map +2 -2
- package/src/spectrum-popover.css.dev.js +56 -22
- package/src/spectrum-popover.css.dev.js.map +2 -2
- package/src/spectrum-popover.css.js +58 -24
- package/src/spectrum-popover.css.js.map +2 -2
- package/stories/popover.stories.js +79 -7
- package/stories/popover.stories.js.map +2 -2
package/README.md
CHANGED
|
@@ -36,21 +36,13 @@ import { Popover } from '@spectrum-web-components/popover';
|
|
|
36
36
|
max-width: 100%;
|
|
37
37
|
"
|
|
38
38
|
>
|
|
39
|
-
<sp-popover
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
font-size: 18px;
|
|
43
|
-
font-weight: 700;
|
|
44
|
-
padding-bottom: 30px;
|
|
45
|
-
"
|
|
46
|
-
>
|
|
47
|
-
Popover title
|
|
48
|
-
</div>
|
|
49
|
-
<div style="font-size: 14px">
|
|
39
|
+
<sp-popover open style="--spectrum-popover-dialog-min-width: 0;">
|
|
40
|
+
<sp-dialog>
|
|
41
|
+
<h3 slot="heading">Popover title</h3>
|
|
50
42
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
51
43
|
Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
|
|
52
44
|
sweet roll cake danish candy biscuit halvah
|
|
53
|
-
</
|
|
45
|
+
</sp-dialog>
|
|
54
46
|
</sp-popover>
|
|
55
47
|
</div>
|
|
56
48
|
```
|
|
@@ -99,7 +91,7 @@ element by default. The default popover has no padding by default
|
|
|
99
91
|
|
|
100
92
|
### Dialog popovers
|
|
101
93
|
|
|
102
|
-
|
|
94
|
+
To apply a managed about of padding within your `<sp-popover>` you may choose to wrap you slotted content with an `<sp-dialog>` element, as seen below:
|
|
103
95
|
|
|
104
96
|
```html
|
|
105
97
|
<div
|
|
@@ -111,7 +103,7 @@ Popovers with padding, ideal for dialogs.
|
|
|
111
103
|
max-width: 100%;
|
|
112
104
|
"
|
|
113
105
|
>
|
|
114
|
-
<sp-popover
|
|
106
|
+
<sp-popover open style="--spectrum-popover-dialog-min-width: 0;">
|
|
115
107
|
<div
|
|
116
108
|
style="
|
|
117
109
|
font-size: 18px;
|
|
@@ -132,7 +124,13 @@ Popovers with padding, ideal for dialogs.
|
|
|
132
124
|
|
|
133
125
|
### Popover with tip
|
|
134
126
|
|
|
135
|
-
|
|
127
|
+
The `placement` attribute can be used to customize from where the `<sp-popover>` points to content to which it is related. `placement="top"` will point down to the related content from the top, etc.
|
|
128
|
+
|
|
129
|
+
<sp-tabs selected="top" auto label="Popover tip placements">
|
|
130
|
+
<sp-tab value="top">Top</sp-tab>
|
|
131
|
+
<sp-tab-panel value="top">
|
|
132
|
+
|
|
133
|
+
```html demo
|
|
136
134
|
<div
|
|
137
135
|
style="
|
|
138
136
|
color: var(--spectrum-gray-800);
|
|
@@ -143,31 +141,26 @@ Popovers with padding, ideal for dialogs.
|
|
|
143
141
|
"
|
|
144
142
|
>
|
|
145
143
|
<sp-popover
|
|
146
|
-
|
|
147
|
-
placement="bottom"
|
|
144
|
+
placement="top"
|
|
148
145
|
tip
|
|
149
146
|
open
|
|
150
147
|
style="--spectrum-popover-dialog-min-width: 0;"
|
|
151
148
|
>
|
|
152
|
-
<
|
|
153
|
-
|
|
154
|
-
font-size: 18px;
|
|
155
|
-
font-weight: 700;
|
|
156
|
-
padding-bottom: 30px;
|
|
157
|
-
"
|
|
158
|
-
>
|
|
159
|
-
Popover title
|
|
160
|
-
</div>
|
|
161
|
-
<div style="font-size: 14px">
|
|
149
|
+
<sp-dialog>
|
|
150
|
+
<h3 slot="heading">Popover title</h3>
|
|
162
151
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
163
152
|
Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
|
|
164
153
|
sweet roll cake danish candy biscuit halvah
|
|
165
|
-
</
|
|
154
|
+
</sp-dialog>
|
|
166
155
|
</sp-popover>
|
|
167
156
|
</div>
|
|
168
157
|
```
|
|
169
158
|
|
|
170
|
-
|
|
159
|
+
</sp-tab-panel>
|
|
160
|
+
<sp-tab value="right">Right</sp-tab>
|
|
161
|
+
<sp-tab-panel value="right">
|
|
162
|
+
|
|
163
|
+
```html demo
|
|
171
164
|
<div
|
|
172
165
|
style="
|
|
173
166
|
color: var(--spectrum-gray-800);
|
|
@@ -178,31 +171,26 @@ Popovers with padding, ideal for dialogs.
|
|
|
178
171
|
"
|
|
179
172
|
>
|
|
180
173
|
<sp-popover
|
|
181
|
-
|
|
182
|
-
placement="top"
|
|
174
|
+
placement="right"
|
|
183
175
|
tip
|
|
184
176
|
open
|
|
185
177
|
style="--spectrum-popover-dialog-min-width: 0;"
|
|
186
178
|
>
|
|
187
|
-
<
|
|
188
|
-
|
|
189
|
-
font-size: 18px;
|
|
190
|
-
font-weight: 700;
|
|
191
|
-
padding-bottom: 30px;
|
|
192
|
-
"
|
|
193
|
-
>
|
|
194
|
-
Popover title
|
|
195
|
-
</div>
|
|
196
|
-
<div style="font-size: 14px">
|
|
179
|
+
<sp-dialog>
|
|
180
|
+
<h3 slot="heading">Popover title</h3>
|
|
197
181
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
198
182
|
Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
|
|
199
183
|
sweet roll cake danish candy biscuit halvah
|
|
200
|
-
</
|
|
184
|
+
</sp-dialog>
|
|
201
185
|
</sp-popover>
|
|
202
186
|
</div>
|
|
203
187
|
```
|
|
204
188
|
|
|
205
|
-
|
|
189
|
+
</sp-tab-panel>
|
|
190
|
+
<sp-tab value="bottom">Bottom</sp-tab>
|
|
191
|
+
<sp-tab-panel value="bottom">
|
|
192
|
+
|
|
193
|
+
```html demo
|
|
206
194
|
<div
|
|
207
195
|
style="
|
|
208
196
|
color: var(--spectrum-gray-800);
|
|
@@ -213,31 +201,26 @@ Popovers with padding, ideal for dialogs.
|
|
|
213
201
|
"
|
|
214
202
|
>
|
|
215
203
|
<sp-popover
|
|
216
|
-
|
|
217
|
-
placement="left"
|
|
204
|
+
placement="bottom"
|
|
218
205
|
tip
|
|
219
206
|
open
|
|
220
207
|
style="--spectrum-popover-dialog-min-width: 0;"
|
|
221
208
|
>
|
|
222
|
-
<
|
|
223
|
-
|
|
224
|
-
font-size: 18px;
|
|
225
|
-
font-weight: 700;
|
|
226
|
-
padding-bottom: 30px;
|
|
227
|
-
"
|
|
228
|
-
>
|
|
229
|
-
Popover title
|
|
230
|
-
</div>
|
|
231
|
-
<div style="font-size: 14px">
|
|
209
|
+
<sp-dialog>
|
|
210
|
+
<h3 slot="heading">Popover title</h3>
|
|
232
211
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
233
212
|
Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
|
|
234
213
|
sweet roll cake danish candy biscuit halvah
|
|
235
|
-
</
|
|
214
|
+
</sp-dialog>
|
|
236
215
|
</sp-popover>
|
|
237
216
|
</div>
|
|
238
217
|
```
|
|
239
218
|
|
|
240
|
-
|
|
219
|
+
</sp-tab-panel>
|
|
220
|
+
<sp-tab value="left">Left</sp-tab>
|
|
221
|
+
<sp-tab-panel value="left">
|
|
222
|
+
|
|
223
|
+
```html demo
|
|
241
224
|
<div
|
|
242
225
|
style="
|
|
243
226
|
color: var(--spectrum-gray-800);
|
|
@@ -248,26 +231,20 @@ Popovers with padding, ideal for dialogs.
|
|
|
248
231
|
"
|
|
249
232
|
>
|
|
250
233
|
<sp-popover
|
|
251
|
-
|
|
252
|
-
placement="right"
|
|
234
|
+
placement="left"
|
|
253
235
|
tip
|
|
254
236
|
open
|
|
255
237
|
style="--spectrum-popover-dialog-min-width: 0;"
|
|
256
238
|
>
|
|
257
|
-
<
|
|
258
|
-
|
|
259
|
-
font-size: 18px;
|
|
260
|
-
font-weight: 700;
|
|
261
|
-
padding-bottom: 30px;
|
|
262
|
-
"
|
|
263
|
-
>
|
|
264
|
-
Popover title
|
|
265
|
-
</div>
|
|
266
|
-
<div style="font-size: 14px">
|
|
239
|
+
<sp-dialog>
|
|
240
|
+
<h3 slot="heading">Popover title</h3>
|
|
267
241
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
268
242
|
Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
|
|
269
243
|
sweet roll cake danish candy biscuit halvah
|
|
270
|
-
</
|
|
244
|
+
</sp-dialog>
|
|
271
245
|
</sp-popover>
|
|
272
246
|
</div>
|
|
273
247
|
```
|
|
248
|
+
|
|
249
|
+
</sp-tab-panel>
|
|
250
|
+
</sp-tabs>
|
package/custom-elements.json
CHANGED
|
@@ -4,13 +4,22 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-popover.
|
|
7
|
+
"path": "sp-popover.js",
|
|
8
8
|
"declarations": [],
|
|
9
|
-
"exports": [
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "custom-element-definition",
|
|
12
|
+
"name": "sp-popover",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "Popover",
|
|
15
|
+
"module": "/src/Popover.js"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
]
|
|
10
19
|
},
|
|
11
20
|
{
|
|
12
21
|
"kind": "javascript-module",
|
|
13
|
-
"path": "src/Popover.
|
|
22
|
+
"path": "src/Popover.js",
|
|
14
23
|
"declarations": [
|
|
15
24
|
{
|
|
16
25
|
"kind": "class",
|
|
@@ -149,7 +158,7 @@
|
|
|
149
158
|
"name": "Popover",
|
|
150
159
|
"declaration": {
|
|
151
160
|
"name": "Popover",
|
|
152
|
-
"module": "src/Popover.
|
|
161
|
+
"module": "src/Popover.js"
|
|
153
162
|
}
|
|
154
163
|
}
|
|
155
164
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/popover",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.32.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.
|
|
61
|
-
"@spectrum-web-components/overlay": "^0.
|
|
60
|
+
"@spectrum-web-components/base": "^0.32.0",
|
|
61
|
+
"@spectrum-web-components/overlay": "^0.32.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@spectrum-css/popover": "^
|
|
64
|
+
"@spectrum-css/popover": "^6.0.46"
|
|
65
65
|
},
|
|
66
66
|
"types": "./src/index.d.ts",
|
|
67
67
|
"customElements": "custom-elements.json",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"./sp-*.js",
|
|
70
70
|
"./**/*.dev.js"
|
|
71
71
|
],
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "c5f67662ac54d0e37debaf7cbd7c2df60e8b294e"
|
|
73
73
|
}
|
package/src/Popover.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
1
|
+
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import type { OverlayDisplayQueryDetail, Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';
|
|
3
3
|
/**
|
|
4
4
|
* @element sp-popover
|
|
@@ -26,5 +26,6 @@ export declare class Popover extends SpectrumElement {
|
|
|
26
26
|
connectedCallback(): void;
|
|
27
27
|
disconnectedCallback(): void;
|
|
28
28
|
onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void;
|
|
29
|
+
protected update(changes: PropertyValues): void;
|
|
29
30
|
protected render(): TemplateResult;
|
|
30
31
|
}
|
package/src/Popover.dev.js
CHANGED
|
@@ -31,15 +31,11 @@ export class Popover extends SpectrumElement {
|
|
|
31
31
|
renderTip() {
|
|
32
32
|
return html`
|
|
33
33
|
<div id="tip">
|
|
34
|
-
<svg
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<path
|
|
40
|
-
class="triangle"
|
|
41
|
-
d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0"
|
|
42
|
-
></path>
|
|
34
|
+
<svg class="tip block" viewBox="0 -0.5 16 9">
|
|
35
|
+
<path class="triangle" d="M-1,-1 8,8 17,-1"></path>
|
|
36
|
+
</svg>
|
|
37
|
+
<svg class="tip inline" viewBox="0 -0.5 9 16">
|
|
38
|
+
<path class="triangle" d="M-1,-1 8,8 -1,17"></path>
|
|
43
39
|
</svg>
|
|
44
40
|
</div>
|
|
45
41
|
`;
|
|
@@ -69,6 +65,22 @@ export class Popover extends SpectrumElement {
|
|
|
69
65
|
event.detail.overlayContentTipElement = tipElement;
|
|
70
66
|
}
|
|
71
67
|
}
|
|
68
|
+
update(changes) {
|
|
69
|
+
if (true) {
|
|
70
|
+
if (changes.has("dialog") && this.dialog) {
|
|
71
|
+
window.__swc.warn(
|
|
72
|
+
this,
|
|
73
|
+
`<${this.localName}> no longer supports the "dialog" attribute. Please slot an <sp-dialog> element into the <${this.localName}> instead.`,
|
|
74
|
+
"https://opensource.adobe.com/spectrum-web-components/components/popover/#dialog-popovers",
|
|
75
|
+
{
|
|
76
|
+
type: "api",
|
|
77
|
+
level: "deprecation"
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
super.update(changes);
|
|
83
|
+
}
|
|
72
84
|
render() {
|
|
73
85
|
return html`
|
|
74
86
|
<slot></slot>
|
package/src/Popover.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Popover.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport type {\n OverlayDisplayQueryDetail,\n Placement,\n} from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport popoverStyles from './popover.css.js';\n\n/**\n * @element sp-popover\n *\n * @slot - content to display within the Popover\n */\nexport class Popover extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [popoverStyles];\n }\n\n /**\n * Whether the popover should manage the application\n * of padding to its content or not.\n */\n @property({ type: Boolean, reflect: true })\n public dialog = false;\n\n /**\n * Whether the popover is visible or not.\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * @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\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'none';\n\n @property({ type: Boolean, reflect: true })\n public tip = false;\n\n protected renderTip(): TemplateResult {\n return html`\n <div id=\"tip\">\n <svg\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport type {\n OverlayDisplayQueryDetail,\n Placement,\n} from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport popoverStyles from './popover.css.js';\n\n/**\n * @element sp-popover\n *\n * @slot - content to display within the Popover\n */\nexport class Popover extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [popoverStyles];\n }\n\n /**\n * Whether the popover should manage the application\n * of padding to its content or not.\n */\n @property({ type: Boolean, reflect: true })\n public dialog = false;\n\n /**\n * Whether the popover is visible or not.\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * @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\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'none';\n\n @property({ type: Boolean, reflect: true })\n public tip = false;\n\n protected renderTip(): TemplateResult {\n return html`\n <div id=\"tip\">\n <svg class=\"tip block\" viewBox=\"0 -0.5 16 9\">\n <path class=\"triangle\" d=\"M-1,-1 8,8 17,-1\"></path>\n </svg>\n <svg class=\"tip inline\" viewBox=\"0 -0.5 9 16\">\n <path class=\"triangle\" d=\"M-1,-1 8,8 -1,17\"></path>\n </svg>\n </div>\n `;\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\n 'sp-overlay-query',\n this.onOverlayQuery as EventListener\n );\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\n 'sp-overlay-query',\n this.onOverlayQuery as EventListener\n );\n }\n\n public onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void {\n /* c8 ignore next */\n if (!event.target) return;\n\n const target = event.target as Node;\n /* c8 ignore next */\n if (target !== this) return;\n\n const tipElement = this.shadowRoot.querySelector('#tip') as HTMLElement;\n if (tipElement) {\n event.detail.overlayContentTipElement = tipElement;\n }\n }\n\n protected override update(changes: PropertyValues): void {\n if (window.__swc.DEBUG) {\n if (changes.has('dialog') && this.dialog) {\n window.__swc.warn(\n this,\n `<${this.localName}> no longer supports the \"dialog\" attribute. Please slot an <sp-dialog> element into the <${this.localName}> instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/popover/#dialog-popovers',\n {\n type: 'api',\n level: 'deprecation',\n }\n );\n }\n }\n super.update(changes);\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot></slot>\n ${this.tip ? this.renderTip() : nothing}\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAKzB,OAAO,mBAAmB;AAOnB,aAAM,gBAAgB,gBAAgB;AAAA,EAAtC;AAAA;AAUH,SAAO,SAAS;AAMhB,SAAO,OAAO;AAOd,SAAO,YAAuB;AAG9B,SAAO,MAAM;AAAA;AAAA,EAzBb,WAA2B,SAAyB;AAChD,WAAO,CAAC,aAAa;AAAA,EACzB;AAAA,EAyBU,YAA4B;AAClC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUX;AAAA,EAEgB,oBAA0B;AACtC,UAAM,kBAAkB;AACxB,SAAK;AAAA,MACD;AAAA,MACA,KAAK;AAAA,IACT;AAAA,EACJ;AAAA,EAEgB,uBAA6B;AACzC,UAAM,qBAAqB;AAC3B,SAAK;AAAA,MACD;AAAA,MACA,KAAK;AAAA,IACT;AAAA,EACJ;AAAA,EAEO,eAAe,OAAqD;AAEvE,QAAI,CAAC,MAAM;AAAQ;AAEnB,UAAM,SAAS,MAAM;AAErB,QAAI,WAAW;AAAM;AAErB,UAAM,aAAa,KAAK,WAAW,cAAc,MAAM;AACvD,QAAI,YAAY;AACZ,YAAM,OAAO,2BAA2B;AAAA,IAC5C;AAAA,EACJ;AAAA,EAEmB,OAAO,SAA+B;AACrD,QAAI,MAAoB;AACpB,UAAI,QAAQ,IAAI,QAAQ,KAAK,KAAK,QAAQ;AACtC,eAAO,MAAM;AAAA,UACT;AAAA,UACA,IAAI,KAAK,sGAAsG,KAAK;AAAA,UACpH;AAAA,UACA;AAAA,YACI,MAAM;AAAA,YACN,OAAO;AAAA,UACX;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AACA,UAAM,OAAO,OAAO;AAAA,EACxB;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,cAED,KAAK,MAAM,KAAK,UAAU,IAAI;AAAA;AAAA,EAExC;AACJ;AApFW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GATjC,QAUF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfjC,QAgBF;AAOA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAtBlB,QAuBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzBjC,QA0BF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Popover.js
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
"use strict";var c=Object.defineProperty;var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var o=(a,r,t,l)=>{for(var e=l>1?void 0:l?d(r,t):r,i=a.length-1,p;i>=0;i--)(p=a[i])&&(e=(l?p(r,t,e):p(e))||e);return l&&e&&c(r,t,e),e};import{html as n,nothing as u,SpectrumElement as y}from"@spectrum-web-components/base";import{property as s}from"@spectrum-web-components/base/src/decorators.js";import v from"./popover.css.js";export class Popover extends y{constructor(){super(...arguments);this.dialog=!1;this.open=!1;this.placement="none";this.tip=!1}static get styles(){return[v]}renderTip(){return n`
|
|
2
2
|
<div id="tip">
|
|
3
|
-
<svg
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<path
|
|
9
|
-
class="triangle"
|
|
10
|
-
d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0"
|
|
11
|
-
></path>
|
|
3
|
+
<svg class="tip block" viewBox="0 -0.5 16 9">
|
|
4
|
+
<path class="triangle" d="M-1,-1 8,8 17,-1"></path>
|
|
5
|
+
</svg>
|
|
6
|
+
<svg class="tip inline" viewBox="0 -0.5 9 16">
|
|
7
|
+
<path class="triangle" d="M-1,-1 8,8 -1,17"></path>
|
|
12
8
|
</svg>
|
|
13
9
|
</div>
|
|
14
|
-
`}connectedCallback(){super.connectedCallback(),this.addEventListener("sp-overlay-query",this.onOverlayQuery)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sp-overlay-query",this.onOverlayQuery)}onOverlayQuery(t){if(!t.target||t.target!==this)return;const e=this.shadowRoot.querySelector("#tip");e&&(t.detail.overlayContentTipElement=e)}render(){return
|
|
10
|
+
`}connectedCallback(){super.connectedCallback(),this.addEventListener("sp-overlay-query",this.onOverlayQuery)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sp-overlay-query",this.onOverlayQuery)}onOverlayQuery(t){if(!t.target||t.target!==this)return;const e=this.shadowRoot.querySelector("#tip");e&&(t.detail.overlayContentTipElement=e)}update(t){super.update(t)}render(){return n`
|
|
15
11
|
<slot></slot>
|
|
16
|
-
${this.tip?this.renderTip():
|
|
17
|
-
`}}
|
|
12
|
+
${this.tip?this.renderTip():u}
|
|
13
|
+
`}}o([s({type:Boolean,reflect:!0})],Popover.prototype,"dialog",2),o([s({type:Boolean,reflect:!0})],Popover.prototype,"open",2),o([s({reflect:!0})],Popover.prototype,"placement",2),o([s({type:Boolean,reflect:!0})],Popover.prototype,"tip",2);
|
|
18
14
|
//# sourceMappingURL=Popover.js.map
|
package/src/Popover.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Popover.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport type {\n OverlayDisplayQueryDetail,\n Placement,\n} from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport popoverStyles from './popover.css.js';\n\n/**\n * @element sp-popover\n *\n * @slot - content to display within the Popover\n */\nexport class Popover extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [popoverStyles];\n }\n\n /**\n * Whether the popover should manage the application\n * of padding to its content or not.\n */\n @property({ type: Boolean, reflect: true })\n public dialog = false;\n\n /**\n * Whether the popover is visible or not.\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * @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\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'none';\n\n @property({ type: Boolean, reflect: true })\n public tip = false;\n\n protected renderTip(): TemplateResult {\n return html`\n <div id=\"tip\">\n <svg\n
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,
|
|
6
|
-
"names": ["html", "nothing", "SpectrumElement", "property", "popoverStyles", "event", "tipElement", "__decorateClass"]
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport type {\n OverlayDisplayQueryDetail,\n Placement,\n} from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport popoverStyles from './popover.css.js';\n\n/**\n * @element sp-popover\n *\n * @slot - content to display within the Popover\n */\nexport class Popover extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [popoverStyles];\n }\n\n /**\n * Whether the popover should manage the application\n * of padding to its content or not.\n */\n @property({ type: Boolean, reflect: true })\n public dialog = false;\n\n /**\n * Whether the popover is visible or not.\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * @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\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'none';\n\n @property({ type: Boolean, reflect: true })\n public tip = false;\n\n protected renderTip(): TemplateResult {\n return html`\n <div id=\"tip\">\n <svg class=\"tip block\" viewBox=\"0 -0.5 16 9\">\n <path class=\"triangle\" d=\"M-1,-1 8,8 17,-1\"></path>\n </svg>\n <svg class=\"tip inline\" viewBox=\"0 -0.5 9 16\">\n <path class=\"triangle\" d=\"M-1,-1 8,8 -1,17\"></path>\n </svg>\n </div>\n `;\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\n 'sp-overlay-query',\n this.onOverlayQuery as EventListener\n );\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\n 'sp-overlay-query',\n this.onOverlayQuery as EventListener\n );\n }\n\n public onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void {\n /* c8 ignore next */\n if (!event.target) return;\n\n const target = event.target as Node;\n /* c8 ignore next */\n if (target !== this) return;\n\n const tipElement = this.shadowRoot.querySelector('#tip') as HTMLElement;\n if (tipElement) {\n event.detail.overlayContentTipElement = tipElement;\n }\n }\n\n protected override update(changes: PropertyValues): void {\n if (window.__swc.DEBUG) {\n if (changes.has('dialog') && this.dialog) {\n window.__swc.warn(\n this,\n `<${this.localName}> no longer supports the \"dialog\" attribute. Please slot an <sp-dialog> element into the <${this.localName}> instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/popover/#dialog-popovers',\n {\n type: 'api',\n level: 'deprecation',\n }\n );\n }\n }\n super.update(changes);\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot></slot>\n ${this.tip ? this.renderTip() : nothing}\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAKzB,OAAOC,MAAmB,mBAOnB,aAAM,gBAAgBF,CAAgB,CAAtC,kCAUH,KAAO,OAAS,GAMhB,KAAO,KAAO,GAOd,KAAO,UAAuB,OAG9B,KAAO,IAAM,GAzBb,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAa,CACzB,CAyBU,WAA4B,CAClC,OAAOJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUX,CAEgB,mBAA0B,CACtC,MAAM,kBAAkB,EACxB,KAAK,iBACD,mBACA,KAAK,cACT,CACJ,CAEgB,sBAA6B,CACzC,MAAM,qBAAqB,EAC3B,KAAK,oBACD,mBACA,KAAK,cACT,CACJ,CAEO,eAAeK,EAAqD,CAMvE,GAJI,CAACA,EAAM,QAEIA,EAAM,SAEN,KAAM,OAErB,MAAMC,EAAa,KAAK,WAAW,cAAc,MAAM,EACnDA,IACAD,EAAM,OAAO,yBAA2BC,EAEhD,CAEmB,OAAOC,EAA+B,CAcrD,MAAM,OAAOA,CAAO,CACxB,CAEmB,QAAyB,CACxC,OAAOP;AAAA;AAAA,cAED,KAAK,IAAM,KAAK,UAAU,EAAIC;AAAA,SAExC,CACJ,CApFWO,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GATjC,QAUF,sBAMAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAfjC,QAgBF,oBAOAK,EAAA,CADNL,EAAS,CAAE,QAAS,EAAK,CAAC,GAtBlB,QAuBF,yBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAzBjC,QA0BF",
|
|
6
|
+
"names": ["html", "nothing", "SpectrumElement", "property", "popoverStyles", "event", "tipElement", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/popover.css.dev.js
CHANGED
|
@@ -1,31 +1,77 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host{--spectrum-overlay-animation-distance:var(
|
|
5
|
-
--spectrum-
|
|
6
|
-
);opacity:0;pointer-events:none;transition:transform var(--spectrum-
|
|
7
|
-
--spectrum-
|
|
8
|
-
)
|
|
9
|
-
--spectrum-popover-
|
|
10
|
-
)
|
|
11
|
-
--
|
|
12
|
-
);min-width:var(
|
|
13
|
-
--spectrum-popover-min-width,var(--spectrum-global-dimension-size-400)
|
|
14
|
-
);outline:none;position:absolute}#tip{position:absolute;-webkit-transform:translate(0)}#tip .triangle{stroke-linecap:square;stroke-linejoin:miter;stroke-width:var(
|
|
15
|
-
--spectrum-popover-border-size,var(--spectrum-alias-border-size-thin)
|
|
16
|
-
)}:host([dialog]){min-width:var(--spectrum-popover-dialog-min-width);padding:var(--spectrum-popover-dialog-padding)}:host([placement*=left][tip]){margin-right:var(--spectrum-popover-target-offset)}:host([placement*=left]) #tip{left:100%}:host([placement*=right][tip]){margin-left:var(--spectrum-popover-target-offset)}:host([placement*=right]) #tip{right:100%;transform:scaleX(-1)}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(var(--spectrum-global-dimension-size-150)*-1);top:50%}:host([placement*=bottom][tip]){margin-top:var(--spectrum-popover-target-offset)}:host([placement*=bottom]) #tip{bottom:100%;transform:scaleY(-1)}:host([placement*=top][tip]){margin-bottom:var(--spectrum-popover-target-offset)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(var(--spectrum-global-dimension-size-150)*-1)}:host{background-color:var(
|
|
17
|
-
--spectrum-popover-background-color,var(--spectrum-global-color-gray-50)
|
|
4
|
+
:host{--spectrum-overlay-animation-distance:6px;--spectrum-overlay-animation-duration:var(
|
|
5
|
+
--spectrum-animation-duration-100
|
|
6
|
+
);opacity:0;pointer-events:none;transition:transform var(--spectrum-overlay-animation-duration) ease-in-out,opacity var(--spectrum-overlay-animation-duration) ease-in-out,visibility 0s linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([open]) .spectrum-Popover--bottom-end,:host([open]) .spectrum-Popover--bottom-left,:host([open]) .spectrum-Popover--bottom-right,:host([open]) .spectrum-Popover--bottom-start,:host([placement*=bottom][open]){--spectrum-overlay-animation-distance:6px;transform:translateY(var(--spectrum-overlay-animation-distance))}:host([open]) .spectrum-Popover--top-end,:host([open]) .spectrum-Popover--top-left,:host([open]) .spectrum-Popover--top-right,:host([open]) .spectrum-Popover--top-start,:host([placement*=top][open]){--spectrum-overlay-animation-distance:6px;transform:translateY(calc(var(--spectrum-overlay-animation-distance)*-1))}:host([dir=rtl][open]) .spectrum-Popover--start,:host([dir=rtl][open]) .spectrum-Popover--start-bottom,:host([dir=rtl][open]) .spectrum-Popover--start-top,:host([open]) .spectrum-Popover--end,:host([open]) .spectrum-Popover--end-bottom,:host([open]) .spectrum-Popover--end-top,:host([open]) .spectrum-Popover--right-bottom,:host([open]) .spectrum-Popover--right-top,:host([placement*=right][open]){--spectrum-overlay-animation-distance:6px;transform:translateX(var(--spectrum-overlay-animation-distance))}:host([dir=rtl][open]) .spectrum-Popover--end,:host([dir=rtl][open]) .spectrum-Popover--end-bottom,:host([dir=rtl][open]) .spectrum-Popover--end-top,:host([open]) .spectrum-Popover--left-bottom,:host([open]) .spectrum-Popover--left-top,:host([open]) .spectrum-Popover--start,:host([open]) .spectrum-Popover--start-bottom,:host([open]) .spectrum-Popover--start-top,:host([placement*=left][open]){--spectrum-overlay-animation-distance:6px;transform:translateX(calc(var(--spectrum-overlay-animation-distance)*-1))}:host{--spectrum-popover-cross-offset:0;--spectrum-popover-background-color:var(
|
|
7
|
+
--spectrum-background-layer-2-color
|
|
8
|
+
);--spectrum-popover-border-color:var(--spectrum-gray-400);--spectrum-popover-content-area-spacing-vertical:var(
|
|
9
|
+
--spectrum-popover-top-to-content-area
|
|
10
|
+
);--spectrum-popover-shadow-horizontal:var(--spectrum-drop-shadow-x);--spectrum-popover-shadow-vertical:var(--spectrum-drop-shadow-y);--spectrum-popover-shadow-blur:var(--spectrum-drop-shadow-blur);--spectrum-popover-shadow-color:var(--spectrum-drop-shadow-color);--spectrum-popover-corner-radius:var(--spectrum-corner-radius-100);--spectrum-popover-pointer-width:var(--spectrum-popover-tip-width);--spectrum-popover-pointer-height:var(--spectrum-popover-tip-height);--spectrum-popover-pointer-edge-offset:calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width)/2);--spectrum-popover-pointer-edge-spacing:calc(var(--spectrum-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width)/2)}@media (forced-colors:active){:host{--highcontrast-popover-border-color:CanvasText}}:host{background-color:var(
|
|
11
|
+
--mod-popover-background-color,var(--spectrum-popover-background-color)
|
|
18
12
|
);border-color:var(
|
|
19
|
-
--
|
|
20
|
-
);
|
|
21
|
-
--
|
|
22
|
-
)
|
|
23
|
-
--
|
|
24
|
-
)
|
|
25
|
-
--
|
|
13
|
+
--highcontrast-popover-border-color,var(--mod-popover-border-color,var(--spectrum-popover-border-color))
|
|
14
|
+
);border-radius:var(
|
|
15
|
+
--mod-popover-corner-radius,var(--spectrum-popover-corner-radius)
|
|
16
|
+
);border-style:solid;border-width:var(
|
|
17
|
+
--mod-popover-border-width,var(--spectrum-popover-border-width)
|
|
18
|
+
);box-sizing:border-box;display:inline-flex;filter:drop-shadow(var(
|
|
19
|
+
--mod-popover-shadow-horizontal,var(--spectrum-popover-shadow-horizontal)
|
|
20
|
+
) var(
|
|
21
|
+
--mod-popover-shadow-vertical,var(--spectrum-popover-shadow-vertical)
|
|
22
|
+
) var(--mod-popover-shadow-blur,var(--spectrum-popover-shadow-blur)) var(
|
|
23
|
+
--mod-popover-shadow-color,var(--spectrum-popover-shadow-color)
|
|
24
|
+
));flex-direction:column;outline:none;padding:var(
|
|
25
|
+
--mod-popover-content-area-spacing-vertical,var(--spectrum-popover-content-area-spacing-vertical)
|
|
26
|
+
) 0;position:absolute}:host([tip]) #tip .triangle{stroke-linecap:square;stroke-linejoin:miter;fill:var(
|
|
27
|
+
--mod-popover-background-color,var(--spectrum-popover-background-color)
|
|
26
28
|
);stroke:var(
|
|
27
|
-
--
|
|
28
|
-
)
|
|
29
|
+
--mod-popover-border-color,var(--spectrum-popover-border-color)
|
|
30
|
+
);stroke-width:var(
|
|
31
|
+
--mod-popover-border-width,var(--spectrum-popover-border-width)
|
|
32
|
+
)}.spectrum-Popover--top-end,.spectrum-Popover--top-left,.spectrum-Popover--top-right,.spectrum-Popover--top-start,:host([placement*=top]){margin-bottom:var(--spectrum-popover-cross-offset)}.spectrum-Popover--bottom-end,.spectrum-Popover--bottom-left,.spectrum-Popover--bottom-right,.spectrum-Popover--bottom-start,:host([placement*=bottom]){margin-top:var(--spectrum-popover-cross-offset)}.spectrum-Popover--right-bottom,.spectrum-Popover--right-top,:host([placement*=right]){margin-left:var(--spectrum-popover-cross-offset)}.spectrum-Popover--left-bottom,.spectrum-Popover--left-top,:host([placement*=left]){margin-right:var(--spectrum-popover-cross-offset)}.spectrum-Popover--start,.spectrum-Popover--start-bottom,.spectrum-Popover--start-top{margin-inline-end:var(--spectrum-popover-cross-offset)}.spectrum-Popover--end,.spectrum-Popover--end-bottom,.spectrum-Popover--end-top{margin-inline-start:var(--spectrum-popover-cross-offset)}:host([tip]) #tip,:host([tip]) .spectrum-Popover--bottom-end #tip,:host([tip]) .spectrum-Popover--bottom-left #tip,:host([tip]) .spectrum-Popover--bottom-right #tip,:host([tip]) .spectrum-Popover--bottom-start #tip,:host([tip]) .spectrum-Popover--top-end #tip,:host([tip]) .spectrum-Popover--top-left #tip,:host([tip]) .spectrum-Popover--top-right #tip,:host([tip]) .spectrum-Popover--top-start #tip,:host([tip][placement*=bottom]) #tip,:host([tip][placement*=top]) #tip{height:var(
|
|
33
|
+
--mod-popover-pointer-height,var(--spectrum-popover-pointer-height)
|
|
34
|
+
);left:0;margin:auto;position:absolute;right:0;top:100%;transform:translate(0);width:var(
|
|
35
|
+
--mod-popover-pointer-width,var(--spectrum-popover-pointer-width)
|
|
36
|
+
)}:host([tip]) .spectrum-Popover--top-left #tip{left:var(
|
|
37
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
38
|
+
);right:auto}:host([tip]) .spectrum-Popover--top-right #tip{left:auto;right:var(
|
|
39
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
40
|
+
)}:host([tip]) .spectrum-Popover--top-start #tip{margin-inline-start:var(
|
|
41
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
42
|
+
)}:host([tip]) .spectrum-Popover--top-end #tip{margin-inline-end:var(
|
|
43
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
44
|
+
)}:host([tip]) .spectrum-Popover--bottom-end #tip,:host([tip]) .spectrum-Popover--bottom-left #tip,:host([tip]) .spectrum-Popover--bottom-right #tip,:host([tip]) .spectrum-Popover--bottom-start #tip,:host([tip][placement*=bottom]) #tip{bottom:100%;top:auto;transform:scaleY(-1)}:host([tip]) .spectrum-Popover--bottom-left #tip{left:var(
|
|
45
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
46
|
+
);right:auto}:host([tip]) .spectrum-Popover--bottom-right #tip{left:auto;right:var(
|
|
47
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
48
|
+
)}:host([tip]) .spectrum-Popover--bottom-start #tip{margin-inline-start:var(
|
|
49
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
50
|
+
)}:host([tip]) .spectrum-Popover--bottom-end #tip{margin-inline-end:var(
|
|
51
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
52
|
+
)}:host([tip]) .spectrum-Popover--end #tip,:host([tip]) .spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--start #tip,:host([tip]) .spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--start-top #tip,:host([tip][placement*=left]) #tip,:host([tip][placement*=right]) #tip{bottom:0;height:var(
|
|
53
|
+
--mod-popover-pointer-width,var(--spectrum-popover-pointer-width)
|
|
54
|
+
);top:0;width:var(
|
|
55
|
+
--mod-popover-pointer-height,var(--spectrum-popover-pointer-height)
|
|
56
|
+
)}:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-top #tip,:host([tip][placement*=left]) .spectrum-Popover--end #tip,:host([tip][placement*=left]) .spectrum-Popover--end-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--end-top #tip,:host([tip][placement*=left]) .spectrum-Popover--left-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--left-top #tip,:host([tip][placement*=left]) .spectrum-Popover--right-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--right-top #tip,:host([tip][placement*=left]) .spectrum-Popover--start #tip,:host([tip][placement*=left]) .spectrum-Popover--start-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--start-top #tip,:host([tip][placement*=left][placement*=left]) #tip,:host([tip][placement*=right]) .spectrum-Popover--left-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--left-top #tip,:host([tip][placement*=right][placement*=left]) #tip{left:100%;right:auto}:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-top #tip,:host([tip][placement*=left]) .spectrum-Popover--right-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--right-top #tip,:host([tip][placement*=left][placement*=right]) #tip,:host([tip][placement*=right]) .spectrum-Popover--end #tip,:host([tip][placement*=right]) .spectrum-Popover--end-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--end-top #tip,:host([tip][placement*=right]) .spectrum-Popover--left-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--left-top #tip,:host([tip][placement*=right]) .spectrum-Popover--right-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--right-top #tip,:host([tip][placement*=right]) .spectrum-Popover--start #tip,:host([tip][placement*=right]) .spectrum-Popover--start-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--start-top #tip,:host([tip][placement*=right][placement*=right]) #tip{left:auto;right:100%;transform:scaleX(-1)}:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--start-top #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--end-top #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-top #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-top #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--start-top #tip,:host([tip][placement*=left]) .spectrum-Popover--end-top #tip,:host([tip][placement*=left]) .spectrum-Popover--left-top #tip,:host([tip][placement*=left]) .spectrum-Popover--right-top #tip,:host([tip][placement*=left]) .spectrum-Popover--start-top #tip,:host([tip][placement*=right]) .spectrum-Popover--end-top #tip,:host([tip][placement*=right]) .spectrum-Popover--left-top #tip,:host([tip][placement*=right]) .spectrum-Popover--right-top #tip,:host([tip][placement*=right]) .spectrum-Popover--start-top #tip{bottom:auto;top:var(
|
|
57
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
58
|
+
)}:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--end.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-bottom #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-bottom #tip,:host([tip]) .spectrum-Popover--start.spectrum-Popover--start-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--end-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--left-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--right-bottom #tip,:host([tip][placement*=left]) .spectrum-Popover--start-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--end-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--left-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--right-bottom #tip,:host([tip][placement*=right]) .spectrum-Popover--start-bottom #tip{bottom:var(
|
|
59
|
+
--mod-popover-pointer-edge-spacing,var(--spectrum-popover-pointer-edge-spacing)
|
|
60
|
+
);top:auto}:host([tip]) .spectrum-Popover--start #tip,:host([tip]) .spectrum-Popover--start-bottom #tip,:host([tip]) .spectrum-Popover--start-top #tip{margin-inline-start:100%}:host([dir=rtl][tip]) .spectrum-Popover--start #tip,:host([dir=rtl][tip]) .spectrum-Popover--start-bottom #tip,:host([dir=rtl][tip]) .spectrum-Popover--start-top #tip{transform:none}:host([tip]) .spectrum-Popover--end #tip,:host([tip]) .spectrum-Popover--end-bottom #tip,:host([tip]) .spectrum-Popover--end-top #tip{margin-inline-end:100%;transform:scaleX(-1)}:host([dir=rtl][tip]) .spectrum-Popover--end #tip,:host([dir=rtl][tip]) .spectrum-Popover--end-bottom #tip,:host([dir=rtl][tip]) .spectrum-Popover--end-top #tip{transform:scaleX(1)}:host{--spectrum-popover-border-width:var(
|
|
61
|
+
--system-spectrum-popover-border-width
|
|
62
|
+
)}:host{--sp-popover-tip-size:24px;max-height:100%;max-width:100%;min-width:min-content}::slotted(*){overscroll-behavior:contain}:host([placement*=left]) #tip[style],:host([placement*=right]) #tip[style]{bottom:auto}:host([placement*=bottom]) #tip[style],:host([placement*=top]) #tip[style]{right:auto}:host([placement*=left]) #tip,:host([placement*=right]) #tip{height:var(
|
|
63
|
+
--mod-popover-pointer-width,var(--spectrum-popover-pointer-width)
|
|
64
|
+
)!important;width:var(
|
|
65
|
+
--mod-popover-pointer-width,var(--spectrum-popover-pointer-width)
|
|
66
|
+
)!important}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{height:var(
|
|
67
|
+
--mod-popover-pointer-width,var(--spectrum-popover-pointer-width)
|
|
68
|
+
)!important;width:var(
|
|
69
|
+
--mod-popover-pointer-width,var(--spectrum-popover-pointer-width)
|
|
70
|
+
)!important}.block{display:block;height:50%;width:100%}.inline{display:block;height:100%;width:50%}:host([placement*=left]) .block,:host([placement*=right]) .block{display:none}:host([placement*=bottom]) .inline,:host([placement*=top]) .inline{display:none}::slotted(.visually-hidden){clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}::slotted(sp-menu){margin:0}:host([dialog]){min-width:var(
|
|
71
|
+
--mod-popover-dialog-min-width,var(--spectrum-popover-dialog-min-width,270px)
|
|
72
|
+
);padding:var(
|
|
73
|
+
--mod-popover-dialog-padding,var(--spectrum-popover-dialog-padding,30px 29px)
|
|
74
|
+
)}
|
|
29
75
|
`;
|
|
30
76
|
export default styles;
|
|
31
77
|
//# sourceMappingURL=popover.css.dev.js.map
|