@brightspace-ui/core 3.268.0 → 3.268.2

package/components/selection/selection-action-menu-item.js

@@ -13,21 +13,17 @@ import { SelectionInfo } from './selection-mixin.js';
  */
 class ActionMenuItem extends SelectionActionMixin(MenuItemMixin(LitElement)) {
 
-	static get styles() {
-		return [ menuItemStyles,
-			css`
-				:host {
-					align-items: center;
-					display: flex;
-					padding: 0.75rem 1rem;
-				}
-				d2l-icon {
-					flex: none;
-					margin-inline-start: 6px;
-				}
-			`
-		];
-	}
+	static styles = [menuItemStyles, css`
+		:host {
+			align-items: center;
+			display: flex;
+			padding: 0.75rem 1rem;
+		}
+		d2l-icon {
+			flex: none;
+			margin-inline-start: 6px;
+		}
+	`];
 
 	connectedCallback() {
 		super.connectedCallback();

package/components/selection/selection-action.js

@@ -13,31 +13,27 @@ import { SelectionInfo } from './selection-mixin.js';
  */
 class Action extends FocusMixin(SelectionActionMixin(ButtonMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Preset icon key (e.g. `tier1:gear`)
-			 * @type {string}
-			 */
-			icon: { type: String, reflect: true },
-			/**
-			 * REQUIRED: The text for the action
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Preset icon key (e.g. `tier1:gear`)
+		 * @type {string}
+		 */
+		icon: { type: String, reflect: true },
+		/**
+		 * REQUIRED: The text for the action
+		 * @type {string}
+		 */
+		text: { type: String, reflect: true }
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	static get focusElementSelector() {
 		return 'd2l-button-subtle';

package/components/selection/selection-controls.js

@@ -17,103 +17,99 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  */
 export class SelectionControls extends PageableSubscriberMixin(SelectionObserverMixin(LocalizeCoreElement(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether to render select-all and selection summary
-			 * @type {boolean}
-			 */
-			noSelection: { type: Boolean, attribute: 'no-selection' },
-			/**
-			 * ADVANCED: Text to display if no items are selected (overrides pageable counts)
-			 * @type {string}
-			 */
-			noSelectionText: { type: String, attribute: 'no-selection-text' },
-			/**
-			 * Disables sticky positioning for the controls
-			 * @type {boolean}
-			 */
-			noSticky: { type: Boolean, attribute: 'no-sticky', reflect: true },
-			/**
-			 * Whether all pages can be selected
-			 * @type {boolean}
-			 */
-			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
-			_hasActions: { state: true },
-			_noSelectionText: { state: true },
-			_scrolled: { type: Boolean, reflect: true }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-				position: sticky;
-				top: 0;
-			}
-			:host([no-sticky]) {
-				position: static;
-			}
-			@media (prefers-reduced-motion: no-preference) {
-				.d2l-selection-controls-shadow {
-					transition: box-shadow 200ms ease-out;
-				}
-			}
-			:host([_scrolled]) .d2l-selection-controls-shadow {
-				background-color: var(--d2l-selection-controls-background-color, var(--d2l-theme-background-color-base));
-				bottom: -4px;
-				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
-				clip: rect(30px, auto, 200px, auto);
-				display: var(--d2l-selection-controls-shadow-display, block);
-				height: 40px;
-				margin: 0 calc(-1*var(--d2l-selection-controls-padding, 0px));
-				padding: 0 var(--d2l-selection-controls-padding, 0);
-				position: absolute;
-				width: 100%;
-				z-index: -1;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-selection-controls-container {
-				align-items: center;
-				background-color: var(--d2l-selection-controls-background-color, var(--d2l-theme-background-color-base));
-				display: flex;
-				margin: 6px calc(-1*var(--d2l-selection-controls-padding, 0px));
-				min-height: 54px;
-				padding: 0 var(--d2l-selection-controls-padding, 0);
-			}
-			:host([no-sticky]) .d2l-selection-controls-container {
-				background-color: transparent;
-			}
-			.d2l-selection-controls-container-slim {
-				min-height: 36px;
-			}
-			d2l-selection-select-all, d2l-selection-summary {
-				flex: none;
-			}
-			d2l-selection-select-all + d2l-selection-summary {
-				margin-inline-start: 0.9rem;
-			}
-			d2l-selection-select-all-pages {
-				flex: none;
-				margin-inline-start: 0.45rem;
-			}
-			.d2l-selection-controls-actions {
-				--d2l-overflow-group-justify-content: flex-end;
-				flex: auto;
-				margin-inline-end: var(--d2l-selection-controls-offset, 0);
-				text-align: end;
-			}
-			.d2l-sticky-edge {
-				left: 0;
-				position: absolute;
-				right: 0;
-				top: -1px;
+	static properties = {
+		/**
+		 * Whether to render select-all and selection summary
+		 * @type {boolean}
+		 */
+		noSelection: { type: Boolean, attribute: 'no-selection' },
+		/**
+		 * ADVANCED: Text to display if no items are selected (overrides pageable counts)
+		 * @type {string}
+		 */
+		noSelectionText: { type: String, attribute: 'no-selection-text' },
+		/**
+		 * Disables sticky positioning for the controls
+		 * @type {boolean}
+		 */
+		noSticky: { type: Boolean, attribute: 'no-sticky', reflect: true },
+		/**
+		 * Whether all pages can be selected
+		 * @type {boolean}
+		 */
+		selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
+		_hasActions: { state: true },
+		_noSelectionText: { state: true },
+		_scrolled: { type: Boolean, reflect: true }
+	};
+
+	static styles = css`
+		:host {
+			display: block;
+			position: sticky;
+			top: 0;
+		}
+		:host([no-sticky]) {
+			position: static;
+		}
+		@media (prefers-reduced-motion: no-preference) {
+			.d2l-selection-controls-shadow {
+				transition: box-shadow 200ms ease-out;
 			}
-		`;
-	}
+		}
+		:host([_scrolled]) .d2l-selection-controls-shadow {
+			background-color: var(--d2l-selection-controls-background-color, var(--d2l-theme-background-color-base));
+			bottom: -4px;
+			box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
+			clip: rect(30px, auto, 200px, auto);
+			display: var(--d2l-selection-controls-shadow-display, block);
+			height: 40px;
+			margin: 0 calc(-1*var(--d2l-selection-controls-padding, 0px));
+			padding: 0 var(--d2l-selection-controls-padding, 0);
+			position: absolute;
+			width: 100%;
+			z-index: -1;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-selection-controls-container {
+			align-items: center;
+			background-color: var(--d2l-selection-controls-background-color, var(--d2l-theme-background-color-base));
+			display: flex;
+			margin: 6px calc(-1*var(--d2l-selection-controls-padding, 0px));
+			min-height: 54px;
+			padding: 0 var(--d2l-selection-controls-padding, 0);
+		}
+		:host([no-sticky]) .d2l-selection-controls-container {
+			background-color: transparent;
+		}
+		.d2l-selection-controls-container-slim {
+			min-height: 36px;
+		}
+		d2l-selection-select-all, d2l-selection-summary {
+			flex: none;
+		}
+		d2l-selection-select-all + d2l-selection-summary {
+			margin-inline-start: 0.9rem;
+		}
+		d2l-selection-select-all-pages {
+			flex: none;
+			margin-inline-start: 0.45rem;
+		}
+		.d2l-selection-controls-actions {
+			--d2l-overflow-group-justify-content: flex-end;
+			flex: auto;
+			margin-inline-end: var(--d2l-selection-controls-offset, 0);
+			text-align: end;
+		}
+		.d2l-sticky-edge {
+			left: 0;
+			position: absolute;
+			right: 0;
+			top: -1px;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/selection/selection-input.js

@@ -19,50 +19,46 @@ const keyCodes = {
  */
 class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * State of the input
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Tooltip text when disabled
-			 * @type {string}
-			 */
-			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
-			/**
-			 * Private. Force hovering state of input
-			 * @ignore
-			 * @type {boolean}
-			 */
-			hovering: { type: Boolean },
-			/**
-			 * REQUIRED: Key for the selectable
-			 * @type {string}
-			 */
-			key: { type: String },
-			_indeterminate: { type: Boolean },
-			_provider: { type: Object }
-		};
-	}
-
-	static get styles() {
-		return [ super.styles, radioStyles, css`
-			:host {
-				display: inline-block;
-				line-height: normal;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * State of the input
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Tooltip text when disabled
+		 * @type {string}
+		 */
+		disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+		/**
+		 * Private. Force hovering state of input
+		 * @ignore
+		 * @type {boolean}
+		 */
+		hovering: { type: Boolean },
+		/**
+		 * REQUIRED: Key for the selectable
+		 * @type {string}
+		 */
+		key: { type: String },
+		_indeterminate: { type: Boolean },
+		_provider: { type: Object }
+	};
+
+	static styles = [super.styles, radioStyles, css`
+		:host {
+			display: inline-block;
+			line-height: normal;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/selection/selection-mixin.js

@@ -51,19 +51,17 @@ export class SelectionInfo {
 
 export const SelectionMixin = superclass => class extends CollectionMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			selectionNoInputArrowKeyBehaviour: { type: Boolean, attribute: 'selection-no-input-arrow-key-behavior' },
-			/**
-			 * Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.
-			 * @type {boolean}
-			 */
-			selectionSingle: { type: Boolean, attribute: 'selection-single' }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		selectionNoInputArrowKeyBehaviour: { type: Boolean, attribute: 'selection-no-input-arrow-key-behavior' },
+		/**
+		 * Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.
+		 * @type {boolean}
+		 */
+		selectionSingle: { type: Boolean, attribute: 'selection-single' }
+	};
 
 	constructor() {
 		super();

package/components/selection/selection-observer-mixin.js

@@ -3,22 +3,20 @@ import { SelectionInfo } from './selection-mixin.js';
 
 export const SelectionObserverMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * Id of the `SelectionMixin` component this component wants to observe (if not located within that component)
-			 * @type {string}
-			 */
-			selectionFor: { type: String, reflect: true, attribute: 'selection-for' },
-			/**
-			 * The selection info (set by the selection component)
-			 * @ignore
-			 * @type {object}
-			 */
-			selectionInfo: { type: Object },
-			_provider: { type: Object, attribute: false }
-		};
-	}
+	static properties = {
+		/**
+		 * Id of the `SelectionMixin` component this component wants to observe (if not located within that component)
+		 * @type {string}
+		 */
+		selectionFor: { type: String, reflect: true, attribute: 'selection-for' },
+		/**
+		 * The selection info (set by the selection component)
+		 * @ignore
+		 * @type {object}
+		 */
+		selectionInfo: { type: Object },
+		_provider: { type: Object, attribute: false }
+	};
 
 	constructor() {
 		super();

package/components/selection/selection-select-all-pages.js

@@ -12,16 +12,14 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  */
 class SelectAllPages extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(LitElement))) {
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	static get focusElementSelector() {
 		return 'd2l-button-subtle';

package/components/selection/selection-select-all.js

@@ -12,27 +12,23 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  */
 class SelectAll extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the select all checkbox
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean }
-		};
-	}
+	static properties = {
+		/**
+		 * Disables the select all checkbox
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean }
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-				line-height: normal;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: inline-block;
+			line-height: normal;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/selection/selection-summary.js

@@ -11,29 +11,25 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  */
 class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Text to display if no items are selected
-			 * @type {string}
-			 */
-			noSelectionText: { type: String, attribute: 'no-selection-text' }
-		};
-	}
+	static properties = {
+		/**
+		 * Text to display if no items are selected
+		 * @type {string}
+		 */
+		noSelectionText: { type: String, attribute: 'no-selection-text' }
+	};
 
-	static get styles() {
-		return [bodyCompactStyles, css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			p {
-				margin: 0;
-			}
-		`];
-	}
+	static styles = [bodyCompactStyles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		p {
+			margin: 0;
+		}
+	`];
 
 	render() {
 		if (!this._summary) {

package/components/skeleton/README.md

@@ -23,9 +23,7 @@ import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton
 
 class MyElement extends SkeletonMixin(LitElement) {
 
-  static get styles() {
-    return [ super.styles, ... ];
-  }
+  static styles = [ super.styles, ... ];
 
 }
 ```
@@ -63,9 +61,7 @@ import { selectStyles } from '@brightspace-ui/core/components/inputs/input-selec
 import { SkeletonMixin } from '@brightspace-ui/core/skeleton/skeleton-mixin.js';
 
 class MyElement extends SkeletonMixin(LitElement) {
-  static get styles() {
-    return [super.styles, selectStyles];
-  }
+  static styles = [super.styles, selectStyles];
   render() {
     return html`
       <div class="d2l-skeletize">

package/components/skeleton/skeleton-group-mixin.js

@@ -4,11 +4,9 @@ import { SubscriberRegistryController } from '../../controllers/subscriber/subsc
 
 export const SkeletonGroupMixin = dedupeMixin(superclass => class extends SkeletonMixin(superclass) {
 
-	static get properties() {
-		return {
-			_anySubscribersWithSkeletonActive : { state: true },
-		};
-	}
+	static properties = {
+		_anySubscribersWithSkeletonActive : { state: true },
+	};
 
 	constructor() {
 		super();

package/components/skeleton/skeleton-mixin.js

@@ -166,15 +166,13 @@ export const skeletonStyles = css`
 
 export const SkeletonMixin = dedupeMixin(superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).
-			 * @type {boolean}
-			 */
-			skeleton: { reflect: true, type: Boolean },
-		};
-	}
+	static properties = {
+		/**
+		 * Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).
+		 * @type {boolean}
+		 */
+		skeleton: { reflect: true, type: Boolean },
+	};
 
 	static get styles() {
 		const styles = [ skeletonStyles ];