@brightspace-ui/core 3.18.0 → 3.19.1

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/filter-dimension-set-date-time-range-value.js

@@ -20,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' },
 			/**
@@ -34,7 +35,8 @@ 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' },
 			/**

package/components/table/table-wrapper.js

@@ -380,6 +380,9 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 
 		this.addEventListener('d2l-dropdown-open', this._handlePopoverOpen);
 		this.addEventListener('d2l-dropdown-close', this._handlePopoverClose);
+		this.addEventListener('d2l-tooltip-show', this._handlePopoverOpen);
+		this.addEventListener('d2l-tooltip-hide', this._handlePopoverClose);
+
 	}
 
 	disconnectedCallback() {
@@ -387,6 +390,8 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 
 		this.removeEventListener('d2l-dropdown-open', this._handlePopoverOpen);
 		this.removeEventListener('d2l-dropdown-close', this._handlePopoverClose);
+		this.removeEventListener('d2l-tooltip-show', this._handlePopoverOpen);
+		this.removeEventListener('d2l-tooltip-hide', this._handlePopoverClose);
 
 		this._controlsMutationObserver?.disconnect();
 		this._controlsScrolledMutationObserver?.disconnect();

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.",
@@ -3903,12 +3913,24 @@
         }
       ],
       "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",

package/package.json

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