@brightspace-ui/core 2.98.5 → 2.99.0

package/components/filter/filter-tags.js

@@ -36,10 +36,10 @@ class FilterTags extends LocalizeCoreElement(LitElement) {
 		super();
 
 		this._allActiveFilters = new Map();
-		this._filters = new IdSubscriberController(this,
-			{ onUnsubscribe: this._removeLostFilter.bind(this) },
-			{ idPropertyName: 'filterIds' }
-		);
+		this._filters = new IdSubscriberController(this, 'active-filters', {
+			idPropertyName: 'filterIds',
+			onUnsubscribe: this._removeLostFilter.bind(this)
+		});
 	}
 
 	render() {

package/components/filter/filter.js

@@ -136,7 +136,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				line-height: unset;
 				overflow: hidden;
 			}
-			
+
 			.d2l-filter-dimension-set-value-text {
 				-webkit-box-orient: vertical;
 				display: -webkit-box;
@@ -191,10 +191,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._totalAppliedCount = 0;
 
 		this._activeFilters = null;
-		this._activeFiltersSubscribers = new SubscriberRegistryController(this,
-			{ onSubscribe: this._updateActiveFiltersSubscriber.bind(this), updateSubscribers: this._updateActiveFiltersSubscribers.bind(this) },
-			{}
-		);
+		this._activeFiltersSubscribers = new SubscriberRegistryController(this, 'active-filters', {
+			onSubscribe: this._updateActiveFiltersSubscriber.bind(this),
+			updateSubscribers: this._updateActiveFiltersSubscribers.bind(this)
+		});
 	}
 
 	static get focusElementSelector() {
@@ -268,10 +268,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		`;
 	}
 
-	getSubscriberController() {
-		return this._activeFiltersSubscribers;
-	}
-
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}

package/components/inputs/demo/input-checkbox.html

@@ -24,10 +24,13 @@
 			<h2>Checkbox with multi-line label</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox style="width: 200px;">
+					<d2l-input-checkbox style="overflow: hidden; width: 200px;">
 						Label for checkbox that wraps nicely onto
 						multiple lines and stays aligned
 					</d2l-input-checkbox>
+					<d2l-input-checkbox style="overflow: hidden; width: 200px;">
+						https://en.wikipedia.org/wiki/Dark_matter
+					</d2l-input-checkbox>
 				</template>
 			</d2l-demo-snippet>
 

package/components/inputs/demo/input-radio-label-test.js

@@ -9,6 +9,7 @@ class TestInputRadioLabel extends RtlMixin(LitElement) {
 			css`
 				:host {
 					display: block;
+					overflow: hidden;
 					width: 200px;
 				}
 			`
@@ -34,6 +35,10 @@ class TestInputRadioLabel extends RtlMixin(LitElement) {
 				Label for radio that wraps nicely onto
 				multiple lines and stays aligned
 			</label>
+			<label class="d2l-input-radio-label">
+				<input type="radio" name="myGroup" value="long">
+				https://en.wikipedia.org/wiki/Dark_matter
+			</label>
 		`;
 	}
 

package/components/inputs/input-checkbox.js

