@brightspace-ui/core 3.4.0 → 3.5.0

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

@@ -1,4 +1,5 @@
 import '../table-col-sort-button.js';
+import '../table-col-sort-button-item.js';
 import '../table-controls.js';
 import '../../button/button-icon.js';
 import '../../dropdown/dropdown-button-subtle.js';
@@ -24,13 +25,13 @@ const columns = ['Population', 'Size', 'Elevation'];
 const thText = ['Additional', 'Placeholder', 'Header', 'Row'];
 
 const data = () => [
-	{ name: 'Ottawa, Canada', city: 'Ottawa', country: 'Canada', data: { 'population': 994837, 'size': 2790, 'elevation': 70 }, selected: true },
-	{ name: 'Toronto, Canada', city: 'Toronto', country: 'Canada', data: { 'population': 2930000, 'size': 630, 'elevation': 76 }, selected: true },
-	{ name: 'Sydney, Australia', city: 'Sydney', country: 'Australia', data: { 'population': 5312000, 'size': 12368, 'elevation': 3 }, selected: false },
-	{ name: 'Cairo, Egypt', city: 'Cairo', country: 'Egypt', data: { 'population': 9540000, 'size': 3085, 'elevation': 23 }, selected: false },
-	{ name: 'Moscow, Russia', city: 'Moscow', country: 'Russia', data: { 'population': 12712305, 'size': 2511, 'elevation': 124 }, selected: false },
-	{ name: 'London, England', city: 'London', country: 'England', data: { 'population': 8982000, 'size': 1572, 'elevation': 11 }, selected: false },
-	{ name: 'Tokyo, Japan', city: 'Tokyo', country: 'Japan', data: { 'population': 13960000, 'size': 2194, 'elevation': 40 }, selected: false }
+	{ 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 }
 ];
 
 const formatter = new Intl.NumberFormat('en-US');
@@ -100,7 +101,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 					<thead>
 						<tr>
 							<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
-							${this._renderDoubleSortButton('City', 'Country')}
+							${this._renderDoubleSortButton('Location')}
 							${columns.map(columnHeading => this._renderSortButton(columnHeading))}
 						</tr>
 					</thead>
@@ -145,7 +146,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: `Country ${startIndex + i}`, data: { '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 }, selected: false });
 		}
 		this.requestUpdate();
 		e.detail.complete();
@@ -156,38 +157,40 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 		const desc = e.target.hasAttribute('desc');
 		this._sortDesc = field === this._sortField ? !desc : false; // if sorting on same field then reverse, otherwise sort ascending
 		this._sortField = field;
+		this._handleSortData();
+	}
+
+	_handleSortComplex(e) {
+		this._sortField = e.target?.getAttribute('data-field');
+		this._sortDesc = e.target?.hasAttribute('data-desc');
+		this._handleSortData();
+	}
 
