@brightspace-ui/core 3.45.0 → 3.45.1

package/components/inputs/demo/input-number.html

@@ -5,7 +5,9 @@
 		<meta charset="UTF-8">
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 		<script type="module">
+			import '../../button/button-icon.js';
 			import '../../demo/demo-page.js';
+			import '../../icons/icon.js';
 			import '../input-number.js';
 		</script>
 	</head>

package/components/inputs/input-number.js

@@ -8,6 +8,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 const HINT_TYPES = {
 	NONE: 0,
@@ -178,8 +179,9 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 			 * @ignore
 			 */
 			valueTrailingZeroes: { type: String, attribute: 'value-trailing-zeroes' },
-			_hintType: { type: Number },
-			_formattedValue: { type: String }
+			_afterSlotWidth: { state: true },
+			_hintType: { state: true },
+			_formattedValue: { state: true }
 		};
 	}
 
@@ -218,6 +220,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		this._trailingZeroes = false;
 		this._valueTrailingZeroes = '';
 		this._descriptor = getNumberDescriptor();
+		this._afterSlotWidth = 0;
 	}
 
 	get maxFractionDigits() {
@@ -337,6 +340,11 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 
 	render() {
 		const valueAlign = (this.valueAlign === 'end') ? 'end' : 'start';
+		const hasRelativeInputWidth = this.inputWidth.includes('%');
+		const inputWidthStyle = {
+			width : '100%',
+			maxWidth: `calc(${this.inputWidth} + ${this._afterSlotWidth}px)`
+		};
 		return html`
 			<d2l-input-text
 				autocomplete="${ifDefined(this.autocomplete)}"
@@ -351,7 +359,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 				.forceInvalid="${this.invalid}"
 				?hide-invalid-icon="${this.hideInvalidIcon}"
 				id="${this._inputId}"
-				input-width="${this.inputWidth}"
+				input-width="${hasRelativeInputWidth ? 'none' : this.inputWidth}"
 				@invalid-change="${this._handleInvalidChange}"
 				label="${ifDefined(this.label)}"
 				?label-hidden="${this.labelHidden || this.labelledBy}"
@@ -360,13 +368,14 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 				placeholder="${ifDefined(this.placeholder)}"
 				?required="${this.required}"
 				?skeleton="${this.skeleton}"
+				style="${ifDefined(hasRelativeInputWidth ? styleMap(inputWidthStyle) : undefined)}"
 				unit="${ifDefined(this.unit)}"
 				unit-label="${ifDefined(this.unitLabel)}"
 				.value="${this._formattedValue}"
 				value-align="${valueAlign}">
 					<slot slot="left" name="left"></slot>
 					<slot slot="right" name="right"></slot>
-					<slot slot="after" name="after"></slot>
+					<slot slot="after" name="after" @slotchange=${this._handleAfterSlotChange}></slot>
 					<slot slot="inline-help" name="inline-help"></slot>
 			</d2l-input-text>
 			${this._getTooltip()}
@@ -439,6 +448,13 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		}
 	}
 
+	async _handleAfterSlotChange(e) {
+		const nodes = e.target.assignedNodes();
+		const inputTextElem = this.shadowRoot.querySelector('d2l-input-text');
+		await inputTextElem.updateComplete;
+		this._afterSlotWidth = nodes.reduce((width, ele) => width + ele.clientWidth, 0);
+	}
+
 	_handleBlur() {
 		this._hintType = HINT_TYPES.NONE;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.45.0",
+  "version": "3.45.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",