@brightspace-ui/core 3.267.3 → 3.268.1

package/components/table/table-wrapper.js

@@ -268,136 +268,132 @@ const SELECTORS = {
  */
 export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Hides the column borders on "default" table type
-			 * @type {boolean}
-			 */
-			noColumnBorder: {
-				attribute: 'no-column-border',
-				reflect: true,
-				type: Boolean
+	static properties = {
+		/**
+		 * Hides the column borders on "default" table type
+		 * @type {boolean}
+		 */
+		noColumnBorder: {
+			attribute: 'no-column-border',
+			reflect: true,
+			type: Boolean
+		},
+		/**
+		 * Whether the header row is sticky. Useful for long tables to "stick" the header row in place as the user scrolls.
+		 * @type {boolean}
+		 */
+		stickyHeaders: {
+			attribute: 'sticky-headers',
+			reflect: true,
+			type: Boolean
+		},
+		/**
+		 * When used in combo with `sticky-headers`, whether to additionally wrap the table in a scroll-wrapper. Requires sticky headers to be in a separate thead.
+		 * @type {boolean}
+		 */
+		stickyHeadersScrollWrapper: {
+			attribute: 'sticky-headers-scroll-wrapper',
+			reflect: true,
+			type: Boolean
+		},
+		_stickyWidth: { state: true },
+		/**
+		 * Type of table style to apply. The "light" style has fewer borders and tighter padding.
+		 * @type {'default'|'light'}
+		 */
+		type: {
+			reflect: true,
+			type: String
+		},
+		_controlsScrolled: { state: true },
+		_noScrollWidth: {
+			attribute: '_no-scroll-width',
+			reflect: true,
+			type: Boolean,
+		},
+		/**
+		 * The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed
+		 * @type {'clean'|'dirty'|'loading'}
+		 */
+		dataState: {
+			reflect: true,
+			type: String
+		},
+		/**
+		 * The text displayed on the dirty state overlay when the 'dirty' dataState is set.
+		 * @type {string}
+		 */
+		dirtyText: {
+			reflect: true,
+			attribute: 'dirty-text',
+			required: {
+				dependentProps: ['dataState'],
+				validator: (_value, elem, hasValue) => hasValue || elem.dataState !== 'dirty'
 			},
-			/**
-			 * Whether the header row is sticky. Useful for long tables to "stick" the header row in place as the user scrolls.
-			 * @type {boolean}
-			 */
-			stickyHeaders: {
-				attribute: 'sticky-headers',
-				reflect: true,
-				type: Boolean
+			type: String
+		},
+		/**
+		 * The text displayed on the button dirty state overlay when the 'dirty' dataState is set.
+		 * @type {string}
+		 */
+		dirtyButtonText: {
+			reflect: true,
+			attribute: 'dirty-button-text',
+			required: {
+				dependentProps: ['dataState'],
+				validator: (_value, elem, hasValue) => hasValue || elem.dataState !== 'dirty'
 			},
-			/**
-			 * When used in combo with `sticky-headers`, whether to additionally wrap the table in a scroll-wrapper. Requires sticky headers to be in a separate thead.
-			 * @type {boolean}
-			 */
-			stickyHeadersScrollWrapper: {
-				attribute: 'sticky-headers-scroll-wrapper',
-				reflect: true,
-				type: Boolean
-			},
-			_stickyWidth: { state: true },
-			/**
-			 * Type of table style to apply. The "light" style has fewer borders and tighter padding.
-			 * @type {'default'|'light'}
-			 */
-			type: {
-				reflect: true,
-				type: String
-			},
-			_controlsScrolled: { state: true },
-			_noScrollWidth: {
-				attribute: '_no-scroll-width',
-				reflect: true,
-				type: Boolean,
-			},
-			/**
-			 * The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed
-			 * @type {'clean'|'dirty'|'loading'}
-			 */
-			dataState: {
-				reflect: true,
-				type: String
-			},
-			/**
-			 * The text displayed on the dirty state overlay when the 'dirty' dataState is set.
-			 * @type {string}
-			 */
-			dirtyText: {
-				reflect: true,
-				attribute: 'dirty-text',
-				required: {
-					dependentProps: ['dataState'],
-					validator: (_value, elem, hasValue) => hasValue || elem.dataState !== 'dirty'
-				},
-				type: String
-			},
-			/**
-			 * The text displayed on the button dirty state overlay when the 'dirty' dataState is set.
-			 * @type {string}
-			 */
-			dirtyButtonText: {
-				reflect: true,
-				attribute: 'dirty-button-text',
-				required: {
-					dependentProps: ['dataState'],
-					validator: (_value, elem, hasValue) => hasValue || elem.dataState !== 'dirty'
-				},
-				type: String
-			}
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				--d2l-table-border: 1px solid var(--d2l-table-border-color);
-				--d2l-table-border-color: var(--d2l-color-mica);
-				--d2l-table-border-radius: 0.3rem;
-				--d2l-table-border-radius-sticky-offset: calc(1px - var(--d2l-table-border-radius));
-				--d2l-table-cell-overall-height: 46px;
-				--d2l-table-cell-height: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-padding));
-				--d2l-table-cell-padding: 0.7rem;
-				--d2l-table-cell-padding-alt: calc(0.7rem - 1px) 0.7rem 0.7rem 0.7rem;
-				--d2l-table-cell-col-sort-button-size-offset: 4px;
-				--d2l-table-header-background-color: var(--d2l-color-regolith);
-				--d2l-table-row-border-color-selected: var(--d2l-color-celestine);
-				--d2l-table-row-background-color-selected: var(--d2l-color-celestine-plus-2);
-				display: block;
-				width: 100%;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			:host([type="light"]) {
-				--d2l-table-border-radius: 0rem; /* stylelint-disable-line length-zero-no-unit */
-				--d2l-table-border-radius-sticky-offset: 0rem; /* stylelint-disable-line length-zero-no-unit */
-				--d2l-table-border-color: var(--d2l-color-gypsum);
-				--d2l-table-header-background-color: #ffffff;
-			}
-			:host([sticky-headers]) {
-				--d2l-table-controls-shadow-display: none;
-			}
-			.d2l-sticky-headers-backdrop {
-				position: sticky;
-				top: calc(var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius));
-				width: 100%;
-				z-index: 2; /* Must sit under d2l-table sticky-headers but over sticky columns and regular cells */
-			}
-			.d2l-sticky-headers-backdrop::after {
-				background-color: var(--d2l-table-controls-background-color, white);
-				bottom: 0;
-				content: "";
-				position: absolute;
-				top: calc(-7px - var(--d2l-table-border-radius)); /* 6px for the d2l-table-controls margin-bottom, 1px overlap to fix zoom issues */
-				width: 100%;
-			}
-			slot[name="pager"]::slotted(*) {
-				margin-top: 12px;
-			}
-		`;
-	}
+			type: String
+		}
+	};
+
+	static styles = css`
+		:host {
+			--d2l-table-border: 1px solid var(--d2l-table-border-color);
+			--d2l-table-border-color: var(--d2l-color-mica);
+			--d2l-table-border-radius: 0.3rem;
+			--d2l-table-border-radius-sticky-offset: calc(1px - var(--d2l-table-border-radius));
+			--d2l-table-cell-overall-height: 46px;
+			--d2l-table-cell-height: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-padding));
+			--d2l-table-cell-padding: 0.7rem;
+			--d2l-table-cell-padding-alt: calc(0.7rem - 1px) 0.7rem 0.7rem 0.7rem;
+			--d2l-table-cell-col-sort-button-size-offset: 4px;
+			--d2l-table-header-background-color: var(--d2l-color-regolith);
+			--d2l-table-row-border-color-selected: var(--d2l-color-celestine);
+			--d2l-table-row-background-color-selected: var(--d2l-color-celestine-plus-2);
+			display: block;
+			width: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([type="light"]) {
+			--d2l-table-border-radius: 0rem; /* stylelint-disable-line length-zero-no-unit */
+			--d2l-table-border-radius-sticky-offset: 0rem; /* stylelint-disable-line length-zero-no-unit */
+			--d2l-table-border-color: var(--d2l-color-gypsum);
+			--d2l-table-header-background-color: #ffffff;
+		}
+		:host([sticky-headers]) {
+			--d2l-table-controls-shadow-display: none;
+		}
+		.d2l-sticky-headers-backdrop {
+			position: sticky;
+			top: calc(var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius));
+			width: 100%;
+			z-index: 2; /* Must sit under d2l-table sticky-headers but over sticky columns and regular cells */
+		}
+		.d2l-sticky-headers-backdrop::after {
+			background-color: var(--d2l-table-controls-background-color, white);
+			bottom: 0;
+			content: "";
+			position: absolute;
+			top: calc(-7px - var(--d2l-table-border-radius)); /* 6px for the d2l-table-controls margin-bottom, 1px overlap to fix zoom issues */
+			width: 100%;
+		}
+		slot[name="pager"]::slotted(*) {
+			margin-top: 12px;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/tabs/tab-internal.js

@@ -13,85 +13,81 @@ const keyCodes = {
 // remove file with GAUD-8299-core-tabs-use-new-structure flag clean up
 class Tab extends SkeletonMixin(LitElement) {
 
-	static get properties() {
-		return {
-			ariaSelected: { type: String, reflect: true, attribute: 'aria-selected' },
-			controlsPanel: { type: String, reflect: true, attribute: 'controls-panel' },
-			// eslint-disable-next-line lit/no-native-attributes
-			role: { type: String, reflect: true },
-			text: { type: String }
-		};
-	}
+	static properties = {
+		ariaSelected: { type: String, reflect: true, attribute: 'aria-selected' },
+		controlsPanel: { type: String, reflect: true, attribute: 'controls-panel' },
+		// eslint-disable-next-line lit/no-native-attributes
+		role: { type: String, reflect: true },
+		text: { type: String }
+	};
 
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				box-sizing: border-box;
-				display: inline-block;
-				max-width: 200px;
-				outline: none;
-				position: relative;
-				vertical-align: middle;
-			}
-			.d2l-tab-text {
-				--d2l-focus-ring-offset: 0;
-				margin: 0.5rem;
-				padding: 0.1rem;
-				${overflowEllipsisDeclarations}
-			}
-			:host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
-				bottom: 0.15rem;
-				top: 0.15rem;
-			}
-			:host(:first-child) .d2l-tab-text {
-				margin-inline-start: 0;
-			}
-			.d2l-tab-selected-indicator {
-				border-top: 4px solid var(--d2l-theme-brand-color-primary-default);
-				border-top-left-radius: 4px;
-				border-top-right-radius: 4px;
-				bottom: 0;
-				display: none;
-				margin: 1px 0.6rem 0 0.6rem;
-				position: absolute;
-				-webkit-transition: box-shadow 0.2s;
-				transition: box-shadow 0.2s;
-				width: calc(100% - 1.2rem);
-			}
-			:host([skeleton]) .d2l-tab-selected-indicator {
-				position: absolute; /* make sure skeleton styles do not override this */
-			}
-			.d2l-tab-text-skeletize-override {
-				min-width: 50px;
-			}
-			:host(:first-child) .d2l-tab-selected-indicator {
-				margin-inline-start: 0;
-				width: calc(100% - 0.6rem);
-			}
-			${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-theme-text-color-interactive-default);` })}
-			:host([aria-selected="true"]:focus) {
-				text-decoration: none;
-			}
-			:host(:hover) {
-				color: var(--d2l-theme-text-color-interactive-default);
-				cursor: pointer;
-			}
-			:host([aria-selected="true"]:hover) {
-				color: inherit;
-				cursor: default;
-			}
-			:host([aria-selected="true"]) .d2l-tab-selected-indicator {
-				display: block;
-			}
+	static styles = [super.styles, css`
+		:host {
+			box-sizing: border-box;
+			display: inline-block;
+			max-width: 200px;
+			outline: none;
+			position: relative;
+			vertical-align: middle;
+		}
+		.d2l-tab-text {
+			--d2l-focus-ring-offset: 0;
+			margin: 0.5rem;
+			padding: 0.1rem;
+			${overflowEllipsisDeclarations}
+		}
+		:host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
+			bottom: 0.15rem;
+			top: 0.15rem;
+		}
+		:host(:first-child) .d2l-tab-text {
+			margin-inline-start: 0;
+		}
+		.d2l-tab-selected-indicator {
+			border-top: 4px solid var(--d2l-theme-brand-color-primary-default);
+			border-top-left-radius: 4px;
+			border-top-right-radius: 4px;
+			bottom: 0;
+			display: none;
+			margin: 1px 0.6rem 0 0.6rem;
+			position: absolute;
+			-webkit-transition: box-shadow 0.2s;
+			transition: box-shadow 0.2s;
+			width: calc(100% - 1.2rem);
+		}
+		:host([skeleton]) .d2l-tab-selected-indicator {
+			position: absolute; /* make sure skeleton styles do not override this */
+		}
+		.d2l-tab-text-skeletize-override {
+			min-width: 50px;
+		}
+		:host(:first-child) .d2l-tab-selected-indicator {
+			margin-inline-start: 0;
+			width: calc(100% - 0.6rem);
+		}
+		${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-theme-text-color-interactive-default);` })}
+		:host([aria-selected="true"]:focus) {
+			text-decoration: none;
+		}
+		:host(:hover) {
+			color: var(--d2l-theme-text-color-interactive-default);
+			cursor: pointer;
+		}
+		:host([aria-selected="true"]:hover) {
+			color: inherit;
+			cursor: default;
+		}
+		:host([aria-selected="true"]) .d2l-tab-selected-indicator {
+			display: block;
+		}
 
-			@media (prefers-reduced-motion: reduce) {
-				.d2l-tab-selected-indicator {
-					-webkit-transition: none;
-					transition: none;
-				}
+		@media (prefers-reduced-motion: reduce) {
+			.d2l-tab-selected-indicator {
+				-webkit-transition: none;
+				transition: none;
 			}
-		`];
-	}
+		}
+	`];
 
 	constructor() {
 		super();

package/components/tabs/tab-mixin.js

@@ -10,30 +10,28 @@ const keyCodes = {
 
 export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			hidden: { type: Boolean, reflect: true },
-			/**
-			 * Use to select the tab. Only one tab can be selected at a time.
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			role: { type: String, reflect: true },
-			/**
-			 * @ignore
-			 */
-			tabIndex: { type: Number, reflect: true, attribute: 'tabindex' },
-			_clicked: { type: Boolean, reflect: true },
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		hidden: { type: Boolean, reflect: true },
+		/**
+		 * Use to select the tab. Only one tab can be selected at a time.
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		role: { type: String, reflect: true },
+		/**
+		 * @ignore
+		 */
+		tabIndex: { type: Number, reflect: true, attribute: 'tabindex' },
+		_clicked: { type: Boolean, reflect: true },
+	};
 
 	static get styles() {
 		const styles = [ css`

