@brightspace-ui/core 3.268.0 → 3.268.2

package/components/table/README.md

@@ -65,9 +65,7 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
 
   class SampleTable extends LitElement {
 
-    static get styles() {
-      return tableStyles;
-    }
+    static styles = tableStyles;
 
     render() {
       const type = this.type === 'light' ? 'light' : 'default';
@@ -147,15 +145,11 @@ For the example below:
 
   class MySortableTableElem extends LitElement {
 
-    static get properties() {
-      return {
-        _sortDesc: { attribute: false, type: Boolean }
-      };
-    }
+    static properties = {
+      _sortDesc: { attribute: false, type: Boolean }
+    };
 
-    static get styles() {
-      return tableStyles;
-    }
+    static styles = tableStyles;
 
     constructor() {
       super();
@@ -290,15 +284,11 @@ When a single column is responsible for sorting in multiple facets (e.g., first
     { firstname: 'Christopher', lastname: 'Martinez', grade: 83 }
   ];
   class MyComplexSortableTableElem extends LitElement {
-    static get properties() {
-      return {
-        _desc: { state: true },
-        _field: { state: true }
-      };
-    }
-    static get styles() {
-      return tableStyles;
-    }
+    static properties = {
+      _desc: { state: true },
+      _field: { state: true }
+    };
+    static styles = tableStyles;
     constructor() {
       super();
       this._data = data();
@@ -382,16 +372,12 @@ To enable selection, add `d2l-selection-input` components in the selection colum
 
   class SampleTableWithSelectionInputs extends LitElement {
 
-    static get properties() {
-      return {
-        selectionSingle: { type: Boolean, attribute: 'selection-single' },
-        _data: { state: true }
-      }
-    }
+    static properties = {
+      selectionSingle: { type: Boolean, attribute: 'selection-single' },
+      _data: { state: true }
+    };
 
-    static get styles() {
-      return tableStyles;
-    }
+    static styles = tableStyles;
 
     constructor() {
       super();
@@ -494,15 +480,11 @@ The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `c
 
   class SampleTableWithControls extends LitElement {
 
-    static get properties() {
-      return {
-        _data: { state: true }
-      }
-    }
+    static properties = {
+      _data: { state: true }
+    };
 
-    static get styles() {
-      return tableStyles;
-    }
+    static styles = tableStyles;
 
     constructor() {
       super();

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

@@ -39,38 +39,34 @@ const formatter = new Intl.NumberFormat('en-US');
 
 class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper') {
 
-	static get properties() {
-		return {
-			paging: { type: Boolean, reflect: true },
-			multiLine: { type: Boolean, attribute: 'multi-line' },
-			resetOnSort: { type: Boolean, attribute: 'reset-on-sort' },
-			showButtons: { type: Boolean, attribute: 'show-buttons' },
-			stickyControls: { attribute: 'sticky-controls', type: Boolean, reflect: true },
-			visibleBackground: { attribute: 'visible-background', type: Boolean, reflect: true },
-			_data: { state: true },
-			_sortField: { state: true },
-			_sortDesc: { state: true }
-		};
-	}
+	static properties = {
+		paging: { type: Boolean, reflect: true },
+		multiLine: { type: Boolean, attribute: 'multi-line' },
+		resetOnSort: { type: Boolean, attribute: 'reset-on-sort' },
+		showButtons: { type: Boolean, attribute: 'show-buttons' },
+		stickyControls: { attribute: 'sticky-controls', type: Boolean, reflect: true },
+		visibleBackground: { attribute: 'visible-background', type: Boolean, reflect: true },
+		_data: { state: true },
+		_sortField: { state: true },
+		_sortDesc: { state: true }
+	};
 
-	static get styles() {
-		return [tableStyles, css`
-			:host {
-				display: block;
-			}
-			:host([visible-background]) {
-				--d2l-table-controls-background-color: #dddddd;
-			}
-			.d2l-table > * > tr > :has(d2l-button-icon),
-			.d2l-table > * > tr > :has(d2l-dropdown-context-menu) {
-				padding-block: 0;
-			}
-			.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-button-icon,
-			.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-dropdown-context-menu {
-				vertical-align: top;
-			}
-		`];
-	}
+	static styles = [tableStyles, css`
+		:host {
+			display: block;
+		}
+		:host([visible-background]) {
+			--d2l-table-controls-background-color: #dddddd;
+		}
+		.d2l-table > * > tr > :has(d2l-button-icon),
+		.d2l-table > * > tr > :has(d2l-dropdown-context-menu) {
+			padding-block: 0;
+		}
+		.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-button-icon,
+		.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-dropdown-context-menu {
+			vertical-align: top;
+		}
+	`];
 
 	constructor() {
 		super();

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

@@ -11,9 +11,7 @@ import { menuItemSelectableStyles } from '../menu/menu-item-selectable-styles.js
  */
 class TableColSortButtonItem extends MenuItemRadioMixin(LitElement) {
 
-	static get styles() {
-		return menuItemSelectableStyles;
-	}
+	static styles = menuItemSelectableStyles;
 
 	firstUpdated() {
 		super.firstUpdated();

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

@@ -19,115 +19,111 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  */
 export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether sort direction is descending
-			 * @type {boolean}
-			 */
-			desc: {
-				reflect: true,
-				type: Boolean
-			},
-			/**
-			 * Column is not currently sorted. Hides the ascending/descending sort icon.
-			 * @type {boolean}
-			 */
-			nosort: {
-				reflect: true,
-				type: Boolean
-			},
-			/**
-			 * Position of the button content
-			 * @type {'start'|'center'|'end'}
-			 */
-			position: {
-				reflect: true,
-				type: String
-			},
-			/**
-			 * ACCESSIBILITY: The type of data in the column (e.g., 'words'). Used to set the title.
-			 *  @type {'words'|'numbers'|'dates'|'unknown'}
-			 */
-			sourceType: {
-				attribute: 'source-type',
-				type: String
-			},
-			_hasDropdownItems: { state: true },
-			_selectedMenuItemText: { state: true },
-			_label: { state: true },
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
-				--d2l-table-col-sort-button-additional-padding-inline-start: 0px; /* stylelint-disable-line length-zero-no-unit */
-				--d2l-table-col-sort-button-width: calc(100% - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
-			}
-			: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));
-			}
-			:host([nosort][position="end"]) {
-				--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
-				--d2l-table-col-sort-button-additional-padding-inline-start: calc(0.6rem + 18px);
-			}
-			:host([position="center"]) button {
-				justify-content: center;
-			}
-			:host([position="end"]) button {
-				justify-content: end;
-			}
-			button {
-				align-items: center;
-				background-color: transparent;
-				border: none;
-				border-radius: 4px;
-				color: inherit;
-				cursor: pointer;
-				display: inline-flex;
-				font-family: inherit;
-				font-size: inherit;
-				letter-spacing: inherit;
-				line-height: 0.9rem;
-				margin-block: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
-				margin-inline: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
-				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: 100%;
-			}
-			button::-moz-focus-inner {
-				border: 0;
-			}
-			button:disabled {
-				opacity: 0.5;
-			}
-			button:hover {
-				background-color: var(--d2l-color-gypsum);
-			}
-			${getFocusRingStyles('button', { extraStyles: css`box-shadow: 0 0 0 2px #ffffff;` })}
-			d2l-icon {
-				margin-inline-start: 0.6rem;
-			}
-			::slotted(*[slot="items"]) {
-				display: none;
-			}
-			::slotted(d2l-table-col-sort-button-item[slot="items"]) {
-				display: flex;
-			}
-		`;
-	}
+	static properties = {
+		/**
+		 * Whether sort direction is descending
+		 * @type {boolean}
+		 */
+		desc: {
+			reflect: true,
+			type: Boolean
+		},
+		/**
+		 * Column is not currently sorted. Hides the ascending/descending sort icon.
+		 * @type {boolean}
+		 */
+		nosort: {
+			reflect: true,
+			type: Boolean
+		},
+		/**
+		 * Position of the button content
+		 * @type {'start'|'center'|'end'}
+		 */
+		position: {
+			reflect: true,
+			type: String
+		},
+		/**
+		 * ACCESSIBILITY: The type of data in the column (e.g., 'words'). Used to set the title.
+		 *  @type {'words'|'numbers'|'dates'|'unknown'}
+		 */
+		sourceType: {
+			attribute: 'source-type',
+			type: String
+		},
+		_hasDropdownItems: { state: true },
+		_selectedMenuItemText: { state: true },
+		_label: { state: true },
+	};
+
+	static styles = css`
+		:host {
+			--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
+			--d2l-table-col-sort-button-additional-padding-inline-start: 0px; /* stylelint-disable-line length-zero-no-unit */
+			--d2l-table-col-sort-button-width: calc(100% - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
+		}
+		: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));
+		}
+		:host([nosort][position="end"]) {
+			--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
+			--d2l-table-col-sort-button-additional-padding-inline-start: calc(0.6rem + 18px);
+		}
+		:host([position="center"]) button {
+			justify-content: center;
+		}
+		:host([position="end"]) button {
+			justify-content: end;
+		}
+		button {
+			align-items: center;
+			background-color: transparent;
+			border: none;
+			border-radius: 4px;
+			color: inherit;
+			cursor: pointer;
+			display: inline-flex;
+			font-family: inherit;
+			font-size: inherit;
+			letter-spacing: inherit;
+			line-height: 0.9rem;
+			margin-block: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
+			margin-inline: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
+			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: 100%;
+		}
+		button::-moz-focus-inner {
+			border: 0;
+		}
+		button:disabled {
+			opacity: 0.5;
+		}
+		button:hover {
+			background-color: var(--d2l-color-gypsum);
+		}
+		${getFocusRingStyles('button', { extraStyles: css`box-shadow: 0 0 0 2px #ffffff;` })}
+		d2l-icon {
+			margin-inline-start: 0.6rem;
+		}
+		::slotted(*[slot="items"]) {
+			display: none;
+		}
+		::slotted(d2l-table-col-sort-button-item[slot="items"]) {
+			display: flex;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/table/table-controls.js

@@ -5,28 +5,25 @@ import { SelectionControls } from '../selection/selection-controls.js';
  * Controls for table components containing a selection summary and selection actions.
  */
 class TableControls extends SelectionControls {
-	static get properties() {
-		return {
-			/**
-			 * Whether to render the selection summary
-			 * @type {boolean}
-			 */
-			noSelection: { type: Boolean, attribute: 'no-selection' }
-		};
-	}
 
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				--d2l-selection-controls-background-color: var(--d2l-table-controls-background-color);
-				--d2l-selection-controls-shadow-display: var(--d2l-table-controls-shadow-display);
-				z-index: 6; /* Must be greater than d2l-table-wrapper and d2l-scroll-wrapper */
-			}
-			:host([no-sticky]) {
-				z-index: auto;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Whether to render the selection summary
+		 * @type {boolean}
+		 */
+		noSelection: { type: Boolean, attribute: 'no-selection' }
+	};
+
+	static styles = [super.styles, css`
+		:host {
+			--d2l-selection-controls-background-color: var(--d2l-table-controls-background-color);
+			--d2l-selection-controls-shadow-display: var(--d2l-table-controls-shadow-display);
+			z-index: 6; /* Must be greater than d2l-table-wrapper and d2l-scroll-wrapper */
+		}
+		:host([no-sticky]) {
+			z-index: auto;
+		}
+	`];
 
 	constructor() {
 		super();