@brightspace-ui/core 2.110.1 → 2.111.1

package/components/inputs/input-time.js

@@ -16,6 +16,7 @@ import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const MIDNIGHT = new Date(2020, 0, 1, 0, 0, 0);
@@ -117,7 +118,7 @@ function initIntervals(size, enforceTimeIntervals) {
  * A component that consists of a text input field for typing a time and an attached dropdown for time selection. It displays the "value" if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the dropdown or entered in the text input.
  * @fires change - Dispatched when there is a change to selected time. `value` corresponds to the selected value and is formatted in ISO 8601 time format (`hh:mm:ss`).
  */
-class InputTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LitElement)))) {
+class InputTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(RtlMixin(LitElement))))) {
 
 	static get properties() {
 		return {

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

@@ -2,6 +2,7 @@ import { css, html, nothing } from 'lit';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 export const OVERFLOW_CLASS = 'd2l-overflow-container';
@@ -24,7 +25,7 @@ async function filterAsync(arr, callback) {
 	return results.filter(i => i !== fail);
 }
 
-export const OverflowGroupMixin = superclass => class extends LocalizeCoreElement(superclass) {
+export const OverflowGroupMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
 
 	static get properties() {
 		return {

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/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

@@ -11494,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",
@@ -11538,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",
@@ -11597,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"
         }
       ]
     },
@@ -11819,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"
         }
       ]
     },
@@ -11826,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/mixins/interactive/interactive-mixin.js

@@ -5,6 +5,7 @@ import { getNextFocusable } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../../components/offscreen/offscreen.js';
+import { RtlMixin } from '../rtl/rtl-mixin.js';
 
 const keyCodes = {
 	ENTER: 13,
@@ -18,7 +19,7 @@ export function isInteractiveDescendant(node) {
 	});
 }
 
-export const InteractiveMixin = superclass => class extends LocalizeCoreElement(superclass) {
+export const InteractiveMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
 
 	static get properties() {
 		return {

package/package.json

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