package/components/tabs/tab-panel-mixin.js

@@ -4,58 +4,54 @@ import { getUseNewTabsStructureFlag } from './tabs.js';
 
 export const TabPanelMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Id of the tab that labels this panel
-			 * @type {string}
-			 */
-			labelledBy: { type: String, attribute: 'labelled-by', reflect: true },
-			/**
-			 * Opt out of default padding/whitespace around the panel
-			 * @type {boolean}
-			 */
-			noPadding: { type: Boolean, attribute: 'no-padding', reflect: true },
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			role: { type: String, reflect: true },
-			/**
-			 * DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.
-			 * Remove with GAUD-8299-core-tabs-use-new-structure flag clean up.
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-			/**
-			 * DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.
-			 * Remove with GAUD-8299-core-tabs-use-new-structure flag clean up.
-			 * @type {string}
-			 */
-			text: { type: String },
-			_selected: { type: Boolean, attribute: '_selected', reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Id of the tab that labels this panel
+		 * @type {string}
+		 */
+		labelledBy: { type: String, attribute: 'labelled-by', reflect: true },
+		/**
+		 * Opt out of default padding/whitespace around the panel
+		 * @type {boolean}
+		 */
+		noPadding: { type: Boolean, attribute: 'no-padding', reflect: true },
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		role: { type: String, reflect: true },
+		/**
+		 * DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.
+		 * Remove with GAUD-8299-core-tabs-use-new-structure flag clean up.
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+		/**
+		 * DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.
+		 * Remove with GAUD-8299-core-tabs-use-new-structure flag clean up.
+		 * @type {string}
+		 */
+		text: { type: String },
+		_selected: { type: Boolean, attribute: '_selected', reflect: true }
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				box-sizing: border-box;
-				display: none;
-				margin: 1.2rem 0 0 0;
-			}
-			:host([no-padding]) {
-				margin: 0;
-			}
-			/* clean up with GAUD-8299-core-tabs-use-new-structure flag clean up */
-			:host([selected]) {
-				display: block;
-			}
-			:host([_selected]) {
-				display: block;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			box-sizing: border-box;
+			display: none;
+			margin: 1.2rem 0 0 0;
+		}
+		:host([no-padding]) {
+			margin: 0;
+		}
+		/* clean up with GAUD-8299-core-tabs-use-new-structure flag clean up */
+		:host([selected]) {
+			display: block;
+		}
+		:host([_selected]) {
+			display: block;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/tabs/tab.js

@@ -18,15 +18,13 @@ const focusRingStyles = getFocusRingStyles(
  */
 class Tab extends TabMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: REQUIRED: The text used for the tab and for labelling the corresponding panel
-			 * @type {string}
-			 */
-			text: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: REQUIRED: The text used for the tab and for labelling the corresponding panel
+		 * @type {string}
+		 */
+		text: { type: String }
+	};
 
 	static get styles() {
 		const styles = [ css`