@vaadin/accordion 24.2.0-dev.f254716fe → 24.2.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/package.json +9 -9
- package/src/vaadin-accordion-heading.js +3 -1
- package/src/vaadin-accordion-panel.js +3 -1
- package/src/vaadin-accordion.js +6 -3
- package/theme/lumo/vaadin-accordion-heading.js +2 -0
- package/theme/lumo/vaadin-accordion-panel.js +1 -1
- package/theme/material/vaadin-accordion-heading.js +2 -0
- package/theme/material/vaadin-accordion-panel.js +1 -1
- package/vaadin-accordion-heading.d.ts +1 -0
- package/vaadin-accordion-heading.js +2 -0
- package/web-types.json +216 -0
- package/web-types.lit.json +104 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/accordion",
|
|
3
|
-
"version": "24.2.0
|
|
3
|
+
"version": "24.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,21 +36,21 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.2.0
|
|
40
|
-
"@vaadin/component-base": "24.2.0
|
|
41
|
-
"@vaadin/details": "24.2.0
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0
|
|
43
|
-
"@vaadin/vaadin-material-styles": "24.2.0
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0
|
|
39
|
+
"@vaadin/a11y-base": "~24.2.0",
|
|
40
|
+
"@vaadin/component-base": "~24.2.0",
|
|
41
|
+
"@vaadin/details": "~24.2.0",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "~24.2.0",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "~24.2.0",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "~24.2.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@esm-bundle/chai": "^4.3.4",
|
|
48
|
-
"@vaadin/testing-helpers": "^0.
|
|
48
|
+
"@vaadin/testing-helpers": "^0.5.0",
|
|
49
49
|
"sinon": "^13.0.2"
|
|
50
50
|
},
|
|
51
51
|
"web-types": [
|
|
52
52
|
"web-types.json",
|
|
53
53
|
"web-types.lit.json"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "8b9e860d53fc0132d05d3e8701eeded2dca74eba"
|
|
56
56
|
}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
7
|
import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
|
|
8
|
+
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
9
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
9
10
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
11
|
|
|
@@ -41,6 +42,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
41
42
|
*
|
|
42
43
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
43
44
|
*
|
|
45
|
+
* @customElement
|
|
44
46
|
* @extends HTMLElement
|
|
45
47
|
* @mixes ActiveMixin
|
|
46
48
|
* @mixes DirMixin
|
|
@@ -129,6 +131,6 @@ class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement
|
|
|
129
131
|
}
|
|
130
132
|
}
|
|
131
133
|
|
|
132
|
-
|
|
134
|
+
defineCustomElement(AccordionHeading);
|
|
133
135
|
|
|
134
136
|
export { AccordionHeading };
|
|
@@ -7,6 +7,7 @@ import './vaadin-accordion-heading.js';
|
|
|
7
7
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
8
8
|
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
9
9
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
10
|
+
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
11
|
import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
11
12
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
12
13
|
import { CollapsibleMixin } from '@vaadin/details/src/collapsible-mixin.js';
|
|
@@ -37,6 +38,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
37
38
|
*
|
|
38
39
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
39
40
|
*
|
|
41
|
+
* @customElement
|
|
40
42
|
* @extends HTMLElement
|
|
41
43
|
* @mixes CollapsibleMixin
|
|
42
44
|
* @mixes ControllerMixin
|
|
@@ -168,6 +170,6 @@ class AccordionPanel extends CollapsibleMixin(
|
|
|
168
170
|
}
|
|
169
171
|
}
|
|
170
172
|
|
|
171
|
-
|
|
173
|
+
defineCustomElement(AccordionPanel);
|
|
172
174
|
|
|
173
175
|
export { AccordionPanel };
|
package/src/vaadin-accordion.js
CHANGED
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
* Copyright (c) 2019 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
|
|
7
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
8
7
|
import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
9
8
|
import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
|
|
9
|
+
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
|
+
import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
|
|
11
12
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
13
|
import { AccordionPanel } from './vaadin-accordion-panel.js';
|
|
13
14
|
|
|
@@ -55,6 +56,7 @@ import { AccordionPanel } from './vaadin-accordion-panel.js';
|
|
|
55
56
|
* @fires {CustomEvent} items-changed - Fired when the `items` property changes.
|
|
56
57
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
57
58
|
*
|
|
59
|
+
* @customElement
|
|
58
60
|
* @extends HTMLElement
|
|
59
61
|
* @mixes ElementMixin
|
|
60
62
|
* @mixes KeyboardDirectionMixin
|
|
@@ -145,7 +147,8 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
|
|
|
145
147
|
ready() {
|
|
146
148
|
super.ready();
|
|
147
149
|
|
|
148
|
-
|
|
150
|
+
const slot = this.shadowRoot.querySelector('slot');
|
|
151
|
+
this._observer = new SlotObserver(slot, (info) => {
|
|
149
152
|
this._setItems(this._filterItems(Array.from(this.children)));
|
|
150
153
|
|
|
151
154
|
this._filterItems(info.addedNodes).forEach((el) => {
|
|
@@ -218,6 +221,6 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
|
|
|
218
221
|
}
|
|
219
222
|
}
|
|
220
223
|
|
|
221
|
-
|
|
224
|
+
defineCustomElement(Accordion);
|
|
222
225
|
|
|
223
226
|
export { Accordion };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-accordion-heading.js';
|
package/web-types.json
ADDED
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/accordion",
|
|
4
|
+
"version": "24.2.0",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-accordion-heading",
|
|
11
|
+
"description": "The accordion heading element.\n\n`vaadin-accordion-heading` is the element for the headings in the accordion.\nAs recommended by the WAI ARIA Best Practices, each heading needs to wrap a\n`<button>`. This element puts that button in the Shadow DOM, as it is more\nconvenient to use and doesn't make styling of the heading more problematic.\n\nThe WAI ARIA Best Practices also recommend setting `aria-level` depending\non what level the headings are. It is hard to determine the level of a heading\nalgorithmically, and setting it is not strictly required to have an accessible\naccordion. To keep things easier to use, this element does not set `aria-level`\nattribute but leaves that to the developer creating an accordion.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n-----------|-------------------\n`toggle` | The icon element\n`content` | The content wrapper\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`active` | Set when the element is pressed down, either with mouse, touch or the keyboard.\n`opened` | Set when the collapsible content is expanded and visible.\n`disabled` | Set when the element is disabled.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "opened",
|
|
15
|
+
"description": "When true, the element is opened.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "theme",
|
|
26
|
+
"description": "The theme variants to apply to the component.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"string",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"js": {
|
|
37
|
+
"properties": [
|
|
38
|
+
{
|
|
39
|
+
"name": "opened",
|
|
40
|
+
"description": "When true, the element is opened.",
|
|
41
|
+
"value": {
|
|
42
|
+
"type": [
|
|
43
|
+
"boolean",
|
|
44
|
+
"null",
|
|
45
|
+
"undefined"
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
],
|
|
50
|
+
"events": []
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "vaadin-accordion-panel",
|
|
55
|
+
"description": "The accordion panel element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n-----------------|----------------\n`content` | The wrapper for the collapsible panel content.\n\nThe following attributes are exposed for styling:\n\nAttribute | Description\n-------------| -----------\n`opened` | Set when the collapsible content is expanded and visible.\n`disabled` | Set when the element is disabled.\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
56
|
+
"attributes": [
|
|
57
|
+
{
|
|
58
|
+
"name": "opened",
|
|
59
|
+
"description": "If true, the collapsible content is visible.",
|
|
60
|
+
"value": {
|
|
61
|
+
"type": [
|
|
62
|
+
"boolean"
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"name": "disabled",
|
|
68
|
+
"description": "If true, the user cannot interact with this element.",
|
|
69
|
+
"value": {
|
|
70
|
+
"type": [
|
|
71
|
+
"boolean",
|
|
72
|
+
"null",
|
|
73
|
+
"undefined"
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"name": "autofocus",
|
|
79
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
80
|
+
"value": {
|
|
81
|
+
"type": [
|
|
82
|
+
"boolean",
|
|
83
|
+
"null",
|
|
84
|
+
"undefined"
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"name": "summary",
|
|
90
|
+
"description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
|
|
91
|
+
"value": {
|
|
92
|
+
"type": [
|
|
93
|
+
"string",
|
|
94
|
+
"null",
|
|
95
|
+
"undefined"
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "theme",
|
|
101
|
+
"description": "The theme variants to apply to the component.",
|
|
102
|
+
"value": {
|
|
103
|
+
"type": [
|
|
104
|
+
"string",
|
|
105
|
+
"null",
|
|
106
|
+
"undefined"
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
],
|
|
111
|
+
"js": {
|
|
112
|
+
"properties": [
|
|
113
|
+
{
|
|
114
|
+
"name": "opened",
|
|
115
|
+
"description": "If true, the collapsible content is visible.",
|
|
116
|
+
"value": {
|
|
117
|
+
"type": [
|
|
118
|
+
"boolean"
|
|
119
|
+
]
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "disabled",
|
|
124
|
+
"description": "If true, the user cannot interact with this element.",
|
|
125
|
+
"value": {
|
|
126
|
+
"type": [
|
|
127
|
+
"boolean",
|
|
128
|
+
"null",
|
|
129
|
+
"undefined"
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"name": "autofocus",
|
|
135
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
136
|
+
"value": {
|
|
137
|
+
"type": [
|
|
138
|
+
"boolean",
|
|
139
|
+
"null",
|
|
140
|
+
"undefined"
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"name": "summary",
|
|
146
|
+
"description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
|
|
147
|
+
"value": {
|
|
148
|
+
"type": [
|
|
149
|
+
"string",
|
|
150
|
+
"null",
|
|
151
|
+
"undefined"
|
|
152
|
+
]
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
],
|
|
156
|
+
"events": [
|
|
157
|
+
{
|
|
158
|
+
"name": "opened-changed",
|
|
159
|
+
"description": "Fired when the `opened` property changes."
|
|
160
|
+
}
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"name": "vaadin-accordion",
|
|
166
|
+
"description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n <div>This panel is opened, so the text is visible by default.</div>\n </vaadin-accordion-panel>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n <div>After opening this panel, the first one becomes closed.</div>\n </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
167
|
+
"attributes": [
|
|
168
|
+
{
|
|
169
|
+
"name": "opened",
|
|
170
|
+
"description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",
|
|
171
|
+
"value": {
|
|
172
|
+
"type": [
|
|
173
|
+
"number"
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"name": "theme",
|
|
179
|
+
"description": "The theme variants to apply to the component.",
|
|
180
|
+
"value": {
|
|
181
|
+
"type": [
|
|
182
|
+
"string",
|
|
183
|
+
"null",
|
|
184
|
+
"undefined"
|
|
185
|
+
]
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
],
|
|
189
|
+
"js": {
|
|
190
|
+
"properties": [
|
|
191
|
+
{
|
|
192
|
+
"name": "opened",
|
|
193
|
+
"description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",
|
|
194
|
+
"value": {
|
|
195
|
+
"type": [
|
|
196
|
+
"number"
|
|
197
|
+
]
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
],
|
|
201
|
+
"events": [
|
|
202
|
+
{
|
|
203
|
+
"name": "opened-changed",
|
|
204
|
+
"description": "Fired when the `opened` property changes."
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"name": "items-changed",
|
|
208
|
+
"description": "Fired when the `items` property changes."
|
|
209
|
+
}
|
|
210
|
+
]
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
]
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/accordion",
|
|
4
|
+
"version": "24.2.0",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-accordion-heading",
|
|
19
|
+
"description": "The accordion heading element.\n\n`vaadin-accordion-heading` is the element for the headings in the accordion.\nAs recommended by the WAI ARIA Best Practices, each heading needs to wrap a\n`<button>`. This element puts that button in the Shadow DOM, as it is more\nconvenient to use and doesn't make styling of the heading more problematic.\n\nThe WAI ARIA Best Practices also recommend setting `aria-level` depending\non what level the headings are. It is hard to determine the level of a heading\nalgorithmically, and setting it is not strictly required to have an accessible\naccordion. To keep things easier to use, this element does not set `aria-level`\nattribute but leaves that to the developer creating an accordion.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n-----------|-------------------\n`toggle` | The icon element\n`content` | The content wrapper\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`active` | Set when the element is pressed down, either with mouse, touch or the keyboard.\n`opened` | Set when the collapsible content is expanded and visible.\n`disabled` | Set when the element is disabled.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?opened",
|
|
24
|
+
"description": "When true, the element is opened.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "vaadin-accordion-panel",
|
|
33
|
+
"description": "The accordion panel element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n-----------------|----------------\n`content` | The wrapper for the collapsible panel content.\n\nThe following attributes are exposed for styling:\n\nAttribute | Description\n-------------| -----------\n`opened` | Set when the collapsible content is expanded and visible.\n`disabled` | Set when the element is disabled.\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
34
|
+
"extension": true,
|
|
35
|
+
"attributes": [
|
|
36
|
+
{
|
|
37
|
+
"name": "?opened",
|
|
38
|
+
"description": "If true, the collapsible content is visible.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?disabled",
|
|
45
|
+
"description": "If true, the user cannot interact with this element.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "?autofocus",
|
|
52
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".summary",
|
|
59
|
+
"description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "@opened-changed",
|
|
66
|
+
"description": "Fired when the `opened` property changes.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"name": "vaadin-accordion",
|
|
75
|
+
"description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n <div>This panel is opened, so the text is visible by default.</div>\n </vaadin-accordion-panel>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n <div>After opening this panel, the first one becomes closed.</div>\n </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
76
|
+
"extension": true,
|
|
77
|
+
"attributes": [
|
|
78
|
+
{
|
|
79
|
+
"name": ".opened",
|
|
80
|
+
"description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": "@opened-changed",
|
|
87
|
+
"description": "Fired when the `opened` property changes.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "@items-changed",
|
|
94
|
+
"description": "Fired when the `items` property changes.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|