@brightspace-ui/core 3.38.0 → 3.39.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -5,6 +5,7 @@ import '../../expand-collapse/expand-collapse-content.js';
|
|
|
5
5
|
import '../../inputs/input-number.js';
|
|
6
6
|
import '../../inputs/input-text.js';
|
|
7
7
|
import '../form.js';
|
|
8
|
+
import '../../collapsible-panel/collapsible-panel.js';
|
|
8
9
|
import { css, html, LitElement } from 'lit';
|
|
9
10
|
import { heading3Styles } from '../../typography/styles.js';
|
|
10
11
|
import { inputStyles } from '../../inputs/input-styles.js';
|
|
@@ -63,36 +64,38 @@ class FormPanelDemo extends LitElement {
|
|
|
63
64
|
|
|
64
65
|
render() {
|
|
65
66
|
return html`
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<div class="d2l-form-panel-demo-container">
|
|
88
|
-
<d2l-input-number label="Age" name="age" required min="18" max="23"></d2l-input-number>
|
|
89
|
-
</div>
|
|
90
|
-
</d2l-form>
|
|
91
|
-
</d2l-expand-collapse-content>
|
|
92
|
-
</div>
|
|
67
|
+
<d2l-collapsible-panel
|
|
68
|
+
panel-title="Personal Information"
|
|
69
|
+
type="subtle"
|
|
70
|
+
?expanded=${this._expanded}
|
|
71
|
+
@d2l-collapsible-panel-expand=${this._onExpand}
|
|
72
|
+
@d2l-collapsible-panel-collapse=${this._onCollapse}>
|
|
73
|
+
<d2l-form @d2l-form-invalid=${this._onInvalid} @d2l-form-submit=${this._onSubmit}>
|
|
74
|
+
<div class="d2l-form-panel-demo-container">
|
|
75
|
+
<d2l-input-text label="First Name" name="first-name" required minlength="4" maxlength="15"></d2l-input-text>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="d2l-form-panel-demo-container">
|
|
78
|
+
<d2l-input-text label="Middle Name" name="middle-name" minlength="4" maxlength="8"></d2l-input-text>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="d2l-form-panel-demo-container">
|
|
81
|
+
<d2l-input-text label="Last Name" name="last-name" required minlength="4" maxlength="15"></d2l-input-text>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="d2l-form-panel-demo-container">
|
|
84
|
+
<d2l-input-number label="Age" name="age" required min="18" max="23"></d2l-input-number>
|
|
85
|
+
</div>
|
|
86
|
+
</d2l-form>
|
|
87
|
+
</d2l-collapsible-panel>
|
|
93
88
|
`;
|
|
94
89
|
}
|
|
95
90
|
|
|
91
|
+
_onCollapse() {
|
|
92
|
+
this._expanded = false;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
_onExpand() {
|
|
96
|
+
this._expanded = true;
|
|
97
|
+
}
|
|
98
|
+
|
|
96
99
|
_onInvalid() {
|
|
97
100
|
this._expanded = true;
|
|
98
101
|
}
|
|
@@ -101,11 +104,5 @@ class FormPanelDemo extends LitElement {
|
|
|
101
104
|
// eslint-disable-next-line no-console
|
|
102
105
|
console.log(e.detail.formData);
|
|
103
106
|
}
|
|
104
|
-
|
|
105
|
-
_toggleExpandCollapse(e) {
|
|
106
|
-
e.stopPropagation();
|
|
107
|
-
this._expanded = !this._expanded;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
107
|
}
|
|
111
108
|
customElements.define('d2l-form-panel-demo', FormPanelDemo);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.39.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",
|