@brightspace-ui/core 3.8.1 → 3.9.1

package/components/filter/README.md

@@ -204,7 +204,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 
 ## Dimension Set Value [d2l-filter-dimension-set-value]
 
-This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component, this will give you a selectable list of filter values.
+This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component. It will give you a selectable list of filter values.
 
 <!-- docs: demo code properties name:d2l-filter-dimension-set-value align:start autoOpen:true autoSize:false size:large -->
 ```html
@@ -233,11 +233,41 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#d2l
 | `selected` | Boolean, default: `false` | Whether the value in the filter is selected or not |
 <!-- docs: end hidden content -->
 
+## Dimension Set Value: Preset Date Range [d2l-filter-dimension-set-date-text-value]
+
+This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component. It will give you a selectable filter value based on the `range` defined on the component, which is to be one of a set of pre-defined range options. Selection triggers the `d2l-filter-change` event, with `start-value` and `end-value` (in UTC) being included in the changes for the `selected` item.
+
+<!-- docs: demo code properties name:d2l-filter-dimension-set-date-text-value align:start autoOpen:true autoSize:false size:large -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/filter/filter.js';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set-date-text-value.js';
+</script>
+<d2l-filter>
+  <d2l-filter-dimension-set key="dates" text="Dates">
+    <d2l-filter-dimension-set-date-text-value key="lastHour" range="lastHour" selected></d2l-filter-dimension-set-date-text-value>
+    <d2l-filter-dimension-set-date-text-value key="48hours" range="48hours" disabled></d2l-filter-dimension-set-date-text-value>
+    <d2l-filter-dimension-set-date-text-value key="14days" range="14days"></d2l-filter-dimension-set-date-text-value>
+  </d2l-filter-dimension-set>
+</d2l-filter>
+```
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `key` | String, required | Unique identifier within a dimension for the value |
+| `range` | String, required | The preset date/time range that the list item represents. Value is to be one of 'today', 'lastHour', '24hours', '48hours', '7days', '14days', '30days', or '6months'. |
+| `disabled` | Boolean, default: `false` | Whether the value in the filter is disabled or not |
+| `selected` | Boolean, default: `false` | Whether the value in the filter is selected or not |
+<!-- docs: end hidden content -->
+
 ## Search and Paging
 
 Most filters will not need search or paging features since filter value lists are generally short. For longer lists of filter values when Search is necessary, it can be enabled by setting search-type to `automatic` or `manual`.
 
