@brightspace-ui/core 2.112.1 → 2.112.3

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

@@ -2,11 +2,12 @@ import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
 import { css, html, nothing } from 'lit';
 import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const dragIntervalDelay = 100;
 const dragHoverDropTime = 1000;
 
-export const ListItemExpandCollapseMixin = superclass => class extends superclass {
+export const ListItemExpandCollapseMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	static get properties() {
 		return {
@@ -127,6 +128,7 @@ export const ListItemExpandCollapseMixin = superclass => class extends superclas
 		}
 		return html`
 			<d2l-button-icon
+				class="d2l-skeletize"
 				icon="${this.expanded ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small' }"
 				aria-expanded="${this.expanded ? 'true' : 'false'}"
 				text="${this.label}"

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

@@ -7815,12 +7815,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -7858,6 +7852,12 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelled-by",
           "description": "The id of element that provides the label for this element",
@@ -7921,13 +7921,6 @@
         {
           "name": "selectionInfo"
         },
-        {
-          "name": "skeleton",
-          "attribute": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -7972,6 +7965,13 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""
@@ -8149,12 +8149,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -8192,6 +8186,12 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelled-by",
           "description": "The id of element that provides the label for this element",
@@ -8262,13 +8262,6 @@
         {
           "name": "selectionInfo"
         },
-        {
-          "name": "skeleton",
-          "attribute": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -8313,6 +8306,13 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""
@@ -8623,12 +8623,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -8666,6 +8660,12 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelled-by",
           "description": "The id of element that provides the label for this element",
@@ -8741,13 +8741,6 @@
         {
           "name": "selectionInfo"
         },
-        {
-          "name": "skeleton",
-          "attribute": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -8792,6 +8785,13 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""

package/package.json

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