@brightspace-ui/core 3.267.1 → 3.267.3

package/components/inputs/input-number.js

@@ -80,124 +80,118 @@ function roundPrecisely(val, maxFractionDigits) {
  */
 class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Specifies which types of values [can be autofilled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) by the browser.
-			 * @type {string}
-			 */
-			autocomplete: { type: String },
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			autofocus: { type: Boolean },
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean },
-			/**
-			 * ADVANCED: Hide the alert icon when input is invalid
-			 * @type {boolean}
-			 */
-			hideInvalidIcon: { attribute: 'hide-invalid-icon', type: Boolean, reflect: true },
-			/**
-			 * Restricts the maximum width of the input box without restricting the width of the label
-			 * @type {string}
-			 */
-			inputWidth: { attribute: 'input-width', type: String },
-			/**
-			 * Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
-			 * @type {boolean}
-			 */
-			labelHidden: { type: Boolean, attribute: 'label-hidden' },
-			/**
-			 * Maximum value allowed
-			 * @type {number}
-			 */
-			max: { type: Number },
-			/**
-			 * Indicates whether the max value is exclusive
-			 * @type {boolean}
-			 */
-			maxExclusive: { type: Boolean, attribute: 'max-exclusive' },
-			/**
-			 * Maximum number of digits allowed after the decimal place. Must be between 0 and 20 and greater than or equal to `minFractionDigits`. Default is Greater of `minFractionDigits` or `3`.
-			 * @type {number}
-			 */
-			maxFractionDigits: { type: Number, attribute: 'max-fraction-digits' },
-			/**
-			 * Minimum value allowed
-			 * @type {number}
-			 */
-			min: { type: Number },
-			/**
-			 * Indicates whether the min value is exclusive
-			 * @type {boolean}
-			 */
-			minExclusive: { type: Boolean, attribute: 'min-exclusive' },
-			/**
-			 * Minimum number of digits allowed after the decimal place. Must be between 0 and 20 and less than or equal to `maxFractionDigits`. Default is `0`.
-			 * @type {number}
-			 */
-			minFractionDigits: { type: Number, attribute: 'min-fraction-digits' },
-			/**
-			 * Indicates that a value is required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean },
-			/**
-			 * @ignore
-			 */
-			trailingZeroes: { type: Boolean, attribute: 'trailing-zeroes' },
-			/**
-			 * Unit associated with the input value, displayed next to input and announced as part of the label
-			 * @type {string}
-			 */
-			unit: { type: String },
-			/**
-			 * ACCESSIBILITY: Label for the unit, which is only picked up by screenreaders. Required if `unit` is used.
-			 * @type {string}
-			 */
-			unitLabel: { attribute: 'unit-label', type: String },
-			/**
-			 * Value of the input
-			 * @type {number}
-			 */
-			value: { type: Number, converter: numberConverter },
-			/**
-			 * Alignment of the value text within the input
-			 * @type {'start'|'end'}
-			 */
-			valueAlign: { attribute: 'value-align', type: String },
-			/**
-			 * @ignore
-			 */
-			valueTrailingZeroes: { type: String, attribute: 'value-trailing-zeroes' },
-			_afterSlotWidth: { state: true },
-			_hintType: { state: true },
-			_formattedValue: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [ super.styles,
-			css`
-				:host {
-					display: inline-block;
-					position: var(--d2l-input-position, relative); /* overridden by sticky headers in grades */
-					width: 100%;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-				d2l-input-text:not([skeleton]) {
-					width: auto;
-				}
-			`
-		];
-	}
+	static properties = {
+		/**
+		 * Specifies which types of values [can be autofilled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) by the browser.
+		 * @type {string}
+		 */
+		autocomplete: { type: String },
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		autofocus: { type: Boolean },
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * ADVANCED: Hide the alert icon when input is invalid
+		 * @type {boolean}
+		 */
+		hideInvalidIcon: { attribute: 'hide-invalid-icon', type: Boolean, reflect: true },
+		/**
+		 * Restricts the maximum width of the input box without restricting the width of the label
+		 * @type {string}
+		 */
+		inputWidth: { attribute: 'input-width', type: String },
+		/**
+		 * Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
+		 * @type {boolean}
+		 */
+		labelHidden: { type: Boolean, attribute: 'label-hidden' },
+		/**
+		 * Maximum value allowed
+		 * @type {number}
+		 */
+		max: { type: Number },
+		/**
+		 * Indicates whether the max value is exclusive
+		 * @type {boolean}
+		 */
+		maxExclusive: { type: Boolean, attribute: 'max-exclusive' },
+		/**
+		 * Maximum number of digits allowed after the decimal place. Must be between 0 and 20 and greater than or equal to `minFractionDigits`. Default is Greater of `minFractionDigits` or `3`.
+		 * @type {number}
+		 */
+		maxFractionDigits: { type: Number, attribute: 'max-fraction-digits' },
+		/**
+		 * Minimum value allowed
+		 * @type {number}
+		 */
+		min: { type: Number },
+		/**
+		 * Indicates whether the min value is exclusive
+		 * @type {boolean}
+		 */
+		minExclusive: { type: Boolean, attribute: 'min-exclusive' },
+		/**
+		 * Minimum number of digits allowed after the decimal place. Must be between 0 and 20 and less than or equal to `maxFractionDigits`. Default is `0`.
+		 * @type {number}
+		 */
+		minFractionDigits: { type: Number, attribute: 'min-fraction-digits' },
+		/**
+		 * Indicates that a value is required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean },
+		/**
+		 * @ignore
+		 */
+		trailingZeroes: { type: Boolean, attribute: 'trailing-zeroes' },
+		/**
+		 * Unit associated with the input value, displayed next to input and announced as part of the label
+		 * @type {string}
+		 */
+		unit: { type: String },
+		/**
+		 * ACCESSIBILITY: Label for the unit, which is only picked up by screenreaders. Required if `unit` is used.
+		 * @type {string}
+		 */
+		unitLabel: { attribute: 'unit-label', type: String },
+		/**
+		 * Value of the input
+		 * @type {number}
+		 */
+		value: { type: Number, converter: numberConverter },
+		/**
+		 * Alignment of the value text within the input
+		 * @type {'start'|'end'}
+		 */
+		valueAlign: { attribute: 'value-align', type: String },
+		/**
+		 * @ignore
+		 */
+		valueTrailingZeroes: { type: String, attribute: 'value-trailing-zeroes' },
+		_afterSlotWidth: { state: true },
+		_hintType: { state: true },
+		_formattedValue: { state: true }
+	};
+
+	static styles = [super.styles, css`
+		:host {
+			display: inline-block;
+			position: var(--d2l-input-position, relative); /* overridden by sticky headers in grades */
+			width: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-input-text:not([skeleton]) {
+			width: auto;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/inputs/input-percent.js

@@ -15,65 +15,59 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
  */
 class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			autofocus: { type: Boolean },
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean },
-			/**
-			 * Restricts the maximum width of the input box without restricting the width of the label.
-			 * @type {string}
-			 */
-			inputWidth: { attribute: 'input-width', type: String },
-			/**
-			 * Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
-			 * @type {boolean}
-			 */
-			labelHidden: { type: Boolean, attribute: 'label-hidden' },
-			/**
-			 * Maximum number of decimal values to show (rounds value up or down).
-			 * @type {number}
-			 */
-			maxFractionDigits: { type: Number, attribute: 'max-fraction-digits' },
-			/**
-			 * Minimum number of decimal values to show.
-			 * @type {number}
-			 */
-			minFractionDigits: { type: Number, attribute: 'min-fraction-digits' },
-			/**
-			 * Indicates that a value is required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean },
-			/**
-			 * Value of the input
-			 * @type {number}
-			 */
-			value: { type: Number }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		autofocus: { type: Boolean },
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * Restricts the maximum width of the input box without restricting the width of the label.
+		 * @type {string}
+		 */
+		inputWidth: { attribute: 'input-width', type: String },
+		/**
+		 * Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
+		 * @type {boolean}
+		 */
+		labelHidden: { type: Boolean, attribute: 'label-hidden' },
+		/**
+		 * Maximum number of decimal values to show (rounds value up or down).
+		 * @type {number}
+		 */
+		maxFractionDigits: { type: Number, attribute: 'max-fraction-digits' },
+		/**
+		 * Minimum number of decimal values to show.
+		 * @type {number}
+		 */
+		minFractionDigits: { type: Number, attribute: 'min-fraction-digits' },
+		/**
+		 * Indicates that a value is required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean },
+		/**
+		 * Value of the input
+		 * @type {number}
+		 */
+		value: { type: Number }
+	};
 
-	static get styles() {
-		return [ super.styles,
-			css`
-				:host {
-					display: inline-block;
-					position: relative;
-					width: 100%;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-			`
-		];
-	}
+	static styles = [super.styles, css`
+		:host {
+			display: inline-block;
+			position: relative;
+			width: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/inputs/input-radio-group.js

@@ -13,57 +13,53 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
  */
 class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Display the radio buttons horizontally
-			 * @type {boolean}
-			 */
-			horizontal: { type: Boolean, reflect: true },
-			/**
-			 * REQUIRED: Label for the group of radio inputs
-			 * @type {string}
-			 */
-			label: { required: true, type: String },
-			/**
-			 * Hides the label visually
-			 * @type {boolean}
-			 */
-			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
-			/**
-			 * Indicates that a value is required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Display the radio buttons horizontally
+		 * @type {boolean}
+		 */
+		horizontal: { type: Boolean, reflect: true },
+		/**
+		 * REQUIRED: Label for the group of radio inputs
+		 * @type {string}
+		 */
+		label: { required: true, type: String },
+		/**
+		 * Hides the label visually
+		 * @type {boolean}
+		 */
+		labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
+		/**
+		 * Indicates that a value is required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true }
+	};
 
-	static get styles() {
-		return [super.styles, inputLabelStyles, css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			div[role="radiogroup"] {
-				display: flex;
-				flex-direction: column;
-				gap: 0.6rem;
-			}
-			:host([horizontal]) div[role="radiogroup"] {
-				flex-direction: row;
-				flex-wrap: wrap;
-			}
+	static styles = [super.styles, inputLabelStyles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		div[role="radiogroup"] {
+			display: flex;
+			flex-direction: column;
+			gap: 0.6rem;
+		}
+		:host([horizontal]) div[role="radiogroup"] {
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
 
-			.d2l-input-label[hidden] {
-				display: none;
-			}
-			::slotted(:not(d2l-input-radio)) {
-				display: none;
-			}
-		`];
-	}
+		.d2l-input-label[hidden] {
+			display: none;
+		}
+		::slotted(:not(d2l-input-radio)) {
+			display: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/inputs/input-radio-spacer.js

@@ -6,19 +6,17 @@ import { css, html, LitElement } from 'lit';
  */
 class InputRadioSpacer extends LitElement {
 
-	static get styles() {
-		return css`
-				:host {
-					box-sizing: border-box;
-					display: block;
-					margin-bottom: 0.9rem;
-					padding-inline-start: 1.7rem;
-				}
-				:host(.d2l-input-inline-help) {
-					margin-bottom: 0.9rem !important;
-				}
-			`;
-	}
+	static styles = css`
+		:host {
+			box-sizing: border-box;
+			display: block;
+			margin-bottom: 0.9rem;
+			padding-inline-start: 1.7rem;
+		}
+		:host(.d2l-input-inline-help) {
+			margin-bottom: 0.9rem !important;
+		}
+	`;
 
 	render() {
 		return html`<slot></slot>`;

package/components/inputs/input-radio.js

@@ -18,73 +18,69 @@ import { styleMap } from 'lit/directives/style-map.js';
  */
 class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyRequiredMixin(LitElement)))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Checked state
-			 * @type {boolean}
-			 */
-			checked: { type: Boolean, reflect: true },
-			/**
-			 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
-			 * @type {string}
-			 */
-			description: { type: String },
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Tooltip text displayed when the input is disabled
-			 * @type {string}
-			 */
-			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
-			/**
-			 * REQUIRED: Label for the input
-			 * @type {string}
-			 */
-			label: { required: true, type: String },
-			/**
-			 * Hides the supporting slot when unchecked
-			 * @type {boolean}
-			 */
-			supportingHiddenWhenUnchecked: { type: Boolean, attribute: 'supporting-hidden-when-unchecked', reflect: true },
-			/**
-			 * Value of the input
-			 * @type {string}
-			 */
-			value: { type: String },
-			_checked: { state: true },
-			_focusable: { state: true },
-			_hasSupporting: { state: true },
-			_horizontal: { state: true },
-			_isHovered: { state: true },
-			_invalid: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Checked state
+		 * @type {boolean}
+		 */
+		checked: { type: Boolean, reflect: true },
+		/**
+		 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
+		 * @type {string}
+		 */
+		description: { type: String },
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Tooltip text displayed when the input is disabled
+		 * @type {string}
+		 */
+		disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+		/**
+		 * REQUIRED: Label for the input
+		 * @type {string}
+		 */
+		label: { required: true, type: String },
+		/**
+		 * Hides the supporting slot when unchecked
+		 * @type {boolean}
+		 */
+		supportingHiddenWhenUnchecked: { type: Boolean, attribute: 'supporting-hidden-when-unchecked', reflect: true },
+		/**
+		 * Value of the input
+		 * @type {string}
+		 */
+		value: { type: String },
+		_checked: { state: true },
+		_focusable: { state: true },
+		_hasSupporting: { state: true },
+		_horizontal: { state: true },
+		_isHovered: { state: true },
+		_invalid: { state: true }
+	};
 
-	static get styles() {
-		return [super.styles, radioStyles, css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-input-radio-label {
-				cursor: default;
-				margin-block-end: 0;
-			}
-			.d2l-input-inline-help,
-			.d2l-input-radio-supporting {
-				margin-inline-start: 1.7rem;
-			}
-			.d2l-input-radio-supporting {
-				margin-block-start: 0.6rem;
-			}
-		`];
-	}
+	static styles = [super.styles, radioStyles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-input-radio-label {
+			cursor: default;
+			margin-block-end: 0;
+		}
+		.d2l-input-inline-help,
+		.d2l-input-radio-supporting {
+			margin-inline-start: 1.7rem;
+		}
+		.d2l-input-radio-supporting {
+			margin-block-start: 0.6rem;
+		}
+	`];
 
 	constructor() {
 		super();