@brightspace-ui/core 3.267.1 → 3.268.0

package/components/backdrop/backdrop-loading.js

@@ -22,120 +22,116 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
  */
 class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * The state of data in the element being overlaid. 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
-			},
-			/**
-			 * Used to identify content that the backdrop should make inert
-			 * @type {string}
-			 */
-			for: { type: String, required: true },
-			/**
-			 * The text displayed on the dirty state overlay when the 'dirty' dataState is set.
-			 * @type {string}
-			 */
-			dirtyText: {
-				reflect: true,
-				attribute: 'dirty-text',
-				type: String
-			},
-			/**
-			 * The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.
-			 * @type {string}
-			 */
-			dirtyButtonText: {
-				reflect: true,
-				attribute: 'dirty-button-text',
-				type: String
-			},
-			_state: { type: String, reflect: true },
-			_spinnerTop: { state: true },
-			_ariaContent: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [css`
-			#visible {
-				display: none;
-			}
+	static properties = {
+		/**
+		 * The state of data in the element being overlaid. 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
+		},
+		/**
+		 * Used to identify content that the backdrop should make inert
+		 * @type {string}
+		 */
+		for: { type: String, required: true },
+		/**
+		 * The text displayed on the dirty state overlay when the 'dirty' dataState is set.
+		 * @type {string}
+		 */
+		dirtyText: {
+			reflect: true,
+			attribute: 'dirty-text',
+			type: String
+		},
+		/**
+		 * The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.
+		 * @type {string}
+		 */
+		dirtyButtonText: {
+			reflect: true,
+			attribute: 'dirty-button-text',
+			type: String
+		},
+		_state: { type: String, reflect: true },
+		_spinnerTop: { state: true },
+		_ariaContent: { state: true }
+	};
+
+	static styles = [css`
+		#visible {
+			display: none;
+		}
 
-			:host([_state="showing"]),
-			:host([_state="shown"]),
-			:host([_state="hiding"]),
-			:host([_state="showing"]) #visible,
-			:host([_state="shown"]) #visible,
-			:host([_state="hiding"]) #visible {
-				display: flex;
-				height: 100%;
-				justify-content: center;
-				position: absolute;
-				top: 0;
-				width: 100%;
-				z-index: 999;
-			}
+		:host([_state="showing"]),
+		:host([_state="shown"]),
+		:host([_state="hiding"]),
+		:host([_state="showing"]) #visible,
+		:host([_state="shown"]) #visible,
+		:host([_state="hiding"]) #visible {
+			display: flex;
+			height: 100%;
+			justify-content: center;
+			position: absolute;
+			top: 0;
+			width: 100%;
+			z-index: 999;
+		}
 
