@brightspace-ui/core 3.329.0 → 3.330.0

package/components/inputs/docs/input-text.md

@@ -57,9 +57,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `instructions` | String | Additional information relating to how to use the component |
 | `label-hidden` | Boolean | Hides the label visually (moves it to the input's `aria-label` attribute) |
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |
-| `max` | String | For number inputs, maximum value |
 | `maxlength` | Number | Imposes an upper character limit |
-| `min` | String | For number inputs, minimum value |
 | `minlength` | Number | Imposes a lower character limit |
 | `name` | String | Name of the form control. Submitted with the form as part of a name/value pair. |
 | `novalidate` | Boolean | Disables the built-in validation |
@@ -70,7 +68,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `required` | Boolean | Indicates that a value is required |
 | `size` | Number | Size of the input |
 | `step` | String | For number inputs, sets the step size |
-| `type` | String, default: `text` | Can be one of `text`, `email`, `password`, `tel`, `url`. Type `number` is deprecated, use [d2l-input-number](./input-numeric.md) instead. |
+| `type` | String, default: `text` | Can be one of `text`, `email`, `password`, `tel`, `url` |
 | `unit` | String | Unit associated with the input value, displayed next to input and announced as part of the label |
 | `value` | String, default: `''` | Value of the input |
 

package/components/inputs/input-date.js

@@ -309,18 +309,13 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		super.updated(changedProperties);
 
 		changedProperties.forEach((oldVal, prop) => {
-			if (prop === '_dateTimeDescriptor' || prop === 'value') {
-				this._shownValue = this.value;
-				this._setFormattedValue();
-
-				if (prop === 'value') {
-					this.setFormValue(this.value);
-					this.setValidity({
-						rangeUnderflow: !this.noValidateMinMax && this.value && this.minValue && getDateFromISODate(this.value).getTime() < getDateFromISODate(this.minValue).getTime(),
-						rangeOverflow: !this.noValidateMinMax && this.value && this.maxValue && getDateFromISODate(this.value).getTime() > getDateFromISODate(this.maxValue).getTime()
-					});
-					this.requestValidate(false);
-				}
+			if (prop === 'value') {
+				this.setFormValue(this.value);
+				this.setValidity({
+					rangeUnderflow: !this.noValidateMinMax && this.value && this.minValue && getDateFromISODate(this.value).getTime() < getDateFromISODate(this.minValue).getTime(),
+					rangeOverflow: !this.noValidateMinMax && this.value && this.maxValue && getDateFromISODate(this.value).getTime() > getDateFromISODate(this.maxValue).getTime()
+				});
+				this.requestValidate(false);
 			} else if (prop === 'opened') {
 				if (this.opened) this._open();
 				else this._close();
@@ -333,6 +328,10 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has('_hiddenContentWidth')) this.style.maxWidth = this.inputTextWidth;
+		if (changedProperties.has('_dateTimeDescriptor') || changedProperties.has('value')) {
+			this._shownValue = this.value;
+			this._setFormattedValue();
+		}
 	}
 
 	async validate() {
@@ -397,38 +396,31 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this.requestValidate(true);
 	}
 
-	async _handleChange() {
+	_handleChange() {
 		this._showRevertTooltip = false;
 		const value = this._textInput.value;
 		const isNewVal = value !== this.value;
 		if (!value && !this.required) {
 			if (isNewVal) {
-				await this._updateValueDispatchEvent('');
-				if (this._calendar) {
-					await this.updateComplete;
-					await this._calendar.reset();
-				}
+				this._updateValueDispatchEvent('');
+				this.calendar?.reset();
 			}
 			return;
 		}
-		this._formattedValue = value;
-		await this.updateComplete;
 		try {
 			const date = parseDate(value);
-			await this._updateValueDispatchEvent(formatDateInISO({ year: date.getFullYear(), month: (parseInt(date.getMonth()) + 1), date: date.getDate() }));
+			this._updateValueDispatchEvent(formatDateInISO({ year: date.getFullYear(), month: (parseInt(date.getMonth()) + 1), date: date.getDate() }));
 		} catch {
 			// leave value the same when invalid input
 			if (isNewVal) this._showRevertTooltip = true;
+			this._textInput.value = this._formattedValue; // Template only reset if property changes, this line forces same prop on live value
 		}
 		this._setFormattedValue(); // keep out here in case parseDate is same date, e.g., user adds invalid text to end of parseable date
-		if (this._calendar) {
-			await this.updateComplete;
-			await this._calendar.reset(true);
-		}
+		this._calendar?.reset(true);
 	}
 
 	async _handleClear() {
-		await this._updateValueDispatchEvent('');
+		this._updateValueDispatchEvent('');
 		if (this._dropdown) {
 			this._dropdown.close();
 		}
@@ -438,7 +430,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	async _handleDateSelected(e) {
 		this._showRevertTooltip = false;
 		const value = e.target.selectedValue;
-		await this._updateValueDispatchEvent(value);
+		this._updateValueDispatchEvent(value);
 		if (this._dropdown) {
 			this._dropdown.close();
 		}
@@ -484,6 +476,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		await this.updateComplete;
 		if (!this.shadowRoot) return;
 		this._calendar = this.shadowRoot.querySelector('d2l-calendar');
+		await this._calendar.reset(true);
 		this._dropdown = this.shadowRoot.querySelector('d2l-dropdown-content');
 		await this._calendar.updateComplete;
 	}
@@ -534,7 +527,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 
 	async _handleSetToToday(_, setToNow) {
 		const date = getToday();
-		await this._updateValueDispatchEvent(formatDateInISO(date), setToNow);
+		this._updateValueDispatchEvent(formatDateInISO(date), setToNow);
 		if (this._dropdown) {
 			this._dropdown.close();
 		}
@@ -543,10 +536,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 
 	async _open() {
 		if (this.disabled || this.skeleton) return;
+		this._handleChange();
 		if (!this._dropdownFirstOpened || !this._dropdown) await this._handleFirstDropdownOpen();
 
-		await this._handleChange();
-
 		// on small screens, only open calendar if calendar icon is selected,
 		// otherwise only open text input
 		if (mediaQueryList.matches && this._openCalendarOnly) {
@@ -570,10 +562,14 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	}
 
 	_setFormattedValue() {
-		this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : '';
+		try {
+			this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : '';
+		} catch {
+			// don't set the value if it's invalid
+		}
 	}
 
-	async _updateValueDispatchEvent(dateInISO, setToNow) {
+	_updateValueDispatchEvent(dateInISO, setToNow) {
 		// prevent validation from happening multiple times for same change,
 		// except for now button that affects time
 		if (!setToNow && dateInISO === this._shownValue) return;

package/components/inputs/input-text.js

@@ -85,21 +85,11 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		 * @type {boolean}
 		 */
 		labelHidden: { type: Boolean, attribute: 'label-hidden' },
-		/**
-		 * For number inputs, maximum value
-		 * @type {string}
-		 */
-		max: { type: String },
 		/**
 		 * Imposes an upper character limit
 		 * @type {number}
 		 */
 		maxlength: { type: Number },
-		/**
-		 * For number inputs, minimum value
-		 * @type {string}
-		 */
-		min: { type: String },
 		/**
 		 * Imposes a lower character limit
 		 * @type {number}
@@ -150,7 +140,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		title: { type: String },
 		/**
 		 * The type of the text input
-		 * @type {'text'|'email'|'number'|'password'|'search'|'tel'|'url'}
+		 * @type {'text'|'email'|'password'|'search'|'tel'|'url'}
 		 */
 		type: { type: String },
 		/**
@@ -328,11 +318,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 
 	/** @ignore */
 	get validationMessage() {
-		if (this.validity.rangeOverflow) {
-			return this.localize('components.form-element.input.number.rangeOverflow', { max: formatNumber(parseFloat(this.max)), maxExclusive: false });
-		} else if (this.validity.rangeUnderflow) {
-			return this.localize('components.form-element.input.number.rangeUnderflow', { min: formatNumber(parseFloat(this.min)), minExclusive: false });
-		} else if (this.validity.tooShort) {
+		if (this.validity.tooShort) {
 			return this.localize('components.form-element.input.text.tooShort', { label: this.label, minlength: formatNumber(this.minlength) });
 		} else if (this.validity.typeMismatch) {
 			if (this.type === 'email') {
@@ -469,9 +455,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 						@input="${this._handleInput}"
 						@invalid="${this._handleInvalid}"
 						@keypress="${this._handleKeypress}"
-						max="${ifDefined(this.max)}"
 						maxlength="${ifDefined(this.maxlength)}"
-						min="${ifDefined(this.min)}"
 						minlength="${ifDefined(this.minlength)}"
 						name="${ifDefined(this.name)}"
 						pattern="${ifDefined(this.pattern)}"
@@ -532,6 +516,14 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		});
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('type') && this.type === 'number') {
+			this.type = 'text';
+			console.warn('d2l-input-text: "number" type is not supported, use d2l-input-number instead. Defaulting to "text"');
+		}
+	}
+
 	#handleBlur = async(e) => {
 		this._focused = false;
 		this.requestValidate(true);
@@ -564,7 +556,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 	}
 
 	_getType() {
-		if (this.type === 'email' || this.type === 'number' || this.type === 'password' || this.type === 'tel' || this.type === 'text' || this.type === 'search' || this.type === 'url') {
+		if (this.type === 'email' || this.type === 'password' || this.type === 'tel' || this.type === 'text' || this.type === 'search' || this.type === 'url') {
 			return this.type;
 		}
 		return 'text';

package/custom-elements.json

@@ -8296,21 +8296,11 @@
           "description": "ADVANCED: Additional information relating to how to use the component",
           "type": "string"
         },
-        {
-          "name": "max",
-          "description": "For number inputs, maximum value",
-          "type": "string"
-        },
         {
           "name": "maxlength",
           "description": "Imposes an upper character limit",
           "type": "number"
         },
-        {
-          "name": "min",
-          "description": "For number inputs, minimum value",
-          "type": "string"
-        },
         {
           "name": "minlength",
           "description": "Imposes a lower character limit",
@@ -8396,7 +8386,7 @@
         {
           "name": "type",
           "description": "The type of the text input",
-          "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'",
+          "type": "'text'|'email'|'password'|'search'|'tel'|'url'",
           "default": "\"text\""
         },
         {
@@ -8463,24 +8453,12 @@
           "description": "ADVANCED: Additional information relating to how to use the component",
           "type": "string"
         },
-        {
-          "name": "max",
-          "attribute": "max",
-          "description": "For number inputs, maximum value",
-          "type": "string"
-        },
         {
           "name": "maxlength",
           "attribute": "maxlength",
           "description": "Imposes an upper character limit",
           "type": "number"
         },
-        {
-          "name": "min",
-          "attribute": "min",
-          "description": "For number inputs, minimum value",
-          "type": "string"
-        },
         {
           "name": "minlength",
           "attribute": "minlength",
@@ -8592,7 +8570,7 @@
           "name": "type",
           "attribute": "type",
           "description": "The type of the text input",
-          "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'",
+          "type": "'text'|'email'|'password'|'search'|'tel'|'url'",
           "default": "\"text\""
         },
         {

package/package.json

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