@brightspace-ui/core 3.267.3 → 3.268.1

package/components/page/page-header-custom.js

@@ -16,125 +16,121 @@ const customScroll = isWindows && !isMobile;
  */
 class PageHeaderCustom extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * When set, the bottom slot will be a "d2l-visible-on-ancestor-target"
-			 * @type {boolean}
-			 */
-			bottomIsVisibleOnAncestorTarget: { type: Boolean, attribute: 'bottom-is-visible-on-ancestor-target' },
-			/**
-			 * Whether to render a skip nav link
-			 * @type {boolean}
-			 */
-			hasSkipNav: { type: Boolean, attribute: 'has-skip-nav', reflect: true },
-			_hasBottom: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [css`
-			:host {
-				background-color: white;
-				display: block;
-				position: relative;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.band {
-				background: linear-gradient(180deg, var(--d2l-branding-primary-color, var(--d2l-color-celestine)) 1.5rem, #ffffff 0%);
-				line-height: 0;
-				min-height: 4px;
-				position: relative; /* Needed for Firefox */
-			}
-			.band .padding {
-				display: inline-block;
-				position: unset;
-				vertical-align: top;
-			}
+	static properties = {
+		/**
+		 * When set, the bottom slot will be a "d2l-visible-on-ancestor-target"
+		 * @type {boolean}
+		 */
+		bottomIsVisibleOnAncestorTarget: { type: Boolean, attribute: 'bottom-is-visible-on-ancestor-target' },
+		/**
+		 * Whether to render a skip nav link
+		 * @type {boolean}
+		 */
+		hasSkipNav: { type: Boolean, attribute: 'has-skip-nav', reflect: true },
+		_hasBottom: { state: true }
+	};
+
+	static styles = [css`
+		:host {
+			background-color: white;
+			display: block;
+			position: relative;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.band {
+			background: linear-gradient(180deg, var(--d2l-branding-primary-color, var(--d2l-color-celestine)) 1.5rem, #ffffff 0%);
+			line-height: 0;
+			min-height: 4px;
+			position: relative; /* Needed for Firefox */
+		}
+		.band .padding {
+			display: inline-block;
+			position: unset;
+			vertical-align: top;
+		}
+		.band-scroll {
+			overflow-x: auto;
+			overflow-y: hidden;
+			scroll-behavior: smooth;
+		}
+		@media (prefers-reduced-motion: reduce) {
 			.band-scroll {
-				overflow-x: auto;
-				overflow-y: hidden;
-				scroll-behavior: smooth;
-			}
-			@media (prefers-reduced-motion: reduce) {
-				.band-scroll {
-					scroll-behavior: auto;
-				}
-			}
-			.band-scroll[data-custom-scroll] {
-				/* Firefox Styles */
-				scrollbar-color: var(--d2l-color-galena) var(--d2l-color-sylvite);
-				scrollbar-width: thin;
-			}
-			/* Webkit Styles */
-			.band-scroll[data-custom-scroll]::-webkit-scrollbar {
-				background-color: var(--d2l-color-sylvite);
-				border-radius: 8px;
-				height: 9px;
+				scroll-behavior: auto;
 			}
-			.band-scroll[data-custom-scroll]::-webkit-scrollbar-thumb {
-				background-color: var(--d2l-color-galena);
-				border-bottom: 1px solid var(--d2l-color-sylvite);
-				border-radius: 8px;
-				border-top: 1px solid var(--d2l-color-sylvite);
-			}
-			/* Faded edges styles */
+		}
+		.band-scroll[data-custom-scroll] {
+			/* Firefox Styles */
+			scrollbar-color: var(--d2l-color-galena) var(--d2l-color-sylvite);
+			scrollbar-width: thin;
+		}
+		/* Webkit Styles */
+		.band-scroll[data-custom-scroll]::-webkit-scrollbar {
+			background-color: var(--d2l-color-sylvite);
+			border-radius: 8px;
+			height: 9px;
+		}
+		.band-scroll[data-custom-scroll]::-webkit-scrollbar-thumb {
+			background-color: var(--d2l-color-galena);
+			border-bottom: 1px solid var(--d2l-color-sylvite);
+			border-radius: 8px;
+			border-top: 1px solid var(--d2l-color-sylvite);
+		}
+		/* Faded edges styles */
+		.band-scroll-before,
+		.band-scroll-after {
+			height: 100%;
+			max-height: 1.5rem; /* should match linear-background height */
+			pointer-events: none;
+			position: absolute;
+			top: 0;
+			width: var(--d2l-page-padding, 30px);
+			z-index: 2;
+		}
+		.band-scroll-before {
+			background: linear-gradient(to right, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
+			left: 0;
+		}
+		.band-scroll-after {
+			background: linear-gradient(to left, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
+			right: 0;
+		}
+		@media (max-width: 615px) {
 			.band-scroll-before,
 			.band-scroll-after {
-				height: 100%;
-				max-height: 1.5rem; /* should match linear-background height */
-				pointer-events: none;
-				position: absolute;
-				top: 0;
-				width: var(--d2l-page-padding, 30px);
-				z-index: 2;
-			}
-			.band-scroll-before {
-				background: linear-gradient(to right, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
-				left: 0;
+				width: 15px;
 			}
+		}
+		@media (min-width: 1230px) {
+			.band-scroll-before,
 			.band-scroll-after {
-				background: linear-gradient(to left, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
-				right: 0;
-			}
-			@media (max-width: 615px) {
-				.band-scroll-before,
-				.band-scroll-after {
-					width: 15px;
-				}
-			}
-			@media (min-width: 1230px) {
-				.band-scroll-before,
-				.band-scroll-after {
-					width: 30px;
-				}
-			}
-			.bottom,
-			.top {
-				border-bottom: 1px solid rgba(124, 134, 149, 0.18);
-			}
-			.bottom {
-				background-color: var(--d2l-page-header-bottom-background-color, transparent);
+				width: 30px;
 			}
-			.shadow {
-				background-color: rgba(0, 0, 0, 0.02);
-				bottom: -4px;
-				height: 4px;
-				pointer-events: none;
-				position: absolute;
-				width: 100%;
-			}
-			.max-width {
-				margin-inline: var(--d2l-page-margin-inline, auto);
-				max-width: var(--d2l-page-header-max-width, 1230px);
-			}
-			.padding {
-				padding-inline: var(--d2l-page-padding, 30px);
-			}
-		`];
-	}
+		}
+		.bottom,
+		.top {
+			border-bottom: 1px solid rgba(124, 134, 149, 0.18);
+		}
+		.bottom {
+			background-color: var(--d2l-page-header-bottom-background-color, transparent);
+		}
+		.shadow {
+			background-color: rgba(0, 0, 0, 0.02);
+			bottom: -4px;
+			height: 4px;
+			pointer-events: none;
+			position: absolute;
+			width: 100%;
+		}
+		.max-width {
+			margin-inline: var(--d2l-page-margin-inline, auto);
+			max-width: var(--d2l-page-header-max-width, 1230px);
+		}
+		.padding {
+			padding-inline: var(--d2l-page-padding, 30px);
+		}
+	`];
 
 	constructor() {
 		super();

package/components/page/page-header-immersive.js

@@ -11,80 +11,76 @@ import { RequesterMixin } from '../../mixins/provider/provider-mixin.js';
 
 class PageHeaderImmersive extends RequesterMixin(LocalizeCoreElement(LitElement)) {
 
-	static get properties() {
-		return {
-			backHref: { attribute: 'back-href', type: String },
-			backCustomText: { attribute: 'back-custom-text', type: String },
-			titleText: { attribute: 'title-text', type: String },
-			subtitleText: { attribute: 'subtitle-text', type: String },
-			_error: { state: true },
-			_hasActions: { state: true }
-		};
-	}
+	static properties = {
+		backHref: { attribute: 'back-href', type: String },
+		backCustomText: { attribute: 'back-custom-text', type: String },
+		titleText: { attribute: 'title-text', type: String },
+		subtitleText: { attribute: 'subtitle-text', type: String },
+		_error: { state: true },
+		_hasActions: { state: true }
+	};
 
-	static get styles() {
-		return [bodyCompactStyles, heading3Styles, labelStyles, highlightBorderStyles, highlightLinkStyles, css`
-			:host {
-				display: block;
-			}
-			:host([hidden]),
-			.actions[hidden] {
+	static styles = [bodyCompactStyles, heading3Styles, labelStyles, highlightBorderStyles, highlightLinkStyles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]),
+		.actions[hidden] {
+			display: none;
+		}
+		.container {
+			align-items: stretch;
+			display: flex;
+			gap: 24px;
+			height: 3.1rem;
+		}
+		.title {
+			flex: 0 1 auto;
+			min-width: 0;
+			width: 100%;
+		}
+		.back,
+		.actions {
+			flex: 0 0 auto;
+		}
+		.title,
+		.actions {
+			border-inline-start: 1px solid var(--d2l-color-gypsum);
+			padding-inline-start: 24px;
+		}
+		.title h1 {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+			justify-content: center;
+			margin: 0;
+		}
+		.actions {
+			align-items: center;
+			display: flex;
+			gap: 0.6rem;
+		}
+		.title h1 .d2l-heading-3 {
+			margin: 0;
+		}
+		.back-text-short {
+			display: none;
+		}
+		@media (max-width: 615px) {
+			.back-text-long {
 				display: none;
 			}
-			.container {
-				align-items: stretch;
-				display: flex;
-				gap: 24px;
-				height: 3.1rem;
-			}
-			.title {
-				flex: 0 1 auto;
-				min-width: 0;
-				width: 100%;
-			}
-			.back,
-			.actions {
-				flex: 0 0 auto;
-			}
-			.title,
-			.actions {
-				border-inline-start: 1px solid var(--d2l-color-gypsum);
-				padding-inline-start: 24px;
-			}
-			.title h1 {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				justify-content: center;
-				margin: 0;
-			}
-			.actions {
-				align-items: center;
-				display: flex;
-				gap: 0.6rem;
-			}
-			.title h1 .d2l-heading-3 {
-				margin: 0;
-			}
 			.back-text-short {
-				display: none;
-			}
-			@media (max-width: 615px) {
-				.back-text-long {
-					display: none;
-				}
-				.back-text-short {
-					display: inline;
-				}
+				display: inline;
 			}
-			d2l-alert {
-				margin: 10px auto;
-			}
-			.title-text {
-				${overflowEllipsisDeclarations}
-			}
-		`];
-	}
+		}
+		d2l-alert {
+			margin: 10px auto;
+		}
+		.title-text {
+			${overflowEllipsisDeclarations}
+		}
+	`];
 
 	constructor() {
 		super();

package/components/page/page-header-separator.js

@@ -7,20 +7,18 @@ import { css, html, LitElement } from 'lit';
  */
 class PageHeaderSeparator extends LitElement {
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-				margin: 0 9px;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			d2l-icon {
-				color: var(--d2l-color-mica);
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: inline-block;
+			margin: 0 9px;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-icon {
+			color: var(--d2l-color-mica);
+		}
+	`;
 
 	render() {
 		return html`

package/components/paging/pageable-mixin.js

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

package/components/paging/pageable-subscriber-mixin.js

@@ -2,16 +2,14 @@ import { EventSubscriberController, IdSubscriberController } from '../../control
 
 export const PageableSubscriberMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * Id of the `PageableMixin` component this component wants to observe (if not located within that component)
-			 * @type {string}
-			 */
-			pageableFor: { type: String, reflect: true, attribute: 'pageable-for' },
-			_pageableInfo: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Id of the `PageableMixin` component this component wants to observe (if not located within that component)
+		 * @type {string}
+		 */
+		pageableFor: { type: String, reflect: true, attribute: 'pageable-for' },
+		_pageableInfo: { state: true }
+	};
 
 	constructor() {
 		super();

package/components/paging/pager-load-more.js

@@ -20,57 +20,53 @@ const nativeFocus = document.createElement('div').focus;
  */
 class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether there are more items that can be loaded.
-			 * @type {boolean}
-			 */
-			hasMore: { type: Boolean, attribute: 'has-more', reflect: true },
-			/**
-			 * The number of additional items to load.
-			 * @type {number}
-			 */
-			pageSize: { type: Number, attribute: 'page-size', reflect: true },
-			_loading: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [ buttonStyles, labelStyles, offscreenStyles, css`
-			:host {
-				display: block;
-			}
-			:host(:not([has-more])),
-			:host([hidden]) {
-				display: none;
-			}
-			button {
-				align-items: center;
-				background-color: var(--d2l-theme-background-color-interactive-faint-default);
-				border: 1px solid var(--d2l-theme-border-color-subtle);
-				display: flex;
-				font-family: inherit;
-				gap: 0.5rem;
-				justify-content: center;
-				width: 100%;
-			}
-			button:hover {
-				background-color: var(--d2l-theme-background-color-interactive-faint-hover);
-			}
-			.action {
-				color: var(--d2l-theme-text-color-interactive-default);
-			}
-			.separator {
-				border-right: 1px solid var(--d2l-theme-border-color-standard);
-				height: 0.8rem;
-			}
-			.info {
-				color: var(--d2l-theme-text-color-static-faint);
-				font-weight: 400;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Whether there are more items that can be loaded.
+		 * @type {boolean}
+		 */
+		hasMore: { type: Boolean, attribute: 'has-more', reflect: true },
+		/**
+		 * The number of additional items to load.
+		 * @type {number}
+		 */
+		pageSize: { type: Number, attribute: 'page-size', reflect: true },
+		_loading: { state: true }
+	};
+
+	static styles = [buttonStyles, labelStyles, offscreenStyles, css`
+		:host {
+			display: block;
+		}
+		:host(:not([has-more])),
+		:host([hidden]) {
+			display: none;
+		}
+		button {
+			align-items: center;
+			background-color: var(--d2l-theme-background-color-interactive-faint-default);
+			border: 1px solid var(--d2l-theme-border-color-subtle);
+			display: flex;
+			font-family: inherit;
+			gap: 0.5rem;
+			justify-content: center;
+			width: 100%;
+		}
+		button:hover {
+			background-color: var(--d2l-theme-background-color-interactive-faint-hover);
+		}
+		.action {
+			color: var(--d2l-theme-text-color-interactive-default);
+		}
+		.separator {
+			border-right: 1px solid var(--d2l-theme-border-color-standard);
+			height: 0.8rem;
+		}
+		.info {
+			color: var(--d2l-theme-text-color-static-faint);
+			font-weight: 400;
+		}
+	`];
 
 	constructor() {
 		super();