@brightspace-ui/core 3.128.2 → 3.129.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.
- package/components/inputs/input-color.js +18 -5
- package/components/list/demo/demo-list-nav.js +1 -1
- package/components/list/demo/list-nav.html +94 -0
- package/components/list/demo/list-nested.html +0 -71
- package/components/list/list-item-button-mixin.js +1 -1
- package/components/list/list-item-drag-drop-mixin.js +2 -0
- package/components/list/list-item-mixin.js +4 -2
- package/components/list/list-item-nav-button-mixin.js +23 -7
- package/package.json +1 -1
|
@@ -19,7 +19,7 @@ import { styleMap } from 'lit/directives/style-map.js';
|
|
|
19
19
|
const DEFAULT_VALUE = '#000000';
|
|
20
20
|
const DEFAULT_VALUE_BG = '#FFFFFF';
|
|
21
21
|
const ICON_BACKGROUND = html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" fill="none" viewBox="0 0 16 13">
|
|
22
|
-
<g
|
|
22
|
+
<g fill="currentColor" clip-path="url(#a)">
|
|
23
23
|
<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"/>
|
|
24
24
|
<path d="M12.994 11c0 1 .506 1.5 1.506 1.5S16 12 16 11c0-2-1-4.5-1.794-4.526 0 2.526-1.211 2.851-1.212 4.525Z"/>
|
|
25
25
|
<path fill-rule="evenodd" d="M7.544 4.205a.55.55 0 0 1-.004-.01c-.334-.785-.925-1.602-1.603-2.218C5.244 1.347 4.543 1 4 1a.227.227 0 0 0-.086.011.208.208 0 0 0-.027.073c-.039.162-.02.44.066.8.081.343.205.694.312.964a9.174 9.174 0 0 0 .174.41l.01.022.002.005v.001a.5.5 0 0 1-.903.428L4 3.5l-.452.214v-.001l-.002-.002-.003-.008-.013-.028a10.168 10.168 0 0 1-.195-.46 8.313 8.313 0 0 1-.355-1.1c-.092-.39-.161-.86-.066-1.262.05-.21.153-.436.355-.606C3.475.073 3.731 0 4 0c.914 0 1.849.545 2.61 1.237a7.784 7.784 0 0 1 1.719 2.278 1 1 0 1 1-.784.69ZM3.91 1.014l.003-.002-.003.002Z" clip-rule="evenodd"/>
|
|
@@ -31,8 +31,8 @@ const ICON_BACKGROUND = html`<svg xmlns="http://www.w3.org/2000/svg" width="16"
|
|
|
31
31
|
</defs>
|
|
32
32
|
</svg>`;
|
|
33
33
|
const ICON_FOREGROUND = html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" fill="none" viewBox="0 0 16 13">
|
|
34
|
-
<g clip-path="url(#a)">
|
|
35
|
-
<path
|
|
34
|
+
<g fill="currentColor" clip-path="url(#a)">
|
|
35
|
+
<path d="M10.325 8.086 8.74 3.757a9.472 9.472 0 0 1-.243-.684 22.281 22.281 0 0 1-.252-.855c-.078.306-.16.594-.243.864-.084.264-.165.495-.243.693L6.185 8.086h4.14ZM14.6 13h-1.872a.815.815 0 0 1-.513-.153 1.016 1.016 0 0 1-.297-.396l-.972-2.655H5.555l-.972 2.655a.863.863 0 0 1-.28.378.779.779 0 0 1-.512.171H1.9L7.02-.014h2.467L14.6 13Z"/>
|
|
36
36
|
</g>
|
|
37
37
|
<defs>
|
|
38
38
|
<clipPath id="a">
|
|
@@ -212,6 +212,11 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
|
|
|
212
212
|
height: 0.6rem;
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
+
button,
|
|
216
|
+
.readonly-wrapper {
|
|
217
|
+
color: var(--d2l-color-ferrite);
|
|
218
|
+
}
|
|
219
|
+
|
|
215
220
|
.readonly-wrapper {
|
|
216
221
|
border-radius: 0.1rem;
|
|
217
222
|
display: block;
|
|
@@ -224,7 +229,15 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
|
|
|
224
229
|
outline: none;
|
|
225
230
|
}
|
|
226
231
|
.readonly-wrapper:${unsafeCSS(getFocusPseudoClass())} {
|
|
227
|
-
|
|
232
|
+
outline: 2px solid var(--d2l-color-celestine);
|
|
233
|
+
outline-offset: 2px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
@media (prefers-contrast: more) {
|
|
237
|
+
.swatch {
|
|
238
|
+
border: 1px solid FieldText;
|
|
239
|
+
forced-color-adjust: none;
|
|
240
|
+
}
|
|
228
241
|
}
|
|
229
242
|
`
|
|
230
243
|
];
|
|
@@ -319,7 +332,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
|
|
|
319
332
|
>
|
|
320
333
|
${this._getSwatch()}
|
|
321
334
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="none" viewBox="0 0 10 6">
|
|
322
|
-
<path fill="
|
|
335
|
+
<path fill="currentColor" d="M4.792 5.528a.733.733 0 0 1-.537-.223L.224 1.282a.745.745 0 0 1 0-1.065.751.751 0 0 1 1.057 0l3.51 3.511L8.303.218A.751.751 0 0 1 9.36 1.281L5.337 5.305a.753.753 0 0 1-.535.223h-.01Z"/>
|
|
323
336
|
</svg>
|
|
324
337
|
</button>`;
|
|
325
338
|
if (this.launchType === 'dialog') {
|
|
@@ -149,7 +149,7 @@ class ListDemoNav extends LitElement {
|
|
|
149
149
|
}
|
|
150
150
|
</d2l-list-item-content>
|
|
151
151
|
${hasSubList ? html`
|
|
152
|
-
<d2l-list slot="nested">
|
|
152
|
+
<d2l-list slot="nested" grid>
|
|
153
153
|
${repeat(item.items, (subItem) => subItem.key, (subItem) => this._renderItem(subItem))}
|
|
154
154
|
</d2l-list>`
|
|
155
155
|
: nothing
|
|
@@ -0,0 +1,94 @@
|
|
|
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 '../../demo/demo-page.js';
|
|
9
|
+
import '../../icons/icon.js';
|
|
10
|
+
import '../list-item-content.js';
|
|
11
|
+
import '../list-item-nav-button.js';
|
|
12
|
+
import '../list.js';
|
|
13
|
+
import '../../tooltip/tooltip-help.js';
|
|
14
|
+
|
|
15
|
+
import './demo-list-nav.js';
|
|
16
|
+
import './demo-list-nested-iterations-helper.js';
|
|
17
|
+
</script>
|
|
18
|
+
</head>
|
|
19
|
+
<body unresolved>
|
|
20
|
+
|
|
21
|
+
<d2l-demo-page page-title="d2l-list (nav)">
|
|
22
|
+
|
|
23
|
+
<h2>Side nav list (simple)</h2>
|
|
24
|
+
|
|
25
|
+
<d2l-demo-snippet>
|
|
26
|
+
<template>
|
|
27
|
+
<d2l-list grid style="width: 334px;">
|
|
28
|
+
<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded>
|
|
29
|
+
<d2l-list-item-content>
|
|
30
|
+
<div>Welcome!</div>
|
|
31
|
+
</d2l-list-item-content>
|
|
32
|
+
<d2l-list slot="nested" grid>
|
|
33
|
+
<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation">
|
|
34
|
+
<d2l-list-item-content>
|
|
35
|
+
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
|
|
36
|
+
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm" style="padding: 5px;">Start: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
37
|
+
</d2l-list-item-content>
|
|
38
|
+
</d2l-list-item-nav-button>
|
|
39
|
+
</d2l-list>
|
|
40
|
+
</d2l-list-item-nav-button>
|
|
41
|
+
<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
|
|
42
|
+
<d2l-list-item-content>
|
|
43
|
+
<div>Unit 1: Fiction</div>
|
|
44
|
+
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 5 pm" style="padding: 5px;">Starts: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
45
|
+
</d2l-list-item-content>
|
|
46
|
+
<d2l-list slot="nested" grid>
|
|
47
|
+
<d2l-list-item-nav-button key="L3-2" label="Fiction">
|
|
48
|
+
<d2l-list-item-content>
|
|
49
|
+
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
|
|
50
|
+
</d2l-list-item-content>
|
|
51
|
+
</d2l-list-item-nav-button>
|
|
52
|
+
<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction">
|
|
53
|
+
<d2l-list-item-content>
|
|
54
|
+
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
|
|
55
|
+
</d2l-list-item-content>
|
|
56
|
+
</d2l-list-item-nav-button>
|
|
57
|
+
</d2l-list>
|
|
58
|
+
</d2l-list-item-nav-button>
|
|
59
|
+
</d2l-list>
|
|
60
|
+
<script>
|
|
61
|
+
(demo => {
|
|
62
|
+
let currentItem = document.querySelector('d2l-list-item-nav-button[current]');
|
|
63
|
+
demo.addEventListener('d2l-list-item-button-click', (e) => {
|
|
64
|
+
console.log('d2l-list-item-nav-button: click event');
|
|
65
|
+
|
|
66
|
+
if (!e.target.expandable) {
|
|
67
|
+
currentItem = e.target;
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (currentItem !== e.target) {
|
|
72
|
+
e.target.expanded = true;
|
|
73
|
+
currentItem = e.target;
|
|
74
|
+
} else {
|
|
75
|
+
e.target.expanded = !e.target.expanded;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
})(document.currentScript.parentNode);
|
|
79
|
+
</script>
|
|
80
|
+
</template>
|
|
81
|
+
</d2l-demo-snippet>
|
|
82
|
+
|
|
83
|
+
<h2>Side nav list (more complex with drag & drop)</h2>
|
|
84
|
+
|
|
85
|
+
<d2l-demo-snippet>
|
|
86
|
+
<template>
|
|
87
|
+
<d2l-demo-list-nav></d2l-demo-list-nav>
|
|
88
|
+
</template>
|
|
89
|
+
</d2l-demo-snippet>
|
|
90
|
+
|
|
91
|
+
</d2l-demo-page>
|
|
92
|
+
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
import '../list-item-content.js';
|
|
16
16
|
import './list-item-custom.js';
|
|
17
17
|
import '../list-item.js';
|
|
18
|
-
import '../list-item-nav-button.js';
|
|
19
18
|
import '../list-controls.js';
|
|
20
19
|
import '../list.js';
|
|
21
20
|
import '../../menu/menu.js';
|
|
@@ -23,9 +22,7 @@
|
|
|
23
22
|
import '../../paging/pager-load-more.js';
|
|
24
23
|
import '../../selection/selection-action.js';
|
|
25
24
|
import '../../switch/switch.js';
|
|
26
|
-
import '../../tooltip/tooltip-help.js';
|
|
27
25
|
|
|
28
|
-
import './demo-list-nav.js';
|
|
29
26
|
import './demo-list-nested-iterations-helper.js';
|
|
30
27
|
</script>
|
|
31
28
|
</head>
|
|
@@ -227,74 +224,6 @@
|
|
|
227
224
|
</template>
|
|
228
225
|
</d2l-demo-snippet>
|
|
229
226
|
|
|
230
|
-
<h2>Side nav list (simple)</h2>
|
|
231
|
-
|
|
232
|
-
<d2l-demo-snippet>
|
|
233
|
-
<template>
|
|
234
|
-
<d2l-list grid style="width: 334px;">
|
|
235
|
-
<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded>
|
|
236
|
-
<d2l-list-item-content>
|
|
237
|
-
<div>Welcome!</div>
|
|
238
|
-
</d2l-list-item-content>
|
|
239
|
-
<d2l-list slot="nested" grid>
|
|
240
|
-
<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation">
|
|
241
|
-
<d2l-list-item-content>
|
|
242
|
-
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
|
|
243
|
-
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm" style="padding: 5px;">Start: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
244
|
-
</d2l-list-item-content>
|
|
245
|
-
</d2l-list-item-nav-button>
|
|
246
|
-
</d2l-list>
|
|
247
|
-
</d2l-list-item-nav-button>
|
|
248
|
-
<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
|
|
249
|
-
<d2l-list-item-content>
|
|
250
|
-
<div>Unit 1: Fiction</div>
|
|
251
|
-
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 5 pm" style="padding: 5px;">Starts: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
252
|
-
</d2l-list-item-content>
|
|
253
|
-
<d2l-list slot="nested" grid>
|
|
254
|
-
<d2l-list-item-nav-button key="L3-2" label="Fiction">
|
|
255
|
-
<d2l-list-item-content>
|
|
256
|
-
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
|
|
257
|
-
</d2l-list-item-content>
|
|
258
|
-
</d2l-list-item-nav-button>
|
|
259
|
-
<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction">
|
|
260
|
-
<d2l-list-item-content>
|
|
261
|
-
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
|
|
262
|
-
</d2l-list-item-content>
|
|
263
|
-
</d2l-list-item-nav-button>
|
|
264
|
-
</d2l-list>
|
|
265
|
-
</d2l-list-item-nav-button>
|
|
266
|
-
</d2l-list>
|
|
267
|
-
<script>
|
|
268
|
-
(demo => {
|
|
269
|
-
let currentItem = document.querySelector('d2l-list-item-nav-button[current]');
|
|
270
|
-
demo.addEventListener('d2l-list-item-button-click', (e) => {
|
|
271
|
-
console.log('d2l-list-item-nav-button: click event');
|
|
272
|
-
|
|
273
|
-
if (!e.target.expandable) {
|
|
274
|
-
currentItem = e.target;
|
|
275
|
-
return;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
if (currentItem !== e.target) {
|
|
279
|
-
e.target.expanded = true;
|
|
280
|
-
currentItem = e.target;
|
|
281
|
-
} else {
|
|
282
|
-
e.target.expanded = !e.target.expanded;
|
|
283
|
-
}
|
|
284
|
-
});
|
|
285
|
-
})(document.currentScript.parentNode);
|
|
286
|
-
</script>
|
|
287
|
-
</template>
|
|
288
|
-
</d2l-demo-snippet>
|
|
289
|
-
|
|
290
|
-
<h2>Side nav list (more complex with drag & drop)</h2>
|
|
291
|
-
|
|
292
|
-
<d2l-demo-snippet>
|
|
293
|
-
<template>
|
|
294
|
-
<d2l-demo-list-nav></d2l-demo-list-nav>
|
|
295
|
-
</template>
|
|
296
|
-
</d2l-demo-snippet>
|
|
297
|
-
|
|
298
227
|
<h2>All Iterations</h2>
|
|
299
228
|
|
|
300
229
|
<d2l-demo-snippet full-width>
|
|
@@ -116,7 +116,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
|
|
|
116
116
|
|
|
117
117
|
_onButtonFocus(e) {
|
|
118
118
|
if (this._getDescendantClicked(e)) {
|
|
119
|
-
|
|
119
|
+
requestAnimationFrame(() => this._focusingPrimaryAction = false);
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
122
|
|
|
@@ -339,6 +339,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
|
|
|
339
339
|
opacity: 0;
|
|
340
340
|
}
|
|
341
341
|
:host([selected]) d2l-list-item-drag-handle,
|
|
342
|
+
:host([current]) d2l-list-item-drag-handle,
|
|
343
|
+
:host([_focusing-elem]) d2l-list-item-drag-handle,
|
|
342
344
|
d2l-list-item-drag-handle:hover,
|
|
343
345
|
d2l-list-item-drag-handle.d2l-hovering,
|
|
344
346
|
d2l-list-item-drag-handle.d2l-focusing {
|
|
@@ -320,7 +320,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
320
320
|
:host([_hovering-selection]) [slot="outside-control-container"],
|
|
321
321
|
:host([_focusing-primary-action]) [slot="outside-control-container"],
|
|
322
322
|
:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"],
|
|
323
|
-
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"]
|
|
323
|
+
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"],
|
|
324
|
+
:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]:not([current])) [slot="outside-control-container"] {
|
|
324
325
|
border-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
|
|
325
326
|
margin-bottom: -1px;
|
|
326
327
|
}
|
|
@@ -331,7 +332,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
331
332
|
:host([_focusing-primary-action]) [slot="outside-control-container"].hide-bottom-border,
|
|
332
333
|
:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border,
|
|
333
334
|
:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
|
|
334
|
-
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border
|
|
335
|
+
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border,
|
|
336
|
+
:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]) [slot="outside-control-container"].hide-bottom-border {
|
|
335
337
|
background-clip: content-box, border-box;
|
|
336
338
|
background-image: linear-gradient(white, white), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
|
|
337
339
|
background-origin: border-box;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css } from 'lit';
|
|
3
|
+
import { findComposedAncestor } from '../../helpers/dom.js';
|
|
4
|
+
import { getComposedActiveElement } from '../../helpers/focus.js';
|
|
3
5
|
import { ListItemButtonMixin } from './list-item-button-mixin.js';
|
|
4
6
|
|
|
5
7
|
export const ListItemNavButtonMixin = superclass => class extends ListItemButtonMixin(superclass) {
|
|
@@ -12,6 +14,7 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
12
14
|
*/
|
|
13
15
|
current: { type: Boolean, reflect: true },
|
|
14
16
|
_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
|
|
17
|
+
_focusingElem: { type: Boolean, reflect: true, attribute: '_focusing-elem' },
|
|
15
18
|
};
|
|
16
19
|
}
|
|
17
20
|
|
|
@@ -25,19 +28,14 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
25
28
|
width: 100%;
|
|
26
29
|
}
|
|
27
30
|
:host([current]) [slot="outside-control-container"] {
|
|
31
|
+
background-color: var(--d2l-color-regolith);
|
|
28
32
|
border: 3px solid var(--d2l-color-celestine);
|
|
29
|
-
margin-block:
|
|
30
|
-
}
|
|
31
|
-
:host([_focusing-primary-action]:not([current])) [slot="outside-control-container"] {
|
|
32
|
-
border: 2px solid var(--d2l-color-celestine);
|
|
33
|
+
margin-block: 0;
|
|
33
34
|
}
|
|
34
35
|
:host([current]) [slot="control-container"]::before,
|
|
35
36
|
:host([current]) [slot="control-container"]::after {
|
|
36
37
|
border-color: transparent;
|
|
37
38
|
}
|
|
38
|
-
:host([_focusing-primary-action]) .d2l-list-item-content {
|
|
39
|
-
--d2l-list-item-content-text-outline: none;
|
|
40
|
-
}
|
|
41
39
|
:host([_hovering-primary-action]) .d2l-list-item-content,
|
|
42
40
|
:host([_focusing-primary-action]) .d2l-list-item-content {
|
|
43
41
|
--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
|
|
@@ -54,6 +52,7 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
54
52
|
super();
|
|
55
53
|
this.current = false;
|
|
56
54
|
this._childCurrent = false;
|
|
55
|
+
this._focusingElem = false;
|
|
57
56
|
}
|
|
58
57
|
|
|
59
58
|
connectedCallback() {
|
|
@@ -72,6 +71,9 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
72
71
|
if (this.current) {
|
|
73
72
|
this.dispatchSetChildCurrentEvent(true);
|
|
74
73
|
}
|
|
74
|
+
|
|
75
|
+
this.addEventListener('focusin', this.#handleFocusIn);
|
|
76
|
+
this.addEventListener('focusout', this.#handleFocusOut);
|
|
75
77
|
}
|
|
76
78
|
|
|
77
79
|
updated(changedProperties) {
|
|
@@ -111,6 +113,20 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
111
113
|
super._onButtonClick(e);
|
|
112
114
|
}
|
|
113
115
|
|
|
116
|
+
#handleFocusIn() {
|
|
117
|
+
requestAnimationFrame(() => {
|
|
118
|
+
const activeElement = getComposedActiveElement();
|
|
119
|
+
const parentListItem = findComposedAncestor(activeElement, (node) => node.role === 'row' || node.role === 'listitem');
|
|
120
|
+
if (parentListItem && parentListItem === this) {
|
|
121
|
+
this._focusingElem = true;
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
#handleFocusOut() {
|
|
127
|
+
this._focusingElem = false;
|
|
128
|
+
}
|
|
129
|
+
|
|
114
130
|
#setAriaCurrent(val) {
|
|
115
131
|
this._ariaCurrent = val;
|
|
116
132
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.129.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",
|