@brightspace-ui/core 3.194.1 → 3.195.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.
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
7
|
<script type="module">
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
|
+
import '../../button/button.js';
|
|
9
10
|
import '../../button/button-icon.js';
|
|
10
11
|
import '../../button/button-subtle.js';
|
|
11
12
|
import '../../button/button-toggle.js';
|
|
@@ -44,6 +45,59 @@
|
|
|
44
45
|
d2l-list-item[layout="tile"] img[slot="illustration"] {
|
|
45
46
|
object-fit: cover;
|
|
46
47
|
}
|
|
48
|
+
|
|
49
|
+
d2l-list-item > .custom-content {
|
|
50
|
+
display: flex;
|
|
51
|
+
gap: var(--d2l-list-item-padding);
|
|
52
|
+
}
|
|
53
|
+
d2l-list-item > .custom-content > d2l-list-item-content {
|
|
54
|
+
flex: auto;
|
|
55
|
+
}
|
|
56
|
+
d2l-list-item > .custom-content > d2l-icon {
|
|
57
|
+
flex: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
d2l-list-item[layout="normal"] > .custom-content {
|
|
61
|
+
flex-direction: row;
|
|
62
|
+
width: 100%;
|
|
63
|
+
}
|
|
64
|
+
d2l-list-item[layout="normal"] > .custom-content > d2l-icon {
|
|
65
|
+
height: 3rem;
|
|
66
|
+
width: 3rem;
|
|
67
|
+
}
|
|
68
|
+
d2l-list-item[layout="normal"] > .custom-content > img {
|
|
69
|
+
display: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
d2l-list-item[layout="tile"] > .custom-content {
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
height: 100%;
|
|
75
|
+
}
|
|
76
|
+
d2l-list-item[layout="tile"] > .custom-content > img {
|
|
77
|
+
border-bottom: 1px solid var(--d2l-list-item-border-color);
|
|
78
|
+
border-start-end-radius: var(--d2l-list-item-illustration-border-radius);
|
|
79
|
+
border-start-start-radius: var(--d2l-list-item-illustration-border-radius);
|
|
80
|
+
height: 5rem;
|
|
81
|
+
object-fit: cover;
|
|
82
|
+
width: 100%;
|
|
83
|
+
}
|
|
84
|
+
d2l-list-item[layout="tile"] > .custom-content > d2l-icon {
|
|
85
|
+
background-color: white;
|
|
86
|
+
border: 1px solid var(--d2l-list-item-border-color);
|
|
87
|
+
border-radius: var(--d2l-list-item-illustration-border-radius);
|
|
88
|
+
box-sizing: border-box;
|
|
89
|
+
height: 4rem;
|
|
90
|
+
margin-block-start: calc(-1 * var(--d2l-list-item-padding) - 2rem);
|
|
91
|
+
margin-inline: auto;
|
|
92
|
+
padding: var(--d2l-list-item-padding);
|
|
93
|
+
width: 4rem;
|
|
94
|
+
}
|
|
95
|
+
d2l-list-item[layout="tile"] > .custom-content > d2l-list-item-content {
|
|
96
|
+
padding-inline: var(--d2l-list-item-padding);
|
|
97
|
+
}
|
|
98
|
+
d2l-list-item[layout="tile"] > .custom-content > .footer {
|
|
99
|
+
padding: var(--d2l-list-item-padding);
|
|
100
|
+
}
|
|
47
101
|
</style>
|
|
48
102
|
</head>
|
|
49
103
|
<body unresolved>
|
|
@@ -323,6 +377,55 @@
|
|
|
323
377
|
</template>
|
|
324
378
|
</d2l-demo-snippet>
|
|
325
379
|
|
|
380
|
+
<h2>Custom Layout</h2>
|
|
381
|
+
|
|
382
|
+
<d2l-demo-snippet>
|
|
383
|
+
<template>
|
|
384
|
+
<d2l-button-toggle pressed>
|
|
385
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
386
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
387
|
+
</d2l-button-toggle>
|
|
388
|
+
<d2l-list layout="tiles">
|
|
389
|
+
<d2l-list-item label="item 1" key="1" selectable tile-padding-type="none">
|
|
390
|
+
<div class="custom-content">
|
|
391
|
+
<img src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
392
|
+
<d2l-list-item-content>
|
|
393
|
+
<div>Identify categories of physical activities</div>
|
|
394
|
+
<div slot="secondary">Secondary Information</div>
|
|
395
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
396
|
+
</d2l-list-item-content>
|
|
397
|
+
<div class="footer">
|
|
398
|
+
<d2l-button style="width: 100%;">Shiny Button</d2l-button>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
<div slot="actions">
|
|
402
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
|
|
403
|
+
</div>
|
|
404
|
+
</d2l-list-item>
|
|
405
|
+
<d2l-list-item label="item 2" key="2" selectable tile-padding-type="none">
|
|
406
|
+
<div class="custom-content">
|
|
407
|
+
<img src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
408
|
+
<d2l-icon icon="tier3:home"></d2l-icon>
|
|
409
|
+
<d2l-list-item-content>
|
|
410
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
411
|
+
<div slot="secondary">Secondary Information</div>
|
|
412
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
413
|
+
</d2l-list-item-content>
|
|
414
|
+
<div class="footer">
|
|
415
|
+
<d2l-button style="width: 100%;">Shiny Button</d2l-button>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
418
|
+
<div slot="actions">
|
|
419
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
|
|
420
|
+
</div>
|
|
421
|
+
</d2l-list-item>
|
|
422
|
+
</d2l-list>
|
|
423
|
+
<script data-demo-hide>
|
|
424
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
425
|
+
</script>
|
|
426
|
+
</template>
|
|
427
|
+
</d2l-demo-snippet>
|
|
428
|
+
|
|
326
429
|
</d2l-demo-page>
|
|
327
430
|
</body>
|
|
328
431
|
</html>
|
|
@@ -367,6 +367,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
|
|
|
367
367
|
this.dropNested = false;
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
+
get dropDisabled() {
|
|
371
|
+
return this._dropNestedOnly && !this.dropNested;
|
|
372
|
+
}
|
|
373
|
+
|
|
370
374
|
connectedCallback() {
|
|
371
375
|
super.connectedCallback();
|
|
372
376
|
if (!this.key) {
|
|
@@ -393,10 +397,6 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
|
|
|
393
397
|
if (this.shadowRoot) this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
|
|
394
398
|
}
|
|
395
399
|
|
|
396
|
-
get #disabledDrop() {
|
|
397
|
-
return this._dropNestedOnly && !this.dropNested;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
400
|
_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
|
|
401
401
|
/** Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change). */
|
|
402
402
|
this.dispatchEvent(new CustomEvent('d2l-list-item-position-change', {
|
|
@@ -551,7 +551,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
|
|
|
551
551
|
this.dragging = false;
|
|
552
552
|
|
|
553
553
|
// check the dropEffect in case the user cancelled by Escape while dragging ('none' set by browser)
|
|
554
|
-
if (!
|
|
554
|
+
if (!dragState.dropTarget?.dropDisabled && e.dataTransfer.dropEffect !== 'none' && dragState.shouldDrop(e.timeStamp)) {
|
|
555
555
|
|
|
556
556
|
const dropTargetList = findComposedAncestor(dragState.dropTarget, node => node.tagName === 'D2L-LIST');
|
|
557
557
|
const shouldDispatchPositionChange = !dragState.dragTargets.find(dragTarget => {
|
|
@@ -615,7 +615,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
|
|
|
615
615
|
}
|
|
616
616
|
|
|
617
617
|
_onDragOver(e) {
|
|
618
|
-
if (!this.key || this
|
|
618
|
+
if (!this.key || this.dropDisabled) return;
|
|
619
619
|
const dragState = getDragState();
|
|
620
620
|
dragState.updateTime(e.timeStamp);
|
|
621
621
|
e.preventDefault();
|
|
@@ -903,7 +903,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
|
|
|
903
903
|
}
|
|
904
904
|
|
|
905
905
|
#onDropEnterHelper(e, isTopHalf, isMiddle) {
|
|
906
|
-
if (this
|
|
906
|
+
if (this.dropDisabled) return;
|
|
907
907
|
e.dataTransfer.dropEffect = 'move';
|
|
908
908
|
|
|
909
909
|
let location;
|
|
@@ -147,6 +147,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
147
147
|
display: none;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
:host d2l-list-item-generic-layout {
|
|
151
|
+
--d2l-list-item-border-color: var(--d2l-color-mica);
|
|
152
|
+
--d2l-list-item-illustration-border-radius: 5px;
|
|
153
|
+
--d2l-list-item-padding: 0.6rem;
|
|
154
|
+
}
|
|
155
|
+
|
|
150
156
|
:host([dragging]) d2l-list-item-generic-layout {
|
|
151
157
|
filter: grayscale(75%);
|
|
152
158
|
opacity: 0.4;
|
|
@@ -455,7 +461,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
455
461
|
box-sizing: border-box;
|
|
456
462
|
flex-direction: column;
|
|
457
463
|
height: 100%;
|
|
458
|
-
padding:
|
|
464
|
+
padding: var(--d2l-list-item-padding);
|
|
459
465
|
}
|
|
460
466
|
:host([layout="tile"][tile-padding-type="none"]) .d2l-list-item-content {
|
|
461
467
|
padding: 0;
|
|
@@ -465,11 +471,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
465
471
|
:host([layout="tile"]) .d2l-list-item-illustration > * {
|
|
466
472
|
border-end-end-radius: 0;
|
|
467
473
|
border-end-start-radius: 0;
|
|
468
|
-
border-start-end-radius:
|
|
469
|
-
border-start-start-radius:
|
|
474
|
+
border-start-end-radius: var(--d2l-list-item-illustration-border-radius);
|
|
475
|
+
border-start-start-radius: var(--d2l-list-item-illustration-border-radius);
|
|
470
476
|
box-sizing: border-box;
|
|
471
|
-
margin-block: -
|
|
472
|
-
margin-inline: -
|
|
477
|
+
margin-block: calc(-1 * var(--d2l-list-item-padding) + 1px) var(--d2l-list-item-padding);
|
|
478
|
+
margin-inline: calc(-1 * var(--d2l-list-item-padding) + 1px);
|
|
473
479
|
max-height: unset;
|
|
474
480
|
max-width: calc(100% + 1.1rem);
|
|
475
481
|
}
|
|
@@ -482,7 +488,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
482
488
|
:host([layout="tile"][tile-header]) [slot="content"] ::slotted([slot="illustration"]),
|
|
483
489
|
:host([layout="tile"][tile-header]) .d2l-list-item-illustration > * {
|
|
484
490
|
border-radius: 0;
|
|
485
|
-
margin-block: -
|
|
491
|
+
margin-block: calc(-1 * var(--d2l-list-item-padding)) var(--d2l-list-item-padding);
|
|
486
492
|
}
|
|
487
493
|
:host([layout="tile"][tile-header][tile-padding-type="none"]) [slot="content"] ::slotted([slot="illustration"]),
|
|
488
494
|
:host([layout="tile"][tile-header][tile-padding-type="none"]) .d2l-list-item-illustration > * {
|
|
@@ -498,7 +504,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
498
504
|
:host([layout="tile"]) .d2l-list-item-illustration > div[slot="illustration"],
|
|
499
505
|
:host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
|
|
500
506
|
:host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
|
|
501
|
-
border-bottom: 1px solid var(--d2l-color
|
|
507
|
+
border-bottom: 1px solid var(--d2l-list-item-border-color);
|
|
502
508
|
width: calc(100% + 1.1rem);
|
|
503
509
|
}
|
|
504
510
|
:host([layout="tile"][tile-padding-type="none"]) [slot="content"] ::slotted(div[slot="illustration"]),
|
|
@@ -510,14 +516,14 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
510
516
|
|
|
511
517
|
:host([layout="tile"]:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"],
|
|
512
518
|
:host([layout="tile"]) [slot="outside-control-container"] {
|
|
513
|
-
border-color: var(--d2l-color
|
|
519
|
+
border-color: var(--d2l-list-item-border-color);
|
|
514
520
|
margin: 0;
|
|
515
521
|
}
|
|
516
522
|
:host([layout="tile"]:not([draggable])[_has-color-slot]) [slot="outside-control-container"] {
|
|
517
523
|
margin-inline-start: 0;
|
|
518
524
|
}
|
|
519
525
|
:host([layout="tile"]:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
|
|
520
|
-
padding-inline:
|
|
526
|
+
padding-inline: var(--d2l-list-item-padding);
|
|
521
527
|
}
|
|
522
528
|
|
|
523
529
|
: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 {
|
|
@@ -535,7 +541,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
535
541
|
outline-offset: initial;
|
|
536
542
|
}
|
|
537
543
|
: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 {
|
|
538
|
-
border-color: var(--d2l-color
|
|
544
|
+
border-color: var(--d2l-list-item-border-color);
|
|
539
545
|
}
|
|
540
546
|
:host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content.d2l-list-item-content-none {
|
|
541
547
|
border-radius: 6px;
|
|
@@ -578,7 +584,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
578
584
|
:host([layout="tile"][tile-header]) [slot="control"] {
|
|
579
585
|
background-color: transparent;
|
|
580
586
|
display: inline-flex;
|
|
581
|
-
margin: 0.4rem
|
|
587
|
+
margin: 0.4rem var(--d2l-list-item-padding);
|
|
582
588
|
outline: none;
|
|
583
589
|
position: static;
|
|
584
590
|
}
|
|
@@ -587,14 +593,14 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
587
593
|
--d2l-button-icon-min-height: 1.5rem;
|
|
588
594
|
--d2l-button-icon-min-width: 1.5rem;
|
|
589
595
|
--d2l-button-icon-border-radius: 4px;
|
|
590
|
-
margin-block:
|
|
591
|
-
margin-inline-end:
|
|
596
|
+
margin-block: var(--d2l-list-item-padding);
|
|
597
|
+
margin-inline-end: var(--d2l-list-item-padding);
|
|
592
598
|
padding: 0;
|
|
593
599
|
position: absolute;
|
|
594
600
|
}
|
|
595
601
|
:host([layout="tile"][tile-header]) [slot="actions"] {
|
|
596
602
|
--d2l-button-icon-background-color-hover: var(--d2l-color-mica);
|
|
597
|
-
margin: 0.25rem
|
|
603
|
+
margin: 0.25rem var(--d2l-list-item-padding);
|
|
598
604
|
position: static;
|
|
599
605
|
}
|
|
600
606
|
|
package/custom-elements.json
CHANGED
|
@@ -9145,6 +9145,9 @@
|
|
|
9145
9145
|
"description": "**Selection:** Value to identify item if selectable",
|
|
9146
9146
|
"type": "string"
|
|
9147
9147
|
},
|
|
9148
|
+
{
|
|
9149
|
+
"name": "dropDisabled"
|
|
9150
|
+
},
|
|
9148
9151
|
{
|
|
9149
9152
|
"name": "draggable",
|
|
9150
9153
|
"attribute": "draggable",
|
|
@@ -9555,6 +9558,9 @@
|
|
|
9555
9558
|
"description": "**Selection:** Value to identify item if selectable",
|
|
9556
9559
|
"type": "string"
|
|
9557
9560
|
},
|
|
9561
|
+
{
|
|
9562
|
+
"name": "dropDisabled"
|
|
9563
|
+
},
|
|
9558
9564
|
{
|
|
9559
9565
|
"name": "draggable",
|
|
9560
9566
|
"attribute": "draggable",
|
|
@@ -10107,6 +10113,9 @@
|
|
|
10107
10113
|
"description": "**Selection:** Value to identify item if selectable",
|
|
10108
10114
|
"type": "string"
|
|
10109
10115
|
},
|
|
10116
|
+
{
|
|
10117
|
+
"name": "dropDisabled"
|
|
10118
|
+
},
|
|
10110
10119
|
{
|
|
10111
10120
|
"name": "draggable",
|
|
10112
10121
|
"attribute": "draggable",
|
|
@@ -10456,6 +10465,9 @@
|
|
|
10456
10465
|
"description": "**Selection:** Value to identify item if selectable",
|
|
10457
10466
|
"type": "string"
|
|
10458
10467
|
},
|
|
10468
|
+
{
|
|
10469
|
+
"name": "dropDisabled"
|
|
10470
|
+
},
|
|
10459
10471
|
{
|
|
10460
10472
|
"name": "draggable",
|
|
10461
10473
|
"attribute": "draggable",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.195.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",
|