@spectrum-web-components/accordion 0.33.3-overlay.65 → 0.34.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 +271 -0
- package/custom-elements.json +42 -6
- package/package.json +8 -8
- package/src/Accordion.d.ts +12 -2
- package/src/Accordion.dev.js +18 -1
- package/src/Accordion.dev.js.map +2 -2
- package/src/Accordion.js +2 -2
- package/src/Accordion.js.map +3 -3
- package/src/AccordionItem.d.ts +7 -1
- package/src/AccordionItem.dev.js +44 -5
- package/src/AccordionItem.dev.js.map +2 -2
- package/src/AccordionItem.js +31 -5
- package/src/AccordionItem.js.map +3 -3
- package/src/accordion-item.css.dev.js +122 -88
- package/src/accordion-item.css.dev.js.map +2 -2
- package/src/accordion-item.css.js +124 -90
- package/src/accordion-item.css.js.map +2 -2
- package/src/accordion.css.dev.js +122 -4
- package/src/accordion.css.dev.js.map +2 -2
- package/src/accordion.css.js +124 -6
- package/src/accordion.css.js.map +2 -2
- package/src/spectrum-accordion-item.css.dev.js +120 -88
- package/src/spectrum-accordion-item.css.dev.js.map +2 -2
- package/src/spectrum-accordion-item.css.js +122 -90
- package/src/spectrum-accordion-item.css.js.map +2 -2
- package/src/spectrum-accordion.css.dev.js +122 -4
- package/src/spectrum-accordion.css.dev.js.map +2 -2
- package/src/spectrum-accordion.css.js +124 -6
- package/src/spectrum-accordion.css.js.map +2 -2
- package/src/spectrum-config.js +31 -18
- package/stories/accordion-densities-compact.stories.js +11 -0
- package/stories/accordion-densities-compact.stories.js.map +7 -0
- package/stories/accordion-densities-spacious.stories.js +11 -0
- package/stories/accordion-densities-spacious.stories.js.map +7 -0
- package/stories/accordion-sizes.stories.js +11 -0
- package/stories/accordion-sizes.stories.js.map +7 -0
- package/stories/accordion.stories.js +32 -39
- package/stories/accordion.stories.js.map +2 -2
- package/stories/index.js +42 -0
- package/stories/index.js.map +7 -0
- package/test/accordion-densities-compact.test-vrt.js +5 -0
- package/test/accordion-densities-compact.test-vrt.js.map +7 -0
- package/test/accordion-densities-spacious.test-vrt.js +5 -0
- package/test/accordion-densities-spacious.test-vrt.js.map +7 -0
- package/test/accordion-sizes.test-vrt.js +5 -0
- package/test/accordion-sizes.test-vrt.js.map +7 -0
package/README.md
CHANGED
|
@@ -74,3 +74,274 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
|
|
|
74
74
|
</sp-accordion-item>
|
|
75
75
|
</sp-accordion>
|
|
76
76
|
```
|
|
77
|
+
|
|
78
|
+
## Sizes
|
|
79
|
+
|
|
80
|
+
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
81
|
+
<sp-tab value="s">Small</sp-tab>
|
|
82
|
+
<sp-tab-panel value="s">
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<sp-accordion size="s">
|
|
86
|
+
<sp-accordion-item label="Heading 1">
|
|
87
|
+
<div>Item 1</div>
|
|
88
|
+
</sp-accordion-item>
|
|
89
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
90
|
+
<div>Item 2</div>
|
|
91
|
+
</sp-accordion-item>
|
|
92
|
+
<sp-accordion-item label="Heading 3">
|
|
93
|
+
<div>Item 3</div>
|
|
94
|
+
</sp-accordion-item>
|
|
95
|
+
<sp-accordion-item label="Heading 4">
|
|
96
|
+
<div>Item 4</div>
|
|
97
|
+
</sp-accordion-item>
|
|
98
|
+
</sp-accordion>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
</sp-tab-panel>
|
|
102
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
103
|
+
<sp-tab-panel value="m">
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<sp-accordion size="m">
|
|
107
|
+
<sp-accordion-item label="Heading 1">
|
|
108
|
+
<div>Item 1</div>
|
|
109
|
+
</sp-accordion-item>
|
|
110
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
111
|
+
<div>Item 2</div>
|
|
112
|
+
</sp-accordion-item>
|
|
113
|
+
<sp-accordion-item label="Heading 3">
|
|
114
|
+
<div>Item 3</div>
|
|
115
|
+
</sp-accordion-item>
|
|
116
|
+
<sp-accordion-item label="Heading 4">
|
|
117
|
+
<div>Item 4</div>
|
|
118
|
+
</sp-accordion-item>
|
|
119
|
+
</sp-accordion>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
</sp-tab-panel>
|
|
123
|
+
<sp-tab value="l">Large</sp-tab>
|
|
124
|
+
<sp-tab-panel value="l">
|
|
125
|
+
|
|
126
|
+
```html
|
|
127
|
+
<sp-accordion size="l">
|
|
128
|
+
<sp-accordion-item label="Heading 1">
|
|
129
|
+
<div>Item 1</div>
|
|
130
|
+
</sp-accordion-item>
|
|
131
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
132
|
+
<div>Item 2</div>
|
|
133
|
+
</sp-accordion-item>
|
|
134
|
+
<sp-accordion-item label="Heading 3">
|
|
135
|
+
<div>Item 3</div>
|
|
136
|
+
</sp-accordion-item>
|
|
137
|
+
<sp-accordion-item label="Heading 4">
|
|
138
|
+
<div>Item 4</div>
|
|
139
|
+
</sp-accordion-item>
|
|
140
|
+
</sp-accordion>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
</sp-tab-panel>
|
|
144
|
+
<sp-tab value="xl">Extra Large</sp-tab>
|
|
145
|
+
<sp-tab-panel value="xl">
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<sp-accordion size="xl">
|
|
149
|
+
<sp-accordion-item label="Heading 1">
|
|
150
|
+
<div>Item 1</div>
|
|
151
|
+
</sp-accordion-item>
|
|
152
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
153
|
+
<div>Item 2</div>
|
|
154
|
+
</sp-accordion-item>
|
|
155
|
+
<sp-accordion-item label="Heading 3">
|
|
156
|
+
<div>Item 3</div>
|
|
157
|
+
</sp-accordion-item>
|
|
158
|
+
<sp-accordion-item label="Heading 4">
|
|
159
|
+
<div>Item 4</div>
|
|
160
|
+
</sp-accordion-item>
|
|
161
|
+
</sp-accordion>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
</sp-tab-panel>
|
|
165
|
+
</sp-tabs>
|
|
166
|
+
|
|
167
|
+
## Density
|
|
168
|
+
|
|
169
|
+
The `density` property, when applied, accepts the values of `compact` or `spacious`.
|
|
170
|
+
|
|
171
|
+
### Compact
|
|
172
|
+
|
|
173
|
+
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
174
|
+
<sp-tab value="s">Small</sp-tab>
|
|
175
|
+
<sp-tab-panel value="s">
|
|
176
|
+
|
|
177
|
+
```html
|
|
178
|
+
<sp-accordion density="compact" size="s">
|
|
179
|
+
<sp-accordion-item label="Heading 1">
|
|
180
|
+
<div>Item 1</div>
|
|
181
|
+
</sp-accordion-item>
|
|
182
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
183
|
+
<div>Item 2</div>
|
|
184
|
+
</sp-accordion-item>
|
|
185
|
+
<sp-accordion-item label="Heading 3">
|
|
186
|
+
<div>Item 3</div>
|
|
187
|
+
</sp-accordion-item>
|
|
188
|
+
<sp-accordion-item label="Heading 4">
|
|
189
|
+
<div>Item 4</div>
|
|
190
|
+
</sp-accordion-item>
|
|
191
|
+
</sp-accordion>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
</sp-tab-panel>
|
|
195
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
196
|
+
<sp-tab-panel value="m">
|
|
197
|
+
|
|
198
|
+
```html
|
|
199
|
+
<sp-accordion density="compact" size="m">
|
|
200
|
+
<sp-accordion-item label="Heading 1">
|
|
201
|
+
<div>Item 1</div>
|
|
202
|
+
</sp-accordion-item>
|
|
203
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
204
|
+
<div>Item 2</div>
|
|
205
|
+
</sp-accordion-item>
|
|
206
|
+
<sp-accordion-item label="Heading 3">
|
|
207
|
+
<div>Item 3</div>
|
|
208
|
+
</sp-accordion-item>
|
|
209
|
+
<sp-accordion-item label="Heading 4">
|
|
210
|
+
<div>Item 4</div>
|
|
211
|
+
</sp-accordion-item>
|
|
212
|
+
</sp-accordion>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
</sp-tab-panel>
|
|
216
|
+
<sp-tab value="l">Large</sp-tab>
|
|
217
|
+
<sp-tab-panel value="l">
|
|
218
|
+
|
|
219
|
+
```html
|
|
220
|
+
<sp-accordion density="compact" size="l">
|
|
221
|
+
<sp-accordion-item label="Heading 1">
|
|
222
|
+
<div>Item 1</div>
|
|
223
|
+
</sp-accordion-item>
|
|
224
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
225
|
+
<div>Item 2</div>
|
|
226
|
+
</sp-accordion-item>
|
|
227
|
+
<sp-accordion-item label="Heading 3">
|
|
228
|
+
<div>Item 3</div>
|
|
229
|
+
</sp-accordion-item>
|
|
230
|
+
<sp-accordion-item label="Heading 4">
|
|
231
|
+
<div>Item 4</div>
|
|
232
|
+
</sp-accordion-item>
|
|
233
|
+
</sp-accordion>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
</sp-tab-panel>
|
|
237
|
+
<sp-tab value="xl">Extra Large</sp-tab>
|
|
238
|
+
<sp-tab-panel value="xl">
|
|
239
|
+
|
|
240
|
+
```html
|
|
241
|
+
<sp-accordion density="compact" size="xl">
|
|
242
|
+
<sp-accordion-item label="Heading 1">
|
|
243
|
+
<div>Item 1</div>
|
|
244
|
+
</sp-accordion-item>
|
|
245
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
246
|
+
<div>Item 2</div>
|
|
247
|
+
</sp-accordion-item>
|
|
248
|
+
<sp-accordion-item label="Heading 3">
|
|
249
|
+
<div>Item 3</div>
|
|
250
|
+
</sp-accordion-item>
|
|
251
|
+
<sp-accordion-item label="Heading 4">
|
|
252
|
+
<div>Item 4</div>
|
|
253
|
+
</sp-accordion-item>
|
|
254
|
+
</sp-accordion>
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
</sp-tab-panel>
|
|
258
|
+
</sp-tabs>
|
|
259
|
+
|
|
260
|
+
### Spacious
|
|
261
|
+
|
|
262
|
+
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
263
|
+
<sp-tab value="s">Small</sp-tab>
|
|
264
|
+
<sp-tab-panel value="s">
|
|
265
|
+
|
|
266
|
+
```html
|
|
267
|
+
<sp-accordion density="spacious" size="s">
|
|
268
|
+
<sp-accordion-item label="Heading 1">
|
|
269
|
+
<div>Item 1</div>
|
|
270
|
+
</sp-accordion-item>
|
|
271
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
272
|
+
<div>Item 2</div>
|
|
273
|
+
</sp-accordion-item>
|
|
274
|
+
<sp-accordion-item label="Heading 3">
|
|
275
|
+
<div>Item 3</div>
|
|
276
|
+
</sp-accordion-item>
|
|
277
|
+
<sp-accordion-item label="Heading 4">
|
|
278
|
+
<div>Item 4</div>
|
|
279
|
+
</sp-accordion-item>
|
|
280
|
+
</sp-accordion>
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
</sp-tab-panel>
|
|
284
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
285
|
+
<sp-tab-panel value="m">
|
|
286
|
+
|
|
287
|
+
```html
|
|
288
|
+
<sp-accordion density="spacious" size="m">
|
|
289
|
+
<sp-accordion-item label="Heading 1">
|
|
290
|
+
<div>Item 1</div>
|
|
291
|
+
</sp-accordion-item>
|
|
292
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
293
|
+
<div>Item 2</div>
|
|
294
|
+
</sp-accordion-item>
|
|
295
|
+
<sp-accordion-item label="Heading 3">
|
|
296
|
+
<div>Item 3</div>
|
|
297
|
+
</sp-accordion-item>
|
|
298
|
+
<sp-accordion-item label="Heading 4">
|
|
299
|
+
<div>Item 4</div>
|
|
300
|
+
</sp-accordion-item>
|
|
301
|
+
</sp-accordion>
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
</sp-tab-panel>
|
|
305
|
+
<sp-tab value="l">Large</sp-tab>
|
|
306
|
+
<sp-tab-panel value="l">
|
|
307
|
+
|
|
308
|
+
```html
|
|
309
|
+
<sp-accordion density="spacious" size="l">
|
|
310
|
+
<sp-accordion-item label="Heading 1">
|
|
311
|
+
<div>Item 1</div>
|
|
312
|
+
</sp-accordion-item>
|
|
313
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
314
|
+
<div>Item 2</div>
|
|
315
|
+
</sp-accordion-item>
|
|
316
|
+
<sp-accordion-item label="Heading 3">
|
|
317
|
+
<div>Item 3</div>
|
|
318
|
+
</sp-accordion-item>
|
|
319
|
+
<sp-accordion-item label="Heading 4">
|
|
320
|
+
<div>Item 4</div>
|
|
321
|
+
</sp-accordion-item>
|
|
322
|
+
</sp-accordion>
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
</sp-tab-panel>
|
|
326
|
+
<sp-tab value="xl">Extra Large</sp-tab>
|
|
327
|
+
<sp-tab-panel value="xl">
|
|
328
|
+
|
|
329
|
+
```html
|
|
330
|
+
<sp-accordion density="spacious" size="xl">
|
|
331
|
+
<sp-accordion-item label="Heading 1">
|
|
332
|
+
<div>Item 1</div>
|
|
333
|
+
</sp-accordion-item>
|
|
334
|
+
<sp-accordion-item disabled label="Heading 2">
|
|
335
|
+
<div>Item 2</div>
|
|
336
|
+
</sp-accordion-item>
|
|
337
|
+
<sp-accordion-item label="Heading 3">
|
|
338
|
+
<div>Item 3</div>
|
|
339
|
+
</sp-accordion-item>
|
|
340
|
+
<sp-accordion-item label="Heading 4">
|
|
341
|
+
<div>Item 4</div>
|
|
342
|
+
</sp-accordion-item>
|
|
343
|
+
</sp-accordion>
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
</sp-tab-panel>
|
|
347
|
+
</sp-tabs>
|
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-accordion-item.
|
|
7
|
+
"path": "sp-accordion-item.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "sp-accordion.
|
|
22
|
+
"path": "sp-accordion.js",
|
|
23
23
|
"declarations": [],
|
|
24
24
|
"exports": [
|
|
25
25
|
{
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"kind": "javascript-module",
|
|
37
|
-
"path": "src/Accordion.
|
|
37
|
+
"path": "src/Accordion.js",
|
|
38
38
|
"declarations": [
|
|
39
39
|
{
|
|
40
40
|
"kind": "class",
|
|
@@ -59,6 +59,17 @@
|
|
|
59
59
|
"attribute": "allow-multiple",
|
|
60
60
|
"reflects": true
|
|
61
61
|
},
|
|
62
|
+
{
|
|
63
|
+
"kind": "field",
|
|
64
|
+
"name": "density",
|
|
65
|
+
"type": {
|
|
66
|
+
"text": "'compact' | 'spacious' | undefined"
|
|
67
|
+
},
|
|
68
|
+
"privacy": "public",
|
|
69
|
+
"description": "Sets the spacing between the content to borders of an accordion item",
|
|
70
|
+
"attribute": "density",
|
|
71
|
+
"reflects": true
|
|
72
|
+
},
|
|
62
73
|
{
|
|
63
74
|
"kind": "field",
|
|
64
75
|
"name": "defaultNodes",
|
|
@@ -129,6 +140,20 @@
|
|
|
129
140
|
"default": "false",
|
|
130
141
|
"description": "Allows multiple accordion items to be opened at the same time",
|
|
131
142
|
"fieldName": "allowMultiple"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"name": "density",
|
|
146
|
+
"type": {
|
|
147
|
+
"text": "'compact' | 'spacious' | undefined"
|
|
148
|
+
},
|
|
149
|
+
"description": "Sets the spacing between the content to borders of an accordion item",
|
|
150
|
+
"fieldName": "density"
|
|
151
|
+
}
|
|
152
|
+
],
|
|
153
|
+
"mixins": [
|
|
154
|
+
{
|
|
155
|
+
"name": "SizedMixin",
|
|
156
|
+
"package": "@spectrum-web-components/base"
|
|
132
157
|
}
|
|
133
158
|
],
|
|
134
159
|
"superclass": {
|
|
@@ -145,14 +170,14 @@
|
|
|
145
170
|
"name": "Accordion",
|
|
146
171
|
"declaration": {
|
|
147
172
|
"name": "Accordion",
|
|
148
|
-
"module": "src/Accordion.
|
|
173
|
+
"module": "src/Accordion.js"
|
|
149
174
|
}
|
|
150
175
|
}
|
|
151
176
|
]
|
|
152
177
|
},
|
|
153
178
|
{
|
|
154
179
|
"kind": "javascript-module",
|
|
155
|
-
"path": "src/AccordionItem.
|
|
180
|
+
"path": "src/AccordionItem.js",
|
|
156
181
|
"declarations": [
|
|
157
182
|
{
|
|
158
183
|
"kind": "class",
|
|
@@ -226,6 +251,11 @@
|
|
|
226
251
|
"text": "void"
|
|
227
252
|
}
|
|
228
253
|
}
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"kind": "field",
|
|
257
|
+
"name": "renderChevronIcon",
|
|
258
|
+
"privacy": "protected"
|
|
229
259
|
}
|
|
230
260
|
],
|
|
231
261
|
"events": [
|
|
@@ -263,6 +293,12 @@
|
|
|
263
293
|
"fieldName": "disabled"
|
|
264
294
|
}
|
|
265
295
|
],
|
|
296
|
+
"mixins": [
|
|
297
|
+
{
|
|
298
|
+
"name": "SizedMixin",
|
|
299
|
+
"package": "@spectrum-web-components/base"
|
|
300
|
+
}
|
|
301
|
+
],
|
|
266
302
|
"superclass": {
|
|
267
303
|
"name": "Focusable",
|
|
268
304
|
"package": "@spectrum-web-components/shared/src/focusable.js"
|
|
@@ -277,7 +313,7 @@
|
|
|
277
313
|
"name": "AccordionItem",
|
|
278
314
|
"declaration": {
|
|
279
315
|
"name": "AccordionItem",
|
|
280
|
-
"module": "src/AccordionItem.
|
|
316
|
+
"module": "src/AccordionItem.js"
|
|
281
317
|
}
|
|
282
318
|
}
|
|
283
319
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/accordion",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.34.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -66,14 +66,14 @@
|
|
|
66
66
|
"lit-html"
|
|
67
67
|
],
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@spectrum-web-components/base": "^0.
|
|
70
|
-
"@spectrum-web-components/icon": "^0.
|
|
71
|
-
"@spectrum-web-components/icons-ui": "^0.
|
|
72
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
73
|
-
"@spectrum-web-components/shared": "^0.
|
|
69
|
+
"@spectrum-web-components/base": "^0.34.0",
|
|
70
|
+
"@spectrum-web-components/icon": "^0.34.0",
|
|
71
|
+
"@spectrum-web-components/icons-ui": "^0.34.0",
|
|
72
|
+
"@spectrum-web-components/reactive-controllers": "^0.34.0",
|
|
73
|
+
"@spectrum-web-components/shared": "^0.34.0"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
|
-
"@spectrum-css/accordion": "^
|
|
76
|
+
"@spectrum-css/accordion": "^4.0.0"
|
|
77
77
|
},
|
|
78
78
|
"types": "./src/index.d.ts",
|
|
79
79
|
"customElements": "custom-elements.json",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
"./sp-*.js",
|
|
82
82
|
"./**/*.dev.js"
|
|
83
83
|
],
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "f9b3294d67cdd52b2c36897cdc1c20ceaeb019cf"
|
|
85
85
|
}
|
package/src/Accordion.d.ts
CHANGED
|
@@ -1,21 +1,31 @@
|
|
|
1
|
-
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
1
|
+
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js';
|
|
3
3
|
import { AccordionItem } from './AccordionItem.js';
|
|
4
|
+
declare const Accordion_base: typeof SpectrumElement & {
|
|
5
|
+
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
6
|
+
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
7
|
+
};
|
|
4
8
|
/**
|
|
5
9
|
* @element sp-accordion
|
|
6
10
|
* @slot - The sp-accordion-item children to display.
|
|
7
11
|
*/
|
|
8
|
-
export declare class Accordion extends
|
|
12
|
+
export declare class Accordion extends Accordion_base {
|
|
9
13
|
static get styles(): CSSResultArray;
|
|
10
14
|
/**
|
|
11
15
|
* Allows multiple accordion items to be opened at the same time
|
|
12
16
|
*/
|
|
13
17
|
allowMultiple: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Sets the spacing between the content to borders of an accordion item
|
|
20
|
+
*/
|
|
21
|
+
density?: 'compact' | 'spacious';
|
|
14
22
|
private defaultNodes;
|
|
15
23
|
private get items();
|
|
16
24
|
focusGroupController: FocusGroupController<AccordionItem>;
|
|
17
25
|
focus(): void;
|
|
18
26
|
private onToggle;
|
|
19
27
|
private handleSlotchange;
|
|
28
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
20
29
|
protected render(): TemplateResult;
|
|
21
30
|
}
|
|
31
|
+
export {};
|
package/src/Accordion.dev.js
CHANGED
|
@@ -12,6 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
12
12
|
};
|
|
13
13
|
import {
|
|
14
14
|
html,
|
|
15
|
+
SizedMixin,
|
|
15
16
|
SpectrumElement
|
|
16
17
|
} from "@spectrum-web-components/base";
|
|
17
18
|
import {
|
|
@@ -20,7 +21,9 @@ import {
|
|
|
20
21
|
} from "@spectrum-web-components/base/src/decorators.js";
|
|
21
22
|
import { FocusGroupController } from "@spectrum-web-components/reactive-controllers/src/FocusGroup.js";
|
|
22
23
|
import styles from "./accordion.css.js";
|
|
23
|
-
export class Accordion extends SpectrumElement {
|
|
24
|
+
export class Accordion extends SizedMixin(SpectrumElement, {
|
|
25
|
+
noDefaultSize: true
|
|
26
|
+
}) {
|
|
24
27
|
constructor() {
|
|
25
28
|
super(...arguments);
|
|
26
29
|
this.allowMultiple = false;
|
|
@@ -59,6 +62,17 @@ export class Accordion extends SpectrumElement {
|
|
|
59
62
|
}
|
|
60
63
|
handleSlotchange() {
|
|
61
64
|
this.focusGroupController.clearElementCache();
|
|
65
|
+
this.items.forEach((item) => {
|
|
66
|
+
item.size = this.size;
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
updated(changed) {
|
|
70
|
+
super.updated(changed);
|
|
71
|
+
if (changed.has("size") && (!!changed.get("size") || this.size !== "m")) {
|
|
72
|
+
this.items.forEach((item) => {
|
|
73
|
+
item.size = this.size;
|
|
74
|
+
});
|
|
75
|
+
}
|
|
62
76
|
}
|
|
63
77
|
render() {
|
|
64
78
|
return html`
|
|
@@ -72,6 +86,9 @@ export class Accordion extends SpectrumElement {
|
|
|
72
86
|
__decorateClass([
|
|
73
87
|
property({ type: Boolean, reflect: true, attribute: "allow-multiple" })
|
|
74
88
|
], Accordion.prototype, "allowMultiple", 2);
|
|
89
|
+
__decorateClass([
|
|
90
|
+
property({ type: String, reflect: true })
|
|
91
|
+
], Accordion.prototype, "density", 2);
|
|
75
92
|
__decorateClass([
|
|
76
93
|
queryAssignedNodes()
|
|
77
94
|
], Accordion.prototype, "defaultNodes", 2);
|
package/src/Accordion.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Accordion.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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js';\n\nimport { AccordionItem } from './AccordionItem.dev.js'\n\nimport styles from './accordion.css.js';\n\n/**\n * @element sp-accordion\n * @slot - The sp-accordion-item children to display.\n */\nexport class Accordion extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Allows multiple accordion items to be opened at the same time\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })\n public allowMultiple = false;\n\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<AccordionItem>;\n\n private get items(): AccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== 'undefined'\n ) as AccordionItem[];\n }\n\n focusGroupController = new FocusGroupController<AccordionItem>(this, {\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n });\n\n public override focus(): void {\n this.focusGroupController.focus();\n }\n\n private async onToggle(event: Event): Promise<void> {\n const target = event.target as AccordionItem;\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n await 0;\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as AccordionItem[];\n /* c8 ignore next 3 */\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach((item) => {\n if (item !== target) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private handleSlotchange(): void {\n this.focusGroupController.clearElementCache();\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @slotchange=${this.handleSlotchange}\n @sp-accordion-item-toggle=${this.onToggle}\n ></slot>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,4BAA4B;AAIrC,OAAO,YAAY;AAMZ,aAAM,kBAAkB,
|
|
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 SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js';\n\nimport { AccordionItem } from './AccordionItem.dev.js'\n\nimport styles from './accordion.css.js';\n\n/**\n * @element sp-accordion\n * @slot - The sp-accordion-item children to display.\n */\nexport class Accordion extends SizedMixin(SpectrumElement, {\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Allows multiple accordion items to be opened at the same time\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })\n public allowMultiple = false;\n\n /**\n * Sets the spacing between the content to borders of an accordion item\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\n\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<AccordionItem>;\n\n private get items(): AccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== 'undefined'\n ) as AccordionItem[];\n }\n\n focusGroupController = new FocusGroupController<AccordionItem>(this, {\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n });\n\n public override focus(): void {\n this.focusGroupController.focus();\n }\n\n private async onToggle(event: Event): Promise<void> {\n const target = event.target as AccordionItem;\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n await 0;\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as AccordionItem[];\n /* c8 ignore next 3 */\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach((item) => {\n if (item !== target) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private handleSlotchange(): void {\n this.focusGroupController.clearElementCache();\n this.items.forEach((item) => {\n item.size = this.size;\n });\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (\n changed.has('size') &&\n (!!changed.get('size') || this.size !== 'm')\n ) {\n this.items.forEach((item) => {\n item.size = this.size;\n });\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @slotchange=${this.handleSlotchange}\n @sp-accordion-item-toggle=${this.onToggle}\n ></slot>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,4BAA4B;AAIrC,OAAO,YAAY;AAMZ,aAAM,kBAAkB,WAAW,iBAAiB;AAAA,EACvD,eAAe;AACnB,CAAC,EAAE;AAAA,EAFI;AAAA;AAWH,SAAO,gBAAgB;AAiBvB,gCAAuB,IAAI,qBAAoC,MAAM;AAAA,MACjE,WAAW;AAAA,MACX,UAAU,MAAM,KAAK;AAAA,MACrB,oBAAoB,CAAC,OAAsB,CAAC,GAAG;AAAA,IACnD,CAAC;AAAA;AAAA,EA7BD,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAiBA,IAAY,QAAyB;AACjC,WAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,EAAE;AAAA,MAClC,CAAC,SAAsB,OAAO,KAAK,YAAY;AAAA,IACnD;AAAA,EACJ;AAAA,EAQgB,QAAc;AAC1B,SAAK,qBAAqB,MAAM;AAAA,EACpC;AAAA,EAEA,MAAc,SAAS,OAA6B;AAChD,UAAM,SAAS,MAAM;AAGrB,UAAM;AACN,QAAI,KAAK,iBAAiB,MAAM,kBAAkB;AAE9C;AAAA,IACJ;AACA,UAAM,QAAQ,CAAC,GAAG,KAAK,KAAK;AAE5B,QAAI,SAAS,CAAC,MAAM,QAAQ;AAExB;AAAA,IACJ;AACA,UAAM,QAAQ,CAAC,SAAS;AACpB,UAAI,SAAS,QAAQ;AAEjB,aAAK,OAAO;AAAA,MAChB;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAEQ,mBAAyB;AAC7B,SAAK,qBAAqB,kBAAkB;AAC5C,SAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,WAAK,OAAO,KAAK;AAAA,IACrB,CAAC;AAAA,EACL;AAAA,EAEmB,QAAQ,SAAqC;AAC5D,UAAM,QAAQ,OAAO;AACrB,QACI,QAAQ,IAAI,MAAM,MACjB,CAAC,CAAC,QAAQ,IAAI,MAAM,KAAK,KAAK,SAAS,MAC1C;AACE,WAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,aAAK,OAAO,KAAK;AAAA,MACrB,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,8BAEe,KAAK;AAAA,4CACS,KAAK;AAAA;AAAA;AAAA,EAG7C;AACJ;AA7EW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAV9D,UAWF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhBhC,UAiBF;AAGC;AAAA,EADP,mBAAmB;AAAA,GAnBX,UAoBD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Accordion.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(l,i,e,o)=>{for(var t=o>1?void 0:o?u(i,e):i,r=l.length-1,a;r>=0;r--)(a=l[r])&&(t=(o?a(i,e,t):a(t))||t);return o&&t&&n(i,e,t),t};import{html as p,SizedMixin as d,SpectrumElement as m}from"@spectrum-web-components/base";import{property as c,queryAssignedNodes as f}from"@spectrum-web-components/base/src/decorators.js";import{FocusGroupController as h}from"@spectrum-web-components/reactive-controllers/src/FocusGroup.js";import g from"./accordion.css.js";export class Accordion extends d(m,{noDefaultSize:!0}){constructor(){super(...arguments);this.allowMultiple=!1;this.focusGroupController=new h(this,{direction:"vertical",elements:()=>this.items,isFocusableElement:e=>!e.disabled})}static get styles(){return[g]}get items(){return[...this.defaultNodes||[]].filter(e=>typeof e.tagName!="undefined")}focus(){this.focusGroupController.focus()}async onToggle(e){const o=e.target;if(await 0,this.allowMultiple||e.defaultPrevented)return;const t=[...this.items];t&&!t.length||t.forEach(r=>{r!==o&&(r.open=!1)})}handleSlotchange(){this.focusGroupController.clearElementCache(),this.items.forEach(e=>{e.size=this.size})}updated(e){super.updated(e),e.has("size")&&(e.get("size")||this.size!=="m")&&this.items.forEach(o=>{o.size=this.size})}render(){return p`
|
|
2
2
|
<slot
|
|
3
3
|
@slotchange=${this.handleSlotchange}
|
|
4
4
|
@sp-accordion-item-toggle=${this.onToggle}
|
|
5
5
|
></slot>
|
|
6
|
-
`}}
|
|
6
|
+
`}}s([c({type:Boolean,reflect:!0,attribute:"allow-multiple"})],Accordion.prototype,"allowMultiple",2),s([c({type:String,reflect:!0})],Accordion.prototype,"density",2),s([f()],Accordion.prototype,"defaultNodes",2);
|
|
7
7
|
//# sourceMappingURL=Accordion.js.map
|
package/src/Accordion.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Accordion.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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js';\n\nimport { AccordionItem } from './AccordionItem.js';\n\nimport styles from './accordion.css.js';\n\n/**\n * @element sp-accordion\n * @slot - The sp-accordion-item children to display.\n */\nexport class Accordion extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Allows multiple accordion items to be opened at the same time\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })\n public allowMultiple = false;\n\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<AccordionItem>;\n\n private get items(): AccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== 'undefined'\n ) as AccordionItem[];\n }\n\n focusGroupController = new FocusGroupController<AccordionItem>(this, {\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n });\n\n public override focus(): void {\n this.focusGroupController.focus();\n }\n\n private async onToggle(event: Event): Promise<void> {\n const target = event.target as AccordionItem;\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n await 0;\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as AccordionItem[];\n /* c8 ignore next 3 */\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach((item) => {\n if (item !== target) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private handleSlotchange(): void {\n this.focusGroupController.clearElementCache();\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @slotchange=${this.handleSlotchange}\n @sp-accordion-item-toggle=${this.onToggle}\n ></slot>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,sBAAAC,MACG,kDACP,OAAS,wBAAAC,MAA4B,kEAIrC,OAAOC,MAAY,qBAMZ,aAAM,
|
|
6
|
-
"names": ["html", "SpectrumElement", "property", "queryAssignedNodes", "FocusGroupController", "styles", "el", "node", "event", "target", "items", "item", "__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 PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js';\n\nimport { AccordionItem } from './AccordionItem.js';\n\nimport styles from './accordion.css.js';\n\n/**\n * @element sp-accordion\n * @slot - The sp-accordion-item children to display.\n */\nexport class Accordion extends SizedMixin(SpectrumElement, {\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Allows multiple accordion items to be opened at the same time\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })\n public allowMultiple = false;\n\n /**\n * Sets the spacing between the content to borders of an accordion item\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\n\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<AccordionItem>;\n\n private get items(): AccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== 'undefined'\n ) as AccordionItem[];\n }\n\n focusGroupController = new FocusGroupController<AccordionItem>(this, {\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n });\n\n public override focus(): void {\n this.focusGroupController.focus();\n }\n\n private async onToggle(event: Event): Promise<void> {\n const target = event.target as AccordionItem;\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n await 0;\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as AccordionItem[];\n /* c8 ignore next 3 */\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach((item) => {\n if (item !== target) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private handleSlotchange(): void {\n this.focusGroupController.clearElementCache();\n this.items.forEach((item) => {\n item.size = this.size;\n });\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (\n changed.has('size') &&\n (!!changed.get('size') || this.size !== 'm')\n ) {\n this.items.forEach((item) => {\n item.size = this.size;\n });\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @slotchange=${this.handleSlotchange}\n @sp-accordion-item-toggle=${this.onToggle}\n ></slot>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,sBAAAC,MACG,kDACP,OAAS,wBAAAC,MAA4B,kEAIrC,OAAOC,MAAY,qBAMZ,aAAM,kBAAkBL,EAAWC,EAAiB,CACvD,cAAe,EACnB,CAAC,CAAE,CAFI,kCAWH,KAAO,cAAgB,GAiBvB,0BAAuB,IAAIG,EAAoC,KAAM,CACjE,UAAW,WACX,SAAU,IAAM,KAAK,MACrB,mBAAqBE,GAAsB,CAACA,EAAG,QACnD,CAAC,EA7BD,WAA2B,QAAyB,CAChD,MAAO,CAACD,CAAM,CAClB,CAiBA,IAAY,OAAyB,CACjC,MAAO,CAAC,GAAI,KAAK,cAAgB,CAAC,CAAE,EAAE,OACjCE,GAAsB,OAAOA,EAAK,SAAY,WACnD,CACJ,CAQgB,OAAc,CAC1B,KAAK,qBAAqB,MAAM,CACpC,CAEA,MAAc,SAASC,EAA6B,CAChD,MAAMC,EAASD,EAAM,OAIrB,GADA,KAAM,GACF,KAAK,eAAiBA,EAAM,iBAE5B,OAEJ,MAAME,EAAQ,CAAC,GAAG,KAAK,KAAK,EAExBA,GAAS,CAACA,EAAM,QAIpBA,EAAM,QAASC,GAAS,CAChBA,IAASF,IAETE,EAAK,KAAO,GAEpB,CAAC,CACL,CAEQ,kBAAyB,CAC7B,KAAK,qBAAqB,kBAAkB,EAC5C,KAAK,MAAM,QAASA,GAAS,CACzBA,EAAK,KAAO,KAAK,IACrB,CAAC,CACL,CAEmB,QAAQC,EAAqC,CAC5D,MAAM,QAAQA,CAAO,EAEjBA,EAAQ,IAAI,MAAM,IACfA,EAAQ,IAAI,MAAM,GAAK,KAAK,OAAS,MAExC,KAAK,MAAM,QAASD,GAAS,CACzBA,EAAK,KAAO,KAAK,IACrB,CAAC,CAET,CAEmB,QAAyB,CACxC,OAAOZ;AAAA;AAAA,8BAEe,KAAK;AAAA,4CACS,KAAK;AAAA;AAAA,SAG7C,CACJ,CA7EWc,EAAA,CADNX,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,gBAAiB,CAAC,GAV9D,UAWF,6BAMAW,EAAA,CADNX,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAhBhC,UAiBF,uBAGCW,EAAA,CADPV,EAAmB,GAnBX,UAoBD",
|
|
6
|
+
"names": ["html", "SizedMixin", "SpectrumElement", "property", "queryAssignedNodes", "FocusGroupController", "styles", "el", "node", "event", "target", "items", "item", "changed", "__decorateClass"]
|
|
7
7
|
}
|
package/src/AccordionItem.d.ts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
|
|
3
3
|
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
|
|
4
|
+
declare const AccordionItem_base: typeof Focusable & {
|
|
5
|
+
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
6
|
+
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
7
|
+
};
|
|
4
8
|
/**
|
|
5
9
|
* @element sp-accordion-item
|
|
6
10
|
* @slot - The content of the item that is hidden when the item is not open
|
|
7
11
|
* @fires sp-accordion-item-toggle - Announce that an accordion item has been toggled while allowing the event to be cancelled.
|
|
8
12
|
*/
|
|
9
|
-
export declare class AccordionItem extends
|
|
13
|
+
export declare class AccordionItem extends AccordionItem_base {
|
|
10
14
|
static get styles(): CSSResultArray;
|
|
11
15
|
open: boolean;
|
|
12
16
|
label: string;
|
|
@@ -14,6 +18,8 @@ export declare class AccordionItem extends Focusable {
|
|
|
14
18
|
get focusElement(): HTMLElement;
|
|
15
19
|
private onClick;
|
|
16
20
|
private toggle;
|
|
21
|
+
protected renderChevronIcon: () => TemplateResult;
|
|
17
22
|
protected render(): TemplateResult;
|
|
18
23
|
protected updated(changes: PropertyValues): void;
|
|
19
24
|
}
|
|
25
|
+
export {};
|