@brightspace-ui/core 1.214.0 → 1.218.0

package/components/menu/menu-item-mixin.js

@@ -109,7 +109,7 @@ export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMix
 	}
 
 	__initializeItem() {
-		const slot = this.shadowRoot.querySelector('slot:not([name])');
+		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot:not([name])');
 		if (!slot) {
 			return;
 		}

package/components/menu/menu.js

@@ -221,11 +221,11 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(FocusVisiblePolyfillMixin(Li
 	}
 
 	_getMenuItemReturn() {
-		return this.shadowRoot.querySelector('d2l-menu-item-return');
+		return this.shadowRoot && this.shadowRoot.querySelector('d2l-menu-item-return');
 	}
 
 	_getMenuItems() {
-		const slot = this.shadowRoot.querySelector('slot');
+		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot');
 		if (!slot) return;
 		const items = slot.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
 

package/components/overflow-group/overflow-group.js

@@ -318,7 +318,7 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	}
 
 	_chomp() {
-		if (!this._itemLayouts) return;
+		if (!this.shadowRoot || !this._itemLayouts) return;
 
 		this._overflowMenu = this.shadowRoot.querySelector('.d2l-overflow-dropdown');
 		this._overflowMenuMini = this.shadowRoot.querySelector('.d2l-overflow-dropdown-mini');

package/components/scroll-wrapper/demo/scroll-wrapper-test.js

@@ -53,7 +53,7 @@ class TestScrollWrapper extends RtlMixin(LitElement) {
 	}
 
 	focus() {
-		forceFocusVisible(this.shadowRoot.querySelector('d2l-scroll-wrapper')._container);
+		if (this.shadowRoot) forceFocusVisible(this.shadowRoot.querySelector('d2l-scroll-wrapper')._container);
 	}
 
 }

package/components/selection/selection-action.js

@@ -79,7 +79,7 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-button-subtle');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
 		if (elem) elem.focus();
 	}
 

package/components/selection/selection-input.js

@@ -142,7 +142,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.firstElementChild;
+		const elem = this.shadowRoot && this.shadowRoot.firstElementChild;
 		if (elem) elem.focus();
 	}
 

package/components/selection/selection-select-all.js

@@ -57,7 +57,7 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-checkbox');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-checkbox');
 		if (elem) elem.focus();
 	}
 

package/components/switch/switch-mixin.js

@@ -213,7 +213,7 @@ export const SwitchMixin = superclass => class extends RtlMixin(FocusVisiblePoly
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('.d2l-switch-container');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-switch-container');
 		if (elem) elem.focus();
 	}
 

package/components/table/table-col-sort-button.js

@@ -71,7 +71,7 @@ export class TableColSortButton extends LitElement {
 	}
 
 	focus() {
-		const button = this.shadowRoot.querySelector('button');
+		const button = this.shadowRoot && this.shadowRoot.querySelector('button');
 		if (button) button.focus();
 	}
 

package/components/tabs/tabs.js

@@ -374,34 +374,37 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 	}
 
 	getTabListRect() {
+		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('.d2l-tabs-container-list').getBoundingClientRect();
 	}
 
 	_animateTabAddition(tabInfo) {
-		const tab = this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
+		const tab = this.shadowRoot
+			&& this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
 		return new Promise((resolve) => {
 			const handleTransitionEnd = (e) => {
 				if (e.propertyName !== 'max-width') return;
-				tab.removeEventListener('transitionend', handleTransitionEnd);
+				if (tab) tab.removeEventListener('transitionend', handleTransitionEnd);
 				resolve();
 			};
-			tab.addEventListener('transitionend', handleTransitionEnd);
+			if (tab) tab.addEventListener('transitionend', handleTransitionEnd);
 			tabInfo.state = '';
 			this.requestUpdate();
 		});
 	}
 
 	_animateTabRemoval(tabInfo) {
-		const tab = this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
+		const tab = this.shadowRoot &&
+			this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
 		return new Promise((resolve) => {
 			const handleTransitionEnd = (e) => {
 				if (e.propertyName !== 'max-width') return;
-				tab.removeEventListener('transitionend', handleTransitionEnd);
+				if (tab) tab.removeEventListener('transitionend', handleTransitionEnd);
 				this._tabInfos.splice(this._tabInfos.findIndex(info => info.id === tabInfo.id), 1);
 				this.requestUpdate();
 				resolve();
 			};
-			tab.addEventListener('transitionend', handleTransitionEnd);
+			if (tab) tab.addEventListener('transitionend', handleTransitionEnd);
 		});
 	}
 
