@brightspace-ui/labs 2.56.0 → 2.56.3

package/src/components/opt-in-flyout/opt-out-dialog.js

@@ -13,74 +13,70 @@ const defaultEventProperties = {
 
 class OptOutDialog extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			hideReason: { type: Boolean, attribute: 'hide-reason' },
-			hideFeedback: { type: Boolean, attribute: 'hide-feedback' }
-		};
-	}
+	static properties = {
+		hideReason: { type: Boolean, attribute: 'hide-reason' },
+		hideFeedback: { type: Boolean, attribute: 'hide-feedback' }
+	};
+
+	static styles = css`
+		:host {
+			height: 100%;
+			overflow: hidden;
+			pointer-events: auto;
+			position: absolute;
+			width: 100%;
+			z-index: 950;
+		}
 
-	static get styles() {
-		return css`
-			:host {
-				height: 100%;
-				overflow: hidden;
-				pointer-events: auto;
-				position: absolute;
-				width: 100%;
-				z-index: 950;
-			}
-
-			.opt-out-modal-fade {
-				background-color: #ffffff;
-				height: 100%;
-				opacity: 0.7;
-				position: absolute;
-				width: 100%;
-				z-index: 1;
-			}
-
-			.dialog {
-				background-color: #ffffff;
-				border: 1px solid var(--d2l-color-mica);
-				border-radius: 0.3rem;
-				box-shadow: 0 2px 12px rgba(86, 90, 92, 0.25);
-				box-sizing: border-box;
-				left: 50%;
-				max-width: 680px;
-				padding: 1rem;
-				position: absolute;
-				top: 7.5%;
-				transform: translateX(-50%);
-				width: 90%;
-				z-index: 2;
-			}
-
-			label {
-				display: block;
-				margin-bottom: 0.5rem;
-			}
-
-			#title-label {
-				display: inline;
-				font-weight: bold;
-			}
-
-			d2l-input-textarea {
-				margin-bottom: 1rem;
-			}
-
-			d2l-button {
-				margin-right: 1rem;
-			}
-
-			.close-button {
-				inset-block-start: 0.6rem;
-				inset-inline-end: 0.6rem;
-				position: absolute;
-			}
-		`;
-	}
+		.opt-out-modal-fade {
+			background-color: #ffffff;
+			height: 100%;
+			opacity: 0.7;
+			position: absolute;
+			width: 100%;
+			z-index: 1;
+		}
+
+		.dialog {
+			background-color: #ffffff;
+			border: 1px solid var(--d2l-color-mica);
+			border-radius: 0.3rem;
+			box-shadow: 0 2px 12px rgba(86, 90, 92, 0.25);
+			box-sizing: border-box;
+			left: 50%;
+			max-width: 680px;
+			padding: 1rem;
+			position: absolute;
+			top: 7.5%;
+			transform: translateX(-50%);
+			width: 90%;
+			z-index: 2;
+		}
+
+		label {
+			display: block;
+			margin-bottom: 0.5rem;
+		}
+
+		#title-label {
+			display: inline;
+			font-weight: bold;
+		}
+
+		d2l-input-textarea {
+			margin-bottom: 1rem;
+		}
+
+		d2l-button {
+			margin-right: 1rem;
+		}
+
+		.close-button {
+			inset-block-start: 0.6rem;
+			inset-inline-end: 0.6rem;
+			position: absolute;
+		}
+	`;
 
 	constructor() {
 		super();

package/src/components/opt-in-flyout/opt-out-flyout.js

@@ -4,26 +4,22 @@ import { css, html, LitElement } from 'lit';
 
 class OptOutFlyout extends LitElement {
 
-	static get properties() {
-		return {
-			opened: { type: Boolean, reflect: true },
-			flyoutTitle: { attribute: 'flyout-title', type: String },
-			shortDescription: { type: String, attribute: 'short-description' },
-			longDescription: { type: String, attribute: 'long-description' },
-			tutorialLink: { type: String, attribute: 'tutorial-link' },
-			helpDocsLink: { type: String, attribute: 'help-docs-link' },
-			hideReason: { type: Boolean, attribute: 'hide-reason' },
-			hideFeedback: { type: Boolean, attribute: 'hide-feedback' }
-		};
-	}
+	static properties = {
+		opened: { type: Boolean, reflect: true },
+		flyoutTitle: { attribute: 'flyout-title', type: String },
+		shortDescription: { type: String, attribute: 'short-description' },
+		longDescription: { type: String, attribute: 'long-description' },
+		tutorialLink: { type: String, attribute: 'tutorial-link' },
+		helpDocsLink: { type: String, attribute: 'help-docs-link' },
+		hideReason: { type: Boolean, attribute: 'hide-reason' },
+		hideFeedback: { type: Boolean, attribute: 'hide-feedback' }
+	};
 
-	static get styles() {
-		return css`
-			d2l-labs-opt-in-flyout-impl {
-				font-size: 20px;
-			}
-		`;
-	}
+	static styles = css`
+		d2l-labs-opt-in-flyout-impl {
+			font-size: 20px;
+		}
+	`;
 
 	constructor() {
 		super();

package/src/components/opt-in-flyout/opt-out-reason-selector.js

@@ -5,52 +5,45 @@ import { LocalizeLabsElement } from '../localize-labs-element.js';
 
 class OptOutReasonSelector extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			_reasons: { state: true }
-		};
-	}
+	static properties = {
+		_reasons: { state: true }
+	};
+
+	static styles = [inputStyles, css`
+		label {
+			display: block;
+			margin-bottom: 0.5rem;
+		}
 
-	static get styles() {
-		return [
-			inputStyles,
-			css`
-				label {
-					display: block;
-					margin-bottom: 0.5rem;
-				}
-
-				select {
-					-moz-appearance: none;
-					-webkit-appearance: none;
-					appearance: none;
-					background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2242%22%20viewBox%3D%220%200%2042%2042%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23f2f3f5%22%20d%3D%22M0%200h42v42H0z%22%2F%3E%3Cpath%20stroke%3D%22%23d3d9e3%22%20d%3D%22M0%200v42%22%2F%3E%3Cpath%20d%3D%22M14.99%2019.582l4.95%204.95a1.5%201.5%200%200%200%202.122%200l4.95-4.95a1.5%201.5%200%200%200-2.122-2.122L21%2021.35l-3.888-3.89a1.5%201.5%200%200%200-2.12%202.122z%22%20fill%3D%22%23565A5C%22%2F%3E%3C%2Fsvg%3E");
-					background-position: var(--d2l-inline-end, right) center;
-					background-repeat: no-repeat;
-					background-size: contain;
-					display: block;
-					margin-bottom: 1.5rem !important;
-					position: relative;
-					width: 80%;
-				}
-
-				/* for ie11 - avoid displaying default select arrow */
-				select::-ms-expand {
-					display: none;
-				}
-
-				/* for ie11 - prevent background box from covering select arrow */
-				select::-ms-value {
-					background-color: transparent;
-					color: var(--d2l-input-color);
-				}
-
-				#options {
-					display: none;
-				}
-			`
-		];
-	}
+		select {
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			appearance: none;
+			background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2242%22%20viewBox%3D%220%200%2042%2042%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23f2f3f5%22%20d%3D%22M0%200h42v42H0z%22%2F%3E%3Cpath%20stroke%3D%22%23d3d9e3%22%20d%3D%22M0%200v42%22%2F%3E%3Cpath%20d%3D%22M14.99%2019.582l4.95%204.95a1.5%201.5%200%200%200%202.122%200l4.95-4.95a1.5%201.5%200%200%200-2.122-2.122L21%2021.35l-3.888-3.89a1.5%201.5%200%200%200-2.12%202.122z%22%20fill%3D%22%23565A5C%22%2F%3E%3C%2Fsvg%3E");
+			background-position: var(--d2l-inline-end, right) center;
+			background-repeat: no-repeat;
+			background-size: contain;
+			display: block;
+			margin-bottom: 1.5rem !important;
+			position: relative;
+			width: 80%;
+		}
+
+		/* for ie11 - avoid displaying default select arrow */
+		select::-ms-expand {
+			display: none;
+		}
+
+		/* for ie11 - prevent background box from covering select arrow */
+		select::-ms-value {
+			background-color: transparent;
+			color: var(--d2l-input-color);
+		}
+
+		#options {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/opt-in-flyout/opt-out-reason.js

@@ -2,20 +2,16 @@ import { css, LitElement } from 'lit';
 
 class OptOutReason extends LitElement {
 
-	static get properties() {
-		return {
-			key: { type: String },
-			text: { type: String }
-		};
-	}
+	static properties = {
+		key: { type: String },
+		text: { type: String }
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: none;
+		}
+	`;
 
 }
 

