@brightspace-ui/labs 2.20.2 → 2.20.4
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.
package/package.json
CHANGED
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"@brightspace-ui/core": "^3",
|
|
90
90
|
"@brightspace-ui/intl": "^3",
|
|
91
91
|
"@lit/context": "^1.1.3",
|
|
92
|
-
"fuse.js": "^
|
|
92
|
+
"fuse.js": "^7.1.0",
|
|
93
93
|
"lit": "^3",
|
|
94
94
|
"lodash-es": "^4.17.21",
|
|
95
95
|
"mobx": "^5",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"resize-observer-polyfill": "^1",
|
|
99
99
|
"webvtt-parser": "^2.1.2"
|
|
100
100
|
},
|
|
101
|
-
"version": "2.20.
|
|
101
|
+
"version": "2.20.4"
|
|
102
102
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import '@brightspace-ui/core/components/colors/colors.js';
|
|
2
2
|
import '@brightspace-ui/core/components/expand-collapse/expand-collapse-content.js';
|
|
3
3
|
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
4
|
-
import '@brightspace-ui/core/components/inputs/input-checkbox-spacer.js';
|
|
5
4
|
import '@brightspace-ui/core/components/icons/icon.js';
|
|
6
5
|
import { css, html, LitElement } from 'lit';
|
|
7
6
|
import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
|
|
@@ -26,7 +25,7 @@ class CheckboxDrawer extends LocalizeLabsElement(SkeletonMixin(LitElement)) {
|
|
|
26
25
|
display: block;
|
|
27
26
|
}
|
|
28
27
|
|
|
29
|
-
.d2l-input-checkbox
|
|
28
|
+
.d2l-input-checkbox {
|
|
30
29
|
margin-bottom: 0;
|
|
31
30
|
}
|
|
32
31
|
|
|
@@ -44,6 +43,9 @@ class CheckboxDrawer extends LocalizeLabsElement(SkeletonMixin(LitElement)) {
|
|
|
44
43
|
display: inline-block;
|
|
45
44
|
margin-left: 0.5rem;
|
|
46
45
|
}
|
|
46
|
+
.d2l-input-read-only-spacer {
|
|
47
|
+
padding-inline-start: 1.7rem;
|
|
48
|
+
}
|
|
47
49
|
`];
|
|
48
50
|
}
|
|
49
51
|
|
|
@@ -54,27 +56,34 @@ class CheckboxDrawer extends LocalizeLabsElement(SkeletonMixin(LitElement)) {
|
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
render() {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
if (this.readOnly) {
|
|
60
|
+
return html `
|
|
59
61
|
<d2l-icon class="d2l-skeletize" icon="${this.checked ? 'tier1:check' : 'tier1:close-default'}"></d2l-icon>
|
|
60
62
|
<div class="d2l-body-compact d2l-input-read-only-label d2l-skeletize">${this.label}</div>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
?
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
63
|
+
<div class="d2l-input-read-only-spacer">
|
|
64
|
+
<div class="d2l-input-checkbox-description d2l-skeletize">${this.description}</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="d2l-input-read-only-spacer">
|
|
67
|
+
<d2l-expand-collapse-content ?expanded="${this.checked}" aria-busy=${this._expandCollapseBusy ? 'true' : 'false'} @d2l-expand-collapse-content-expand="${this._onExpandCollapseContentToggled}" @d2l-expand-collapse-content-collapse="${this._onExpandCollapseContentToggled}">
|
|
68
|
+
<div class="d2l-checkbox-content-margin"></div>
|
|
69
|
+
<slot></slot>
|
|
70
|
+
</d2l-expand-collapse-content>
|
|
71
|
+
</div>
|
|
72
|
+
`;
|
|
73
|
+
}
|
|
74
|
+
return html`
|
|
75
|
+
<d2l-input-checkbox
|
|
76
|
+
?checked="${this.checked}"
|
|
77
|
+
class="d2l-input-checkbox"
|
|
78
|
+
?skeleton="${this.skeleton}"
|
|
79
|
+
description=${this.localize(`components:checkboxDrawer:checkbox${this.checked ? 'Expanded' : 'Collapsed'}`)}
|
|
80
|
+
@change="${this._onCheckboxChange}">
|
|
81
|
+
${this.label}
|
|
82
|
+
<div slot="inline-help">${this.description}</div>
|
|
83
|
+
<d2l-expand-collapse-content slot="supporting" ?expanded="${this.checked}" aria-busy=${this._expandCollapseBusy ? 'true' : 'false'} @d2l-expand-collapse-content-expand="${this._onExpandCollapseContentToggled}" @d2l-expand-collapse-content-collapse="${this._onExpandCollapseContentToggled}">
|
|
75
84
|
<slot></slot>
|
|
76
85
|
</d2l-expand-collapse-content>
|
|
77
|
-
</d2l-input-checkbox
|
|
86
|
+
</d2l-input-checkbox>
|
|
78
87
|
`;
|
|
79
88
|
}
|
|
80
89
|
|