@brightspace-ui/core 3.267.1 → 3.267.3

package/components/inputs/input-textarea.js

@@ -22,139 +22,135 @@ import { styleMap } from 'lit/directives/style-map.js';
  */
 class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * ADVANCED: Indicates that the input value is invalid
-			 * @type {string}
-			 */
-			ariaInvalid: { type: String, attribute: 'aria-invalid' },
-			/**
-			 * Additional information communicated in the aria-describedby on the input
-			 * @type {string}
-			 */
-			description: { type: String, reflect: true },
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { 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 (moves it to the input's "aria-label" attribute)
-			 * @type {boolean}
-			 */
-			labelHidden: { type: Boolean, attribute: 'label-hidden' },
-			/**
-			 * Imposes an upper character limit
-			 * @type {number}
-			 */
-			maxlength: { type: Number },
-			/**
-			 * Maximum number of rows before scrolling
-			 * @type {number}
-			 */
-			maxRows: { type: Number, attribute: 'max-rows' },
-			/**
-			 * Imposes a lower character limit
-			 * @type {number}
-			 */
-			minlength: { type: Number },
-			/**
-			 * Hides the border
-			 * @type {boolean}
-			 */
-			noBorder: { type: Boolean, attribute: 'no-border' },
-			/**
-			 * Removes default left/right padding
-			 * @type {boolean}
-			 */
-			noPadding: { type: Boolean, attribute: 'no-padding' },
-			/**
-			 * @ignore
-			 */
-			placeholder: { type: String },
-			/**
-			 * Indicates that a value is required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true },
-			/**
-			 * Minimum number of rows
-			 * @type {number}
-			 */
-			rows: { type: Number },
-			/**
-			 * Value of the input
-			 * @type {string}
-			 */
-			value: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * ADVANCED: Indicates that the input value is invalid
+		 * @type {string}
+		 */
+		ariaInvalid: { type: String, attribute: 'aria-invalid' },
+		/**
+		 * Additional information communicated in the aria-describedby on the input
+		 * @type {string}
+		 */
+		description: { type: String, reflect: true },
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { 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 (moves it to the input's "aria-label" attribute)
+		 * @type {boolean}
+		 */
+		labelHidden: { type: Boolean, attribute: 'label-hidden' },
+		/**
+		 * Imposes an upper character limit
+		 * @type {number}
+		 */
+		maxlength: { type: Number },
+		/**
+		 * Maximum number of rows before scrolling
+		 * @type {number}
+		 */
+		maxRows: { type: Number, attribute: 'max-rows' },
+		/**
+		 * Imposes a lower character limit
+		 * @type {number}
+		 */
+		minlength: { type: Number },
+		/**
+		 * Hides the border
+		 * @type {boolean}
+		 */
+		noBorder: { type: Boolean, attribute: 'no-border' },
+		/**
+		 * Removes default left/right padding
+		 * @type {boolean}
+		 */
+		noPadding: { type: Boolean, attribute: 'no-padding' },
+		/**
+		 * @ignore
+		 */
+		placeholder: { type: String },
+		/**
+		 * Indicates that a value is required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true },
+		/**
+		 * Minimum number of rows
+		 * @type {number}
+		 */
+		rows: { type: Number },
+		/**
+		 * Value of the input
+		 * @type {string}
+		 */
+		value: { type: String }
+	};
 
-	static get styles() {
-		return [ super.styles, inputStyles, inputLabelStyles, offscreenStyles, css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-input-label {
-				display: inline-block;
-				vertical-align: bottom;
-			}
-			:host(:not([skeleton])) .d2l-input-label {
-				margin: 0;
-				padding-block: 0 0.4rem;
-				padding-inline: 0;
-			}
-			:host(:not([skeleton]):not([input-width])) .d2l-input-label {
-				width: 100%;
-			}
-			.d2l-input-textarea-container {
-				height: 100%;
-				max-width: 100%;
-				position: relative;
-			}
-			textarea.d2l-input {
-				height: 100%;
-				left: 0;
-				line-height: 1rem;
-				position: absolute;
-				resize: none;
-				top: 0;
-			}
-			:host([no-border]) textarea.d2l-input {
-				border-color: transparent;
-				box-shadow: none;
-			}
-			/* mirror dimensions must match textarea - match border + padding */
-			.d2l-input-textarea-mirror {
-				line-height: 1rem;
-				overflow: hidden;
-				overflow-wrap: anywhere; /* prevent width from growing */
-				padding-bottom: 0.5rem;
-				padding-top: 0.5rem;
-				visibility: hidden;
-			}
-			:host([no-padding]) .d2l-input {
-				padding-inline: 0;
-			}
-			:host([no-border][no-padding]) textarea.d2l-input:hover,
-			:host([no-border][no-padding]) textarea.d2l-input:focus {
-				border-left-width: 1px;
-				border-right-width: 1px;
-			}
-			.d2l-input-textarea-mirror[aria-invalid="true"] {
-				padding-inline-end: calc(18px + 0.8rem);
-			}
-		`];
-	}
+	static styles = [super.styles, inputStyles, inputLabelStyles, offscreenStyles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-input-label {
+			display: inline-block;
+			vertical-align: bottom;
+		}
+		:host(:not([skeleton])) .d2l-input-label {
+			margin: 0;
+			padding-block: 0 0.4rem;
+			padding-inline: 0;
+		}
+		:host(:not([skeleton]):not([input-width])) .d2l-input-label {
+			width: 100%;
+		}
+		.d2l-input-textarea-container {
+			height: 100%;
+			max-width: 100%;
+			position: relative;
+		}
+		textarea.d2l-input {
+			height: 100%;
+			left: 0;
+			line-height: 1rem;
+			position: absolute;
+			resize: none;
+			top: 0;
+		}
+		:host([no-border]) textarea.d2l-input {
+			border-color: transparent;
+			box-shadow: none;
+		}
+		/* mirror dimensions must match textarea - match border + padding */
+		.d2l-input-textarea-mirror {
+			line-height: 1rem;
+			overflow: hidden;
+			overflow-wrap: anywhere; /* prevent width from growing */
+			padding-bottom: 0.5rem;
+			padding-top: 0.5rem;
+			visibility: hidden;
+		}
+		:host([no-padding]) .d2l-input {
+			padding-inline: 0;
+		}
+		:host([no-border][no-padding]) textarea.d2l-input:hover,
+		:host([no-border][no-padding]) textarea.d2l-input:focus {
+			border-left-width: 1px;
+			border-right-width: 1px;
+		}
+		.d2l-input-textarea-mirror[aria-invalid="true"] {
+			padding-inline-end: calc(18px + 0.8rem);
+		}
+	`];
 
 	constructor() {
 		super();

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

@@ -41,111 +41,107 @@ function getValidISOTimeAtInterval(val, timeInterval) {
 
 class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement)))) {
 
-	static get properties() {
-		return {
-			/**
-			 * ADVANCED: Automatically shifts end time when start time changes to keep same range
-			 * @type {boolean}
-			 */
-			autoShiftTimes: { attribute: 'auto-shift-times', reflect: true, type: Boolean },
-			/**
-			 * Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.
-			 * @type {boolean}
-			 */
-			childLabelsHidden: { attribute: 'child-labels-hidden', reflect: true, type: Boolean },
-			/**
-			 * Disables the inputs
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * ACCESSIBILITY: Label for the end time input. Defaults to localized "End Time".
-			 * @type {string}
-			 * @default "End Time"
-			 */
-			endLabel: { attribute: 'end-label', reflect: true, type: String },
-			/**
-			 * ADVANCED: Indicates if the end dropdown is open
-			 * @type {boolean}
-			 */
-			endOpened: { attribute: 'end-opened', type: Boolean },
-			/**
-			 * Value of the end time input
-			 * @type {string}
-			 */
-			endValue: { attribute: 'end-value', reflect: true, type: String },
-			/**
-			 * Rounds typed input up to nearest valid interval time (specified with "time-interval")
-			 * @type {boolean}
-			 */
-			enforceTimeIntervals: { attribute: 'enforce-time-intervals', reflect: true, type: Boolean },
-			/**
-			 * Validates on inclusive range (i.e., it is valid for start and end times to be equal)
-			 * @type {boolean}
-			 */
-			inclusiveTimeRange: { attribute: 'inclusive-time-range', reflect: true, type: Boolean },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the time inputs
-			 * @type {string}
-			 */
-			label: { type: String, reflect: true },
-			/**
-			 * 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 values are required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true },
-			/**
-			 * ACCESSIBILITY: Label for the start time input. Defaults to localized "Start Time".
-			 * @type {string}
-			 * @default "Start Time"
-			 */
-			startLabel: { attribute: 'start-label', reflect: true, type: String },
-			/**
-			 * ADVANCED: Indicates if the start dropdown is open
-			 * @type {boolean}
-			 */
-			startOpened: { attribute: 'start-opened', type: Boolean },
-			/**
-			 * Value of the start time input
-			 * @type {string}
-			 */
-			startValue: { attribute: 'start-value', reflect: true, type: String },
-			/**
-			 * Number of minutes between times shown in dropdown menu
-			 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
-			 */
-			timeInterval: { attribute: 'time-interval', reflect: true, type: String },
-			/**
-			 * Time zone identifier for the inputs to use.
-			 * @type {string}
-			 */
-			timeZoneId: { type: String },
-			/**
-			 * Hides the time zone inside the selection dropdowns. Should only be used when the input values are not related to any one time zone
-			 * @type {Boolean}
-			 */
-			timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
-		};
-	}
+	static properties = {
+		/**
+		 * ADVANCED: Automatically shifts end time when start time changes to keep same range
+		 * @type {boolean}
+		 */
+		autoShiftTimes: { attribute: 'auto-shift-times', reflect: true, type: Boolean },
+		/**
+		 * Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.
+		 * @type {boolean}
+		 */
+		childLabelsHidden: { attribute: 'child-labels-hidden', reflect: true, type: Boolean },
+		/**
+		 * Disables the inputs
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * ACCESSIBILITY: Label for the end time input. Defaults to localized "End Time".
+		 * @type {string}
+		 * @default "End Time"
+		 */
+		endLabel: { attribute: 'end-label', reflect: true, type: String },
+		/**
+		 * ADVANCED: Indicates if the end dropdown is open
+		 * @type {boolean}
+		 */
+		endOpened: { attribute: 'end-opened', type: Boolean },
+		/**
+		 * Value of the end time input
+		 * @type {string}
+		 */
+		endValue: { attribute: 'end-value', reflect: true, type: String },
+		/**
+		 * Rounds typed input up to nearest valid interval time (specified with "time-interval")
+		 * @type {boolean}
+		 */
+		enforceTimeIntervals: { attribute: 'enforce-time-intervals', reflect: true, type: Boolean },
+		/**
+		 * Validates on inclusive range (i.e., it is valid for start and end times to be equal)
+		 * @type {boolean}
+		 */
+		inclusiveTimeRange: { attribute: 'inclusive-time-range', reflect: true, type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the time inputs
+		 * @type {string}
+		 */
+		label: { type: String, reflect: true },
+		/**
+		 * 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 values are required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true },
+		/**
+		 * ACCESSIBILITY: Label for the start time input. Defaults to localized "Start Time".
+		 * @type {string}
+		 * @default "Start Time"
+		 */
+		startLabel: { attribute: 'start-label', reflect: true, type: String },
+		/**
+		 * ADVANCED: Indicates if the start dropdown is open
+		 * @type {boolean}
+		 */
+		startOpened: { attribute: 'start-opened', type: Boolean },
+		/**
+		 * Value of the start time input
+		 * @type {string}
+		 */
+		startValue: { attribute: 'start-value', reflect: true, type: String },
+		/**
+		 * Number of minutes between times shown in dropdown menu
+		 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
+		 */
+		timeInterval: { attribute: 'time-interval', reflect: true, type: String },
+		/**
+		 * Time zone identifier for the inputs to use.
+		 * @type {string}
+		 */
+		timeZoneId: { type: String },
+		/**
+		 * Hides the time zone inside the selection dropdowns. Should only be used when the input values are not related to any one time zone
+		 * @type {Boolean}
+		 */
+		timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
+	};
 
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			d2l-input-time {
-				display: block;
-			}
-		`];
-	}
+	static styles = [super.styles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-input-time {
+			display: block;
+		}
+	`];
 
 	constructor() {
 		super();