@brightspace-ui/core 1.217.0 → 1.218.0

package/components/filter/README.md

@@ -189,6 +189,7 @@ Set dimension on mobile:
 | `select-all` | Boolean | Whether to show a select all checkbox and selection summary for this dimension  |
 | `selection-single` | Boolean | Whether only one value can be selected at a time for this dimension  |
 | `text` | String, required | Text for the dimension in the menu |
+| `value-only-active-filter-text` | Boolean | Whether to hide the dimension in the text sent to active filter subscribers |
 <!-- docs: end hidden content -->
 
 ## Filter Dimension: Set Value [d2l-filter-dimension-set-value]

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

@@ -38,7 +38,12 @@ class FilterDimensionSet extends LitElement {
 			 * REQUIRED: The text that is displayed for the dimension title
 			 * @type {string}
 			 */
-			text: { type: String }
+			text: { type: String },
+			/**
+			 * Whether to hide the dimension in the text sent to active filter subscribers
+			 * @type {boolean}
+			 */
+			valueOnlyActiveFilterText: { type: Boolean, attribute: 'value-only-active-filter-text' }
 		};
 	}
 
@@ -49,6 +54,7 @@ class FilterDimensionSet extends LitElement {
 		this.selectAll = false;
 		this.selectionSingle = false;
 		this.text = '';
+		this.valueOnlyActiveFilterText = false;
 		this._slot = null;
 	}
 

package/components/filter/filter.js

@@ -23,6 +23,7 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 const ARROWLEFT_KEY_CODE = 37;
 const ESCAPE_KEY_CODE = 27;
@@ -143,6 +144,22 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._dimensions = [];
 		this._openedDimensions = [];
 		this._totalAppliedCount = 0;
+
+		this._activeFilters = null;
+		this._activeFiltersSubscribers = new SubscriberRegistryController(this,
+			{ onSubscribe: this._updateActiveFiltersSubscriber.bind(this), updateSubscribers: this._updateActiveFiltersSubscribers.bind(this) },
+			{}
+		);
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._activeFiltersSubscribers.hostConnected();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._activeFiltersSubscribers.hostDisconnected();
 	}
 
 	firstUpdated(changedProperties) {
@@ -217,6 +234,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		if (opener) opener.focus();
 	}
 
+	getSubscriberController() {
+		return this._activeFiltersSubscribers;
+	}
+
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}
@@ -423,6 +444,8 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}));
 		this._changeEventsToDispatch = new Map();
 		this._changeEventTimeout = null;
+
+		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
 	_dispatchDimensionFirstOpenEvent(key) {
@@ -511,9 +534,11 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 					dimension.appliedCount--;
 					this._totalAppliedCount--;
 				}
+				this._activeFiltersSubscribers.updateSubscribers();
 			} else if (prop === 'values') {
 				if (dimension.searchValue) shouldSearch = true;
 				shouldRecount = true;
+				this._activeFiltersSubscribers.updateSubscribers();
 			}
 		});
 
@@ -609,6 +634,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 					info.searchType = dimension.searchType;
 					info.selectionSingle = dimension.selectionSingle;
 					if (dimension.selectAll && !dimension.selectionSingle) info.selectAllIdPrefix = SET_DIMENSION_ID_PREFIX;
+					info.valueOnlyActiveFilterText = dimension.valueOnlyActiveFilterText;
 					const values = dimension._getValues();
 					info.values = values;
 					break;
@@ -619,6 +645,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		});
 
 		this._setFilterCounts();
+		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
 	_isDimensionEmpty(dimension) {
@@ -717,6 +744,37 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		e.stopPropagation();
 	}
 
+	_updateActiveFilters() {
+		const activeFilters = [];
+
+		this._dimensions.forEach(dimension => {
+			switch (dimension.type) {
+				case 'd2l-filter-dimension-set': {
+					dimension.values.forEach(value => {
+						if (value.selected) {
+							const keyObject = { dimension: dimension.key, value: value.key };
+							const text = dimension.valueOnlyActiveFilterText ? value.text : `${dimension.text}: ${value.text}`;
+							activeFilters.push({ keyObject: keyObject, text: text });
+						}
+					});
+					break;
+				}
+			}
+		});
+
+		this._activeFilters = activeFilters;
+	}
+
+	_updateActiveFiltersSubscriber(subscriber) {
+		if (!this._activeFilters) this._updateActiveFilters();
+		subscriber.updateActiveFilters(this.id, this._activeFilters);
+	}
+
+	_updateActiveFiltersSubscribers(subscribers) {
+		this._updateActiveFilters();
+		subscribers.forEach(subscriber => subscriber.updateActiveFilters(this.id, this._activeFilters));
+	}
+
 }
 
 customElements.define('d2l-filter', Filter);