+	_handleSortData() {
 		this._data = this._data.sort((a, b) => {
-			if (this._sortField === 'city' || this._sortField === 'country') {
-				if (this._sortDesc) {
-					if (a[this._sortField] > b[this._sortField]) return -1;
-					if (a[this._sortField] < b[this._sortField]) return 1;
-				} else {
-					if (a[this._sortField] < b[this._sortField]) return -1;
-					if (a[this._sortField] > b[this._sortField]) return 1;
-				}
+			if (this._sortDesc) {
+				if (a.data[this._sortField] > b.data[this._sortField]) return -1;
+				if (a.data[this._sortField] < b.data[this._sortField]) return 1;
 			} else {
-				if (this._sortDesc) {
-					return b.data[this._sortField] - a.data[this._sortField];
-				}
-				return a.data[this._sortField] - b.data[this._sortField];
+				if (a.data[this._sortField] < b.data[this._sortField]) return -1;
+				if (a.data[this._sortField] > b.data[this._sortField]) return 1;
 			}
+			return 0;
 		});
 	}
 
-	_renderDoubleSortButton(item1, item2) {
+	_renderDoubleSortButton(name) {
+		const noSort = this._sortField?.toLowerCase() !== 'city' && this._sortField?.toLowerCase() !== 'country';
 		return html`
 			<th scope="col">
 				<d2l-table-col-sort-button
-					@click="${this._handleSort}"
-					source-type="words"
-					?desc="${this._sortDesc}"
-					?nosort="${this._sortField !== item1.toLowerCase()}">${item1}</d2l-table-col-sort-button>
-				<d2l-table-col-sort-button
-					@click="${this._handleSort}"
-					source-type="words"
 					?desc="${this._sortDesc}"
-					?nosort="${this._sortField !== item2.toLowerCase()}">${item2}</d2l-table-col-sort-button>
+					?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>
+				</d2l-table-col-sort-button>
 			</th>
 		`;
 	}

package/components/table/table-col-sort-button-item.js

@@ -0,0 +1,34 @@
+import '../icons/icon.js';
+import { html, LitElement } from 'lit';
+import { MenuItemRadioMixin } from '../menu/menu-item-radio-mixin.js';
+import { menuItemSelectableStyles } from '../menu/menu-item-selectable-styles.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+
+/**
+ * A radio menu item to be used within the d2l-table-col-sort-button component for a multi-faceted sort.
+ */
+class TableColSortButtonItem extends RtlMixin(MenuItemRadioMixin(LitElement)) {
+
+	static get styles() {
+		return menuItemSelectableStyles;
+	}
+
+	firstUpdated() {
+		super.firstUpdated();
+		this.addEventListener('d2l-menu-item-change', this._onChangeOption);
+	}
+
+	render() {
+		return html`
+			<d2l-icon icon="tier1:check"></d2l-icon>
+			<div class="d2l-menu-item-text">${this.text}</div>
+		`;
+	}
+
+	_onChangeOption() {
+		/** Dispatched when the selected multi-faceted sort option changes */
+		this.dispatchEvent(new CustomEvent('d2l-table-col-sort-button-item-change', { bubbles: true, composed: true }));
+	}
+}
+
+customElements.define('d2l-table-col-sort-button-item', TableColSortButtonItem);

package/components/table/table-col-sort-button.js

@@ -1,6 +1,10 @@
 import '../colors/colors.js';
+import '../dropdown/dropdown.js';
+import '../dropdown/dropdown-menu.js';
 import '../icons/icon.js';
+import '../menu/menu.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
@@ -46,7 +50,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 			sourceType: {
 				attribute: 'source-type',
 				type: String
-			}
+			},
+			_hasDropdownItems: { state: true },
+			_selectedMenuItemText: { state: true }
 		};
 	}
 
@@ -60,6 +66,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 			:host([nosort]) {
 				--d2l-table-col-sort-button-additional-padding-inline-end: calc(0.6rem + 18px);
 			}
+			:host > :first-child {
+				width: var(--d2l-table-col-sort-button-width);
+			}
 			:host([nosort][position="center"]) {
 				--d2l-table-col-sort-button-additional-padding-inline-end: calc(0.5 * (0.6rem + 18px) + var(--d2l-table-cell-col-sort-button-size-offset, 4px));
 				--d2l-table-col-sort-button-additional-padding-inline-start: calc(0.5 * (0.6rem + 18px) - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
@@ -91,8 +100,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				padding: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
 				padding-inline-end: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px) + var(--d2l-table-col-sort-button-additional-padding-inline-end));
 				padding-inline-start: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px) + var(--d2l-table-col-sort-button-additional-padding-inline-start));
+				text-align: start;
 				text-decoration: none;
