@brightspace-ui/labs 2.55.1 → 2.56.2

package/src/components/file-uploader/file-uploader.js

@@ -6,177 +6,174 @@ import { FocusMixin } from '@brightspace-ui/core/mixins/focus/focus-mixin.js';
 import { LocalizeLabsElement } from '../localize-labs-element.js';
 
 class FileUploader extends FocusMixin(LocalizeLabsElement(LitElement)) {
-	static get properties() {
-		return {
-			/**
-			 * When set, displays a feedback message to the user. Used in conjunction with `feedback-type`.
-			 */
-			feedback: { type: String, reflect: true },
-			/**
-			 * The type of feedback to display. One of: "error", "warning"
-			 */
-			feedbackType: { type: String, attribute: 'feedback-type', reflect: true },
-			/**
-			 * A descriptive label to associate with the file input. Should
-			 * be unique enough to distinguish the input from others on the page.
-			 */
-			label: { type: String },
-			/**
-			 * Whether multiple files can be uploaded.
-			 */
-			multiple: { type: Boolean, reflect: true },
-			/**
-			 * Collection of uploaded files, as [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects.
-			 */
-			_files: { type: Object },
-			/**
-			 * Whether a file is currently being dragged over the document.
-			 */
-			_fileDragOver: { type: Boolean, attribute: '_file-drag-over', reflect: true },
-			_inputFocus: { type: Boolean }
-		};
-	}
 
-	static get styles() {
-		return css`
-			:host {
-				box-sizing: border-box;
-				display: block;
-				max-width: 27rem;
-			}
-			:host([feedback-type="warning"]) {
-				--d2l-file-uploader-feedback-color: var(--d2l-color-feedback-warning);
-			}
-			:host([feedback-type="error"]) {
-				--d2l-file-uploader-feedback-color: var(--d2l-color-feedback-error);
-			}
+	static properties = {
+		/**
+		 * When set, displays a feedback message to the user. Used in conjunction with `feedback-type`.
+		 */
+		feedback: { type: String, reflect: true },
+		/**
+		 * The type of feedback to display. One of: "error", "warning"
+		 */
+		feedbackType: { type: String, attribute: 'feedback-type', reflect: true },
+		/**
+		 * A descriptive label to associate with the file input. Should
+		 * be unique enough to distinguish the input from others on the page.
+		 */
+		label: { type: String },
+		/**
+		 * Whether multiple files can be uploaded.
+		 */
+		multiple: { type: Boolean, reflect: true },
+		/**
+		 * Collection of uploaded files, as [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects.
+		 */
+		_files: { type: Object },
+		/**
+		 * Whether a file is currently being dragged over the document.
+		 */
+		_fileDragOver: { type: Boolean, attribute: '_file-drag-over', reflect: true },
+		_inputFocus: { type: Boolean }
+	};
+
+	static styles = css`
+		:host {
+			box-sizing: border-box;
+			display: block;
+			max-width: 27rem;
+		}
+		:host([feedback-type="warning"]) {
+			--d2l-file-uploader-feedback-color: var(--d2l-color-feedback-warning);
+		}
+		:host([feedback-type="error"]) {
+			--d2l-file-uploader-feedback-color: var(--d2l-color-feedback-error);
+		}
 
-			.d2l-file-uploader-drop-zone {
-				border: 2px dashed var(--d2l-color-ferrite);
-				border-radius: 0.3rem;
-				padding: 1.5rem;
-				text-align: center;
-			}
+		.d2l-file-uploader-drop-zone {
+			border: 2px dashed var(--d2l-color-ferrite);
+			border-radius: 0.3rem;
+			padding: 1.5rem;
+			text-align: center;
+		}
 
-			:host([_file-drag-over]) .d2l-file-uploader-drop-zone {
-				background-color: var(--d2l-color-celestine-plus-2);
-				border-color: var(--d2l-color-celestine);
-			}
+		:host([_file-drag-over]) .d2l-file-uploader-drop-zone {
+			background-color: var(--d2l-color-celestine-plus-2);
+			border-color: var(--d2l-color-celestine);
+		}
 
-			.d2l-file-uploader-icon {
-				padding-bottom: 0.5rem;
-			}
+		.d2l-file-uploader-icon {
+			padding-bottom: 0.5rem;
+		}
 
-			:host([_file-drag-over]) svg path {
-				fill: var(--d2l-color-celestine);
-			}
+		:host([_file-drag-over]) svg path {
+			fill: var(--d2l-color-celestine);
+		}
 
-			.d2l-file-uploader-input {
-				display: inline-block;
-				height: 100%;
-				left: 0;
-				opacity: 0;
-				position: absolute;
-				top: 0;
-				width: 100%;
-			}
+		.d2l-file-uploader-input {
+			display: inline-block;
+			height: 100%;
+			left: 0;
+			opacity: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
 
-			.d2l-file-uploader-browse-label {
-				background: none;
-				border: none;
-				color: var(--d2l-color-celestine);
-				overflow: hidden;
-				padding-right: 0;
-				position: relative;
-			}
-			.d2l-file-uploader-browse-label:hover,
-			.d2l-file-uploader-browse-label-focus {
-				color: var(--d2l-color-celestine-minus-1);
-				text-decoration: underline;
-			}
+		.d2l-file-uploader-browse-label {
+			background: none;
+			border: none;
+			color: var(--d2l-color-celestine);
+			overflow: hidden;
+			padding-right: 0;
+			position: relative;
+		}
+		.d2l-file-uploader-browse-label:hover,
+		.d2l-file-uploader-browse-label-focus {
+			color: var(--d2l-color-celestine-minus-1);
+			text-decoration: underline;
+		}
 
-			.d2l-file-uploader-browse-files {
-				display: none;
-			}
+		.d2l-file-uploader-browse-files {
+			display: none;
+		}
 
-			.d2l-file-uploader-feedback {
-				-webkit-animation-duration: 0.7s;
-				animation-duration: 0.7s;
-				-webkit-animation-name: feedbackIn;
-				animation-name: feedbackIn;
-				border: 1px solid var(--d2l-color-mica);
-				border-left-color: var(--d2l-file-uploader-feedback-color);
-				border-left-width: 0.5rem;
-				border-radius: 0.3rem;
-				display: none;
-				margin-bottom: 1.5rem;
-				padding: 0.7rem 1rem 0.7rem;
+		.d2l-file-uploader-feedback {
+			-webkit-animation-duration: 0.7s;
+			animation-duration: 0.7s;
+			-webkit-animation-name: feedbackIn;
+			animation-name: feedbackIn;
+			border: 1px solid var(--d2l-color-mica);
+			border-left-color: var(--d2l-file-uploader-feedback-color);
+			border-left-width: 0.5rem;
+			border-radius: 0.3rem;
+			display: none;
+			margin-bottom: 1.5rem;
+			padding: 0.7rem 1rem 0.7rem;
+		}
+		:host(:dir(rtl)) > .d2l-file-uploader-feedback {
+			border-left-color: var(--d2l-color-mica);
+			border-left-width: 1px;
+			border-right-color: var(--d2l-file-uploader-feedback-color);
+			border-right-width: 0.5rem;
+		}
+		:host([feedback]) > .d2l-file-uploader-feedback {
+			display: block;
+		}
+
+		@keyframes feedbackIn {
+			0% {
+				max-height: 0.1rem;
+				opacity: 0;
 			}
-			:host(:dir(rtl)) > .d2l-file-uploader-feedback {
-				border-left-color: var(--d2l-color-mica);
-				border-left-width: 1px;
-				border-right-color: var(--d2l-file-uploader-feedback-color);
-				border-right-width: 0.5rem;
+			20% {
+				opacity: 0;
 			}
-			:host([feedback]) > .d2l-file-uploader-feedback {
-				display: block;
+			80% {
+				max-height: 3rem;
 			}
-
-			@keyframes feedbackIn {
-				0% {
-					max-height: 0.1rem;
-					opacity: 0;
-				}
-				20% {
-					opacity: 0;
-				}
-				80% {
-					max-height: 3rem;
-				}
-				100% {
-					opacity: 1;
-				}
+			100% {
+				opacity: 1;
 			}
+		}
 
-			@media (max-width: 992px) {
+		@media (max-width: 992px) {
 
-				.d2l-file-uploader-input-container {
-					display: block;
-					margin-top: 0.8rem;
-				}
-
-				.d2l-file-uploader-browse-files {
-					display: inline;
-				}
+			.d2l-file-uploader-input-container {
+				display: block;
+				margin-top: 0.8rem;
+			}
 
-				.d2l-file-uploader-browse {
-					display: none;
-				}
+			.d2l-file-uploader-browse-files {
+				display: inline;
+			}
 
-				.d2l-file-uploader-browse-label {
-					background-color: var(--d2l-color-celestine);
-					border-color: var(--d2l-color-celestine-minus-1);
-					border-radius: 0.3rem;
-					border-style: none;
-					color: #ffffff;
-					display: inline-block;
-					font-size: 0.7rem;
-					padding: 0.35rem 1.5rem;
-				}
+			.d2l-file-uploader-browse {
+				display: none;
+			}
 
-				.d2l-file-uploader-browse-label:hover,
-				.d2l-file-uploader-browse-label-focus {
-					background-color: var(--d2l-color-celestine-minus-1);
-					color: #ffffff;
-					text-decoration: none;
-				}
-				.d2l-file-uploader-browse-label-focus {
-					box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-				}
+			.d2l-file-uploader-browse-label {
+				background-color: var(--d2l-color-celestine);
+				border-color: var(--d2l-color-celestine-minus-1);
+				border-radius: 0.3rem;
+				border-style: none;
+				color: #ffffff;
+				display: inline-block;
+				font-size: 0.7rem;
+				padding: 0.35rem 1.5rem;
+			}
 
+			.d2l-file-uploader-browse-label:hover,
+			.d2l-file-uploader-browse-label-focus {
+				background-color: var(--d2l-color-celestine-minus-1);
+				color: #ffffff;
+				text-decoration: none;
 			}
-		`;
-	}
+			.d2l-file-uploader-browse-label-focus {
+				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
+			}
+
+		}
+	`;
 
 	constructor() {
 		super();

package/src/components/grade-result/grade-result-icon-button.js

@@ -3,12 +3,11 @@ import { html, LitElement } from 'lit';
 import { getUniqueId } from '@brightspace-ui/core/helpers/uniqueId.js';
 
 export class D2LGradeResultIconButton extends LitElement {
-	static get properties() {
-		return {
-			text: { type: String },
-			icon: { type: String },
-		};
-	}
+
+	static properties = {
+		text: { type: String },
+		icon: { type: String },
+	};
 
 	render() {
 		return html`

package/src/components/grade-result/grade-result-letter-score.js

@@ -8,29 +8,25 @@ import { selectStyles } from '@brightspace-ui/core/components/inputs/input-selec
  */
 export class D2LGradeResultLetterScore extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			availableOptions: { attribute: 'available-options', type: Object },
-			label: { type: String },
-			selectedOption: { attribute: 'selected-option', type: String },
-			readonly: { type: Boolean }
-		};
-	}
+	static properties = {
+		availableOptions: { attribute: 'available-options', type: Object },
+		label: { type: String },
+		selectedOption: { attribute: 'selected-option', type: String },
+		readonly: { type: Boolean }
+	};
 
-	static get styles() {
-		return [selectStyles, bodyStandardStyles, css`
-			.d2l-grade-result-letter-score-container {
-				width: 8rem;
-			}
-			.d2l-grade-result-letter-score-select {
-				width: 100%;
-			}
-			.d2l-grade-result-letter-score-score-read-only {
-				height: calc(2rem + 2px);
-				line-height: calc(2rem + 2px);
-			}
-		`];
-	}
+	static styles = [selectStyles, bodyStandardStyles, css`
+		.d2l-grade-result-letter-score-container {
+			width: 8rem;
+		}
+		.d2l-grade-result-letter-score-select {
+			width: 100%;
+		}
+		.d2l-grade-result-letter-score-score-read-only {
+			height: calc(2rem + 2px);
+			line-height: calc(2rem + 2px);
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/grade-result/grade-result-numeric-score.js

@@ -18,35 +18,32 @@ const MIN_POSITIVE_GRADE = 0;
  * @fires d2l-grade-result-grade-change - Dispatched on the change of the grade for a gradeType="Numeric" grade.
  */
 export class D2LGradeResultNumericScore extends LocalizeLabsElement(LitElement) {
-	static get properties() {
-		return {
-			label: { type: String },
-			scoreNumerator: { attribute: 'score-numerator', type: Number, converter: numberConverter },
-			scoreDenominator: { attribute: 'score-denominator', type: Number },
-			readonly: { type: Boolean },
-			required: { type: Boolean },
-			allowNegativeScore: { attribute: 'allow-negative-score', type: Boolean },
-			showFlooredScoreWarning: { attribute: 'show-floored-score-warning', type: Boolean },
-		};
-	}
 
-	static get styles() {
-		return [bodyCompactStyles, bodyStandardStyles, css`
-			.d2l-grade-result-numeric-score-container {
-				align-items: center;
-				display: flex;
-				flex-direction: row;
-			}
-			.d2l-grade-result-numeric-score-score-read-only {
-				height: calc(2rem + 2px);
-				line-height: calc(2rem + 2px);
-				max-width: 5.25rem;
-			}
-			.d2l-grade-result-numeric-score-hint {
-				margin: 0 0.3rem;
-			}
-		`];
-	}
+	static properties = {
+		label: { type: String },
+		scoreNumerator: { attribute: 'score-numerator', type: Number, converter: numberConverter },
+		scoreDenominator: { attribute: 'score-denominator', type: Number },
+		readonly: { type: Boolean },
+		required: { type: Boolean },
+		allowNegativeScore: { attribute: 'allow-negative-score', type: Boolean },
+		showFlooredScoreWarning: { attribute: 'show-floored-score-warning', type: Boolean },
+	};
+
+	static styles = [bodyCompactStyles, bodyStandardStyles, css`
+		.d2l-grade-result-numeric-score-container {
+			align-items: center;
+			display: flex;
+			flex-direction: row;
+		}
+		.d2l-grade-result-numeric-score-score-read-only {
+			height: calc(2rem + 2px);
+			line-height: calc(2rem + 2px);
+			max-width: 5.25rem;
+		}
+		.d2l-grade-result-numeric-score-hint {
+			margin: 0 0.3rem;
+		}
+	`];
 
 	render() {
 		const roundedNumerator = isNaN(this.scoreNumerator) ? '' : Math.round((this.scoreNumerator + Number.EPSILON) * 100) / 100;