@brightspace-ui/core 2.112.2 → 2.112.4

package/components/object-property-list/object-property-list.js

@@ -8,6 +8,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 /**
  * A dot-separated list of object properties.
  * @slot - Items of the type d2l-object-property-list-item* to be added to the container
+ * @slot status - Slot for a single `d2l-status-indicator` to be rendered before the list
  */
 class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement)) {
 	static get properties() {

package/components/offscreen/offscreen.js

@@ -4,6 +4,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 export const offscreenStyles = css`
 	.d2l-offscreen {
 		height: 1px;
+		inset-inline-start: -10000px;
 		left: -10000px;
 		overflow: hidden;
 		position: absolute !important;
@@ -25,6 +26,7 @@ class Offscreen extends RtlMixin(LitElement) {
 		return css`
 			:host {
 				height: 1px;
+				inset-inline-start: -10000px;
 				left: -10000px;
 				overflow: hidden;
 				position: absolute !important;

package/components/offscreen/offscreen.scss

@@ -3,6 +3,7 @@
 	$offset: -10000px;
 
 	position: absolute !important;
+	inset-inline-start: $offset;
 	left: $offset;
 	overflow: hidden;
 	width: 1px;

package/components/paging/pageable-mixin.js

@@ -56,12 +56,13 @@ export const PageableMixin = superclass => class extends CollectionMixin(supercl
 		this._itemShowingCount = this._getItemShowingCount();
 	}
 
-	_updatePageableSubscriber(subscriber) {
+	_updatePageableSubscriber(subscriber, doUpdate = true) {
+		if (doUpdate) this._updateItemShowingCount();
 		subscriber._pageableInfo = { itemShowingCount: this._itemShowingCount, itemCount: this.itemCount };
 	}
 
 	_updatePageableSubscribers(subscribers) {
-		subscribers.forEach(subscriber => this._updatePageableSubscriber(subscriber));
+		subscribers.forEach(subscriber => this._updatePageableSubscriber(subscriber, false));
 	}
 
 };

package/components/selection/demo/selection.html

@@ -170,8 +170,8 @@
 									<li><d2l-selection-input key="tom" label="Tomato"></d2l-selection-input>Tomato</li>
 									<li><d2l-selection-input key="onion" label="Onion"></d2l-selection-input>Onion</li>
 								</ul>
-								<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
 							</d2l-demo-selection-pageable>
+							<d2l-pager-load-more has-more page-size="1" pageable-for="collection-1"></d2l-pager-load-more>
 							<d2l-selection-action selection-for="collection-1" text="Save" requires-selection></d2l-selection-action>
 						</div>
 

package/controllers/subscriber/subscriberControllers.js

@@ -9,11 +9,39 @@ class BaseController {
 		this._name = name;
 		this._options = options;
 		this._eventName = `d2l-subscribe-${this._name}`;
-		this._subscriptionComplete = Promise.resolve();
 	}
 }
 
 class BaseSubscriber extends BaseController {
+	constructor() {
+		super(...arguments);
+
+		this._subscriptionComplete = Promise.resolve();
+		this._timeouts = new Set();
+	}
+
+	hostDisconnected() {
+		this._timeouts.forEach(timeoutId => clearTimeout(timeoutId));
+	}
+
+	_keepTrying(callback, interval, maxTime, errorPayload, elapsedTime = 0) {
+		const response = callback();
+
+		if (response) return response;
+		if (elapsedTime >= maxTime) {
+			if (this._options.onError) this._options.onError(errorPayload);
+			return response;
+		}
+
+		return new Promise(resolve => {
+			const timeoutId = setTimeout(async() => {
+				this._timeouts.delete(timeoutId);
+				resolve(await this._keepTrying(callback, interval, maxTime, errorPayload, elapsedTime + interval));
+			}, interval);
+			this._timeouts.add(timeoutId);
+		});
+	}
+
 	_subscribe(target = this._host, targetLabel) {
 		const isBroadcast = target === this._host;
 
@@ -25,10 +53,7 @@ class BaseSubscriber extends BaseController {
 		target.dispatchEvent(evt);
 
 		const { registry, registryController } = evt.detail;
-		if (!registry) {
-			if (this._options.onError) this._options.onError();
-			return;
-		}
+		if (!registry) return false;
 
 		if (targetLabel) {
 			this._registries.set(targetLabel, registry);
@@ -39,6 +64,7 @@ class BaseSubscriber extends BaseController {
 		}
 
 		if (this._options.onSubscribe) this._options.onSubscribe(registry);
+		return true;
 	}
 }
 
@@ -111,16 +137,11 @@ export class EventSubscriberController extends BaseSubscriber {
 	}
 
 	hostConnected() {
-		// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
-		this._subscriptionComplete = new Promise(resolve => {
-			requestAnimationFrame(() => {
-				this._subscribe();
-				resolve();
-			});
-		});
+		this._subscriptionComplete = this._keepTrying(() => this._subscribe(), 40, 400);
 	}
 
 	hostDisconnected() {
+		super.hostDisconnected();
 		if (this._registryController) this._registryController.unsubscribe(this._host);
 	}
 
@@ -135,7 +156,6 @@ export class IdSubscriberController extends BaseSubscriber {
 		this._idPropertyValue = this._idPropertyName ? this._host[this._idPropertyName] : undefined;
 		this._registries = new Map();
 		this._registryControllers = new Map();
-		this._timeouts = new Set();
 	}
 
 	get registries() {
@@ -143,8 +163,8 @@ export class IdSubscriberController extends BaseSubscriber {
 	}
 
 	hostDisconnected() {
+		super.hostDisconnected();
 		if (this._registryObserver) this._registryObserver.disconnect();
-		this._timeouts.forEach(timeoutId => clearTimeout(timeoutId));
 		this._registryControllers.forEach(controller => {
 			controller.unsubscribe(this._host);
 		});
@@ -182,33 +202,25 @@ export class IdSubscriberController extends BaseSubscriber {
 
 		registryIds = registryIds.trim().split(' ');
 		registryIds.forEach(registryId => {
-			this._updateRegistry(registryId, 0);
+			this._keepTrying(() => this._updateRegistry(registryId), 100, 3000, registryId);
 		});
 	}
 
-	_updateRegistry(registryId, elapsedTime) {
-		let registryComponent = this._host.getRootNode().querySelector(`#${cssEscape(registryId)}`);
-		if (!registryComponent && this._options.onError) {
-			if (elapsedTime < 3000) {
-				const timeoutId = setTimeout(() => {
-					this._timeouts.delete(timeoutId);
-					this._updateRegistry(registryId, elapsedTime + 100);
-				}, 100);
-				this._timeouts.add(timeoutId);
-			} else {
-				this._options.onError(registryId);
-			}
-		}
+	_updateRegistry(registryId) {
+		const registryComponent = this._host.getRootNode().querySelector(`#${cssEscape(registryId)}`) || undefined;
 
-		registryComponent = registryComponent || undefined;
-		if (this._registries.get(registryId) === registryComponent) return;
+		if (this._registries.get(registryId) === registryComponent) return registryComponent;
 
-		if (registryComponent) this._subscribe(registryComponent, registryId);
-		else {
+		if (registryComponent) {
+			const success = this._subscribe(registryComponent, registryId);
+			if (!success && this._options.onError) this._options.onError(registryId);
+		} else {
 			this._registries.delete(registryId);
 			this._registryControllers.delete(registryId);
 			if (this._options.onUnsubscribe) this._options.onUnsubscribe(registryId);
 		}
+
+		return registryComponent;
 	}
 
 }

package/custom-elements.json

@@ -9962,6 +9962,10 @@
         {
           "name": "",
           "description": "Items of the type d2l-object-property-list-item* to be added to the container"
+        },
+        {
+          "name": "status",
+          "description": "Slot for a single `d2l-status-indicator` to be rendered before the list"
         }
       ]
     },

package/package.json

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