@brightspace-ui/core 2.70.1 → 2.71.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 (6) hide show
  1. package/components/inputs/demo/input-number.html +1 -6
  2. package/components/inputs/input-number.js +9 -1
  3. package/components/inputs/input-percent.js +2 -2
  4. package/components/inputs/input-text.js +11 -2
  5. package/custom-elements.json +26 -0
  6. package/package.json +1 -1
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
  };
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.1",
3
+ "version": "2.71.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",