@brightspace-ui/core 2.108.0 → 2.110.0

package/components/html-block/html-block.js

@@ -134,7 +134,6 @@ const getRenderers = async() => {
 
 /**
  * A component for displaying user-authored HTML.
- * @slot - Provide your user-authored HTML
  */
 class HtmlBlock extends LitElement {
 
@@ -194,7 +193,6 @@ class HtmlBlock extends LitElement {
 		this.html = '';
 		this.inline = false;
 		this.noDeferredRendering = false;
-		this._hasSlottedContent = false;
 
 		this._contextObserverControllerResolve = undefined;
 		this._contextObserverControllerInitialized = new Promise(resolve => {
@@ -210,33 +208,14 @@ class HtmlBlock extends LitElement {
 		});
 	}
 
-	connectedCallback() {
-		super.connectedCallback();
-
-		if (!this._contentObserver || this.noDeferredRendering) return;
-
-		const slot = this.shadowRoot.querySelector('slot');
-		if (slot) {
-			const slottedNodes = slot.assignedNodes({ flatten: true });
-			this._hasSlottedContent = this._hasSlottedElements(slottedNodes);
-
-			slottedNodes.forEach(
-				node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
-			);
-		}
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if (this._contentObserver) this._contentObserver.disconnect();
-	}
-
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this._updateContextKeys();
 	}
 
 	render() {
+		this._validateHtml();
+
 		const renderContainerClasses = {
 			'd2l-html-block-rendered': true,
 			'd2l-html-block-compact': this.compact
@@ -244,17 +223,17 @@ class HtmlBlock extends LitElement {
 
 		return html`
 			<div class="${classMap(renderContainerClasses)}"></div>
-			<slot @slotchange="${this._handleSlotChange}"></slot>
+			${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
 		`;
 	}
 
 	async updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this._hasSlottedContent) {
+		if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
 			await this._updateRenderContainer();
 		}
 		if (await this._contextChanged()) {
-			if (this._hasSlottedContent) this._render();
+			if (this.noDeferredRendering) this._renderInline();
 			else if (this.html !== undefined && this.html !== null) {
 				await this._updateRenderContainer();
 			}
@@ -279,22 +258,8 @@ class HtmlBlock extends LitElement {
 	}
 
 	async _handleSlotChange(e) {
-		if (!e.target || !this.shadowRoot) return;
-		const slot = this.shadowRoot.querySelector('slot');
-		const slottedNodes = slot.assignedNodes({ flatten: true });
-
-		if (!this.html && this._hasSlottedElements(slottedNodes)) {
-			this._hasSlottedContent = true;
-			await this._render(e.target);
-		} else {
-			this._hasSlottedContent = false;
-		}
-	}
-
-	_hasSlottedElements(slottedNodes) {
-		if (!slottedNodes || slottedNodes.length === 0) return false;
-		if (slottedNodes.filter(node => node.nodeType === Node.ELEMENT_NODE || node.textContent).length === 0) return false;
-		return true;
+		if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
+		await this._renderInline(e.target);
 	}
 
 	async _processRenderers(elem) {
@@ -316,11 +281,6 @@ class HtmlBlock extends LitElement {
 		}
 	}
 
-	async _render(slot) {
-		if (this.noDeferredRendering) await this._renderInline(slot);
-		else this._stamp(slot);
-	}
-
 	async _renderInline(slot) {
 		if (!this.shadowRoot) return;
 		if (!slot) slot = this.shadowRoot.querySelector('slot');
@@ -332,32 +292,6 @@ class HtmlBlock extends LitElement {
 		await this._processRenderers(noDeferredRenderingContainer);
 	}
 
-	_stamp(slot) {
-		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
-
-		const stampHTML = async nodes => {
-			renderContainer.innerHTML = '';
-			if (!nodes || nodes.length === 0) return;
-
-			// Nodes must be cloned into the render container before processing, as
-			// some renderers require connected nodes (e.g. MathJax).
-			nodes.forEach(node => renderContainer.appendChild(node.cloneNode(true)));
-			await this._processRenderers(renderContainer);
-		};
-
-		if (this._contentObserver) this._contentObserver.disconnect();
-
-		if (!slot) slot = this.shadowRoot.querySelector('slot');
-		const slottedNodes = slot.assignedNodes({ flatten: true });
-
-		this._contentObserver = new MutationObserver(() => stampHTML(slottedNodes));
-		slottedNodes.forEach(
-			node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
-		);
-
-		stampHTML(slottedNodes);
-	}
-
 	_updateContextKeys() {
 		if (!this._contextObserverController) return;
 		if (!this._contextKeys) this._contextKeys = new Map();
@@ -373,6 +307,17 @@ class HtmlBlock extends LitElement {
 		await this._processRenderers(renderContainer);
 	}
 
+	_validateHtml() {
+		if (this._validatingHtmlTimeout) clearTimeout(this._validatingHtmlTimeout);
+
+		this._validatingHtmlTimeout = setTimeout(() => {
+			this._validatingHtmlTimeout = undefined;
+			if (this.html && this.noDeferredRendering) {
+				throw new Error('<d2l-html-block>: "html" attribute is not supported with "no-deferred-rendering".');
+			}
+		}, 3000);
+	}
+
 }
 
 customElements.define('d2l-html-block', HtmlBlock);

package/components/list/list.js

@@ -183,8 +183,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	}
 
 	_getItemByIndex(index) {
-		const items = this.getItems();
-		if (index > items.length - 1) return;
+		const items = this.getItems() || [];
 		return items[index];
 	}
 

package/components/paging/pageable-mixin.js

@@ -16,6 +16,7 @@ export const PageableMixin = superclass => class extends CollectionMixin(supercl
 		this._itemShowingCount = 0;
 		this._pageableSubscriberRegistry = new SubscriberRegistryController(this, 'pageable', {
 			onSubscribe: this._updatePageableSubscriber.bind(this),
+			onUnsubscribe: this._clearPageableSubscriber.bind(this),
 			updateSubscribers: this._updatePageableSubscribers.bind(this)
 		});
 	}
@@ -33,6 +34,10 @@ export const PageableMixin = superclass => class extends CollectionMixin(supercl
 		}
 	}
 
+	_clearPageableSubscriber(subscriber) {
+		subscriber._pageableInfo = null;
+	}
+
 	/* must be implemented by consumer */
 	_getItemByIndex(index) { } // eslint-disable-line no-unused-vars
 

package/components/paging/pageable-subscriber-mixin.js

@@ -16,7 +16,7 @@ export const PageableSubscriberMixin = superclass => class extends superclass {
 	constructor() {
 		super();
 
-		this._pageableInfo = { itemCount: null, itemShowingCount: 0 };
+		this._pageableInfo = null;
 		this._pageableEventSubscriber = new EventSubscriberController(this, 'pageable');
 		this._pageableIdSubscriber = new IdSubscriberController(this, 'pageable', { idPropertyName: 'pageableFor' });
 	}

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

@@ -86,7 +86,7 @@ class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(Li
 	}
 
 	render() {
-		if (!this.hasMore) return nothing;
+		if (!this.hasMore || !this._pageableInfo) return nothing;
 		const { itemCount, itemShowingCount } = this._pageableInfo;
 
 		return html`
@@ -101,7 +101,7 @@ class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(Li
 				${itemCount !== null ? html`
 					<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
 					<span class="separator"></span>
-					<span class="info">${this.localize('components.pager-load-more.info', { showingCount: formatNumber(itemShowingCount), totalCount: itemCount, totalCountFormatted: formatNumber(itemCount) })}</span>
+					<span class="info">${this.localize('components.pageable.info-with-total', { countFormatted: formatNumber(itemShowingCount), totalCount: itemCount, totalCountFormatted: formatNumber(itemCount) })}</span>
 				` : nothing}
 			`}
 		</button>

package/components/selection/selection-controls.js

@@ -4,8 +4,10 @@ import './selection-select-all-pages.js';
 import './selection-summary.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { PageableSubscriberMixin } from '../paging/pageable-subscriber-mixin.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
@@ -13,7 +15,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  * Controls for selection components (e.g. list, table-wrapper) containing select-all, etc.
  * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
  */
-export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeCoreElement(LitElement))) {
+export class SelectionControls extends PageableSubscriberMixin(SelectionObserverMixin(RtlMixin(LocalizeCoreElement(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -33,6 +35,7 @@ export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeC
 			 */
 			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
 			_hasActions: { state: true },
+			_noSelectionText: { state: true },
 			_scrolled: { type: Boolean, reflect: true }
 		};
 	}
@@ -147,6 +150,18 @@ export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeC
 		if (changedProperties.has('noSticky')) {
 			this._stickyObserverUpdate();
 		}
+		if (changedProperties.has('_pageableInfo')) {
+			this._noSelectionText = this._getNoSelectionText();
+		}
+	}
+
+	_getNoSelectionText() {
+		if (!this._pageableInfo) return null;
+		const { itemShowingCount: count, itemCount: totalCount } = this._pageableInfo;
+
+		return (totalCount === null || count === totalCount)
+			? this.localize('components.pageable.info', { count, countFormatted: formatNumber(count) })
+			: this.localize('components.pageable.info-with-total', { totalCount, countFormatted: formatNumber(count), totalCountFormatted: formatNumber(totalCount) });
 	}
 
 	_getSelectionControlsContainerClasses() {
@@ -166,12 +181,8 @@ export class SelectionControls extends SelectionObserverMixin(RtlMixin(LocalizeC
 
 	_renderSelection() {
 		return html`
-			<d2l-selection-select-all></d2l-selection-select-all>
-			<d2l-selection-summary
-				aria-hidden="true"
-				no-selection-text="${this.localize('components.selection.select-all')}"
-			>
-			</d2l-selection-summary>
+			${!this._noSelectAll ? html`<d2l-selection-select-all></d2l-selection-select-all>` : nothing}
+			<d2l-selection-summary no-selection-text="${this._noSelectionText}"></d2l-selection-summary>
 			${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : nothing}
 		`;
 	}

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

@@ -65,8 +65,8 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 			return a.fruit[this._sortField] - b.fruit[this._sortField];
 		});
 		return html`
-			<d2l-table-wrapper>
-				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}">
+			<d2l-table-wrapper item-count="500">
+				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}" select-all-pages-allowed>
 					<d2l-selection-action
 						text="Sticky controls"
 						icon="tier1:${this.stickyControls ? 'check' : 'close-default'}"
@@ -86,14 +86,16 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 							<th scope="col">Country</th>
 							${fruits.map(fruit => this._renderSortButton(fruit))}
 						</tr>
-						${[1, 2].map(() => html`
-							<tr>
-								<th scope="col" sticky></th>
-								${thText.map(text => html`<th scope="col">${text}</th>`)}
-							</tr>
-						`)}
 					</thead>
 					<tbody>
+						<tr class="d2l-table-header">
+							<th scope="col" sticky></th>
+							${thText.map(text => html`<th scope="col">${text}</th>`)}
+						</tr>
+						<tr header>
+							<th scope="col" sticky></th>
+							${thText.map(text => html`<th scope="col">${text}</th>`)}
+						</tr>
 						${sorted.map(row => html`
 							<tr ?selected="${row.selected}" data-name="${row.name}">
 								<th scope="row" sticky>

package/components/table/table-controls.js

@@ -1,6 +1,4 @@
-import '../selection/selection-select-all-pages.js';
-import '../selection/selection-summary.js';
-import { css, html, nothing } from 'lit';
+import { css } from 'lit';
 import { SelectionControls } from '../selection/selection-controls.js';
 
 /**
@@ -30,19 +28,13 @@ class TableControls extends SelectionControls {
 		`];
 	}
 
-	_getSelectionControlsLabel() {
-		return this.localize('components.table-controls.label');
+	constructor() {
+		super();
+		this._noSelectAll = true;
 	}
 
-	_renderSelection() {
-		return html`
-			<d2l-selection-summary
-				aria-hidden="true"
-				no-selection-text="${this.localize('components.selection.select-all')}"
-			>
-			</d2l-selection-summary>
-			${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : nothing}
-		`;
+	_getSelectionControlsLabel() {
+		return this.localize('components.table-controls.label');
 	}
 }
 

package/components/table/table-wrapper.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { PageableMixin } from '../paging/pageable-mixin.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
@@ -166,7 +167,7 @@ export const tableStyles = css`
  * @slot - Content to wrap
  * @slot controls - Slot for `d2l-table-controls` to be rendered above the table
  */
-export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
+export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -282,6 +283,8 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 	}
 
 	updated(changedProperties) {
+		super.updated(changedProperties);
+
 		// hack: grades/groups/outcomes in the LE use this CSS class on the
 		// body to apply special CSS to the page when tables are sticky
 		// Ideally they should be adding this class to the body.
@@ -335,6 +338,18 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 		});
 	}
 
+	_getItemByIndex(index) {
+		return this._getItems()[index];
+	}
+
+	_getItems() {
+		return this._table?.querySelectorAll(':not(thead) > tr:not(.d2l-table-header):not([header])') || [];
+	}
+
+	_getItemShowingCount() {
+		return this._getItems().length;
+	}
+
 	async _handleControlsChange() {
 		if (this._controls) {
 			await this._controls.updateComplete;
@@ -404,6 +419,7 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 	async _handleTableChange() {
 		await new Promise(resolve => requestAnimationFrame(resolve));
 
+		this._updateItemShowingCount();
 		this._applyClassNames();
 		this._updateStickyTops();
 	}

package/custom-elements.json

@@ -4380,12 +4380,6 @@
           "type": "Boolean",
           "default": "false"
         }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "Provide your user-authored HTML"
-        }
       ]
     },
     {
@@ -8038,6 +8032,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selection-for",
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
@@ -8066,6 +8065,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageableFor",
+          "attribute": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -10590,6 +10595,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selection-for",
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
@@ -10618,6 +10628,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageableFor",
+          "attribute": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -10947,6 +10963,49 @@
         }
       ]
     },
