@brightspace-ui/labs 2.55.1 → 2.56.2

package/src/components/grade-result/grade-result-presentational.js

@@ -20,143 +20,140 @@ const numberConverter = {
  * @fires d2l-grade-result-reports-button-click - Dispatched when the reports button is clicked.
  */
 export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement) {
-	static get properties() {
-		return {
-			/**
-			 * Set to true if negative scores can be entered
-			 * @type {boolean}
-			 */
-			allowNegativeScore: { attribute: 'allow-negative-score', type: Boolean },
-			/**
-			 * This property will substitute the stock text on the "Clear Manual Override" button
-			 * @type {string}
-			 */
-			customManualOverrideClearText: { attribute: 'custom-manual-override-clear-text', type: String },
-			/**
-			 * @type {boolean}
-			 */
-			displayStudentGradePreview: { type: Boolean, attribute: 'display-student-grade-preview' },
-			/**
-			 * The text that is inside of the tooltip when hovering over the grades button
-			 * @type {string}
-			 */
-			gradeButtonTooltip: { attribute: 'grade-button-tooltip', type: String },
-			/**
-			 * Specifies the type of grade that the component is meant to render
-			 * @type {'Numeric'|'LetterGrade'}
-			 */
-			gradeType: { attribute: 'grade-type', type: String },
-			/**
-			 * This property will hide the "Overall Grade" title above the component
-			 * @type {boolean}
-			 */
-			hideTitle: { attribute: 'hide-title', type: Boolean },
-			/**
-			 * Determines whether the grades icon button is rendered
-			 * @type {boolean}
-			 */
-			includeGradeButton: { attribute: 'include-grade-button', type: Boolean },
-			/**
-			 * Determines whether the reports icon button is rendered
-			 * @type {boolean}
-			 */
-			includeReportsButton: { attribute: 'include-reports-button', type: Boolean },
-			/**
-			 * This property sets the label that will be used inside the aria-label and validation error tooltips
-			 * @type {string}
-			 */
-			inputLabelText: { attribute: 'input-label-text', type: String },
-			/**
-			 * Set to true if the user is currently manually overriding the grade. This will display the button to 'Clear Manual Override'.
-			 * @type {boolean}
-			 */
-			isManualOverrideActive: { attribute: 'is-manual-override-active', type: Boolean },
-			/**
-			 * @type {number}
-			 */
-			labelHeadingLevel: { attribute: 'label-heading-level', type: Number },
-			/**
-			 * The text that appears above the component
-			 * @type {string}
-			 */
-			labelText: { attribute: 'label-text', type: String },
-			/**
-			 * A dictionary where the key is a unique id and the value is an object containing the LetterGrade text and the PercentStart
-			 * @type {object}
-			 */
-			letterGradeOptions: { attribute: 'letter-grade-options', type: Object },
-			/**
-			 * Set to true if the user does not have permissions to edit the grade
-			 * @type {boolean}
-			 */
-			readonly: { type: Boolean },
-			/**
-			 * The text that is inside of the tooltip when hovering over the reports button
-			 * @type {string}
-			 */
-			reportsButtonTooltip: { attribute: 'reports-button-tooltip', type: String },
-			/**
-			 * Set to true if an undefined/blank grade is not considered valid
-			 * @type {boolean}
-			 */
-			required: { type: Boolean },
-			/**
-			 * The denominator of the numeric score that is given
-			 * @type {number}
-			 */
-			scoreDenominator: { attribute: 'score-denominator', type: Number },
-			/**
-			 * The numerator of the numeric score that is given
-			 * @type {number}
-			 */
-			scoreNumerator: { attribute: 'score-numerator', type: Number, converter: numberConverter },
-			/**
-			 * The current selected letter grade of the options given
-			 * @type {string}
-			 */
-			selectedLetterGrade: { attribute: 'selected-letter-grade', type: String },
-			/**
-			 * Set to true if displaying a negative grade that has been floored at 0
-			 * @type {boolean}
-			 */
-			showFlooredScoreWarning: { attribute: 'show-floored-score-warning', type: Boolean },
-			/**
-			 * This property will show the given text under the title
-			 * @type {string}
-			 */
-			subtitleText: { attribute: 'subtitle-text', type: String },
-			/**
-			 * @type {object}
-			 */
-			studentGradePreview: { type: Object, attribute: 'student-grade-preview' },
-		};
-	}
 
-	static get styles() {
-		return [ bodySmallStyles, labelStyles, css`
-			.d2l-grade-result-presentational-container {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 0 0.9rem;
-			}
-			.d2l-grade-result-presentational-score-container {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 0.3rem;
-			}
-			.d2l-grade-result-manual-override-clear {
-				margin-top: 0.3rem;
-			}
-			.d2l-label-text {
-				line-height: 1.6rem;
-				margin-bottom: 0.4rem;
-			}
-			.d2l-grade-result-presentational-subtitle {
-				font-weight: bold;
-				margin-top: -4px;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Set to true if negative scores can be entered
+		 * @type {boolean}
+		 */
+		allowNegativeScore: { attribute: 'allow-negative-score', type: Boolean },
+		/**
+		 * This property will substitute the stock text on the "Clear Manual Override" button
+		 * @type {string}
+		 */
+		customManualOverrideClearText: { attribute: 'custom-manual-override-clear-text', type: String },
+		/**
+		 * @type {boolean}
+		 */
+		displayStudentGradePreview: { type: Boolean, attribute: 'display-student-grade-preview' },
+		/**
+		 * The text that is inside of the tooltip when hovering over the grades button
+		 * @type {string}
+		 */
+		gradeButtonTooltip: { attribute: 'grade-button-tooltip', type: String },
+		/**
+		 * Specifies the type of grade that the component is meant to render
+		 * @type {'Numeric'|'LetterGrade'}
+		 */
+		gradeType: { attribute: 'grade-type', type: String },
+		/**
+		 * This property will hide the "Overall Grade" title above the component
+		 * @type {boolean}
+		 */
+		hideTitle: { attribute: 'hide-title', type: Boolean },
+		/**
+		 * Determines whether the grades icon button is rendered
+		 * @type {boolean}
+		 */
+		includeGradeButton: { attribute: 'include-grade-button', type: Boolean },
+		/**
+		 * Determines whether the reports icon button is rendered
+		 * @type {boolean}
+		 */
+		includeReportsButton: { attribute: 'include-reports-button', type: Boolean },
+		/**
+		 * This property sets the label that will be used inside the aria-label and validation error tooltips
+		 * @type {string}
+		 */
+		inputLabelText: { attribute: 'input-label-text', type: String },
+		/**
+		 * Set to true if the user is currently manually overriding the grade. This will display the button to 'Clear Manual Override'.
+		 * @type {boolean}
+		 */
+		isManualOverrideActive: { attribute: 'is-manual-override-active', type: Boolean },
+		/**
+		 * @type {number}
+		 */
+		labelHeadingLevel: { attribute: 'label-heading-level', type: Number },
+		/**
+		 * The text that appears above the component
+		 * @type {string}
+		 */
+		labelText: { attribute: 'label-text', type: String },
+		/**
+		 * A dictionary where the key is a unique id and the value is an object containing the LetterGrade text and the PercentStart
+		 * @type {object}
+		 */
+		letterGradeOptions: { attribute: 'letter-grade-options', type: Object },
+		/**
+		 * Set to true if the user does not have permissions to edit the grade
+		 * @type {boolean}
+		 */
+		readonly: { type: Boolean },
+		/**
+		 * The text that is inside of the tooltip when hovering over the reports button
+		 * @type {string}
+		 */
+		reportsButtonTooltip: { attribute: 'reports-button-tooltip', type: String },
+		/**
+		 * Set to true if an undefined/blank grade is not considered valid
+		 * @type {boolean}
+		 */
+		required: { type: Boolean },
+		/**
+		 * The denominator of the numeric score that is given
+		 * @type {number}
+		 */
+		scoreDenominator: { attribute: 'score-denominator', type: Number },
+		/**
+		 * The numerator of the numeric score that is given
+		 * @type {number}
+		 */
+		scoreNumerator: { attribute: 'score-numerator', type: Number, converter: numberConverter },
+		/**
+		 * The current selected letter grade of the options given
+		 * @type {string}
+		 */
+		selectedLetterGrade: { attribute: 'selected-letter-grade', type: String },
+		/**
+		 * Set to true if displaying a negative grade that has been floored at 0
+		 * @type {boolean}
+		 */
+		showFlooredScoreWarning: { attribute: 'show-floored-score-warning', type: Boolean },
+		/**
+		 * This property will show the given text under the title
+		 * @type {string}
+		 */
+		subtitleText: { attribute: 'subtitle-text', type: String },
+		/**
+		 * @type {object}
+		 */
+		studentGradePreview: { type: Object, attribute: 'student-grade-preview' },
+	};
+
+	static styles = [bodySmallStyles, labelStyles, css`
+		.d2l-grade-result-presentational-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 0.9rem;
+		}
+		.d2l-grade-result-presentational-score-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.3rem;
+		}
+		.d2l-grade-result-manual-override-clear {
+			margin-top: 0.3rem;
+		}
+		.d2l-label-text {
+			line-height: 1.6rem;
+			margin-bottom: 0.4rem;
+		}
+		.d2l-grade-result-presentational-subtitle {
+			font-weight: bold;
+			margin-top: -4px;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/grade-result/grade-result-student-grade-preview.js

@@ -12,49 +12,45 @@ const previewOptions = {
 
 export class D2LGradeResultStudentGradePreview extends LocalizeLabsElement(LitElement) {
 
-	static get properties() {
-		return {
-			hideLabel: {
-				type: Boolean,
-				attribute: 'hide-label'
-			},
-			outOf: {
-				type: Number,
-				attribute: 'out-of'
-			},
-			studentGradePreview: {
-				type: Object,
-				attribute: 'student-grade-preview'
-			}
-		};
-	}
+	static properties = {
+		hideLabel: {
+			type: Boolean,
+			attribute: 'hide-label'
+		},
+		outOf: {
+			type: Number,
+			attribute: 'out-of'
+		},
+		studentGradePreview: {
+			type: Object,
+			attribute: 'student-grade-preview'
+		}
+	};
 
-	static get styles() {
-		return [bodySmallStyles, bodyCompactStyles, labelStyles, css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-grade-result-student-grade-preview-container {
-				align-items: center;
-				display: flex;
-				flex-direction: row;
-				gap: 0.5rem;
-				min-height: calc(2rem + 2px);
-			}
-			.d2l-grade-result-student-grade-preview-colour {
-				border-radius: 6px;
-				height: 0.9rem;
-				width: 0.9rem;
-			}
-			.d2l-label-text {
-				line-height: 1.6rem;
-				margin-bottom: 0.4rem;
-			}
-		`];
-	}
+	static styles = [bodySmallStyles, bodyCompactStyles, labelStyles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-grade-result-student-grade-preview-container {
+			align-items: center;
+			display: flex;
+			flex-direction: row;
+			gap: 0.5rem;
+			min-height: calc(2rem + 2px);
+		}
+		.d2l-grade-result-student-grade-preview-colour {
+			border-radius: 6px;
+			height: 0.9rem;
+			width: 0.9rem;
+		}
+		.d2l-label-text {
+			line-height: 1.6rem;
+			margin-bottom: 0.4rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/src/components/media-player/media-player-audio-bars.js

@@ -61,41 +61,38 @@ const AUDIO_BAR_WIDTH_PX = AUDIO_BAR_WIDTH_REM * PX_PER_REM;
 const AUDIO_BAR_HORIZONTAL_MARGIN_PX = AUDIO_BAR_HORIZONTAL_MARGIN_REM * PX_PER_REM;
 
 class MediaPlayerAudioBars extends LitElement {
-	static get properties() {
-		return {
-			playing: { type: Boolean },
-			_visibleAudioBars: { type: Array, attribute: false },
-		};
-	}
 
-	static get styles() {
-		return css`
-			:host {
-				width: 100%;
-			}
+	static properties = {
+		playing: { type: Boolean },
+		_visibleAudioBars: { type: Array, attribute: false },
+	};
 
-			#d2l-labs-media-player-audio-bars-row {
-				align-items: center;
-				display: flex;
-				flex-direction: row;
-				height: 100%;
-				justify-content: center;
-			}
+	static styles = css`
+		:host {
+			width: 100%;
+		}
 
-			#d2l-labs-media-player-audio-bar-container {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
+		#d2l-labs-media-player-audio-bars-row {
+			align-items: center;
+			display: flex;
+			flex-direction: row;
+			height: 100%;
+			justify-content: center;
+		}
 
-			.d2l-labs-media-player-audio-bar {
-				border-top-left-radius: 0.075rem;
-				border-top-right-radius: 0.075rem;
-				margin: 0 ${AUDIO_BAR_HORIZONTAL_MARGIN_REM}rem;
-				width: ${AUDIO_BAR_WIDTH_REM}rem;
-			}
-`;
-	}
+		#d2l-labs-media-player-audio-bar-container {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+		}
+
+		.d2l-labs-media-player-audio-bar {
+			border-top-left-radius: 0.075rem;
+			border-top-right-radius: 0.075rem;
+			margin: 0 ${AUDIO_BAR_HORIZONTAL_MARGIN_REM}rem;
+			width: ${AUDIO_BAR_WIDTH_REM}rem;
+		}
+	`;
 
 	constructor() {
 		super();