-`automatic` search runs a basic case-insensitive text comparison on the dimension values that are loaded in the browser, having no awareness of server-side values that are not yet loaded. 
+`automatic` search runs a basic case-insensitive text comparison on the dimension values that are loaded in the browser, having no awareness of server-side values that are not yet loaded.
 
 `manual` search dispatches a `d2l-filter-dimension-search` event delegating the search to the component's consumer. The event's detail will contain the key of the dimension from where the event was dispatched (`key`), the text value used for the search (`value`) and a callback (`searchCompleteCallback`). This callback gives the consumer control of which keys to display, either by setting `displayAllKeys` to `true` or passing a list of the keys to display as `keysToDisplay` (all other keys will be hidden). The dimension will be in a loading state until the callback is called.
 ```js

package/components/filter/demo/filter.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-timezone='{"name":"Canada - Toronto", "identifier":"America/Toronto"}'>
 
 <head>
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
@@ -10,6 +10,7 @@
 		import '../../filter/filter-dimension-set.js';
 		import '../../filter/filter-dimension-set-empty-state.js';
 		import '../../filter/filter-dimension-set-value.js';
+		import '../../filter/filter-dimension-set-date-text-value.js';
 		import './filter-search-demo.js';
 		import './filter-load-more-demo.js';
 	</script>
@@ -127,7 +128,7 @@
 						<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
 					</d2l-filter-dimension-set>
-					
+
 				</d2l-filter>
 				<d2l-filter text="More Filters">
 					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>
@@ -155,6 +156,21 @@
 				<d2l-filter-search-demo></d2l-filter-search-demo>
 			</template>
 		</d2l-demo-snippet>
+
+		<h2>Date Filter</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter id="filter-single">
+					<d2l-filter-dimension-set key="dates" text="Dates">
+						<d2l-filter-dimension-set-value key="lastweek" text="Last Week"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-date-text-value key="lastHour" range="lastHour" selected></d2l-filter-dimension-set-date-text-value>
+						<d2l-filter-dimension-set-date-text-value key="48hours" range="48hours" disabled></d2l-filter-dimension-set-date-text-value>
+						<d2l-filter-dimension-set-date-text-value key="14days" range="14days"></d2l-filter-dimension-set-date-text-value>
+						<d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
+					</d2l-filter-dimension-set>
+				</d2l-filter>
+			</template>
+		</d2l-demo-snippet>
 	</d2l-demo-page>
 
 	<script type="module">

package/components/filter/filter-dimension-set-date-text-value.js

@@ -0,0 +1,156 @@
+import { getUTCDateTimeRange } from '../../helpers/dateTime.js';
+import { LitElement } from 'lit';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+
+/**
+ * A component to represent a possible date value that can be selected for a dimension set (the main filter dimension type) for predefined date ranges.
+ * A range property is used to define the preset text shown, as well as the start and end date values formatted as UTC strings.
+ * This component does not render anything, but instead gathers data needed for the d2l-filter.
+ */
+class FilterDimensionSetDateTextValue extends LocalizeCoreElement(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * Whether this value in the filter is disabled or not
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			/**
+			 * @ignore
+			 */
+			endValue: { type: String },
+			/**
+			 * REQUIRED: Unique key to represent this value in the dimension
+			 * @type {string}
+			 */
+			key: { type: String },
+			/**
+			 * REQUIRED: The preset date/time range that the list item represents
+			 * @type {'today'|'lastHour'|'24hours'|'48hours'|'7days'|'14days'|'30days'|'6months'}
+			 */
+			range: { type: String },
+			/**
+			 * Whether this value in the filter is selected or not
+			 * @type {boolean}
+			 */
+			selected: { type: Boolean, reflect: true },
+			/**
+			 * @ignore
+			 */
+			startValue: { type: String },
+			/**
+			 * @ignore
+			 */
+			text: { type: String, reflect: true }
+		};
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.selected = false;
+		this.text = '';
+		this._enforceSingleSelection = true;
+		this._filterSetValue = true;
+		this._noSearchSupport = true;
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		if (this.selected && this.range) {
+			// if the value is initially selected, startValue and endValue should be set in case used by consumer
+			const dateTimeRange = getUTCDateTimeRange(this._rangeDetails?.rangeType, this._rangeDetails?.rangeNum);
+			this.startValue = dateTimeRange?.startValue;
+			this.endValue = dateTimeRange?.endValue;
+		}
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		const changes = new Map();
+		changedProperties.forEach((oldValue, prop) => {
+			if (oldValue === undefined && prop !== 'text') return;
+
+			if (prop === 'disabled' || prop === 'selected' || prop === 'text') {
+				changes.set(prop, this[prop]);
+			} else if (prop === 'range') {
+				changes.set('rangeType', this._rangeDetails?.rangeType);
+				changes.set('rangeNum', this._rangeDetails?.rangeNum);
+			}
+		});
+		if (changes.size > 0) {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-set-value-data-change', {
+				detail: { valueKey: this.key, changes: changes },
+				bubbles: true,
+				composed: false
+			}));
+		}
+	}
+
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+
+		if (changedProperties.has('range')) this._handleRangeUpdated();
+	}
+
+	getValueDetails() {
+		this._handleRangeUpdated();
+
+		return {
+			disabled: this.disabled,
+			key: this.key,
+			selected: this.selected,
+			text: this.text,
+			getAdditionalEventDetails: this._getAdditionalEventDetails.bind(this)
+		};
+	}
+
+	_getAdditionalEventDetails(selected) {
+		if (!selected) return {};
+		const dateTimeRange = getUTCDateTimeRange(this._rangeDetails?.rangeType, this._rangeDetails?.rangeNum);
+		return { startValue: dateTimeRange.startValue, endValue: dateTimeRange.endValue };
+	}
+
+	_handleRangeUpdated() {
+		switch (this.range) {
+			case 'today':
+				this._rangeDetails = { rangeType: 'days', rangeNum: 0 };
+				break;
+			case 'lastHour':
+				this._rangeDetails = { rangeType: 'hours', rangeNum: -1 };
+				break;
+			case '24hours':
+				this._rangeDetails = { rangeType: 'hours', rangeNum: -24 };
+				break;
+			case '48hours':
+				this._rangeDetails = { rangeType: 'hours', rangeNum: -48 };
+				break;
+			case '7days':
+				this._rangeDetails = { rangeType: 'days', rangeNum: -7 };
+				break;
+			case '14days':
+				this._rangeDetails = { rangeType: 'days', rangeNum: -14 };
+				break;
+			case '30days':
+				this._rangeDetails = { rangeType: 'days', rangeNum: -30 };
+				break;
+			case '6months':
+				this._rangeDetails = { rangeType: 'months', rangeNum: -6 };
+				break;
+			default:
+				console.warn('d2l-filter-dimension-set-date-text-value: Invalid range value');
+				this._rangeDetails = {};
+				break;
+		}
+
+		if (this._rangeDetails.rangeType === 'hours') this.text = this.localize('components.filter-dimension-set-date-text-value.textHours', { num: Math.abs(this._rangeDetails.rangeNum) });
+		else if (this._rangeDetails.rangeType === 'days') this.text = this.localize('components.filter-dimension-set-date-text-value.textDays', { num: Math.abs(this._rangeDetails.rangeNum) });
+		else if (this._rangeDetails.rangeType === 'months') this.text = this.localize('components.filter-dimension-set-date-text-value.textMonths', { num: Math.abs(this._rangeDetails.rangeNum) });
+	}
+}
+
+customElements.define('d2l-filter-dimension-set-date-text-value', FilterDimensionSetDateTextValue);

package/components/filter/filter-dimension-set-value.js

@@ -41,6 +41,9 @@ class FilterDimensionSetValue extends LitElement {
 		this.disabled = false;
 		this.selected = false;
 		this.text = '';
+		this._enforceSingleSelection = false;
+		this._filterSetValue = true;
+		this._noSearchSupport = false;
 	}
 
 	get count() {
@@ -78,6 +81,16 @@ class FilterDimensionSetValue extends LitElement {
 			}));
 		}
 	}
+
+	getValueDetails() {
+		return {
+			count: this.count,
+			disabled: this.disabled,
+			key: this.key,
+			selected: this.selected,
+			text: this.text
+		};
+	}
 }
 
 customElements.define('d2l-filter-dimension-set-value', FilterDimensionSetValue);

package/components/filter/filter-dimension-set.js

@@ -136,15 +136,16 @@ class FilterDimensionSet extends LitElement {
 
 	getValues() {
 		const valueNodes = this._getSlottedNodes();
+		let noSearchSupport = false;
+		let enforceSingleSelection = false;
 		const values = valueNodes.map(value => {
-			return {
-				count: value.count,
-				disabled: value.disabled,
-				key: value.key,
-				selected: value.selected,
-				text: value.text
-			};
+			if (value._noSearchSupport) noSearchSupport = true;
+			if (value._enforceSingleSelection) enforceSingleSelection = true;
+
+			return value.getValueDetails();
 		});
+		if (noSearchSupport) this.searchType = 'none';
+		if (enforceSingleSelection) this.selectionSingle = true;
 		return values;
 	}
 
@@ -173,7 +174,10 @@ class FilterDimensionSet extends LitElement {
 	_getSlottedNodes() {
 		if (!this._slot) return [];
 		const nodes = this._slot.assignedNodes({ flatten: true });
-		return nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'd2l-filter-dimension-set-value');
+		return nodes.filter((node) => {
+			if (node.nodeType !== Node.ELEMENT_NODE) return false;
+			return node._filterSetValue;
+		});
 	}
 
 	_handleDimensionSetValueDataChange(e) {

package/components/filter/filter.js

@@ -686,7 +686,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	_handleDimensionDataChange(e) {
 		const changes = e.detail.changes;
 		const dimension = this._getDimensionByKey(e.detail.dimensionKey);
-		const value = e.detail.valueKey && dimension.values.find(value => value.key === e.detail.valueKey);
+		const value = e.detail.valueKey && dimension?.values.find(value => value.key === e.detail.valueKey);
 		const toUpdate = e.detail.valueKey ? value : dimension;
 
 		if (!toUpdate) return;
@@ -869,7 +869,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			this._totalAppliedCount--;
 		}
 
-		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
+		const details = { valueKey: valueKey, selected: selected };
+
+		if (value.getAdditionalEventDetails) Object.assign(details, value.getAdditionalEventDetails(selected));
+
+		this._dispatchChangeEvent(dimension, details);
 	}
 
 	_performDimensionClear(dimension) {

package/custom-elements.json

@@ -3802,6 +3802,72 @@
       "name": "d2l-filter-search-demo",
       "path": "./components/filter/demo/filter-search-demo.js"
     },
+    {
+      "name": "d2l-filter-dimension-set-date-text-value",
+      "path": "./components/filter/filter-dimension-set-date-text-value.js",
+      "description": "A component to represent a possible date value that can be selected for a dimension set (the main filter dimension type) for predefined date ranges.\nA range property is used to define the preset text shown, as well as the start and end date values formatted as UTC strings.\nThis component does not render anything, but instead gathers data needed for the d2l-filter.",
+      "attributes": [
+        {
+          "name": "key",
+          "description": "REQUIRED: Unique key to represent this value in the dimension",
+          "type": "string"
+        },
+        {
+          "name": "range",
+          "description": "REQUIRED: The preset date/time range that the list item represents",
+          "type": "'today'|'lastHour'|'24hours'|'48hours'|'7days'|'14days'|'30days'|'6months'"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether this value in the filter is disabled or not",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "description": "Whether this value in the filter is selected or not",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "key",
+          "attribute": "key",
+          "description": "REQUIRED: Unique key to represent this value in the dimension",
+          "type": "string"
+        },
+        {
+          "name": "range",
+          "attribute": "range",
+          "description": "REQUIRED: The preset date/time range that the list item represents",
+          "type": "'today'|'lastHour'|'24hours'|'48hours'|'7days'|'14days'|'30days'|'6months'"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Whether this value in the filter is disabled or not",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "Whether this value in the filter is selected or not",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        }
+      ]
+    },
     {
       "name": "d2l-filter-dimension-set-empty-state",
       "path": "./components/filter/filter-dimension-set-empty-state.js",

package/helpers/dateTime.js

@@ -161,6 +161,53 @@ export function getUTCDateTimeFromLocalDateTime(date, time) {
 	return formatDateTimeInISO(utcDateTime);
 }
 
+export function getUTCDateTimeRange(type, diff) {
+	if (!type || (!diff && diff !== 0) || (diff === 0 && type !== 'days')) return {};
+	if (type !== 'seconds' && type !== 'minutes' && type !== 'hours' && type !== 'days' && type !== 'months' && type !== 'years') return {};
+
+	if (type === 'days' && diff === 0) {
+		// assume "today" (midnight in user's time to 23:59:59 in user's time)
+		const today = formatDateInISO(getToday());
+		const startValue = getUTCDateTimeFromLocalDateTime(today, '0:0:0');
+		const endValue = getUTCDateTimeFromLocalDateTime(today, '23:59:59');
+		return { startValue, endValue };
+	}
+
+	/**
+	 * If diff is positive, range is in the future. Start date is now and end date is in the future.
+	 * If diff is negative, range is in the past. End date is now and start date is in the past.
+	 */
+
+	const rangeDate = new Date();
+	const nowUTCString = rangeDate.toISOString();
+
+	if (type === 'seconds') {
+		const newSeconds = rangeDate.getUTCSeconds() + diff;
+		rangeDate.setUTCSeconds(newSeconds);
+	} else if (type === 'minutes') {
+		const newMinutes = rangeDate.getUTCMinutes() + diff;
+		rangeDate.setUTCMinutes(newMinutes);
+	} else if (type === 'hours') {
+		const newHours = rangeDate.getUTCHours() + diff;
+		rangeDate.setUTCHours(newHours);
+	} else if (type === 'days') {
+		const newDate = rangeDate.getUTCDate() + diff;
+		rangeDate.setUTCDate(newDate);
+	} else if (type === 'months') {
+		const newMonth = rangeDate.getUTCMonth() + diff;
+		rangeDate.setUTCMonth(newMonth);
+	} else if (type === 'years') {
+		const newYear = rangeDate.getUTCFullYear() + diff;
+		rangeDate.setUTCFullYear(newYear);
+	}
+
+	if (diff > 0) {
+		return { startValue: nowUTCString, endValue: rangeDate.toISOString() };
+	} else {
+		return { startValue: rangeDate.toISOString(), endValue: nowUTCString };
+	}
+}
+
 export function isDateInRange(date, min, max) {
 	if (!date) return false;
 	const afterMin = !min || (min && date.getTime() >= min.getTime());

package/helpers/error.js

@@ -1,11 +1,13 @@
 import { getComposedParent } from './dom.js';
 
+const numParentLevels = 10;
+
 function getComposedPath(elem, opts) {
 
 	if (!opts?.composedPath) return '';
 
 	const composedParents = [];
-	let parent = elem;
+	let parent = getComposedParent(elem);
 	while (parent !== null && parent?.tagName?.toLowerCase() !== 'body') {
 		if (parent?.tagName) {
 			composedParents.push(parent.tagName.toLowerCase());
@@ -15,8 +17,8 @@ function getComposedPath(elem, opts) {
 
 	if (composedParents.length === 0) return '';
 
-	composedParents.reverse();
-	const path = ` Path: "${composedParents.join(' > ')}".`;
+	const slicedParents = composedParents.slice(0, numParentLevels);
+	const path = ` ${slicedParents.length} parent nodes: "${slicedParents.join(', ')}".`;
 	return path;
 
 }

package/lang/ar.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {ما من نتائج بحث} one {{number} نتيجة بحث}‏ other {{number} من نتائج البحث}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. تظهر عوامل التصفية المحددة أولاً.",
 	"components.filter.singleDimensionDescription": "التصفية حسب: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} غير صالحة.",
 	"components.form-element.defaultFieldLabel": "الحقل",
 	"components.form-element.input.email.typeMismatch": "البريد الإلكتروني غير صالح",

package/lang/cy.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Dim canlyniadau chwilio} one {{number} canlyniad chwilio} other {{number} canlyniadau chwilio}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Mae'r hidlyddion a ddewiswyd yn ymddangos gyntaf.",
 	"components.filter.singleDimensionDescription": "Hidlo yn ôl: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "Mae {label} yn annilys.",
 	"components.form-element.defaultFieldLabel": "Maes",
 	"components.form-element.input.email.typeMismatch": "Nid yw'r e-bost yn ddilys",

package/lang/da.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Ingen søgeresultater} one {{number} søgeresultat} other {{number} søgeresultater}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Valgte filtre vises først.",
 	"components.filter.singleDimensionDescription": "Filtrer efter: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} er ugyldigt.",
 	"components.form-element.defaultFieldLabel": "Felt",
 	"components.form-element.input.email.typeMismatch": "E-mail er ikke gyldig",

package/lang/de.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Kein Suchergebnis} one {{number} Suchergebnis} other {{number} Suchergebnisse}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Ausgewählte Filter werden zuerst angezeigt.",
 	"components.filter.singleDimensionDescription": "Filtern nach: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} ist ungültig.",
 	"components.form-element.defaultFieldLabel": "Feld",
 	"components.form-element.input.email.typeMismatch": "Die E-Mail-Adresse ist ungültig",

package/lang/en-gb.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filter by: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",
 	"components.form-element.input.email.typeMismatch": "Email is not valid",

package/lang/en.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filter by: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",
 	"components.form-element.input.email.typeMismatch": "Email is not valid",

package/lang/es-es.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {No hay resultados de búsqueda} one {{number} resultado de búsqueda} other {{number} resultados de búsqueda}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Los filtros seleccionados aparecen primero.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} no es válido.",
 	"components.form-element.defaultFieldLabel": "Campo",
 	"components.form-element.input.email.typeMismatch": "El correo electrónico no es válido",

package/lang/es.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {No se encontraron resultados de búsqueda} one {{number} resultado de búsqueda} other {{number} resultados de búsqueda}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Los filtros seleccionados aparecen primero.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} no es válida.",
 	"components.form-element.defaultFieldLabel": "Campo",
 	"components.form-element.input.email.typeMismatch": "El correo electrónico no es válido",

package/lang/fr-fr.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Aucun résultat de recherche} one {{number} résultat de recherche} other {{number} résultats de recherche}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Les filtres sélectionnés s’affichent en premier.",
 	"components.filter.singleDimensionDescription": "Filtrer par : {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} n'est pas valide.",
 	"components.form-element.defaultFieldLabel": "Champ",
 	"components.form-element.input.email.typeMismatch": "L'adresse e-mail n'est pas valide.",

package/lang/fr.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Aucun résultat de recherche} one {{number} résultat de recherche} other {{number} résultats de recherche}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Les filtres sélectionnés s’affichent en premier.",
 	"components.filter.singleDimensionDescription": "Filtrer par : {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} n'est pas valide.",
 	"components.form-element.defaultFieldLabel": "Champ",
 	"components.form-element.input.email.typeMismatch": "L'adresse courriel n'est pas valide",

package/lang/hi.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {कोई खोज परिणाम नहीं} one {{number} खोज परिणाम} other {{number} खोज परिणाम}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. चुने गए फ़िल्टर सबसे पहले दिखाई देते हैं।",
 	"components.filter.singleDimensionDescription": "इसके अनुसार फ़िल्टर करें: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} अमान्य है।",
 	"components.form-element.defaultFieldLabel": "फ़ील्ड",
 	"components.form-element.input.email.typeMismatch": "ईमेल मान्य नहीं है",

package/lang/ja.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {検索結果なし} other {{number} 件の検索結果}}",
 	"components.filter.selectedFirstListLabel": "{headerText}。選択したフィルタが最初に表示されます。",
 	"components.filter.singleDimensionDescription": "フィルタ条件: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} は無効です。",
 	"components.form-element.defaultFieldLabel": "フィールド",
 	"components.form-element.input.email.typeMismatch": "電子メールが無効です",

package/lang/ko.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {검색 결과 없음} other {{number}개 검색 결과}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. 선택한 필터가 먼저 나타납니다.",
 	"components.filter.singleDimensionDescription": "필터 기준: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label}이(가) 잘못되었습니다.",
 	"components.form-element.defaultFieldLabel": "필드",
 	"components.form-element.input.email.typeMismatch": "이메일이 유효하지 않습니다.",

package/lang/nl.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Geen zoekresultaten} one {{number} zoekresultaat} other {{number} zoekresultaten}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Geselecteerde filters verschijnen als eerste.",
 	"components.filter.singleDimensionDescription": "Filter op {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} is ongeldig.",
 	"components.form-element.defaultFieldLabel": "Veld",
 	"components.form-element.input.email.typeMismatch": "E-mailadres is ongeldig",

package/lang/pt.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Sem resultados para a pesquisa} one {{number} resultado para a pesquisa} other {{number} resultados para a pesquisa}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Os filtros selecionados aparecem primeiro.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} é inválido.",
 	"components.form-element.defaultFieldLabel": "Campo",
 	"components.form-element.input.email.typeMismatch": "E-mail inválido",

package/lang/sv.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Inga sökresultat} one {{number} sökresultat} other {{number} sökresultat}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Valda filter visas först.",
 	"components.filter.singleDimensionDescription": "Filtrera efter: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} är ogiltig.",
 	"components.form-element.defaultFieldLabel": "Fält",
 	"components.form-element.input.email.typeMismatch": "E-postadressen är ogiltig",

package/lang/tr.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {Arama sonucu yok} one {{number} arama sonucu} other {{number} arama sonucu}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Seçilen filtreler önce görünür.",
 	"components.filter.singleDimensionDescription": "Filtreleme ölçütü: {filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, one {Last hour} other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} days} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} geçersiz.",
 	"components.form-element.defaultFieldLabel": "Alan",
 	"components.form-element.input.email.typeMismatch": "E-posta geçerli değil",

package/lang/zh-cn.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {无搜索结果} other {{number} 个搜索结果}}",
 	"components.filter.selectedFirstListLabel": "{headerText}。先显示所选筛选器。",
 	"components.filter.singleDimensionDescription": "筛选依据：{filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} 无效。",
 	"components.form-element.defaultFieldLabel": "字段",
 	"components.form-element.input.email.typeMismatch": "电子邮件无效",

package/lang/zh-tw.js

@@ -25,6 +25,9 @@ export default {
 	"components.filter.searchResults": "{number, plural, =0 {無搜尋結果} other {{number} 個搜尋結果}}",
 	"components.filter.selectedFirstListLabel": "{headerText}。所選篩選器會先顯示。",
 	"components.filter.singleDimensionDescription": "按此條件篩選：{filterName}",
+	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, other {Last {num} hours}}",
+	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} other {Last {num} days}}",
+	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.form-element.defaultError": "{label} 無效。",
 	"components.form-element.defaultFieldLabel": "欄位",
 	"components.form-element.input.email.typeMismatch": "電子郵件無效",

package/package.json

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