@brightspace-ui/core 2.128.3 → 2.128.5
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.
|
@@ -363,7 +363,7 @@ Collapsible panels have two optional slots, `header` and `actions` that can be u
|
|
|
363
363
|
|
|
364
364
|
Use the `d2l-collapsible-panel-group` component to automatically handle spacing and layout for multiple panels.
|
|
365
365
|
|
|
366
|
-
<!-- docs: demo live -->
|
|
366
|
+
<!-- docs: demo live name:d2l-collapsible-panel-group -->
|
|
367
367
|
```html
|
|
368
368
|
<script type="module">
|
|
369
369
|
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
|
2
2
|
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
-
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
4
3
|
|
|
5
4
|
/**
|
|
6
5
|
* A component that renders a container and layout for collapsible panels
|
|
7
6
|
* @slot default - Slot for panels. Only accepts `d2l-collapsible-panel`
|
|
8
7
|
*/
|
|
9
|
-
class CollapsiblePanelGroup extends
|
|
8
|
+
class CollapsiblePanelGroup extends LitElement {
|
|
10
9
|
|
|
11
10
|
static get properties() {
|
|
12
11
|
return {
|
|
@@ -15,7 +14,7 @@ class CollapsiblePanelGroup extends SkeletonMixin(LitElement) {
|
|
|
15
14
|
}
|
|
16
15
|
|
|
17
16
|
static get styles() {
|
|
18
|
-
return
|
|
17
|
+
return css`
|
|
19
18
|
:host ::slotted(*) {
|
|
20
19
|
display: none;
|
|
21
20
|
}
|
|
@@ -27,7 +26,7 @@ class CollapsiblePanelGroup extends SkeletonMixin(LitElement) {
|
|
|
27
26
|
flex-direction: column;
|
|
28
27
|
row-gap: 0.5rem;
|
|
29
28
|
}
|
|
30
|
-
|
|
29
|
+
`;
|
|
31
30
|
}
|
|
32
31
|
|
|
33
32
|
constructor() {
|
|
@@ -119,17 +119,17 @@ class ExpandCollapseContent extends LitElement {
|
|
|
119
119
|
));
|
|
120
120
|
}
|
|
121
121
|
if (reduceMotion || firstUpdate) {
|
|
122
|
-
this.
|
|
123
|
-
this._height = 'auto';
|
|
124
|
-
this._eventPromiseResolve();
|
|
122
|
+
this._setExpanded();
|
|
125
123
|
} else {
|
|
126
124
|
this._state = states.PREEXPANDING;
|
|
127
125
|
await this.updateComplete;
|
|
128
126
|
await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
|
|
129
127
|
if (this._state === states.PREEXPANDING) {
|
|
130
128
|
this._state = states.EXPANDING;
|
|
131
|
-
const content = this.shadowRoot
|
|
132
|
-
|
|
129
|
+
const content = this.shadowRoot?.querySelector('.d2l-expand-collapse-content-inner');
|
|
130
|
+
const contentHeight = content?.scrollHeight;
|
|
131
|
+
if (contentHeight) this._height = `${contentHeight}px`;
|
|
132
|
+
if (contentHeight === 0) this._setExpanded();
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
135
|
} else {
|
|
@@ -159,14 +159,17 @@ class ExpandCollapseContent extends LitElement {
|
|
|
159
159
|
|
|
160
160
|
_onTransitionEnd() {
|
|
161
161
|
if (this._state === states.EXPANDING) {
|
|
162
|
-
this.
|
|
163
|
-
this._height = 'auto';
|
|
164
|
-
this._eventPromiseResolve();
|
|
162
|
+
this._setExpanded();
|
|
165
163
|
} else if (this._state === states.COLLAPSING) {
|
|
166
164
|
this._state = states.COLLAPSED;
|
|
167
165
|
this._eventPromiseResolve();
|
|
168
166
|
}
|
|
169
167
|
}
|
|
170
168
|
|
|
169
|
+
_setExpanded() {
|
|
170
|
+
this._state = states.EXPANDED;
|
|
171
|
+
this._height = 'auto';
|
|
172
|
+
this._eventPromiseResolve();
|
|
173
|
+
}
|
|
171
174
|
}
|
|
172
175
|
customElements.define('d2l-expand-collapse-content', ExpandCollapseContent);
|
package/custom-elements.json
CHANGED
|
@@ -1150,23 +1150,6 @@
|
|
|
1150
1150
|
"name": "d2l-collapsible-panel-group",
|
|
1151
1151
|
"path": "./components/collapsible-panel/collapsible-panel-group.js",
|
|
1152
1152
|
"description": "A component that renders a container and layout for collapsible panels",
|
|
1153
|
-
"attributes": [
|
|
1154
|
-
{
|
|
1155
|
-
"name": "skeleton",
|
|
1156
|
-
"description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
|
|
1157
|
-
"type": "boolean",
|
|
1158
|
-
"default": "false"
|
|
1159
|
-
}
|
|
1160
|
-
],
|
|
1161
|
-
"properties": [
|
|
1162
|
-
{
|
|
1163
|
-
"name": "skeleton",
|
|
1164
|
-
"attribute": "skeleton",
|
|
1165
|
-
"description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
|
|
1166
|
-
"type": "boolean",
|
|
1167
|
-
"default": "false"
|
|
1168
|
-
}
|
|
1169
|
-
],
|
|
1170
1153
|
"slots": [
|
|
1171
1154
|
{
|
|
1172
1155
|
"name": "default",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.128.
|
|
3
|
+
"version": "2.128.5",
|
|
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",
|