@brightspace-ui/core 3.62.2 → 3.62.4

package/components/meter/meter-circle.js

@@ -23,7 +23,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 		.d2l-meter-full-bar {
 			fill: var(--d2l-meter-circle-fill, none);
 		}
-		.d2l-meter-text {
+		.d2l-meter-circle-text {
 			font-size: 0.55rem;
 		}
 	` ];
@@ -47,6 +47,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 		const textClasses = {
 			'd2l-meter-text-ltr': !this.percent,
 			'd2l-body-standard': true,
+			'd2l-meter-circle-text': true,
 			'd2l-meter-text': true
 		};
 

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

@@ -22,16 +22,16 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 
 const columns = ['Population', 'Size', 'Elevation'];
-const thText = ['Additional', 'Placeholder', 'Header', 'Row'];
+const thText = ['Additional', 'Placeholder', 'Header', 'Row', 'Cells'];
 
 const data = () => [
-	{ name: 'Ottawa, Canada', data: { 'city': 'Ottawa', 'country': 'Canada', 'population': 994837, 'size': 2790, 'elevation': 70 }, selected: true },
-	{ name: 'Toronto, Canada', data: { 'city': 'Toronto', 'country': 'Canada', 'population': 2930000, 'size': 630, 'elevation': 76 }, selected: true },
-	{ name: 'Sydney, Australia', data: { 'city': 'Sydney', 'country': 'Australia', 'population': 5312000, 'size': 12368, 'elevation': 3 }, selected: false },
-	{ name: 'Cairo, Egypt', data: { 'city': 'Cairo', 'country': 'Egypt', 'population': 9540000, 'size': 3085, 'elevation': 23 }, selected: false },
-	{ name: 'Moscow, Russia', data: { 'city': 'Moscow', 'country': 'Russia', 'population': 12712305, 'size': 2511, 'elevation': 124 }, selected: false },
-	{ name: 'London, England', data: { 'city': 'London', 'country': 'England', 'population': 8982000, 'size': 1572, 'elevation': 11 }, selected: false },
-	{ name: 'Tokyo, Japan', data: { 'city': 'Tokyo', 'country': 'Japan', 'population': 13960000, 'size': 2194, 'elevation': 40 }, selected: false }
+	{ name: 'Ottawa, Canada', data: { 'city': 'Ottawa', 'country': 'Canada', 'population': 994837, 'size': 2790, 'elevation': 70, 'latitude': 45.32, 'longitude': -75.71 }, selected: true },
+	{ name: 'Toronto, Canada', data: { 'city': 'Toronto', 'country': 'Canada', 'population': 2930000, 'size': 630, 'elevation': 76, 'latitude': 43.69, 'longitude': -79.41 }, selected: true },
+	{ name: 'Sydney, Australia', data: { 'city': 'Sydney', 'country': 'Australia', 'population': 5312000, 'size': 12368, 'elevation': 3, 'latitude': -33.86, 'longitude': 151.13 }, selected: false },
+	{ name: 'Cairo, Egypt', data: { 'city': 'Cairo', 'country': 'Egypt', 'population': 9540000, 'size': 3085, 'elevation': 23, 'latitude': 30.05, 'longitude': 31.25 }, selected: false },
+	{ name: 'Moscow, Russia', data: { 'city': 'Moscow', 'country': 'Russia', 'population': 12712305, 'size': 2511, 'elevation': 124, 'latitude': 55.70, 'longitude': 35.59 }, selected: false },
+	{ name: 'London, England', data: { 'city': 'London', 'country': 'England', 'population': 8982000, 'size': 1572, 'elevation': 11, 'latitude': 51.49, 'longitude': -0.12 }, selected: false },
+	{ name: 'Tokyo, Japan', data: { 'city': 'Tokyo', 'country': 'Japan', 'population': 13960000, 'size': 2194, 'elevation': 40, 'latitude': 35.68, 'longitude': 139.74 }, selected: false }
 ];
 
 const formatter = new Intl.NumberFormat('en-US');
@@ -104,20 +104,22 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 						${this.multiLine ? html`
 							<tr>
 								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
-								${this._renderDoubleSortButton('Location')}
-								<th scope="col" colspan="${columns.length}" sticky>
+								${this._renderDoubleSortButton('City', 'Country')}
+								<th scope="col" colspan="${columns.length + 1}" sticky>
 									Metrics
 								</th>
 							</tr>
 							<tr>
 								<th scope="col" sticky></th>
 								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
+								${this._renderMenuSortButton('Coordinates', ['Latitude', 'Longitude'])}
 							</tr>
 						` : html`
 							<tr>
 								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
-								${this._renderDoubleSortButton('Location')}
+								${this._renderDoubleSortButton('City', 'Country')}
 								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
+								${this._renderMenuSortButton('Coordinates', ['Latitude', 'Longitude'])}
 							</tr>
 						`}
 					</thead>
@@ -145,7 +147,8 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 									</d2l-selection-input>
 								</th>
 								<th scope="row">${row.name}</th>
-								${columns.map(columnHeading => html`<td>${formatter.format(row.data[columnHeading.toLowerCase()])}</td>`)}
+								${columns.map(columnHeading => { const val = row.data[columnHeading.toLowerCase()]; return val ? html`<td>${formatter.format(val)}</td>` : null; }) }
+								<td>${[formatter.format(row.data.latitude), formatter.format(row.data.longitude)].join(', ')}</td>
 							</tr>
 						`)}
 					</tbody>
