@brightspace-ui/core 2.69.0 → 2.70.0

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.
Files changed (5) hide show
  1. package/components/inputs/demo/input-number.html +12 -0
  2. package/components/inputs/input-number.js +6 -0
  3. package/components/inputs/input-text.js +37 -8
  4. package/custom-elements.json +22 -0
  5. package/package.json +1 -1
package/components/inputs/demo/input-number.html CHANGED
@@ -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));
package/components/inputs/input-number.js CHANGED
@@ -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>
package/components/inputs/input-text.js CHANGED
@@ -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}${this.unit ? html`<span class="d2l-offscreen"> ${this.unit}</span>` : ''}</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
- if (this.unit && this.unit !== '%') {
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
- const unitLabel = this.unit ? ` ${this.unit}` : '';
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);
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.69.0",
3
+ "version": "2.70.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",