@brightspace-ui/core 3.162.0 → 3.162.2

package/components/inputs/docs/input-date-time.md

@@ -292,7 +292,7 @@ A few notable accessibility-related features of these components are:
 * When the date input is opened with the keyboard, focus goes to either selected date, today, or earliest valid date if today is prior to `min-date`
 * Extensive intuitive keyboard interaction support
 
-## Timezone
+## Time Zone
 
 The `input-date-time` and `input-date-time-range` components expect input in UTC (`YYYY-MM-DDTHH:mm:ss.sssZ`). These components will convert values automatically to the user's time zone to display the date/time to them, and then will provide the value back in UTC. No time zone conversions are needed.
 

package/components/inputs/input-date-time-range.js

@@ -151,6 +151,16 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
 			 * @type {string}
 			 */
 			startValue: { attribute: 'start-value', reflect: true, type: String },
+			/**
+			 * Timezone identifier for the time inputs to use.
+			 * @type {string}
+			 */
+			timeZoneId: { type: String },
+			/**
+			 * Hides the time zone inside the time selection dropdowns. Should only be used when the time input values are not related to any one time zone
+			 * @type {Boolean}
+			 */
+			timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
 			_slotOccupied: { type: Boolean }
 		};
 	}
@@ -251,6 +261,8 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
 							?required="${this.required}"
 							?skeleton="${this.skeleton}"
 							time-default-value="startOfDay"
+							time-zone-id="${ifDefined(this.timeZoneId)}"
+							?time-zone-hidden="${this.timeZoneHidden}"
 							value="${ifDefined(this.startValue)}">
 						</d2l-input-date-time>
 						<slot name="start" @slotchange="${this._onSlotChange}"></slot>
@@ -273,6 +285,8 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
 							?required="${this.required}"
 							?skeleton="${this.skeleton}"
 							time-default-value="endOfDay"
+							time-zone-id="${ifDefined(this.timeZoneId)}"
+							?time-zone-hidden="${this.timeZoneHidden}"
 							value="${ifDefined(this.endValue)}">
 						</d2l-input-date-time>
 						<slot name="end" @slotchange="${this._onSlotChange}"></slot>

package/components/inputs/input-date-time.js

@@ -254,6 +254,8 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 				max-height="430"
 				?required="${this.required}"
 				?skeleton="${this.skeleton}"
+				time-zone-id="${ifDefined(this.timeZoneId)}"
+				?time-zone-hidden="${this.timeZoneHidden}"
 				.value="${parsedValue}">
 			</d2l-input-time>` : null;
 

package/components/inputs/input-time-range.js

@@ -281,6 +281,8 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(LocalizeC
 						?skeleton="${this.skeleton}"
 						slot="right"
 						time-interval="${ifDefined(timeInterval)}"
+						time-zone-id="${ifDefined(this.timeZoneId)}"
+						?time-zone-hidden="${this.timeZoneHidden}"
 						value="${ifDefined(this.endValue)}">
 					</d2l-input-time>
 				</d2l-input-date-time-range-to>

package/components/progress/progress.js

@@ -49,7 +49,8 @@ class Progress extends LitElement {
 					display: block;
 					min-width: 6rem;
 				}
-				:host([hidden]) {
+				:host([hidden]),
+				.text[hidden] {
 					display: none;
 				}
 				.text {
@@ -130,7 +131,7 @@ class Progress extends LitElement {
 		const perecentageText = formatPercent(percentage);
 
 		return html`
-			<div class=${classMap(textClasses)} >
+			<div class=${classMap(textClasses)} ?hidden=${(this.labelHidden || !this.label) && this.valueHidden}>
 				<span ?hidden=${this.labelHidden} id="label">${this.label}</span>
 				<span style="font-size: 0;">${getSeparator({ nonBreaking: true })}</span>
 				<span ?hidden=${this.valueHidden}>${perecentageText}</span>

package/custom-elements.json

@@ -5881,6 +5881,16 @@
           "description": "Value of the start date-time input",
           "type": "string"
         },
+        {
+          "name": "timeZoneId",
+          "description": "Timezone identifier for the time inputs to use.",
+          "type": "string"
+        },
+        {
+          "name": "time-zone-hidden",
+          "description": "Hides the time zone inside the time selection dropdowns. Should only be used when the time input values are not related to any one time zone",
+          "type": "Boolean"
+        },
         {
           "name": "auto-shift-dates",
           "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.",
@@ -5991,6 +6001,18 @@
           "description": "Value of the start date-time input",
           "type": "string"
         },
+        {
+          "name": "timeZoneId",
+          "attribute": "timeZoneId",
+          "description": "Timezone identifier for the time inputs to use.",
+          "type": "string"
+        },
+        {
+          "name": "timeZoneHidden",
+          "attribute": "time-zone-hidden",
+          "description": "Hides the time zone inside the time selection dropdowns. Should only be used when the time input values are not related to any one time zone",
+          "type": "Boolean"
+        },
         {
           "name": "autoShiftDates",
           "attribute": "auto-shift-dates",

package/package.json

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