@brightspace-ui/core 3.16.0 → 3.17.1

package/components/filter/demo/filter.html

@@ -11,9 +11,13 @@
 		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/filter-dimension-set-date-time-range-value.js';
 		import './filter-search-demo.js';
 		import './filter-load-more-demo.js';
 	</script>
+	<script>
+		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
+	</script>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
     <meta charset="UTF-8">
 </head>
@@ -162,11 +166,12 @@
 			<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-value key="lastweek" text="Last 7 days"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-date-text-value key="lastHour" range="lastHour" ></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="today" range="today"></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-date-time-range-value key="custom" ></d2l-filter-dimension-set-date-time-range-value>
 					</d2l-filter-dimension-set>
 				</d2l-filter>
 			</template>

package/components/filter/filter-dimension-set-date-time-range-value.js

@@ -0,0 +1,134 @@
+import '../inputs/input-date-time-range.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+
+/**
+ * A component to represent a possible custom date range or date-time range value that can be selected for a dimension set (the main filter dimension type).
+ * The start-value and end-value will be included in the d2l-filter-change event and formatted as an ISO string in UTC time.
+ * This component does not render anything, but instead gathers data needed for the d2l-filter.
+ */
+class FilterDimensionSetDateTimeRangeValue 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, attribute: 'end-value' },
+			/**
+			 * REQUIRED: Unique key to represent this value in the dimension
+			 * @type {string}
+			 */
+			key: { type: String },
+			/**
+			 * Whether this value in the filter is selected or not
+			 * @type {boolean}
+			 */
+			selected: { type: Boolean, reflect: true },
+			/**
+			 * @ignore
+			 */
+			startValue: { type: String, attribute: 'start-value' },
+			/**
+			 * Defaults to "Custom Date Range" (localized). Can be overridden if desired.
+			 * @type {string}
+			 */
+			text: { type: String, reflect: true }
+		};
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.selected = false;
+		this._dispatchFilterChangeEvent = false;
+		this._enforceSingleSelection = true;
+		this._filterSetValue = true;
+		this._minWidth = 375;
+		this._noSearchSupport = true;
+
+		this._handleDateChange = this._handleDateChange.bind(this);
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		this.text = this.text || this.localize('components.filter-dimension-set-date-time-range-value.text');
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		const changes = new Map();
+		let shouldDispatchChangeEvent = false;
+		changedProperties.forEach((oldValue, prop) => {
+			if (oldValue === undefined && (prop === 'selected' || prop === 'disabled')) return;
+			if (this._dispatchFilterChangeEvent && (prop === 'startValue' || prop === 'endValue')) shouldDispatchChangeEvent = true;
+
+			if (prop === 'disabled' || prop === 'selected' || prop === 'startValue' || prop === 'endValue' || prop === 'text') {
+				changes.set(prop, this[prop]);
+			}
+		});
+		if (changes.size > 0) {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-set-value-data-change', {
+				detail: { valueKey: this.key, changes: changes, dispatchChangeEvent: shouldDispatchChangeEvent },
+				bubbles: true,
+				composed: false
+			}));
+			this._dispatchFilterChangeEvent = false;
+		}
+	}
+
+	getValueDetails() {
+		return {
+			disabled: this.disabled,
+			key: this.key,
+			selected: this.selected,
+			text: this.text,
+			additionalContent: this._getAdditionalContent.bind(this),
+			getAdditionalEventDetails: this._getAdditionalEventDetails.bind(this),
+			clearProperties: this._clearProperties.bind(this)
+		};
+	}
+
+	_clearProperties() {
+		this.startValue = undefined;
+		this.endValue = undefined;
+	}
+
+	_getAdditionalContent() {
+		return html`
+			<d2l-input-date-time-range
+				@change="${this._handleDateChange}"
+				child-labels-hidden
+				data-dimensionvaluekey="${this.key}"
+				end-value="${ifDefined(this.endValue)}"
+				label="Custom Range"
+				label-hidden
+				prefer-fixed-positioning
+				start-value="${ifDefined(this.startValue)}"
+			></d2l-input-date-time-range>
+		`;
+	}
+
+	_getAdditionalEventDetails(selected) {
+		if (!selected) return {};
+		return { startValue: this.startValue, endValue: this.endValue };
+	}
+
+	async _handleDateChange(e) {
+		this.startValue = e.target.startValue;
+		this.endValue = e.target.endValue;
+
+		this._dispatchFilterChangeEvent = true;
+	}
+}
+
+customElements.define('d2l-filter-dimension-set-date-time-range-value', FilterDimensionSetDateTimeRangeValue);

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