+    {
+      "name": "d2l-test-pageable",
+      "path": "./components/selection/test/selection-component.js",
+      "attributes": [
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
+        {
+          "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"
+        }
+      ],
+      "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": "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": "d2l-test-skeleton-box",
       "path": "./components/skeleton/demo/skeleton-test-box.js",
@@ -11380,6 +11439,11 @@
           "type": "'default'|'light'",
           "default": "\"default\""
         },
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
         {
           "name": "selection-count-override",
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
@@ -11424,6 +11488,12 @@
           "type": "'default'|'light'",
           "default": "\"default\""
         },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
         {
           "name": "selectionCountOverride",
           "attribute": "selection-count-override",
@@ -11513,6 +11583,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selection-for",
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
@@ -11541,6 +11616,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pageableFor",
+          "attribute": "pageable-for",
+          "description": "Id of the `PageableMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -11590,6 +11671,11 @@
           "type": "'default'|'light'",
           "default": "\"default\""
         },
+        {
+          "name": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
         {
           "name": "selection-count-override",
           "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
@@ -11624,6 +11710,12 @@
           "type": "'default'|'light'",
           "default": "\"default\""
         },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
+          "type": "number"
+        },
         {
           "name": "selectionCountOverride",
           "attribute": "selection-count-override",

package/lang/ar.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "عنصر نائب",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.pager-load-more.action": "تحميل {count} إضافي",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} من أصل {totalCountFormatted} من العناصر} other {{showingCount} من أصل {totalCountFormatted} من العناصر}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} من أصل {totalCountFormatted} من العناصر} other {{countFormatted} من أصل {totalCountFormatted} من العناصر}}",
 	"components.pager-load-more.status-loading": "تحميل المزيد من المواد",
 	"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
 	"components.selection.select-all": "تحديد الكل",

package/lang/cy.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Eitem Dalfan",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
 	"components.pager-load-more.action": "Lwytho {count} Arall",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} o {totalCountFormatted} eitem} other {{showingCount} o {totalCountFormatted} eitem}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} o {totalCountFormatted} eitem} other {{countFormatted} o {totalCountFormatted} eitem}}",
 	"components.pager-load-more.status-loading": "Llwytho rhagor o eitemau",
 	"components.selection.action-hint": "Dewiswch eitem i gyflawni'r weithred hon.",
 	"components.selection.select-all": "Dewis y Cyfan",