-				width: var(--d2l-table-col-sort-button-width);
+				width: 100%;
 			}
 			button::-moz-focus-inner {
 				border: 0;
@@ -111,6 +121,12 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 			d2l-icon {
 				margin-inline-start: 0.6rem;
 			}
+			::slotted(*[slot="items"]) {
+				display: none;
+			}
+			::slotted(d2l-table-col-sort-button-item[slot="items"]) {
+				display: flex;
+			}
 		`;
 	}
 
@@ -122,31 +138,75 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 		this.sourceType = 'unknown';
 
 		this._describedById = getUniqueId();
+		this._hasDropdownItems = false;
 	}
 
 	static get focusElementSelector() {
 		return 'button';
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		const selectedItem = this.querySelector('[selected]');
+		if (selectedItem && !this.nosort) this._selectedMenuItemText = selectedItem.text;
+	}
+
 	render() {
 		const buttonDescription = this.nosort ? this.localize('components.table-col-sort-button.addSortOrder') : this.localize('components.table-col-sort-button.changeSortOrder');
 		const buttonTitle = this.nosort
 			? undefined
 			: this.localize('components.table-col-sort-button.title', {
-				sourceType: this.sourceType,
-				direction: this.desc ? 'desc' : undefined
+				sourceType: this._hasDropdownItems && this._selectedMenuItemText ? 'value' : this.sourceType,
+				direction: this.desc ? 'desc' : undefined,
+				selectedMenuItemText: this._selectedMenuItemText
 			});
 
 		const iconView = !this.nosort ?
 			html`<d2l-icon icon="${this.desc ? 'tier1:arrow-toggle-down' : 'tier1:arrow-toggle-up'}"></d2l-icon>` :
 			null;
 
-		return html`<button
+		const button = html`<button
 				aria-describedby="${this._describedById}"
+				class="${classMap({ 'd2l-dropdown-opener': this._hasDropdownItems })}"
 				title="${ifDefined(buttonTitle)}"
 				type="button">
 				<slot></slot>${iconView}
 			</button><span id="${this._describedById}" hidden>${buttonDescription}</span>`;
+		if (this._hasDropdownItems) {
+			return html`<d2l-dropdown>
+					${button}
+					<d2l-dropdown-menu no-pointer align="start" vertical-offset="0">
+						<d2l-menu @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
+							<slot name="items" @slotchange="${this._handleSlotChange}"></slot>
+						</d2l-menu>
+					</d2l-dropdown-menu>
+				</d2l-dropdown>`;
+		} else {
+			return html`${button}<slot name="items" @slotchange="${this._handleSlotChange}"></slot>`;
+		}
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		// de-select any selected dropdown menu item
+		if (changedProperties.has('nosort') && this.nosort && this._hasDropdownItems) {
+			const selectedItem = this.querySelector('[selected]');
+			if (selectedItem) selectedItem.selected = false;
+		}
+	}
+
+	_handleSlotChange(e) {
+		const items = e.target?.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
+		const filteredItems = items.filter((item) => {
+			return item.tagName === 'D2L-TABLE-COL-SORT-BUTTON-ITEM';
+		});
+		this._hasDropdownItems = filteredItems.length > 0;
+	}
+
+	_handleTablColSortButtonItemChange(e) {
+		this._selectedMenuItemText = e.target?.text;
 	}
 
 }

package/custom-elements.json

@@ -12020,6 +12020,92 @@
         }
       ]
     },
+    {
+      "name": "d2l-table-col-sort-button-item",
+      "path": "./components/table/table-col-sort-button-item.js",
+      "description": "A radio menu item to be used within the d2l-table-col-sort-button component for a multi-faceted sort.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "REQUIRED: The selectable item's value",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "This will set the item to be selected by default",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "Provide a description for the menu item that will be used by screen readers",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "REQUIRED: The selectable item's value",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "This will set the item to be selected by default",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "Provide a description for the menu item that will be used by screen readers",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-table-col-sort-button-item-change",
+          "description": "Dispatched when the selected multi-faceted sort option changes"
+        },
+        {
+          "name": "d2l-menu-item-change",
+          "description": "Dispatched when the selected menu item changes"
+        },
+        {
+          "name": "d2l-menu-item-select",
+          "description": "Dispatched when the menu item is selected"
+        },
+        {
+          "name": "d2l-menu-item-visibility-change",
+          "description": "Dispatched when the visibility of the menu item changes"
+        }
+      ]
+    },
     {
       "name": "d2l-table-col-sort-button",
       "path": "./components/table/table-col-sort-button.js",

package/lang/en.js

@@ -107,7 +107,7 @@ export default {
 	"components.switch.conditions": "Conditions must be met",
 	"components.table-col-sort-button.addSortOrder": "Select to add sort order",
 	"components.table-col-sort-button.changeSortOrder": "Select to change sort order",
-	"components.table-col-sort-button.title": "{sourceType, select, dates {{direction, select, desc {Sorted new to old} other {Sorted old to new}}} numbers {{direction, select, desc {Sorted high to low} other {Sorted low to high}}} words {{direction, select, desc {Sorted Z to A} other {Sorted A to Z}}} other {{direction, select, desc {Sorted descending} other {Sorted ascending}}}}",
+	"components.table-col-sort-button.title": "{sourceType, select, dates {{direction, select, desc {Sorted new to old} other {Sorted old to new}}} numbers {{direction, select, desc {Sorted high to low} other {Sorted low to high}}} words {{direction, select, desc {Sorted Z to A} other {Sorted A to Z}}} value {Sorted {selectedMenuItemText}} other {{direction, select, desc {Sorted descending} other {Sorted ascending}}}}",
 	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Scroll Forward",
 	"components.tabs.previous": "Scroll Backward",

package/package.json

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