@brightspace-ui/core 2.141.1 → 2.142.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.
Files changed (10) hide show
  1. package/components/button/button-icon.js +4 -8
  2. package/components/button/floating-buttons.js +28 -1
  3. package/components/inputs/input-color.js +3 -9
  4. package/components/list/demo/demo-list-nested-iterations-helper.js +22 -4
  5. package/components/list/demo/list-color.html +336 -0
  6. package/components/list/list-item-generic-layout.js +9 -2
  7. package/components/list/list-item-mixin.js +52 -0
  8. package/custom-elements.json +33 -0
  9. package/helpers/color.js +17 -0
  10. package/package.json +1 -1
package/components/button/button-icon.js CHANGED
@@ -106,14 +106,10 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
106
106
  button::-moz-focus-inner {
107
107
  border: 0;
108
108
  }
109
- button[disabled]:hover,
110
- button[disabled]:focus,
111
- :host([active]) button[disabled] {
112
- background-color: var(--d2l-button-icon-background-color);
113
- }
114
- button:hover,
115
- button:focus,
116
- :host([active]) button {
109
+
110
+ button:hover:not([disabled]),
111
+ button:focus:not([disabled]),
112
+ :host([active]) button:not([disabled]) {
117
113
  --d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
118
114
  background-color: var(--d2l-button-icon-background-color-hover);
119
115
  }
package/components/button/floating-buttons.js CHANGED
@@ -1,12 +1,14 @@
1
1
  import '../colors/colors.js';
2
2
  import '../../helpers/requestIdleCallback.js';
3
3
  import { css, html, LitElement } from 'lit';
4
- import { getBoundingAncestor, getComposedParent } from '../../helpers/dom.js';
4
+ import { getBoundingAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
5
+ import { getComposedActiveElement } from '../../helpers/focus.js';
5
6
  import { getLegacyOffsetParent } from '../../helpers/offsetParent-legacy.js';
6
7
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
7
8
  import { styleMap } from 'lit/directives/style-map.js';
8
9
 
9
10
  const mediaQueryList = window.matchMedia('(max-height: 500px)');
11
+ const MINIMUM_TARGET_SIZE = 24;
10
12
 
11
13
  /**
12
14
  * A wrapper component to display floating workflow buttons. When the normal position of the workflow buttons is below the bottom edge of the viewport, they will dock at the bottom edge. When the normal position becomes visible, they will undock.
@@ -113,6 +115,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
113
115
  this._isIntersecting = false;
114
116
  this._recalculateFloating = this._recalculateFloating.bind(this);
115
117
  this._testElem = null;
118
+ this._scrollIfFloatObsuringFocus = this._scrollIfFloatObsuringFocus.bind(this);
116
119
  }
117
120
 
118
121
  connectedCallback() {
@@ -144,6 +147,8 @@ class FloatingButtons extends RtlMixin(LitElement) {
144
147
  }
145
148
  }, { timeout: 5000 });
146
149
 
150
+ document.addEventListener('focusin', this._scrollIfFloatObsuringFocus);
151
+
147
152
  }
148
153
 
149
154
  disconnectedCallback() {
@@ -154,6 +159,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
154
159
  this._testElem.parentNode.removeChild(this._testElem);
155
160
  this._testElem = null;
156
161
  }
162
+ document.removeEventListener('focusin', this._scrollIfFloatObsuringFocus);
157
163
  }
158
164
 
159
165
  render() {
@@ -270,6 +276,27 @@ class FloatingButtons extends RtlMixin(LitElement) {
270
276
  });
271
277
  }
272
278
 
279
+ _scrollIfFloatObsuringFocus() {
280
+
281
+ if (!this._floating) return;
282
+
283
+ const currentFocusedItem = getComposedActiveElement();
284
+ if (isComposedAncestor(this, currentFocusedItem)) return;
285
+
286
+ const { y: focusedY, height: focusedHeight } = currentFocusedItem.getBoundingClientRect();
287
+ const { y: floatingY, height: floatingHeight } = this.shadowRoot.querySelector('.d2l-floating-buttons-container').getBoundingClientRect();
288
+ if (focusedY === 0 || floatingY === 0) return;
289
+
290
+ const isObscuring = (floatingY - focusedY) < Math.min(MINIMUM_TARGET_SIZE, focusedHeight);
291
+ if (!isObscuring) return;
292
+
293
+ const prev = currentFocusedItem.style.scrollMarginBottom;
294
+ currentFocusedItem.style.scrollMarginBottom = `${floatingHeight}px`;
295
+ currentFocusedItem.scrollIntoView(false);
296
+ currentFocusedItem.style.scrollMarginBottom = prev;
297
+
298
+ }
299
+
273
300
  }
274
301
 
275
302
  customElements.define('d2l-floating-buttons', FloatingButtons);
package/components/inputs/input-color.js CHANGED
@@ -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 = (typeof val === 'string') ? val.toUpperCase() : undefined;
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 = (typeof val === 'string') ? val.toUpperCase() : undefined;
253
+ this._value = getValidHexColor(val);
260
254
  this.requestUpdate('value', oldVal);
261
255
  }
262
256
 
package/components/list/demo/demo-list-nested-iterations-helper.js CHANGED
@@ -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="2" scope="rowgroup">${option.name}</th>
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>
package/components/list/demo/list-color.html ADDED
@@ -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>
package/components/list/list-item-generic-layout.js CHANGED
@@ -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
- [expand-collapse-start outside-control-end] minmax(0, min-content)
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: expand-collapse-start / end;
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>
package/components/list/list-item-mixin.js CHANGED
@@ -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.141.1",
3
+ "version": "2.142.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",