@brightspace-ui/labs 2.56.0 → 2.56.2

package/src/components/pagination/pager-numeric.js

@@ -8,51 +8,47 @@ import { selectStyles } from '@brightspace-ui/core/components/inputs/input-selec
 
 class PagerNumeric extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			maxPageNumber: { type: Number, attribute: 'max-page-number', reflect: true },
-			pageNumber: { type: Number, attribute: 'page-number', reflect: true },
-			pageSize : { type: Number, attribute: 'page-size', reflect: true },
-			pageSizes : { type: Array, attribute: 'page-sizes' },
-			showPageSizeSelector : { type: Boolean, attribute: 'show-page-size-selector', reflect: true }
-		};
-	}
-
-	static get styles() {
-		return [selectStyles, css`
-			:host {
-				align-items: center;
-				display: flex;
-				justify-content: center;
-				white-space: nowrap;
-			}
+	static properties = {
+		maxPageNumber: { type: Number, attribute: 'max-page-number', reflect: true },
+		pageNumber: { type: Number, attribute: 'page-number', reflect: true },
+		pageSize : { type: Number, attribute: 'page-size', reflect: true },
+		pageSizes : { type: Array, attribute: 'page-sizes' },
+		showPageSizeSelector : { type: Boolean, attribute: 'show-page-size-selector', reflect: true }
+	};
+
+	static styles = [selectStyles, css`
+		:host {
+			align-items: center;
+			display: flex;
+			justify-content: center;
+			white-space: nowrap;
+		}
 
-			.d2l-page-selector-container {
-				margin: 0.75rem;
-			}
+		.d2l-page-selector-container {
+			margin: 0.75rem;
+		}
 
-			.d2l-page-number-container {
-				direction: ltr;
-				display: inline-block;
-			}
+		.d2l-page-number-container {
+			direction: ltr;
+			display: inline-block;
+		}
 
-			d2l-input-number {
-				margin-left: 0.25rem;
-				margin-right: 0.25rem;
-				width: 3.8rem;
-			}
+		d2l-input-number {
+			margin-left: 0.25rem;
+			margin-right: 0.25rem;
+			width: 3.8rem;
+		}
 
-			.d2l-page-max-text {
-				margin-right: 0.25rem;
-			}
+		.d2l-page-max-text {
+			margin-right: 0.25rem;
+		}
 
-			@media (max-width: 544px) {
-				:host {
-					flex-direction: column-reverse;
-				}
+		@media (max-width: 544px) {
+			:host {
+				flex-direction: column-reverse;
 			}
-		`];
-	}
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/view-toggle/view-toggle.js

@@ -3,90 +3,88 @@ import '@brightspace-ui/core/components/colors/colors.js';
 import { css, html, LitElement } from 'lit';
 
 class ViewToggle extends LitElement {
-	static get properties() {
-		return {
-			text: {
-				type: String
-			},
-			toggleOptions: {
-				type: Array,
-				attribute: 'toggle-options'
-			},
-			selectedOption: {
-				type: String,
-				attribute: 'selected-option'
-			}
-		};
-	}
-	static get styles() {
-		return [
-			css`
-			button.d2l-labs-view-toggle-left {
-				border-end-start-radius: 0.3rem;
-				border-inline-end-color: transparent;
-				border-inline-start-color: var(--d2l-color-mica);
-				border-start-start-radius: 0.3rem;
-			}
-			button.d2l-labs-view-toggle-right {
-				border-end-end-radius: 0.3rem;
-				border-inline-end-color: var(--d2l-color-mica);
-				border-inline-start-color: transparent;
-				border-start-end-radius: 0.3rem;
-			}
-			button {
-				background-color: var(--d2l-color-sylvite);
-				border-color: var(--d2l-color-mica);
-				border-style: solid;
-				border-width: 1px;
-				box-sizing: border-box;
-				color: var(--d2l-color-ferrite);
-				cursor: pointer;
-				display: inline;
-				flex: 0 1;
-				font-family: inherit;
-				font-size: 0.7rem;
-				font-weight: 700;
-				margin: 0;
-				min-height: calc(2rem + 2px);
-				outline: none;
-				padding: 0.5rem 1.5rem;
-				text-align: center;
-				transition: box-shadow 0.2s;
-				-webkit-user-select: none;
-				-moz-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-				vertical-align: middle;
-				white-space: nowrap;
-			}
-			button:hover, button:focus {
-				border: 1px solid var(--d2l-color-celestine) !important;
-			}
-			button[aria-pressed="true"] {
-				background-color: var(--d2l-color-tungsten);
-				border-color: var(--d2l-color-tungsten);
-				color: var(--d2l-color-regolith);
-			}
-			button[aria-pressed="true"]:hover, button[aria-pressed="true"]:focus {
-				box-shadow: inset 0 0 0 2px #ffffff;
-			}
 
-			span {
-				margin-inline-end: 6px;
-			}
+	static properties = {
+		text: {
+			type: String
+		},
+		toggleOptions: {
+			type: Array,
+			attribute: 'toggle-options'
+		},
+		selectedOption: {
+			type: String,
+			attribute: 'selected-option'
+		}
+	};
 
-			:host {
-				display: block;
-				width: auto;
-			}
+	static styles = [
+		css`
+		button.d2l-labs-view-toggle-left {
+			border-end-start-radius: 0.3rem;
+			border-inline-end-color: transparent;
+			border-inline-start-color: var(--d2l-color-mica);
+			border-start-start-radius: 0.3rem;
+		}
+		button.d2l-labs-view-toggle-right {
+			border-end-end-radius: 0.3rem;
+			border-inline-end-color: var(--d2l-color-mica);
+			border-inline-start-color: transparent;
+			border-start-end-radius: 0.3rem;
+		}
+		button {
+			background-color: var(--d2l-color-sylvite);
+			border-color: var(--d2l-color-mica);
+			border-style: solid;
+			border-width: 1px;
+			box-sizing: border-box;
+			color: var(--d2l-color-ferrite);
+			cursor: pointer;
+			display: inline;
+			flex: 0 1;
+			font-family: inherit;
+			font-size: 0.7rem;
+			font-weight: 700;
+			margin: 0;
+			min-height: calc(2rem + 2px);
+			outline: none;
+			padding: 0.5rem 1.5rem;
+			text-align: center;
+			transition: box-shadow 0.2s;
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+			vertical-align: middle;
+			white-space: nowrap;
+		}
+		button:hover, button:focus {
+			border: 1px solid var(--d2l-color-celestine) !important;
+		}
+		button[aria-pressed="true"] {
+			background-color: var(--d2l-color-tungsten);
+			border-color: var(--d2l-color-tungsten);
+			color: var(--d2l-color-regolith);
+		}
+		button[aria-pressed="true"]:hover, button[aria-pressed="true"]:focus {
+			box-shadow: inset 0 0 0 2px #ffffff;
+		}
 
-			.view-toggle-container {
-				align-items: center;
-				display: flex;
-				flex-wrap: nowrap;
-			}`
-		];
-	}
+		span {
+			margin-inline-end: 6px;
+		}
+
+		:host {
+			display: block;
+			width: auto;
+		}
+
+		.view-toggle-container {
+			align-items: center;
+			display: flex;
+			flex-wrap: nowrap;
+		}`
+	];
 
 	render() {
 		return html`

package/src/components/wizard/single-step-header.js

@@ -4,117 +4,113 @@ import { LocalizeLabsElement } from '../localize-labs-element.js';
 
 class D2LSingleStepHeader extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			stepTitle: {
-				type: String,
-				attribute: 'step-title'
-			},
-			totalSteps: {
-				type: Number,
-				attribute: 'total-steps'
-			},
-			currentStep: {
-				type: Number,
-				attribute: 'current-step'
-			},
-			selectedStep: {
-				type: Number,
-				attribute: 'selected-step'
-			},
-			fillHeaderWidth: {
-				type: Boolean,
-				attribute: 'fill-header-width',
-				reflect: true
-			}
-		};
-	}
+	static properties = {
+		stepTitle: {
+			type: String,
+			attribute: 'step-title'
+		},
+		totalSteps: {
+			type: Number,
+			attribute: 'total-steps'
+		},
+		currentStep: {
+			type: Number,
+			attribute: 'current-step'
+		},
+		selectedStep: {
+			type: Number,
+			attribute: 'selected-step'
+		},
+		fillHeaderWidth: {
+			type: Boolean,
+			attribute: 'fill-header-width',
+			reflect: true
+		}
+	};
+
+	static styles = [bodySmallStyles, css`
+		.d2l-labs-single-step-header-circle {
+			border: 2px solid;
+			border-radius: 50%;
+			height: 26px;
+			width: 26px;
+		}
 
-	static get styles() {
-		return [bodySmallStyles, css`
-			.d2l-labs-single-step-header-circle {
-				border: 2px solid;
-				border-radius: 50%;
-				height: 26px;
-				width: 26px;
-			}
-
-			.d2l-labs-single-step-header-inner-progress-circle {
-				background-color: var(--d2l-color-celestine);
-				border-radius: 50%;
-				height: 22px;
-				margin: 2px;
-				width: 22px;
-			}
-
-			.d2l-labs-single-step-header-step {
-				display: inline-block;
-				text-align: center;
-			}
-
-			hr {
-				height: 4px;
-				margin: auto;
-				width: 60px;
-			}
-
-			.d2l-labs-single-step-header-step-header {
-				display: flex;
-			}
-
-			.d2l-labs-single-step-header-step-title {
-				background: none !important;
-				border: none !important;
-				color: var(--d2l-color-ferrite);
-				margin: auto;
-				max-width: 120px;
-				overflow-wrap: break-word;
-			}
-
-			:host([fill-header-width]) .d2l-labs-single-step-header-step-title {
-				max-width: 150px;
-			}
-
-			.d2l-labs-single-step-header-done-icon {
-				color: var(--d2l-color-olivine);
-				height: 20px;
-				padding: 2px;
-				width: 20px;
-			}
-
-			.d2l-labs-single-step-header-done {
-				border-color: var(--d2l-color-olivine);
-				color: var(--d2l-color-olivine);
-			}
-
-			.d2l-labs-single-step-header-done hr,
-			.d2l-labs-single-step-header-in-progress hr:first-child {
-				background: var(--d2l-color-olivine);
-				border: var(--d2l-color-olivine);
-			}
-
-			.d2l-labs-single-step-header-in-progress {
-				border-color: var(--d2l-color-celestine);
-				color: var(--d2l-color-celestine);
-			}
-
-			.d2l-labs-single-step-header-not-started .d2l-labs-single-step-header-circle {
-				background-color: var(--d2l-color-mica);
-				border-color: var(--d2l-color-mica);
-			}
-
-			.d2l-labs-single-step-header-in-progress hr:last-child,
-			.d2l-labs-single-step-header-not-started hr {
-				background: var(--d2l-color-mica);
-				border: var(--d2l-color-mica);
-			}
-
-			.d2l-labs-single-step-header-first hr:first-child,
-			.d2l-labs-single-step-header-last hr:last-child {
-				visibility: hidden;
-			}
-		`];
-	}
+		.d2l-labs-single-step-header-inner-progress-circle {
+			background-color: var(--d2l-color-celestine);
+			border-radius: 50%;
+			height: 22px;
+			margin: 2px;
+			width: 22px;
+		}
+
+		.d2l-labs-single-step-header-step {
+			display: inline-block;
+			text-align: center;
+		}
+
+		hr {
+			height: 4px;
+			margin: auto;
+			width: 60px;
+		}
+
+		.d2l-labs-single-step-header-step-header {
+			display: flex;
+		}
+
+		.d2l-labs-single-step-header-step-title {
+			background: none !important;
+			border: none !important;
+			color: var(--d2l-color-ferrite);
+			margin: auto;
+			max-width: 120px;
+			overflow-wrap: break-word;
+		}
+
+		:host([fill-header-width]) .d2l-labs-single-step-header-step-title {
+			max-width: 150px;
+		}
+
+		.d2l-labs-single-step-header-done-icon {
+			color: var(--d2l-color-olivine);
+			height: 20px;
+			padding: 2px;
+			width: 20px;
+		}
+
+		.d2l-labs-single-step-header-done {
+			border-color: var(--d2l-color-olivine);
+			color: var(--d2l-color-olivine);
+		}
+
+		.d2l-labs-single-step-header-done hr,
+		.d2l-labs-single-step-header-in-progress hr:first-child {
+			background: var(--d2l-color-olivine);
+			border: var(--d2l-color-olivine);
+		}
+
+		.d2l-labs-single-step-header-in-progress {
+			border-color: var(--d2l-color-celestine);
+			color: var(--d2l-color-celestine);
+		}
+
+		.d2l-labs-single-step-header-not-started .d2l-labs-single-step-header-circle {
+			background-color: var(--d2l-color-mica);
+			border-color: var(--d2l-color-mica);
+		}
+
+		.d2l-labs-single-step-header-in-progress hr:last-child,
+		.d2l-labs-single-step-header-not-started hr {
+			background: var(--d2l-color-mica);
+			border: var(--d2l-color-mica);
+		}
+
+		.d2l-labs-single-step-header-first hr:first-child,
+		.d2l-labs-single-step-header-last hr:last-child {
+			visibility: hidden;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/wizard/wizard-step.js

@@ -4,76 +4,73 @@ import { LocalizeLabsElement } from '../localize-labs-element.js';
 import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js';
 
 class D2LStep extends LocalizeLabsElement(LitElement) {
-	static get properties() {
-		return {
-			nextButtonTitle: {
-				type: String,
-				attribute: 'next-button-title'
-			},
-			nextButtonTooltip: {
-				type: String,
-				attribute: 'next-button-tooltip'
-			},
-			restartButtonTitle: {
-				type: String,
-				attribute: 'restart-button-title'
-			},
-			restartButtonTooltip: {
-				type: String,
-				attribute: 'restart-button-tooltip'
-			},
-			hideRestartButton: {
-				type: Boolean,
-				attribute: 'hide-restart-button'
-			},
-			hideNextButton: {
-				type: Boolean,
-				attribute: 'hide-next-button'
-			},
-			disableNextButton: {
-				type: Boolean,
-				attribute: 'disable-next-button'
-			},
-			nextButtonAriaLabel: {
-				type: String,
-				attribute: 'next-button-aria-label'
-			},
-			restartButtonAriaLabel: {
-				type: String,
-				attribute: 'restart-button-aria-label'
-			},
-			ariaTitle: {
-				type: String,
-				attribute: 'aria-title'
-			},
-			stepTitle: {
-				type: String,
-				attribute: 'step-title'
-			},
-			stepCount: {
-				type: Number,
-				attribute: 'step-count'
-			},
-			thisStep: {
-				type: Number,
-				attribute: 'this-step'
-			}
-		};
-	}
 
-	static get styles() {
-		return [offscreenStyles, css`
-			.d2l-labs-wizard-step-footer {
-				display: flex;
-				justify-content: space-between;
-				width: 100%;
-			}
+	static properties = {
+		nextButtonTitle: {
+			type: String,
+			attribute: 'next-button-title'
+		},
+		nextButtonTooltip: {
+			type: String,
+			attribute: 'next-button-tooltip'
+		},
+		restartButtonTitle: {
+			type: String,
+			attribute: 'restart-button-title'
+		},
+		restartButtonTooltip: {
+			type: String,
+			attribute: 'restart-button-tooltip'
+		},
+		hideRestartButton: {
+			type: Boolean,
+			attribute: 'hide-restart-button'
+		},
+		hideNextButton: {
+			type: Boolean,
+			attribute: 'hide-next-button'
+		},
+		disableNextButton: {
+			type: Boolean,
+			attribute: 'disable-next-button'
+		},
+		nextButtonAriaLabel: {
+			type: String,
+			attribute: 'next-button-aria-label'
+		},
+		restartButtonAriaLabel: {
+			type: String,
+			attribute: 'restart-button-aria-label'
+		},
+		ariaTitle: {
+			type: String,
+			attribute: 'aria-title'
+		},
+		stepTitle: {
+			type: String,
+			attribute: 'step-title'
+		},
+		stepCount: {
+			type: Number,
+			attribute: 'step-count'
+		},
+		thisStep: {
+			type: Number,
+			attribute: 'this-step'
+		}
+	};
 
-			.d2l-labs-wizard-step-button-next {
-				float: right;
-			}
-		`];
-	}
+	static styles = [offscreenStyles, css`
+		.d2l-labs-wizard-step-footer {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+		}
+
+		.d2l-labs-wizard-step-button-next {
+			float: right;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/wizard/wizard.js

@@ -2,40 +2,37 @@ import './single-step-header.js';
 import { css, html, LitElement } from 'lit';
 
 class D2LWizard extends LitElement {
-	static get properties() {
-		return {
-			stepTitles: {
-				type: Array,
-				attribute: 'step-titles'
-			},
-			stepCount: {
-				type: Number,
-				attribute: 'step-count'
-			},
-			selectedStep: {
-				type: Number,
-				attribute: 'selected-step'
-			},
-			fillHeaderWidth: {
-				type: Boolean,
-				attribute: 'fill-header-width',
-				reflect: true
-			}
-		};
-	}
 
-	static get styles() {
-		return css`
-			.d2l-labs-wizard-header {
-				display: flex;
-				flex: 1;
-				justify-content: center;
-				margin: 30px 0;
-				overflow-x: auto;
-				width: 100%;
-			}
-		`;
-	}
+	static properties = {
+		stepTitles: {
+			type: Array,
+			attribute: 'step-titles'
+		},
+		stepCount: {
+			type: Number,
+			attribute: 'step-count'
+		},
+		selectedStep: {
+			type: Number,
+			attribute: 'selected-step'
+		},
+		fillHeaderWidth: {
+			type: Boolean,
+			attribute: 'fill-header-width',
+			reflect: true
+		}
+	};
+
+	static styles = css`
+		.d2l-labs-wizard-header {
+			display: flex;
+			flex: 1;
+			justify-content: center;
+			margin: 30px 0;
+			overflow-x: auto;
+			width: 100%;
+		}
+	`;
 
 	constructor() {
 		super();