@@ -488,7 +491,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 	}
 
 	async _focusSelected() {
-		const selectedTab = this.shadowRoot.querySelector('d2l-tab-internal[aria-selected="true"]');
+		const selectedTab = this.shadowRoot && this.shadowRoot.querySelector('d2l-tab-internal[aria-selected="true"]');
 		if (!selectedTab) return;
 
 		const selectedTabInfo = this._getTabInfo(selectedTab.controlsPanel);
@@ -517,6 +520,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 	}
 
 	_getPanel(id) {
+		if (!this.shadowRoot) return;
 		// use simple selector for slot (Edge)
 		const slot = this.shadowRoot.querySelector('.d2l-panels-container').querySelector('slot');
 		const panels = this._getPanels(slot);
@@ -702,7 +706,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		await this._scrollToPosition(newTranslationValue);
 		await this._updateScrollVisibility(newMeasures);
 
-		if (!isOverflowingNext) {
+		if (!isOverflowingNext && this.shadowRoot) {
 			this.shadowRoot.querySelector('.d2l-tabs-scroll-previous-container button').focus();
 		}
 
@@ -735,7 +739,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		await this._scrollToPosition(newTranslationValue);
 		await this._updateScrollVisibility(newMeasures);
 
-		if (!isOverflowingPrevious) {
+		if (!isOverflowingPrevious && this.shadowRoot) {
 			this.shadowRoot.querySelector('.d2l-tabs-scroll-next-container button').focus();
 		}
 
@@ -777,7 +781,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		}
 
 		this._translationValue = translationValue;
-		if (reduceMotion) return this.updateComplete;
+		if (!this.shadowRoot || reduceMotion) return this.updateComplete;
 
 		return new Promise((resolve) => {
 			const tabList = this.shadowRoot.querySelector('.d2l-tabs-container-list');
@@ -805,13 +809,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 			expandedPromise = this.updateComplete;
 		} else {
 			expandedPromise = new Promise((resolve) => {
-				const tabsContainer = this.shadowRoot.querySelector('.d2l-tabs-container');
+				const tabsContainer = this.shadowRoot && this.shadowRoot.querySelector('.d2l-tabs-container');
 				const handleTransitionEnd = (e) => {
 					if (e.propertyName !== 'max-width') return;
-					tabsContainer.removeEventListener('transitionend', handleTransitionEnd);
+					if (tabsContainer) tabsContainer.removeEventListener('transitionend', handleTransitionEnd);
 					resolve();
 				};
-				tabsContainer.addEventListener('transitionend', handleTransitionEnd);
+				if (tabsContainer) tabsContainer.addEventListener('transitionend', handleTransitionEnd);
 				this._scrollCollapsed = false;
 				this._maxWidth = measures.totalTabsWidth + 50;
 			});
@@ -828,7 +832,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 			if (!this._allowScrollPrevious) {
 				this._focusSelected();
 			} else {
-				this.shadowRoot.querySelector('.d2l-tabs-scroll-previous-container button').focus();
+				if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-tabs-scroll-previous-container button').focus();
 			}
 		}
 
@@ -838,6 +842,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 
 	_updateMeasures() {
 		let totalTabsWidth = 0;
+		if (!this.shadowRoot) return;
 		const tabs = [...this.shadowRoot.querySelectorAll('d2l-tab-internal')];
 
 		const tabRects = tabs.map((tab) => {
@@ -894,7 +899,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 			// don't animate the tabs list visibility if it's the inital render
 			if (reduceMotion || !this._initialized) {
 				this._state = 'hidden';
-			} else {
+			} else if (this.shadowRoot) {
 				const layout = this.shadowRoot.querySelector('.d2l-tabs-layout');
 				const handleTransitionEnd = (e) => {
 					if (e.propertyName !== 'max-height') return;

package/components/tooltip/tooltip.js

@@ -715,7 +715,7 @@ class Tooltip extends RtlMixin(LitElement) {
 	}
 
 	_getContent() {
-		return this.shadowRoot.querySelector('.d2l-tooltip-content');
+		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-tooltip-content');
 	}
 
 	_isAboveOrBelow() {

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/directives/animate/animate.js

@@ -1,6 +1,8 @@
-import { directive, PropertyPart } from 'lit-html';
+import { directive, PartType } from 'lit-html/directive.js';
 import { getComposedActiveElement, getNextFocusable } from '../../helpers/focus.js';
+import { AsyncDirective } from 'lit-html/async-directive.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
+import { noChange } from 'lit-html';
 
 const stateMap = new WeakMap();
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -10,15 +12,13 @@ const moveYValue = 20;
 
 class AnimationState {
 
-	constructor(propertyPart) {
-
-		if (!(propertyPart instanceof PropertyPart) || propertyPart.committer.name !== 'animate') {
-			throw new Error('animation directives must be used with "animate" property');
+	constructor(partInfo) {
+		if (!(partInfo.type === PartType.PROPERTY) || partInfo.name !== 'animate') {
+			throw new Error('animate directives must be used with "animate" property');
 		}
-
 		this.id = 0;
 		this.clone = null;
-		this.elem = propertyPart.committer.element;
+		this.elem = partInfo.element;
 		this.state = 'unknown';
 		this.styleAttr = null;
 		this.styleAttrUse = false;
@@ -289,20 +289,37 @@ class AnimationState {
 
 }
 
-async function helper(part, action, opts) {
-	let state = stateMap.get(part);
-	if (state === undefined) {
-		state = new AnimationState(part);
-		stateMap.set(part, state);
+class Hide extends AsyncDirective {
+	render() {
+		return noChange;
 	}
-	opts = opts || {};
-	if (action === 'show') {
-		state.show(opts);
-	} else if (action === 'hide') {
+	update(part, [opts]) {
+		opts = opts || {};
+		let state = stateMap.get(part.element);
+		if (state === undefined) {
+			state = new AnimationState(part);
+			stateMap.set(part.element, state);
+		}
 		state.hide(opts);
+		return this.render();
 	}
 }
 
-export const hide = directive((opts) => async(part) => helper(part, 'hide', opts));
+class Show extends AsyncDirective {
+	render() {
+		return noChange;
+	}
+	update(part, [opts]) {
+		opts = opts || {};
+		let state = stateMap.get(part.element);
+		if (state === undefined) {
+			state = new AnimationState(part);
+			stateMap.set(part.element, state);
+		}
+		state.show(opts);
+		return this.render();
+	}
+}
 
-export const show = directive((opts) => async(part) => helper(part, 'show', opts));
+export const hide = directive(Hide);
+export const show = directive(Show);

package/helpers/demo/announce-test.js

@@ -25,6 +25,7 @@ class AnnounceTest extends LitElement {
 	}
 
 	_handleAnnounce() {
+		if (!this.shadowRoot) return;
 		const value1 = this.shadowRoot.querySelector('#msg1').value;
 		if (value1.length > 0) announce(value1);
 		const value2 = this.shadowRoot.querySelector('#msg2').value;

package/mixins/arrow-keys-mixin.js

@@ -37,7 +37,9 @@ export const ArrowKeysMixin = superclass => class extends superclass {
 	}
 
 	async arrowKeysFocusablesProvider() {
-		return [...this.shadowRoot.querySelectorAll('.d2l-arrowkeys-focusable')];
+		return this.shadowRoot ?
+			[...this.shadowRoot.querySelectorAll('.d2l-arrowkeys-focusable')]
+			: [];
 	}
 
 	async _focus(elem) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.214.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",

package/templates/primary-secondary/primary-secondary.js

@@ -1014,6 +1014,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 	}
 
 	_computeContentBounds(contentRect) {
+		if (!this.shadowRoot) return;
 		const divider = this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider');
 		const desktopDividerSize = divider.offsetWidth;
 		const mobileDividerSize = divider.offsetHeight;
@@ -1057,7 +1058,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			} else {
 				if (this._isMobile) {
 					this._size = this._contentBounds.minHeight;
-				} else {
+				} else if (this.shadowRoot) {
 					const divider = this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider');
 					const desktopDividerSize = contentRect.width - divider.offsetWidth;
 					this._size = Math.max(desktopMinSize, desktopDividerSize * (1 / 3));