@brightspace-ui/core 2.141.1 → 2.142.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/components/inputs/input-color.js +3 -9
- package/components/list/demo/demo-list-nested-iterations-helper.js +22 -4
- package/components/list/demo/list-color.html +336 -0
- package/components/list/list-item-generic-layout.js +9 -2
- package/components/list/list-item-mixin.js +52 -0
- package/custom-elements.json +33 -0
- package/helpers/color.js +17 -0
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
7
7
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
8
8
|
import { FormElementMixin } from '../form/form-element-mixin.js';
|
|
9
9
|
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
10
|
+
import { getValidHexColor } from '../../helpers/color.js';
|
|
10
11
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
12
|
import { inputLabelStyles } from './input-label-styles.js';
|
|
12
13
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
@@ -14,7 +15,6 @@ import { styleMap } from 'lit/directives/style-map.js';
|
|
|
14
15
|
|
|
15
16
|
const DEFAULT_VALUE = '#000000';
|
|
16
17
|
const DEFAULT_VALUE_BG = '#FFFFFF';
|
|
17
|
-
const HEX_REGEX = /#([0-9a-fA-F]){6}/;
|
|
18
18
|
const ICON_BACKGROUND = html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" fill="none" viewBox="0 0 16 13">
|
|
19
19
|
<g fill="#202122" clip-path="url(#a)">
|
|
20
20
|
<path fill-rule="evenodd" d="M1.609 5.356c-2.706 2.706 4.329 9.741 7.035 7.035l4.87-4.87C15.897 5.137 8.862-1.898 6.48.486l-4.87 4.87Zm5.945 5.297L12 6.207a1.774 1.774 0 0 0-.116-.42c-.231-.613-.766-1.41-1.514-2.157-.748-.748-1.545-1.283-2.158-1.515A1.774 1.774 0 0 0 7.793 2L3.347 6.446c.988.286 1.898.863 2.62 1.586.724.723 1.301 1.633 1.587 2.62Zm.154-8.65c-.001-.002.011-.006.04-.006-.024.008-.038.008-.04.006Zm4.289 4.289c-.002-.002-.002-.016.005-.04 0 .029-.003.041-.005.04Z" clip-rule="evenodd"/>
|
|
@@ -237,11 +237,8 @@ class InputColor extends FocusMixin(FormElementMixin(LocalizeCoreElement(LitElem
|
|
|
237
237
|
|
|
238
238
|
get associatedValue() { return this._associatedValue; }
|
|
239
239
|
set associatedValue(val) {
|
|
240
|
-
if (val !== undefined && !HEX_REGEX.test(val)) {
|
|
241
|
-
throw new TypeError(`<d2l-input-color>: invalid HEX associated-value "${val}"`);
|
|
242
|
-
}
|
|
243
240
|
const oldVal = this._associatedValue;
|
|
244
|
-
this._associatedValue = (
|
|
241
|
+
this._associatedValue = getValidHexColor(val);
|
|
245
242
|
this.requestUpdate('associatedValue', oldVal);
|
|
246
243
|
}
|
|
247
244
|
|
|
@@ -252,11 +249,8 @@ class InputColor extends FocusMixin(FormElementMixin(LocalizeCoreElement(LitElem
|
|
|
252
249
|
return this._value;
|
|
253
250
|
}
|
|
254
251
|
set value(val) {
|
|
255
|
-
if (val !== undefined && !HEX_REGEX.test(val)) {
|
|
256
|
-
throw new TypeError(`<d2l-input-color>: invalid HEX value "${val}"`);
|
|
257
|
-
}
|
|
258
252
|
const oldVal = this._value;
|
|
259
|
-
this._value = (
|
|
253
|
+
this._value = getValidHexColor(val);
|
|
260
254
|
this.requestUpdate('value', oldVal);
|
|
261
255
|
}
|
|
262
256
|
|
|
@@ -3,6 +3,7 @@ import '../list-item-content.js';
|
|
|
3
3
|
import '../list-item.js';
|
|
4
4
|
import '../list.js';
|
|
5
5
|
import { css, html, LitElement, nothing } from 'lit';
|
|
6
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
7
|
|
|
7
8
|
class ListNestedIterationsHelper extends LitElement {
|
|
8
9
|
static get properties() {
|
|
@@ -67,7 +68,7 @@ class ListNestedIterationsHelper extends LitElement {
|
|
|
67
68
|
|
|
68
69
|
const tableRows = selectableOptions.map(option => html`
|
|
69
70
|
<tr class="header">
|
|
70
|
-
<th rowspan="
|
|
71
|
+
<th rowspan="4" scope="rowgroup">${option.name}</th>
|
|
71
72
|
<th scope="row">Exp/Collapsible Children</th>
|
|
72
73
|
<td>${this._createList([option.parent, true], [option.child, true])}</td>
|
|
73
74
|
<td>${this._createList([option.parent, false], [option.child, true])}</td>
|
|
@@ -77,6 +78,16 @@ class ListNestedIterationsHelper extends LitElement {
|
|
|
77
78
|
<td>${this._createList([option.parent, true], [option.child, false])}</td>
|
|
78
79
|
<td>${this._createList([option.parent, false], [option.child, false])}</td>
|
|
79
80
|
</tr>
|
|
81
|
+
<tr class="header">
|
|
82
|
+
<th scope="row">Color on Some</th>
|
|
83
|
+
<td>${this._createList([option.parent, true, true], [option.child, true, true])}</td>
|
|
84
|
+
<td>${this._createList([option.parent, false, true], [option.child, true, true])}</td>
|
|
85
|
+
</tr>
|
|
86
|
+
<tr class="header">
|
|
87
|
+
<th scope="row">Color on All</th>
|
|
88
|
+
<td>${this._createList([option.parent, true, false, true], [option.child, true, false, true])}</td>
|
|
89
|
+
<td>${this._createList([option.parent, false, false, true], [option.child, true, false, true])}</td>
|
|
90
|
+
</tr>
|
|
80
91
|
`);
|
|
81
92
|
|
|
82
93
|
return html`
|
|
@@ -104,6 +115,13 @@ class ListNestedIterationsHelper extends LitElement {
|
|
|
104
115
|
`;
|
|
105
116
|
}
|
|
106
117
|
|
|
118
|
+
/**
|
|
119
|
+
* childOptions:
|
|
120
|
+
* - 0: Selectable
|
|
121
|
+
* - 1: Expandable
|
|
122
|
+
* - 2: Color on first items
|
|
123
|
+
* - 3: Color on all items
|
|
124
|
+
*/
|
|
107
125
|
_getChildItems(childOptions) {
|
|
108
126
|
const childL2Text = 'L2 List Item';
|
|
109
127
|
const childL3Text = 'L3 List Item';
|
|
@@ -112,11 +130,11 @@ class ListNestedIterationsHelper extends LitElement {
|
|
|
112
130
|
for (let i = 0; i < 3; i++) {
|
|
113
131
|
const childKey = `child-${i}-${childOptions[0]}-${childOptions[1]}`;
|
|
114
132
|
items.push(html`
|
|
115
|
-
<d2l-list-item key="${childKey}" label="${childL2Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}" ?expandable="${childOptions[1] && i !== 1}">
|
|
133
|
+
<d2l-list-item key="${childKey}" label="${childL2Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}" ?expandable="${childOptions[1] && i !== 1}" color="${ifDefined((childOptions[2] && i === 0) || childOptions[3] ? '#ff0000' : undefined)}">
|
|
116
134
|
<d2l-list-item-content>${childL2Text}</d2l-list-item-content>
|
|
117
135
|
${i === 1 || !childOptions[1] ? nothing : html`
|
|
118
136
|
<d2l-list slot="nested">
|
|
119
|
-
<d2l-list-item key="${`${childKey}-child`}" label="${childL3Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}">
|
|
137
|
+
<d2l-list-item key="${`${childKey}-child`}" label="${childL3Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}" color="${ifDefined(childOptions[3] ? '#00ff00' : undefined)}">
|
|
120
138
|
<d2l-list-item-content>${childL3Text}</d2l-list-item-content>
|
|
121
139
|
</d2l-list-item>
|
|
122
140
|
</d2l-list>
|
|
@@ -134,7 +152,7 @@ class ListNestedIterationsHelper extends LitElement {
|
|
|
134
152
|
for (let i = 0; i < 3; i++) {
|
|
135
153
|
const parentKey = `parent-${i}-${parentOptions[0]}-${parentOptions[1]}`;
|
|
136
154
|
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}">
|
|
155
|
+
<d2l-list-item key="${parentKey}" label="${parentText}" ?selectable="${!!parentOptions[0]}" ?draggable="${this.draggable}" ?expandable="${parentOptions[1] && i !== 1}" ?expanded="${parentOptions[1] && i === 0}" color="${ifDefined((parentOptions[2] && i === 0) || parentOptions[3] ? '#ff0000' : undefined)}">
|
|
138
156
|
<d2l-list-item-content>${parentText}</d2l-list-item-content>
|
|
139
157
|
${i === 1 || (i === 2 && !parentOptions[1]) ? nothing : html`
|
|
140
158
|
<d2l-list slot="nested">${nested}</d2l-list>
|
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
+
<script type="module">
|
|
8
|
+
import '../../button/button-icon.js';
|
|
9
|
+
import '../../demo/demo-page.js';
|
|
10
|
+
import '../../dropdown/dropdown-menu.js';
|
|
11
|
+
import '../../dropdown/dropdown-more.js';
|
|
12
|
+
import '../../menu/menu.js';
|
|
13
|
+
import '../../menu/menu-item.js';
|
|
14
|
+
import '../list-item-content.js';
|
|
15
|
+
import '../list-item.js';
|
|
16
|
+
import '../list.js';
|
|
17
|
+
</script>
|
|
18
|
+
</head>
|
|
19
|
+
<body unresolved>
|
|
20
|
+
|
|
21
|
+
<d2l-demo-page page-title="d2l-list Color">
|
|
22
|
+
|
|
23
|
+
<h2>Basic List</h2>
|
|
24
|
+
|
|
25
|
+
<d2l-demo-snippet>
|
|
26
|
+
<template>
|
|
27
|
+
<d2l-list>
|
|
28
|
+
<d2l-list-item color="#ff00ffaa">
|
|
29
|
+
<d2l-list-item-content>
|
|
30
|
+
<div>Identify categories of physical activities</div>
|
|
31
|
+
<div slot="secondary">Secondary Information</div>
|
|
32
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
33
|
+
</d2l-list-item-content>
|
|
34
|
+
</d2l-list-item>
|
|
35
|
+
<d2l-list-item>
|
|
36
|
+
<d2l-list-item-content>
|
|
37
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
38
|
+
<div slot="secondary">Secondary Information</div>
|
|
39
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
40
|
+
</d2l-list-item-content>
|
|
41
|
+
</d2l-list-item>
|
|
42
|
+
</d2l-list>
|
|
43
|
+
</template>
|
|
44
|
+
</d2l-demo-snippet>
|
|
45
|
+
|
|
46
|
+
<h2>Extend Separators</h2>
|
|
47
|
+
|
|
48
|
+
<d2l-demo-snippet>
|
|
49
|
+
<template>
|
|
50
|
+
<d2l-list extend-separators>
|
|
51
|
+
<d2l-list-item color="#8982ff">
|
|
52
|
+
<d2l-list-item-content>
|
|
53
|
+
<div>Identify categories of physical activities</div>
|
|
54
|
+
<div slot="secondary">Secondary Information</div>
|
|
55
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
56
|
+
</d2l-list-item-content>
|
|
57
|
+
</d2l-list-item>
|
|
58
|
+
<d2l-list-item>
|
|
59
|
+
<d2l-list-item-content>
|
|
60
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
61
|
+
<div slot="secondary">Secondary Information</div>
|
|
62
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
63
|
+
</d2l-list-item-content>
|
|
64
|
+
</d2l-list-item>
|
|
65
|
+
</d2l-list>
|
|
66
|
+
</template>
|
|
67
|
+
</d2l-demo-snippet>
|
|
68
|
+
|
|
69
|
+
<h2>Extend Separators and Selectable</h2>
|
|
70
|
+
|
|
71
|
+
<d2l-demo-snippet>
|
|
72
|
+
<template>
|
|
73
|
+
<d2l-list extend-separators>
|
|
74
|
+
<d2l-list-item key="L4-1" label="Label for L4-1" color="#ffba59" selectable>
|
|
75
|
+
<d2l-list-item-content>
|
|
76
|
+
<div>Ice Sheets (L4)</div>
|
|
77
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
78
|
+
</d2l-list-item-content>
|
|
79
|
+
</d2l-list-item>
|
|
80
|
+
<d2l-list-item selectable key="L4-2" label="Label for L4-2">
|
|
81
|
+
<d2l-list-item-content>
|
|
82
|
+
<div>Alpine Glaciers (L4)</div>
|
|
83
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
84
|
+
</d2l-list-item-content>
|
|
85
|
+
</d2l-list-item>
|
|
86
|
+
</d2l-list>
|
|
87
|
+
</template>
|
|
88
|
+
</d2l-demo-snippet>
|
|
89
|
+
|
|
90
|
+
<h2>Nested - Selectable</h2>
|
|
91
|
+
|
|
92
|
+
<d2l-demo-snippet code-view-hidden>
|
|
93
|
+
<template>
|
|
94
|
+
<d2l-list grid>
|
|
95
|
+
<d2l-list-controls slot="controls">
|
|
96
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
97
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
98
|
+
</d2l-list-controls>
|
|
99
|
+
<d2l-list-item selectable key="L1-1" label="Label for L1-1" color="#ffba59">
|
|
100
|
+
<d2l-list-item-content>
|
|
101
|
+
<div>Earth Sciences (L1)</div>
|
|
102
|
+
<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
|
|
103
|
+
</d2l-list-item-content>
|
|
104
|
+
<d2l-list slot="nested" grid separators="all">
|
|
105
|
+
<d2l-list-item selectable key="L2-1" label="Label for L2-1" color="#ffba59">
|
|
106
|
+
<d2l-list-item-content>
|
|
107
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
108
|
+
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
|
|
109
|
+
</d2l-list-item-content>
|
|
110
|
+
<d2l-list slot="nested" grid separators="all">
|
|
111
|
+
<d2l-list-item selectable key="L3-1" label="Label for L3-1" color="#ffba59">
|
|
112
|
+
<d2l-list-item-content>
|
|
113
|
+
<div>Glaciation (L3)</div>
|
|
114
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
115
|
+
</d2l-list-item-content>
|
|
116
|
+
<d2l-list slot="nested" grid separators="all">
|
|
117
|
+
<d2l-list-item selectable key="L4-1" label="Label for L4-1" color="#ffba59">
|
|
118
|
+
<d2l-list-item-content>
|
|
119
|
+
<div>Ice Sheets (L4)</div>
|
|
120
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
121
|
+
</d2l-list-item-content>
|
|
122
|
+
</d2l-list-item>
|
|
123
|
+
<d2l-list-item selectable key="L4-2" label="Label for L4-2">
|
|
124
|
+
<d2l-list-item-content>
|
|
125
|
+
<div>Alpine Glaciers (L4)</div>
|
|
126
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
127
|
+
</d2l-list-item-content>
|
|
128
|
+
</d2l-list-item>
|
|
129
|
+
</d2l-list>
|
|
130
|
+
</d2l-list-item>
|
|
131
|
+
</d2l-list>
|
|
132
|
+
</d2l-list-item>
|
|
133
|
+
<d2l-list-item selectable key="L2-2" label="Label for L2-2">
|
|
134
|
+
<d2l-list-item-content>
|
|
135
|
+
<div>Flow and Transport Through Fractured Rocks (L2)</div>
|
|
136
|
+
<div slot="supporting-info">Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas. Despite the importance of fractures, its characterization and predictions of groundwater flow and contaminant transport are fraught with significant difficulties. Students are taught to deal with fractures in hydrogeology, to conceptualize them, and to build reliable models for predicting groundwater flow and contaminant transport.</div>
|
|
137
|
+
</d2l-list-item-content>
|
|
138
|
+
</d2l-list-item>
|
|
139
|
+
</d2l-list>
|
|
140
|
+
<div slot="actions">
|
|
141
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
142
|
+
<d2l-dropdown-more text="Open!">
|
|
143
|
+
<d2l-dropdown-menu>
|
|
144
|
+
<d2l-menu label="Astronomy">
|
|
145
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
146
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
147
|
+
</d2l-menu>
|
|
148
|
+
</d2l-dropdown-menu>
|
|
149
|
+
</d2l-dropdown-more>
|
|
150
|
+
</div>
|
|
151
|
+
</d2l-list-item>
|
|
152
|
+
<d2l-list-item selectable key="L1-2" label="Label for L1-2">
|
|
153
|
+
<div>Biology (L1)</div>
|
|
154
|
+
</d2l-list-item>
|
|
155
|
+
</d2l-list>
|
|
156
|
+
</template>
|
|
157
|
+
</d2l-demo-snippet>
|
|
158
|
+
|
|
159
|
+
<h2>Nested - Expandable</h2>
|
|
160
|
+
|
|
161
|
+
<d2l-demo-snippet code-view-hidden>
|
|
162
|
+
<template>
|
|
163
|
+
<d2l-list>
|
|
164
|
+
<d2l-list-controls slot="controls">
|
|
165
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
166
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
167
|
+
</d2l-list-controls>
|
|
168
|
+
<d2l-list-item key="L1-1" label="Label for L1-1" color="#ffba59" expandable expanded>
|
|
169
|
+
<d2l-list-item-content>
|
|
170
|
+
<div>Earth Sciences (L1)</div>
|
|
171
|
+
<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
|
|
172
|
+
</d2l-list-item-content>
|
|
173
|
+
<d2l-list slot="nested" grid separators="all">
|
|
174
|
+
<d2l-list-item key="L2-1" label="Label for L2-1" color="#ffba59" expandable>
|
|
175
|
+
<d2l-list-item-content>
|
|
176
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
177
|
+
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
|
|
178
|
+
</d2l-list-item-content>
|
|
179
|
+
<d2l-list slot="nested" grid separators="all">
|
|
180
|
+
<d2l-list-item key="L3-1" label="Label for L3-1" color="#ffba59" expandable>
|
|
181
|
+
<d2l-list-item-content>
|
|
182
|
+
<div>Glaciation (L3)</div>
|
|
183
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
184
|
+
</d2l-list-item-content>
|
|
185
|
+
<d2l-list slot="nested" grid separators="all">
|
|
186
|
+
<d2l-list-item key="L4-1" label="Label for L4-1" color="#ffba59">
|
|
187
|
+
<d2l-list-item-content>
|
|
188
|
+
<div>Ice Sheets (L4)</div>
|
|
189
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
190
|
+
</d2l-list-item-content>
|
|
191
|
+
</d2l-list-item>
|
|
192
|
+
<d2l-list-item selectable key="L4-2" label="Label for L4-2">
|
|
193
|
+
<d2l-list-item-content>
|
|
194
|
+
<div>Alpine Glaciers (L4)</div>
|
|
195
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
196
|
+
</d2l-list-item-content>
|
|
197
|
+
</d2l-list-item>
|
|
198
|
+
</d2l-list>
|
|
199
|
+
</d2l-list-item>
|
|
200
|
+
</d2l-list>
|
|
201
|
+
</d2l-list-item>
|
|
202
|
+
</d2l-list>
|
|
203
|
+
<div slot="actions">
|
|
204
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
205
|
+
<d2l-dropdown-more text="Open!">
|
|
206
|
+
<d2l-dropdown-menu>
|
|
207
|
+
<d2l-menu label="Astronomy">
|
|
208
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
209
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
210
|
+
</d2l-menu>
|
|
211
|
+
</d2l-dropdown-menu>
|
|
212
|
+
</d2l-dropdown-more>
|
|
213
|
+
</div>
|
|
214
|
+
</d2l-list-item>
|
|
215
|
+
<d2l-list-item selectable key="L1-2" label="Label for L1-2">
|
|
216
|
+
<div>Biology (L1)</div>
|
|
217
|
+
</d2l-list-item>
|
|
218
|
+
</d2l-list>
|
|
219
|
+
</template>
|
|
220
|
+
</d2l-demo-snippet>
|
|
221
|
+
|
|
222
|
+
<h2>Nested - Draggable</h2>
|
|
223
|
+
|
|
224
|
+
<d2l-demo-snippet>
|
|
225
|
+
<template>
|
|
226
|
+
<d2l-list>
|
|
227
|
+
<d2l-list-item key="L1-1" label="Label for L1-1" color="#ffba59" draggable>
|
|
228
|
+
<d2l-list-item-content>
|
|
229
|
+
<div>Earth Sciences (L1)</div>
|
|
230
|
+
<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
|
|
231
|
+
</d2l-list-item-content>
|
|
232
|
+
<d2l-list slot="nested" grid separators="all">
|
|
233
|
+
<d2l-list-item key="L2-1" label="Label for L2-1" color="#ffba59" draggable>
|
|
234
|
+
<d2l-list-item-content>
|
|
235
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
236
|
+
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
|
|
237
|
+
</d2l-list-item-content>
|
|
238
|
+
<d2l-list slot="nested" grid separators="all">
|
|
239
|
+
<d2l-list-item key="L3-1" label="Label for L3-1" color="#ffba59" draggable>
|
|
240
|
+
<d2l-list-item-content>
|
|
241
|
+
<div>Glaciation (L3)</div>
|
|
242
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
243
|
+
</d2l-list-item-content>
|
|
244
|
+
<d2l-list slot="nested" grid separators="all">
|
|
245
|
+
<d2l-list-item selectable key="L4-1" label="Label for L4-1" color="#ffba59" draggable>
|
|
246
|
+
<d2l-list-item-content>
|
|
247
|
+
<div>Ice Sheets (L4)</div>
|
|
248
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
249
|
+
</d2l-list-item-content>
|
|
250
|
+
</d2l-list-item>
|
|
251
|
+
<d2l-list-item key="L4-2" label="Label for L4-2">
|
|
252
|
+
<d2l-list-item-content>
|
|
253
|
+
<div>Alpine Glaciers (L4)</div>
|
|
254
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
255
|
+
</d2l-list-item-content>
|
|
256
|
+
</d2l-list-item>
|
|
257
|
+
</d2l-list>
|
|
258
|
+
</d2l-list-item>
|
|
259
|
+
</d2l-list>
|
|
260
|
+
</d2l-list-item>
|
|
261
|
+
</d2l-list>
|
|
262
|
+
</d2l-list-item>
|
|
263
|
+
<d2l-list-item key="L1-2" label="Label for L1-2">
|
|
264
|
+
<div>Biology (L1)</div>
|
|
265
|
+
</d2l-list-item>
|
|
266
|
+
</d2l-list>
|
|
267
|
+
</template>
|
|
268
|
+
</d2l-demo-snippet>
|
|
269
|
+
|
|
270
|
+
<h2>Nested - Draggable and Expandable and Selectable</h2>
|
|
271
|
+
|
|
272
|
+
<d2l-demo-snippet code-view-hidden>
|
|
273
|
+
<template>
|
|
274
|
+
<d2l-list>
|
|
275
|
+
<d2l-list-controls slot="controls">
|
|
276
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
277
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
278
|
+
</d2l-list-controls>
|
|
279
|
+
<d2l-list-item selectable key="L1-1" label="Label for L1-1" color="#ffba59" expandable expanded draggable>
|
|
280
|
+
<d2l-list-item-content>
|
|
281
|
+
<div>Earth Sciences (L1)</div>
|
|
282
|
+
<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
|
|
283
|
+
</d2l-list-item-content>
|
|
284
|
+
<d2l-list slot="nested" grid separators="all">
|
|
285
|
+
<d2l-list-item selectable key="L2-1" label="Label for L2-1" color="#ffba59" expandable draggable>
|
|
286
|
+
<d2l-list-item-content>
|
|
287
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
288
|
+
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
|
|
289
|
+
</d2l-list-item-content>
|
|
290
|
+
<d2l-list slot="nested" grid separators="all">
|
|
291
|
+
<d2l-list-item selectable key="L3-1" label="Label for L3-1" color="#ffba59" expandable draggable>
|
|
292
|
+
<d2l-list-item-content>
|
|
293
|
+
<div>Glaciation (L3)</div>
|
|
294
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
295
|
+
</d2l-list-item-content>
|
|
296
|
+
<d2l-list slot="nested" grid separators="all">
|
|
297
|
+
<d2l-list-item selectable key="L4-1" label="Label for L4-1" color="#ffba59" draggable>
|
|
298
|
+
<d2l-list-item-content>
|
|
299
|
+
<div>Ice Sheets (L4)</div>
|
|
300
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
301
|
+
</d2l-list-item-content>
|
|
302
|
+
</d2l-list-item>
|
|
303
|
+
<d2l-list-item selectable key="L4-2" label="Label for L4-2">
|
|
304
|
+
<d2l-list-item-content>
|
|
305
|
+
<div>Alpine Glaciers (L4)</div>
|
|
306
|
+
<div slot="supporting-info">Supporting Info</div>
|
|
307
|
+
</d2l-list-item-content>
|
|
308
|
+
</d2l-list-item>
|
|
309
|
+
</d2l-list>
|
|
310
|
+
</d2l-list-item>
|
|
311
|
+
</d2l-list>
|
|
312
|
+
</d2l-list-item>
|
|
313
|
+
</d2l-list>
|
|
314
|
+
<div slot="actions">
|
|
315
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
316
|
+
<d2l-dropdown-more text="Open!">
|
|
317
|
+
<d2l-dropdown-menu>
|
|
318
|
+
<d2l-menu label="Astronomy">
|
|
319
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
320
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
321
|
+
</d2l-menu>
|
|
322
|
+
</d2l-dropdown-menu>
|
|
323
|
+
</d2l-dropdown-more>
|
|
324
|
+
</div>
|
|
325
|
+
</d2l-list-item>
|
|
326
|
+
<d2l-list-item selectable key="L1-2" label="Label for L1-2">
|
|
327
|
+
<div>Biology (L1)</div>
|
|
328
|
+
</d2l-list-item>
|
|
329
|
+
</d2l-list>
|
|
330
|
+
</template>
|
|
331
|
+
</d2l-demo-snippet>
|
|
332
|
+
|
|
333
|
+
</d2l-demo-page>
|
|
334
|
+
|
|
335
|
+
</body>
|
|
336
|
+
</html>
|
|
@@ -62,7 +62,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
62
62
|
display: grid;
|
|
63
63
|
grid-template-columns:
|
|
64
64
|
[start outside-control-start] minmax(0, min-content)
|
|
65
|
-
[
|
|
65
|
+
[color-start outside-control-end] minmax(0, min-content)
|
|
66
|
+
[expand-collapse-start color-end] minmax(0, min-content)
|
|
66
67
|
[control-start expand-collapse-end] minmax(0, min-content)
|
|
67
68
|
[control-end content-start] minmax(0, auto)
|
|
68
69
|
[content-end actions-start] minmax(0, min-content)
|
|
@@ -79,6 +80,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
79
80
|
}
|
|
80
81
|
|
|
81
82
|
::slotted([slot="outside-control"]),
|
|
83
|
+
::slotted([slot="color-indicator"]),
|
|
82
84
|
::slotted([slot="expand-collapse"]),
|
|
83
85
|
::slotted([slot="control"]),
|
|
84
86
|
::slotted([slot="content"]),
|
|
@@ -110,6 +112,10 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
110
112
|
grid-column: content-start / content-end;
|
|
111
113
|
}
|
|
112
114
|
|
|
115
|
+
::slotted([slot="color-indicator"]) {
|
|
116
|
+
grid-column: color-start / color-end;
|
|
117
|
+
}
|
|
118
|
+
|
|
113
119
|
::slotted([slot="control-action"]) ~ ::slotted([slot="content"]),
|
|
114
120
|
::slotted([slot="outside-control-action"]) ~ ::slotted([slot="content"]) {
|
|
115
121
|
pointer-events: unset;
|
|
@@ -152,7 +158,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
152
158
|
grid-column: start / end;
|
|
153
159
|
}
|
|
154
160
|
::slotted([slot="control-container"]) {
|
|
155
|
-
grid-column:
|
|
161
|
+
grid-column: color-start / end;
|
|
156
162
|
}
|
|
157
163
|
|
|
158
164
|
::slotted([slot="nested"]) {
|
|
@@ -198,6 +204,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
198
204
|
<slot name="content-action" class="d2l-cell" data-cell-num="6"></slot>
|
|
199
205
|
<slot name="outside-control" class="d2l-cell" data-cell-num="2"></slot>
|
|
200
206
|
<slot name="outside-control-action" class="d2l-cell" data-cell-num="1"></slot>
|
|
207
|
+
<slot name="color-indicator"></slot>
|
|
201
208
|
<slot name="expand-collapse" class="d2l-cell" data-cell-num="4"></slot>
|
|
202
209
|
<slot name="content" class="d2l-cell" data-cell-num="8" @focus="${!this.noPrimaryAction ? this._preventFocus : null}"></slot>
|
|
203
210
|
<slot name="control-action" class="d2l-cell" data-cell-num="3"></slot>
|
|
@@ -9,6 +9,7 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
9
9
|
import { composeMixins } from '../../helpers/composeMixins.js';
|
|
10
10
|
import { getFirstFocusableDescendant } from '../../helpers/focus.js';
|
|
11
11
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
12
|
+
import { getValidHexColor } from '../../helpers/color.js';
|
|
12
13
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
13
14
|
import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
|
|
14
15
|
import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
|
|
@@ -18,6 +19,7 @@ import { ListItemRoleMixin } from './list-item-role-mixin.js';
|
|
|
18
19
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
19
20
|
import ResizeObserver from 'resize-observer-polyfill';
|
|
20
21
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
22
|
+
import { styleMap } from 'lit-html/directives/style-map.js';
|
|
21
23
|
|
|
22
24
|
let tabPressed = false;
|
|
23
25
|
let tabListenerAdded = false;
|
|
@@ -67,6 +69,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
67
69
|
* @type {array}
|
|
68
70
|
*/
|
|
69
71
|
breakpoints: { type: Array },
|
|
72
|
+
/**
|
|
73
|
+
* A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).
|
|
74
|
+
* @type {string}
|
|
75
|
+
*/
|
|
76
|
+
color: { type: String },
|
|
70
77
|
/**
|
|
71
78
|
* Whether to allow the drag target to be the handle only rather than the entire cell
|
|
72
79
|
* @type {boolean}
|
|
@@ -311,6 +318,14 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
311
318
|
margin: 0;
|
|
312
319
|
}
|
|
313
320
|
|
|
321
|
+
:host(:not([draggable])[color]) [slot="outside-control-container"] {
|
|
322
|
+
margin-left: -6px;
|
|
323
|
+
}
|
|
324
|
+
:host(:not([draggable])[dir="rtl"][color]) [slot="outside-control-container"] {
|
|
325
|
+
margin-left: 0;
|
|
326
|
+
margin-right: -6px;
|
|
327
|
+
}
|
|
328
|
+
|
|
314
329
|
:host([_hovering-primary-action]) [slot="outside-control-container"],
|
|
315
330
|
:host([_hovering-selection]) [slot="outside-control-container"],
|
|
316
331
|
:host([_focusing-primary-action]) [slot="outside-control-container"],
|
|
@@ -366,6 +381,26 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
366
381
|
:host([skeleton]) {
|
|
367
382
|
pointer-events: none;
|
|
368
383
|
}
|
|
384
|
+
|
|
385
|
+
.d2l-list-item-color-inner {
|
|
386
|
+
border-radius: 6px;
|
|
387
|
+
height: 100%;
|
|
388
|
+
width: 6px;
|
|
389
|
+
}
|
|
390
|
+
.d2l-list-item-color-outer {
|
|
391
|
+
padding: 2px 12px 1px 0;
|
|
392
|
+
}
|
|
393
|
+
:host([dir="rtl"]) .d2l-list-item-color-outer {
|
|
394
|
+
padding-left: 12px;
|
|
395
|
+
padding-right: 0;
|
|
396
|
+
}
|
|
397
|
+
:host([expandable]) .d2l-list-item-color-outer {
|
|
398
|
+
padding-right: 6px;
|
|
399
|
+
}
|
|
400
|
+
:host([dir="rtl"][expandable]) .d2l-list-item-color-outer {
|
|
401
|
+
padding-left: 6px;
|
|
402
|
+
padding-right: 0;
|
|
403
|
+
}
|
|
369
404
|
`];
|
|
370
405
|
|
|
371
406
|
super.styles && styles.unshift(super.styles);
|
|
@@ -394,6 +429,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
394
429
|
this.requestUpdate('breakpoints', oldValue);
|
|
395
430
|
}
|
|
396
431
|
|
|
432
|
+
get color() {
|
|
433
|
+
return this._color;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
set color(value) {
|
|
437
|
+
const oldValue = this._color;
|
|
438
|
+
this._color = getValidHexColor(value, true);
|
|
439
|
+
this.requestUpdate('value', oldValue);
|
|
440
|
+
}
|
|
441
|
+
|
|
397
442
|
connectedCallback() {
|
|
398
443
|
super.connectedCallback();
|
|
399
444
|
ro.observe(this);
|
|
@@ -596,6 +641,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
596
641
|
'd2l-list-item-content-extend-separators': this._extendSeparators,
|
|
597
642
|
'd2l-dragging-over': this._draggingOver
|
|
598
643
|
};
|
|
644
|
+
const colorStyles = {
|
|
645
|
+
backgroundColor: this.color || undefined
|
|
646
|
+
};
|
|
599
647
|
|
|
600
648
|
const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId) : null);
|
|
601
649
|
const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
|
|
@@ -614,6 +662,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
614
662
|
${this._renderDragHandle(this._renderOutsideControl)}
|
|
615
663
|
${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
|
|
616
664
|
<div slot="control-container"></div>
|
|
665
|
+
${this.color ? html`
|
|
666
|
+
<div slot="color-indicator" class="d2l-list-item-color-outer">
|
|
667
|
+
<div class="d2l-list-item-color-inner" style="${styleMap(colorStyles)}"></div>
|
|
668
|
+
</div>` : nothing}
|
|
617
669
|
<div slot="expand-collapse" class="d2l-list-expand-collapse" @click="${this._toggleExpandCollapse}">
|
|
618
670
|
${this._renderExpandCollapse()}
|
|
619
671
|
</div>
|
package/custom-elements.json
CHANGED
|
@@ -7893,6 +7893,11 @@
|
|
|
7893
7893
|
"description": "Whether to allow the drag target to be the handle only rather than the entire cell",
|
|
7894
7894
|
"type": "boolean"
|
|
7895
7895
|
},
|
|
7896
|
+
{
|
|
7897
|
+
"name": "color",
|
|
7898
|
+
"description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
|
|
7899
|
+
"type": "string"
|
|
7900
|
+
},
|
|
7896
7901
|
{
|
|
7897
7902
|
"name": "breakpoints",
|
|
7898
7903
|
"description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
|
|
@@ -7989,6 +7994,12 @@
|
|
|
7989
7994
|
"description": "Whether to allow the drag target to be the handle only rather than the entire cell",
|
|
7990
7995
|
"type": "boolean"
|
|
7991
7996
|
},
|
|
7997
|
+
{
|
|
7998
|
+
"name": "color",
|
|
7999
|
+
"attribute": "color",
|
|
8000
|
+
"description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
|
|
8001
|
+
"type": "string"
|
|
8002
|
+
},
|
|
7992
8003
|
{
|
|
7993
8004
|
"name": "breakpoints",
|
|
7994
8005
|
"attribute": "breakpoints",
|
|
@@ -8236,6 +8247,11 @@
|
|
|
8236
8247
|
"description": "Whether to allow the drag target to be the handle only rather than the entire cell",
|
|
8237
8248
|
"type": "boolean"
|
|
8238
8249
|
},
|
|
8250
|
+
{
|
|
8251
|
+
"name": "color",
|
|
8252
|
+
"description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
|
|
8253
|
+
"type": "string"
|
|
8254
|
+
},
|
|
8239
8255
|
{
|
|
8240
8256
|
"name": "breakpoints",
|
|
8241
8257
|
"description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
|
|
@@ -8339,6 +8355,12 @@
|
|
|
8339
8355
|
"description": "Whether to allow the drag target to be the handle only rather than the entire cell",
|
|
8340
8356
|
"type": "boolean"
|
|
8341
8357
|
},
|
|
8358
|
+
{
|
|
8359
|
+
"name": "color",
|
|
8360
|
+
"attribute": "color",
|
|
8361
|
+
"description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
|
|
8362
|
+
"type": "string"
|
|
8363
|
+
},
|
|
8342
8364
|
{
|
|
8343
8365
|
"name": "breakpoints",
|
|
8344
8366
|
"attribute": "breakpoints",
|
|
@@ -8708,6 +8730,11 @@
|
|
|
8708
8730
|
"description": "Whether to allow the drag target to be the handle only rather than the entire cell",
|
|
8709
8731
|
"type": "boolean"
|
|
8710
8732
|
},
|
|
8733
|
+
{
|
|
8734
|
+
"name": "color",
|
|
8735
|
+
"description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
|
|
8736
|
+
"type": "string"
|
|
8737
|
+
},
|
|
8711
8738
|
{
|
|
8712
8739
|
"name": "breakpoints",
|
|
8713
8740
|
"description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
|
|
@@ -8816,6 +8843,12 @@
|
|
|
8816
8843
|
"description": "Whether to allow the drag target to be the handle only rather than the entire cell",
|
|
8817
8844
|
"type": "boolean"
|
|
8818
8845
|
},
|
|
8846
|
+
{
|
|
8847
|
+
"name": "color",
|
|
8848
|
+
"attribute": "color",
|
|
8849
|
+
"description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
|
|
8850
|
+
"type": "string"
|
|
8851
|
+
},
|
|
8819
8852
|
{
|
|
8820
8853
|
"name": "breakpoints",
|
|
8821
8854
|
"attribute": "breakpoints",
|
package/helpers/color.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const HEX_CHAR = '[0-9a-f]';
|
|
2
|
+
const HEX_REGEX = new RegExp(`^#(${HEX_CHAR}{3}|${HEX_CHAR}{6})$`, 'i');
|
|
3
|
+
const HEX_REGEX_ALPHA = new RegExp(`^#(${HEX_CHAR}{4}|${HEX_CHAR}{8})$`, 'i');
|
|
4
|
+
|
|
5
|
+
export function getValidHexColor(value, canHaveAlpha) {
|
|
6
|
+
|
|
7
|
+
if (!canHaveAlpha) {
|
|
8
|
+
if (value !== undefined && !HEX_REGEX.test(value)) {
|
|
9
|
+
throw new TypeError(`Invalid HEX color value "${value}". Expecting a 3 or 6 character HEX color.`);
|
|
10
|
+
}
|
|
11
|
+
} else {
|
|
12
|
+
if (value !== undefined && !HEX_REGEX.test(value) && !HEX_REGEX_ALPHA.test(value)) {
|
|
13
|
+
throw new TypeError(`Invalid HEX color value "${value}". Expecting a 3, 4, 6, or 8 character HEX color.`);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
return (typeof value === 'string') ? value.toUpperCase() : undefined;
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.142.0",
|
|
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",
|