@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
- _panels: { state: true },
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._panels?.[0]?.type !== 'inline',
42
+ spaced: this._spaced,
41
43
  };
42
44
 
43
- return html`<slot class="${classMap(classes)}" @slotchange="${this._handleSlotChange}"></slot>`;
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
- if (!this._panels || this._panels.length === 0) return;
60
-
61
- if (this._panels[0]?.type !== 'inline') return;
62
-
63
- for (const panel of this._panels) {
64
- panel._noBottomBorder = true;
65
- }
66
-
67
- this._panels[this._panels.length - 1]._noBottomBorder = false;
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
- _noBottomBorder: { state: true },
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._noBottomBorder = false;
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._noBottomBorder,
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.90.0",
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",