@@ -120,8 +120,8 @@ class InputCheckbox extends FocusMixin(SkeletonMixin(RtlMixin(LitElement))) {
 					margin-bottom: 0;
 				}
 				label {
-					display: inline-block;
-					white-space: nowrap;
+					display: flex;
+					overflow-wrap: anywhere;
 				}
 				.d2l-input-checkbox-wrapper {
 					display: inline-block;

package/components/inputs/input-radio-styles.js

@@ -60,6 +60,7 @@ export const radioStyles = css`
 		font-weight: 400;
 		line-height: 1.2rem;
 		margin-bottom: 0.9rem;
+		overflow-wrap: anywhere;
 		padding-left: 1.7rem;
 		padding-right: 0;
 		vertical-align: middle;

package/components/list/list-item-expand-collapse-mixin.js

@@ -76,7 +76,7 @@ export const ListItemExpandCollapseMixin = superclass => class extends superclas
 		this._siblingHasNestedItems = false;
 		this._renderExpandCollapseSlot = false;
 		this._showNestedLoadingSpinner = false;
-		this._parentChildUpdateSubscription = new EventSubscriberController(this, {}, { eventName: 'd2l-list-child-status' });
+		this._parentChildUpdateSubscription = new EventSubscriberController(this, 'list-child-status');
 	}
 
 	connectedCallback() {

package/components/list/list.js

@@ -69,11 +69,10 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this._listItemChanges = [];
 		this._childHasExpandCollapseToggle = false;
 
-		this._listChildrenUpdatedSubscribers = new SubscriberRegistryController(
-			this,
-			{ onSubscribe: this._updateActiveSubscriber.bind(this), updateSubscribers: this._updateActiveSubscribers.bind(this) },
-			{ eventName: 'd2l-list-child-status' }
-		);
+		this._listChildrenUpdatedSubscribers = new SubscriberRegistryController(this, 'list-child-status', {
+			onSubscribe: this._updateActiveSubscriber.bind(this),
+			updateSubscribers: this._updateActiveSubscribers.bind(this)
+		});
 	}
 
 	connectedCallback() {
@@ -185,10 +184,6 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return new SelectionInfo(keys, selectionInfo.state);
 	}
 
-	getSubscriberController() {
-		return this._listChildrenUpdatedSubscribers;
-	}
-
 	_getItemByIndex(index) {
 		const items = this.getItems();
 		if (index > items.length - 1) return;

package/controllers/subscriber/README.md

@@ -12,29 +12,19 @@ import { SubscriberRegistryController } from '@brightspace-ui/core/controllers/s
 class CableSubscription extends LitElement {
 	constructor() {
 		super();
-		this._sportsSubscribers = new SubscriberRegistryController(this,
-			{ onSubscribe: this._unlockSportsChannels.bind(this) },
-			{ eventName: 'd2l-channels-subscribe-sports' }
-		);
-
-		this._movieSubscribers = new SubscriberRegistryController(this, {},
-			{ onSubscribe: this._unlockMovieChannels.bind(this), updateSubscribers: this._sendMovieGuide.bind(this) },
-			{ eventName: 'd2l-channels-subscribe-movies' }
-		);
-
-		// This controller only supports registering by id - no event is needed
-		this._kidsChannelSubscribers = new SubscriberRegistryController(this,
-			{ onSubscribe: this._unlockKidsChannels.bind(this) }, {});
-	}
 
-	getSubscriberController(controllerId) {
-		if (controllerId === 'sports') {
-			return this._sportsSubscribers;
-		} else if (controllerId === 'movies') {
-			return this._movieSubscribers;
-		} else if (controllerId === 'kids') {
-			return this._kidsChannelSubscribers;
+		this._sportsSubscribers = new SubscriberRegistryController(this, 'channels-sports', {
+			onSubscribe: this._unlockSportsChannels.bind(this)
+		});
+
+		this._movieSubscribers = new SubscriberRegistryController(this, 'channels-movies', {
+			onSubscribe: this._unlockMovieChannels.bind(this),
+			updateSubscribers: this._sendMovieGuide.bind(this)
 		}
+
+		this._kidsChannelSubscribers = new SubscriberRegistryController(this, 'channels-kids', {
+			onSubscribe: this._unlockKidsChannels.bind(this)
+		});
 	}
 
 	_sendMovieGuide(subscribers) {
@@ -49,15 +39,13 @@ 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 `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.
+When creating the controller, you must provide a unique name for the subscription (e.g. `'channels-sports'`). You may also pass in an optional `updateSubscribers` callback (invoked by calling `.updateSubscribers` on the controller, with built-in debouncing), and lifecycle callbacks to run whenever a subscriber is added (`onSubscribe`) or removed (`onUnsubscribe`).
 
 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.
-2. By pointing to the registry component's id with `IdSubscriberController`. The component will need to be in the same DOM scope as the registry component for this to work.
+1. Using `EventSubscriberController` with the target subscription name. The component will need to be a child of the registry component for this to work.
+2. Using `IdSubscriberController` with the target subscription name and the `idPropertyName` option, which will point to the registry component's id. The component will need to be in the same DOM scope as the registry component for this to work.
 
-Like the `SubscriberRegistryController`, these `*subscriberController`s take optional callbacks to throw at different points in the subscription process.
+Like the `SubscriberRegistryController`, these `*subscriberController`s take optional callbacks invoked at different points in the subscription process.
 
 ```js
 import { EventSubscriberController, IdSubscriberController } from '@brightspace-ui/core/controllers/subscriber/subscriberControllers.js';
@@ -72,15 +60,12 @@ class GeneralViewer extends LitElement {
 	constructor() {
 		super();
 		this._subscribedChannels = new Set();
-	
-		this._sportsSubscription = new EventSubscriberController(this,
-			{ onError: this._onSportsError.bind(this) }
-			{ eventName: 'd2l-channels-subscribe-sports', controllerId: 'sports' }
-		);
-
-		this._movieSubscription = new EventSubscriberController(this, {},
-			{ eventName: 'd2l-channels-subscribe-movies', controllerId: 'movies' }
-		);
+
+		this._sportsSubscription = new EventSubscriberController(this, 'channels-sports', {
+			onError: this._onSportsError.bind(this)
+		}
+
+		this._movieSubscription = new EventSubscriberController(this, 'channels-movies');
 	}
 
 	addChannels(channels) {
@@ -106,10 +91,11 @@ class YoungerViewer extends LitElement {
 		super();
 		this._subscribedChannels = new Set();
 
-		this._kidsSubscription = new IdSubscriberController(this,
-			{ onSubscribe: this._onSubscribe.bind(this), onUnsubscribe: this._onUnsubscribe.bind(this) },
-			{ idPropertyName: 'for', controllerId: 'kids' }
-		);
+		this._kidsSubscription = new IdSubscriberController(this, 'channels-kids', {
+			idPropertyName: 'for',
+			onSubscribe: this._onSubscribe.bind(this),
+			onUnsubscribe: this._onUnsubscribe.bind(this)
+		});
 	}
 
 	addChannels(channels) {
@@ -129,6 +115,7 @@ class YoungerViewer extends LitElement {
 ```
 
 An example of what this could look like altogether:
+
 ```html
 <cable-subscription id="rogers">
 	<general-viewer></general-viewer>
@@ -136,13 +123,12 @@ An example of what this could look like altogether:
 <younger-viewer for="rogers"></younger-viewer>
 ```
 
-As of the Lit 2 upgrade, the lifecycle methods `hostConnected`, `hostDisconnected`, and `hostUpdated` will be called automatically.
 ## Available Callbacks
 
 ### SubscriberRegistryController
 | Callback Name | Description | Passed to Callback |
 |---|---|---|
-| `onSubscribe` | Runs whenever a new subscriber is added | Subscriber that was just subscribed | 
+| `onSubscribe` | Runs whenever a new subscriber is added | Subscriber that was just subscribed |
 | `onUnsubscribe` | Runs whenever a subscriber is removed | Subscriber that was just unsubscribed |
 | `updateSubscribers` | Runs whenever `updateSubscribers` is called on the controller, handles debouncing requests for you | Map of all current subscribers |
 

package/controllers/subscriber/subscriberControllers.js

@@ -1,14 +1,52 @@
 import { cssEscape } from '../../helpers/dom.js';
 
-export class SubscriberRegistryController {
+class BaseController {
+	constructor(host, name, options = {}) {
+		if (!host || !name) throw new TypeError('SubscriberController: missing host or subscription name');
 
-	constructor(host, callbacks, options) {
-		this._host = host;
 		host.addController(this);
-		this._callbacks = callbacks || {};
-		this._eventName = options && options.eventName;
-		this._subscribers = new Map();
+		this._host = host;
+		this._name = name;
+		this._options = options;
+		this._eventName = `d2l-subscribe-${this._name}`;
+	}
+}
+
+class BaseSubscriber extends BaseController {
+	_subscribe(target = this._host, targetLabel) {
+		const isBroadcast = target === this._host;
+
+		const options = isBroadcast ? { bubbles: true, composed: true } : {};
+		const evt = new CustomEvent(this._eventName, {
+			...options,
+			detail: { subscriber: this._host }
+		});
+		target.dispatchEvent(evt);
+
+		const { registry, registryController } = evt.detail;
+		if (!registry) {
+			if (this._options.onError) this._options.onError();
+			return;
+		}
+
+		if (targetLabel) {
+			this._registries.set(targetLabel, registry);
+			this._registryControllers.set(targetLabel, registryController);
+		} else {
+			this._registry = registry;
+			this._registryController = registryController;
+		}
+
+		if (this._options.onSubscribe) this._options.onSubscribe(registry);
+	}
+}
+
+export class SubscriberRegistryController extends BaseController {
+
+	constructor(host, name, options) {
+		super(host, name, options);
 
+		this._subscribers = new Map();
 		this._handleSubscribe = this._handleSubscribe.bind(this);
 	}
 
@@ -27,24 +65,24 @@ export class SubscriberRegistryController {
 	subscribe(target) {
 		if (this._subscribers.has(target)) return;
 		this._subscribers.set(target, target);
-		if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(target);
+		if (this._options.onSubscribe) this._options.onSubscribe(target);
 	}
 
 	unsubscribe(target) {
 		this._subscribers.delete(target);
-		if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(target);
+		if (this._options.onUnsubscribe) this._options.onUnsubscribe(target);
 	}
 
 	updateSubscribers() {
 		if (!this._subscribers || this._subscribers.size === 0) return;
-		if (!this._callbacks.updateSubscribers) return;
+		if (!this._options.updateSubscribers) return;
 
 		// debounce the updates
 		if (this._updateSubscribersRequested) return;
 
 		this._updateSubscribersRequested = true;
 		setTimeout(() => {
-			this._callbacks.updateSubscribers(this._subscribers);
+			this._options.updateSubscribers(this._subscribers);
 			this._updateSubscribersRequested = false;
 		}, 0);
 	}
@@ -52,20 +90,19 @@ export class SubscriberRegistryController {
 	_handleSubscribe(e) {
 		e.stopPropagation();
 		e.detail.registry = this._host;
-		const target = e.composedPath()[0];
+		e.detail.registryController = this;
+		const target = e.detail.subscriber;
 		this.subscribe(target);
 	}
 }
 
-export class EventSubscriberController {
+export class EventSubscriberController extends BaseSubscriber {
+
+	constructor(host, name, options) {
+		super(host, name, options);
 
-	constructor(host, callbacks, options) {
-		this._host = host;
-		host.addController(this);
-		this._callbacks = callbacks || {};
-		this._eventName = options && options.eventName;
-		this._controllerId = options && options.controllerId;
 		this._registry = null;
+		this._registryController = null;
 	}
 
 	get registry() {
@@ -74,39 +111,24 @@ export class EventSubscriberController {
 
 	hostConnected() {
 		// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
-		requestAnimationFrame(() => {
-			const evt = new CustomEvent(this._eventName, {
-				bubbles: true,
-				composed: true,
-				detail: {}
-			});
-			this._host.dispatchEvent(evt);
-			this._registry = evt.detail.registry;
-
-			if (!this._registry) {
-				if (this._callbacks.onError) this._callbacks.onError();
-				return;
-			}
-			if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(this._registry);
-		});
+		requestAnimationFrame(() => this._subscribe());
 	}
 
 	hostDisconnected() {
-		if (this._registry) this._registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
+		if (this._registryController) this._registryController.unsubscribe(this._host);
 	}
 
 }
 
-export class IdSubscriberController {
+export class IdSubscriberController extends BaseSubscriber {
+
+	constructor(host, name, options) {
+		super(host, name, options);
 
-	constructor(host, callbacks, options) {
-		this._host = host;
-		host.addController(this);
-		this._callbacks = callbacks || {};
 		this._idPropertyName = options && options.idPropertyName;
 		this._idPropertyValue = this._idPropertyName ? this._host[this._idPropertyName] : undefined;
-		this._controllerId = options && options.controllerId;
 		this._registries = new Map();
+		this._registryControllers = new Map();
 		this._timeouts = new Set();
 	}
 
@@ -117,8 +139,8 @@ export class IdSubscriberController {
 	hostDisconnected() {
 		if (this._registryObserver) this._registryObserver.disconnect();
 		this._timeouts.forEach(timeoutId => clearTimeout(timeoutId));
-		this._registries.forEach(registry => {
-			registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
+		this._registryControllers.forEach(controller => {
+			controller.unsubscribe(this._host);
 		});
 	}
 
@@ -129,11 +151,12 @@ export class IdSubscriberController {
 		this._idPropertyValue = propertyValue;
 
 		if (this._registryObserver) this._registryObserver.disconnect();
-		this._registries.forEach(registry => {
-			registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
-			if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(registry.id);
+		this._registryControllers.forEach((controller, key) => {
+			controller.unsubscribe(this._host);
+			if (this._options.onUnsubscribe) this._options.onUnsubscribe(key);
 		});
 		this._registries = new Map();
+		this._registryControllers = new Map();
 
 		this._updateRegistries();
 
@@ -159,7 +182,7 @@ export class IdSubscriberController {
 
 	_updateRegistry(registryId, elapsedTime) {
 		let registryComponent = this._host.getRootNode().querySelector(`#${cssEscape(registryId)}`);
-		if (!registryComponent && this._callbacks.onError) {
+		if (!registryComponent && this._options.onError) {
 			if (elapsedTime < 3000) {
 				const timeoutId = setTimeout(() => {
 					this._timeouts.delete(timeoutId);
@@ -167,20 +190,18 @@ export class IdSubscriberController {
 				}, 100);
 				this._timeouts.add(timeoutId);
 			} else {
-				this._callbacks.onError(registryId);
+				this._options.onError(registryId);
 			}
 		}
 
 		registryComponent = registryComponent || undefined;
 		if (this._registries.get(registryId) === registryComponent) return;
 
-		if (registryComponent) {
-			registryComponent.getSubscriberController(this._controllerId).subscribe(this._host);
-			this._registries.set(registryId, registryComponent);
-			if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(registryComponent);
-		} else {
+		if (registryComponent) this._subscribe(registryComponent, registryId);
+		else {
 			this._registries.delete(registryId);
-			if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(registryId);
+			this._registryControllers.delete(registryId);
+			if (this._options.onUnsubscribe) this._options.onUnsubscribe(registryId);
 		}
 	}
 

package/package.json

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