@brightspace-ui/core 3.267.1 → 3.268.0

package/components/inputs/input-time.js

@@ -126,120 +126,114 @@ function initIntervals(size, enforceTimeIntervals) {
  */
 class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LitElement))))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Default value of input. Accepts times formatted as "hh:mm:ss", and the keywords "startOfDay" and "endOfDay".
-			 * @type {string}
-			 */
-			defaultValue: { type: String, attribute: 'default-value' },
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean },
-			/**
-			 * Rounds typed input up to nearest valid interval time (specified with "time-interval")
-			 * @type {boolean}
-			 */
-			enforceTimeIntervals: { type: Boolean, attribute: 'enforce-time-intervals' },
-			/**
-			 * 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' },
-			/**
-			 * Overrides max-height of the time dropdown menu
-			 * @type {number}
-			 */
-			maxHeight: { type: Number, attribute: 'max-height' },
-			/**
-			 * Indicates if the dropdown is open
-			 * @type {boolean}
-			 */
-			opened: { type: Boolean },
-			/**
-			 * Indicates that a value is required
-			 * @type {boolean}
-			 */
-			required: { type: Boolean, reflect: true },
-			/**
-			 * Number of minutes between times shown in dropdown menu
-			 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
-			 */
-			timeInterval: { type: String, attribute: 'time-interval' },
-			/**
-			 * Time zone identifier for the input to use. e.g. America/Toronto. Defaults to the user's account or device time zone setting.
-			 * @type {string}
-			 */
-			timeZoneId: { type: String, attribute: 'time-zone-id' },
-			/**
-			 * Hides the time zone inside the selection dropdown. Should only be used when the 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 },
-			_dropdownFirstOpened: { type: Boolean },
-			_formattedValue: { type: String },
-			_hiddenContentWidth: { type: String },
-			_timeZone: { state: true },
-		};
-	}
-
-	static get styles() {
-		return [
-			super.styles,
-			bodySmallStyles,
-			inputLabelStyles,
-			inputStyles,
-			offscreenStyles,
-			css`
-				:host {
-					display: inline-block;
-					max-width: 6rem;
-					width: 100%;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-				d2l-dropdown-menu[data-mobile][mobile-tray] .d2l-input-time-menu {
-					text-align: center;
-				}
-				.d2l-input-label {
-					display: inline-block;
-					vertical-align: top;
-				}
-				.d2l-input-time-time-zone {
-					line-height: 1.8rem;
-					text-align: center;
-					vertical-align: middle;
-					width: auto;
-				}
-				.d2l-input-time-time-zone.d2l-input-time-time-zone-custom {
-					align-items: center;
-					column-gap: 0.3rem;
-					display: flex;
-					font-weight: 700;
-					justify-content: center;
-				}
+	static properties = {
+		/**
+		 * Default value of input. Accepts times formatted as "hh:mm:ss", and the keywords "startOfDay" and "endOfDay".
+		 * @type {string}
+		 */
+		defaultValue: { type: String, attribute: 'default-value' },
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * Rounds typed input up to nearest valid interval time (specified with "time-interval")
+		 * @type {boolean}
+		 */
+		enforceTimeIntervals: { type: Boolean, attribute: 'enforce-time-intervals' },
+		/**
+		 * 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' },
+		/**
+		 * Overrides max-height of the time dropdown menu
+		 * @type {number}
+		 */
+		maxHeight: { type: Number, attribute: 'max-height' },
+		/**
+		 * Indicates if the dropdown is open
+		 * @type {boolean}
+		 */
+		opened: { type: Boolean },
+		/**
+		 * Indicates that a value is required
+		 * @type {boolean}
+		 */
+		required: { type: Boolean, reflect: true },
+		/**
+		 * Number of minutes between times shown in dropdown menu
+		 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
+		 */
+		timeInterval: { type: String, attribute: 'time-interval' },
+		/**
+		 * Time zone identifier for the input to use. e.g. America/Toronto. Defaults to the user's account or device time zone setting.
+		 * @type {string}
+		 */
+		timeZoneId: { type: String, attribute: 'time-zone-id' },
+		/**
+		 * Hides the time zone inside the selection dropdown. Should only be used when the 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 },
+		_dropdownFirstOpened: { type: Boolean },
+		_formattedValue: { type: String },
+		_hiddenContentWidth: { type: String },
+		_timeZone: { state: true },
+	};
+
+	static styles = [
+		super.styles,
+		bodySmallStyles,
+		inputLabelStyles,
+		inputStyles,
+		offscreenStyles, css`
+		:host {
+			display: inline-block;
+			max-width: 6rem;
+			width: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-dropdown-menu[data-mobile][mobile-tray] .d2l-input-time-menu {
+			text-align: center;
+		}
+		.d2l-input-label {
+			display: inline-block;
+			vertical-align: top;
+		}
+		.d2l-input-time-time-zone {
+			line-height: 1.8rem;
+			text-align: center;
+			vertical-align: middle;
+			width: auto;
+		}
+		.d2l-input-time-time-zone.d2l-input-time-time-zone-custom {
+			align-items: center;
+			column-gap: 0.3rem;
+			display: flex;
+			font-weight: 700;
+			justify-content: center;
+		}
 
-				.d2l-input-time-hidden-content {
-					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-time-hidden-content {
+			font-family: inherit;
+			font-size: 0.8rem;
+			font-weight: 400;
+			letter-spacing: 0.02rem;
+			line-height: 1.4rem;
+			position: absolute;
+			visibility: hidden;
+			width: auto;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/link/link-mixin.js

@@ -7,50 +7,46 @@ import { offscreenStyles } from '../offscreen/offscreen.js';
 
 export const LinkMixin = superclass => class extends LocalizeCoreElement(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * Prompts the user to save the linked URL instead of navigating to it.
-			 * Must be to a resource on the same origin.
-			 * Can be used with or without a value, when set the value becomes the filename.
-			 * @type {string}
-			 */
-			download: { type: String },
-			/**
-			 * REQUIRED: URL or URL fragment of the link
-			 * @type {string}
-			 */
-			href: { type: String },
-			/**
-			 * Where to display the linked URL
-			 * @type {string}
-			 */
-			target: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * Prompts the user to save the linked URL instead of navigating to it.
+		 * Must be to a resource on the same origin.
+		 * Can be used with or without a value, when set the value becomes the filename.
+		 * @type {string}
+		 */
+		download: { type: String },
+		/**
+		 * REQUIRED: URL or URL fragment of the link
+		 * @type {string}
+		 */
+		href: { type: String },
+		/**
+		 * Where to display the linked URL
+		 * @type {string}
+		 */
+		target: { type: String }
+	};
 
