@brightspace-ui/core 2.110.0 → 2.111.0

package/components/paging/pager-load-more.js

@@ -10,6 +10,7 @@ import { labelStyles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { PageableSubscriberMixin } from './pageable-subscriber-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const nativeFocus = document.createElement('div').focus;
 
@@ -17,7 +18,7 @@ const nativeFocus = document.createElement('div').focus;
  *  A pager component for load-more paging.
  * @fires d2l-pager-load-more - Dispatched when the user clicks the load-more button. Consumers must call the provided "complete" method once items have been loaded.
  */
-class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
+class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))) {
 
 	static get properties() {
 		return {

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/components/table/README.md

@@ -292,6 +292,10 @@ If your table supports row selection, apply the `selected` attribute to `<tr>` r
 </tr>
 ```
 
+## Pageable Tables
+
+Load-More paging functionality can be implemented in tables by placing a `d2l-pager-load-more` in `d2l-table-wrapper`'s `pager` slot. The consumer must handle the `d2l-pager-load-more` event by loading more items, updating the pager state, and signalling completion by calling `complete()` on the event detail. Focus will be automatically moved on the first new item once complete. See [Paging](../../components/paging) for more details.
+
 ## Table Controls [d2l-table-controls]
 
 The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `controls` slot to provide a selection summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.

package/components/table/demo/table-test.js

@@ -4,14 +4,16 @@ import '../../dropdown/dropdown-button-subtle.js';
 import '../../dropdown/dropdown-menu.js';
 import '../../menu/menu.js';
 import '../../menu/menu-item.js';
+import '../../paging/pager-load-more.js';
 import '../../selection/selection-action.js';
 import '../../selection/selection-action-dropdown.js';
 import '../../selection/selection-action-menu-item.js';
 import '../../selection/selection-input.js';
 
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { tableStyles, TableWrapper } from '../table-wrapper.js';
 import { DemoPassthroughMixin } from '../../demo/demo-passthrough-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 
 const fruits = ['Apples', 'Oranges', 'Bananas'];
@@ -33,11 +35,12 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 
 	static get properties() {
 		return {
+			paging: { type: Boolean, reflect: true },
 			stickyControls: { attribute: 'sticky-controls', type: Boolean, reflect: true },
 			visibleBackground: { attribute: 'visible-background', type: Boolean, reflect: true },
 			_data: { state: true },
-			_sortField: { attribute: false, type: String },
-			_sortDesc: { attribute: false, type: Boolean }
+			_sortField: { state: true },
+			_sortDesc: { state: true }
 		};
 	}
 
@@ -54,7 +57,13 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 
 	constructor() {
 		super();
+
+		this.paging = false;
+		this.stickyControls = false;
+		this.visibleBackground = false;
 		this._data = data();
+		this._sortField = undefined;
+		this._sortDesc = false;
 	}
 
 	render() {
@@ -65,7 +74,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 			return a.fruit[this._sortField] - b.fruit[this._sortField];
 		});
 		return html`
-			<d2l-table-wrapper item-count="500">
+			<d2l-table-wrapper item-count="${ifDefined(this.paging ? 500 : undefined)}">
 				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}" select-all-pages-allowed>
 					<d2l-selection-action
 						text="Sticky controls"
@@ -112,10 +121,24 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 						`)}
 					</tbody>
 				</table>
+				${this.paging ? html`<d2l-pager-load-more slot="pager"
+					has-more
+					page-size="3"
+					@d2l-pager-load-more="${this._handlePagerLoadMore}"
+				></d2l-pager-load-more>` : nothing}
 			</d2l-table-wrapper>
 		`;
 	}
 
+	_handlePagerLoadMore(e) {
+		const startIndex = this._data.length + 1;
+		for (let i = 0; i < e.target.pageSize; i++) {
+			this._data.push({ name: `Country ${startIndex + i}`, fruit: { 'apples': 8534, 'oranges': 1325, 'bananas': 78382756 }, selected: false });
+		}
+		this.requestUpdate();
+		e.detail.complete();
+	}
+
 	_handleSort(e) {
 		const field = e.target.innerText.toLowerCase();
 		const desc = e.target.hasAttribute('desc');

package/components/table/demo/table.html

@@ -41,6 +41,13 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Default, Paging</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table type="default" sticky-controls paging></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Default, Visible controls background</h2>
 			<d2l-demo-snippet>
 				<template>

package/components/table/table-wrapper.js

@@ -166,6 +166,7 @@ export const tableStyles = css`
  * Wraps a native <table> element, providing styling and scroll buttons for overflow.
  * @slot - Content to wrap
  * @slot controls - Slot for `d2l-table-controls` to be rendered above the table
+ * @slot pager - Slot for `d2l-pager-load-more` to be rendered below the table
  */
 export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitElement))) {
 
@@ -246,6 +247,9 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 				top: calc(-7px - var(--d2l-table-border-radius)); /* 6px for the d2l-table-controls margin-bottom, 1px overlap to fix zoom issues */
 				width: 100%;
 			}
+			slot[name="pager"]::slotted(*) {
+				margin-top: 12px;
+			}
 		`;
 	}
 
@@ -279,6 +283,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 			<slot name="controls" @slotchange="${this._handleControlsSlotChange}"></slot>
 			${this.stickyHeaders && this._controlsScrolled ? html`<div class="d2l-sticky-headers-backdrop"></div>` : nothing}
 			${this.stickyHeaders ? slot : html`<d2l-scroll-wrapper>${slot}</d2l-scroll-wrapper>`}
+			${this._renderPagerContainer()}
 		`;
 	}
 

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"
         }
       ]
     },
@@ -11413,13 +11494,20 @@
       "name": "d2l-test-table",
       "path": "./components/table/demo/table-test.js",
       "attributes": [
+        {
+          "name": "paging",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "sticky-controls",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "visible-background",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "no-column-border",
@@ -11457,15 +11545,23 @@
         }
       ],
       "properties": [
+        {
+          "name": "paging",
+          "attribute": "paging",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "stickyControls",
           "attribute": "sticky-controls",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "visibleBackground",
           "attribute": "visible-background",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "noColumnBorder",
@@ -11516,6 +11612,10 @@
         {
           "name": "controls",
           "description": "Slot for `d2l-table-controls` to be rendered above the table"
+        },
+        {
+          "name": "pager",
+          "description": "Slot for `d2l-pager-load-more` to be rendered below the table"
         }
       ]
     },
@@ -11738,6 +11838,10 @@
         {
           "name": "controls",
           "description": "Slot for `d2l-table-controls` to be rendered above the table"
+        },
+        {
+          "name": "pager",
+          "description": "Slot for `d2l-pager-load-more` to be rendered below the table"
         }
       ]
     },
@@ -11745,6 +11849,10 @@
       "name": "d2l-test-table-controls-visual-diff",
       "path": "./components/table/test/table-test-controls-visual-diff.js"
     },
+    {
+      "name": "d2l-test-table-paging-visual-diff",
+      "path": "./components/table/test/table-test-paging-visual-diff.js"
+    },
     {
       "name": "d2l-test-table-sticky-visual-diff",
       "path": "./components/table/test/table-test-sticky-visual-diff.js"

package/package.json

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