@vaadin/dashboard 24.6.0 → 24.6.2
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/dashboard",
|
|
3
|
-
"version": "24.6.
|
|
3
|
+
"version": "24.6.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,21 +37,21 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/button": "~24.6.
|
|
41
|
-
"@vaadin/component-base": "~24.6.
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "~24.6.
|
|
43
|
-
"@vaadin/vaadin-material-styles": "~24.6.
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "~24.6.
|
|
40
|
+
"@vaadin/button": "~24.6.2",
|
|
41
|
+
"@vaadin/component-base": "~24.6.2",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "~24.6.2",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "~24.6.2",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "~24.6.2",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/chai-plugins": "~24.6.
|
|
49
|
-
"@vaadin/testing-helpers": "^1.
|
|
48
|
+
"@vaadin/chai-plugins": "~24.6.2",
|
|
49
|
+
"@vaadin/testing-helpers": "^1.1.0"
|
|
50
50
|
},
|
|
51
51
|
"cvdlName": "vaadin-dashboard",
|
|
52
52
|
"web-types": [
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "ee2ea01a17d888403adb141515a0a3cef82b8b65"
|
|
57
57
|
}
|
|
@@ -173,6 +173,12 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
|
|
|
173
173
|
type: String,
|
|
174
174
|
value: '',
|
|
175
175
|
},
|
|
176
|
+
|
|
177
|
+
/** @private */
|
|
178
|
+
__childCount: {
|
|
179
|
+
type: Number,
|
|
180
|
+
value: 0,
|
|
181
|
+
},
|
|
176
182
|
};
|
|
177
183
|
}
|
|
178
184
|
|
|
@@ -191,7 +197,10 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
|
|
|
191
197
|
</header>
|
|
192
198
|
</div>
|
|
193
199
|
|
|
200
|
+
<!-- Default slot is used by <vaadin-dashboard-layout> -->
|
|
194
201
|
<slot></slot>
|
|
202
|
+
<!-- Named slots are used by <vaadin-dashboard> -->
|
|
203
|
+
${[...Array(this.__childCount)].map((_, index) => html`<slot name="slot-${index}"></slot>`)}
|
|
195
204
|
`;
|
|
196
205
|
}
|
|
197
206
|
|
package/src/vaadin-dashboard.js
CHANGED
|
@@ -195,6 +195,12 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
195
195
|
};
|
|
196
196
|
},
|
|
197
197
|
},
|
|
198
|
+
|
|
199
|
+
/** @private */
|
|
200
|
+
__childCount: {
|
|
201
|
+
type: Number,
|
|
202
|
+
value: 0,
|
|
203
|
+
},
|
|
198
204
|
};
|
|
199
205
|
}
|
|
200
206
|
|
|
@@ -221,11 +227,14 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
221
227
|
|
|
222
228
|
/** @protected */
|
|
223
229
|
render() {
|
|
224
|
-
return html`<div id="grid"
|
|
230
|
+
return html`<div id="grid">
|
|
231
|
+
${[...Array(this.__childCount)].map((_, index) => html`<slot name="slot-${index}"></slot>`)}
|
|
232
|
+
</div>`;
|
|
225
233
|
}
|
|
226
234
|
|
|
227
235
|
/** @private */
|
|
228
236
|
__itemsOrRendererChanged(items, renderer) {
|
|
237
|
+
this.__childCount = items ? items.length : 0;
|
|
229
238
|
this.__renderItemWrappers(items || []);
|
|
230
239
|
|
|
231
240
|
this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
|
|
@@ -257,38 +266,25 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
257
266
|
__renderItemWrappers(items, hostElement = this) {
|
|
258
267
|
// Get all the wrappers in the host element
|
|
259
268
|
let wrappers = [...hostElement.children].filter((el) => el.localName === WRAPPER_LOCAL_NAME);
|
|
260
|
-
let previousWrapper = null;
|
|
261
269
|
|
|
262
270
|
const focusedWrapper = wrappers.find((wrapper) => wrapper.querySelector(':focus'));
|
|
263
271
|
const focusedWrapperWillBeRemoved = focusedWrapper && !this.__isActiveWrapper(focusedWrapper);
|
|
264
272
|
const wrapperClosestToRemovedFocused =
|
|
265
273
|
focusedWrapperWillBeRemoved && this.__getClosestActiveWrapper(focusedWrapper);
|
|
266
274
|
|
|
267
|
-
items.forEach((item) => {
|
|
275
|
+
items.forEach((item, index) => {
|
|
268
276
|
// Find the wrapper for the item or create a new one
|
|
269
277
|
const wrapper = wrappers.find((el) => itemsEqual(getElementItem(el), item)) || this.__createWrapper(item);
|
|
270
278
|
wrappers = wrappers.filter((el) => el !== wrapper);
|
|
279
|
+
if (!wrapper.isConnected) {
|
|
280
|
+
hostElement.appendChild(wrapper);
|
|
281
|
+
}
|
|
271
282
|
|
|
272
283
|
// Update the wrapper style
|
|
273
284
|
this.__updateWrapper(wrapper, item);
|
|
274
285
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
// Append the wrapper after the previous one if it's not already there
|
|
278
|
-
if (wrapper.previousElementSibling !== previousWrapper) {
|
|
279
|
-
previousWrapper.after(wrapper);
|
|
280
|
-
}
|
|
281
|
-
} else if (hostElement.firstChild) {
|
|
282
|
-
// Insert the wrapper as the first child of the host element if it's not already there
|
|
283
|
-
if (wrapper !== hostElement.firstChild) {
|
|
284
|
-
hostElement.insertBefore(wrapper, hostElement.firstChild);
|
|
285
|
-
}
|
|
286
|
-
} else {
|
|
287
|
-
// Append the wrapper to the empty host element
|
|
288
|
-
hostElement.appendChild(wrapper);
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
previousWrapper = wrapper;
|
|
286
|
+
// Update the wrapper slot
|
|
287
|
+
wrapper.slot = `slot-${index}`;
|
|
292
288
|
|
|
293
289
|
// Render section if the item has subitems
|
|
294
290
|
if (item.items) {
|
|
@@ -307,6 +303,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
307
303
|
section.__i18n = this.i18n;
|
|
308
304
|
|
|
309
305
|
// Render the subitems
|
|
306
|
+
section.__childCount = item.items.length;
|
|
310
307
|
this.__renderItemWrappers(item.items, section);
|
|
311
308
|
}
|
|
312
309
|
});
|
|
@@ -368,12 +365,26 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
368
365
|
return getItemsArrayOfItem(getElementItem(wrapper), this.items);
|
|
369
366
|
}
|
|
370
367
|
|
|
368
|
+
/**
|
|
369
|
+
* Parses the slot name to get the index of the item in the dashboard
|
|
370
|
+
* For example, slot name "slot-12" will return 12
|
|
371
|
+
* @private
|
|
372
|
+
*/
|
|
373
|
+
__parseSlotIndex(slotName) {
|
|
374
|
+
return parseInt(slotName.split('-')[1]);
|
|
375
|
+
}
|
|
376
|
+
|
|
371
377
|
/** @private */
|
|
372
378
|
__getClosestActiveWrapper(wrapper) {
|
|
373
379
|
if (!wrapper || this.__isActiveWrapper(wrapper)) {
|
|
374
380
|
return wrapper;
|
|
375
381
|
}
|
|
376
382
|
|
|
383
|
+
// Sibling wrappers sorted by their slot name
|
|
384
|
+
const siblingWrappers = [...wrapper.parentElement.children].sort((a, b) => {
|
|
385
|
+
return this.__parseSlotIndex(a.slot) - this.__parseSlotIndex(b.slot);
|
|
386
|
+
});
|
|
387
|
+
|
|
377
388
|
// Starting from the given wrapper element, iterates through the siblings in the given direction
|
|
378
389
|
// to find the closest wrapper that represents an item in the dashboard's items array
|
|
379
390
|
const findSiblingWrapper = (wrapper, dir) => {
|
|
@@ -381,7 +392,8 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
381
392
|
if (this.__isActiveWrapper(wrapper)) {
|
|
382
393
|
return wrapper;
|
|
383
394
|
}
|
|
384
|
-
|
|
395
|
+
const currentIndex = siblingWrappers.indexOf(wrapper);
|
|
396
|
+
wrapper = dir === 1 ? siblingWrappers[currentIndex + 1] : siblingWrappers[currentIndex - 1];
|
|
385
397
|
}
|
|
386
398
|
};
|
|
387
399
|
|
|
@@ -64,9 +64,9 @@ const section = css`
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
:host([dragging]) {
|
|
67
|
-
background: var(--
|
|
68
|
-
outline: var(--
|
|
69
|
-
box-shadow: 0 0 0 var(--_section-outline-offset) var(--
|
|
67
|
+
background: var(--_vaadin-dashboard-drop-target-background-color);
|
|
68
|
+
outline: var(--_vaadin-dashboard-drop-target-border);
|
|
69
|
+
box-shadow: 0 0 0 var(--_section-outline-offset) var(--_vaadin-dashboard-drop-target-background-color);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
/* Accessible move mode controls */
|
|
@@ -4,32 +4,37 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
|
4
4
|
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
5
5
|
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
6
6
|
import '@vaadin/vaadin-lumo-styles/font-icons.js';
|
|
7
|
-
import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles';
|
|
8
7
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
8
|
|
|
10
|
-
/* Global styles */
|
|
11
|
-
const dashboardWidgetProps = css`
|
|
12
|
-
html {
|
|
13
|
-
--vaadin-dashboard-widget-background: var(--lumo-base-color);
|
|
14
|
-
--vaadin-dashboard-widget-border-radius: var(--lumo-border-radius-l);
|
|
15
|
-
--vaadin-dashboard-widget-border-width: 1px;
|
|
16
|
-
--vaadin-dashboard-widget-border-color: var(--lumo-contrast-20pct);
|
|
17
|
-
--vaadin-dashboard-widget-shadow: 0 0 0 0 transparent;
|
|
18
|
-
--vaadin-dashboard-widget-editable-shadow: var(--lumo-box-shadow-s);
|
|
19
|
-
--vaadin-dashboard-widget-selected-shadow: 0 2px 4px -1px var(--lumo-primary-color-10pct),
|
|
20
|
-
0 3px 12px -1px var(--lumo-primary-color-50pct);
|
|
21
|
-
--vaadin-dashboard-drop-target-background-color: var(--lumo-primary-color-10pct);
|
|
22
|
-
--vaadin-dashboard-drop-target-border: 1px dashed var(--lumo-primary-color-50pct);
|
|
23
|
-
}
|
|
24
|
-
`;
|
|
25
|
-
addGlobalThemeStyles('dashboard-widget-props', dashboardWidgetProps);
|
|
26
|
-
|
|
27
9
|
/* Styles shared between widgets and sections */
|
|
28
10
|
const dashboardWidgetAndSection = css`
|
|
29
11
|
/* stylelint-disable rule-empty-line-before */
|
|
30
12
|
/* stylelint-disable length-zero-no-unit */
|
|
31
13
|
|
|
32
14
|
:host {
|
|
15
|
+
--_vaadin-dashboard-widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
|
|
16
|
+
--_vaadin-dashboard-widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
|
|
17
|
+
--_vaadin-dashboard-widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
|
|
18
|
+
--_vaadin-dashboard-widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
|
|
19
|
+
--_vaadin-dashboard-widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
|
|
20
|
+
--_vaadin-dashboard-widget-editable-shadow: var(
|
|
21
|
+
--vaadin-dashboard-widget-editable-shadow,
|
|
22
|
+
var(--lumo-box-shadow-s)
|
|
23
|
+
);
|
|
24
|
+
--_vaadin-dashboard-widget-selected-shadow: var(
|
|
25
|
+
--vaadin-dashboard-widget-selected-shadow,
|
|
26
|
+
0 2px 4px -1px var(--lumo-primary-color-10pct),
|
|
27
|
+
0 3px 12px -1px var(--lumo-primary-color-50pct)
|
|
28
|
+
);
|
|
29
|
+
--_vaadin-dashboard-drop-target-background-color: var(
|
|
30
|
+
--vaadin-dashboard-drop-target-background-color,
|
|
31
|
+
var(--lumo-primary-color-10pct)
|
|
32
|
+
);
|
|
33
|
+
--_vaadin-dashboard-drop-target-border: var(
|
|
34
|
+
--vaadin-dashboard-drop-target-border,
|
|
35
|
+
1px dashed var(--lumo-primary-color-50pct)
|
|
36
|
+
);
|
|
37
|
+
|
|
33
38
|
color: var(--lumo-body-text-color);
|
|
34
39
|
font-family: var(--lumo-font-family);
|
|
35
40
|
font-size: var(--lumo-font-size-m);
|
|
@@ -137,17 +142,17 @@ const dashboardWidgetAndSection = css`
|
|
|
137
142
|
/* Widget styles */
|
|
138
143
|
const dashboardWidget = css`
|
|
139
144
|
:host {
|
|
140
|
-
background: var(--
|
|
141
|
-
border-radius: var(--
|
|
142
|
-
--_border-shadow: 0 0 0 var(--
|
|
143
|
-
--_shadow: var(--
|
|
145
|
+
background: var(--_vaadin-dashboard-widget-background);
|
|
146
|
+
border-radius: var(--_vaadin-dashboard-widget-border-radius);
|
|
147
|
+
--_border-shadow: 0 0 0 var(--_vaadin-dashboard-widget-border-width) var(--_vaadin-dashboard-widget-border-color);
|
|
148
|
+
--_shadow: var(--_vaadin-dashboard-widget-shadow);
|
|
144
149
|
box-shadow: var(--_shadow), var(--_border-shadow);
|
|
145
150
|
}
|
|
146
151
|
|
|
147
152
|
/* Widget states */
|
|
148
153
|
|
|
149
154
|
:host([editable]) {
|
|
150
|
-
--_shadow: var(--
|
|
155
|
+
--_shadow: var(--_vaadin-dashboard-widget-editable-shadow);
|
|
151
156
|
}
|
|
152
157
|
|
|
153
158
|
:host([focused]) {
|
|
@@ -155,19 +160,19 @@ const dashboardWidget = css`
|
|
|
155
160
|
}
|
|
156
161
|
|
|
157
162
|
:host([selected]) {
|
|
158
|
-
--_shadow: var(--
|
|
163
|
+
--_shadow: var(--_vaadin-dashboard-widget-selected-shadow);
|
|
159
164
|
background: var(--lumo-primary-color-10pct);
|
|
160
165
|
}
|
|
161
166
|
|
|
162
167
|
:host([dragging]) {
|
|
163
168
|
box-shadow: none;
|
|
164
|
-
background: var(--
|
|
165
|
-
border: var(--
|
|
169
|
+
background: var(--_vaadin-dashboard-drop-target-background-color);
|
|
170
|
+
border: var(--_vaadin-dashboard-drop-target-border);
|
|
166
171
|
}
|
|
167
172
|
|
|
168
173
|
:host([resizing])::after {
|
|
169
|
-
background: var(--
|
|
170
|
-
border: var(--
|
|
174
|
+
background: var(--_vaadin-dashboard-drop-target-background-color);
|
|
175
|
+
border: var(--_vaadin-dashboard-drop-target-border);
|
|
171
176
|
}
|
|
172
177
|
|
|
173
178
|
/* Widget parts */
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/dashboard",
|
|
4
|
-
"version": "24.6.
|
|
4
|
+
"version": "24.6.2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
138
|
"name": "vaadin-dashboard",
|
|
139
|
-
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.6.
|
|
139
|
+
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.6.2/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.2/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
140
140
|
"attributes": [
|
|
141
141
|
{
|
|
142
142
|
"name": "dense-layout",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/dashboard",
|
|
4
|
-
"version": "24.6.
|
|
4
|
+
"version": "24.6.2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
"name": "vaadin-dashboard",
|
|
61
|
-
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.6.
|
|
61
|
+
"description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.6.2/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.2/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
62
62
|
"extension": true,
|
|
63
63
|
"attributes": [
|
|
64
64
|
{
|