@@ -162,7 +165,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	_handlePagerLoadMore(e) {
 		const startIndex = this._data.length + 1;
 		for (let i = 0; i < e.target.pageSize; i++) {
-			this._data.push({ name: `City ${startIndex + i}, Country ${startIndex + i}`, data: { 'city': `City ${startIndex + i}`, 'country': `Country ${startIndex + i}`, 'population': 26320000, 'size': 6340, 'elevation': 4 }, selected: false });
+			this._data.push({ name: `City ${startIndex + i}, Country ${startIndex + i}`, data: { 'city': `City ${startIndex + i}`, 'country': `Country ${startIndex + i}`, 'population': 26320000, 'size': 6340, 'elevation': 4, 'latitude': 3, 'longitude': 3 }, selected: false });
 		}
 		this.requestUpdate();
 		e.detail.complete();
@@ -195,17 +198,31 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 		});
 	}
 
-	_renderDoubleSortButton(name) {
-		const noSort = this._sortField?.toLowerCase() !== 'city' && this._sortField?.toLowerCase() !== 'country';
+	_renderDoubleSortButton(item1, item2) {
 		return html`
 			<th rowspan="${this.multiLine ? 2 : 1}" scope="col">
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					?desc="${this._sortDesc}"
+					?nosort="${this._sortField !== item1.toLowerCase()}">${item1}</d2l-table-col-sort-button>
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					?desc="${this._sortDesc}"
+					?nosort="${this._sortField !== item2.toLowerCase()}">${item2}</d2l-table-col-sort-button>
+			</th>
+		`;
+	}
+
+	_renderMenuSortButton(name, items) {
+		const noSort = !items.map(i => i.toLowerCase()).includes(this._sortField?.toLowerCase());
+		return html`
+			<th scope="col">
 				<d2l-table-col-sort-button
 					?desc="${this._sortDesc}"
-					?nosort="${noSort}">${name}
-					<d2l-table-col-sort-button-item slot="items" text="City, A to Z" data-field="city" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="1"></d2l-table-col-sort-button-item>
-					<d2l-table-col-sort-button-item slot="items" text="City, Z to A" data-field="city" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="2"></d2l-table-col-sort-button-item>
-					<d2l-table-col-sort-button-item slot="items" text="Country, A to Z" data-field="country" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="3"></d2l-table-col-sort-button-item>
-					<d2l-table-col-sort-button-item slot="items" text="Country, Z to A" data-field="country" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="4"></d2l-table-col-sort-button-item>
+					?nosort="${noSort}">
+					<span>${name}</span>${items.map((item, idx) => html`
+					<d2l-table-col-sort-button-item slot="items" text="${item}, ascending" data-field="${item.toLowerCase()}" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="${idx * 2 + 1}"></d2l-table-col-sort-button-item>
+					<d2l-table-col-sort-button-item slot="items" text="${item}, descending" data-field="${item.toLowerCase()}" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="${idx * 2 + 2}"></d2l-table-col-sort-button-item>`)}
 				</d2l-table-col-sort-button>
 			</th>
 		`;

package/components/table/table-wrapper.js

@@ -111,9 +111,7 @@ export const tableStyles = css`
 	.d2l-table th.d2l-table-header-col-sortable-siblings d2l-table-col-sort-button {
 		--d2l-table-col-sort-button-width: unset;
 	}
-	.d2l-table-header-col-sortable-no-sorted.d2l-table-header-col-sortable-siblings :last-child {
-		padding-inline-end: calc(0.6rem + 18px);
-	}
+
 	@supports selector(:has(a, b)) {
 		.d2l-table > * > tr > th:has(d2l-table-col-sort-button) {
 			height: calc(var(--d2l-table-cell-overall-height) - var(--d2l-table-cell-col-sort-button-size-offset));
@@ -129,7 +127,8 @@ export const tableStyles = css`
 	.d2l-table th d2l-table-col-sort-button[nosort] ~ :last-child {
 		padding-inline-end: calc(0.6rem + 18px);
 	}
-	.d2l-table th d2l-table-col-sort-button:not([nosort]) ~ :last-child {
+	.d2l-table th d2l-table-col-sort-button:not([nosort]) ~ :last-child,
+	.d2l-table th d2l-table-col-sort-button:last-child:not([nosort]) {
 		padding-inline-end: unset;
 	}
 

package/lang/ar.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "يحتوي على أحداث.",
 	"components.calendar.notSelected": "لم يتم التحديد.",
 	"components.calendar.selected": "تم التحديد.",
 	"components.calendar.show": "إظهار {month}",

package/lang/cy.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Yn Cynnwys Digwyddiadau.",
 	"components.calendar.notSelected": "Heb ei Ddewis.",
 	"components.calendar.selected": "Wedi'i Ddewis.",
 	"components.calendar.show": "Dangos {month}",

package/lang/da.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Luk besked",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Har begivenheder.",
 	"components.calendar.notSelected": "Ikke valgt.",
 	"components.calendar.selected": "Valgt.",
 	"components.calendar.show": "Vis {month}",

package/lang/de.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Benachrichtigung schließen",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Hat Ereignisse.",
 	"components.calendar.notSelected": "Nicht ausgewählt.",
 	"components.calendar.selected": "Ausgewählt.",
 	"components.calendar.show": "{month} anzeigen",

package/lang/es-es.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Tiene eventos.",
 	"components.calendar.notSelected": "No seleccionado.",
 	"components.calendar.selected": "Seleccionado.",
 	"components.calendar.show": "Mostrar {month}",

package/lang/es.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Tiene eventos.",
 	"components.calendar.notSelected": "No seleccionado.",
 	"components.calendar.selected": "Seleccionado.",
 	"components.calendar.show": "Mostrar {month}",

package/lang/fr-fr.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Fermer l'alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "A des événements.",
 	"components.calendar.notSelected": "Non sélectionné.",
 	"components.calendar.selected": "Sélectionné.",
 	"components.calendar.show": "Afficher {month}",

package/lang/fr.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Fermer l'alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Comprend des événements.",
 	"components.calendar.notSelected": "Non sélectionné(e)",
 	"components.calendar.selected": "Sélectionné(e).",
 	"components.calendar.show": "Afficher {month}",

package/lang/hi.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "अलर्ट बंद करें",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "ईवेंट हैं।",
 	"components.calendar.notSelected": "चयनित नहीं।",
 	"components.calendar.selected": "चयनित।",
 	"components.calendar.show": "{month} दिखाएँ",

package/lang/ja.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "アラートを閉じる",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "イベントがあります。",
 	"components.calendar.notSelected": "選択されていません。",
 	"components.calendar.selected": "選択されています。",
 	"components.calendar.show": "{month} を表示",

package/lang/ko.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "경보 닫기",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "이벤트가 있습니다.",
 	"components.calendar.notSelected": "선택되지 않음.",
 	"components.calendar.selected": "선택됨.",
 	"components.calendar.show": "{month} 표시",

package/lang/nl.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Waarschuwing sluiten",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Bevat gebeurtenissen.",
 	"components.calendar.notSelected": "Niet geselecteerd.",
 	"components.calendar.selected": "Geselecteerd.",
 	"components.calendar.show": "{month} weergeven",

package/lang/pt.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Fechar alerta",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Tem eventos.",
 	"components.calendar.notSelected": "Não selecionado.",
 	"components.calendar.selected": "Selecionado.",
 	"components.calendar.show": "Mostrar {month}",

package/lang/sv.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Stängningsvarning",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Har händelser.",
 	"components.calendar.notSelected": "Inte vald.",
 	"components.calendar.selected": "Markerad.",
 	"components.calendar.show": "Visa {month}",

package/lang/tr.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "Kapatma Uyarısı",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "Olayları Var.",
 	"components.calendar.notSelected": "Seçili Değil.",
 	"components.calendar.selected": "Seçili.",
 	"components.calendar.show": "{month} Göster",

package/lang/zh-cn.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "关闭提醒",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "有事件。",
 	"components.calendar.notSelected": "未选择。",
 	"components.calendar.selected": "已选择。",
 	"components.calendar.show": "显示 {month}",

package/lang/zh-tw.js

@@ -2,7 +2,7 @@ export default {
 	"components.alert.close": "關閉警示",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",
-	"components.calendar.hasEvents": "Has Events.",
+	"components.calendar.hasEvents": "有事件。",
 	"components.calendar.notSelected": "未選取。",
 	"components.calendar.selected": "已選取。",
 	"components.calendar.show": "顯示{month}",

package/package.json

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