package/src/components/ou-filter/ou-filter.js

@@ -54,24 +54,20 @@ export class OuFilterDataManager {
  */
 class OuFilter extends LocalizeLabsElement(MobxLitElement) {
 
-	static get properties() {
-		return {
-			dataManager: { type: Object, attribute: false },
-			isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
-			disabled: { type: Boolean, attribute: 'disabled' }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static properties = {
+		dataManager: { type: Object, attribute: false },
+		isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
+		disabled: { type: Boolean, attribute: 'disabled' }
+	};
+
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	constructor() {
 		super();

package/src/components/ou-filter/tree-filter.js

@@ -554,33 +554,29 @@ decorate(Tree, {
  */
 class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 
-	static get properties() {
-		return {
-			tree: { type: Object, attribute: false },
-			openerText: { type: String, attribute: 'opener-text' },
-			openerTextSelected: { type: String, attribute: 'opener-text-selected' },
-			searchString: { type: String, attribute: 'search-string', reflect: true },
-			isLoadMoreSearch: { type: Boolean, attribute: 'load-more-search', reflect: true },
-			isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
-			disabled: { type: Boolean, attribute: 'disabled' },
-			_isLoadingSearch: { type: Boolean, attribute: false }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
+	static properties = {
+		tree: { type: Object, attribute: false },
+		openerText: { type: String, attribute: 'opener-text' },
+		openerTextSelected: { type: String, attribute: 'opener-text-selected' },
+		searchString: { type: String, attribute: 'search-string', reflect: true },
+		isLoadMoreSearch: { type: Boolean, attribute: 'load-more-search', reflect: true },
+		isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
+		disabled: { type: Boolean, attribute: 'disabled' },
+		_isLoadingSearch: { type: Boolean, attribute: false }
+	};
+
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
 
-			d2l-button.d2l-tree-load-more {
-				padding-bottom: 12px;
-			}
-		`;
-	}
+		d2l-button.d2l-tree-load-more {
+			padding-bottom: 12px;
+		}
+	`;
 
 	constructor() {
 		super();

package/src/components/ou-filter/tree-selector-node.js

@@ -15,77 +15,73 @@ import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
  *
  */
 class TreeSelectorNode extends LocalizeLabsElement(RtlMixin(LitElement)) {
-	static get properties() {
-		return {
-			name: { type: String },
-			dataId: { type: Number, attribute: 'data-id' },
-			isOpen: { type: Boolean, reflect: true, attribute: 'open' },
-			selectedState: { type: String, reflect: true, attribute: 'selected-state' },
-			isOpenable: { type: Boolean, reflect: true, attribute: 'openable' },
-			// for screen readers
-			indentLevel: { type: Number, attribute: 'indent-level' },
-			parentName: { type: String, attribute: 'parent-name' },
-			// for search: if isSearch, only search-result nodes are shown; the caller should ensure their ancestors are open
-			isSearch: { type: Boolean, reflect: true, attribute: 'search' },
-			isSearchResult: { type: Boolean, reflect: true, attribute: 'search-result' }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-				font-size: 0.8rem;
-			}
-			:host([hidden]) {
-				display: none;
-			}
+	static properties = {
+		name: { type: String },
+		dataId: { type: Number, attribute: 'data-id' },
+		isOpen: { type: Boolean, reflect: true, attribute: 'open' },
+		selectedState: { type: String, reflect: true, attribute: 'selected-state' },
+		isOpenable: { type: Boolean, reflect: true, attribute: 'openable' },
+		// for screen readers
+		indentLevel: { type: Number, attribute: 'indent-level' },
+		parentName: { type: String, attribute: 'parent-name' },
+		// for search: if isSearch, only search-result nodes are shown; the caller should ensure their ancestors are open
+		isSearch: { type: Boolean, reflect: true, attribute: 'search' },
+		isSearchResult: { type: Boolean, reflect: true, attribute: 'search-result' }
+	};
+
+	static styles = css`
+		:host {
+			display: block;
+			font-size: 0.8rem;
+		}
+		:host([hidden]) {
+			display: none;
+		}
 
-			.d2l-labs-tree-selector-node-node {
-				display: flex;
-				flex-wrap: nowrap;
-				margin-bottom: 16px;
-			}
+		.d2l-labs-tree-selector-node-node {
+			display: flex;
+			flex-wrap: nowrap;
+			margin-bottom: 16px;
+		}
 
-			d2l-input-checkbox {
-				display: inline-block;
-			}
+		d2l-input-checkbox {
+			display: inline-block;
+		}
 
-			.d2l-labs-tree-selector-node-open-control {
-				cursor: default;
-				margin-top: -3px;
-			}
-			.d2l-labs-tree-selector-node-open-control .d2l-labs-tree-selector-node-open {
-				display: none;
-			}
-			.d2l-labs-tree-selector-node-open-control[open] .d2l-labs-tree-selector-node-open {
-				display: inline-block;
-			}
-			.d2l-labs-tree-selector-node-open-control[open] .d2l-labs-tree-selector-node-closed {
-				display: none;
-			}
+		.d2l-labs-tree-selector-node-open-control {
+			cursor: default;
+			margin-top: -3px;
+		}
+		.d2l-labs-tree-selector-node-open-control .d2l-labs-tree-selector-node-open {
+			display: none;
+		}
+		.d2l-labs-tree-selector-node-open-control[open] .d2l-labs-tree-selector-node-open {
+			display: inline-block;
+		}
+		.d2l-labs-tree-selector-node-open-control[open] .d2l-labs-tree-selector-node-closed {
+			display: none;
+		}
 
-			.d2l-labs-tree-selector-node-subtree {
-				margin-left: 34px;
-				margin-right: 0;
-			}
-			:host([dir="rtl"]) .d2l-labs-tree-selector-node-subtree {
-				margin-left: 0;
-				margin-right: 34px;
-			}
-			.d2l-labs-tree-selector-node-subtree[hidden] {
-				display: none;
-			}
+		.d2l-labs-tree-selector-node-subtree {
+			margin-left: 34px;
+			margin-right: 0;
+		}
+		:host([dir="rtl"]) .d2l-labs-tree-selector-node-subtree {
+			margin-left: 0;
+			margin-right: 34px;
+		}
+		.d2l-labs-tree-selector-node-subtree[hidden] {
+			display: none;
+		}
 
-			.d2l-labs-tree-selector-node-text {
-				cursor: default;
-				display: inline-block;
-				margin-left: 0.5rem;
-				margin-right: 0.5rem;
-				width: 100%;
-			}
-		`;
-	}
+		.d2l-labs-tree-selector-node-text {
+			cursor: default;
+			display: inline-block;
+			margin-left: 0.5rem;
+			margin-right: 0.5rem;
+			width: 100%;
+		}
+	`;
 
 	constructor() {
 		super();

package/src/components/ou-filter/tree-selector.js

@@ -24,69 +24,62 @@ const DROPDOWN_WIDTH = 368;
  */
 class TreeSelector extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			name: { type: String },
-			disabled: { type: Boolean, attribute: 'disabled' },
-			isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
-			isSearch: { type: Boolean, attribute: 'search', reflect: true },
-			isSelected: { type: Boolean, attribute: 'selected', reflect: true },
-			_dropdownMinWidth: { type: Number },
-			_dropdownMaxWidth: { type: Number },
-		};
-	}
+	static properties = {
+		name: { type: String },
+		disabled: { type: Boolean, attribute: 'disabled' },
+		isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
+		isSearch: { type: Boolean, attribute: 'search', reflect: true },
+		isSelected: { type: Boolean, attribute: 'selected', reflect: true },
+		_dropdownMinWidth: { type: Number },
+		_dropdownMaxWidth: { type: Number },
+	};
+
+	static styles = [selectStyles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
 
-	static get styles() {
-		return [
-			selectStyles,
-			css`
-				:host {
-					display: inline-block;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-
-				.d2l-labs-filter-dropdown-content-header {
-					display: flex;
-					justify-content: start;
-				}
-				.d2l-labs-filter-dropdown-content-header > span {
-					align-self: center;
-				}
-
-				.d2l-labs-tree-selector-margin-button {
-					margin-inline-end: 6px;
-				}
-
-				.d2l-labs-tree-selector-margin-auto {
-					margin-inline-start: auto;
-				}
-
-				.d2l-labs-tree-selector-search {
-					display: flex;
-					flex-wrap: nowrap;
-					padding-bottom: 26px;
-					padding-top: 4px;
-				}
-				@media screen and (max-width: 400px) {
-					.d2l-labs-tree-selector-search {
-						width: 100%;
-					}
-				}
-				:host([search]) d2l-dropdown d2l-dropdown-content .d2l-labs-tree-selector-tree {
-					display: none;
-				}
-
-				.d2l-labs-tree-selector-search-results {
-					display: none;
-				}
-				:host([search]) d2l-dropdown d2l-dropdown-content .d2l-labs-tree-selector-search-results {
-					display: block;
-				}
-			`
-		];
-	}
+		.d2l-labs-filter-dropdown-content-header {
+			display: flex;
+			justify-content: start;
+		}
+		.d2l-labs-filter-dropdown-content-header > span {
+			align-self: center;
+		}
+
+		.d2l-labs-tree-selector-margin-button {
+			margin-inline-end: 6px;
+		}
+
+		.d2l-labs-tree-selector-margin-auto {
+			margin-inline-start: auto;
+		}
+
+		.d2l-labs-tree-selector-search {
+			display: flex;
+			flex-wrap: nowrap;
+			padding-bottom: 26px;
+			padding-top: 4px;
+		}
+		@media screen and (max-width: 400px) {
+			.d2l-labs-tree-selector-search {
+				width: 100%;
+			}
+		}
+		:host([search]) d2l-dropdown d2l-dropdown-content .d2l-labs-tree-selector-tree {
+			display: none;
+		}
+
+		.d2l-labs-tree-selector-search-results {
+			display: none;
+		}
+		:host([search]) d2l-dropdown d2l-dropdown-content .d2l-labs-tree-selector-search-results {
+			display: block;
+		}
+	`];
 
 	constructor() {
 		super();