@brightspace-ui/core 3.142.0 → 3.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.
@@ -45,6 +45,8 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
|
|
45
45
|
--d2l-button-add-animation-duration: 200ms;
|
46
46
|
--d2l-button-add-hover-focus-color: var(--d2l-color-celestine-minus-1);
|
47
47
|
--d2l-button-add-line-color: var(--d2l-color-mica);
|
48
|
+
--d2l-button-add-line-height: 1px;
|
49
|
+
--d2l-button-add-hover-focus-line-height: 2px;
|
48
50
|
}
|
49
51
|
:host([mode="icon-when-interacted"]) {
|
50
52
|
--d2l-button-add-animation-delay: 50ms;
|
@@ -74,7 +76,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
|
|
74
76
|
|
75
77
|
.line {
|
76
78
|
background: var(--d2l-button-add-line-color);
|
77
|
-
height:
|
79
|
+
height: var(--d2l-button-add-line-height);
|
78
80
|
margin: 5px 0;
|
79
81
|
width: 100%;
|
80
82
|
}
|
@@ -82,7 +84,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
|
|
82
84
|
button:hover .line,
|
83
85
|
button:focus .line {
|
84
86
|
background: var(--d2l-button-add-hover-focus-color);
|
85
|
-
height:
|
87
|
+
height: var(--d2l-button-add-hover-focus-line-height);
|
86
88
|
}
|
87
89
|
button:hover d2l-button-add-icon-text,
|
88
90
|
button:focus d2l-button-add-icon-text {
|
@@ -139,21 +141,21 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
|
|
139
141
|
|
140
142
|
@keyframes line-start-animation {
|
141
143
|
0% {
|
142
|
-
background: linear-gradient(to right, var(--d2l-color
|
144
|
+
background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%;
|
143
145
|
opacity: 10%;
|
144
146
|
}
|
145
147
|
100% {
|
146
|
-
background: linear-gradient(to right, var(--d2l-color
|
148
|
+
background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%; /* safari */
|
147
149
|
background-position: right;
|
148
150
|
}
|
149
151
|
}
|
150
152
|
@keyframes line-end-animation {
|
151
153
|
0% {
|
152
|
-
background: linear-gradient(to left, var(--d2l-color
|
154
|
+
background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%;
|
153
155
|
opacity: 10%;
|
154
156
|
}
|
155
157
|
100% {
|
156
|
-
background: linear-gradient(to left, var(--d2l-color
|
158
|
+
background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%; /* safari */
|
157
159
|
background-position: left;
|
158
160
|
}
|
159
161
|
}
|
@@ -84,6 +84,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
84
84
|
* @type {boolean}
|
85
85
|
*/
|
86
86
|
dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
|
87
|
+
/**
|
88
|
+
* @ignore
|
89
|
+
*/
|
90
|
+
last: { type: Boolean, reflect: true },
|
87
91
|
/**
|
88
92
|
* Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
|
89
93
|
* @type {boolean}
|
@@ -18,6 +18,8 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
|
|
18
18
|
preventNavigation: { type: Boolean, attribute: 'prevent-navigation' },
|
19
19
|
_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
|
20
20
|
_focusingElem: { type: Boolean, reflect: true, attribute: '_focusing-elem' },
|
21
|
+
_hasCurrentParent: { type: Boolean, reflect: true, attribute: '_has-current-parent' },
|
22
|
+
_nextSiblingCurrent: { type: Boolean, reflect: true, attribute: '_next-sibling-current' },
|
21
23
|
};
|
22
24
|
}
|
23
25
|
|
@@ -44,6 +46,26 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
|
|
44
46
|
--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
|
45
47
|
--d2l-list-item-content-text-decoration: none;
|
46
48
|
}
|
49
|
+
:host([current]) d2l-button-add,
|
50
|
+
:host([_has-current-parent]) [slot="add-top"] d2l-button-add,
|
51
|
+
:host([_next-sibling-current]) [slot="add"] d2l-button-add {
|
52
|
+
--d2l-button-add-hover-focus-line-height: 3px;
|
53
|
+
--d2l-button-add-line-color: var(--d2l-color-celestine);
|
54
|
+
--d2l-button-add-line-height: 3px;
|
55
|
+
}
|
56
|
+
:host([current]) [slot="add"],
|
57
|
+
:host([_has-current-parent]) [slot="add-top"] {
|
58
|
+
margin-bottom: -14.5px;
|
59
|
+
margin-top: -13.5px;
|
60
|
+
}
|
61
|
+
:host([current]) [slot="add-top"],
|
62
|
+
:host([_next-sibling-current]) [slot="add"] {
|
63
|
+
margin-bottom: -13.5px;
|
64
|
+
margin-top: -10.5px;
|
65
|
+
}
|
66
|
+
:host([current]) .d2l-list-item-color-outer {
|
67
|
+
padding-block: 3px;
|
68
|
+
}
|
47
69
|
|
48
70
|
/* clean up with GAUD-7495-list-item-new-styles flag */
|
49
71
|
@supports selector(:has(a, b)) {
|
@@ -70,6 +92,8 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
|
|
70
92
|
this.current = false;
|
71
93
|
this._childCurrent = false;
|
72
94
|
this._focusingElem = false;
|
95
|
+
this._hasCurrentParent = false;
|
96
|
+
this._nextSiblingCurrent = false;
|
73
97
|
}
|
74
98
|
|
75
99
|
connectedCallback() {
|
@@ -120,6 +144,24 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
|
|
120
144
|
dispatchSetChildCurrentEvent(val) {
|
121
145
|
/** @ignore */
|
122
146
|
this.dispatchEvent(new CustomEvent('d2l-list-item-nav-set-child-current', { bubbles: true, composed: true, detail: { value: val } }));
|
147
|
+
|
148
|
+
if (!val) return;
|
149
|
+
requestAnimationFrame(() => {
|
150
|
+
if (this._hasNestedListAddButton) {
|
151
|
+
const firstChild = this.querySelector('[first]');
|
152
|
+
if (firstChild) firstChild._hasCurrentParent = true;
|
153
|
+
}
|
154
|
+
|
155
|
+
const prevSibling = this._getPreviousListItemSibling();
|
156
|
+
if (prevSibling) {
|
157
|
+
if (prevSibling._showAddButton) prevSibling._nextSiblingCurrent = true;
|
158
|
+
|
159
|
+
if (prevSibling._hasNestedListAddButton) {
|
160
|
+
const lastChild = prevSibling.querySelector('[last]');
|
161
|
+
if (lastChild) lastChild._nextSiblingCurrent = true;
|
162
|
+
}
|
163
|
+
}
|
164
|
+
});
|
123
165
|
}
|
124
166
|
|
125
167
|
_handleLinkClick(e) {
|
package/components/list/list.js
CHANGED
@@ -416,6 +416,15 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
416
416
|
target.dispatchSetChildCurrentEvent(true);
|
417
417
|
}, { once: true });
|
418
418
|
prevCurrent.current = false;
|
419
|
+
const firstChild = this.querySelector('[_has-current-parent]');
|
420
|
+
if (firstChild) firstChild._hasCurrentParent = false;
|
421
|
+
|
422
|
+
const prevSiblings = this.querySelectorAll('[_next-sibling-current]');
|
423
|
+
if (prevSiblings.length > 0) {
|
424
|
+
prevSiblings.forEach(sibling => {
|
425
|
+
sibling._nextSiblingCurrent = false;
|
426
|
+
});
|
427
|
+
}
|
419
428
|
} else {
|
420
429
|
target.dispatchSetChildCurrentEvent(true);
|
421
430
|
}
|
@@ -437,9 +446,21 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
437
446
|
|
438
447
|
_handleSlotChange() {
|
439
448
|
this._updateItemShowingCount();
|
440
|
-
this.getItems()
|
441
|
-
|
442
|
-
|
449
|
+
const items = this.getItems();
|
450
|
+
items.forEach((item, i) => {
|
451
|
+
if (items.length === 1) {
|
452
|
+
item.first = true;
|
453
|
+
item.last = true;
|
454
|
+
} else if (i === 0) {
|
455
|
+
item.first = true;
|
456
|
+
item.last = false;
|
457
|
+
} else if (i === items.length - 1) {
|
458
|
+
item.first = false;
|
459
|
+
item.last = true;
|
460
|
+
} else {
|
461
|
+
item.first = false;
|
462
|
+
item.last = false;
|
463
|
+
}
|
443
464
|
});
|
444
465
|
|
445
466
|
/** @ignore */
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.142.
|
3
|
+
"version": "3.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",
|