@@ -36,6 +36,10 @@ class FilterDimensionSet extends LitElement {
 			 * @type {boolean}
 			 */
 			loading: { type: Boolean },
+			/**
+			 * @ignore
+			 */
+			minWidth: { type: Number },
 			/**
 			 * Whether to hide the search input, perform a simple text search, or fire an event on search
 			 * @type {'none'|'automatic'|'manual'}
@@ -138,14 +142,17 @@ class FilterDimensionSet extends LitElement {
 		const valueNodes = this._getSlottedNodes();
 		let noSearchSupport = false;
 		let enforceSingleSelection = false;
+		let minWidth = undefined;
 		const values = valueNodes.map(value => {
 			if (value._noSearchSupport) noSearchSupport = true;
 			if (value._enforceSingleSelection) enforceSingleSelection = true;
+			if (value._minWidth) minWidth = value._minWidth;
 
 			return value.getValueDetails();
 		});
 		if (noSearchSupport) this.searchType = 'none';
 		if (enforceSingleSelection) this.selectionSingle = true;
+		if (minWidth) this.minWidth = minWidth;
 		return values;
 	}
 
@@ -182,7 +189,7 @@ class FilterDimensionSet extends LitElement {
 
 	_handleDimensionSetValueDataChange(e) {
 		e.stopPropagation();
-		this._dispatchDataChangeEvent({ dimensionKey: this.key, valueKey: e.detail.valueKey, changes: e.detail.changes });
+		this._dispatchDataChangeEvent({ dimensionKey: this.key, valueKey: e.detail.valueKey, changes: e.detail.changes, dispatchChangeEvent: e.detail.dispatchChangeEvent });
 	}
 
 	_handleSearchEmptyStateSlotChange(e) {

package/components/filter/filter.js

@@ -34,6 +34,7 @@ import { SubscriberRegistryController } from '../../controllers/subscriber/subsc
 
 const ARROWLEFT_KEY_CODE = 37;
 const ESCAPE_KEY_CODE = 27;
+const FILTER_CONTENT_CLASS = 'd2l-filter-dropdown-content';
 const SET_DIMENSION_ID_PREFIX = 'list-';
 
 /**
@@ -67,6 +68,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			text: { type: String },
 			_activeDimensionKey: { type: String, attribute: false },
 			_dimensions: { type: Array, attribute: false },
+			_minWidth: { type: Number, attribute: false },
 			_totalAppliedCount: { type: Number, attribute: false }
 		};
 	}
@@ -144,8 +146,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				flex-shrink: 0;
 			}
 			d2l-expand-collapse-content[expanded] {
+				margin-inline-start: -2rem;
 				padding-block: 0.5rem;
-				padding-inline: 0.2rem;
 			}
 
 			.d2l-filter-dimension-set-value-text {
@@ -206,6 +208,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this.opened = false;
 		this._changeEventsToDispatch = new Map();
 		this._dimensions = [];
+		this._minWidth = 285;
 		this._openedDimensions = [];
 		this._totalAppliedCount = 0;
 
@@ -244,27 +247,29 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		const dropdownContent = singleDimension ? html`
 				<d2l-dropdown-content
-					class="vdiff-target"
-					min-width="285"
+					class="vdiff-target ${FILTER_CONTENT_CLASS}"
+					min-width="${this._minWidth}"
 					max-width="420"
 					mobile-tray="right"
 					mobile-breakpoint="768"
 					no-padding-header
 					no-padding
 					?opened="${this.opened}"
+					prefer-fixed-positioning
 					?trap-focus="${!this._isDimensionEmpty(this._dimensions[0])}">
 					${header}
 					${dimensions}
 				</d2l-dropdown-content>`
 			: html`
 				<d2l-dropdown-menu
-					class="vdiff-target"
-					min-width="285"
+					class="vdiff-target ${FILTER_CONTENT_CLASS}"
+					min-width="${this._minWidth}"
 					max-width="420"
 					mobile-tray="right"
 					mobile-breakpoint="768"
 					no-padding-header
 					?opened="${this.opened}"
+					prefer-fixed-positioning
 					trap-focus>
 					${header}
 					<d2l-menu label="${this.localize('components.filter.filters')}">
@@ -289,7 +294,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				@d2l-dropdown-open="${this._handleDropdownOpen}"
 				@d2l-dropdown-position="${this._stopPropagation}"
 				class="vdiff-target"
-				?disabled="${this.disabled}">
+				?disabled="${this.disabled}"
+				prefer-fixed-positioning>
 				<d2l-button-subtle
 					class="d2l-dropdown-opener"
 					description="${description}"
@@ -496,6 +502,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			`;
 		}
 
+		if (dimension.minWidth) this._minWidth = dimension.minWidth;
 		if (this._isDimensionEmpty(dimension)) {
 			const emptyState = dimension.setEmptyState
 				? this._createEmptyState(dimension.setEmptyState, dimension.key)
@@ -633,6 +640,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
+	_dispatchChangeEventValueDataChange(dimension, value, valueKey) {
+		const details = { valueKey: valueKey, selected: value.selected };
+		if (value.getAdditionalEventDetails) Object.assign(details, value.getAdditionalEventDetails(value.selected));
+		this._dispatchChangeEvent(dimension, details);
+	}
+
 	_dispatchDimensionFirstOpenEvent(dimension) {
 		if (!this._openedDimensions.includes(dimension.key)) {
 			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-first-open', { bubbles: true, composed: false, detail: { key: dimension.key } }));
@@ -746,6 +759,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		if (shouldResizeDropdown) {
 			this._requestDropdownResize();
 		}
+		if (e.detail.dispatchChangeEvent) this._dispatchChangeEventValueDataChange(dimension, value, e.detail.valueKey);
 	}
 
 	_handleDimensionHide() {
@@ -798,12 +812,16 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	_handleDropdownClose(e) {
+		if (!e.target.classList?.contains(FILTER_CONTENT_CLASS)) return;
+
 		this.opened = false;
 		this._activeDimensionKey = null;
 		this._stopPropagation(e);
 	}
 
 	_handleDropdownOpen(e) {
+		if (!e.target.classList?.contains(FILTER_CONTENT_CLASS)) return;
+
 		this.opened = true;
 		if (this._dimensions.length === 1) {
 			const dimension = this._dimensions[0];
@@ -846,6 +864,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					info.headerText = dimension.headerText;
 					info.introductoryText = dimension.introductoryText;
 					info.hasMore = dimension.hasMore;
+					info.minWidth = dimension.minWidth;
 					info.searchType = dimension.searchType;
 					info.searchValue = '';
 					info.selectedFirst = dimension.selectedFirst;
@@ -907,6 +926,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 						value.selected = false;
 						this._setDimensionChangeEvent(dimension, { valueKey: value.key, selected: false }, true);
 					}
+					if (value.clearProperties) value.clearProperties();
 				});
 				break;
 			}

package/components/table/table-wrapper.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { cssSizes } from '../inputs/input-checkbox.js';
+import { getComposedParent } from '../../helpers/dom.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -252,6 +253,10 @@ export const tableStyles = css`
 	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table > tbody {
 		display: block;
 	}
+
+	[data-popover-count] {
+		z-index: 6 !important; /* if opened above, we want to stack on top of sticky table-controls */
+	}
 `;
 
 /**
@@ -370,9 +375,19 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._tableScrollers = {};
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+
+		this.addEventListener('d2l-dropdown-open', this._handlePopoverOpen);
+		this.addEventListener('d2l-dropdown-close', this._handlePopoverClose);
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
+		this.removeEventListener('d2l-dropdown-open', this._handlePopoverOpen);
+		this.removeEventListener('d2l-dropdown-close', this._handlePopoverClose);
+
 		this._controlsMutationObserver?.disconnect();
 		this._controlsScrolledMutationObserver?.disconnect();
 		this._tableMutationObserver?.disconnect();
@@ -499,6 +514,14 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._handleControlsChange();
 	}
 
+	_handlePopoverClose(e) {
+		this._updateStickyAncestor(e.target, false);
+	}
+
+	_handlePopoverOpen(e) {
+		this._updateStickyAncestor(e.target, true);
+	}
+
 	_handleSlotChange(e) {
 		this._table = e.target.assignedNodes({ flatten: true }).find(
 			node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TABLE' && node.classList.contains('d2l-table'))
@@ -589,6 +612,30 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		}
 	}
 
+	_updateStickyAncestor(node, popoverOpened) {
+		if (!this.stickyHeaders) return;
+
+		node = getComposedParent(node);
+		while (node) {
+			if (node === this) break;
+			if (node.nodeType === Node.ELEMENT_NODE) {
+				const style = window.getComputedStyle(node, null);
+				if (style.getPropertyValue('position') === 'sticky') {
+
+					let popoverCount = Number.parseInt(node.getAttribute('data-popover-count'));
+					if (Number.isNaN(popoverCount)) popoverCount = 0;
+					popoverOpened ? popoverCount++ : popoverCount--;
+
+					if (popoverCount > 0) node.setAttribute('data-popover-count', popoverCount);
+					else node.removeAttribute('data-popover-count');
+
+					return;
+				}
+			}
+			node = getComposedParent(node);
+		}
+	}
+
 	_updateStickyTops() {
 		const hasStickyControls = this._controls && !this._controls.noSticky;
 		let rowTop = hasStickyControls ? this._controls.offsetHeight + 6 : 0; // +6 for the internal `margin-bottom`.

package/custom-elements.json

@@ -3868,6 +3868,67 @@
         }
       ]
     },
+    {
+      "name": "d2l-filter-dimension-set-date-time-range-value",
+      "path": "./components/filter/filter-dimension-set-date-time-range-value.js",
+      "description": "A component to represent a possible custom date range or date-time range value that can be selected for a dimension set (the main filter dimension type).\nThe start-value and end-value will be included in the d2l-filter-change event and formatted as an ISO string in UTC time.\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": "text",
+          "description": "Defaults to \"Custom Date Range\" (localized). Can be overridden if desired.",
+          "type": "string"
+        },
+        {
+          "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": "text",
+          "attribute": "text",
+          "description": "Defaults to \"Custom Date Range\" (localized). Can be overridden if desired.",
+          "type": "string"
+        },
+        {
+          "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": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        }
+      ]
+    },
     {
       "name": "d2l-filter-dimension-set-empty-state",
       "path": "./components/filter/filter-dimension-set-empty-state.js",

package/lang/ar.js

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"components.form-element.defaultError": "{label} غير صالحة.",
 	"components.form-element.defaultFieldLabel": "الحقل",
 	"components.form-element.input.email.typeMismatch": "البريد الإلكتروني غير صالح",

package/lang/cy.js

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"components.form-element.defaultError": "{label} अमान्य है।",
 	"components.form-element.defaultFieldLabel": "फ़ील्ड",
 	"components.form-element.input.email.typeMismatch": "ईमेल मान्य नहीं है",

package/lang/ja.js

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"components.form-element.defaultError": "{label} は無効です。",
 	"components.form-element.defaultFieldLabel": "フィールド",
 	"components.form-element.input.email.typeMismatch": "電子メールが無効です",

package/lang/ko.js

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"components.form-element.defaultError": "{label}이(가) 잘못되었습니다.",
 	"components.form-element.defaultFieldLabel": "필드",
 	"components.form-element.input.email.typeMismatch": "이메일이 유효하지 않습니다.",

package/lang/nl.js

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"components.form-element.defaultError": "{label} 无效。",
 	"components.form-element.defaultFieldLabel": "字段",
 	"components.form-element.input.email.typeMismatch": "电子邮件无效",

package/lang/zh-tw.js

@@ -28,6 +28,7 @@ export default {
 	"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.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"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.16.0",
+  "version": "3.17.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",