@brightspace-ui/core 3.17.2 → 3.19.0

package/components/filter/README.md

@@ -297,6 +297,40 @@ The `getUTCDateTimeRange(rangeType, diff)` helper function can be used to get th
 </d2l-filter>
 ```
 
+## Dimension Set Value: Date-Time Range
+
+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 which expands to allow the user to select a date range using either the `d2l-input-date-time-range` or `d2l-input-date-range` component (depending on the `type` of the component). 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-time-range-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';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set-date-time-range-value.js';
+</script>
+<d2l-filter>
+  <d2l-filter-dimension-set key="dates" text="Dates">
+    <d2l-filter-dimension-set-date-text-value key="48hours" range="48hours"></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-time-range-value key="custom" selected></d2l-filter-dimension-set-date-time-range-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 |
+| `disabled` | Boolean, default: `false` | Whether the value in the filter is disabled or not |
+| `end-value` | String | Value of the end date or date-time input. Expected to be in UTC. |
+| `selected` | Boolean, default: `false` | Whether the value in the filter is selected or not |
+| `start-value` | String | Value of the start date or date-time input. Expected to be in UTC. |
+| `text` | String, default: `"Custom Date Range"` (localized) | Text for the value in the list. This would override the default value. |
+| `type` | String, default: `"date-time"` | Type of range input. Can be either `date-time` or `date`. |
+<!-- 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`.

package/components/filter/demo/filter.html

@@ -171,7 +171,8 @@
 						<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="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-date-time-range-value key="custom" type="date"></d2l-filter-dimension-set-date-time-range-value>
+						<d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time"></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

@@ -1,4 +1,6 @@
+import '../inputs/input-date-range.js';
 import '../inputs/input-date-time-range.js';
+import { getLocalDateTimeFromUTCDateTime, getUTCDateTimeFromLocalDateTime } from '../../helpers/dateTime.js';
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -18,7 +20,8 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
-			 * @ignore
+			 * Value of the end date or date-time input. Expected to be in UTC.
+			 * @type {string}
 			 */
 			endValue: { type: String, attribute: 'end-value' },
 			/**
@@ -32,14 +35,20 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 			 */
 			selected: { type: Boolean, reflect: true },
 			/**
-			 * @ignore
+			 * Value of the start date or date-time input. Expected to be in UTC.
+			 * @type {string}
 			 */
 			startValue: { type: String, attribute: 'start-value' },
 			/**
 			 * Defaults to "Custom Date Range" (localized). Can be overridden if desired.
 			 * @type {string}
 			 */
-			text: { type: String, reflect: true }
+			text: { type: String, reflect: true },
+			/**
+			 * Date/time range input type
+			 * @type {'date'|'date-time'}
+			 */
+			type: { type: String }
 		};
 	}
 
@@ -47,6 +56,7 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 		super();
 		this.disabled = false;
 		this.selected = false;
+		this.type = 'date-time';
 		this._dispatchFilterChangeEvent = false;
 		this._enforceSingleSelection = true;
 		this._filterSetValue = true;
@@ -104,13 +114,21 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 	}
 
 	_getAdditionalContent() {
-		return html`
-			<d2l-input-date-time-range
+		return this.type === 'date'
+			? html`<d2l-input-date-range
+				@change="${this._handleDateChange}"
+				child-labels-hidden
+				end-value="${ifDefined(this.endValue ? getLocalDateTimeFromUTCDateTime(this.endValue) : undefined)}"
+				label="${this.localize('components.filter-dimension-set-date-time-range-value.text')}"
+				label-hidden
+				prefer-fixed-positioning
+				start-value="${ifDefined(this.startValue ? getLocalDateTimeFromUTCDateTime(this.startValue) : undefined)}"
+			></d2l-input-date-range>`
+			: 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="${this.localize('components.filter-dimension-set-date-time-range-value.text')}"
 				label-hidden
 				prefer-fixed-positioning
 				start-value="${ifDefined(this.startValue)}"
@@ -124,8 +142,13 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 	}
 
 	async _handleDateChange(e) {
-		this.startValue = e.target.startValue;
-		this.endValue = e.target.endValue;
+		if (this.type === 'date') {
+			this.startValue = e.target.startValue ? getUTCDateTimeFromLocalDateTime(e.target.startValue, '0:0') : undefined;
+			this.endValue = e.target.endValue ? getUTCDateTimeFromLocalDateTime(e.target.endValue, '0:0') : undefined;
+		} else {
+			this.startValue = e.target.startValue;
+			this.endValue = e.target.endValue;
+		}
 
 		this._dispatchFilterChangeEvent = true;
 	}

package/custom-elements.json

@@ -3873,11 +3873,21 @@
       "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": "end-value",
+          "description": "Value of the end date or date-time input. Expected to be in UTC.",
+          "type": "string"
+        },
         {
           "name": "key",
           "description": "REQUIRED: Unique key to represent this value in the dimension",
           "type": "string"
         },
+        {
+          "name": "start-value",
+          "description": "Value of the start date or date-time input. Expected to be in UTC.",
+          "type": "string"
+        },
         {
           "name": "text",
           "description": "Defaults to \"Custom Date Range\" (localized). Can be overridden if desired.",
@@ -3894,15 +3904,33 @@
           "description": "Whether this value in the filter is selected or not",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "type",
+          "description": "Date/time range input type",
+          "type": "'date'|'date-time'",
+          "default": "\"date-time\""
         }
       ],
       "properties": [
+        {
+          "name": "endValue",
+          "attribute": "end-value",
+          "description": "Value of the end date or date-time input. Expected to be in UTC.",
+          "type": "string"
+        },
         {
           "name": "key",
           "attribute": "key",
           "description": "REQUIRED: Unique key to represent this value in the dimension",
           "type": "string"
         },
+        {
+          "name": "startValue",
+          "attribute": "start-value",
+          "description": "Value of the start date or date-time input. Expected to be in UTC.",
+          "type": "string"
+        },
         {
           "name": "text",
           "attribute": "text",
@@ -3923,6 +3951,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "type",
+          "attribute": "type",
+          "description": "Date/time range input type",
+          "type": "'date'|'date-time'",
+          "default": "\"date-time\""
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""

package/package.json

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