package/lang/da.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Pladsholder-element",
 	"components.overflow-group.moreActions": "Flere handlinger",
 	"components.pager-load-more.action": "Indlæs {count} mere",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} af {totalCountFormatted} element} other {{showingCount} af {totalCountFormatted} elementer}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} af {totalCountFormatted} element} other {{countFormatted} af {totalCountFormatted} elementer}}",
 	"components.pager-load-more.status-loading": "Indlæser flere elementer",
 	"components.selection.action-hint": "Vælg et element for at udføre denne handling.",
 	"components.selection.select-all": "Vælg alle",

package/lang/de.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Platzhalterelement",
 	"components.overflow-group.moreActions": "Weitere Aktionen",
 	"components.pager-load-more.action": "{count} weitere laden",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} von {totalCountFormatted} Element} other {{showingCount} von {totalCountFormatted} Elementen}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} von {totalCountFormatted} Element} other {{countFormatted} von {totalCountFormatted} Elementen}}",
 	"components.pager-load-more.status-loading": "Weitere Elemente werden geladen",
 	"components.selection.action-hint": "Wählen Sie ein Element aus, um diese Aktion auszuführen.",
 	"components.selection.select-all": "Alle auswählen",

package/lang/en-gb.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
 	"components.pager-load-more.action": "Load {count} More",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} of {totalCountFormatted} item} other {{countFormatted} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Select an item to perform this action.",
 	"components.selection.select-all": "Select All",

package/lang/en.js

@@ -94,7 +94,8 @@ export default {
 	"components.object-property-list.item-placeholder-text": "Placeholder Item",
 	"components.overflow-group.moreActions": "More Actions",
 	"components.pager-load-more.action": "Load {count} More",
-	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
+	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} items}}",
+	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} of {totalCountFormatted} item} other {{countFormatted} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Select an item to perform this action.",
 	"components.selection.select-all": "Select All",