@brightspace-ui/core 3.62.1 → 3.62.3

package/components/count-badge/demo/count-badge.html

@@ -27,6 +27,12 @@
 				<template>
 					<d2l-count-badge id="badge-announce-changes"size="small" announce-changes tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
 					<d2l-button id="increment-count">Increment Count</d2l-button>
+					<script type="module">
+						document.getElementById('increment-count').addEventListener('click', () => {
+							document.getElementById('badge-announce-changes').number += 1;
+							document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
+						});
+					</script>
 				</template>
 			</d2l-demo-snippet>
 
@@ -61,12 +67,7 @@
 					<d2l-count-badge size="small" has-tooltip text=" 2 new notifications." type="notification" number="2"></d2l-count-badge>
 				</template>
 			</d2l-demo-snippet>
+
 		</d2l-demo-page>
-		<script type="module">
-			document.getElementById('increment-count').addEventListener('click', () => {
-				document.getElementById('badge-announce-changes').number += 1;
-				document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
-			});
-		</script>
 	</body>
 </html>

package/components/demo/code-view.js

@@ -36,10 +36,6 @@ class CodeView extends LitElement {
 		super.attributeChangedCallback(name, oldval, newval);
 	}
 
-	firstUpdated() {
-		this._updateCode(this.shadowRoot.querySelector('slot'));
-	}
-
 	render() {
 		return html`
 			<div class="d2l-code-view-src"><slot @slotchange="${this._handleSlotChange}"></slot></div>

package/components/demo/demo-snippet.js

@@ -117,10 +117,6 @@ class DemoSnippet extends LitElement {
 		this._skeletonOn = false;
 	}
 
-	firstUpdated() {
-		this._updateCode(this.shadowRoot.querySelector('slot:not([name="_demo"])'));
-	}
-
 	render() {
 		const skeleton = this._hasSkeleton ? html`<d2l-switch text="Skeleton" ?on="${this._skeletonOn}" @change="${this._handleSkeletonChange}"></d2l-switch>` : null;
 		const switches = html`
@@ -137,7 +133,7 @@ class DemoSnippet extends LitElement {
 				<div class="d2l-demo-snippet-demo">
 					<div class="d2l-demo-snippet-demo-padding">
 						<slot name="_demo"></slot>
-						<slot></slot>
+						<slot @slotchange="${this._handleSlotChange}"></slot>
 					</div>
 				</div>
 				${settings}
@@ -152,15 +148,10 @@ class DemoSnippet extends LitElement {
 		changedProperties.forEach((_, prop) => {
 			if (prop === '_code') {
 				if (this.shadowRoot) this.shadowRoot.querySelector('d2l-code-view').forceUpdate();
-				this._updateHasSkeleton();
 			}
 		});
 	}
 
-	forceCodeUpdate() {
-		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot:not([name="_demo"])'));
-	}
-
 	_applyAttr(name, value, applyToShadowRoot) {
 		const query = this._isTemplate ? 'slot[name="_demo"]' : 'slot:not([name="_demo"])';
 		if (!this.shadowRoot) return;
@@ -239,6 +230,10 @@ class DemoSnippet extends LitElement {
 		this._applyAttr('skeleton', this._skeletonOn, false);
 	}
 
+	_handleSlotChange(e) {
+		this._updateCode(e.target);
+	}
+
 	_removeImportedDemo() {
 		if (!this.shadowRoot) return;
 		const nodes = this.shadowRoot.querySelector('slot[name="_demo"]').assignedNodes();
@@ -276,6 +271,8 @@ class DemoSnippet extends LitElement {
 		}
 		const textNode = document.createTextNode(this._formatCode(tempContainer.innerHTML));
 		this._code = textNode.textContent;
+
+		this._updateHasSkeleton();
 	}
 
 	_updateHasSkeleton() {

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/package.json

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