@brightspace-ui/core 3.162.4 → 3.163.0

package/components/scroll-wrapper/demo/scroll-wrapper-test.js

@@ -1,8 +1,9 @@
 import '../scroll-wrapper.js';
 import { css, html, LitElement } from 'lit';
+import { LocalizeCoreElement } from '../../../helpers/localize-core-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-class TestScrollWrapper extends LitElement {
+class TestScrollWrapper extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
@@ -47,9 +48,7 @@ class TestScrollWrapper extends LitElement {
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		if (this.scroll !== 0) {
-			requestAnimationFrame(() => this.shadowRoot.querySelector('d2l-scroll-wrapper').scrollDistance(this.scroll, false));
-		}
+		this.scrollDistance();
 		if (this.splitScrollers) {
 			this._customScrollers = { primary: this.shadowRoot.querySelector('.primary'), secondary: this.shadowRoot.querySelectorAll('.secondary') };
 		}
@@ -84,9 +83,26 @@ class TestScrollWrapper extends LitElement {
 		`;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('localize')) this.scrollDistance();
+	}
+
 	focus() {
 		if (this.shadowRoot) this.shadowRoot.querySelector('d2l-scroll-wrapper')._container.focus();
 	}
 
+	async scrollDistance() {
+		const scrollDir = document.documentElement.getAttribute('dir');
+		if (this._dir === scrollDir) return;
+		this._dir = scrollDir;
+
+		if (this.scroll !== 0) {
+			const wrapper = this.shadowRoot.querySelector('d2l-scroll-wrapper');
+			await wrapper.updateComplete;
+			requestAnimationFrame(() => wrapper.scrollDistance(this.scroll, false));
+		}
+	}
+
 }
 customElements.define('d2l-test-scroll-wrapper', TestScrollWrapper);

package/components/scroll-wrapper/demo/scroll-wrapper.html

@@ -24,7 +24,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<div style="max-width: 700px;">
-						<d2l-test-scroll-wrapper width="1000"></d2l-test-scroll-wrapper>
+						<d2l-test-scroll-wrapper width="1000" scroll="100"></d2l-test-scroll-wrapper>
 					</div>
 				</template>
 			</d2l-demo-snippet>

package/components/scroll-wrapper/scroll-wrapper.js

@@ -4,6 +4,7 @@ import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 export const printMediaQueryOnlyFlag = getFlag('GAUD-8263-scroll-wrapper-media-print', false);
@@ -43,7 +44,7 @@ function getStyleSheetInsertionPoint(elem) {
  * Wraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.
  * @slot - User provided content to wrap
  */
-class ScrollWrapper extends LitElement {
+class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
@@ -224,13 +225,15 @@ class ScrollWrapper extends LitElement {
 			'd2l-scroll-wrapper-actions': true,
 			'print-media-query-only': printMediaQueryOnlyFlag // remove when cleaning up GAUD-8263-scroll-wrapper-media-print
 		};
-
+		const isRtl = document.documentElement.getAttribute('dir') === 'rtl';
+		const leftScrollLabel = this.localize('components.scroll-wrapper.scroll-left');
+		const rightScrollLabel = this.localize('components.scroll-wrapper.scroll-right');
 		const actions = !this.hideActions ? html`
 			<div class="${classMap(actionsClasses)}">
-				<div class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-left vdiff-target" @click="${this._scrollLeft}">
+				<div role="button" aria-label="${isRtl ? rightScrollLabel : leftScrollLabel}" class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-left vdiff-target" @click="${this._scrollLeft}">
 					<d2l-icon icon="tier1:chevron-left"></d2l-icon>
 				</div>
-				<div class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-right vdiff-target" @click="${this._scrollRight}">
+				<div role="button" aria-label="${isRtl ? leftScrollLabel : rightScrollLabel}" class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-right vdiff-target" @click="${this._scrollRight}">
 					<d2l-icon icon="tier1:chevron-right"></d2l-icon>
 				</div>
 			</div>` : null;

package/components/table/table-wrapper.js

@@ -628,6 +628,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 	}
 
 	_syncColumnWidths() {
+		if (!this._table) return;
 		const head = this._table.querySelector('thead');
 		const body = this._table.querySelector('tbody');
 

package/lang/ar.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "تحميل المزيد",
 	"components.pager-load-more.action-with-page-size": "تحميل {count} إضافي",
 	"components.pager-load-more.status-loading": "تحميل المزيد من المواد",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {يتم التعطيل عند تحديد أكثر من {countFormatted} عنصر}

package/lang/cy.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Llwytho Mwy",
 	"components.pager-load-more.action-with-page-size": "Lwytho {count} Arall",
 	"components.pager-load-more.status-loading": "Llwytho rhagor o eitemau",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Wedi’i analluogi pan fydd mwy nag {countFormatted} eitem yn cael ei ddewis}

package/lang/da.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Indlæs flere",
 	"components.pager-load-more.action-with-page-size": "Indlæs {count} mere",
 	"components.pager-load-more.status-loading": "Indlæser flere elementer",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Deaktiveret, når mere end {countFormatted} element er valgt}

package/lang/de.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Mehr laden",
 	"components.pager-load-more.action-with-page-size": "{count} weitere laden",
 	"components.pager-load-more.status-loading": "Weitere Elemente werden geladen",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Deaktiviert, wenn mehr als {countFormatted} Element ausgewählt ist}

package/lang/en-gb.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Load More",
 	"components.pager-load-more.action-with-page-size": "Load {count} More",
 	"components.pager-load-more.status-loading": "Loading more items",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Disabled when more than {countFormatted} item is selected}

package/lang/en.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Load More",
 	"components.pager-load-more.action-with-page-size": "Load {count} More",
 	"components.pager-load-more.status-loading": "Loading more items",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Disabled when more than {countFormatted} item is selected}

package/lang/es-es.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Cargar más",
 	"components.pager-load-more.action-with-page-size": "Cargar {count} más",
 	"components.pager-load-more.status-loading": "Cargando más elementos",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Deshabilitado cuando se selecciona más de {countFormatted} elemento}

package/lang/es.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Cargar más",
 	"components.pager-load-more.action-with-page-size": "Cargar {count} más",
 	"components.pager-load-more.status-loading": "Cargando más elementos",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Se desactiva cuando se selecciona más de {countFormatted} elemento}

package/lang/fr-fr.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Charger plus",
 	"components.pager-load-more.action-with-page-size": "Charger {count} supplémentaire(s)",
 	"components.pager-load-more.status-loading": "Charger plus d’éléments",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {désactivé lorsque plus de {countFormatted} élément est sélectionné}

package/lang/fr.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "En télécharger plus",
 	"components.pager-load-more.action-with-page-size": "Charger {count} de plus",
 	"components.pager-load-more.status-loading": "Chargement d’autres d’éléments",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Désactivé lorsque plus de {countFormatted} élément est sélectionné}

package/lang/haw.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Hoʻouka hou aku",
 	"components.pager-load-more.action-with-page-size": "Hoʻouka {count} Mea hou aku",
 	"components.pager-load-more.status-loading": "Ke hoʻouka nei i nā mea hou aʻe",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Hoʻopaʻa ʻia ke ʻoi aku ma mua o {countFormatted} koho ʻia ka mea}

package/lang/hi.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "और लोड करें",
 	"components.pager-load-more.action-with-page-size": "{count} और लोड करें",
 	"components.pager-load-more.status-loading": "और आइटम लोड करना",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {{countFormatted} से अधिक आइटम चुने जाने पर अक्षम किया गया जाता है}

package/lang/ja.js

@@ -154,6 +154,8 @@ export default {
 	"components.pager-load-more.action": "さらに読み込む",
 	"components.pager-load-more.action-with-page-size": "さらに {count} 件を読み込む",
 	"components.pager-load-more.status-loading": "さらに項目を読み込み中",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			other {{countFormatted} 個を超える項目が選択されている場合は無効になります}

package/lang/ko.js

@@ -154,6 +154,8 @@ export default {
 	"components.pager-load-more.action": "더 많이 로드",
 	"components.pager-load-more.action-with-page-size": "{count}개 더 로드",
 	"components.pager-load-more.status-loading": "더 많은 항목 로드",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			other {{countFormatted}개 이상의 항목이 선택되면 비활성화됨}

package/lang/mi.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Utaina Anō",
 	"components.pager-load-more.action-with-page-size": "Utaina {count} Ētahi atu",
 	"components.pager-load-more.status-loading": "Uta ana i ētahi atu tūemi",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Kua whakakorehia ina neke atu i te {countFormatted} o ngā tūemi i tīpakohia}

package/lang/nl.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Meer laden",
 	"components.pager-load-more.action-with-page-size": "Laad nog {count} extra",
 	"components.pager-load-more.status-loading": "Er worden meer items geladen",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Uitgeschakeld als meer dan {countFormatted} item is geselecteerd}

package/lang/pt.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Carregar Mais",
 	"components.pager-load-more.action-with-page-size": "Carregar mais {count}",
 	"components.pager-load-more.status-loading": "Carregando mais itens",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {Desativado quando mais de {countFormatted} item é selecionado}

package/lang/sv.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Läs in fler",
 	"components.pager-load-more.action-with-page-size": "Läs in {count} till",
 	"components.pager-load-more.status-loading": "Läser in fler objekt",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {inaktiveras när fler än {countFormatted} objekt väljs}

package/lang/tr.js

@@ -161,6 +161,8 @@ export default {
 	"components.pager-load-more.action": "Daha Fazla Yükle",
 	"components.pager-load-more.action-with-page-size": "{count} Tane Daha Yükle",
 	"components.pager-load-more.status-loading": "Daha fazla öğe yükleniyor",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			one {{countFormatted} öğeden fazlası seçildiğinde devre dışı bırakılır}

package/lang/zh-cn.js

@@ -154,6 +154,8 @@ export default {
 	"components.pager-load-more.action": "加载更多",
 	"components.pager-load-more.action-with-page-size": "再加载 {count} 个",
 	"components.pager-load-more.status-loading": "加载更多项目",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			other {选择的项目超过 {countFormatted} 个时禁用}

package/lang/zh-tw.js

@@ -155,6 +155,8 @@ export default {
 	"components.pager-load-more.action": "載入更多",
 	"components.pager-load-more.action-with-page-size": "再載入 {count} 個",
 	"components.pager-load-more.status-loading": "正在載入更多項目",
+	"components.scroll-wrapper.scroll-left": "Scroll left",
+	"components.scroll-wrapper.scroll-right": "Scroll right",
 	"components.selection.action-max-hint":
 		`{count, plural,
 			other {選取超過 {countFormatted} 個項目時即停用}

package/package.json

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