@vaadin/details 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 +13 -9
- package/src/collapsible-mixin.js +9 -0
- package/src/vaadin-details-base-mixin.d.ts +31 -0
- package/src/vaadin-details-base-mixin.js +105 -0
- package/src/vaadin-details-summary.js +3 -1
- package/src/vaadin-details.d.ts +2 -12
- package/src/vaadin-details.js +6 -98
- package/theme/lumo/vaadin-details-summary.js +2 -0
- package/theme/lumo/vaadin-details.js +1 -1
- package/theme/material/vaadin-details-summary.js +2 -0
- package/theme/material/vaadin-details.js +1 -1
- package/vaadin-details-summary.d.ts +1 -0
- package/vaadin-details-summary.js +2 -0
- package/web-types.json +189 -0
- package/web-types.lit.json +83 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/details",
|
|
3
|
-
"version": "24.2.0
|
|
3
|
+
"version": "24.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,6 +21,10 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
+
"!src/vaadin-lit-details-summary.d.ts",
|
|
25
|
+
"!src/vaadin-lit-details-summary.js",
|
|
26
|
+
"!src/vaadin-lit-details.d.ts",
|
|
27
|
+
"!src/vaadin-lit-details.js",
|
|
24
28
|
"theme",
|
|
25
29
|
"vaadin-*.d.ts",
|
|
26
30
|
"vaadin-*.js",
|
|
@@ -37,21 +41,21 @@
|
|
|
37
41
|
"dependencies": {
|
|
38
42
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
43
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/a11y-base": "24.2.0
|
|
41
|
-
"@vaadin/button": "24.2.0
|
|
42
|
-
"@vaadin/component-base": "24.2.0
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.2.0
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0
|
|
44
|
+
"@vaadin/a11y-base": "~24.2.0",
|
|
45
|
+
"@vaadin/button": "~24.2.0",
|
|
46
|
+
"@vaadin/component-base": "~24.2.0",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "~24.2.0",
|
|
48
|
+
"@vaadin/vaadin-material-styles": "~24.2.0",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "~24.2.0"
|
|
46
50
|
},
|
|
47
51
|
"devDependencies": {
|
|
48
52
|
"@esm-bundle/chai": "^4.3.4",
|
|
49
|
-
"@vaadin/testing-helpers": "^0.
|
|
53
|
+
"@vaadin/testing-helpers": "^0.5.0",
|
|
50
54
|
"sinon": "^13.0.2"
|
|
51
55
|
},
|
|
52
56
|
"web-types": [
|
|
53
57
|
"web-types.json",
|
|
54
58
|
"web-types.lit.json"
|
|
55
59
|
],
|
|
56
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "8b9e860d53fc0132d05d3e8701eeded2dca74eba"
|
|
57
61
|
}
|
package/src/collapsible-mixin.js
CHANGED
|
@@ -64,6 +64,15 @@ export const CollapsibleMixin = (superClass) =>
|
|
|
64
64
|
// Only handle click and not keydown, because `vaadin-details-summary` uses `ButtonMixin`
|
|
65
65
|
// that already covers this logic, and `vaadin-accordion-heading` uses native `<button>`.
|
|
66
66
|
this.addEventListener('click', ({ target }) => {
|
|
67
|
+
if (this.disabled) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Do not change opened on link click
|
|
72
|
+
if (target.localName === 'a') {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
|
|
67
76
|
const summary = this.focusElement;
|
|
68
77
|
|
|
69
78
|
if (summary && (target === summary || summary.contains(target))) {
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2019 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
|
+
import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
9
|
+
import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
10
|
+
import type { TabindexMixinClass } from '@vaadin/a11y-base/src/tabindex-mixin.js';
|
|
11
|
+
import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
12
|
+
import type { CollapsibleMixinClass } from './collapsible-mixin.js';
|
|
13
|
+
|
|
14
|
+
export declare function DetailsBaseMixin<T extends Constructor<HTMLElement>>(
|
|
15
|
+
base: T,
|
|
16
|
+
): Constructor<CollapsibleMixinClass> &
|
|
17
|
+
Constructor<DelegateFocusMixinClass> &
|
|
18
|
+
Constructor<DelegateStateMixinClass> &
|
|
19
|
+
Constructor<DetailsBaseMixinClass> &
|
|
20
|
+
Constructor<DisabledMixinClass> &
|
|
21
|
+
Constructor<FocusMixinClass> &
|
|
22
|
+
Constructor<TabindexMixinClass> &
|
|
23
|
+
T;
|
|
24
|
+
|
|
25
|
+
export declare class DetailsBaseMixinClass {
|
|
26
|
+
/**
|
|
27
|
+
* A text that is displayed in the summary, if no
|
|
28
|
+
* element is assigned to the `summary` slot.
|
|
29
|
+
*/
|
|
30
|
+
summary: string | null | undefined;
|
|
31
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
7
|
+
import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
8
|
+
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
9
|
+
import { CollapsibleMixin } from './collapsible-mixin.js';
|
|
10
|
+
import { SummaryController } from './summary-controller.js';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* @polymerMixin
|
|
14
|
+
* @mixes DelegateFocusMixin
|
|
15
|
+
* @mixes DelegateStateMixin
|
|
16
|
+
* @mixes CollapsibleMixin
|
|
17
|
+
*/
|
|
18
|
+
export const DetailsBaseMixin = (superClass) =>
|
|
19
|
+
class DetailsBaseMixin extends CollapsibleMixin(DelegateFocusMixin(DelegateStateMixin(superClass))) {
|
|
20
|
+
static get properties() {
|
|
21
|
+
return {
|
|
22
|
+
/**
|
|
23
|
+
* A text that is displayed in the summary, if no
|
|
24
|
+
* element is assigned to the `summary` slot.
|
|
25
|
+
*/
|
|
26
|
+
summary: {
|
|
27
|
+
type: String,
|
|
28
|
+
observer: '_summaryChanged',
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
static get observers() {
|
|
34
|
+
return ['__updateAriaControls(focusElement, _contentElements)', '__updateAriaExpanded(focusElement, opened)'];
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
static get delegateAttrs() {
|
|
38
|
+
return ['theme'];
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
static get delegateProps() {
|
|
42
|
+
return ['disabled', 'opened'];
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
constructor() {
|
|
46
|
+
super();
|
|
47
|
+
|
|
48
|
+
this._summaryController = new SummaryController(this, 'vaadin-details-summary');
|
|
49
|
+
this._summaryController.addEventListener('slot-content-changed', (event) => {
|
|
50
|
+
const { node } = event.target;
|
|
51
|
+
|
|
52
|
+
this._setFocusElement(node);
|
|
53
|
+
this.stateTarget = node;
|
|
54
|
+
|
|
55
|
+
this._tooltipController.setTarget(node);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
this._tooltipController = new TooltipController(this);
|
|
59
|
+
this._tooltipController.setPosition('bottom-start');
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/** @protected */
|
|
63
|
+
ready() {
|
|
64
|
+
super.ready();
|
|
65
|
+
|
|
66
|
+
this.addController(this._summaryController);
|
|
67
|
+
this.addController(this._tooltipController);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Override method inherited from `DisabledMixin`
|
|
72
|
+
* to not set `aria-disabled` on the host element.
|
|
73
|
+
*
|
|
74
|
+
* @protected
|
|
75
|
+
* @override
|
|
76
|
+
*/
|
|
77
|
+
_setAriaDisabled() {
|
|
78
|
+
// The `aria-disabled` is set on the details summary.
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/** @private */
|
|
82
|
+
_summaryChanged(summary) {
|
|
83
|
+
this._summaryController.setSummary(summary);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/** @private */
|
|
87
|
+
__updateAriaControls(summary, contentElements) {
|
|
88
|
+
if (summary && contentElements) {
|
|
89
|
+
const node = contentElements[0];
|
|
90
|
+
|
|
91
|
+
if (node && node.id) {
|
|
92
|
+
summary.setAttribute('aria-controls', node.id);
|
|
93
|
+
} else {
|
|
94
|
+
summary.removeAttribute('aria-controls');
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/** @private */
|
|
100
|
+
__updateAriaExpanded(focusElement, opened) {
|
|
101
|
+
if (focusElement) {
|
|
102
|
+
focusElement.setAttribute('aria-expanded', opened ? 'true' : 'false');
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
};
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
7
|
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-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
|
|
|
@@ -32,6 +33,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
32
33
|
*
|
|
33
34
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
34
35
|
*
|
|
36
|
+
* @customElement
|
|
35
37
|
* @extends HTMLElement
|
|
36
38
|
* @mixes ButtonMixin
|
|
37
39
|
* @mixes DirMixin
|
|
@@ -80,4 +82,4 @@ class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))
|
|
|
80
82
|
}
|
|
81
83
|
}
|
|
82
84
|
|
|
83
|
-
|
|
85
|
+
defineCustomElement(DetailsSummary);
|
package/src/vaadin-details.d.ts
CHANGED
|
@@ -3,12 +3,10 @@
|
|
|
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 { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
7
6
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
8
|
-
import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
9
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
10
8
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
|
-
import {
|
|
9
|
+
import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
|
|
12
10
|
|
|
13
11
|
/**
|
|
14
12
|
* Fired when the `opened` property changes.
|
|
@@ -55,15 +53,7 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
|
|
|
55
53
|
*
|
|
56
54
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
57
55
|
*/
|
|
58
|
-
declare class Details extends
|
|
59
|
-
DelegateStateMixin(DelegateFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))),
|
|
60
|
-
) {
|
|
61
|
-
/**
|
|
62
|
-
* A text that is displayed in the summary, if no
|
|
63
|
-
* element is assigned to the `summary` slot.
|
|
64
|
-
*/
|
|
65
|
-
summary: string | null | undefined;
|
|
66
|
-
|
|
56
|
+
declare class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
|
|
67
57
|
addEventListener<K extends keyof DetailsEventMap>(
|
|
68
58
|
type: K,
|
|
69
59
|
listener: (this: Details, ev: DetailsEventMap[K]) => void,
|
package/src/vaadin-details.js
CHANGED
|
@@ -5,14 +5,11 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import './vaadin-details-summary.js';
|
|
7
7
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
8
|
-
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
9
8
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
10
|
-
import {
|
|
9
|
+
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
11
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
|
-
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
13
11
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
|
-
import {
|
|
15
|
-
import { SummaryController } from './summary-controller.js';
|
|
12
|
+
import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
|
|
16
13
|
|
|
17
14
|
/**
|
|
18
15
|
* `<vaadin-details>` is a Web Component which the creates an
|
|
@@ -48,17 +45,14 @@ import { SummaryController } from './summary-controller.js';
|
|
|
48
45
|
*
|
|
49
46
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
50
47
|
*
|
|
48
|
+
* @customElement
|
|
51
49
|
* @extends HTMLElement
|
|
52
|
-
* @mixes CollapsibleMixin
|
|
53
50
|
* @mixes ControllerMixin
|
|
54
|
-
* @mixes
|
|
55
|
-
* @mixes DelegateStateMixin
|
|
51
|
+
* @mixes DetailsBaseMixin
|
|
56
52
|
* @mixes ElementMixin
|
|
57
53
|
* @mixes ThemableMixin
|
|
58
54
|
*/
|
|
59
|
-
class Details extends
|
|
60
|
-
DelegateStateMixin(DelegateFocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))),
|
|
61
|
-
) {
|
|
55
|
+
class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
|
|
62
56
|
static get template() {
|
|
63
57
|
return html`
|
|
64
58
|
<style>
|
|
@@ -92,94 +86,8 @@ class Details extends CollapsibleMixin(
|
|
|
92
86
|
static get is() {
|
|
93
87
|
return 'vaadin-details';
|
|
94
88
|
}
|
|
95
|
-
|
|
96
|
-
static get properties() {
|
|
97
|
-
return {
|
|
98
|
-
/**
|
|
99
|
-
* A text that is displayed in the summary, if no
|
|
100
|
-
* element is assigned to the `summary` slot.
|
|
101
|
-
*/
|
|
102
|
-
summary: {
|
|
103
|
-
type: String,
|
|
104
|
-
observer: '_summaryChanged',
|
|
105
|
-
},
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
static get observers() {
|
|
110
|
-
return ['__updateAriaControls(focusElement, _contentElements)', '__updateAriaExpanded(focusElement, opened)'];
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
static get delegateAttrs() {
|
|
114
|
-
return ['theme'];
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
static get delegateProps() {
|
|
118
|
-
return ['disabled', 'opened'];
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
constructor() {
|
|
122
|
-
super();
|
|
123
|
-
|
|
124
|
-
this._summaryController = new SummaryController(this, 'vaadin-details-summary');
|
|
125
|
-
this._summaryController.addEventListener('slot-content-changed', (event) => {
|
|
126
|
-
const { node } = event.target;
|
|
127
|
-
|
|
128
|
-
this._setFocusElement(node);
|
|
129
|
-
this.stateTarget = node;
|
|
130
|
-
|
|
131
|
-
this._tooltipController.setTarget(node);
|
|
132
|
-
});
|
|
133
|
-
|
|
134
|
-
this._tooltipController = new TooltipController(this);
|
|
135
|
-
this._tooltipController.setPosition('bottom-start');
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/** @protected */
|
|
139
|
-
ready() {
|
|
140
|
-
super.ready();
|
|
141
|
-
|
|
142
|
-
this.addController(this._summaryController);
|
|
143
|
-
this.addController(this._tooltipController);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* Override method inherited from `DisabledMixin`
|
|
148
|
-
* to not set `aria-disabled` on the host element.
|
|
149
|
-
*
|
|
150
|
-
* @protected
|
|
151
|
-
* @override
|
|
152
|
-
*/
|
|
153
|
-
_setAriaDisabled() {
|
|
154
|
-
// The `aria-disabled` is set on the details summary.
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
/** @private */
|
|
158
|
-
_summaryChanged(summary) {
|
|
159
|
-
this._summaryController.setSummary(summary);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
/** @private */
|
|
163
|
-
__updateAriaControls(summary, contentElements) {
|
|
164
|
-
if (summary && contentElements) {
|
|
165
|
-
const node = contentElements[0];
|
|
166
|
-
|
|
167
|
-
if (node && node.id) {
|
|
168
|
-
summary.setAttribute('aria-controls', node.id);
|
|
169
|
-
} else {
|
|
170
|
-
summary.removeAttribute('aria-controls');
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
/** @private */
|
|
176
|
-
__updateAriaExpanded(focusElement, opened) {
|
|
177
|
-
if (focusElement) {
|
|
178
|
-
focusElement.setAttribute('aria-expanded', opened ? 'true' : 'false');
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
89
|
}
|
|
182
90
|
|
|
183
|
-
|
|
91
|
+
defineCustomElement(Details);
|
|
184
92
|
|
|
185
93
|
export { Details };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/vaadin-details-summary.js';
|
package/web-types.json
ADDED
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/details",
|
|
4
|
+
"version": "24.2.0",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-details-summary",
|
|
11
|
+
"description": "The details summary element.\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 element is expanded and related collapsible content is 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.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "disabled",
|
|
15
|
+
"description": "If true, the user cannot interact with this element.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "opened",
|
|
26
|
+
"description": "When true, the element is opened.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"boolean",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "theme",
|
|
37
|
+
"description": "The theme variants to apply to the component.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"string",
|
|
41
|
+
"null",
|
|
42
|
+
"undefined"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
],
|
|
47
|
+
"js": {
|
|
48
|
+
"properties": [
|
|
49
|
+
{
|
|
50
|
+
"name": "disabled",
|
|
51
|
+
"description": "If true, the user cannot interact with this element.",
|
|
52
|
+
"value": {
|
|
53
|
+
"type": [
|
|
54
|
+
"boolean",
|
|
55
|
+
"null",
|
|
56
|
+
"undefined"
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "opened",
|
|
62
|
+
"description": "When true, the element is opened.",
|
|
63
|
+
"value": {
|
|
64
|
+
"type": [
|
|
65
|
+
"boolean",
|
|
66
|
+
"null",
|
|
67
|
+
"undefined"
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
"events": []
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "vaadin-details",
|
|
77
|
+
"description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n```\n<vaadin-details>\n <vaadin-details-summary slot=\"summary\">Expandable Details</vaadin-details-summary>\n <div>\n Toggle using mouse, Enter and Space keys.\n </div>\n</vaadin-details>\n```\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 details 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.",
|
|
78
|
+
"attributes": [
|
|
79
|
+
{
|
|
80
|
+
"name": "disabled",
|
|
81
|
+
"description": "If true, the user cannot interact with this element.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"boolean",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "autofocus",
|
|
92
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
93
|
+
"value": {
|
|
94
|
+
"type": [
|
|
95
|
+
"boolean",
|
|
96
|
+
"null",
|
|
97
|
+
"undefined"
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "opened",
|
|
103
|
+
"description": "If true, the collapsible content is visible.",
|
|
104
|
+
"value": {
|
|
105
|
+
"type": [
|
|
106
|
+
"boolean"
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"name": "summary",
|
|
112
|
+
"description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
|
|
113
|
+
"value": {
|
|
114
|
+
"type": [
|
|
115
|
+
"string",
|
|
116
|
+
"null",
|
|
117
|
+
"undefined"
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "theme",
|
|
123
|
+
"description": "The theme variants to apply to the component.",
|
|
124
|
+
"value": {
|
|
125
|
+
"type": [
|
|
126
|
+
"string",
|
|
127
|
+
"null",
|
|
128
|
+
"undefined"
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"js": {
|
|
134
|
+
"properties": [
|
|
135
|
+
{
|
|
136
|
+
"name": "disabled",
|
|
137
|
+
"description": "If true, the user cannot interact with this element.",
|
|
138
|
+
"value": {
|
|
139
|
+
"type": [
|
|
140
|
+
"boolean",
|
|
141
|
+
"null",
|
|
142
|
+
"undefined"
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"name": "autofocus",
|
|
148
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
149
|
+
"value": {
|
|
150
|
+
"type": [
|
|
151
|
+
"boolean",
|
|
152
|
+
"null",
|
|
153
|
+
"undefined"
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"name": "opened",
|
|
159
|
+
"description": "If true, the collapsible content is visible.",
|
|
160
|
+
"value": {
|
|
161
|
+
"type": [
|
|
162
|
+
"boolean"
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"name": "summary",
|
|
168
|
+
"description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
|
|
169
|
+
"value": {
|
|
170
|
+
"type": [
|
|
171
|
+
"string",
|
|
172
|
+
"null",
|
|
173
|
+
"undefined"
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
],
|
|
178
|
+
"events": [
|
|
179
|
+
{
|
|
180
|
+
"name": "opened-changed",
|
|
181
|
+
"description": "Fired when the `opened` property changes."
|
|
182
|
+
}
|
|
183
|
+
]
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/details",
|
|
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-details-summary",
|
|
19
|
+
"description": "The details summary element.\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 element is expanded and related collapsible content is 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.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?disabled",
|
|
24
|
+
"description": "If true, the user cannot interact with this element.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?opened",
|
|
31
|
+
"description": "When true, the element is opened.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "vaadin-details",
|
|
40
|
+
"description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n```\n<vaadin-details>\n <vaadin-details-summary slot=\"summary\">Expandable Details</vaadin-details-summary>\n <div>\n Toggle using mouse, Enter and Space keys.\n </div>\n</vaadin-details>\n```\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 details 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.",
|
|
41
|
+
"extension": true,
|
|
42
|
+
"attributes": [
|
|
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": "?opened",
|
|
59
|
+
"description": "If true, the collapsible content is visible.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".summary",
|
|
66
|
+
"description": "A text that is displayed in the summary, if no\nelement is assigned to the `summary` slot.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "@opened-changed",
|
|
73
|
+
"description": "Fired when the `opened` property changes.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|