@spectrum-web-components/action-menu 0.0.0-20241209155954
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 +293 -0
- package/package.json +81 -0
- package/sp-action-menu.d.ts +6 -0
- package/sp-action-menu.dev.js +5 -0
- package/sp-action-menu.dev.js.map +7 -0
- package/sp-action-menu.js +2 -0
- package/sp-action-menu.js.map +7 -0
- package/src/ActionMenu.d.ts +38 -0
- package/src/ActionMenu.dev.js +118 -0
- package/src/ActionMenu.dev.js.map +7 -0
- package/src/ActionMenu.js +43 -0
- package/src/ActionMenu.js.map +7 -0
- package/src/action-menu.css.d.ts +2 -0
- package/src/action-menu.css.dev.js +7 -0
- package/src/action-menu.css.dev.js.map +7 -0
- package/src/action-menu.css.js +4 -0
- package/src/action-menu.css.js.map +7 -0
- package/src/index.d.ts +1 -0
- package/src/index.dev.js +3 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -0
- package/src/index.js.map +7 -0
- package/sync/sp-action-menu.d.ts +2 -0
- package/sync/sp-action-menu.dev.js +4 -0
- package/sync/sp-action-menu.dev.js.map +7 -0
- package/sync/sp-action-menu.js +2 -0
- package/sync/sp-action-menu.js.map +7 -0
package/README.md
ADDED
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
## Description
|
|
2
|
+
|
|
3
|
+
An `<sp-action-menu>` is an action button that triggers an overlay with `<sp-menu-items>` for activation. Use an `<sp-menu>` element to outline the items that will be made available to the user when interacting with the `<sp-action-menu>` element. By default `<sp-action-menu>` does not manage a selection. If you'd like for a selection to be held by the `<sp-menu>` that is presented in its overlay, use `selects="single"` to activate this functionality.
|
|
4
|
+
|
|
5
|
+
### Usage
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@spectrum-web-components/action-menu)
|
|
8
|
+
[](https://bundlephobia.com/result?p=@spectrum-web-components/action-menu)
|
|
9
|
+
[](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/EYQn9T6wOnieZbv4xnPj/src/index.ts)
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
yarn add @spectrum-web-components/action-menu
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import the side effectful registration of `<sp-action-menu>` via:
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
import '@spectrum-web-components/action-menu/sp-action-menu.js';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
The default of `<sp-action-menu>` will load dependencies in `@spectrum-web-components/overlay` asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `<sp-action-menu>` as follows:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
import '@spectrum-web-components/action-menu/sync/sp-action-menu.js';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
When looking to leverage the `ActionMenu` base class as a type and/or for extension purposes, do so via:
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
import { ActionMenu } from '@spectrum-web-components/action-menu';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Sizes
|
|
34
|
+
|
|
35
|
+
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
36
|
+
<sp-tab value="s">Small</sp-tab>
|
|
37
|
+
<sp-tab-panel value="s">
|
|
38
|
+
|
|
39
|
+
<!-- prettier-ignore -->
|
|
40
|
+
```html
|
|
41
|
+
<sp-action-menu size="s">
|
|
42
|
+
<span slot="label">More Actions</span>
|
|
43
|
+
<sp-menu-item>
|
|
44
|
+
Deselect
|
|
45
|
+
</sp-menu-item>
|
|
46
|
+
<sp-menu-item>
|
|
47
|
+
Select inverse
|
|
48
|
+
</sp-menu-item>
|
|
49
|
+
<sp-menu-item>
|
|
50
|
+
Feather...
|
|
51
|
+
</sp-menu-item>
|
|
52
|
+
<sp-menu-item>
|
|
53
|
+
Select and mask...
|
|
54
|
+
</sp-menu-item>
|
|
55
|
+
<sp-menu-divider></sp-menu-divider>
|
|
56
|
+
<sp-menu-item>
|
|
57
|
+
Save selection
|
|
58
|
+
</sp-menu-item>
|
|
59
|
+
<sp-menu-item disabled>
|
|
60
|
+
Make work path
|
|
61
|
+
</sp-menu-item>
|
|
62
|
+
</sp-action-menu>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
</sp-tab-panel>
|
|
66
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
67
|
+
<sp-tab-panel value="m">
|
|
68
|
+
|
|
69
|
+
<!-- prettier-ignore -->
|
|
70
|
+
```html
|
|
71
|
+
<sp-action-menu size="m">
|
|
72
|
+
<span slot="label">More Actions</span>
|
|
73
|
+
<sp-menu-item>
|
|
74
|
+
Deselect
|
|
75
|
+
</sp-menu-item>
|
|
76
|
+
<sp-menu-item>
|
|
77
|
+
Select inverse
|
|
78
|
+
</sp-menu-item>
|
|
79
|
+
<sp-menu-item>
|
|
80
|
+
Feather...
|
|
81
|
+
</sp-menu-item>
|
|
82
|
+
<sp-menu-item>
|
|
83
|
+
Select and mask...
|
|
84
|
+
</sp-menu-item>
|
|
85
|
+
<sp-menu-divider></sp-menu-divider>
|
|
86
|
+
<sp-menu-item>
|
|
87
|
+
Save selection
|
|
88
|
+
</sp-menu-item>
|
|
89
|
+
<sp-menu-item disabled>
|
|
90
|
+
Make work path
|
|
91
|
+
</sp-menu-item>
|
|
92
|
+
</sp-action-menu>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
</sp-tab-panel>
|
|
96
|
+
<sp-tab value="l">Large</sp-tab>
|
|
97
|
+
<sp-tab-panel value="l">
|
|
98
|
+
|
|
99
|
+
<!-- prettier-ignore -->
|
|
100
|
+
```html
|
|
101
|
+
<sp-action-menu size="l">
|
|
102
|
+
<span slot="label">More Actions</span>
|
|
103
|
+
<sp-menu-item>
|
|
104
|
+
Deselect
|
|
105
|
+
</sp-menu-item>
|
|
106
|
+
<sp-menu-item>
|
|
107
|
+
Select inverse
|
|
108
|
+
</sp-menu-item>
|
|
109
|
+
<sp-menu-item>
|
|
110
|
+
Feather...
|
|
111
|
+
</sp-menu-item>
|
|
112
|
+
<sp-menu-item>
|
|
113
|
+
Select and mask...
|
|
114
|
+
</sp-menu-item>
|
|
115
|
+
<sp-menu-divider></sp-menu-divider>
|
|
116
|
+
<sp-menu-item>
|
|
117
|
+
Save selection
|
|
118
|
+
</sp-menu-item>
|
|
119
|
+
<sp-menu-item disabled>
|
|
120
|
+
Make work path
|
|
121
|
+
</sp-menu-item>
|
|
122
|
+
</sp-action-menu>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
</sp-tab-panel>
|
|
126
|
+
<sp-tab value="xl">Extra Large</sp-tab>
|
|
127
|
+
<sp-tab-panel value="xl">
|
|
128
|
+
|
|
129
|
+
<!-- prettier-ignore -->
|
|
130
|
+
```html
|
|
131
|
+
<sp-action-menu size="xl">
|
|
132
|
+
<span slot="label">More Actions</span>
|
|
133
|
+
<sp-menu-item>
|
|
134
|
+
Deselect
|
|
135
|
+
</sp-menu-item>
|
|
136
|
+
<sp-menu-item>
|
|
137
|
+
Select inverse
|
|
138
|
+
</sp-menu-item>
|
|
139
|
+
<sp-menu-item>
|
|
140
|
+
Feather...
|
|
141
|
+
</sp-menu-item>
|
|
142
|
+
<sp-menu-item>
|
|
143
|
+
Select and mask...
|
|
144
|
+
</sp-menu-item>
|
|
145
|
+
<sp-menu-divider></sp-menu-divider>
|
|
146
|
+
<sp-menu-item>
|
|
147
|
+
Save selection
|
|
148
|
+
</sp-menu-item>
|
|
149
|
+
<sp-menu-item disabled>
|
|
150
|
+
Make work path
|
|
151
|
+
</sp-menu-item>
|
|
152
|
+
</sp-action-menu>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
</sp-tab-panel>
|
|
156
|
+
</sp-tabs>
|
|
157
|
+
|
|
158
|
+
## Variants
|
|
159
|
+
|
|
160
|
+
### No icon
|
|
161
|
+
|
|
162
|
+
In order to deliver an `<sp-action-menu>` without an icon, use the `label-only` slot. This will supress any icon from being displayed, both the default ellipsis icon or any icon the user might provide to the element.
|
|
163
|
+
|
|
164
|
+
<!-- prettier-ignore -->
|
|
165
|
+
```html
|
|
166
|
+
<sp-action-menu>
|
|
167
|
+
<span slot="label-only">More Actions</span>
|
|
168
|
+
<sp-menu-item>
|
|
169
|
+
Deselect
|
|
170
|
+
</sp-menu-item>
|
|
171
|
+
<sp-menu-item>
|
|
172
|
+
Select inverse
|
|
173
|
+
</sp-menu-item>
|
|
174
|
+
<sp-menu-item>
|
|
175
|
+
Feather...
|
|
176
|
+
</sp-menu-item>
|
|
177
|
+
<sp-menu-item>
|
|
178
|
+
Select and mask...
|
|
179
|
+
</sp-menu-item>
|
|
180
|
+
<sp-menu-divider></sp-menu-divider>
|
|
181
|
+
<sp-menu-item>
|
|
182
|
+
Save selection
|
|
183
|
+
</sp-menu-item>
|
|
184
|
+
<sp-menu-item disabled>
|
|
185
|
+
Make work path
|
|
186
|
+
</sp-menu-item>
|
|
187
|
+
</sp-action-menu>
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### No visible label
|
|
191
|
+
|
|
192
|
+
The visible label that is be provided via the default `<slot>` interface can be ommitted in preference of an icon only interface. In this context be sure that the `<sp-action-menu>` continued to be accessible to screen readers by applying the `label` attribute. This will apply an `aria-label` attribute of the same value to the `<button>` element that toggles the menu list.
|
|
193
|
+
|
|
194
|
+
<!-- prettier-ignore -->
|
|
195
|
+
```html
|
|
196
|
+
<sp-action-menu label="More Actions">
|
|
197
|
+
<sp-menu-item>
|
|
198
|
+
Deselect
|
|
199
|
+
</sp-menu-item>
|
|
200
|
+
<sp-menu-item>
|
|
201
|
+
Select inverse
|
|
202
|
+
</sp-menu-item>
|
|
203
|
+
<sp-menu-item>
|
|
204
|
+
Feather...
|
|
205
|
+
</sp-menu-item>
|
|
206
|
+
<sp-menu-item>
|
|
207
|
+
Select and mask...
|
|
208
|
+
</sp-menu-item>
|
|
209
|
+
<sp-menu-divider></sp-menu-divider>
|
|
210
|
+
<sp-menu-item>
|
|
211
|
+
Save selection
|
|
212
|
+
</sp-menu-item>
|
|
213
|
+
<sp-menu-item disabled>
|
|
214
|
+
Make work path
|
|
215
|
+
</sp-menu-item>
|
|
216
|
+
</sp-action-menu>
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Alternate icon
|
|
220
|
+
|
|
221
|
+
A custom icon can be supplied via the `icon` slot in order to replace the default meatballs icon.
|
|
222
|
+
|
|
223
|
+
<sp-icons-medium></sp-icons-medium>
|
|
224
|
+
|
|
225
|
+
<!-- prettier-ignore -->
|
|
226
|
+
```html
|
|
227
|
+
<sp-action-menu>
|
|
228
|
+
<sp-icon-settings slot="icon"></sp-icon-settings>
|
|
229
|
+
<span slot="label">Actions under the gear</span>
|
|
230
|
+
<sp-menu-item>
|
|
231
|
+
Deselect
|
|
232
|
+
</sp-menu-item>
|
|
233
|
+
<sp-menu-item>
|
|
234
|
+
Select inverse
|
|
235
|
+
</sp-menu-item>
|
|
236
|
+
<sp-menu-item>
|
|
237
|
+
Feather...
|
|
238
|
+
</sp-menu-item>
|
|
239
|
+
<sp-menu-item>
|
|
240
|
+
Select and mask...
|
|
241
|
+
</sp-menu-item>
|
|
242
|
+
<sp-menu-divider></sp-menu-divider>
|
|
243
|
+
<sp-menu-item>
|
|
244
|
+
Save selection
|
|
245
|
+
</sp-menu-item>
|
|
246
|
+
<sp-menu-item disabled>
|
|
247
|
+
Make work path
|
|
248
|
+
</sp-menu-item>
|
|
249
|
+
</sp-action-menu>
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
### Selection.
|
|
253
|
+
|
|
254
|
+
When `selects` is set to `single`, the `<sp-action-menu>` element will maintain one selected item after an initial selection is made.
|
|
255
|
+
|
|
256
|
+
```html
|
|
257
|
+
<p>
|
|
258
|
+
The value of the `<sp-action-menu>` element is:
|
|
259
|
+
<span id="single-value"></span>
|
|
260
|
+
</p>
|
|
261
|
+
<sp-action-menu
|
|
262
|
+
selects="single"
|
|
263
|
+
onchange="this.previousElementSibling.querySelector('#single-value').textContent=this.value"
|
|
264
|
+
>
|
|
265
|
+
<span slot="label">Available shapes</span>
|
|
266
|
+
<sp-menu-item value="shape-1-square">Square</sp-menu-item>
|
|
267
|
+
<sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
|
|
268
|
+
<sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
|
|
269
|
+
<sp-menu-item value="shape-4-star">Star</sp-menu-item>
|
|
270
|
+
<sp-menu-item value="shape-5-hexagon">Hexagon</sp-menu-item>
|
|
271
|
+
<sp-menu-item value="shape-6-circle" disabled>Circle</sp-menu-item>
|
|
272
|
+
</sp-action-menu>
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
## Accessibility
|
|
276
|
+
|
|
277
|
+
An `<sp-action-menu>` parent will ensure that the internal `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
|
|
278
|
+
|
|
279
|
+
## Adding tootip in action menu
|
|
280
|
+
|
|
281
|
+
Tooltip in action menu can be attached via adding <sp-tooltip> and can be customized by using various parameters (e.g. placement, content, etc) as needed.
|
|
282
|
+
|
|
283
|
+
```html
|
|
284
|
+
<sp-action-menu>
|
|
285
|
+
<sp-tooltip slot="tooltip" self-managed placement="bottom">
|
|
286
|
+
Content
|
|
287
|
+
</sp-tooltip>
|
|
288
|
+
<span slot="label">Available shapes</span>
|
|
289
|
+
<sp-menu-item value="shape-1-square">Square</sp-menu-item>
|
|
290
|
+
<sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
|
|
291
|
+
<sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
|
|
292
|
+
</sp-action-menu>
|
|
293
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spectrum-web-components/action-menu",
|
|
3
|
+
"version": "0.0.0-20241209155954",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"description": "",
|
|
8
|
+
"license": "Apache-2.0",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
+
"directory": "packages/action-menu"
|
|
13
|
+
},
|
|
14
|
+
"author": "",
|
|
15
|
+
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/action-menu",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/adobe/spectrum-web-components/issues"
|
|
18
|
+
},
|
|
19
|
+
"main": "./src/index.js",
|
|
20
|
+
"module": "./src/index.js",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"development": "./src/index.dev.js",
|
|
25
|
+
"default": "./src/index.js"
|
|
26
|
+
},
|
|
27
|
+
"./package.json": "./package.json",
|
|
28
|
+
"./src/ActionMenu.js": {
|
|
29
|
+
"development": "./src/ActionMenu.dev.js",
|
|
30
|
+
"default": "./src/ActionMenu.js"
|
|
31
|
+
},
|
|
32
|
+
"./src/action-menu.css.js": "./src/action-menu.css.js",
|
|
33
|
+
"./src/index.js": {
|
|
34
|
+
"development": "./src/index.dev.js",
|
|
35
|
+
"default": "./src/index.js"
|
|
36
|
+
},
|
|
37
|
+
"./sp-action-menu.js": {
|
|
38
|
+
"development": "./sp-action-menu.dev.js",
|
|
39
|
+
"default": "./sp-action-menu.js"
|
|
40
|
+
},
|
|
41
|
+
"./sync/sp-action-menu.js": {
|
|
42
|
+
"development": "./sync/sp-action-menu.dev.js",
|
|
43
|
+
"default": "./sync/sp-action-menu.js"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
|
|
48
|
+
},
|
|
49
|
+
"files": [
|
|
50
|
+
"**/*.d.ts",
|
|
51
|
+
"**/*.js",
|
|
52
|
+
"**/*.js.map",
|
|
53
|
+
"custom-elements.json",
|
|
54
|
+
"!stories/",
|
|
55
|
+
"!test/"
|
|
56
|
+
],
|
|
57
|
+
"keywords": [
|
|
58
|
+
"spectrum css",
|
|
59
|
+
"web components",
|
|
60
|
+
"lit-element",
|
|
61
|
+
"lit-html"
|
|
62
|
+
],
|
|
63
|
+
"dependencies": {
|
|
64
|
+
"@spectrum-web-components/action-button": "0.0.0-20241209155954",
|
|
65
|
+
"@spectrum-web-components/base": "0.0.0-20241209155954",
|
|
66
|
+
"@spectrum-web-components/icon": "0.0.0-20241209155954",
|
|
67
|
+
"@spectrum-web-components/icons-workflow": "0.0.0-20241209155954",
|
|
68
|
+
"@spectrum-web-components/picker": "0.0.0-20241209155954",
|
|
69
|
+
"@spectrum-web-components/shared": "0.0.0-20241209155954"
|
|
70
|
+
},
|
|
71
|
+
"devDependencies": {
|
|
72
|
+
"@spectrum-css/actionmenu": "^7.0.0-s2-foundations.15"
|
|
73
|
+
},
|
|
74
|
+
"types": "./src/index.d.ts",
|
|
75
|
+
"customElements": "custom-elements.json",
|
|
76
|
+
"sideEffects": [
|
|
77
|
+
"./sp-*.js",
|
|
78
|
+
"./**/*.dev.js",
|
|
79
|
+
"./sync/sp-*.js"
|
|
80
|
+
]
|
|
81
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-action-menu.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 { ActionMenu } from './src/ActionMenu.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-action-menu', ActionMenu);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-action-menu': ActionMenu;\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAE9B,cAAc,kBAAkB,UAAU;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-action-menu.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 { ActionMenu } from './src/ActionMenu.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-action-menu', ActionMenu);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-action-menu': ActionMenu;\n }\n}\n"],
|
|
5
|
+
"mappings": "aAYA,OAAS,cAAAA,MAAkB,sBAC3B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,iBAAkBD,CAAU",
|
|
6
|
+
"names": ["ActionMenu", "defineElement"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
import { PickerBase } from '@spectrum-web-components/picker';
|
|
3
|
+
import '@spectrum-web-components/action-button/sp-action-button.js';
|
|
4
|
+
import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
|
|
5
|
+
import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';
|
|
6
|
+
declare const ActionMenu_base: typeof PickerBase & {
|
|
7
|
+
new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
|
|
8
|
+
prototype: import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
|
|
9
|
+
} & {
|
|
10
|
+
new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
|
|
11
|
+
prototype: import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* @element sp-action-menu
|
|
15
|
+
*
|
|
16
|
+
* @slot - menu items to be listed in the Action Menu
|
|
17
|
+
* @slot icon - The icon to use for the Action Menu
|
|
18
|
+
* @slot label - The label to use for the Action Menu
|
|
19
|
+
* @slot label-only - The label to use for the Action Menu (no icon space reserved)
|
|
20
|
+
* @slot tooltip - Tooltip to be applied to the Action Button
|
|
21
|
+
* @attr selects - By default `sp-action-menu` does not manage a selection. If
|
|
22
|
+
* you'd like for a selection to be held by the `sp-menu` that it presents in
|
|
23
|
+
* its overlay, use `selects="single" to activate this functionality.
|
|
24
|
+
*/
|
|
25
|
+
export declare class ActionMenu extends ActionMenu_base {
|
|
26
|
+
static get styles(): CSSResultArray;
|
|
27
|
+
selects: undefined | 'single';
|
|
28
|
+
staticColor?: 'white' | 'black';
|
|
29
|
+
protected listRole: 'listbox' | 'menu';
|
|
30
|
+
protected itemRole: string;
|
|
31
|
+
private get hasLabel();
|
|
32
|
+
private get labelOnly();
|
|
33
|
+
handleSlottableRequest: (event: SlottableRequestEvent) => void;
|
|
34
|
+
protected get buttonContent(): TemplateResult[];
|
|
35
|
+
protected render(): TemplateResult;
|
|
36
|
+
protected update(changedProperties: PropertyValues<this>): void;
|
|
37
|
+
}
|
|
38
|
+
export {};
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
+
if (decorator = decorators[i])
|
|
8
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
import {
|
|
13
|
+
html
|
|
14
|
+
} from "@spectrum-web-components/base";
|
|
15
|
+
import { state } from "@spectrum-web-components/base/src/decorators.js";
|
|
16
|
+
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
17
|
+
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
18
|
+
import { DESCRIPTION_ID, PickerBase } from "@spectrum-web-components/picker";
|
|
19
|
+
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
20
|
+
import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
|
|
21
|
+
import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
|
|
22
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";
|
|
23
|
+
import actionMenuStyles from "./action-menu.css.js";
|
|
24
|
+
import { SlottableRequestEvent } from "@spectrum-web-components/overlay/src/slottable-request-event.js";
|
|
25
|
+
export class ActionMenu extends ObserveSlotPresence(
|
|
26
|
+
ObserveSlotText(PickerBase, "label"),
|
|
27
|
+
'[slot="label-only"]'
|
|
28
|
+
) {
|
|
29
|
+
constructor() {
|
|
30
|
+
super(...arguments);
|
|
31
|
+
this.selects = void 0;
|
|
32
|
+
this.listRole = "menu";
|
|
33
|
+
this.itemRole = "menuitem";
|
|
34
|
+
this.handleSlottableRequest = (event) => {
|
|
35
|
+
this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
static get styles() {
|
|
39
|
+
return [actionMenuStyles];
|
|
40
|
+
}
|
|
41
|
+
get hasLabel() {
|
|
42
|
+
return this.slotHasContent;
|
|
43
|
+
}
|
|
44
|
+
get labelOnly() {
|
|
45
|
+
return this.slotContentIsPresent;
|
|
46
|
+
}
|
|
47
|
+
get buttonContent() {
|
|
48
|
+
return [
|
|
49
|
+
html`
|
|
50
|
+
${this.labelOnly ? html`` : html`
|
|
51
|
+
<slot
|
|
52
|
+
name="icon"
|
|
53
|
+
slot="icon"
|
|
54
|
+
?icon-only=${!this.hasLabel}
|
|
55
|
+
?hidden=${this.labelOnly}
|
|
56
|
+
>
|
|
57
|
+
<sp-icon-more
|
|
58
|
+
class="icon"
|
|
59
|
+
size=${this.size}
|
|
60
|
+
></sp-icon-more>
|
|
61
|
+
</slot>
|
|
62
|
+
`}
|
|
63
|
+
<slot name="label" ?hidden=${!this.hasLabel}></slot>
|
|
64
|
+
<slot name="label-only"></slot>
|
|
65
|
+
<slot
|
|
66
|
+
name="tooltip"
|
|
67
|
+
@slotchange=${this.handleTooltipSlotchange}
|
|
68
|
+
></slot>
|
|
69
|
+
`
|
|
70
|
+
];
|
|
71
|
+
}
|
|
72
|
+
render() {
|
|
73
|
+
if (this.tooltipEl) {
|
|
74
|
+
this.tooltipEl.disabled = this.open;
|
|
75
|
+
}
|
|
76
|
+
return html`
|
|
77
|
+
<sp-action-button
|
|
78
|
+
aria-describedby=${DESCRIPTION_ID}
|
|
79
|
+
?quiet=${this.quiet}
|
|
80
|
+
?selected=${this.open}
|
|
81
|
+
static-color=${ifDefined(this.staticColor)}
|
|
82
|
+
aria-haspopup="true"
|
|
83
|
+
aria-controls=${ifDefined(this.open ? "menu" : void 0)}
|
|
84
|
+
aria-expanded=${this.open ? "true" : "false"}
|
|
85
|
+
aria-label=${ifDefined(this.label || void 0)}
|
|
86
|
+
id="button"
|
|
87
|
+
class="button"
|
|
88
|
+
size=${this.size}
|
|
89
|
+
@blur=${this.handleButtonBlur}
|
|
90
|
+
@focus=${this.handleButtonFocus}
|
|
91
|
+
@keydown=${{
|
|
92
|
+
handleEvent: this.handleEnterKeydown,
|
|
93
|
+
capture: true
|
|
94
|
+
}}
|
|
95
|
+
?disabled=${this.disabled}
|
|
96
|
+
>
|
|
97
|
+
${this.buttonContent}
|
|
98
|
+
</sp-action-button>
|
|
99
|
+
${this.renderMenu} ${this.renderDescriptionSlot}
|
|
100
|
+
`;
|
|
101
|
+
}
|
|
102
|
+
update(changedProperties) {
|
|
103
|
+
if (changedProperties.has("invalid")) {
|
|
104
|
+
this.invalid = false;
|
|
105
|
+
}
|
|
106
|
+
super.update(changedProperties);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
__decorateClass([
|
|
110
|
+
property({ type: String })
|
|
111
|
+
], ActionMenu.prototype, "selects", 2);
|
|
112
|
+
__decorateClass([
|
|
113
|
+
property({ reflect: true, attribute: "static-color" })
|
|
114
|
+
], ActionMenu.prototype, "staticColor", 2);
|
|
115
|
+
__decorateClass([
|
|
116
|
+
state()
|
|
117
|
+
], ActionMenu.prototype, "labelOnly", 1);
|
|
118
|
+
//# sourceMappingURL=ActionMenu.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["ActionMenu.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 PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n * you'd like for a selection to be held by the `sp-menu` that it presents in\n * its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n ObserveSlotText(PickerBase, 'label'),\n '[slot=\"label-only\"]'\n) {\n public static override get styles(): CSSResultArray {\n return [actionMenuStyles];\n }\n\n @property({ type: String })\n public override selects: undefined | 'single' = undefined;\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'white' | 'black';\n\n protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @state()\n private get labelOnly(): boolean {\n return this.slotContentIsPresent;\n }\n\n public override handleSlottableRequest = (\n event: SlottableRequestEvent\n ): void => {\n this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n };\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n ${this.labelOnly\n ? html``\n : html`\n <slot\n name=\"icon\"\n slot=\"icon\"\n ?icon-only=${!this.hasLabel}\n ?hidden=${this.labelOnly}\n >\n <sp-icon-more\n class=\"icon\"\n size=${this.size}\n ></sp-icon-more>\n </slot>\n `}\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n <slot name=\"label-only\"></slot>\n <slot\n name=\"tooltip\"\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <sp-action-button\n aria-describedby=${DESCRIPTION_ID}\n ?quiet=${this.quiet}\n ?selected=${this.open}\n static-color=${ifDefined(this.staticColor)}\n aria-haspopup=\"true\"\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${ifDefined(this.label || undefined)}\n id=\"button\"\n class=\"button\"\n size=${this.size}\n @blur=${this.handleButtonBlur}\n @focus=${this.handleButtonFocus}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('invalid')) {\n this.invalid = false;\n }\n super.update(changedProperties);\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB,kBAAkB;AAC3C,OAAO;AACP,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,OAAO;AACP,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAc/B,aAAM,mBAAmB;AAAA,EAC5B,gBAAgB,YAAY,OAAO;AAAA,EACnC;AACJ,EAAE;AAAA,EAHK;AAAA;AASH,SAAgB,UAAgC;AAKhD,SAAmB,WAA+B;AAClD,SAAmB,WAAW;AAU9B,SAAgB,yBAAyB,CACrC,UACO;AACP,WAAK,cAAc,IAAI,sBAAsB,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACxE;AAAA;AAAA,EAzBA,WAA2B,SAAyB;AAChD,WAAO,CAAC,gBAAgB;AAAA,EAC5B;AAAA,EAUA,IAAY,WAAoB;AAC5B,WAAO,KAAK;AAAA,EAChB;AAAA,EAGA,IAAY,YAAqB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAQA,IAAuB,gBAAkC;AACrD,WAAO;AAAA,MACH;AAAA,kBACM,KAAK,YACD,SACA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,yCAIb,KAAK,IAAI;AAAA;AAAA;AAAA,uBAG3B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA;AAAA,IAGtD;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,QAAI,KAAK,WAAW;AAChB,WAAK,UAAU,WAAW,KAAK;AAAA,IACnC;AACA,WAAO;AAAA;AAAA,mCAEoB,cAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,+BACN,UAAU,KAAK,WAAW,CAAC;AAAA;AAAA,gCAE1B,UAAU,KAAK,OAAO,SAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,OAAO,SAAS,OAAO;AAAA,6BAC/B,UAAU,KAAK,SAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB;AAAA,MACP,aAAa,KAAK;AAAA,MAClB,SAAS;AAAA,IACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA;AAAA,EAEvD;AAAA,EAEmB,OAAO,mBAA+C;AACrE,QAAI,kBAAkB,IAAI,SAAS,GAAG;AAClC,WAAK,UAAU;AAAA,IACnB;AACA,UAAM,OAAO,iBAAiB;AAAA,EAClC;AACJ;AAvFoB;AAAA,EADf,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GARjB,WASO;AAGT;AAAA,EADN,SAAS,EAAE,SAAS,MAAM,WAAW,eAAe,CAAC;AAAA,GAX7C,WAYF;AASK;AAAA,EADX,MAAM;AAAA,GApBE,WAqBG;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(r,o,e,i)=>{for(var t=i>1?void 0:i?h(o,e):o,n=r.length-1,a;n>=0;n--)(a=r[n])&&(t=(i?a(o,e,t):a(t))||t);return i&&t&&u(o,e,t),t};import{html as s}from"@spectrum-web-components/base";import{state as c}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import{DESCRIPTION_ID as b,PickerBase as m}from"@spectrum-web-components/picker";import"@spectrum-web-components/action-button/sp-action-button.js";import{ObserveSlotPresence as f}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import{ObserveSlotText as $}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";import v from"./action-menu.css.js";import{SlottableRequestEvent as y}from"@spectrum-web-components/overlay/src/slottable-request-event.js";export class ActionMenu extends f($(m,"label"),'[slot="label-only"]'){constructor(){super(...arguments);this.selects=void 0;this.listRole="menu";this.itemRole="menuitem";this.handleSlottableRequest=e=>{this.dispatchEvent(new y(e.name,e.data))}}static get styles(){return[v]}get hasLabel(){return this.slotHasContent}get labelOnly(){return this.slotContentIsPresent}get buttonContent(){return[s`
|
|
2
|
+
${this.labelOnly?s``:s`
|
|
3
|
+
<slot
|
|
4
|
+
name="icon"
|
|
5
|
+
slot="icon"
|
|
6
|
+
?icon-only=${!this.hasLabel}
|
|
7
|
+
?hidden=${this.labelOnly}
|
|
8
|
+
>
|
|
9
|
+
<sp-icon-more
|
|
10
|
+
class="icon"
|
|
11
|
+
size=${this.size}
|
|
12
|
+
></sp-icon-more>
|
|
13
|
+
</slot>
|
|
14
|
+
`}
|
|
15
|
+
<slot name="label" ?hidden=${!this.hasLabel}></slot>
|
|
16
|
+
<slot name="label-only"></slot>
|
|
17
|
+
<slot
|
|
18
|
+
name="tooltip"
|
|
19
|
+
@slotchange=${this.handleTooltipSlotchange}
|
|
20
|
+
></slot>
|
|
21
|
+
`]}render(){return this.tooltipEl&&(this.tooltipEl.disabled=this.open),s`
|
|
22
|
+
<sp-action-button
|
|
23
|
+
aria-describedby=${b}
|
|
24
|
+
?quiet=${this.quiet}
|
|
25
|
+
?selected=${this.open}
|
|
26
|
+
static-color=${d(this.staticColor)}
|
|
27
|
+
aria-haspopup="true"
|
|
28
|
+
aria-controls=${d(this.open?"menu":void 0)}
|
|
29
|
+
aria-expanded=${this.open?"true":"false"}
|
|
30
|
+
aria-label=${d(this.label||void 0)}
|
|
31
|
+
id="button"
|
|
32
|
+
class="button"
|
|
33
|
+
size=${this.size}
|
|
34
|
+
@blur=${this.handleButtonBlur}
|
|
35
|
+
@focus=${this.handleButtonFocus}
|
|
36
|
+
@keydown=${{handleEvent:this.handleEnterKeydown,capture:!0}}
|
|
37
|
+
?disabled=${this.disabled}
|
|
38
|
+
>
|
|
39
|
+
${this.buttonContent}
|
|
40
|
+
</sp-action-button>
|
|
41
|
+
${this.renderMenu} ${this.renderDescriptionSlot}
|
|
42
|
+
`}update(e){e.has("invalid")&&(this.invalid=!1),super.update(e)}}l([p({type:String})],ActionMenu.prototype,"selects",2),l([p({reflect:!0,attribute:"static-color"})],ActionMenu.prototype,"staticColor",2),l([c()],ActionMenu.prototype,"labelOnly",1);
|
|
43
|
+
//# sourceMappingURL=ActionMenu.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["ActionMenu.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 PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n * you'd like for a selection to be held by the `sp-menu` that it presents in\n * its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n ObserveSlotText(PickerBase, 'label'),\n '[slot=\"label-only\"]'\n) {\n public static override get styles(): CSSResultArray {\n return [actionMenuStyles];\n }\n\n @property({ type: String })\n public override selects: undefined | 'single' = undefined;\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'white' | 'black';\n\n protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @state()\n private get labelOnly(): boolean {\n return this.slotContentIsPresent;\n }\n\n public override handleSlottableRequest = (\n event: SlottableRequestEvent\n ): void => {\n this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n };\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n ${this.labelOnly\n ? html``\n : html`\n <slot\n name=\"icon\"\n slot=\"icon\"\n ?icon-only=${!this.hasLabel}\n ?hidden=${this.labelOnly}\n >\n <sp-icon-more\n class=\"icon\"\n size=${this.size}\n ></sp-icon-more>\n </slot>\n `}\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n <slot name=\"label-only\"></slot>\n <slot\n name=\"tooltip\"\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <sp-action-button\n aria-describedby=${DESCRIPTION_ID}\n ?quiet=${this.quiet}\n ?selected=${this.open}\n static-color=${ifDefined(this.staticColor)}\n aria-haspopup=\"true\"\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${ifDefined(this.label || undefined)}\n id=\"button\"\n class=\"button\"\n size=${this.size}\n @blur=${this.handleButtonBlur}\n @focus=${this.handleButtonFocus}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('invalid')) {\n this.invalid = false;\n }\n super.update(changedProperties);\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OAAS,SAAAC,MAAa,kDACtB,OAAS,aAAAC,MAAiB,kDAC1B,OAAS,YAAAC,MAAgB,kDACzB,OAAS,kBAAAC,EAAgB,cAAAC,MAAkB,kCAC3C,MAAO,6DACP,OAAS,uBAAAC,MAA2B,+DACpC,OAAS,mBAAAC,MAAuB,2DAChC,MAAO,gEACP,OAAOC,MAAsB,uBAC7B,OAAS,yBAAAC,MAA6B,kEAc/B,aAAM,mBAAmBH,EAC5BC,EAAgBF,EAAY,OAAO,EACnC,qBACJ,CAAE,CAHK,kCASH,KAAgB,QAAgC,OAKhD,KAAmB,SAA+B,OAClD,KAAmB,SAAW,WAU9B,KAAgB,uBACZK,GACO,CACP,KAAK,cAAc,IAAID,EAAsBC,EAAM,KAAMA,EAAM,IAAI,CAAC,CACxE,EAzBA,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAgB,CAC5B,CAUA,IAAY,UAAoB,CAC5B,OAAO,KAAK,cAChB,CAGA,IAAY,WAAqB,CAC7B,OAAO,KAAK,oBAChB,CAQA,IAAuB,eAAkC,CACrD,MAAO,CACHR;AAAA,kBACM,KAAK,UACDA,IACAA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,yCAIb,KAAK,IAAI;AAAA;AAAA;AAAA,uBAG3B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA,aAGtD,CACJ,CAEmB,QAAyB,CACxC,OAAI,KAAK,YACL,KAAK,UAAU,SAAW,KAAK,MAE5BA;AAAA;AAAA,mCAEoBI,CAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,+BACNF,EAAU,KAAK,WAAW,CAAC;AAAA;AAAA,gCAE1BA,EAAU,KAAK,KAAO,OAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,KAAO,OAAS,OAAO;AAAA,6BAC/BA,EAAU,KAAK,OAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB,CACP,YAAa,KAAK,mBAClB,QAAS,EACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA,SAEvD,CAEmB,OAAOS,EAA+C,CACjEA,EAAkB,IAAI,SAAS,IAC/B,KAAK,QAAU,IAEnB,MAAM,OAAOA,CAAiB,CAClC,CACJ,CAvFoBC,EAAA,CADfT,EAAS,CAAE,KAAM,MAAO,CAAC,GARjB,WASO,uBAGTS,EAAA,CADNT,EAAS,CAAE,QAAS,GAAM,UAAW,cAAe,CAAC,GAX7C,WAYF,2BASKS,EAAA,CADXX,EAAM,GApBE,WAqBG",
|
|
6
|
+
"names": ["html", "state", "ifDefined", "property", "DESCRIPTION_ID", "PickerBase", "ObserveSlotPresence", "ObserveSlotText", "actionMenuStyles", "SlottableRequestEvent", "event", "changedProperties", "__decorateClass"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
:host{display:inline-flex}:host([quiet]){min-width:0}:host>sp-menu{display:none}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none}:host([dir=ltr]) ::slotted([slot=icon]),:host([dir=ltr]) .icon{margin-left:calc(-1*(var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)))}:host([dir=rtl]) ::slotted([slot=icon]),:host([dir=rtl]) .icon{margin-right:calc(-1*(var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)))}:host([dir]) slot[icon-only]::slotted([slot=icon]),:host([dir]) slot[icon-only] .icon{margin-inline:calc(( var(--custom-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only,var(--spectrum-actionbutton-edge-to-visual-only)))*-1)}sp-overlay:not(:defined){display:none}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=action-menu.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["action-menu.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{display:inline-flex}:host([quiet]){min-width:0}:host>sp-menu{display:none}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none}:host([dir=ltr]) ::slotted([slot=icon]),:host([dir=ltr]) .icon{margin-left:calc(-1*(var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)))}:host([dir=rtl]) ::slotted([slot=icon]),:host([dir=rtl]) .icon{margin-right:calc(-1*(var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)))}:host([dir]) slot[icon-only]::slotted([slot=icon]),:host([dir]) slot[icon-only] .icon{margin-inline:calc(( var(--custom-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only,var(--spectrum-actionbutton-edge-to-visual-only)))*-1)}sp-overlay:not(:defined){display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
2
|
+
:host{display:inline-flex}:host([quiet]){min-width:0}:host>sp-menu{display:none}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none}:host([dir=ltr]) ::slotted([slot=icon]),:host([dir=ltr]) .icon{margin-left:calc(-1*(var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)))}:host([dir=rtl]) ::slotted([slot=icon]),:host([dir=rtl]) .icon{margin-right:calc(-1*(var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)))}:host([dir]) slot[icon-only]::slotted([slot=icon]),:host([dir]) slot[icon-only] .icon{margin-inline:calc(( var(--custom-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only,var(--spectrum-actionbutton-edge-to-visual-only)))*-1)}sp-overlay:not(:defined){display:none}
|
|
3
|
+
`;export default o;
|
|
4
|
+
//# sourceMappingURL=action-menu.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["action-menu.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{display:inline-flex}:host([quiet]){min-width:0}:host>sp-menu{display:none}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none}:host([dir=ltr]) ::slotted([slot=icon]),:host([dir=ltr]) .icon{margin-left:calc(-1*(var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)))}:host([dir=rtl]) ::slotted([slot=icon]),:host([dir=rtl]) .icon{margin-right:calc(-1*(var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)))}:host([dir]) slot[icon-only]::slotted([slot=icon]),:host([dir]) slot[icon-only] .icon{margin-inline:calc(( var(--custom-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only,var(--spectrum-actionbutton-edge-to-visual-only)))*-1)}sp-overlay:not(:defined){display:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ActionMenu.js';
|
package/src/index.dev.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.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*/\nexport * from './ActionMenu.dev.js'\n"],
|
|
5
|
+
"mappings": ";AAWA,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/index.js
ADDED
package/src/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.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*/\nexport * from './ActionMenu.js';\n"],
|
|
5
|
+
"mappings": "aAWA,WAAc",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-action-menu.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 '@spectrum-web-components/picker/sync/index.js';\nimport '../sp-action-menu.dev.js'\n"],
|
|
5
|
+
"mappings": ";AAYA,OAAO;AACP,OAAO;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-action-menu.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 '@spectrum-web-components/picker/sync/index.js';\nimport '../sp-action-menu.js';\n"],
|
|
5
|
+
"mappings": "aAYA,MAAO,gDACP,MAAO",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|