@brightspace-ui/core 2.176.3 → 2.177.1
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/components/inputs/demo/input-date-range.html +28 -0
- package/components/inputs/demo/input-date-time-range.html +28 -0
- package/components/inputs/demo/input-date-time.html +28 -0
- package/components/inputs/demo/input-time-range.html +28 -0
- package/components/inputs/input-date-range.js +2 -0
- package/components/inputs/input-date-time-range.js +2 -0
- package/components/inputs/input-date-time.js +2 -0
- package/components/inputs/input-date.js +1 -0
- package/components/inputs/input-fieldset.js +10 -2
- package/components/inputs/input-inline-help-mixin.js +1 -1
- package/components/inputs/input-number.js +1 -0
- package/components/inputs/input-percent.js +1 -0
- package/components/inputs/input-search.js +1 -0
- package/components/inputs/input-time-range.js +2 -0
- package/custom-elements.json +42 -0
- package/package.json +1 -1
|
@@ -81,6 +81,34 @@
|
|
|
81
81
|
<d2l-input-date-range label="Assignment Dates" disabled></d2l-input-date-range>
|
|
82
82
|
</template>
|
|
83
83
|
</d2l-demo-snippet>
|
|
84
|
+
|
|
85
|
+
<h2>Inline Help</h2>
|
|
86
|
+
<d2l-demo-snippet>
|
|
87
|
+
<template>
|
|
88
|
+
<d2l-input-date-range label="Assignment Dates">
|
|
89
|
+
<div slot="inline-help">
|
|
90
|
+
Help text <b>right here</b>!
|
|
91
|
+
</div>
|
|
92
|
+
</d2l-input-date-range>
|
|
93
|
+
</template>
|
|
94
|
+
</d2l-demo-snippet>
|
|
95
|
+
|
|
96
|
+
<h2>Inline Help (multiline)</h2>
|
|
97
|
+
<d2l-demo-snippet>
|
|
98
|
+
<template>
|
|
99
|
+
<d2l-input-date-range label="Assignment Dates">
|
|
100
|
+
<div slot="inline-help">
|
|
101
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
102
|
+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
103
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
|
104
|
+
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
|
105
|
+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
106
|
+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
|
|
107
|
+
qui officia deserunt mollit anim id est laborum.
|
|
108
|
+
</div>
|
|
109
|
+
</d2l-input-date-range>
|
|
110
|
+
</template>
|
|
111
|
+
</d2l-demo-snippet>
|
|
84
112
|
</d2l-demo-page>
|
|
85
113
|
</body>
|
|
86
114
|
</html>
|
|
@@ -95,6 +95,34 @@
|
|
|
95
95
|
</d2l-input-date-time-range>
|
|
96
96
|
</template>
|
|
97
97
|
</d2l-demo-snippet>
|
|
98
|
+
|
|
99
|
+
<h2>Inline Help</h2>
|
|
100
|
+
<d2l-demo-snippet>
|
|
101
|
+
<template>
|
|
102
|
+
<d2l-input-date-time-range label="Assignment Dates">
|
|
103
|
+
<div slot="inline-help">
|
|
104
|
+
Help text <b>right here</b>!
|
|
105
|
+
</div>
|
|
106
|
+
</d2l-input-date-time-range>
|
|
107
|
+
</template>
|
|
108
|
+
</d2l-demo-snippet>
|
|
109
|
+
|
|
110
|
+
<h2>Inline Help (multiline)</h2>
|
|
111
|
+
<d2l-demo-snippet>
|
|
112
|
+
<template>
|
|
113
|
+
<d2l-input-date-time-range label="Assignment Dates">
|
|
114
|
+
<div slot="inline-help">
|
|
115
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
116
|
+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
117
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
|
118
|
+
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
|
119
|
+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
120
|
+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
|
|
121
|
+
qui officia deserunt mollit anim id est laborum.
|
|
122
|
+
</div>
|
|
123
|
+
</d2l-input-date-time-range>
|
|
124
|
+
</template>
|
|
125
|
+
</d2l-demo-snippet>
|
|
98
126
|
</d2l-demo-page>
|
|
99
127
|
</body>
|
|
100
128
|
</html>
|
|
@@ -67,6 +67,34 @@
|
|
|
67
67
|
<d2l-input-date-time label="Name" time-default-value="12:34:56"></d2l-input-date-time>
|
|
68
68
|
</template>
|
|
69
69
|
</d2l-demo-snippet>
|
|
70
|
+
|
|
71
|
+
<h2>Inline Help</h2>
|
|
72
|
+
<d2l-demo-snippet>
|
|
73
|
+
<template>
|
|
74
|
+
<d2l-input-date-time label="Name (with min and max)" min-value="2018-08-27T12:30:00Z" max-value="2018-09-30T12:30:00Z" value="2018-08-30T12:30:00Z">
|
|
75
|
+
<div slot="inline-help">
|
|
76
|
+
Help text <b>right here</b>!
|
|
77
|
+
</div>
|
|
78
|
+
</d2l-input-date-time>
|
|
79
|
+
</template>
|
|
80
|
+
</d2l-demo-snippet>
|
|
81
|
+
|
|
82
|
+
<h2>Inline Help (multiline)</h2>
|
|
83
|
+
<d2l-demo-snippet>
|
|
84
|
+
<template>
|
|
85
|
+
<d2l-input-date-time label="Name (with min and max)" min-value="2018-08-27T12:30:00Z" max-value="2018-09-30T12:30:00Z" value="2018-08-30T12:30:00Z">
|
|
86
|
+
<div slot="inline-help">
|
|
87
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
88
|
+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
89
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
|
90
|
+
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
|
91
|
+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
92
|
+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
|
|
93
|
+
qui officia deserunt mollit anim id est laborum.
|
|
94
|
+
</div>
|
|
95
|
+
</d2l-input-date-time>
|
|
96
|
+
</template>
|
|
97
|
+
</d2l-demo-snippet>
|
|
70
98
|
</d2l-demo-page>
|
|
71
99
|
</body>
|
|
72
100
|
</html>
|
|
@@ -88,6 +88,34 @@
|
|
|
88
88
|
<d2l-input-time-range label="Time Range" disabled></d2l-input-time-range>
|
|
89
89
|
</template>
|
|
90
90
|
</d2l-demo-snippet>
|
|
91
|
+
|
|
92
|
+
<h2>Inline Help</h2>
|
|
93
|
+
<d2l-demo-snippet>
|
|
94
|
+
<template>
|
|
95
|
+
<d2l-input-time-range label="Time Range">
|
|
96
|
+
<div slot="inline-help">
|
|
97
|
+
Help text <b>right here</b>!
|
|
98
|
+
</div>
|
|
99
|
+
</d2l-input-time-range>
|
|
100
|
+
</template>
|
|
101
|
+
</d2l-demo-snippet>
|
|
102
|
+
|
|
103
|
+
<h2>Inline Help (multiline)</h2>
|
|
104
|
+
<d2l-demo-snippet>
|
|
105
|
+
<template>
|
|
106
|
+
<d2l-input-time-range label="Time Range">
|
|
107
|
+
<div slot="inline-help">
|
|
108
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
109
|
+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
110
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
|
111
|
+
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
|
112
|
+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
113
|
+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
|
|
114
|
+
qui officia deserunt mollit anim id est laborum.
|
|
115
|
+
</div>
|
|
116
|
+
</d2l-input-time-range>
|
|
117
|
+
</template>
|
|
118
|
+
</d2l-demo-snippet>
|
|
91
119
|
</d2l-demo-page>
|
|
92
120
|
</body>
|
|
93
121
|
</html>
|
|
@@ -29,6 +29,7 @@ export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusiv
|
|
|
29
29
|
|
|
30
30
|
/**
|
|
31
31
|
* A component consisting of two input-date components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 calendar date format ("YYYY-MM-DD").
|
|
32
|
+
* @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
|
|
32
33
|
* @fires change - Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
|
|
33
34
|
*/
|
|
34
35
|
class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement))))) {
|
|
@@ -220,6 +221,7 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
|
|
|
220
221
|
value="${ifDefined(this.endValue)}">
|
|
221
222
|
</d2l-input-date>
|
|
222
223
|
</d2l-input-date-time-range-to>
|
|
224
|
+
<slot slot="inline-help" name="inline-help"></slot>
|
|
223
225
|
</d2l-input-fieldset>
|
|
224
226
|
`;
|
|
225
227
|
}
|
|
@@ -62,6 +62,7 @@ export function getShiftedEndDateTime(startValue, endValue, prevStartValue, incl
|
|
|
62
62
|
* A component consisting of two input-date-time components - one for start of range and one for end of range. The time input only appears once a date is selected.
|
|
63
63
|
* @slot start - Optional content that would appear below the start input-date-time
|
|
64
64
|
* @slot end - Optional content that would appear below the end input-date-time
|
|
65
|
+
* @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
|
|
65
66
|
* @fires change - Dispatched when there is a change to selected start date-time or selected end date-time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
|
|
66
67
|
*/
|
|
67
68
|
class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement))))) {
|
|
@@ -277,6 +278,7 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
|
|
|
277
278
|
<slot name="end" @slotchange="${this._onSlotChange}"></slot>
|
|
278
279
|
</div>
|
|
279
280
|
</d2l-input-date-time-range-to>
|
|
281
|
+
<slot slot="inline-help" name="inline-help"></slot>
|
|
280
282
|
</d2l-input-fieldset>
|
|
281
283
|
`;
|
|
282
284
|
}
|
|
@@ -39,6 +39,7 @@ function _getFormattedDefaultTime(defaultValue) {
|
|
|
39
39
|
|
|
40
40
|
/**
|
|
41
41
|
* A component that consists of a "<d2l-input-date>" and a "<d2l-input-time>" component. The time input only appears once a date is selected. This component displays the "value" if one is specified, and reflects the selected value when one is selected or entered.
|
|
42
|
+
* @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
|
|
42
43
|
* @fires change - Dispatched when there is a change to selected date or selected time. `value` corresponds to the selected value and is formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
|
|
43
44
|
*/
|
|
44
45
|
class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))))) {
|
|
@@ -282,6 +283,7 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
|
|
|
282
283
|
.value="${parsedValue}">
|
|
283
284
|
</d2l-input-date>${inputTime}
|
|
284
285
|
</div>
|
|
286
|
+
<slot slot="inline-help" name="inline-help"></slot>
|
|
285
287
|
</d2l-input-fieldset>
|
|
286
288
|
`;
|
|
287
289
|
}
|
|
@@ -26,6 +26,7 @@ export function formatISODateInUserCalDescriptor(val) {
|
|
|
26
26
|
|
|
27
27
|
/**
|
|
28
28
|
* A component that consists of a text input field for typing a date and an attached calendar (d2l-calendar) dropdown. It displays the "value" if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the calendar or entered in the text input.
|
|
29
|
+
* @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
|
|
29
30
|
* @fires change - Dispatched when there is a change to selected date. `value` corresponds to the selected value and is formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
|
|
30
31
|
*/
|
|
31
32
|
class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
|
2
2
|
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
+
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
+
import { InputInlineHelpMixin } from './input-inline-help-mixin.js';
|
|
3
6
|
import { inputLabelStyles } from './input-label-styles.js';
|
|
4
7
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
5
8
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
@@ -9,7 +12,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
|
9
12
|
* A component wrapper to be used when a page contains multiple inputs which are related (for example to form an address) to wrap those related inputs.
|
|
10
13
|
* @slot - Related input components
|
|
11
14
|
*/
|
|
12
|
-
class InputFieldset extends SkeletonMixin(RtlMixin(LitElement)) {
|
|
15
|
+
class InputFieldset extends InputInlineHelpMixin(SkeletonMixin(RtlMixin(LitElement))) {
|
|
13
16
|
|
|
14
17
|
static get properties() {
|
|
15
18
|
return {
|
|
@@ -48,6 +51,7 @@ class InputFieldset extends SkeletonMixin(RtlMixin(LitElement)) {
|
|
|
48
51
|
super();
|
|
49
52
|
this.labelHidden = false;
|
|
50
53
|
this.required = false;
|
|
54
|
+
this._inlineHelpId = getUniqueId();
|
|
51
55
|
}
|
|
52
56
|
|
|
53
57
|
render() {
|
|
@@ -57,9 +61,13 @@ class InputFieldset extends SkeletonMixin(RtlMixin(LitElement)) {
|
|
|
57
61
|
'd2l-skeletize': true
|
|
58
62
|
};
|
|
59
63
|
return html`
|
|
60
|
-
<fieldset
|
|
64
|
+
<fieldset
|
|
65
|
+
class="d2l-input-label-fieldset"
|
|
66
|
+
aria-describedby="${ifDefined(this._hasInlineHelp ? this._inlineHelpId : undefined)}"
|
|
67
|
+
>
|
|
61
68
|
<legend class="${classMap(legendClasses)}">${this.label}</legend>
|
|
62
69
|
<slot></slot>
|
|
70
|
+
${this._renderInlineHelp(this._inlineHelpId)}
|
|
63
71
|
</fieldset>
|
|
64
72
|
`;
|
|
65
73
|
}
|
|
@@ -73,6 +73,7 @@ function roundPrecisely(val, maxFractionDigits) {
|
|
|
73
73
|
* @slot after - Slot beside the input on the right side. Useful for an "icon" or "button-icon".
|
|
74
74
|
* @slot left - Slot within the input on the left side. Useful for an "icon" or "button-icon".
|
|
75
75
|
* @slot right - Slot within the input on the right side. Useful for an "icon" or "button-icon".
|
|
76
|
+
* @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
|
|
76
77
|
* @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value.
|
|
77
78
|
*/
|
|
78
79
|
class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
|
|
@@ -11,6 +11,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
|
11
11
|
/**
|
|
12
12
|
* This component wraps the "<d2l-input-number>" tag and is intended for inputting percent values.
|
|
13
13
|
* @slot after - Slot beside the input on the right side. Useful for an "icon" or "button-icon".
|
|
14
|
+
* @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
|
|
14
15
|
* @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value.
|
|
15
16
|
*/
|
|
16
17
|
class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))))) {
|
|
@@ -13,6 +13,7 @@ export const SUPPRESS_ENTER_TIMEOUT_MS = 1000;
|
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* This component wraps the native "<input type="search">"" element and is for text searching.
|
|
16
|
+
* @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
|
|
16
17
|
* @fires d2l-input-search-searched - Dispatched when a search is performed. When the input is cleared, this will be fired with an empty value.
|
|
17
18
|
*/
|
|
18
19
|
class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
|
|
@@ -36,6 +36,7 @@ function getValidISOTimeAtInterval(val, timeInterval) {
|
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* A component consisting of two input-time components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's timezone if applicable and must be in ISO 8601 time format ("hh:mm:ss").
|
|
39
|
+
* @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
|
|
39
40
|
* @fires change - Dispatched when there is a change to selected start time or selected end time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar time format (`hh:mm:ss`).
|
|
40
41
|
*/
|
|
41
42
|
|
|
@@ -272,6 +273,7 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
|
|
|
272
273
|
value="${ifDefined(this.endValue)}">
|
|
273
274
|
</d2l-input-time>
|
|
274
275
|
</d2l-input-date-time-range-to>
|
|
276
|
+
<slot slot="inline-help" name="inline-help"></slot>
|
|
275
277
|
</d2l-input-fieldset>
|
|
276
278
|
`;
|
|
277
279
|
}
|
package/custom-elements.json
CHANGED
|
@@ -5272,6 +5272,12 @@
|
|
|
5272
5272
|
"name": "change",
|
|
5273
5273
|
"description": "Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`)."
|
|
5274
5274
|
}
|
|
5275
|
+
],
|
|
5276
|
+
"slots": [
|
|
5277
|
+
{
|
|
5278
|
+
"name": "inline-help",
|
|
5279
|
+
"description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
|
|
5280
|
+
}
|
|
5275
5281
|
]
|
|
5276
5282
|
},
|
|
5277
5283
|
{
|
|
@@ -5582,6 +5588,10 @@
|
|
|
5582
5588
|
{
|
|
5583
5589
|
"name": "end",
|
|
5584
5590
|
"description": "Optional content that would appear below the end input-date-time"
|
|
5591
|
+
},
|
|
5592
|
+
{
|
|
5593
|
+
"name": "inline-help",
|
|
5594
|
+
"description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
|
|
5585
5595
|
}
|
|
5586
5596
|
]
|
|
5587
5597
|
},
|
|
@@ -5762,6 +5772,12 @@
|
|
|
5762
5772
|
"name": "change",
|
|
5763
5773
|
"description": "Dispatched when there is a change to selected date or selected time. `value` corresponds to the selected value and is formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`)."
|
|
5764
5774
|
}
|
|
5775
|
+
],
|
|
5776
|
+
"slots": [
|
|
5777
|
+
{
|
|
5778
|
+
"name": "inline-help",
|
|
5779
|
+
"description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
|
|
5780
|
+
}
|
|
5765
5781
|
]
|
|
5766
5782
|
},
|
|
5767
5783
|
{
|
|
@@ -5930,6 +5946,12 @@
|
|
|
5930
5946
|
"name": "change",
|
|
5931
5947
|
"description": "Dispatched when there is a change to selected date. `value` corresponds to the selected value and is formatted in ISO 8601 calendar date format (`YYYY-MM-DD`)."
|
|
5932
5948
|
}
|
|
5949
|
+
],
|
|
5950
|
+
"slots": [
|
|
5951
|
+
{
|
|
5952
|
+
"name": "inline-help",
|
|
5953
|
+
"description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
|
|
5954
|
+
}
|
|
5933
5955
|
]
|
|
5934
5956
|
},
|
|
5935
5957
|
{
|
|
@@ -6288,6 +6310,10 @@
|
|
|
6288
6310
|
{
|
|
6289
6311
|
"name": "right",
|
|
6290
6312
|
"description": "Slot within the input on the right side. Useful for an \"icon\" or \"button-icon\"."
|
|
6313
|
+
},
|
|
6314
|
+
{
|
|
6315
|
+
"name": "inline-help",
|
|
6316
|
+
"description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
|
|
6291
6317
|
}
|
|
6292
6318
|
]
|
|
6293
6319
|
},
|
|
@@ -6461,6 +6487,10 @@
|
|
|
6461
6487
|
{
|
|
6462
6488
|
"name": "after",
|
|
6463
6489
|
"description": "Slot beside the input on the right side. Useful for an \"icon\" or \"button-icon\"."
|
|
6490
|
+
},
|
|
6491
|
+
{
|
|
6492
|
+
"name": "inline-help",
|
|
6493
|
+
"description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
|
|
6464
6494
|
}
|
|
6465
6495
|
]
|
|
6466
6496
|
},
|
|
@@ -6592,6 +6622,12 @@
|
|
|
6592
6622
|
"name": "d2l-input-search-searched",
|
|
6593
6623
|
"description": "Dispatched when a search is performed. When the input is cleared, this will be fired with an empty value."
|
|
6594
6624
|
}
|
|
6625
|
+
],
|
|
6626
|
+
"slots": [
|
|
6627
|
+
{
|
|
6628
|
+
"name": "inline-help",
|
|
6629
|
+
"description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
|
|
6630
|
+
}
|
|
6595
6631
|
]
|
|
6596
6632
|
},
|
|
6597
6633
|
{
|
|
@@ -7431,6 +7467,12 @@
|
|
|
7431
7467
|
"name": "change",
|
|
7432
7468
|
"description": "Dispatched when there is a change to selected start time or selected end time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar time format (`hh:mm:ss`)."
|
|
7433
7469
|
}
|
|
7470
|
+
],
|
|
7471
|
+
"slots": [
|
|
7472
|
+
{
|
|
7473
|
+
"name": "inline-help",
|
|
7474
|
+
"description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
|
|
7475
|
+
}
|
|
7434
7476
|
]
|
|
7435
7477
|
},
|
|
7436
7478
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.177.1",
|
|
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",
|