@brightspace-ui/core 3.267.1 → 3.268.0

package/components/inputs/input-date-time.js

@@ -43,85 +43,81 @@ function _getFormattedDefaultTime(defaultValue) {
  */
 class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean },
-			/**
-			 * Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
-			 * @type {boolean}
-			 */
-			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
-			/**
-			 * Indicates that localization will be handled by the consumer. `*value` will not be converted from/to UTC.
-			 * @type {boolean}
-			 */
-			localized: { reflect: true, type: Boolean },
-			/**
-			 * Maximum valid date/time that could be selected by a user
-			 * @type {string}
-			 */
-			maxValue: { attribute: 'max-value', reflect: true, type: String },
-			/**
-			 * Minimum valid date/time that could be selected by a user
-			 * @type {string}
-			 */
-			minValue: { attribute: 'min-value', reflect: true, type: String },
-			/**
-			 * Indicates if the date or time dropdown is open
-			 * @type {boolean}
-			 */
-			opened: { type: Boolean },
-			/**
-			 * Indicates that a value is required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true },
-			/**
-			 * Default value of time input. Accepts times formatted as "hh:mm:ss", and the keywords "startOfDay" and "endOfDay".
-			 * @type {string}
-			 */
-			timeDefaultValue: { attribute: 'time-default-value', reflect: true, type: String },
-			/**
-			 * Time zone identifier for the time input to use.
-			 * @type {string}
-			 */
-			timeZoneId: { type: String, attribute: 'time-zone-id' },
-			/**
-			 * Hides the time zone inside the time selection dropdown. Should only be used when the time input value is not related to any one time zone
-			 * @type {Boolean}
-			 */
-			timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
-			/**
-			 * Value of the input
-			 * @type {string}
-			 */
-			value: { type: String },
-			_maxValueLocalized: { type: String },
-			_minValueLocalized: { type: String }
-		};
-	}
-
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-input-date-time-container {
-				margin-top: -0.3rem;
-			}
-			d2l-input-date,
-			d2l-input-time {
-				margin-top: 0.3rem;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
+		 * @type {boolean}
+		 */
+		labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
+		/**
+		 * Indicates that localization will be handled by the consumer. `*value` will not be converted from/to UTC.
+		 * @type {boolean}
+		 */
+		localized: { reflect: true, type: Boolean },
+		/**
+		 * Maximum valid date/time that could be selected by a user
+		 * @type {string}
+		 */
+		maxValue: { attribute: 'max-value', reflect: true, type: String },
+		/**
+		 * Minimum valid date/time that could be selected by a user
+		 * @type {string}
+		 */
+		minValue: { attribute: 'min-value', reflect: true, type: String },
+		/**
+		 * Indicates if the date or time dropdown is open
+		 * @type {boolean}
+		 */
+		opened: { type: Boolean },
+		/**
+		 * Indicates that a value is required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true },
+		/**
+		 * Default value of time input. Accepts times formatted as "hh:mm:ss", and the keywords "startOfDay" and "endOfDay".
+		 * @type {string}
+		 */
+		timeDefaultValue: { attribute: 'time-default-value', reflect: true, type: String },
+		/**
+		 * Time zone identifier for the time input to use.
+		 * @type {string}
+		 */
+		timeZoneId: { type: String, attribute: 'time-zone-id' },
+		/**
+		 * Hides the time zone inside the time selection dropdown. Should only be used when the time input value is not related to any one time zone
+		 * @type {Boolean}
+		 */
+		timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
+		/**
+		 * Value of the input
+		 * @type {string}
+		 */
+		value: { type: String },
+		_maxValueLocalized: { type: String },
+		_minValueLocalized: { type: String }
+	};
+
+	static styles = [super.styles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-input-date-time-container {
+			margin-top: -0.3rem;
+		}
+		d2l-input-date,
+		d2l-input-time {
+			margin-top: 0.3rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/inputs/input-date.js

@@ -30,111 +30,107 @@ export function formatISODateInUserCalDescriptor(val) {
  */
 class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean },
-			/**
-			 * @ignore
-			 * Optionally add a 'Now' button to be used in date-time pickers only.
-			 */
-			hasNow: { attribute: 'has-now', type: Boolean },
-			/**
-			 * 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 valid date that could be selected by a user
-			 * @type {string}
-			 */
-			maxValue: { attribute: 'max-value', reflect: true, type: String },
-			/**
-			 * Minimum valid date that could be selected by a user
-			 * @type {string}
-			 */
-			minValue: { attribute: 'min-value', reflect: true, type: String },
-			/**
-			 * @ignore
-			 * Disables validation of max and min value. The min and max value will still be enforced but the component will not be put into an error state or show an error tooltip.
-			 */
-			noValidateMinMax: { attribute: 'novalidateminmax', type: Boolean },
-			/**
-			 * Indicates if the calendar dropdown is open
-			 * @type {boolean}
-			 */
-			opened: { type: Boolean, reflect: true },
-			/**
-			 * Indicates that a value is required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true },
-			/**
-			 * Value of the input
-			 * @type {string}
-			 */
-			value: { type: String },
-			_hiddenContentWidth: { type: String },
-			_dateTimeDescriptor: { type: Object },
-			_dropdownFirstOpened: { type: Boolean },
-			_formattedValue: { type: String },
-			_inputTextFocusShowTooltip: { type: Boolean },
-			_showInfoTooltip: { type: Boolean },
-			_shownValue: { type: String },
-			_showRevertInstructions: { state: true },
-			_showRevertTooltip: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				display: inline-block;
-				width: 100%;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			d2l-dropdown {
-				width: 100%;
-			}
-			d2l-icon {
-				--d2l-icon-height: 0.8rem;
-				--d2l-icon-width: 0.8rem;
-				margin-left: 0.6rem;
-				margin-right: 0.6rem;
-			}
-			:host([disabled]) d2l-icon {
-				opacity: 0.5;
-			}
-			.d2l-input-date-hidden-text {
-				font-family: inherit;
-				font-size: 0.8rem;
-				font-weight: 400;
-				letter-spacing: 0.02rem;
-				line-height: 1.4rem;
-				position: absolute;
-				visibility: hidden;
-				width: auto;
-			}
-			.d2l-input-date-hidden-text > div {
-				padding-left: 2rem; /* simulates space taken up by the icon */
-			}
-			d2l-calendar {
-				padding: 0.25rem 0.6rem;
-			}
-			.d2l-calendar-slot-buttons {
-				border-top: 1px solid var(--d2l-color-gypsum);
-				display: flex;
-				justify-content: center;
-				margin-top: 0.3rem;
-				padding-top: 0.3rem;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * @ignore
+		 * Optionally add a 'Now' button to be used in date-time pickers only.
+		 */
+		hasNow: { attribute: 'has-now', type: Boolean },
+		/**
+		 * 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 valid date that could be selected by a user
+		 * @type {string}
+		 */
+		maxValue: { attribute: 'max-value', reflect: true, type: String },
+		/**
+		 * Minimum valid date that could be selected by a user
+		 * @type {string}
+		 */
+		minValue: { attribute: 'min-value', reflect: true, type: String },
+		/**
+		 * @ignore
+		 * Disables validation of max and min value. The min and max value will still be enforced but the component will not be put into an error state or show an error tooltip.
+		 */
+		noValidateMinMax: { attribute: 'novalidateminmax', type: Boolean },
+		/**
+		 * Indicates if the calendar dropdown is open
+		 * @type {boolean}
+		 */
+		opened: { type: Boolean, reflect: true },
+		/**
+		 * Indicates that a value is required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true },
+		/**
+		 * Value of the input
+		 * @type {string}
+		 */
+		value: { type: String },
+		_hiddenContentWidth: { type: String },
+		_dateTimeDescriptor: { type: Object },
+		_dropdownFirstOpened: { type: Boolean },
+		_formattedValue: { type: String },
+		_inputTextFocusShowTooltip: { type: Boolean },
+		_showInfoTooltip: { type: Boolean },
+		_shownValue: { type: String },
+		_showRevertInstructions: { state: true },
+		_showRevertTooltip: { state: true }
+	};
+
+	static styles = [super.styles, css`
+		:host {
+			display: inline-block;
+			width: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-dropdown {
+			width: 100%;
+		}
+		d2l-icon {
+			--d2l-icon-height: 0.8rem;
+			--d2l-icon-width: 0.8rem;
+			margin-left: 0.6rem;
+			margin-right: 0.6rem;
+		}
+		:host([disabled]) d2l-icon {
+			opacity: 0.5;
+		}
+		.d2l-input-date-hidden-text {
+			font-family: inherit;
+			font-size: 0.8rem;
+			font-weight: 400;
+			letter-spacing: 0.02rem;
+			line-height: 1.4rem;
+			position: absolute;
+			visibility: hidden;
+			width: auto;
+		}
+		.d2l-input-date-hidden-text > div {
+			padding-left: 2rem; /* simulates space taken up by the icon */
+		}
+		d2l-calendar {
+			padding: 0.25rem 0.6rem;
+		}
+		.d2l-calendar-slot-buttons {
+			border-top: 1px solid var(--d2l-color-gypsum);
+			display: flex;
+			justify-content: center;
+			margin-top: 0.3rem;
+			padding-top: 0.3rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/inputs/input-fieldset.js

@@ -16,50 +16,44 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
  */
 class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonMixin(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Label for the fieldset
-			 * @type {string}
-			 */
-			label: { type: String, required: true },
-			/**
-			 * Hides the label visually
-			 * @type {boolean}
-			 */
-			labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
-			/**
-			 * Style of the fieldset label
-			 * @type {'default'|'heading'}
-			 */
-			labelStyle: { type: String, attribute: 'label-style', reflect: true },
-			/**
-			 * Indicates that a value is required for inputs in the fieldset
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Label for the fieldset
+		 * @type {string}
+		 */
+		label: { type: String, required: true },
+		/**
+		 * Hides the label visually
+		 * @type {boolean}
+		 */
+		labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
+		/**
+		 * Style of the fieldset label
+		 * @type {'default'|'heading'}
+		 */
+		labelStyle: { type: String, attribute: 'label-style', reflect: true },
+		/**
+		 * Indicates that a value is required for inputs in the fieldset
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true }
+	};
 
-	static get styles() {
-		return [ super.styles, heading4Styles, inputLabelStyles, offscreenStyles,
-			css`
-				:host {
-					display: block;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-				:host([label-style="heading"]:not([label-hidden])) {
-					margin-block-start: 0.3rem;
-				}
-				legend.d2l-heading-4 {
-					margin-block: 0 0.6rem;
-					padding: 0;
-				}
-			`
-		];
-	}
+	static styles = [super.styles, heading4Styles, inputLabelStyles, offscreenStyles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([label-style="heading"]:not([label-hidden])) {
+			margin-block-start: 0.3rem;
+		}
+		legend.d2l-heading-4 {
+			margin-block: 0 0.6rem;
+			padding: 0;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/inputs/input-group.js

@@ -6,18 +6,16 @@ import { css, html, LitElement } from 'lit';
  */
 class InputGroup extends LitElement {
 
-	static get styles() {
-		return css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: 0.9rem;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: flex;
+			flex-direction: column;
+			gap: 0.9rem;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	render() {
 		return html`<slot></slot>`;

package/components/inputs/input-inline-help.js

@@ -14,14 +14,12 @@ export const inlineHelpStyles = [
 
 export const InputInlineHelpMixin = superclass => class extends SkeletonMixin(superclass) {
 
-	static get properties() {
-		return {
-			_hasInlineHelp: { type: Boolean, reflect: true, attribute: '_has-inline-help' }
-		};
-	}
+	static properties = {
+		_hasInlineHelp: { type: Boolean, reflect: true, attribute: '_has-inline-help' }
+	};
 
 	static get styles() {
-		const styles = [ inlineHelpStyles, css`
+		const styles = [inlineHelpStyles, css`
 			:host([_has-inline-help]) .d2l-input-inline-help {
 				display: block;
 			}