@brightspace-ui/core 2.5.0 → 2.6.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/filter/filter.js +2 -1
- package/components/list/list-item-button-mixin.js +16 -3
- package/components/list/list-item-drag-drop-mixin.js +9 -2
- package/components/list/list-item-generic-layout.js +21 -2
- package/components/list/list-item-link-mixin.js +13 -3
- package/components/list/list-item-mixin.js +89 -82
- package/components/list/list-item-role-mixin.js +9 -1
- package/custom-elements.json +13 -0
- package/package.json +1 -1
|
@@ -398,7 +398,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
|
|
|
398
398
|
@d2l-list-selection-change="${this._handleChangeSetDimension}"
|
|
399
399
|
extend-separators
|
|
400
400
|
grid
|
|
401
|
-
?selection-single="${dimension.selectionSingle}"
|
|
401
|
+
?selection-single="${dimension.selectionSingle}"
|
|
402
|
+
separators="between">
|
|
402
403
|
${dimension.values.map(item => html`
|
|
403
404
|
<d2l-list-item
|
|
404
405
|
?hidden="${item.hidden}"
|
|
@@ -11,9 +11,22 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
|
|
|
11
11
|
:host {
|
|
12
12
|
--d2l-list-item-content-text-color: var(--d2l-color-celestine);
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
[slot="outside-control-container"] {
|
|
15
|
+
margin: 0 -12px;
|
|
16
|
+
}
|
|
17
|
+
:host([_hovering]) [slot="control-container"]::before,
|
|
18
|
+
:host([_hovering]) [slot="control-container"]::after,
|
|
19
|
+
:host([_focusing]) [slot="control-container"]::before,
|
|
20
|
+
:host([_focusing]) [slot="control-container"]::after {
|
|
21
|
+
border-top-color: transparent;
|
|
22
|
+
}
|
|
23
|
+
:host(:not([disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
|
|
24
|
+
:host(:not([disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"] {
|
|
25
|
+
background-color: white;
|
|
26
|
+
border-color: #b6cbe8; /* celestine alpha 0.3 */
|
|
27
|
+
}
|
|
28
|
+
:host(:not([disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"] {
|
|
29
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
17
30
|
}
|
|
18
31
|
button {
|
|
19
32
|
background-color: transparent;
|
|
@@ -318,10 +318,17 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
|
|
|
318
318
|
grid-template-columns: 100%;
|
|
319
319
|
grid-template-rows: 1rem 1fr 1fr 1rem;
|
|
320
320
|
}
|
|
321
|
-
:host([_drop-location="7"])
|
|
321
|
+
:host([_drop-location="7"]) {
|
|
322
|
+
z-index: 1; /* drop target border must render on top of next adjacent border */
|
|
323
|
+
}
|
|
324
|
+
:host([_drop-location="7"]) [slot="outside-control-container"] {
|
|
325
|
+
border: 2px solid var(--d2l-color-celestine);
|
|
322
326
|
border-radius: 6px;
|
|
323
|
-
outline: 2px solid var(--d2l-color-celestine);
|
|
324
327
|
}
|
|
328
|
+
:host([_drop-location="7"]) [slot="control-container"]::after {
|
|
329
|
+
border-color: transparent;
|
|
330
|
+
}
|
|
331
|
+
|
|
325
332
|
@media only screen and (hover: hover), only screen and (pointer: fine) {
|
|
326
333
|
d2l-list-item-drag-handle {
|
|
327
334
|
opacity: 0;
|
|
@@ -37,6 +37,11 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
37
37
|
|
|
38
38
|
static get properties() {
|
|
39
39
|
return {
|
|
40
|
+
/**
|
|
41
|
+
* How to align content in the nested slot
|
|
42
|
+
* @type {'content'|'control'}
|
|
43
|
+
*/
|
|
44
|
+
alignNested: { type: String, reflect: true, attribute: 'align-nested' },
|
|
40
45
|
/**
|
|
41
46
|
* @ignore
|
|
42
47
|
*/
|
|
@@ -68,8 +73,11 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
68
73
|
grid-column: content-start / end;
|
|
69
74
|
grid-row: nested-start / nested-end;
|
|
70
75
|
}
|
|
76
|
+
:host([align-nested="control"]) ::slotted([slot="nested"]) {
|
|
77
|
+
grid-column: control-start / end;
|
|
78
|
+
}
|
|
71
79
|
:host(.d2l-dragging-over) ::slotted([slot="nested"]) {
|
|
72
|
-
z-index: 6;
|
|
80
|
+
z-index: 6; /* must be greater than item's drop-target to allow dropping onto items within nested list */
|
|
73
81
|
}
|
|
74
82
|
|
|
75
83
|
::slotted([slot="drop-target"]) {
|
|
@@ -129,12 +137,21 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
129
137
|
grid-column: content-start / end;
|
|
130
138
|
z-index: 3;
|
|
131
139
|
}
|
|
140
|
+
|
|
141
|
+
::slotted([slot="outside-control-container"]) {
|
|
142
|
+
grid-column: start / end;
|
|
143
|
+
grid-row: 1 / 2;
|
|
144
|
+
}
|
|
145
|
+
::slotted([slot="control-container"]) {
|
|
146
|
+
grid-column: control-start / end;
|
|
147
|
+
grid-row: 1 / 2;
|
|
148
|
+
}
|
|
132
149
|
`;
|
|
133
150
|
}
|
|
134
151
|
|
|
135
152
|
constructor() {
|
|
136
153
|
super();
|
|
137
|
-
|
|
154
|
+
this.alignNested = 'content';
|
|
138
155
|
this._preventFocus = {
|
|
139
156
|
handleEvent(event) {
|
|
140
157
|
// target content slot only for now - can add others later
|
|
@@ -161,6 +178,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
161
178
|
|
|
162
179
|
render() {
|
|
163
180
|
return html`
|
|
181
|
+
<slot name="control-container"></slot>
|
|
182
|
+
<slot name="outside-control-container"></slot>
|
|
164
183
|
<slot name="drop-target"></slot>
|
|
165
184
|
<slot name="content-action" class="d2l-cell" data-cell-num="5"></slot>
|
|
166
185
|
<slot name="outside-control-action" class="d2l-cell" data-cell-num="1"></slot>
|
|
@@ -21,9 +21,19 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
|
|
|
21
21
|
:host([action-href]:not([action-href=""])) {
|
|
22
22
|
--d2l-list-item-content-text-color: var(--d2l-color-celestine);
|
|
23
23
|
}
|
|
24
|
-
:host([action-href]:not([action-href=""])
|
|
25
|
-
:host([action-href]:not([action-href=""])
|
|
26
|
-
|
|
24
|
+
:host([action-href]:not([action-href=""])[_hovering]) [slot="control-container"]::before,
|
|
25
|
+
:host([action-href]:not([action-href=""])[_hovering]) [slot="control-container"]::after,
|
|
26
|
+
:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::before,
|
|
27
|
+
:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::after {
|
|
28
|
+
border-top-color: transparent;
|
|
29
|
+
}
|
|
30
|
+
:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"],
|
|
31
|
+
:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_focusing]) [slot="outside-control-container"] {
|
|
32
|
+
background-color: white;
|
|
33
|
+
border-color: #b6cbe8; /* celestine alpha 0.3 */
|
|
34
|
+
}
|
|
35
|
+
:host(:not([disabled]):not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"] {
|
|
36
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
27
37
|
}
|
|
28
38
|
a[href] {
|
|
29
39
|
display: block;
|
|
@@ -73,11 +73,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
73
73
|
_displayKeyboardTooltip: { type: Boolean },
|
|
74
74
|
_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
|
|
75
75
|
_fullscreenWithin: { type: Boolean, attribute: '_fullscreen-within', reflect: true },
|
|
76
|
-
|
|
77
|
-
_focusing: { type: Boolean },
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
_highlighting: { type: Boolean },
|
|
76
|
+
_hovering: { type: Boolean, reflect: true },
|
|
77
|
+
_focusing: { type: Boolean, reflect: true },
|
|
78
|
+
_highlight: { type: Boolean, reflect: true },
|
|
79
|
+
_highlighting: { type: Boolean, reflect: true },
|
|
81
80
|
_tooltipShowing: { type: Boolean, attribute: '_tooltip-showing', reflect: true }
|
|
82
81
|
};
|
|
83
82
|
}
|
|
@@ -87,12 +86,12 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
87
86
|
const styles = [ css`
|
|
88
87
|
:host {
|
|
89
88
|
display: block;
|
|
90
|
-
margin-top: -1px;
|
|
91
89
|
position: relative;
|
|
92
90
|
}
|
|
93
91
|
:host[hidden] {
|
|
94
92
|
display: none;
|
|
95
93
|
}
|
|
94
|
+
|
|
96
95
|
:host([_tooltip-showing]),
|
|
97
96
|
:host([_dropdown-open]) {
|
|
98
97
|
z-index: 10; /* must be greater than adjacent selected items */
|
|
@@ -101,12 +100,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
101
100
|
position: fixed; /* required for Safari */
|
|
102
101
|
z-index: 1000; /* must be greater than floating workflow buttons */
|
|
103
102
|
}
|
|
104
|
-
|
|
105
|
-
border-top: 1px solid transparent;
|
|
106
|
-
}
|
|
107
|
-
:host(:last-child) d2l-list-item-generic-layout[data-separators="between"] {
|
|
108
|
-
border-bottom: 1px solid transparent;
|
|
109
|
-
}
|
|
103
|
+
|
|
110
104
|
:host([dragging]) d2l-list-item-generic-layout {
|
|
111
105
|
filter: grayscale(75%);
|
|
112
106
|
opacity: 0.4;
|
|
@@ -114,18 +108,44 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
114
108
|
:host([dragging]) .d2l-list-item-drag-image {
|
|
115
109
|
background: white;
|
|
116
110
|
}
|
|
117
|
-
|
|
118
|
-
|
|
111
|
+
|
|
112
|
+
[slot="control-container"] {
|
|
113
|
+
position: relative;
|
|
114
|
+
}
|
|
115
|
+
:host(:first-of-type) [slot="control-container"]::before,
|
|
116
|
+
[slot="control-container"]::after {
|
|
119
117
|
border-top: 1px solid var(--d2l-color-mica);
|
|
118
|
+
content: "";
|
|
119
|
+
left: 4px;
|
|
120
|
+
position: absolute;
|
|
121
|
+
width: calc(100% - 8px);
|
|
122
|
+
}
|
|
123
|
+
:host(:first-of-type) [slot="control-container"]::before {
|
|
124
|
+
top: 0;
|
|
120
125
|
}
|
|
126
|
+
[slot="control-container"]::after {
|
|
127
|
+
bottom: -2px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
:host(:first-of-type[_separators="between"]) [slot="control-container"]::before,
|
|
131
|
+
:host(:last-of-type[_separators="between"]) [slot="control-container"]::after,
|
|
132
|
+
:host([_separators="none"]) [slot="control-container"]::before,
|
|
133
|
+
:host([_separators="none"]) [slot="control-container"]::after,
|
|
134
|
+
:host([selectable][_hovering]) [slot="control-container"]::before,
|
|
135
|
+
:host([selectable][_hovering]) [slot="control-container"]::after,
|
|
136
|
+
:host([selectable][_focusing]) [slot="control-container"]::before,
|
|
137
|
+
:host([selectable][_focusing]) [slot="control-container"]::after,
|
|
138
|
+
:host([selected]) [slot="control-container"]::before,
|
|
139
|
+
:host([selected]) [slot="control-container"]::after,
|
|
140
|
+
:host(:first-of-type[_nested]) [slot="control-container"]::before {
|
|
141
|
+
border-top-color: transparent;
|
|
142
|
+
}
|
|
143
|
+
|
|
121
144
|
:host([padding-type="none"]) d2l-list-item-generic-layout {
|
|
122
145
|
border-bottom: 0;
|
|
123
146
|
border-top: 0;
|
|
124
147
|
}
|
|
125
|
-
|
|
126
|
-
border-bottom: 1px solid transparent;
|
|
127
|
-
border-top: 1px solid transparent;
|
|
128
|
-
}
|
|
148
|
+
|
|
129
149
|
.d2l-list-item-content-extend-separators > [slot="control"] {
|
|
130
150
|
width: 3rem;
|
|
131
151
|
}
|
|
@@ -143,8 +163,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
143
163
|
.d2l-list-item-content ::slotted(*) {
|
|
144
164
|
margin-top: 0.05rem;
|
|
145
165
|
}
|
|
146
|
-
.d2l-list-item-content
|
|
147
|
-
.d2l-list-item-content
|
|
166
|
+
:host([_hovering]) .d2l-list-item-content,
|
|
167
|
+
:host([_focusing]) .d2l-list-item-content {
|
|
148
168
|
--d2l-list-item-content-text-color: var(--d2l-color-celestine);
|
|
149
169
|
--d2l-list-item-content-text-decoration: underline;
|
|
150
170
|
}
|
|
@@ -157,7 +177,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
157
177
|
[slot="content"] {
|
|
158
178
|
display: flex;
|
|
159
179
|
justify-content: stretch;
|
|
160
|
-
padding: 0.55rem 0;
|
|
180
|
+
padding: 0.55rem 0.55rem 0.55rem 0;
|
|
181
|
+
}
|
|
182
|
+
:host([dir="rtl"]) [slot="content"] {
|
|
183
|
+
padding-left: 0.55rem;
|
|
184
|
+
padding-right: 0;
|
|
161
185
|
}
|
|
162
186
|
:host([slim]) [slot="content"] { /* TODO, remove */
|
|
163
187
|
padding-bottom: 0.35rem;
|
|
@@ -171,6 +195,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
171
195
|
padding-bottom: 0;
|
|
172
196
|
padding-top: 0;
|
|
173
197
|
}
|
|
198
|
+
|
|
174
199
|
[slot="content"] ::slotted([slot="illustration"]),
|
|
175
200
|
[slot="content"] .d2l-list-item-illustration * {
|
|
176
201
|
border-radius: 6px;
|
|
@@ -272,56 +297,57 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
272
297
|
:host([dir="rtl"]) .d2l-list-item-content-extend-separators d2l-selection-input {
|
|
273
298
|
margin-right: 0.9rem;
|
|
274
299
|
}
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
background-color: #f3fbff;
|
|
300
|
+
|
|
301
|
+
[slot="outside-control-container"] {
|
|
302
|
+
border: 1px solid transparent;
|
|
303
|
+
border-radius: 6px;
|
|
304
|
+
margin: 0 -12px;
|
|
281
305
|
}
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
border-color: #79b5df;
|
|
306
|
+
.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
|
|
307
|
+
border-radius: 0;
|
|
285
308
|
}
|
|
286
|
-
:host([
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
background-color: #79b5df;
|
|
290
|
-
bottom: 0;
|
|
291
|
-
height: 1px;
|
|
292
|
-
position: absolute;
|
|
293
|
-
width: 100%;
|
|
294
|
-
z-index: 5;
|
|
309
|
+
:host([draggable]) [slot="outside-control-container"],
|
|
310
|
+
.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
|
|
311
|
+
margin: 0;
|
|
295
312
|
}
|
|
296
313
|
|
|
297
|
-
|
|
298
|
-
|
|
314
|
+
:host(:not([disabled]):not([skeleton])[selected]) [slot="outside-control-container"],
|
|
315
|
+
:host(:not([disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"],
|
|
316
|
+
:host(:not([disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
|
|
317
|
+
background-color: white;
|
|
318
|
+
border-color: #b6cbe8; /* celestine alpha 0.3 */
|
|
299
319
|
}
|
|
300
|
-
|
|
301
|
-
|
|
320
|
+
:host(:not([disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"] {
|
|
321
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
302
322
|
}
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
323
|
+
:host(:not([disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
|
|
324
|
+
background-color: #f3fbff;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
:host(:not([disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"] {
|
|
328
|
+
border-color: transparent;
|
|
329
|
+
margin: 0;
|
|
308
330
|
}
|
|
309
|
-
|
|
310
|
-
|
|
331
|
+
|
|
332
|
+
:host([_highlight]) [slot="outside-control-container"] {
|
|
333
|
+
transition: background-color 400ms linear, border-color 400ms linear;
|
|
334
|
+
}
|
|
335
|
+
:host([_highlight]:first-of-type) [slot="control-container"]::before,
|
|
336
|
+
:host([_highlight]) [slot="control-container"]::after {
|
|
337
|
+
transition: border-color 400ms linear;
|
|
311
338
|
}
|
|
312
|
-
:host([
|
|
339
|
+
:host([_highlighting]) [slot="outside-control-container"],
|
|
340
|
+
:host(:not([disabled]):not([skeleton])[_hovering][_highlighting]) [slot="outside-control-container"],
|
|
341
|
+
:host(:not([disabled]):not([skeleton])[_focusing][_highlighting]) [slot="outside-control-container"],
|
|
342
|
+
:host(:not([disabled]):not([skeleton])[selected][_highlighting]) [slot="outside-control-container"] {
|
|
313
343
|
background-color: var(--d2l-color-celestine-plus-2);
|
|
314
344
|
border-color: var(--d2l-color-celestine);
|
|
315
345
|
}
|
|
316
|
-
:host([
|
|
317
|
-
:host([
|
|
318
|
-
|
|
346
|
+
:host([_highlighting]:first-of-type) [slot="control-container"]::before,
|
|
347
|
+
:host([_highlighting]) [slot="control-container"]::after {
|
|
348
|
+
border-color: transparent;
|
|
319
349
|
}
|
|
320
350
|
|
|
321
|
-
:host([_fullscreen-within]) .d2l-list-item-active-border,
|
|
322
|
-
:host([_fullscreen-within]) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
|
|
323
|
-
display: none;
|
|
324
|
-
}
|
|
325
351
|
d2l-tooltip > div {
|
|
326
352
|
font-weight: 700;
|
|
327
353
|
}
|
|
@@ -395,7 +421,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
395
421
|
|
|
396
422
|
async highlight() {
|
|
397
423
|
if (this._highlight) return;
|
|
398
|
-
const elem = this.shadowRoot.querySelector('
|
|
424
|
+
const elem = this.shadowRoot.querySelector('[slot="outside-control-container"]');
|
|
399
425
|
this._highlight = true;
|
|
400
426
|
await this.updateComplete;
|
|
401
427
|
elem.addEventListener('transitionend', () => {
|
|
@@ -485,19 +511,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
485
511
|
hasDisplayedKeyboardTooltip = true;
|
|
486
512
|
}
|
|
487
513
|
|
|
488
|
-
_onFocusInPrimaryAction() {
|
|
489
|
-
this._focusingPrimaryAction = true;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
514
|
_onFocusOut() {
|
|
493
515
|
this._focusing = false;
|
|
494
516
|
this._displayKeyboardTooltip = false;
|
|
495
517
|
}
|
|
496
518
|
|
|
497
|
-
_onFocusOutPrimaryAction() {
|
|
498
|
-
this._focusingPrimaryAction = false;
|
|
499
|
-
}
|
|
500
|
-
|
|
501
519
|
_onFullscreenWithin(e) {
|
|
502
520
|
if (e.detail.state) this._fullscreenWithinCount += 1;
|
|
503
521
|
else this._fullscreenWithinCount -= 1;
|
|
@@ -509,7 +527,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
509
527
|
}
|
|
510
528
|
|
|
511
529
|
_onMouseEnterPrimaryAction() {
|
|
512
|
-
this._hoveringPrimaryAction = true;
|
|
513
530
|
this._hovering = true;
|
|
514
531
|
}
|
|
515
532
|
|
|
@@ -518,7 +535,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
518
535
|
}
|
|
519
536
|
|
|
520
537
|
_onMouseLeavePrimaryAction() {
|
|
521
|
-
this._hoveringPrimaryAction = false;
|
|
522
538
|
this._hovering = false;
|
|
523
539
|
}
|
|
524
540
|
|
|
@@ -526,23 +542,15 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
526
542
|
const classes = {
|
|
527
543
|
'd2l-visible-on-ancestor-target': true,
|
|
528
544
|
'd2l-list-item-content-extend-separators': this._extendSeparators,
|
|
529
|
-
'd2l-list-item-highlight': this._highlight,
|
|
530
|
-
'd2l-list-item-highlighting': this._highlighting,
|
|
531
|
-
'd2l-focusing': this._focusing,
|
|
532
|
-
'd2l-hovering': this._hovering,
|
|
533
545
|
'd2l-dragging-over': this._draggingOver
|
|
534
546
|
};
|
|
535
|
-
const contentClasses = {
|
|
536
|
-
'd2l-list-item-content': true,
|
|
537
|
-
'd2l-hovering': this._hoveringPrimaryAction,
|
|
538
|
-
'd2l-focusing': this._focusingPrimaryAction
|
|
539
|
-
};
|
|
540
547
|
|
|
541
548
|
const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
|
|
542
549
|
const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
|
|
543
550
|
|
|
544
551
|
const innerView = html`
|
|
545
552
|
<d2l-list-item-generic-layout
|
|
553
|
+
align-nested="${ifDefined(this.draggable && this.selectable ? 'control' : undefined)}"
|
|
546
554
|
@focusin="${this._onFocusIn}"
|
|
547
555
|
@focusout="${this._onFocusOut}"
|
|
548
556
|
@d2l-fullscreen-within="${this._onFullscreenWithin}"
|
|
@@ -550,9 +558,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
550
558
|
data-breakpoint="${this._breakpoint}"
|
|
551
559
|
data-separators="${ifDefined(this._separators)}"
|
|
552
560
|
?grid-active="${this.role === 'rowgroup'}">
|
|
561
|
+
<div slot="outside-control-container"></div>
|
|
553
562
|
${this._renderDropTarget()}
|
|
554
563
|
${this._renderDragHandle(this._renderOutsideControl)}
|
|
555
564
|
${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
|
|
565
|
+
<div slot="control-container"></div>
|
|
556
566
|
${this.selectable ? html`
|
|
557
567
|
<div slot="control">${this._renderCheckbox()}</div>
|
|
558
568
|
<div slot="control-action"
|
|
@@ -562,14 +572,12 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
562
572
|
</div>` : nothing }
|
|
563
573
|
${primaryAction ? html`
|
|
564
574
|
<div slot="content-action"
|
|
565
|
-
@focusin="${this._onFocusInPrimaryAction}"
|
|
566
|
-
@focusout="${this._onFocusOutPrimaryAction}"
|
|
567
575
|
@mouseenter="${this._onMouseEnterPrimaryAction}"
|
|
568
576
|
@mouseleave="${this._onMouseLeavePrimaryAction}">
|
|
569
577
|
${primaryAction}
|
|
570
578
|
</div>` : nothing}
|
|
571
579
|
<div slot="content"
|
|
572
|
-
class="
|
|
580
|
+
class="d2l-list-item-content"
|
|
573
581
|
id="${this._contentId}">
|
|
574
582
|
<slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
|
|
575
583
|
<slot>${content}</slot>
|
|
@@ -584,7 +592,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
584
592
|
<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
|
|
585
593
|
</div>
|
|
586
594
|
</d2l-list-item-generic-layout>
|
|
587
|
-
<div class="d2l-list-item-active-border"></div>
|
|
588
595
|
`;
|
|
589
596
|
|
|
590
597
|
return html`
|
|
@@ -7,10 +7,17 @@ export const ListItemRoleMixin = superclass => class extends superclass {
|
|
|
7
7
|
/**
|
|
8
8
|
* @ignore
|
|
9
9
|
*/
|
|
10
|
-
role: { type: String, reflect: true }
|
|
10
|
+
role: { type: String, reflect: true },
|
|
11
|
+
_nested: { type: Boolean, reflect: true },
|
|
12
|
+
_separators: { type: String, reflect: true }
|
|
11
13
|
};
|
|
12
14
|
}
|
|
13
15
|
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
this._nested = false;
|
|
19
|
+
}
|
|
20
|
+
|
|
14
21
|
connectedCallback() {
|
|
15
22
|
super.connectedCallback();
|
|
16
23
|
|
|
@@ -20,6 +27,7 @@ export const ListItemRoleMixin = superclass => class extends superclass {
|
|
|
20
27
|
const separators = parent.getAttribute('separators');
|
|
21
28
|
|
|
22
29
|
this.role = parent.hasAttribute('grid') ? 'rowgroup' : 'listitem';
|
|
30
|
+
this._nested = (parent.slot === 'nested');
|
|
23
31
|
this._separators = separators || undefined;
|
|
24
32
|
this._extendSeparators = parent.hasAttribute('extend-separators');
|
|
25
33
|
}
|
package/custom-elements.json
CHANGED
|
@@ -7091,6 +7091,12 @@
|
|
|
7091
7091
|
"name": "grid-active",
|
|
7092
7092
|
"description": "Specifies whether the grid is active or not",
|
|
7093
7093
|
"type": "boolean"
|
|
7094
|
+
},
|
|
7095
|
+
{
|
|
7096
|
+
"name": "align-nested",
|
|
7097
|
+
"description": "How to align content in the nested slot",
|
|
7098
|
+
"type": "'content'|'control'",
|
|
7099
|
+
"default": "\"content\""
|
|
7094
7100
|
}
|
|
7095
7101
|
],
|
|
7096
7102
|
"properties": [
|
|
@@ -7099,6 +7105,13 @@
|
|
|
7099
7105
|
"attribute": "grid-active",
|
|
7100
7106
|
"description": "Specifies whether the grid is active or not",
|
|
7101
7107
|
"type": "boolean"
|
|
7108
|
+
},
|
|
7109
|
+
{
|
|
7110
|
+
"name": "alignNested",
|
|
7111
|
+
"attribute": "align-nested",
|
|
7112
|
+
"description": "How to align content in the nested slot",
|
|
7113
|
+
"type": "'content'|'control'",
|
|
7114
|
+
"default": "\"content\""
|
|
7102
7115
|
}
|
|
7103
7116
|
],
|
|
7104
7117
|
"slots": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.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",
|