-	static get styles() {
-		return [offscreenStyles, css`
-			#new-window {
-				line-height: 0;
-				white-space: nowrap;
-			}
-			d2l-icon {
-				color: inherit;
-				height: calc(1em - 1px);
-				margin-inline-start: 0.315em;
-				transform: translateY(0.1em);
-				vertical-align: inherit;
-				width: calc(1em - 1px);
-			}
+	static styles = [offscreenStyles, css`
+		#new-window {
+			line-height: 0;
+			white-space: nowrap;
+		}
+		d2l-icon {
+			color: inherit;
+			height: calc(1em - 1px);
+			margin-inline-start: 0.315em;
+			transform: translateY(0.1em);
+			vertical-align: inherit;
+			width: calc(1em - 1px);
+		}
 
-			@media print {
-				d2l-icon {
-					display: none;
-				}
+		@media print {
+			d2l-icon {
+				display: none;
 			}
-		`];
-	}
+		}
+	`];
 
 	getNewWindowDescription(label) {
 		return label && this.target === '_blank' ? this.localize('components.link.open-in-new-window') : undefined;

package/components/link/link.js

@@ -20,129 +20,123 @@ export const linkStyles = _generateLinkStyles('.d2l-link', true);
  */
 class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough
-			 * @type {string}
-			 */
-			ariaLabel: { type: String, attribute: 'aria-label' },
-			/**
-			 * Disables the link
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Tooltip text when disabled
-			 * @type {string}
-			 */
-			disabledTooltip: { type: String, attribute: 'disabled-tooltip', reflect: true },
-			/**
-			 * Download a URL instead of navigating to it
-			 * @type {boolean}
-			 */
-			download: { type: Boolean },
-			/**
-			 * REQUIRED: URL or URL fragment of the link
-			 * @type {string}
-			 */
-			href: { type: String },
-			/**
-			 * Whether to apply the "main" link style
-			 * @type {boolean}
-			 */
-			main: { type: Boolean, reflect: true },
-			/**
-			 * The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.
-			 * @type {number}
-			 */
-			lines: { type: Number },
-			/**
-			 * Whether to apply the "small" link style
-			 * @type {boolean}
-			 */
-			small: { type: Boolean, reflect: true },
-			/**
-			 * Where to display the linked URL
-			 * @type {string}
-			 */
-			target: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough
+		 * @type {string}
+		 */
+		ariaLabel: { type: String, attribute: 'aria-label' },
+		/**
+		 * Disables the link
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Tooltip text when disabled
+		 * @type {string}
+		 */
+		disabledTooltip: { type: String, attribute: 'disabled-tooltip', reflect: true },
+		/**
+		 * Download a URL instead of navigating to it
+		 * @type {boolean}
+		 */
+		download: { type: Boolean },
+		/**
+		 * REQUIRED: URL or URL fragment of the link
+		 * @type {string}
+		 */
+		href: { type: String },
+		/**
+		 * Whether to apply the "main" link style
+		 * @type {boolean}
+		 */
+		main: { type: Boolean, reflect: true },
+		/**
+		 * The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.
+		 * @type {number}
+		 */
+		lines: { type: Number },
+		/**
+		 * Whether to apply the "small" link style
+		 * @type {boolean}
+		 */
+		small: { type: Boolean, reflect: true },
+		/**
+		 * Where to display the linked URL
+		 * @type {string}
+		 */
+		target: { type: String }
+	};
 
-	static get styles() {
-		return [ linkStyles, offscreenStyles,
-			css`
-				:host {
-					display: inline;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-				:host([small]) {
-					/* needed to keep host element same height as link */
-					font-size: 0.7rem;
-					line-height: 1.05rem;
-				}
-				:host([lines]) {
-					min-width: 0;
-				}
-				a {
-					display: inherit;
-				}
-				:host([lines]) a {
-					align-items: baseline;
-					display: flex;
-				}
-				a span.truncate {
-					${getOverflowDeclarations({ lines: 1 })}
-				}
-				a span.truncate-one {
-					${overflowEllipsisDeclarations}
-				}
-				#new-window {
-					line-height: 0;
-					white-space: nowrap;
-				}
-				d2l-icon {
-					color: var(--d2l-theme-text-color-interactive-default);
-					height: calc(1em - 1px);
-					margin-inline-start: 0.315em;
-					transform: translateY(0.1em);
-					vertical-align: inherit;
-					width: calc(1em - 1px);
-				}
+	static styles = [linkStyles, offscreenStyles, css`
+		:host {
+			display: inline;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([small]) {
+			/* needed to keep host element same height as link */
+			font-size: 0.7rem;
+			line-height: 1.05rem;
+		}
+		:host([lines]) {
+			min-width: 0;
+		}
+		a {
+			display: inherit;
+		}
+		:host([lines]) a {
+			align-items: baseline;
+			display: flex;
+		}
+		a span.truncate {
+			${getOverflowDeclarations({ lines: 1 })}
+		}
+		a span.truncate-one {
+			${overflowEllipsisDeclarations}
+		}
+		#new-window {
+			line-height: 0;
+			white-space: nowrap;
+		}
+		d2l-icon {
+			color: var(--d2l-theme-text-color-interactive-default);
+			height: calc(1em - 1px);
+			margin-inline-start: 0.315em;
+			transform: translateY(0.1em);
+			vertical-align: inherit;
+			width: calc(1em - 1px);
+		}
 
-				a:hover d2l-icon {
-					--d2l-icon-fill-color: var(--d2l-theme-text-color-interactive-hover);
-				}
+		a:hover d2l-icon {
+			--d2l-icon-fill-color: var(--d2l-theme-text-color-interactive-hover);
+		}
 
-				:host([disabled]:not([disabled-tooltip])) a:hover {
-					color: var(--d2l-theme-text-color-interactive-default);
-					text-decoration: none;
-				}
-				:host([disabled]:not([disabled-tooltip])) a:hover d2l-icon {
-					--d2l-icon-fill-color: var(--d2l-theme-text-color-interactive-default);
-				}
-				a[aria-disabled="true"],
-				a[aria-disabled="true"]:active {
-					cursor: default;
-				}
-				a[aria-disabled="true"] .d2l-link-content {
-					opacity: var(--d2l-theme-opacity-disabled-link);
-				}
-				a[aria-disabled="true"] d2l-icon {
-					opacity: var(--d2l-theme-opacity-disabled-linkicon);
-				}
+		:host([disabled]:not([disabled-tooltip])) a:hover {
+			color: var(--d2l-theme-text-color-interactive-default);
+			text-decoration: none;
+		}
+		:host([disabled]:not([disabled-tooltip])) a:hover d2l-icon {
+			--d2l-icon-fill-color: var(--d2l-theme-text-color-interactive-default);
+		}
+		a[aria-disabled="true"],
+		a[aria-disabled="true"]:active {
+			cursor: default;
+		}
+		a[aria-disabled="true"] .d2l-link-content {
+			opacity: var(--d2l-theme-opacity-disabled-link);
+		}
+		a[aria-disabled="true"] d2l-icon {
+			opacity: var(--d2l-theme-opacity-disabled-linkicon);
+		}
 
-				@media print {
-					d2l-icon {
-						display: none;
-					}
-				}
-			`
-		];
-	}
+		@media print {
+			d2l-icon {
+				display: none;
+			}
+		}
+	`];
 
 	constructor() {
 		super();

package/components/list/list-controls.js

@@ -7,36 +7,32 @@ import { SelectionControls } from '../selection/selection-controls.js';
  * Controls for list components containing select-all, etc.
  */
 export class ListControls extends SelectionControls {
-	static get properties() {
-		return {
-			_extendSeparator: { state: true },
-			_siblingHasColor: { state: true }
-		};
-	}
+	static properties = {
+		_extendSeparator: { state: true },
+		_siblingHasColor: { state: true }
+	};
 
-	static get styles() {
-		return [super.styles, css`
-			:host {
-				--d2l-selection-controls-background-color: var(--d2l-list-controls-background-color);
-				--d2l-selection-controls-offset: -12px;
-				--d2l-selection-controls-padding: var(--d2l-list-controls-padding, 18px);
-				z-index: 6; /* must be greater than d2l-list-item-active-border */
-			}
-			:host([no-sticky]) {
-				z-index: auto;
-			}
-			.d2l-list-controls-color {
-				padding-inline-start: 1.8rem;
-			}
-			.d2l-list-controls-extend-separator {
-				--d2l-selection-controls-offset: 0;
-				padding: 0 0.9rem;
-			}
-			.d2l-list-controls-color.d2l-list-controls-extend-separator {
-				padding-inline-start: calc(0.6rem + 9px);
-			}
-		`];
-	}
+	static styles = [super.styles, css`
+		:host {
+			--d2l-selection-controls-background-color: var(--d2l-list-controls-background-color);
+			--d2l-selection-controls-offset: -12px;
+			--d2l-selection-controls-padding: var(--d2l-list-controls-padding, 18px);
+			z-index: 6; /* must be greater than d2l-list-item-active-border */
+		}
+		:host([no-sticky]) {
+			z-index: auto;
+		}
+		.d2l-list-controls-color {
+			padding-inline-start: 1.8rem;
+		}
+		.d2l-list-controls-extend-separator {
+			--d2l-selection-controls-offset: 0;
+			padding: 0 0.9rem;
+		}
+		.d2l-list-controls-color.d2l-list-controls-extend-separator {
+			padding-inline-start: calc(0.6rem + 9px);
+		}
+	`];
 
 	constructor() {
 		super();

package/components/list/list-item-button-mixin.js

@@ -5,20 +5,18 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
-	static get properties() {
-		return {
-			/**
-			 * Disables the primary action button
-			 * @type {boolean}
-			 */
-			buttonDisabled : { type: Boolean, attribute: 'button-disabled', reflect: true },
-			_ariaCurrent: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * Disables the primary action button
+		 * @type {boolean}
+		 */
+		buttonDisabled : { type: Boolean, attribute: 'button-disabled', reflect: true },
+		_ariaCurrent: { type: String }
+	};
 
 	static get styles() {
 
-		const styles = [ css`
+		const styles = [css`
 			:host(:not([button-disabled])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
@@ -49,7 +47,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			:host(:not([button-disabled])) [slot="outside-control-action"] {
 				grid-column-end: control-end;
 			}
-		` ];
+		`];
 
 		super.styles && styles.unshift(super.styles);
 		return styles;