@brightspace-ui/core 2.110.0 → 2.110.1

package/components/selection/demo/demo-selection.js

@@ -1,7 +1,8 @@
 import { css, html, LitElement } from 'lit';
+import { PageableMixin } from '../../paging/pageable-mixin.js';
 import { SelectionMixin } from '../selection-mixin.js';
 
-class DemoSelection extends SelectionMixin(LitElement) {
+class DemoBase extends LitElement {
 	static get styles() {
 		return css`
 			:host {
@@ -15,4 +16,20 @@ class DemoSelection extends SelectionMixin(LitElement) {
 		`;
 	}
 }
+
+class DemoSelection extends SelectionMixin(DemoBase) {}
+
+class DemoPageable extends PageableMixin(DemoBase) {
+	_getItemByIndex() {
+		return null;
+	}
+	_getItemShowingCount() {
+		return 3;
+	}
+}
+
+class DemoSelectionPageable extends SelectionMixin(DemoPageable) {}
+
 customElements.define('d2l-demo-selection', DemoSelection);
+customElements.define('d2l-demo-pageable', DemoPageable);
+customElements.define('d2l-demo-selection-pageable', DemoSelectionPageable);

package/components/selection/demo/selection.html

@@ -8,6 +8,7 @@
 			import '../../demo/demo-page.js';
 			import '../../dropdown/dropdown-menu.js';
 			import '../../menu/menu.js';
+			import '../../paging/pager-load-more.js';
 			import '../selection-action.js';
 			import '../selection-action-dropdown.js';
 			import '../selection-action-menu-item.js';
@@ -93,6 +94,45 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Selection controls with pageable + selection</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-selection-pageable item-count="5">
+						<d2l-selection-controls select-all-pages-allowed>
+							<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+							<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+						</d2l-selection-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+						<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
+					</d2l-demo-selection-pageable>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Selection controls with pageable (no selection)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-pageable item-count="5">
+						<d2l-selection-controls>
+							<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+							<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+						</d2l-selection-controls>
+
+						<ul>
+							<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+							<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+							<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
+						</ul>
+						<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
+					</d2l-demo-pageable>
+				</template>
+			</d2l-demo-snippet>
 
 			<h2>No-sticky selection controls</h2>
 
@@ -120,17 +160,18 @@
 					<div class="d2l-selection-collections">
 						<div class="d2l-selection-collection">
 							Pick Your Toppings
-							<d2l-selection-controls selection-for="collection-1">
+							<d2l-selection-controls selection-for="collection-1" pageable-for="collection-1" select-all-pages-allowed>
 								<d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
 							</d2l-selection-controls>
 
-							<d2l-demo-selection id="collection-1">
+							<d2l-demo-selection-pageable id="collection-1" item-count="5">
 								<ul>
 									<li><d2l-selection-input key="let" label="Lettuce" selected></d2l-selection-input>Lettuce</li>
 									<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-demo-selection>
+								<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
+							</d2l-demo-selection-pageable>
 							<d2l-selection-action selection-for="collection-1" text="Save" requires-selection></d2l-selection-action>
 						</div>
 

package/components/selection/selection-controls.js

@@ -181,8 +181,8 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
 
 	_renderSelection() {
 		return html`
-			${!this._noSelectAll ? html`<d2l-selection-select-all></d2l-selection-select-all>` : nothing}
-			<d2l-selection-summary no-selection-text="${this._noSelectionText}"></d2l-selection-summary>
+			${this._provider && !this._noSelectAll ? html`<d2l-selection-select-all></d2l-selection-select-all>` : nothing}
+			<d2l-selection-summary no-selection-text="${ifDefined(this._noSelectionText)}"></d2l-selection-summary>
 			${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : nothing}
 		`;
 	}

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

@@ -44,7 +44,7 @@ class SelectAll extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(Li
 	}
 
 	render() {
-		if (this._provider && this._provider.selectionSingle) return;
+		if (!this._provider || this._provider.selectionSingle) return;
 
 		const summary = (this.selectionInfo.state === SelectionInfo.states.none ? this.localize('components.selection.select-all')
 			: this.localize('components.selection.selected', 'count', this.selectionInfo.keys.length));

package/components/selection/selection-summary.js

@@ -50,7 +50,10 @@ class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 	}
 
 	_updateSelectSummary() {
-		if (this._provider && this._provider.selectionSingle) return;
+		if (this._provider?.selectionSingle) {
+			this._summary = null;
+			return;
+		}
 
 		let count;
 		if (this._provider && this._provider.selectionCountOverride !== undefined) {
@@ -74,7 +77,7 @@ class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 				}
 			}
 
-			count = this.selectionInfo.state === SelectionInfo.states.allPages ?
+			count = (this._provider && this.selectionInfo.state === SelectionInfo.states.allPages) ?
 				this._provider.itemCount : this.selectionInfo.keys.length;
 
 			if (this.selectionInfo.state === SelectionInfo.states.none && this.noSelectionText) {

package/custom-elements.json

@@ -10262,6 +10262,68 @@
         }
       ]
     },
+    {
+      "name": "d2l-demo-pageable",
+      "path": "./components/selection/demo/demo-selection.js",
+      "attributes": [
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ]
+    },
+    {
+      "name": "d2l-demo-selection-pageable",
+      "path": "./components/selection/demo/demo-selection.js",
+      "attributes": [
+        {
+          "name": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "selectionSingle",
+          "attribute": "selection-single",
+          "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ]
+    },
     {
       "name": "d2l-selection-action-dropdown",
       "path": "./components/selection/selection-action-dropdown.js",
@@ -10971,7 +11033,21 @@
           "name": "item-count",
           "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
           "type": "number"
-        },
+        }
+      ],
+      "properties": [
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        }
+      ]
+    },
+    {
+      "name": "d2l-test-selection-pageable",
+      "path": "./components/selection/test/selection-component.js",
+      "attributes": [
         {
           "name": "selection-count-override",
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
@@ -10982,15 +11058,14 @@
           "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
           "type": "boolean",
           "default": "false"
-        }
-      ],
-      "properties": [
+        },
         {
-          "name": "itemCount",
-          "attribute": "item-count",
+          "name": "item-count",
           "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
           "type": "number"
-        },
+        }
+      ],
+      "properties": [
         {
           "name": "selectionCountOverride",
           "attribute": "selection-count-override",
@@ -11003,6 +11078,12 @@
           "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
         }
       ]
     },

package/package.json

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