package/controllers/subscriber/README.md

@@ -1,6 +1,6 @@
 # Subscriber Controllers
 
-The `SubscriberRegistryController` and the corresponding `*SubscriberController`s can be used to create a subscription system within your app. Components can setup a subscriber registry instance to keep track of all components subscribed to them with the `SubscriberRegistryController`. Whenever it makes sense to do so, they can iterate over their subscribers to perform some action, update them with new data, etc.  Components can subscribe themselves to different registries using the `IdSubscriberController` or the `EventSubscriberController`. This system supports a many-to-many relationship - registry components can contain multiple registry instances with multiple subscribers in each, and subscriber components can subscribe to multiple different registries.
+The `SubscriberRegistryController` and the corresponding `*SubscriberController`s can be used to create a subscription system within your app. Components can set up a subscriber registry instance to keep track of all components subscribed to them with the `SubscriberRegistryController`. Whenever it makes sense to do so, they can iterate over their subscribers to perform some action, update them with new data, etc.  Components can subscribe themselves to different registries using the `IdSubscriberController` or the `EventSubscriberController`. This system supports a many-to-many relationship - registry components can contain multiple registry instances with multiple subscribers in each, and subscriber components can subscribe to multiple different registries.
 
 ## Usage
 
@@ -27,7 +27,7 @@ class CableSubscription extends LitElement {
 			{ onSubscribe: this._unlockKidsChannels.bind(this) }, {});
 	}
 
-	getController(controllerId) {
+	getSubscriberController(controllerId) {
 		if (controllerId === 'sports') {
 			return this._sportsSubscribers;
 		} else if (controllerId === 'movies') {
@@ -51,7 +51,7 @@ class CableSubscription extends LitElement {
 
 When creating the controller, you can pass in callbacks to run whenever a subscriber is added, removed, or `updateSubscribers` is called (which handles request debouncing for you).
 
-The `*subscriberController`s will use a `getController` method that needs to be exposed on the registry component. If you only have one `SubscriberRegistryController` you can simple return that.  If you have multiple, you will return the proper controller depending on the id the subscriber component passed to you.
+The `*subscriberController`s will use a `getSubscriberController` method that needs to be exposed on the registry component. If you only have one `SubscriberRegistryController` you can simple return that.  If you have multiple, you will return the proper controller depending on the id the subscriber component passed to you.
 
 Once this has been set up, components can subscribe to particular registries two different ways:
 1. Using a matching event name with `EventSubscriberController`. The component will need to be a child of the registry component for this to work.

package/controllers/subscriber/subscriberControllers.js

@@ -90,7 +90,7 @@ export class EventSubscriberController {
 	}
 
 	hostDisconnected() {
-		if (this._registry) this._registry.getController(this._controllerId).unsubscribe(this._host);
+		if (this._registry) this._registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
 	}
 
 }
@@ -114,7 +114,7 @@ export class IdSubscriberController {
 		if (this._registryObserver) this._registryObserver.disconnect();
 		this._timeouts.forEach(timeoutId => clearTimeout(timeoutId));
 		this._registries.forEach(registry => {
-			registry.getController(this._controllerId).unsubscribe(this._host);
+			registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
 		});
 	}
 
@@ -123,7 +123,7 @@ export class IdSubscriberController {
 
 		if (this._registryObserver) this._registryObserver.disconnect();
 		this._registries.forEach(registry => {
-			registry.getController(this._controllerId).unsubscribe(this._host);
+			registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
 			if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(registry.id);
 		});
 		this._registries = new Map();
@@ -168,7 +168,7 @@ export class IdSubscriberController {
 		if (this._registries.get(registryId) === registryComponent) return;
 
 		if (registryComponent) {
-			registryComponent.getController(this._controllerId).subscribe(this._host);
+			registryComponent.getSubscriberController(this._controllerId).subscribe(this._host);
 			this._registries.set(registryId, registryComponent);
 			if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(registryComponent);
 		} else {

package/custom-elements.json

@@ -2992,6 +2992,12 @@
           "description": "REQUIRED: The text that is displayed for the dimension title",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "value-only-active-filter-text",
+          "description": "Whether to hide the dimension in the text sent to active filter subscribers",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -3035,6 +3041,13 @@
           "description": "REQUIRED: The text that is displayed for the dimension title",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "valueOnlyActiveFilterText",
+          "attribute": "value-only-active-filter-text",
+          "description": "Whether to hide the dimension in the text sent to active filter subscribers",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [

package/package.json

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