-			.backdrop {
-				background-color: var(--d2l-theme-backdrop-background-color);
-				height: 100%;
-				opacity: 0;
-				position: absolute;
-				top: 0;
-				width: 100%;
-			}
-			:host([_state="shown"]) .backdrop {
-				opacity: var(--d2l-theme-backdrop-opacity);
-				transition: opacity ${FADE_DURATION_MS}ms ease-in;
-			}
-			:host([_state="hiding"]) .backdrop {
-				transition: opacity ${FADE_DURATION_MS}ms ease-out;
-			}
+		.backdrop {
+			background-color: var(--d2l-theme-backdrop-background-color);
+			height: 100%;
+			opacity: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+		:host([_state="shown"]) .backdrop {
+			opacity: var(--d2l-theme-backdrop-opacity);
+			transition: opacity ${FADE_DURATION_MS}ms ease-in;
+		}
+		:host([_state="hiding"]) .backdrop {
+			transition: opacity ${FADE_DURATION_MS}ms ease-out;
+		}
 
-			d2l-loading-spinner {
-				opacity: 0;
-				position: absolute;
-			}
-			:host([_state="shown"]) d2l-loading-spinner {
-				opacity: 1;
-				transition: opacity ${FADE_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
-			}
-			:host([_state="shown"][dataState="dirty"]) d2l-loading-spinner,
-			:host([_state="hiding"]) d2l-loading-spinner {
-				opacity: 0;
-				transition: opacity ${FADE_DURATION_MS}ms ease-out;
-			}
+		d2l-loading-spinner {
+			opacity: 0;
+			position: absolute;
+		}
+		:host([_state="shown"]) d2l-loading-spinner {
+			opacity: 1;
+			transition: opacity ${FADE_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
+		}
+		:host([_state="shown"][dataState="dirty"]) d2l-loading-spinner,
+		:host([_state="hiding"]) d2l-loading-spinner {
+			opacity: 0;
+			transition: opacity ${FADE_DURATION_MS}ms ease-out;
+		}
 
-			d2l-backdrop-dirty-overlay {
-				background-color: var(--d2l-theme-backdrop-dialog-color);
-				height: fit-content;
-				justify-content: center;
-				opacity: 0;
-				position: relative;
-				top: 0;
-				z-index: 1000;
-			}
-			:host([_state="shown"]) d2l-backdrop-dirty-overlay {
-				opacity: 1;
-				transition: opacity ${FADE_DURATION_MS}ms ease-in;
-			}
-			:host([_state="shown"][dataState="loading"]) d2l-backdrop-dirty-overlay,
-			:host([_state="hiding"]) d2l-backdrop-dirty-overlay {
-				opacity: 0;
-				transition: opacity ${FADE_DURATION_MS}ms ease-out;
-			}
+		d2l-backdrop-dirty-overlay {
+			background-color: var(--d2l-theme-backdrop-dialog-color);
+			height: fit-content;
+			justify-content: center;
+			opacity: 0;
+			position: relative;
+			top: 0;
+			z-index: 1000;
+		}
+		:host([_state="shown"]) d2l-backdrop-dirty-overlay {
+			opacity: 1;
+			transition: opacity ${FADE_DURATION_MS}ms ease-in;
+		}
+		:host([_state="shown"][dataState="loading"]) d2l-backdrop-dirty-overlay,
+		:host([_state="hiding"]) d2l-backdrop-dirty-overlay {
+			opacity: 0;
+			transition: opacity ${FADE_DURATION_MS}ms ease-out;
+		}
 
-			@media (prefers-reduced-motion: reduce) {
-				* { transition: none; }
-			}
-		`];
-	}
+		@media (prefers-reduced-motion: reduce) {
+			* { transition: none; }
+		}
+	`];
 
 	constructor() {
 		super();

package/components/backdrop/backdrop.js

@@ -20,64 +20,60 @@ let scrollOverflow = null;
  */
 class Backdrop extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: id of the target element to display backdrop behind
-			 * @type {string}
-			 */
-			forTarget: { type: String, attribute: 'for-target' },
-
-			/**
-			 * Disables the fade-out transition while the backdrop is being hidden
-			 * @type {boolean}
-			 */
-			noAnimateHide: { type: Boolean, attribute: 'no-animate-hide' },
-
-			/**
-			 * Used to control whether the backdrop is shown
-			 * @type {boolean}
-			 */
-			shown: { type: Boolean },
-			_state: { type: String, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: id of the target element to display backdrop behind
+		 * @type {string}
+		 */
+		forTarget: { type: String, attribute: 'for-target' },
+
+		/**
+		 * Disables the fade-out transition while the backdrop is being hidden
+		 * @type {boolean}
+		 */
+		noAnimateHide: { type: Boolean, attribute: 'no-animate-hide' },
+
+		/**
+		 * Used to control whether the backdrop is shown
+		 * @type {boolean}
+		 */
+		shown: { type: Boolean },
+		_state: { type: String, reflect: true }
+	};
 
-	static get styles() {
-		return [ css`
-			:host {
-				background-color: var(--d2l-theme-backdrop-background-color);
-				height: 0;
-				left: 0;
-				opacity: 0;
-				position: fixed;
-				top: 0;
-				transition: opacity ${TRANSITION_DURATION}ms ease-in;
-				width: 0;
-				z-index: 999;
-			}
+	static styles = [ css`
+		:host {
+			background-color: var(--d2l-theme-backdrop-background-color);
+			height: 0;
+			left: 0;
+			opacity: 0;
+			position: fixed;
+			top: 0;
+			transition: opacity ${TRANSITION_DURATION}ms ease-in;
+			width: 0;
+			z-index: 999;
+		}
+		:host([slow-transition]) {
+			transition: opacity 1200ms ease-in;
+		}
+		:host([_state="showing"]) {
+			opacity: var(--d2l-theme-backdrop-opacity);
+		}
+		:host([_state="showing"]),
+		:host([_state="hiding"]) {
+			height: 100%;
+			width: 100%;
+		}
+		:host([_state=null][no-animate-hide]) {
+			transition: none;
+		}
+		@media (prefers-reduced-motion: reduce) {
+			:host,
 			:host([slow-transition]) {
-				transition: opacity 1200ms ease-in;
-			}
-			:host([_state="showing"]) {
-				opacity: var(--d2l-theme-backdrop-opacity);
-			}
-			:host([_state="showing"]),
-			:host([_state="hiding"]) {
-				height: 100%;
-				width: 100%;
-			}
-			:host([_state=null][no-animate-hide]) {
 				transition: none;
 			}
-			@media (prefers-reduced-motion: reduce) {
-				:host,
-				:host([slow-transition]) {
-					transition: none;
-				}
-			}
-		`];
-	}
+		}
+	`];
 
 	constructor() {
 		super();

package/components/breadcrumbs/breadcrumb-current-page.js

@@ -5,30 +5,26 @@ import { css, html, LitElement } from 'lit';
  */
 class BreadcrumbCurrentPage extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			_role: { type: 'string', attribute: 'role', reflect: true },
-			/**
-			 * REQUIRED: The title of the current page
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		_role: { type: 'string', attribute: 'role', reflect: true },
+		/**
+		 * REQUIRED: The title of the current page
+		 * @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;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/breadcrumbs/breadcrumb.js

@@ -10,61 +10,57 @@ import { linkStyles } from '../link/link.js';
  */
 class Breadcrumb extends FocusMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			_compact: { attribute: 'data-compact', reflect: true, type: Boolean },
-			/**
-			 * @ignore
-			 */
-			_role: { type: 'string', attribute: 'role', reflect: true },
-			/**
-			 * The Url that breadcrumb is pointing to
-			 * @type {string}
-			 */
-			href: { type: String, reflect: true },
-			/**
-			 * The target of breadcrumb link
-			 * @type {string}
-			 */
-			target: { type: String, reflect: true },
-			/**
-			 * REQUIRED: The text of the breadcrumb link
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true },
-			/**
-			 * ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users
-			 * @type {string}
-			 */
-			ariaLabel: { attribute: 'aria-label', type: String, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		_compact: { attribute: 'data-compact', reflect: true, type: Boolean },
+		/**
+		 * @ignore
+		 */
+		_role: { type: 'string', attribute: 'role', reflect: true },
+		/**
+		 * The Url that breadcrumb is pointing to
+		 * @type {string}
+		 */
+		href: { type: String, reflect: true },
+		/**
+		 * The target of breadcrumb link
+		 * @type {string}
+		 */
+		target: { type: String, reflect: true },
+		/**
+		 * REQUIRED: The text of the breadcrumb link
+		 * @type {string}
+		 */
+		text: { type: String, reflect: true },
+		/**
+		 * ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users
+		 * @type {string}
+		 */
+		ariaLabel: { attribute: 'aria-label', type: String, reflect: true }
+	};
 
-	static get styles() {
-		return [linkStyles, css`
-			:host {
-				align-items: center;
-				display: inline-flex;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			:host([data-compact]) {
-				flex-direction: row-reverse;
-			}
-			d2l-icon {
-				height: 8px;
-				padding-inline: 8px 3px;
-				width: 8px;
-			}
-			d2l-icon[icon="tier1:chevron-left"] {
-				padding-inline: 0 8px;
-			}
-		`];
-	}
+	static styles = [linkStyles, css`
+		:host {
+			align-items: center;
+			display: inline-flex;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([data-compact]) {
+			flex-direction: row-reverse;
+		}
+		d2l-icon {
+			height: 8px;
+			padding-inline: 8px 3px;
+			width: 8px;
+		}
+		d2l-icon[icon="tier1:chevron-left"] {
+			padding-inline: 0 8px;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/breadcrumbs/breadcrumbs.js

@@ -9,45 +9,41 @@ import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
  */
 class Breadcrumbs extends LocalizeCoreElement(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Renders in compact mode, displaying only the last item
-			 * @type {boolean}
-			 */
-			compact: { type: Boolean, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Renders in compact mode, displaying only the last item
+		 * @type {boolean}
+		 */
+		compact: { type: Boolean, reflect: true }
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				clip-path: rect(-1em 100% calc(100% + 1em) -1em);
-				display: block;
-				font-size: 0.7rem;
-				line-height: 1.05rem;
-				${overflowEllipsisDeclarations}
-				overflow-y: clip;
-				position: relative;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			:host::after {
-				background: linear-gradient(to var(--d2l-inline-end, right), rgba(255, 255, 255, 0), rgb(251, 252, 252));
-				content: "";
-				inset-block: 0;
-				inset-inline-end: 0;
-				pointer-events: none;
-				position: absolute;
-				width: 10px;
-			}
-			:host([compact]) ::slotted(d2l-breadcrumb:not(:last-of-type)),
-			:host([compact]) ::slotted(d2l-breadcrumb-current-page) {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			clip-path: rect(-1em 100% calc(100% + 1em) -1em);
+			display: block;
+			font-size: 0.7rem;
+			line-height: 1.05rem;
+			${overflowEllipsisDeclarations}
+			overflow-y: clip;
+			position: relative;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host::after {
+			background: linear-gradient(to var(--d2l-inline-end, right), rgba(255, 255, 255, 0), rgb(251, 252, 252));
+			content: "";
+			inset-block: 0;
+			inset-inline-end: 0;
+			pointer-events: none;
+			position: absolute;
+			width: 10px;
+		}
+		:host([compact]) ::slotted(d2l-breadcrumb:not(:last-of-type)),
+		:host([compact]) ::slotted(d2l-breadcrumb-current-page) {
+			display: none;
+		}
+	`;
 
 	constructor() {
 		super();