@brightspace-ui/core 2.70.2 → 2.71.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.
Files changed (7) hide show
  1. package/README.md +2 -2
  2. package/components/inputs/demo/input-number.html +1 -6
  3. package/components/inputs/input-number.js +9 -1
  4. package/components/inputs/input-percent.js +2 -2
  5. package/components/inputs/input-text.js +13 -11
  6. package/custom-elements.json +26 -0
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -133,10 +133,10 @@ The golden snapshots in source control must be updated by the [visual-diff GitHu
133
133
  To run the tests locally to help troubleshoot or develop new tests, first install these dependencies:
134
134
 
135
135
  ```shell
136
- npm install @brightspace-ui/visual-diff@X mocha@Y puppeteer@Z --no-save
136
+ npm install @brightspace-ui/visual-diff@X --no-save
137
137
  ```
138
138
 
139
- Replace `X`, `Y` and `Z` with [the current versions](https://github.com/BrightspaceUI/actions/tree/main/visual-diff#current-dependency-versions) the action is using.
139
+ Replace `X` with [the current version](https://github.com/BrightspaceUI/actions/tree/main/visual-diff#current-dependency-versions) the action is using.
140
140
 
141
141
  Then run the tests:
142
142
 
package/components/inputs/demo/input-number.html CHANGED
@@ -8,11 +8,6 @@
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>
16
11
  </head>
17
12
  <body unresolved>
18
13
  <d2l-demo-page page-title="d2l-input-number">
@@ -106,7 +101,7 @@
106
101
  <h2>Denominator</h2>
107
102
  <d2l-demo-snippet>
108
103
  <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>
104
+ <d2l-input-number max="5" min="0" label="Grade" label-hidden required unit="/5" unit-label="out of 5" value="3" value-align="end"></d2l-input-number>
110
105
  </template>
111
106
  </d2l-demo-snippet>
112
107
 
package/components/inputs/input-number.js CHANGED
@@ -173,6 +173,11 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
173
173
  * @type {number}
174
174
  */
175
175
  value: { type: Number, converter: numberConverter },
176
+ /**
177
+ * Alignment of the value text within the input
178
+ * @type {'start'|'end'}
179
+ */
180
+ valueAlign: { attribute: 'value-align', type: String },
176
181
  /**
177
182
  * @ignore
178
183
  */
@@ -206,6 +211,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
206
211
  this.maxExclusive = false;
207
212
  this.minExclusive = false;
208
213
  this.required = false;
214
+ this.valueAlign = 'start';
209
215
 
210
216
  this._formattedValue = '';
211
217
  this._hintType = HINT_TYPES.NONE;
@@ -331,6 +337,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
331
337
  }
332
338
 
333
339
  render() {
340
+ const valueAlign = (this.valueAlign === 'end') ? 'end' : 'start';
334
341
  return html`
335
342
  <d2l-input-text
336
343
  autocomplete="${ifDefined(this.autocomplete)}"
@@ -356,7 +363,8 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
356
363
  title="${ifDefined(this.title)}"
357
364
  unit="${ifDefined(this.unit)}"
358
365
  unit-label="${ifDefined(this.unitLabel)}"
359
- .value="${this._formattedValue}">
366
+ .value="${this._formattedValue}"
367
+ value-align="${valueAlign}">
360
368
  <slot slot="left" name="left"></slot>
361
369
  <slot slot="right" name="right"></slot>
362
370
  <slot slot="after" name="after"></slot>
package/components/inputs/input-percent.js CHANGED
@@ -74,7 +74,6 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
74
74
  return [ super.styles,
75
75
  css`
76
76
  :host {
77
- --d2l-input-text-align: end;
78
77
  display: inline-block;
79
78
  position: relative;
80
79
  width: 100%;
@@ -130,7 +129,8 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
130
129
  ?skeleton="${this.skeleton}"
131
130
  title="${ifDefined(this.title)}"
132
131
  unit="%"
133
- value="${ifDefined(this.value)}">
132
+ value="${ifDefined(this.value)}"
133
+ value-align="end">
134
134
  <slot slot="after" name="after"></slot>
135
135
  </d2l-input-number>
136
136
  `;
package/components/inputs/input-text.js CHANGED
@@ -163,6 +163,11 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
163
163
  * @type {string}
164
164
  */
165
165
  value: { type: String },
166
+ /**
167
+ * Alignment of the value text within the input
168
+ * @type {'start'|'end'}
169
+ */
170
+ valueAlign: { attribute: 'value-align', type: String },
166
171
  _firstSlotWidth: { type: Number },
167
172
  _hasAfterContent: { type: Boolean, attribute: false },
168
173
  _focused: { type: Boolean },
@@ -181,6 +186,9 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
181
186
  :host([hidden]) {
182
187
  display: none;
183
188
  }
189
+ :host([value-align="end"]) {
190
+ --d2l-input-text-align: end;
191
+ }
184
192
  .d2l-input-label {
185
193
  display: inline-block;
186
194
  vertical-align: bottom;
@@ -253,6 +261,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
253
261
  this.readonly = false;
254
262
  this.required = false;
255
263
  this.type = 'text';
264
+ this.valueAlign = 'start';
256
265
  this._value = '';
257
266
 
258
267
  this._descriptionId = getUniqueId();
@@ -401,8 +410,8 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
401
410
  const lastSlotName = (this.dir === 'rtl') ? 'left' : 'right';
402
411
 
403
412
  const isValid = ariaInvalid !== 'true' || this.disabled;
404
- const invalidIconSide = (this.dir === 'rtl') ? 'left' : 'right';
405
- const invalidIconOffset = Math.max((this.dir === 'rtl') ? this._firstSlotWidth : this._lastSlotWidth, 12);
413
+ const invalidIconSide = ((this.dir === 'rtl' && this.valueAlign === 'start') || (this.dir !== 'rtl' && this.valueAlign === 'end')) ? 'left' : 'right';
414
+ const invalidIconOffset = Math.max((invalidIconSide === 'left') ? this._firstSlotWidth : this._lastSlotWidth, 12);
406
415
  const invalidIconStyles = {
407
416
  [invalidIconSide]: `${invalidIconOffset}px`
408
417
  };
@@ -467,6 +476,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
467
476
 
468
477
  changedProperties.forEach((oldVal, prop) => {
469
478
  if (prop === 'unit' || prop === 'unitLabel') {
479
+ this._updateInputLayout();
470
480
  this._validateUnit();
471
481
  } else if (prop === 'validationError') {
472
482
  if (oldVal && this.validationError) {
@@ -564,15 +574,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
564
574
  }
565
575
 
566
576
  _handleSlotChange() {
567
- // requestUpdate needed for legacy-Edge
568
- if (navigator.userAgent.indexOf('Edge/') > -1) {
569
- this.requestUpdate();
570
- this.updateComplete.then(() => {
571
- this._updateInputLayout();
572
- });
573
- } else {
574
- this._updateInputLayout();
575
- }
577
+ this._updateInputLayout();
576
578
  }
577
579
 
578
580
  _handleUnitClick() {
package/custom-elements.json CHANGED
@@ -5383,6 +5383,12 @@
5383
5383
  "type": "boolean",
5384
5384
  "default": "false"
5385
5385
  },
5386
+ {
5387
+ "name": "value-align",
5388
+ "description": "Alignment of the value text within the input",
5389
+ "type": "'start'|'end'",
5390
+ "default": "\"start\""
5391
+ },
5386
5392
  {
5387
5393
  "name": "labelled-by",
5388
5394
  "description": "The id of element that provides the label for this element",
@@ -5529,6 +5535,13 @@
5529
5535
  "type": "boolean",
5530
5536
  "default": "false"
5531
5537
  },
5538
+ {
5539
+ "name": "valueAlign",
5540
+ "attribute": "value-align",
5541
+ "description": "Alignment of the value text within the input",
5542
+ "type": "'start'|'end'",
5543
+ "default": "\"start\""
5544
+ },
5532
5545
  {
5533
5546
  "name": "labelledBy",
5534
5547
  "attribute": "labelled-by",
@@ -6044,6 +6057,12 @@
6044
6057
  "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'",
6045
6058
  "default": "\"text\""
6046
6059
  },
6060
+ {
6061
+ "name": "value-align",
6062
+ "description": "Alignment of the value text within the input",
6063
+ "type": "'start'|'end'",
6064
+ "default": "\"start\""
6065
+ },
6047
6066
  {
6048
6067
  "name": "labelled-by",
6049
6068
  "description": "The id of element that provides the label for this element",
@@ -6237,6 +6256,13 @@
6237
6256
  "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'",
6238
6257
  "default": "\"text\""
6239
6258
  },
6259
+ {
6260
+ "name": "valueAlign",
6261
+ "attribute": "value-align",
6262
+ "description": "Alignment of the value text within the input",
6263
+ "type": "'start'|'end'",
6264
+ "default": "\"start\""
6265
+ },
6240
6266
  {
6241
6267
  "name": "labelledBy",
6242
6268
  "attribute": "labelled-by",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.70.2",
3
+ "version": "2.71.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",