@brightspace-ui/labs 2.56.0 → 2.56.3

package/src/components/attribute-picker/attribute-picker-item.js

@@ -6,73 +6,70 @@ import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/st
 import { LocalizeLabsElement } from '../localize-labs-element.js';
 
 class AttributePickerItem extends LocalizeLabsElement(LitElement) {
-	static get properties() {
-		return {
-			deletable: { type: Boolean, reflect: true },
-			text: { type: String }
-		};
-	}
 
-	static get styles() {
-		return [bodyCompactStyles, css`
-			:host {
-				cursor: pointer;
-				display: inline-block;
-				width: max-content;
-			}
-			:host(:focus-visible) {
-				outline: none;
-			}
-			.d2l-labs-attribute-picker-item-wrapper {
-				align-items: center;
-				background-color: var(--d2l-color-sylvite);
-				border: 1px solid var(--d2l-color-gypsum);
-				border-radius: 0.3rem;
-				display: flex;
-				gap: 0.2rem;
-				padding: 0.25rem;
-				padding-inline: 0.5rem;
-				user-select: none;
-			}
-			:host([deletable]) .d2l-labs-attribute-picker-item-wrapper {
-				padding-inline: 0.5rem 0.1rem;
-				padding-bottom: 0.15rem;
-				padding-top: 0.1rem;
-			}
-			:host(:hover) .d2l-labs-attribute-picker-item-wrapper {
-				background-color: var(--d2l-color-gypsum);
-				border-color: var(--d2l-color-mica);
-				color: var(--d2l-color-ferrite);
-			}
-			:host(:focus) .d2l-labs-attribute-picker-item-wrapper {
-				background-color: var(--d2l-color-celestine);
-				border: 1px solid var(--d2l-color-celestine-minus-1);
-				color: var(--d2l-color-regolith);
-			}
-			.d2l-labs-attribute-picker-item-text {
-				-webkit-box-orient: vertical;
-				display: -webkit-box;
-				-webkit-line-clamp: 1;
-				line-height: normal;
-				max-width: 18rem;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				word-break: break-all;
-			}
-			d2l-button-icon {
-				--d2l-button-icon-background-color-hover: var(--d2l-color-mica);
-				--d2l-button-icon-fill-color: var(--d2l-color-chromite);
-				--d2l-button-icon-fill-color-hover: var(--d2l-color-tungsten);
-				--d2l-button-icon-min-height: 1.2rem;
-				--d2l-button-icon-min-width: 1.2rem;
-			}
-			:host(:focus) d2l-button-icon {
-				--d2l-button-icon-background-color-hover: var(--d2l-color-celestine-plus-1);
-				--d2l-button-icon-fill-color: var(--d2l-color-mica);
-				--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
-			}
-		`];
-	}
+	static properties = {
+		deletable: { type: Boolean, reflect: true },
+		text: { type: String }
+	};
+
+	static styles = [bodyCompactStyles, css`
+		:host {
+			cursor: pointer;
+			display: inline-block;
+			width: max-content;
+		}
+		:host(:focus-visible) {
+			outline: none;
+		}
+		.d2l-labs-attribute-picker-item-wrapper {
+			align-items: center;
+			background-color: var(--d2l-color-sylvite);
+			border: 1px solid var(--d2l-color-gypsum);
+			border-radius: 0.3rem;
+			display: flex;
+			gap: 0.2rem;
+			padding: 0.25rem;
+			padding-inline: 0.5rem;
+			user-select: none;
+		}
+		:host([deletable]) .d2l-labs-attribute-picker-item-wrapper {
+			padding-inline: 0.5rem 0.1rem;
+			padding-bottom: 0.15rem;
+			padding-top: 0.1rem;
+		}
+		:host(:hover) .d2l-labs-attribute-picker-item-wrapper {
+			background-color: var(--d2l-color-gypsum);
+			border-color: var(--d2l-color-mica);
+			color: var(--d2l-color-ferrite);
+		}
+		:host(:focus) .d2l-labs-attribute-picker-item-wrapper {
+			background-color: var(--d2l-color-celestine);
+			border: 1px solid var(--d2l-color-celestine-minus-1);
+			color: var(--d2l-color-regolith);
+		}
+		.d2l-labs-attribute-picker-item-text {
+			-webkit-box-orient: vertical;
+			display: -webkit-box;
+			-webkit-line-clamp: 1;
+			line-height: normal;
+			max-width: 18rem;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			word-break: break-all;
+		}
+		d2l-button-icon {
+			--d2l-button-icon-background-color-hover: var(--d2l-color-mica);
+			--d2l-button-icon-fill-color: var(--d2l-color-chromite);
+			--d2l-button-icon-fill-color-hover: var(--d2l-color-tungsten);
+			--d2l-button-icon-min-height: 1.2rem;
+			--d2l-button-icon-min-width: 1.2rem;
+		}
+		:host(:focus) d2l-button-icon {
+			--d2l-button-icon-background-color-hover: var(--d2l-color-celestine-plus-1);
+			--d2l-button-icon-fill-color: var(--d2l-color-mica);
+			--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/attribute-picker/attribute-picker.js

@@ -19,141 +19,136 @@ const keyCodes = {
 };
 
 class AttributePicker extends ArrowKeysMixin(LocalizeLabsElement(LitElement)) {
-	static get properties() {
-		return {
-			/* When true, the user can manually enter any attribute they wish. If false, they must match a value from the dropdown. */
-			allowFreeform: { type: Boolean, attribute: 'allow-freeform', reflect: true },
 
-			/* An array of strings available in the dropdown list */
-			assignableAttributes: { type: Array, attribute: 'assignable-attributes', reflect: true },
+	static properties = {
+		/* When true, the user can manually enter any attribute they wish. If false, they must match a value from the dropdown. */
+		allowFreeform: { type: Boolean, attribute: 'allow-freeform', reflect: true },
 
-			/* An array of strings representing the attributes currently selected in the picker */
-			attributeList: { type: Array, attribute: 'attribute-list', reflect: true },
+		/* An array of strings available in the dropdown list */
+		assignableAttributes: { type: Array, attribute: 'assignable-attributes', reflect: true },
 
-			/*
-				The text that will appear in the tooltip that informs a user that the state is invalid
-				The default value is: 'At least one attribute must be set'
-			*/
-			invalidTooltipText: { type: String, attribute: 'invalid-tooltip-text', reflect: true },
+		/* An array of strings representing the attributes currently selected in the picker */
+		attributeList: { type: Array, attribute: 'attribute-list', reflect: true },
 
-			/* Required. The label associated with the attribute picker for screen reader users */
-			label: { type: String, reflect: true },
+		/*
+			The text that will appear in the tooltip that informs a user that the state is invalid
+			The default value is: 'At least one attribute must be set'
+		*/
+		invalidTooltipText: { type: String, attribute: 'invalid-tooltip-text', reflect: true },
 
-			/* The maximum number of attributes permitted. */
-			limit: { type: Number, attribute: 'limit', reflect: true },
+		/* Required. The label associated with the attribute picker for screen reader users */
+		label: { type: String, reflect: true },
 
-			/* When true, an error state will appear if no attributes are set */
-			required: { type: Boolean, attribute: 'required', reflect: true },
+		/* The maximum number of attributes permitted. */
+		limit: { type: Number, attribute: 'limit', reflect: true },
 
-			/* Represents the index of the currently focused attribute. If no attribute is focused, equals -1 */
-			_activeAttributeIndex: { state: true },
+		/* When true, an error state will appear if no attributes are set */
+		required: { type: Boolean, attribute: 'required', reflect: true },
 
-			/* Represents the index of the currently focused dropdown list item. If no item is focused, equals -1 */
-			_dropdownIndex: { state: true },
+		/* Represents the index of the currently focused attribute. If no attribute is focused, equals -1 */
+		_activeAttributeIndex: { state: true },
 
-			/* When true, the user currently has focus within the component */
-			_hasFocus: { state: true },
+		/* Represents the index of the currently focused dropdown list item. If no item is focused, equals -1 */
+		_dropdownIndex: { state: true },
 
-			/* When true, the user has yet to lose focus for the first time, meaning the validation won't be shown until they've lost focus for the first time */
-			_initialFocus: { state: true },
+		/* When true, the user currently has focus within the component */
+		_hasFocus: { state: true },
 
-			/* When true, the user currently has focus within the input */
-			_inputFocused: { state: true },
+		/* When true, the user has yet to lose focus for the first time, meaning the validation won't be shown until they've lost focus for the first time */
+		_initialFocus: { state: true },
 
-			/* When true, the user has reached the limit of attributes that can be added */
-			_limitReached: { state: true },
+		/* When true, the user currently has focus within the input */
+		_inputFocused: { state: true },
 
-			/* The inner text of the input */
-			_text: { state: true }
-		};
-	}
+		/* When true, the user has reached the limit of attributes that can be added */
+		_limitReached: { state: true },
 
-	static get styles() {
-		return [inputStyles, css`
-			:host {
-				display: inline-block;
-				font-size: 0.8rem;
-				width: 100%;
-			}
-			:host:disabled {
-				opacity: 0.5;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-attribute-picker-container {
-				padding: 5px;
-			}
-			.d2l-attribute-picker-container:hover,
-			.d2l-attribute-picker-container:focus-within {
-				padding: 4px;
-			}
-			.d2l-attribute-picker-container:focus-within {
-				border: 2px solid var(--d2l-color-celestine);
-			}
-			[aria-invalid="true"].d2l-attribute-picker-container:focus-within {
-				border-color: var(--d2l-color-cinnabar);
-			}
-			.d2l-attribute-picker-content {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 0.2rem;
-			}
-			.d2l-attribute-picker-attribute {
-				height: 1.55rem;
-			}
-			.d2l-attribute-picker-attribute:focus-visible {
-				outline: none;
-			}
-			.d2l-attribute-picker-input {
-				background: transparent;
-				border: none;
-				box-shadow: none;
-				box-sizing: border-box;
-				flex-grow: 1;
-				font-family: inherit;
-				font-size: inherit;
-				min-height: 1.55rem;
-				outline: none;
-				padding: 0 !important;
-				width: 4rem;
-			}
-			.d2l-attribute-list {
-				background-color: white;
-				border: 1px solid var(--d2l-color-gypsum);
-				border-radius: 0.3rem;
-				max-height: 7.8rem;
-				overflow-y: auto;
-				padding-left: 0;
-				text-overflow: ellipsis;
-			}
-			.d2l-attribute-picker-li {
-				cursor: pointer;
-				margin: 0;
-				padding: 0.4rem 6rem 0.4rem 0.6rem;
-			}
-			.d2l-attribute-picker-li[aria-selected="true"] {
-				background-color: var(--d2l-color-celestine-plus-2);
-				color: var(--d2l-color-celestine);
-			}
-			.d2l-attribute-picker-absolute-container {
-				margin: 0 0.3rem 0 -0.3rem;
-				position: absolute;
-				width: 100%;
-				z-index: 1;
-			}
-			.d2l-input-text-invalid-icon {
-				background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0wIDBoMjJ2MjJIMHoiLz4KICAgIDxwYXRoIGQ9Ik0xOC44NjQgMTYuNDdMMTIuNjIzIDMuOTg5YTEuNzgzIDEuNzgzIDAgMDAtMy4xOTIgMEwzLjE4OSAxNi40N2ExLjc2MSAxLjc2MSAwIDAwLjA4IDEuNzNjLjMyNS41MjUuODk4Ljc5OCAxLjUxNi43OTloMTIuNDgzYy42MTggMCAxLjE5Mi0uMjczIDEuNTE2LS44LjIzNy0uMzM1LjI2NS0xLjM3LjA4LTEuNzN6IiBmaWxsPSIjQ0QyMDI2IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxwYXRoIGQ9Ik0xMS4wMjcgMTcuMjY0YTEuMzM3IDEuMzM3IDAgMTEwLTIuNjc1IDEuMzM3IDEuMzM3IDAgMDEwIDIuNjc1ek0xMS45IDEyLjk4YS44OTIuODkyIDAgMDEtMS43NDcgMEw5LjI3IDguNTJhLjg5Mi44OTIgMCAwMS44NzQtMS4wNjRoMS43NjhhLjg5Mi44OTIgMCAwMS44NzQgMS4wNjVsLS44ODYgNC40NTh6IiBmaWxsPSIjRkZGIi8+CiAgPC9nPgo8L3N2Zz4K");
-				display: flex;
-				height: 22px;
-				inset-inline-end: 8px;
-				position: absolute;
-				top: 50%;
-				transform: translateY(-50%);
-				width: 22px;
-			}
-		`];
-	}
+		/* The inner text of the input */
+		_text: { state: true }
+	};
+
+	static styles = [inputStyles, css`
+		:host {
+			display: inline-block;
+			font-size: 0.8rem;
+			width: 100%;
+		}
+		:host:disabled {
+			opacity: 0.5;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-attribute-picker-container {
+			--d2l-input-padding: 5px;
+			--d2l-input-padding-focus: 4px;
+		}
+		.d2l-attribute-picker-container:focus-within {
+			border: 2px solid var(--d2l-color-celestine);
+			padding: var(--d2l-input-padding-focus);
+		}
+		[aria-invalid="true"].d2l-attribute-picker-container:focus-within {
+			border-color: var(--d2l-color-cinnabar);
+		}
+		.d2l-attribute-picker-content {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.2rem;
+		}
+		.d2l-attribute-picker-attribute {
+			height: 1.55rem;
+		}
+		.d2l-attribute-picker-attribute:focus-visible {
+			outline: none;
+		}
+		.d2l-attribute-picker-input {
+			background: transparent;
+			border: none;
+			box-shadow: none;
+			box-sizing: border-box;
+			flex-grow: 1;
+			font-family: inherit;
+			font-size: inherit;
+			min-height: 1.55rem;
+			outline: none;
+			padding: 0 !important;
+			width: 4rem;
+		}
+		.d2l-attribute-list {
+			background-color: white;
+			border: 1px solid var(--d2l-color-gypsum);
+			border-radius: 0.3rem;
+			max-height: 7.8rem;
+			overflow-y: auto;
+			padding-left: 0;
+			text-overflow: ellipsis;
+		}
+		.d2l-attribute-picker-li {
+			cursor: pointer;
+			margin: 0;
+			padding: 0.4rem 6rem 0.4rem 0.6rem;
+		}
+		.d2l-attribute-picker-li[aria-selected="true"] {
+			background-color: var(--d2l-color-celestine-plus-2);
+			color: var(--d2l-color-celestine);
+		}
+		.d2l-attribute-picker-absolute-container {
+			margin: 0 0.3rem 0 -0.3rem;
+			position: absolute;
+			width: 100%;
+			z-index: 1;
+		}
+		.d2l-input-text-invalid-icon {
+			background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0wIDBoMjJ2MjJIMHoiLz4KICAgIDxwYXRoIGQ9Ik0xOC44NjQgMTYuNDdMMTIuNjIzIDMuOTg5YTEuNzgzIDEuNzgzIDAgMDAtMy4xOTIgMEwzLjE4OSAxNi40N2ExLjc2MSAxLjc2MSAwIDAwLjA4IDEuNzNjLjMyNS41MjUuODk4Ljc5OCAxLjUxNi43OTloMTIuNDgzYy42MTggMCAxLjE5Mi0uMjczIDEuNTE2LS44LjIzNy0uMzM1LjI2NS0xLjM3LjA4LTEuNzN6IiBmaWxsPSIjQ0QyMDI2IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxwYXRoIGQ9Ik0xMS4wMjcgMTcuMjY0YTEuMzM3IDEuMzM3IDAgMTEwLTIuNjc1IDEuMzM3IDEuMzM3IDAgMDEwIDIuNjc1ek0xMS45IDEyLjk4YS44OTIuODkyIDAgMDEtMS43NDcgMEw5LjI3IDguNTJhLjg5Mi44OTIgMCAwMS44NzQtMS4wNjRoMS43NjhhLjg5Mi44OTIgMCAwMS44NzQgMS4wNjVsLS44ODYgNC40NTh6IiBmaWxsPSIjRkZGIi8+CiAgPC9nPgo8L3N2Zz4K");
+			display: flex;
+			height: 22px;
+			inset-inline-end: 8px;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 22px;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/card-overlay/card-overlay.js

@@ -4,61 +4,59 @@ import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton
 
 class CardOverlay extends SkeletonMixin(LitElement) {
 
-	static get styles() {
-		return [super.styles, bodyStandardStyles, css`
-			:host {
-				display: block;
-				left: 0;
-				position: absolute;
-				top: 0;
-			}
-			:host([skeleton]) {
-				height: 100%;
-				width: 100%;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-insights-card-overlay-container {
-				background-color: white;
-				border-radius: 15px;
-				display: flex;
-				flex-direction: column;
-				height: calc(100% - 20px);
-				justify-content: center;
-				padding-left: 7px;
-				padding-top: 20px;
-				width: calc(100% - 28px);
-			}
-			.d2l-insights-card-overlay-title {
-				margin-left: 15px;
-				margin-right: 15px;
-				margin-top: 10px;
-				width: 100%;
-			}
-			.d2l-insights-card-overlay-body {
-				align-items: center;
-				display: flex;
-				height: 100%;
-				margin-bottom: 25px;
-			}
-			.d2l-insights-card-overlay-body > div {
-				flex-shrink: 0;
-				height: 70px;
-				margin: 0 15px;
-				width: 70px;
-			}
-			.d2l-insights-card-overlay-message {
-				display: inline-block;
-				font-size: 14px;
-				line-height: 1rem;
-				margin: 10px;
-				margin-left: 5px;
-				margin-right: 0;
-				vertical-align: middle;
-			}
-		`];
-	}
+	static styles = [super.styles, bodyStandardStyles, css`
+		:host {
+			display: block;
+			left: 0;
+			position: absolute;
+			top: 0;
+		}
+		:host([skeleton]) {
+			height: 100%;
+			width: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-insights-card-overlay-container {
+			background-color: white;
+			border-radius: 15px;
+			display: flex;
+			flex-direction: column;
+			height: calc(100% - 20px);
+			justify-content: center;
+			padding-left: 7px;
+			padding-top: 20px;
+			width: calc(100% - 28px);
+		}
+		.d2l-insights-card-overlay-title {
+			margin-left: 15px;
+			margin-right: 15px;
+			margin-top: 10px;
+			width: 100%;
+		}
+		.d2l-insights-card-overlay-body {
+			align-items: center;
+			display: flex;
+			height: 100%;
+			margin-bottom: 25px;
+		}
+		.d2l-insights-card-overlay-body > div {
+			flex-shrink: 0;
+			height: 70px;
+			margin: 0 15px;
+			width: 70px;
+		}
+		.d2l-insights-card-overlay-message {
+			display: inline-block;
+			font-size: 14px;
+			line-height: 1rem;
+			margin: 10px;
+			margin-left: 5px;
+			margin-right: 0;
+			vertical-align: middle;
+		}
+	`];
 
 	render() {
 		if (!this.skeleton) {

package/src/components/checkbox-drawer/checkbox-drawer.js

@@ -10,47 +10,43 @@ import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton
 
 class CheckboxDrawer extends LocalizeLabsElement(SkeletonMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			checked: { type: Boolean },
-			description: { type: String },
-			disabled: { type: Boolean },
-			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
-			label: { type: String },
-			readOnly: { type: Boolean, attribute: 'read-only' },
-			_expandCollapseBusy: { state: true }
-		};
-	}
+	static properties = {
+		checked: { type: Boolean },
+		description: { type: String },
+		disabled: { type: Boolean },
+		disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+		label: { type: String },
+		readOnly: { type: Boolean, attribute: 'read-only' },
+		_expandCollapseBusy: { state: true }
+	};
 
-	static get styles() {
-		return [super.styles, bodyCompactStyles, css`
-			:host {
-				display: block;
-			}
+	static styles = [super.styles, bodyCompactStyles, css`
+		:host {
+			display: block;
+		}
 
-			.d2l-input-checkbox {
-				margin-bottom: 0;
-			}
+		.d2l-input-checkbox {
+			margin-bottom: 0;
+		}
 
-			.d2l-input-checkbox-description {
-				color: var(--d2l-color-tungsten);
-				font-size: 0.7rem;
-				width: fit-content;
-			}
+		.d2l-input-checkbox-description {
+			color: var(--d2l-color-tungsten);
+			font-size: 0.7rem;
+			width: fit-content;
+		}
 
-			.d2l-checkbox-content-margin {
-				margin-top: 18px;
-			}
+		.d2l-checkbox-content-margin {
+			margin-top: 18px;
+		}
 
-			.d2l-input-read-only-label {
-				display: inline-block;
-				margin-left: 0.5rem;
-			}
-			.d2l-input-read-only-spacer {
-				padding-inline-start: 1.7rem;
-			}
-		`];
-	}
+		.d2l-input-read-only-label {
+			display: inline-block;
+			margin-left: 0.5rem;
+		}
+		.d2l-input-read-only-spacer {
+			padding-inline-start: 1.7rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/community/community-base.js

@@ -3,11 +3,9 @@ import { LanguageListenerController } from '../../controllers/language-listener/
 
 export const CommunityBase = (superClass) => class CommunityBaseMixin extends superClass {
 
-	static get properties() {
-		return {
-			articleMap: { attribute: 'article-map', type: Object }
-		};
-	}
+	static properties = {
+		articleMap: { attribute: 'article-map', type: Object }
+	};
 
 	constructor() {
 		super();

package/src/components/community/community-button.js

@@ -4,11 +4,9 @@ import { CommunityBase } from './community-base.js';
 
 class CommunityLink extends CommunityBase(LitElement) {
 
-	static get properties() {
-		return {
-			text: { type: String },
-		};
-	}
+	static properties = {
+		text: { type: String },
+	};
 
 	render() {
 		return html`<d2l-button-subtle

package/src/components/community/community-link.js

@@ -4,12 +4,10 @@ import { CommunityBase } from './community-base.js';
 
 class CommunityLink extends CommunityBase(LitElement) {
 
-	static get properties() {
-		return {
-			text: { type: String },
-			small: { type: Boolean }
-		};
-	}
+	static properties = {
+		text: { type: String },
+		small: { type: Boolean }
+	};
 
 	render() {
 		return html`<d2l-link target="_blank" href="${this.communityArticleDirective(this.langController.language)}" ?small=${this.small} >${this.text}</d2l-link>`;