@brightspace-ui/core 3.184.1 → 3.185.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.
|
@@ -8,9 +8,15 @@
|
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../../button/button-subtle.js';
|
|
10
10
|
import '../../button/button-toggle.js';
|
|
11
|
+
import '../list-item-button.js';
|
|
11
12
|
import '../list-item-content.js';
|
|
12
13
|
import '../list-item.js';
|
|
13
14
|
import '../list.js';
|
|
15
|
+
window.wireupListTileToggle = demo => {
|
|
16
|
+
demo.querySelector('d2l-button-toggle').addEventListener('d2l-button-toggle-change', e => {
|
|
17
|
+
demo.querySelector('d2l-list').layout = (e.target.pressed ? 'tiles' : 'list');
|
|
18
|
+
});
|
|
19
|
+
};
|
|
14
20
|
</script>
|
|
15
21
|
<style>
|
|
16
22
|
d2l-button-toggle {
|
|
@@ -21,7 +27,7 @@
|
|
|
21
27
|
<body unresolved>
|
|
22
28
|
<d2l-demo-page page-title="d2l-list">
|
|
23
29
|
|
|
24
|
-
<h2>
|
|
30
|
+
<h2>No Action</h2>
|
|
25
31
|
|
|
26
32
|
<d2l-demo-snippet>
|
|
27
33
|
<template>
|
|
@@ -53,11 +59,81 @@
|
|
|
53
59
|
</d2l-list-item>
|
|
54
60
|
</d2l-list>
|
|
55
61
|
<script data-demo-hide>
|
|
56
|
-
(demo =>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
62
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
63
|
+
</script>
|
|
64
|
+
</template>
|
|
65
|
+
</d2l-demo-snippet>
|
|
66
|
+
|
|
67
|
+
<h2>Links</h2>
|
|
68
|
+
|
|
69
|
+
<d2l-demo-snippet>
|
|
70
|
+
<template>
|
|
71
|
+
<d2l-button-toggle pressed>
|
|
72
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
73
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
74
|
+
</d2l-button-toggle>
|
|
75
|
+
<d2l-list layout="tiles">
|
|
76
|
+
<d2l-list-item label="item 1" href="http://www.d2l.com">
|
|
77
|
+
<d2l-list-item-content>
|
|
78
|
+
<div>Identify categories of physical activities</div>
|
|
79
|
+
<div slot="secondary">Secondary Information</div>
|
|
80
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
81
|
+
</d2l-list-item-content>
|
|
82
|
+
</d2l-list-item>
|
|
83
|
+
<d2l-list-item label="item 2" href="http://www.d2l.com">
|
|
84
|
+
<d2l-list-item-content>
|
|
85
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
86
|
+
<div slot="secondary">Secondary Information</div>
|
|
87
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
88
|
+
</d2l-list-item-content>
|
|
89
|
+
</d2l-list-item>
|
|
90
|
+
<d2l-list-item label="item 3" href="http://www.d2l.com">
|
|
91
|
+
<d2l-list-item-content>
|
|
92
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
93
|
+
<div slot="secondary">Secondary Information</div>
|
|
94
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
95
|
+
</d2l-list-item-content>
|
|
96
|
+
</d2l-list-item>
|
|
97
|
+
</d2l-list>
|
|
98
|
+
<script data-demo-hide>
|
|
99
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
100
|
+
</script>
|
|
101
|
+
</template>
|
|
102
|
+
</d2l-demo-snippet>
|
|
103
|
+
|
|
104
|
+
<h2>Buttons</h2>
|
|
105
|
+
|
|
106
|
+
<d2l-demo-snippet>
|
|
107
|
+
<template>
|
|
108
|
+
<d2l-button-toggle pressed>
|
|
109
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
110
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
111
|
+
</d2l-button-toggle>
|
|
112
|
+
<d2l-list layout="tiles">
|
|
113
|
+
<d2l-list-item-button label="item 1" href="http://www.d2l.com">
|
|
114
|
+
<d2l-list-item-content>
|
|
115
|
+
<div>Identify categories of physical activities</div>
|
|
116
|
+
<div slot="secondary">Secondary Information</div>
|
|
117
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
118
|
+
</d2l-list-item-content>
|
|
119
|
+
</d2l-list-item-button>
|
|
120
|
+
<d2l-list-item-button label="item 2" href="http://www.d2l.com">
|
|
121
|
+
<d2l-list-item-content>
|
|
122
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
123
|
+
<div slot="secondary">Secondary Information</div>
|
|
124
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
125
|
+
</d2l-list-item-content>
|
|
126
|
+
</d2l-list-item-button>
|
|
127
|
+
<d2l-list-item-button label="item 3" href="http://www.d2l.com">
|
|
128
|
+
<d2l-list-item-content>
|
|
129
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
130
|
+
<div slot="secondary">Secondary Information</div>
|
|
131
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
132
|
+
</d2l-list-item-content>
|
|
133
|
+
</d2l-list-item-button>
|
|
134
|
+
</d2l-list>
|
|
135
|
+
<script data-demo-hide>
|
|
136
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
61
137
|
</script>
|
|
62
138
|
</template>
|
|
63
139
|
</d2l-demo-snippet>
|
|
@@ -226,7 +226,8 @@ class ListItemGenericLayout extends LitElement {
|
|
|
226
226
|
[end];
|
|
227
227
|
height: 100%;
|
|
228
228
|
}
|
|
229
|
-
:host([layout="tile"]) ::slotted([slot="content"])
|
|
229
|
+
:host([layout="tile"]) ::slotted([slot="content"]),
|
|
230
|
+
:host([layout="tile"]) ::slotted([slot="content-action"]) {
|
|
230
231
|
grid-column: start / end;
|
|
231
232
|
grid-row: start / end;
|
|
232
233
|
}
|
|
@@ -238,7 +239,6 @@ class ListItemGenericLayout extends LitElement {
|
|
|
238
239
|
:host([layout="tile"]) slot[name="add-top"],
|
|
239
240
|
:host([layout="tile"]) slot[name="control-container"],
|
|
240
241
|
:host([layout="tile"]) slot[name="before-content"],
|
|
241
|
-
:host([layout="tile"]) slot[name="content-action"],
|
|
242
242
|
:host([layout="tile"]) slot[name="outside-control"],
|
|
243
243
|
:host([layout="tile"]) slot[name="outside-control-action"],
|
|
244
244
|
:host([layout="tile"]) slot[name="color-indicator"],
|
|
@@ -217,7 +217,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
217
217
|
--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
|
|
218
218
|
--d2l-list-item-content-text-outline-offset: 1px;
|
|
219
219
|
}
|
|
220
|
-
:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
|
|
220
|
+
:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
|
|
221
221
|
border-radius: 6px;
|
|
222
222
|
outline: var(--d2l-list-item-content-text-outline);
|
|
223
223
|
outline-offset: -4px;
|
|
@@ -233,12 +233,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
233
233
|
--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
|
|
234
234
|
--d2l-list-item-content-text-outline-offset: 1px;
|
|
235
235
|
}
|
|
236
|
-
:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
|
|
236
|
+
:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
|
|
237
237
|
border-radius: initial;
|
|
238
238
|
outline: initial;
|
|
239
239
|
outline-offset: initial;
|
|
240
240
|
}
|
|
241
|
-
:host([_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content-none {
|
|
241
|
+
:host([_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content.d2l-list-item-content-none {
|
|
242
242
|
border-radius: 8px;
|
|
243
243
|
outline: var(--d2l-list-item-content-text-outline);
|
|
244
244
|
outline-offset: -4px;
|
|
@@ -441,6 +441,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
441
441
|
}
|
|
442
442
|
|
|
443
443
|
:host([layout="tile"]) .d2l-list-item-content {
|
|
444
|
+
box-sizing: border-box;
|
|
444
445
|
flex-direction: column;
|
|
445
446
|
height: 100%;
|
|
446
447
|
padding: 0.6rem;
|
|
@@ -457,6 +458,33 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
457
458
|
:host([layout="tile"]:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
|
|
458
459
|
padding-inline: 0.6rem;
|
|
459
460
|
}
|
|
461
|
+
|
|
462
|
+
:host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])) [slot="outside-control-container"].d2l-list-item-content-none {
|
|
463
|
+
border-color: transparent;
|
|
464
|
+
}
|
|
465
|
+
:host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
|
|
466
|
+
border-radius: 6px;
|
|
467
|
+
outline: var(--d2l-list-item-content-text-outline);
|
|
468
|
+
outline-offset: 2px;
|
|
469
|
+
}
|
|
470
|
+
@supports selector(:has(a, b)) {
|
|
471
|
+
:host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
|
|
472
|
+
border-radius: initial;
|
|
473
|
+
outline: initial;
|
|
474
|
+
outline-offset: initial;
|
|
475
|
+
}
|
|
476
|
+
:host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])) [slot="outside-control-container"].d2l-list-item-content-none {
|
|
477
|
+
border-color: var(--d2l-color-mica);
|
|
478
|
+
}
|
|
479
|
+
:host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content.d2l-list-item-content-none {
|
|
480
|
+
border-radius: 6px;
|
|
481
|
+
outline: var(--d2l-list-item-content-text-outline);
|
|
482
|
+
outline-offset: 2px;
|
|
483
|
+
}
|
|
484
|
+
:host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])):has(:focus-visible) [slot="outside-control-container"].d2l-list-item-content-none {
|
|
485
|
+
border-color: transparent;
|
|
486
|
+
}
|
|
487
|
+
}
|
|
460
488
|
`];
|
|
461
489
|
|
|
462
490
|
super.styles && styles.unshift(super.styles);
|
|
@@ -721,6 +749,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
721
749
|
'd2l-list-item-content': true,
|
|
722
750
|
'd2l-list-item-content-none': !this._hasListItemContent
|
|
723
751
|
};
|
|
752
|
+
const outsideClasses = {
|
|
753
|
+
'd2l-list-item-content-none': !this._hasListItemContent
|
|
754
|
+
};
|
|
724
755
|
|
|
725
756
|
const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this.expandable && !this.selectable)) ? 'control' : undefined;
|
|
726
757
|
const contentAreaContent = html`
|
|
@@ -769,7 +800,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
769
800
|
</d2l-button-add>
|
|
770
801
|
</div>
|
|
771
802
|
` : nothing}
|
|
772
|
-
<div slot="outside-control-container"></div>
|
|
803
|
+
<div slot="outside-control-container" class="${classMap(outsideClasses)}"></div>
|
|
773
804
|
<div slot="before-content"></div>
|
|
774
805
|
${this._renderDropTarget()}
|
|
775
806
|
${this._renderDragHandle(this._renderOutsideControl)}
|
|
@@ -97,38 +97,22 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
97
97
|
|
|
98
98
|
this.__baseHeight = 0;
|
|
99
99
|
this.__contentId = getUniqueId();
|
|
100
|
-
this.__resizeObserver = null;
|
|
101
100
|
this.__content = null;
|
|
102
101
|
this.__contentSlot = null;
|
|
103
102
|
this.__autoExpanded = false;
|
|
104
103
|
this.__shift = false;
|
|
105
|
-
this.__bound_reactToChanges = null;
|
|
106
|
-
this.__bound_reactToMutationChanges = null;
|
|
107
104
|
this.__bound_transitionEvents = null;
|
|
105
|
+
|
|
106
|
+
this._mutationObserver = new MutationObserver(this.__reactToMutationChanges.bind(this));
|
|
107
|
+
this._resizeObserver = new ResizeObserver(this.__reactToChanges.bind(this));
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
disconnectedCallback() {
|
|
111
111
|
super.disconnectedCallback();
|
|
112
112
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
this.__resizeObserver = null;
|
|
116
|
-
}
|
|
117
|
-
if (this.__mutationObserver) {
|
|
118
|
-
this.__mutationObserver.disconnect();
|
|
119
|
-
this.__mutationObserver = null;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
this.__content && this.__content.removeEventListener('load', this.__bound_reactToChanges, true);
|
|
123
|
-
this.__bound_reactToChanges = null;
|
|
124
|
-
this.__bound_reactToMutationChanges = null;
|
|
113
|
+
this._resizeObserver.disconnect();
|
|
114
|
+
this._mutationObserver.disconnect();
|
|
125
115
|
|
|
126
|
-
if (this.__contentSlot) {
|
|
127
|
-
this.__contentSlot.removeEventListener('slotchange', this.__reactToChanges.bind(this));
|
|
128
|
-
this.__contentSlot.removeEventListener('slotchange', this.__startObserving.bind(this));
|
|
129
|
-
}
|
|
130
|
-
this.__content && this.__content.removeEventListener('focusin', this.__focusIn.bind(this));
|
|
131
|
-
this.__content && this.__content.removeEventListener('focusout', this.__focusOut.bind(this));
|
|
132
116
|
this.shadowRoot.removeEventListener('transitionstart', this.__bound_transitionEvents);
|
|
133
117
|
this.shadowRoot.removeEventListener('transitionend', this.__bound_transitionEvents);
|
|
134
118
|
this.shadowRoot.removeEventListener('transitioncancel', this.__bound_transitionEvents);
|
|
@@ -140,7 +124,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
140
124
|
|
|
141
125
|
this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
|
|
142
126
|
this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
|
|
143
|
-
this.
|
|
127
|
+
this.__startObserving();
|
|
144
128
|
|
|
145
129
|
this.__bound_transitionEvents = this.__transitionEvents.bind(this);
|
|
146
130
|
this.shadowRoot.addEventListener('transitionstart', this.__bound_transitionEvents);
|
|
@@ -155,7 +139,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
155
139
|
'd2l-more-less-transition': this.__transitionAdded
|
|
156
140
|
};
|
|
157
141
|
return html`
|
|
158
|
-
<div
|
|
142
|
+
<div
|
|
143
|
+
id="${this.__contentId}"
|
|
144
|
+
class=${classMap(contentClasses)}
|
|
145
|
+
style=${styleMap({ maxHeight: `${this.__maxHeight}` })}
|
|
146
|
+
@focusin="${this.__focusIn}"
|
|
147
|
+
@focusout="${this.__focusOut}"
|
|
148
|
+
@load=${this.__reactToChanges}
|
|
149
|
+
@slotchange=${this.#handleSlotChange}>
|
|
159
150
|
<slot></slot>
|
|
160
151
|
</div>
|
|
161
152
|
<d2l-button-subtle
|
|
@@ -288,10 +279,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
288
279
|
__init_measureBaseHeight() {
|
|
289
280
|
this.__baseHeight = this.__content.offsetHeight;
|
|
290
281
|
this.__adjustToContent();
|
|
291
|
-
|
|
292
|
-
// react to images and whatnot loading
|
|
293
|
-
this.__bound_reactToChanges = this.__bound_reactToChanges || this.__reactToChanges.bind(this);
|
|
294
|
-
this.__content.addEventListener('load', this.__bound_reactToChanges, true);
|
|
295
282
|
}
|
|
296
283
|
|
|
297
284
|
__init_setBaseHeight() {
|
|
@@ -302,16 +289,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
302
289
|
});
|
|
303
290
|
}
|
|
304
291
|
|
|
305
|
-
__init_setupListeners() {
|
|
306
|
-
this.__startObserving();
|
|
307
|
-
if (this.__contentSlot) {
|
|
308
|
-
this.__contentSlot.addEventListener('slotchange', this.__reactToChanges.bind(this));
|
|
309
|
-
this.__contentSlot.addEventListener('slotchange', this.__startObserving.bind(this));
|
|
310
|
-
}
|
|
311
|
-
this.__content.addEventListener('focusin', this.__focusIn.bind(this));
|
|
312
|
-
this.__content.addEventListener('focusout', this.__focusOut.bind(this));
|
|
313
|
-
}
|
|
314
|
-
|
|
315
292
|
__isOwnMutation(mutation) {
|
|
316
293
|
return mutation.target === this.__content
|
|
317
294
|
&& (mutation.type === 'style' || mutation.type === 'attributes');
|
|
@@ -341,18 +318,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
341
318
|
}
|
|
342
319
|
|
|
343
320
|
__startObserving() {
|
|
344
|
-
this.
|
|
345
|
-
this.
|
|
346
|
-
this.__resizeObserver = this.__resizeObserver || new ResizeObserver(this.__bound_reactToChanges);
|
|
347
|
-
this.__resizeObserver.disconnect();
|
|
348
|
-
this.__mutationObserver = this.__mutationObserver || new MutationObserver(this.__bound_reactToMutationChanges);
|
|
349
|
-
this.__mutationObserver.disconnect();
|
|
321
|
+
this._resizeObserver.disconnect();
|
|
322
|
+
this._mutationObserver.disconnect();
|
|
350
323
|
|
|
351
324
|
if (this.__contentSlot) {
|
|
352
325
|
const children = getComposedChildren(this.__contentSlot);
|
|
353
326
|
for (let i = 0; i < children.length; ++i) {
|
|
354
|
-
this.
|
|
355
|
-
this.
|
|
327
|
+
this._resizeObserver.observe(children[i]);
|
|
328
|
+
this._mutationObserver.observe(children[i], {
|
|
356
329
|
childList: true,
|
|
357
330
|
subtree: true,
|
|
358
331
|
characterData: true,
|
|
@@ -360,8 +333,8 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
360
333
|
});
|
|
361
334
|
}
|
|
362
335
|
}
|
|
363
|
-
this.
|
|
364
|
-
this.
|
|
336
|
+
this._resizeObserver.observe(this.__content);
|
|
337
|
+
this._mutationObserver.observe(this.__content, {
|
|
365
338
|
childList: true,
|
|
366
339
|
subtree: true,
|
|
367
340
|
characterData: true,
|
|
@@ -383,6 +356,10 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
383
356
|
this.dispatchEvent(new CustomEvent(e.type, { bubbles: true, composed: true, detail: e.detail }));
|
|
384
357
|
}
|
|
385
358
|
|
|
359
|
+
#handleSlotChange() {
|
|
360
|
+
this.__reactToChanges();
|
|
361
|
+
this.__startObserving();
|
|
362
|
+
}
|
|
386
363
|
}
|
|
387
364
|
|
|
388
365
|
customElements.define('d2l-more-less', MoreLess);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.185.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",
|