@brightspace-ui/core 2.69.0 → 2.70.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.
|
@@ -8,6 +8,11 @@
|
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../input-number.js';
|
|
10
10
|
</script>
|
|
11
|
+
<style>
|
|
12
|
+
#denominator {
|
|
13
|
+
--d2l-input-text-align: end;
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
11
16
|
</head>
|
|
12
17
|
<body unresolved>
|
|
13
18
|
<d2l-demo-page page-title="d2l-input-number">
|
|
@@ -98,6 +103,13 @@
|
|
|
98
103
|
</template>
|
|
99
104
|
</d2l-demo-snippet>
|
|
100
105
|
|
|
106
|
+
<h2>Denominator</h2>
|
|
107
|
+
<d2l-demo-snippet>
|
|
108
|
+
<template>
|
|
109
|
+
<d2l-input-number id="denominator" max="5" min="0" label="Grade" label-hidden required unit="/5" unit-label="out of 5" value="3"></d2l-input-number>
|
|
110
|
+
</template>
|
|
111
|
+
</d2l-demo-snippet>
|
|
112
|
+
|
|
101
113
|
</d2l-demo-page>
|
|
102
114
|
<script>
|
|
103
115
|
document.body.addEventListener('change', e => console.log('change', e.srcElement.value));
|
|
@@ -163,6 +163,11 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
|
|
|
163
163
|
* @type {string}
|
|
164
164
|
*/
|
|
165
165
|
unit: { type: String },
|
|
166
|
+
/**
|
|
167
|
+
* Accessible label for the unit which will not be visually rendered
|
|
168
|
+
* @type {string}
|
|
169
|
+
*/
|
|
170
|
+
unitLabel: { attribute: 'unit-label', type: String },
|
|
166
171
|
/**
|
|
167
172
|
* Value of the input
|
|
168
173
|
* @type {number}
|
|
@@ -350,6 +355,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
|
|
|
350
355
|
?skeleton="${this.skeleton}"
|
|
351
356
|
title="${ifDefined(this.title)}"
|
|
352
357
|
unit="${ifDefined(this.unit)}"
|
|
358
|
+
unit-label="${ifDefined(this.unitLabel)}"
|
|
353
359
|
.value="${this._formattedValue}">
|
|
354
360
|
<slot slot="left" name="left"></slot>
|
|
355
361
|
<slot slot="right" name="right"></slot>
|
|
@@ -153,6 +153,11 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
153
153
|
* @type {string}
|
|
154
154
|
*/
|
|
155
155
|
unit: { type: String },
|
|
156
|
+
/**
|
|
157
|
+
* Accessible label for the unit which will not be visually rendered
|
|
158
|
+
* @type {string}
|
|
159
|
+
*/
|
|
160
|
+
unitLabel: { attribute: 'unit-label', type: String },
|
|
156
161
|
/**
|
|
157
162
|
* Value of the input
|
|
158
163
|
* @type {string}
|
|
@@ -210,6 +215,9 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
210
215
|
.d2l-input-inside-after {
|
|
211
216
|
right: 0;
|
|
212
217
|
}
|
|
218
|
+
.d2l-input-unit {
|
|
219
|
+
font-size: 0.8rem;
|
|
220
|
+
}
|
|
213
221
|
.d2l-input-inside-before .d2l-input-unit {
|
|
214
222
|
margin-left: 12px;
|
|
215
223
|
margin-right: 6px;
|
|
@@ -256,6 +264,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
256
264
|
this._intersectionObserver = null;
|
|
257
265
|
this._isIntersecting = false;
|
|
258
266
|
this._lastSlotWidth = 0;
|
|
267
|
+
this._missingUnitLabelErrorHasBeenThrown = false;
|
|
259
268
|
this._prevValue = '';
|
|
260
269
|
|
|
261
270
|
this._handleBlur = this._handleBlur.bind(this);
|
|
@@ -263,6 +272,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
263
272
|
this._handleMouseEnter = this._handleMouseEnter.bind(this);
|
|
264
273
|
this._handleMouseLeave = this._handleMouseLeave.bind(this);
|
|
265
274
|
this._perfMonitor = new PerfMonitor(this);
|
|
275
|
+
this._validatingUnitTimeout = null;
|
|
266
276
|
}
|
|
267
277
|
|
|
268
278
|
get value() { return this._value; }
|
|
@@ -335,6 +345,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
335
345
|
super.firstUpdated(changedProperties);
|
|
336
346
|
|
|
337
347
|
this._setValue(this.value, true);
|
|
348
|
+
this._validateUnit();
|
|
338
349
|
|
|
339
350
|
const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
|
|
340
351
|
if (!container) return;
|
|
@@ -443,8 +454,9 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
443
454
|
${offscreenContainer}
|
|
444
455
|
`;
|
|
445
456
|
if (this.label && !this.labelHidden && !this.labelledBy) {
|
|
457
|
+
const unitLabel = this._getUnitLabel();
|
|
446
458
|
return html`
|
|
447
|
-
<label class="d2l-input-label d2l-skeletize" for="${this._inputId}">${this.label}${
|
|
459
|
+
<label class="d2l-input-label d2l-skeletize" for="${this._inputId}">${this.label}${unitLabel ? html`<span class="d2l-offscreen">${unitLabel}</span>` : ''}</label>
|
|
448
460
|
${input}`;
|
|
449
461
|
}
|
|
450
462
|
return input;
|
|
@@ -454,11 +466,8 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
454
466
|
super.updated(changedProperties);
|
|
455
467
|
|
|
456
468
|
changedProperties.forEach((oldVal, prop) => {
|
|
457
|
-
if (prop === 'unit') {
|
|
458
|
-
|
|
459
|
-
throw new Error('Invalid unit value for d2l-input-text.');
|
|
460
|
-
}
|
|
461
|
-
this._updateInputLayout();
|
|
469
|
+
if (prop === 'unit' || prop === 'unitLabel') {
|
|
470
|
+
this._validateUnit();
|
|
462
471
|
} else if (prop === 'validationError') {
|
|
463
472
|
if (oldVal && this.validationError) {
|
|
464
473
|
const tooltip = this.shadowRoot.querySelector('d2l-tooltip');
|
|
@@ -476,8 +485,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
476
485
|
label = this.getAttribute('aria-label');
|
|
477
486
|
}
|
|
478
487
|
if (label) {
|
|
479
|
-
|
|
480
|
-
return `${label}${unitLabel}`;
|
|
488
|
+
return `${label}${this._getUnitLabel()}`;
|
|
481
489
|
}
|
|
482
490
|
return undefined;
|
|
483
491
|
}
|
|
@@ -489,6 +497,12 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
489
497
|
return 'text';
|
|
490
498
|
}
|
|
491
499
|
|
|
500
|
+
_getUnitLabel() {
|
|
501
|
+
if (!this.unit) return '';
|
|
502
|
+
const unitLabel = this.unitLabel || this.unit;
|
|
503
|
+
return ` ${unitLabel}`;
|
|
504
|
+
}
|
|
505
|
+
|
|
492
506
|
_handleAfterSlotChange(e) {
|
|
493
507
|
const afterContent = e.target.assignedNodes({ flatten: true });
|
|
494
508
|
this._hasAfterContent = (afterContent && afterContent.length > 0);
|
|
@@ -618,5 +632,20 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
|
|
|
618
632
|
|
|
619
633
|
}
|
|
620
634
|
|
|
635
|
+
_validateUnit() {
|
|
636
|
+
if (this._missingUnitLabelErrorHasBeenThrown) return;
|
|
637
|
+
clearTimeout(this._validatingUnitTimeout);
|
|
638
|
+
// don't error immediately in case it doesn't get set immediately
|
|
639
|
+
this._validatingUnitTimeout = setTimeout(() => {
|
|
640
|
+
this._validatingUnitTimeout = null;
|
|
641
|
+
const hasUnit = (typeof this.unit === 'string') && this.unit.length > 0;
|
|
642
|
+
const hasUnitLabel = (typeof this.unitLabel === 'string') && this.unitLabel.length > 0;
|
|
643
|
+
if (hasUnit && this.unit !== '%' && !hasUnitLabel) {
|
|
644
|
+
this._missingUnitLabelErrorHasBeenThrown = true;
|
|
645
|
+
throw new Error(`<d2l-input-text>: missing required attribute "unit-label" for unit "${this.unit}"`);
|
|
646
|
+
}
|
|
647
|
+
}, 3000);
|
|
648
|
+
}
|
|
649
|
+
|
|
621
650
|
}
|
|
622
651
|
customElements.define('d2l-input-text', InputText);
|
|
@@ -353,6 +353,7 @@ The `d2l-selection-summary` component may be placed inside the selection control
|
|
|
353
353
|
<!-- docs: demo live name:d2l-selection-summary display:block -->
|
|
354
354
|
```html
|
|
355
355
|
<script type="module">
|
|
356
|
+
import '@brightspace-ui/core/components/selection/selection-action.js';
|
|
356
357
|
import '@brightspace-ui/core/components/selection/selection-input.js';
|
|
357
358
|
import '@brightspace-ui/core/components/selection/selection-summary.js';
|
|
358
359
|
import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
|
|
@@ -434,11 +435,12 @@ The `d2l-selection-header` provides a standardized wrapper to display selection
|
|
|
434
435
|
|
|
435
436
|
When using lists, use the list-specific `d2l-list-header` instead, which extends this component's behaviour.
|
|
436
437
|
|
|
437
|
-
<!-- docs: demo live name:d2l-selection-header
|
|
438
|
+
<!-- docs: demo live name:d2l-selection-header display:block -->
|
|
438
439
|
```html
|
|
439
440
|
<script type="module">
|
|
440
441
|
import '@brightspace-ui/core/components/selection/selection-action.js';
|
|
441
442
|
import '@brightspace-ui/core/components/selection/selection-header.js';
|
|
443
|
+
import '@brightspace-ui/core/components/selection/selection-input.js';
|
|
442
444
|
import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
|
|
443
445
|
</script>
|
|
444
446
|
<!-- docs: start hidden content -->
|
package/custom-elements.json
CHANGED
|
@@ -5321,6 +5321,11 @@
|
|
|
5321
5321
|
"description": "Unit associated with the input value, displayed next to input and announced as part of the label",
|
|
5322
5322
|
"type": "string"
|
|
5323
5323
|
},
|
|
5324
|
+
{
|
|
5325
|
+
"name": "unit-label",
|
|
5326
|
+
"description": "Accessible label for the unit which will not be visually rendered",
|
|
5327
|
+
"type": "string"
|
|
5328
|
+
},
|
|
5324
5329
|
{
|
|
5325
5330
|
"name": "max-fraction-digits",
|
|
5326
5331
|
"description": "Maximum number of digits allowed after the decimal place. Must be between 0 and 20 and greater than or equal to `minFractionDigits`. Default is Greater of `minFractionDigits` or `3`.",
|
|
@@ -5443,6 +5448,12 @@
|
|
|
5443
5448
|
"description": "Unit associated with the input value, displayed next to input and announced as part of the label",
|
|
5444
5449
|
"type": "string"
|
|
5445
5450
|
},
|
|
5451
|
+
{
|
|
5452
|
+
"name": "unitLabel",
|
|
5453
|
+
"attribute": "unit-label",
|
|
5454
|
+
"description": "Accessible label for the unit which will not be visually rendered",
|
|
5455
|
+
"type": "string"
|
|
5456
|
+
},
|
|
5446
5457
|
{
|
|
5447
5458
|
"name": "maxFractionDigits",
|
|
5448
5459
|
"attribute": "max-fraction-digits",
|
|
@@ -5975,6 +5986,11 @@
|
|
|
5975
5986
|
"description": "Unit associated with the input value, displayed next to input and announced as part of the label",
|
|
5976
5987
|
"type": "string"
|
|
5977
5988
|
},
|
|
5989
|
+
{
|
|
5990
|
+
"name": "unit-label",
|
|
5991
|
+
"description": "Accessible label for the unit which will not be visually rendered",
|
|
5992
|
+
"type": "string"
|
|
5993
|
+
},
|
|
5978
5994
|
{
|
|
5979
5995
|
"name": "value",
|
|
5980
5996
|
"description": "Value of the input",
|
|
@@ -6153,6 +6169,12 @@
|
|
|
6153
6169
|
"description": "Unit associated with the input value, displayed next to input and announced as part of the label",
|
|
6154
6170
|
"type": "string"
|
|
6155
6171
|
},
|
|
6172
|
+
{
|
|
6173
|
+
"name": "unitLabel",
|
|
6174
|
+
"attribute": "unit-label",
|
|
6175
|
+
"description": "Accessible label for the unit which will not be visually rendered",
|
|
6176
|
+
"type": "string"
|
|
6177
|
+
},
|
|
6156
6178
|
{
|
|
6157
6179
|
"name": "value",
|
|
6158
6180
|
"attribute": "value",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.70.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",
|