@brightspace-ui/core 2.120.0 → 2.120.1
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.
|
@@ -123,6 +123,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
|
|
|
123
123
|
visibility: hidden;
|
|
124
124
|
width: auto;
|
|
125
125
|
}
|
|
126
|
+
.d2l-input-date-hidden-text > div {
|
|
127
|
+
padding-left: 2rem; /* simulates space taken up by the icon */
|
|
128
|
+
}
|
|
126
129
|
d2l-calendar {
|
|
127
130
|
padding: 0.25rem 0.6rem;
|
|
128
131
|
}
|
|
@@ -268,9 +271,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
|
|
|
268
271
|
</d2l-dropdown-content>` : null;
|
|
269
272
|
return html`
|
|
270
273
|
<div aria-hidden="true" class="d2l-input-date-hidden-text">
|
|
271
|
-
<div
|
|
272
|
-
<div
|
|
273
|
-
<div
|
|
274
|
+
<div>${formattedWideDate}</div>
|
|
275
|
+
<div>${shortDateFormat}</div>
|
|
276
|
+
<div>${this.emptyText}</div>
|
|
274
277
|
</div>
|
|
275
278
|
${errorTooltip}
|
|
276
279
|
${infoTooltip}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import '../../colors/colors.js';
|
|
2
|
+
import '../list-item-content.js';
|
|
3
|
+
import '../list-item.js';
|
|
4
|
+
import '../list.js';
|
|
5
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
6
|
+
|
|
7
|
+
class ListNestedIterationsHelper extends LitElement {
|
|
8
|
+
static get properties() {
|
|
9
|
+
return {
|
|
10
|
+
draggable: { type: Boolean }
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
static get styles() {
|
|
15
|
+
return css`
|
|
16
|
+
:host {
|
|
17
|
+
display: block;
|
|
18
|
+
}
|
|
19
|
+
table {
|
|
20
|
+
border-collapse: collapse;
|
|
21
|
+
font-size: 0.8rem;
|
|
22
|
+
table-layout: fixed;
|
|
23
|
+
width: 100%;
|
|
24
|
+
}
|
|
25
|
+
table > * > tr > * {
|
|
26
|
+
border: 1px solid var(--d2l-color-mica);
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
height: 41px;
|
|
29
|
+
padding: 0.5rem 1rem;
|
|
30
|
+
text-align: start;
|
|
31
|
+
vertical-align: middle;
|
|
32
|
+
}
|
|
33
|
+
table > * > tr > td {
|
|
34
|
+
vertical-align: top;
|
|
35
|
+
}
|
|
36
|
+
table > thead > tr > th,
|
|
37
|
+
table > * > tr.header > th {
|
|
38
|
+
background-color: var(--d2l-color-regolith);
|
|
39
|
+
font-size: 0.7rem;
|
|
40
|
+
height: 27px;
|
|
41
|
+
line-height: 0.9rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
d2l-list:not([slot="nested"]) {
|
|
45
|
+
border: solid 1px black;
|
|
46
|
+
margin: 1rem;
|
|
47
|
+
padding: 1rem;
|
|
48
|
+
}
|
|
49
|
+
.minimize-width {
|
|
50
|
+
width: 4.5rem;
|
|
51
|
+
}
|
|
52
|
+
`;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
constructor() {
|
|
56
|
+
super();
|
|
57
|
+
this.draggable = false;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
render() {
|
|
61
|
+
const selectableOptions = [
|
|
62
|
+
{ name: 'All are Selectable', parent: true, child: true },
|
|
63
|
+
{ name: 'None are Selectable', parent: false, child: false },
|
|
64
|
+
{ name: 'Children Selectable (Parent Not)', parent: false, child: true },
|
|
65
|
+
{ name: 'Parent Selectable (Children Not)', parent: true, child: false }
|
|
66
|
+
];
|
|
67
|
+
|
|
68
|
+
const tableRows = selectableOptions.map(option => html`
|
|
69
|
+
<tr class="header">
|
|
70
|
+
<th rowspan="2" scope="rowgroup">${option.name}</th>
|
|
71
|
+
<th scope="row">Exp/Collapsible Children</th>
|
|
72
|
+
<td>${this._createList([option.parent, true], [option.child, true])}</td>
|
|
73
|
+
<td>${this._createList([option.parent, false], [option.child, true])}</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr class="header">
|
|
76
|
+
<th scope="row">Non-Exp/Collapsible Children</th>
|
|
77
|
+
<td>${this._createList([option.parent, true], [option.child, false])}</td>
|
|
78
|
+
<td>${this._createList([option.parent, false], [option.child, false])}</td>
|
|
79
|
+
</tr>
|
|
80
|
+
`);
|
|
81
|
+
|
|
82
|
+
return html`
|
|
83
|
+
<table>
|
|
84
|
+
<thead>
|
|
85
|
+
<tr>
|
|
86
|
+
<th class="minimize-width"></th>
|
|
87
|
+
<th class="minimize-width"></th>
|
|
88
|
+
<th scope="col">Exp/Collapsible Parent</th>
|
|
89
|
+
<th scope="col">Non-Exp/Collapsible Parent</th>
|
|
90
|
+
</tr>
|
|
91
|
+
</thead>
|
|
92
|
+
<tbody>
|
|
93
|
+
${tableRows}
|
|
94
|
+
</tbody>
|
|
95
|
+
</table>
|
|
96
|
+
`;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
_createList(parentOptions, childrenOptions) {
|
|
100
|
+
return html`
|
|
101
|
+
<d2l-list>
|
|
102
|
+
${this._getParentItems(parentOptions, this._getChildItems(childrenOptions))}
|
|
103
|
+
</d2l-list>
|
|
104
|
+
`;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
_getChildItems(childOptions) {
|
|
108
|
+
const childL2Text = 'L2 List Item';
|
|
109
|
+
const childL3Text = 'L3 List Item';
|
|
110
|
+
const items = [];
|
|
111
|
+
|
|
112
|
+
for (let i = 0; i < 3; i++) {
|
|
113
|
+
const childKey = `child-${i}-${childOptions[0]}-${childOptions[1]}`;
|
|
114
|
+
items.push(html`
|
|
115
|
+
<d2l-list-item key="${childKey}" label="${childL2Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}" ?expandable="${childOptions[1] && i !== 1}">
|
|
116
|
+
<d2l-list-item-content>${childL2Text}</d2l-list-item-content>
|
|
117
|
+
${i === 1 || !childOptions[1] ? nothing : html`
|
|
118
|
+
<d2l-list slot="nested">
|
|
119
|
+
<d2l-list-item key="${`${childKey}-child`}" label="${childL3Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}">
|
|
120
|
+
<d2l-list-item-content>${childL3Text}</d2l-list-item-content>
|
|
121
|
+
</d2l-list-item>
|
|
122
|
+
</d2l-list>
|
|
123
|
+
`}
|
|
124
|
+
</d2l-list-item>
|
|
125
|
+
`);
|
|
126
|
+
}
|
|
127
|
+
return items;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
_getParentItems(parentOptions, nested) {
|
|
131
|
+
const parentText = 'L1 List Item';
|
|
132
|
+
const items = [];
|
|
133
|
+
|
|
134
|
+
for (let i = 0; i < 3; i++) {
|
|
135
|
+
const parentKey = `parent-${i}-${parentOptions[0]}-${parentOptions[1]}`;
|
|
136
|
+
items.push(html`
|
|
137
|
+
<d2l-list-item key="${parentKey}" label="${parentText}" ?selectable="${!!parentOptions[0]}" ?draggable="${this.draggable}" ?expandable="${parentOptions[1] && i !== 1}" ?expanded="${parentOptions[1] && i === 0}">
|
|
138
|
+
<d2l-list-item-content>${parentText}</d2l-list-item-content>
|
|
139
|
+
${i === 1 || (i === 2 && !parentOptions[1]) ? nothing : html`
|
|
140
|
+
<d2l-list slot="nested">${nested}</d2l-list>
|
|
141
|
+
`}
|
|
142
|
+
</d2l-list-item>
|
|
143
|
+
`);
|
|
144
|
+
}
|
|
145
|
+
return items;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
customElements.define('d2l-demo-list-nested-iterations-helper', ListNestedIterationsHelper);
|
|
@@ -20,6 +20,9 @@
|
|
|
20
20
|
import '../../menu/menu-item.js';
|
|
21
21
|
import '../../paging/pager-load-more.js';
|
|
22
22
|
import '../../selection/selection-action.js';
|
|
23
|
+
import '../../switch/switch.js';
|
|
24
|
+
|
|
25
|
+
import './demo-list-nested-iterations-helper.js';
|
|
23
26
|
</script>
|
|
24
27
|
</head>
|
|
25
28
|
<body unresolved>
|
|
@@ -222,6 +225,15 @@
|
|
|
222
225
|
</template>
|
|
223
226
|
</d2l-demo-snippet>
|
|
224
227
|
|
|
228
|
+
<h2>All Iterations</h2>
|
|
229
|
+
|
|
230
|
+
<d2l-demo-snippet full-width>
|
|
231
|
+
<template>
|
|
232
|
+
<d2l-switch id="draggable-switch" text="Draggable"></d2l-switch>
|
|
233
|
+
<d2l-demo-list-nested-iterations-helper></d2l-demo-list-nested-iterations-helper>
|
|
234
|
+
</template>
|
|
235
|
+
</d2l-demo-snippet>
|
|
236
|
+
|
|
225
237
|
</d2l-demo-page>
|
|
226
238
|
|
|
227
239
|
<script>
|
|
@@ -238,6 +250,20 @@
|
|
|
238
250
|
setTimeout(() => e.detail.complete(), 2000);
|
|
239
251
|
});
|
|
240
252
|
});
|
|
253
|
+
|
|
254
|
+
const setupSwitch = () => {
|
|
255
|
+
const draggableSwitch = document.querySelector('#draggable-switch');
|
|
256
|
+
if (!draggableSwitch) {
|
|
257
|
+
setTimeout(setupSwitch, 1000);
|
|
258
|
+
} else {
|
|
259
|
+
draggableSwitch.addEventListener('change', (e) => {
|
|
260
|
+
const listIterations = document.querySelector('d2l-demo-list-nested-iterations-helper');
|
|
261
|
+
listIterations.draggable = e.target.on;
|
|
262
|
+
});
|
|
263
|
+
}
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
setupSwitch();
|
|
241
267
|
}, 1000);
|
|
242
268
|
</script>
|
|
243
269
|
|
package/custom-elements.json
CHANGED
|
@@ -7592,6 +7592,25 @@
|
|
|
7592
7592
|
}
|
|
7593
7593
|
]
|
|
7594
7594
|
},
|
|
7595
|
+
{
|
|
7596
|
+
"name": "d2l-demo-list-nested-iterations-helper",
|
|
7597
|
+
"path": "./components/list/demo/demo-list-nested-iterations-helper.js",
|
|
7598
|
+
"attributes": [
|
|
7599
|
+
{
|
|
7600
|
+
"name": "draggable",
|
|
7601
|
+
"type": "boolean",
|
|
7602
|
+
"default": "false"
|
|
7603
|
+
}
|
|
7604
|
+
],
|
|
7605
|
+
"properties": [
|
|
7606
|
+
{
|
|
7607
|
+
"name": "draggable",
|
|
7608
|
+
"attribute": "draggable",
|
|
7609
|
+
"type": "boolean",
|
|
7610
|
+
"default": "false"
|
|
7611
|
+
}
|
|
7612
|
+
]
|
|
7613
|
+
},
|
|
7595
7614
|
{
|
|
7596
7615
|
"name": "d2l-demo-list-nested-lazy-load",
|
|
7597
7616
|
"path": "./components/list/demo/demo-list-nested-lazy-load.js"
|
|
@@ -9007,14 +9026,6 @@
|
|
|
9007
9026
|
}
|
|
9008
9027
|
]
|
|
9009
9028
|
},
|
|
9010
|
-
{
|
|
9011
|
-
"name": "d2l-nested-list-iterations-separate",
|
|
9012
|
-
"path": "./components/list/test/nested-list-iterations-helper.js"
|
|
9013
|
-
},
|
|
9014
|
-
{
|
|
9015
|
-
"name": "d2l-nested-list-iterations-combined",
|
|
9016
|
-
"path": "./components/list/test/nested-list-iterations-helper.js"
|
|
9017
|
-
},
|
|
9018
9029
|
{
|
|
9019
9030
|
"name": "d2l-loading-spinner-demo-override",
|
|
9020
9031
|
"path": "./components/loading-spinner/demo/loading-spinner-override.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.120.
|
|
3
|
+
"version": "2.120.1",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"glob-all": "^3",
|
|
62
62
|
"lit-analyzer": "^1",
|
|
63
63
|
"messageformat-validator": "^2",
|
|
64
|
-
"node-sass": "^
|
|
64
|
+
"node-sass": "^9",
|
|
65
65
|
"rollup": "^3",
|
|
66
66
|
"rollup-plugin-copy": "^3",
|
|
67
67
|
"rollup-plugin-delete": "^2",
|