@brightspace-ui/core 3.267.1 → 3.267.3

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

@@ -34,101 +34,97 @@ export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusiv
  */
 class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * ADVANCED: Automatically shifts end date when start date changes to keep same range
-			 * @type {boolean}
-			 */
-			autoShiftDates: { attribute: 'auto-shift-dates', 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 date input. Defaults to localized "End Date".
-			 * @type {string}
-			 * @default "End Date"
-			 */
-			endLabel: { attribute: 'end-label', reflect: true, type: String },
-			/**
-			 * ADVANCED: Indicates if the end calendar dropdown is open
-			 * @type {boolean}
-			 */
-			endOpened: { attribute: 'end-opened', type: Boolean },
-			/**
-			 * Value of the end date input
-			 * @type {string}
-			 */
-			endValue: { attribute: 'end-value', reflect: true, type: String },
-			/**
-			 * Validates on inclusive range (i.e., it is valid for start and end dates to be equal)
-			 * @type {boolean}
-			 */
-			inclusiveDateRange: { attribute: 'inclusive-date-range', reflect: true, type: Boolean },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date 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: { type: Boolean, attribute: 'label-hidden', reflect: true },
-			/**
-			 * 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 },
-			/**
-			 * Indicates that values are required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true },
-			/**
-			 * ACCESSIBILITY: Label for the start date input. Defaults to localized "Start Date".
-			 * @type {string}
-			 * @default "Start Date"
-			 */
-			startLabel: { attribute: 'start-label', reflect: true, type: String },
-			/**
-			 * ADVANCED: Indicates if the start calendar dropdown is open
-			 * @type {boolean}
-			 */
-			startOpened: { attribute: 'start-opened', type: Boolean },
-			/**
-			 * Value of the start date input
-			 * @type {string}
-			 */
-			startValue: { attribute: 'start-value', reflect: true, type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * ADVANCED: Automatically shifts end date when start date changes to keep same range
+		 * @type {boolean}
+		 */
+		autoShiftDates: { attribute: 'auto-shift-dates', 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 date input. Defaults to localized "End Date".
+		 * @type {string}
+		 * @default "End Date"
+		 */
+		endLabel: { attribute: 'end-label', reflect: true, type: String },
+		/**
+		 * ADVANCED: Indicates if the end calendar dropdown is open
+		 * @type {boolean}
+		 */
+		endOpened: { attribute: 'end-opened', type: Boolean },
+		/**
+		 * Value of the end date input
+		 * @type {string}
+		 */
+		endValue: { attribute: 'end-value', reflect: true, type: String },
+		/**
+		 * Validates on inclusive range (i.e., it is valid for start and end dates to be equal)
+		 * @type {boolean}
+		 */
+		inclusiveDateRange: { attribute: 'inclusive-date-range', reflect: true, type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date 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: { type: Boolean, attribute: 'label-hidden', reflect: true },
+		/**
+		 * 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 },
+		/**
+		 * Indicates that values are required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true },
+		/**
+		 * ACCESSIBILITY: Label for the start date input. Defaults to localized "Start Date".
+		 * @type {string}
+		 * @default "Start Date"
+		 */
+		startLabel: { attribute: 'start-label', reflect: true, type: String },
+		/**
+		 * ADVANCED: Indicates if the start calendar dropdown is open
+		 * @type {boolean}
+		 */
+		startOpened: { attribute: 'start-opened', type: Boolean },
+		/**
+		 * Value of the start date input
+		 * @type {string}
+		 */
+		startValue: { attribute: 'start-value', reflect: true, type: String }
+	};
 
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			d2l-input-date {
-				display: block;
-			}
-		`];
-	}
+	static styles = [super.styles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-input-date {
+			display: block;
+		}
+	`];
 
 	constructor() {
 		super();

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

@@ -16,83 +16,79 @@ function debounce(func, delay) {
 
 class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Force block (stacked) range display if true
-			 * @type {boolean}
-			 */
-			blockDisplay: { attribute: 'block-display', type: Boolean },
-			/**
-			 * Display localized "to" between the left and right slot contents
-			 * @type {boolean}
-			 */
-			displayTo: { attribute: 'display-to', type: Boolean },
-			/**
-			 * Add margin-top for case where there would be a label above the range
-			 * @type {boolean}
-			 */
-			topMargin: { attribute: 'top-margin', type: Boolean },
-			_blockDisplay: { attribute: false, type: Boolean }
-		};
-	}
+	static properties = {
+		/**
+		 * Force block (stacked) range display if true
+		 * @type {boolean}
+		 */
+		blockDisplay: { attribute: 'block-display', type: Boolean },
+		/**
+		 * Display localized "to" between the left and right slot contents
+		 * @type {boolean}
+		 */
+		displayTo: { attribute: 'display-to', type: Boolean },
+		/**
+		 * Add margin-top for case where there would be a label above the range
+		 * @type {boolean}
+		 */
+		topMargin: { attribute: 'top-margin', type: Boolean },
+		_blockDisplay: { attribute: false, type: Boolean }
+	};
 
-	static get styles() {
-		return [ super.styles, bodySmallStyles, css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			:host([top-margin]) {
-				margin-top: calc(0.9rem - 7px);
-			}
-			:host(:not([display-to])) .d2l-input-date-time-range-to-to {
-				display: none;
-			}
+	static styles = [super.styles, bodySmallStyles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([top-margin]) {
+			margin-top: calc(0.9rem - 7px);
+		}
+		:host(:not([display-to])) .d2l-input-date-time-range-to-to {
+			display: none;
+		}
 
-			/* flex case (not wrapped) */
-			.d2l-input-date-time-range-to-container {
-				column-gap: 1.5rem;
-				display: flex;
-				flex-wrap: wrap;
-			}
-			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container,
-			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container .d2l-input-date-time-range-end-container {
-				column-gap: 0.9rem;
-			}
-			.d2l-input-date-time-range-end-container {
-				display: flex;
-			}
-			.d2l-input-date-time-range-end-container ::slotted(*) {
-				align-self: flex-end;
-			}
+		/* flex case (not wrapped) */
+		.d2l-input-date-time-range-to-container {
+			column-gap: 1.5rem;
+			display: flex;
+			flex-wrap: wrap;
+		}
+		:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container,
+		:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container .d2l-input-date-time-range-end-container {
+			column-gap: 0.9rem;
+		}
+		.d2l-input-date-time-range-end-container {
+			display: flex;
+		}
+		.d2l-input-date-time-range-end-container ::slotted(*) {
+			align-self: flex-end;
+		}
 
-			/* block case (wrapped) */
-			.d2l-input-date-time-range-to-container-block.d2l-input-date-time-range-to-container {
-				display: block;
-				margin-bottom: -1.2rem;
-			}
-			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
-				margin-inline: 0;
-				margin-bottom: 1.2rem;
-			}
-			:host([display-to]) .d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
-				margin-bottom: 0.6rem;
-			}
-			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-end-container {
-				display: block;
-				margin-bottom: 1.2rem;
-			}
-			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-to-to {
-				display: inline-block;
-				margin-bottom: 0.6rem;
-				margin-top: auto;
-				vertical-align: top;
-			}
-		`];
-	}
+		/* block case (wrapped) */
+		.d2l-input-date-time-range-to-container-block.d2l-input-date-time-range-to-container {
+			display: block;
+			margin-bottom: -1.2rem;
+		}
+		.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
+			margin-inline: 0;
+			margin-bottom: 1.2rem;
+		}
+		:host([display-to]) .d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
+			margin-bottom: 0.6rem;
+		}
+		.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-end-container {
+			display: block;
+			margin-bottom: 1.2rem;
+		}
+		.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-to-to {
+			display: inline-block;
+			margin-bottom: 0.6rem;
+			margin-top: auto;
+			vertical-align: top;
+		}
+	`];
 
 	constructor() {
 		super();

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

@@ -67,121 +67,116 @@ export function getShiftedEndDateTime(startValue, endValue, prevStartValue, incl
  */
 class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * ADVANCED: Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.
-			 * @type {boolean}
-			 */
-			autoShiftDates: { attribute: 'auto-shift-dates', 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 date-time input. Defaults to localized "End Date".
-			 * @type {string}
-			 * @default "End Date"
-			 */
-			endLabel: { attribute: 'end-label', reflect: true, type: String },
-			/**
-			 * ADVANCED: Indicates if the end date or time dropdown is open
-			 * @type {boolean}
-			 */
-			endOpened: { attribute: 'end-opened', type: Boolean },
-			/**
-			 * Value of the end date-time input
-			 * @type {string}
-			 */
-			endValue: { attribute: 'end-value', reflect: true, type: String },
-			/**
-			 * Validates on inclusive range (i.e., it is valid for start and end date-times to be equal)
-			 * @type {boolean}
-			 */
-			inclusiveDateRange: { attribute: 'inclusive-date-range', reflect: true, type: Boolean },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date-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: { type: Boolean, attribute: 'label-hidden', reflect: true },
-			/**
-			 * 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 that values are required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true },
-			/**
-			 * ACCESSIBILITY: Label for the start date-time input. Defaults to localized "Start Date".
-			 * @type {string}
-			 * @default "Start Date"
-			 */
-			startLabel: { attribute: 'start-label', reflect: true, type: String },
-			/**
-			 * ADVANCED: Indicates if the start date or time dropdown is open
-			 * @type {boolean}
-			 */
-			startOpened: { attribute: 'start-opened', type: Boolean },
-			/**
-			 * Value of the start date-time input
-			 * @type {string}
-			 */
-			startValue: { attribute: 'start-value', reflect: true, type: String },
-			/**
-			 * Time zone identifier for the time inputs to use.
-			 * @type {string}
-			 */
-			timeZoneId: { attribute: 'time-zone-id', type: String },
-			/**
-			 * Hides the time zone inside the time selection dropdowns. Should only be used when the time input values are not related to any one time zone
-			 * @type {Boolean}
-			 */
-			timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
-			_slotOccupied: { type: Boolean }
-		};
-	}
-
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			d2l-input-date-time {
-				display: block;
-			}
-			::slotted(*) {
-				margin-top: 0.6rem;
-			}
-
-		`];
-	}
+	static properties = {
+		/**
+		 * ADVANCED: Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.
+		 * @type {boolean}
+		 */
+		autoShiftDates: { attribute: 'auto-shift-dates', 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 date-time input. Defaults to localized "End Date".
+		 * @type {string}
+		 * @default "End Date"
+		 */
+		endLabel: { attribute: 'end-label', reflect: true, type: String },
+		/**
+		 * ADVANCED: Indicates if the end date or time dropdown is open
+		 * @type {boolean}
+		 */
+		endOpened: { attribute: 'end-opened', type: Boolean },
+		/**
+		 * Value of the end date-time input
+		 * @type {string}
+		 */
+		endValue: { attribute: 'end-value', reflect: true, type: String },
+		/**
+		 * Validates on inclusive range (i.e., it is valid for start and end date-times to be equal)
+		 * @type {boolean}
+		 */
+		inclusiveDateRange: { attribute: 'inclusive-date-range', reflect: true, type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date-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: { type: Boolean, attribute: 'label-hidden', reflect: true },
+		/**
+		 * 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 that values are required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true },
+		/**
+		 * ACCESSIBILITY: Label for the start date-time input. Defaults to localized "Start Date".
+		 * @type {string}
+		 * @default "Start Date"
+		 */
+		startLabel: { attribute: 'start-label', reflect: true, type: String },
+		/**
+		 * ADVANCED: Indicates if the start date or time dropdown is open
+		 * @type {boolean}
+		 */
+		startOpened: { attribute: 'start-opened', type: Boolean },
+		/**
+		 * Value of the start date-time input
+		 * @type {string}
+		 */
+		startValue: { attribute: 'start-value', reflect: true, type: String },
+		/**
+		 * Time zone identifier for the time inputs to use.
+		 * @type {string}
+		 */
+		timeZoneId: { attribute: 'time-zone-id', type: String },
+		/**
+		 * Hides the time zone inside the time selection dropdowns. Should only be used when the time input values are not related to any one time zone
+		 * @type {Boolean}
+		 */
+		timeZoneHidden: { type: Boolean, attribute: 'time-zone-hidden' },
+		_slotOccupied: { type: Boolean }
+	};
+
+	static styles = [super.styles, css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-input-date-time {
+			display: block;
+		}
+		::slotted(*) {
+			margin-top: 0.6rem;
+		}
+	`];
 
 	constructor() {
 		super();