@brightspace-ui/core 3.90.0 → 3.91.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.
@@ -1,6 +1,7 @@
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
2
2
|
import { classMap } from 'lit/directives/class-map.js';
|
3
3
|
import { SkeletonGroupMixin } from '../skeleton/skeleton-group-mixin.js';
|
4
|
+
import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
|
4
5
|
|
5
6
|
/**
|
6
7
|
* A component that renders a container and layout for collapsible panels
|
@@ -10,7 +11,7 @@ class CollapsiblePanelGroup extends SkeletonGroupMixin(LitElement) {
|
|
10
11
|
|
11
12
|
static get properties() {
|
12
13
|
return {
|
13
|
-
|
14
|
+
_spaced: { state: true }
|
14
15
|
};
|
15
16
|
}
|
16
17
|
|
@@ -32,39 +33,28 @@ class CollapsiblePanelGroup extends SkeletonGroupMixin(LitElement) {
|
|
32
33
|
|
33
34
|
constructor() {
|
34
35
|
super();
|
35
|
-
this._panels =
|
36
|
+
this._panels = new SubscriberRegistryController(this, 'collapsible-panel-group');
|
37
|
+
this._spaced = true;
|
36
38
|
}
|
37
39
|
|
38
40
|
render() {
|
39
41
|
const classes = {
|
40
|
-
spaced: this.
|
42
|
+
spaced: this._spaced,
|
41
43
|
};
|
42
44
|
|
43
|
-
return html`<slot class="${classMap(classes)}"
|
44
|
-
}
|
45
|
-
|
46
|
-
async _getPanels() {
|
47
|
-
const slot = this.shadowRoot?.querySelector('slot');
|
48
|
-
if (!slot) return;
|
49
|
-
|
50
|
-
return slot.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
|
51
|
-
}
|
52
|
-
|
53
|
-
async _handleSlotChange() {
|
54
|
-
this._panels = await this._getPanels();
|
55
|
-
this._updatePanelAttributes();
|
45
|
+
return html`<slot class="${classMap(classes)}"></slot>`;
|
56
46
|
}
|
57
47
|
|
58
48
|
_updatePanelAttributes() {
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
49
|
+
const panels = this.shadowRoot
|
50
|
+
?.querySelector('slot')
|
51
|
+
?.assignedNodes({ flatten: true })
|
52
|
+
.filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-COLLAPSIBLE-PANEL');
|
53
|
+
if (!panels?.length) return;
|
54
|
+
|
55
|
+
const isInline = panels[0].type === 'inline';
|
56
|
+
this._spaced = !isInline;
|
57
|
+
panels.forEach((p, idx) => p._isLastPanelInGroup = idx === panels.length - 1);
|
68
58
|
}
|
69
59
|
}
|
70
60
|
|
@@ -4,6 +4,7 @@ import '../expand-collapse/expand-collapse-content.js';
|
|
4
4
|
import { css, html, LitElement } from 'lit';
|
5
5
|
import { heading1Styles, heading2Styles, heading3Styles, heading4Styles } from '../typography/styles.js';
|
6
6
|
import { classMap } from 'lit/directives/class-map.js';
|
7
|
+
import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
|
7
8
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
8
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
9
10
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
@@ -86,7 +87,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
|
|
86
87
|
_focused: { state: true },
|
87
88
|
_hasBefore: { state: true },
|
88
89
|
_hasSummary: { state: true },
|
89
|
-
|
90
|
+
_isLastPanelInGroup: { state: true },
|
90
91
|
_scrolled: { state: true },
|
91
92
|
};
|
92
93
|
}
|
@@ -321,8 +322,15 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
|
|
321
322
|
this.type = 'default';
|
322
323
|
this.noSticky = false;
|
323
324
|
this._focused = false;
|
325
|
+
this._group = undefined;
|
326
|
+
this._groupSubscription = new EventSubscriberController(this, 'collapsible-panel-group', {
|
327
|
+
onSubscribe: (registry) => {
|
328
|
+
this._group = registry;
|
329
|
+
this._group._updatePanelAttributes();
|
330
|
+
}
|
331
|
+
});
|
324
332
|
this._hasSummary = false;
|
325
|
-
this.
|
333
|
+
this._isLastPanelInGroup = true;
|
326
334
|
this._scrolled = false;
|
327
335
|
}
|
328
336
|
|
@@ -342,7 +350,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
|
|
342
350
|
'has-summary': this._hasSummary,
|
343
351
|
'has-before': this._hasBefore,
|
344
352
|
'scrolled': this._scrolled,
|
345
|
-
'no-bottom-border': this.
|
353
|
+
'no-bottom-border': this.type === 'inline' && !this._isLastPanelInGroup,
|
346
354
|
};
|
347
355
|
|
348
356
|
return html`
|
@@ -378,6 +386,10 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
|
|
378
386
|
if (changedProperties.has('noSticky')) {
|
379
387
|
this._stickyObserverUpdate();
|
380
388
|
}
|
389
|
+
|
390
|
+
if (changedProperties.has('type')) {
|
391
|
+
this._group?._updatePanelAttributes();
|
392
|
+
}
|
381
393
|
}
|
382
394
|
|
383
395
|
_handleActionsClick(e) {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.91.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",
|