@brightspace-ui/core 3.267.0 → 3.267.3

package/components/filter/filter-dimension-set.js

@@ -9,73 +9,71 @@ import { html, LitElement } from 'lit';
  */
 class FilterDimensionSet extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether the dimension has more values to load. Manual search and selected first should be set if has more is being used
-			 * @type {boolean}
-			 */
-			hasMore: { type: Boolean, attribute: 'has-more' },
-			/**
-			 * A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.
-			 * @type {string}
-			 */
-			headerText: { type: String, attribute: 'header-text' },
-			/**
-			 * The introductory text to display at the top of the filter dropdown
-			 * @type {string}
-			 */
-			introductoryText: { type: String, attribute: 'introductory-text' },
-			/**
-			 * REQUIRED: Unique key to represent this dimension in the filter
-			 * @type {string}
-			 */
-			key: { type: String },
-			/**
-			 * Whether the values for this dimension are still loading and a loading spinner should be displayed
-			 * @type {boolean}
-			 */
-			loading: { type: Boolean },
-			/**
-			 * @ignore
-			 */
-			minWidth: { type: Number },
-			/**
-			 * ADVANCED: Whether to ignore the enforce single selection setting for this dimension.
-			 */
-			ignoreEnforceSelectionSingle: { type: Boolean, attribute: 'ignore-enforce-selection-single' },
-			/**
-			 * Whether to hide the search input, perform a simple text search, or fire an event on search
-			 * @type {'none'|'automatic'|'manual'}
-			 */
-			searchType: { type: String, attribute: 'search-type' },
-			/**
-			 * Adds a select all checkbox and summary for this dimension
-			 * @type {boolean}
-			 */
-			selectAll: { type: Boolean, attribute: 'select-all' },
-			/**
-			 * Whether to render the selected items at the top of the filter. Forced on if load more paging is being used
-			 * @type {boolean}
-			 */
-			selectedFirst: { type: Boolean, attribute: 'selected-first' },
-			/**
-			 * Whether only one value can be selected at a time for this dimension
-			 * @type {boolean}
-			 */
-			selectionSingle: { type: Boolean, attribute: 'selection-single' },
-			/**
-			 * REQUIRED: The text that is displayed for the dimension title
-			 * @type {string}
-			 */
-			text: { type: String },
-			/**
-			 * Whether to hide the dimension in the text sent to active filter subscribers
-			 * @type {boolean}
-			 */
-			valueOnlyActiveFilterText: { type: Boolean, attribute: 'value-only-active-filter-text' }
-		};
-	}
+	static properties = {
+		/**
+		 * Whether the dimension has more values to load. Manual search and selected first should be set if has more is being used
+		 * @type {boolean}
+		 */
+		hasMore: { type: Boolean, attribute: 'has-more' },
+		/**
+		 * A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.
+		 * @type {string}
+		 */
+		headerText: { type: String, attribute: 'header-text' },
+		/**
+		 * The introductory text to display at the top of the filter dropdown
+		 * @type {string}
+		 */
+		introductoryText: { type: String, attribute: 'introductory-text' },
+		/**
+		 * REQUIRED: Unique key to represent this dimension in the filter
+		 * @type {string}
+		 */
+		key: { type: String },
+		/**
+		 * Whether the values for this dimension are still loading and a loading spinner should be displayed
+		 * @type {boolean}
+		 */
+		loading: { type: Boolean },
+		/**
+		 * @ignore
+		 */
+		minWidth: { type: Number },
+		/**
+		 * ADVANCED: Whether to ignore the enforce single selection setting for this dimension.
+		 */
+		ignoreEnforceSelectionSingle: { type: Boolean, attribute: 'ignore-enforce-selection-single' },
+		/**
+		 * Whether to hide the search input, perform a simple text search, or fire an event on search
+		 * @type {'none'|'automatic'|'manual'}
+		 */
+		searchType: { type: String, attribute: 'search-type' },
+		/**
+		 * Adds a select all checkbox and summary for this dimension
+		 * @type {boolean}
+		 */
+		selectAll: { type: Boolean, attribute: 'select-all' },
+		/**
+		 * Whether to render the selected items at the top of the filter. Forced on if load more paging is being used
+		 * @type {boolean}
+		 */
+		selectedFirst: { type: Boolean, attribute: 'selected-first' },
+		/**
+		 * Whether only one value can be selected at a time for this dimension
+		 * @type {boolean}
+		 */
+		selectionSingle: { type: Boolean, attribute: 'selection-single' },
+		/**
+		 * REQUIRED: The text that is displayed for the dimension title
+		 * @type {string}
+		 */
+		text: { type: String },
+		/**
+		 * Whether to hide the dimension in the text sent to active filter subscribers
+		 * @type {boolean}
+		 */
+		valueOnlyActiveFilterText: { type: Boolean, attribute: 'value-only-active-filter-text' }
+	};
 
 	constructor() {
 		super();

package/components/filter/filter-overflow-group.js

@@ -12,25 +12,21 @@ const updateEvents = ['d2l-filter-dimension-load-more', 'd2l-filter-dimension-se
 */
 class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.
-			 * @type {boolean}
-			 */
-			tags: { type: Boolean },
-			_openedDimensions: { state: true },
-			_filterIds: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [super.styles, css`
-			::slotted(d2l-filter) {
-				margin-inline-end: 0.3rem;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.
+		 * @type {boolean}
+		 */
+		tags: { type: Boolean },
+		_openedDimensions: { state: true },
+		_filterIds: { state: true }
+	};
+
+	static styles = [super.styles, css`
+		::slotted(d2l-filter) {
+			margin-inline-end: 0.3rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/filter/filter-tags.js

@@ -11,26 +11,23 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 const CLEAR_TIMEOUT = 310; /** Corresponds to timeout in _dispatchChangeEvent in filter + 10 ms */
 
 class FilterTags extends LocalizeCoreElement(LitElement) {
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Id(s) (space-delimited) of the filter component(s) to subscribe to
-			 * @type {string}
-			 */
-			filterIds: { type: String, attribute: 'filter-ids' }
-		};
-	}
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Id(s) (space-delimited) of the filter component(s) to subscribe to
+		 * @type {string}
+		 */
+		filterIds: { type: String, attribute: 'filter-ids' }
+	};
+
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/filter/filter.js

@@ -72,143 +72,139 @@ function addSpaceListener() {
  */
 class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the dropdown opener for the filter
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Indicates if the filter is open
-			 * @type {boolean}
-			 */
-			opened: { type: Boolean, reflect: true },
-			/**
-			 * Optional override for the button text used for a multi-dimensional filter
-			 * @type {string}
-			 */
-			text: { type: String },
-			_activeDimensionKey: { type: String, attribute: false },
-			_dimensions: { type: Array, attribute: false },
-			_displayKeyboardTooltip: { state: true },
-			_ignoreSlotChanges: { type: Boolean },
-			_minWidth: { type: Number, attribute: false },
-			_totalAppliedCount: { type: Number, attribute: false }
-		};
-	}
-
-	static get styles() {
-		return [bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles, offscreenStyles, css`
-			[slot="header"] {
-				padding: 0.9rem 0.3rem;
-			}
+	static properties = {
+		/**
+		 * Disables the dropdown opener for the filter
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Indicates if the filter is open
+		 * @type {boolean}
+		 */
+		opened: { type: Boolean, reflect: true },
+		/**
+		 * Optional override for the button text used for a multi-dimensional filter
+		 * @type {string}
+		 */
+		text: { type: String },
+		_activeDimensionKey: { type: String, attribute: false },
+		_dimensions: { type: Array, attribute: false },
+		_displayKeyboardTooltip: { state: true },
+		_ignoreSlotChanges: { type: Boolean },
+		_minWidth: { type: Number, attribute: false },
+		_totalAppliedCount: { type: Number, attribute: false }
+	};
+
+	static styles = [bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles, offscreenStyles, css`
+		[slot="header"] {
+			padding: 0.9rem 0.3rem;
+		}
 
-			.d2l-filter-dimension-header {
-				padding-bottom: 0.9rem;
-			}
+		.d2l-filter-dimension-header {
+			padding-bottom: 0.9rem;
+		}
 
-			.d2l-filter-dimension-header.with-intro {
-				padding-bottom: 0.6rem;
-			}
+		.d2l-filter-dimension-header.with-intro {
+			padding-bottom: 0.6rem;
+		}
 
-			.d2l-filter-dimension-header,
-			.d2l-filter-dimension-header-actions {
-				align-items: center;
-				display: flex;
-			}
+		.d2l-filter-dimension-header,
+		.d2l-filter-dimension-header-actions {
+			align-items: center;
+			display: flex;
+		}
 
-			.d2l-filter-dimension-header-actions {
-				flex-flow: row wrap;
-			}
+		.d2l-filter-dimension-header-actions {
+			flex-flow: row wrap;
+		}
 
-			d2l-input-search {
-				flex: 1 0;
-				margin-inline: 0.3rem 0.6rem;
-			}
+		d2l-input-search {
+			flex: 1 0;
+			margin-inline: 0.3rem 0.6rem;
+		}
 
-			.d2l-filter-dimension-select-all {
-				flex-basis: 100%;
-				margin-top: 0.9rem;
-			}
+		.d2l-filter-dimension-select-all {
+			flex-basis: 100%;
+			margin-top: 0.9rem;
+		}
 
-			d2l-selection-select-all {
-				padding: 0 0.6rem;
-			}
+		d2l-selection-select-all {
+			padding: 0 0.6rem;
+		}
 
-			.d2l-filter-dimension-header-text {
-				flex-grow: 1;
-				padding-inline-end: calc(2rem + 2px);
-				text-align: center;
-				${overflowEllipsisDeclarations}
-			}
+		.d2l-filter-dimension-header-text {
+			flex-grow: 1;
+			padding-inline-end: calc(2rem + 2px);
+			text-align: center;
+			${overflowEllipsisDeclarations}
+		}
 
-			.d2l-filter-dimension-set-value {
-				align-items: center;
-				color: var(--d2l-color-ferrite);
-				display: flex;
-				gap: 0.45rem;
-				line-height: unset;
-			}
-			.d2l-filter-dimension-set-value d2l-icon {
-				flex-shrink: 0;
-			}
-			d2l-expand-collapse-content[expanded] {
-				margin-inline-start: -2.1rem;
-				padding-block: 0.8rem 0.4rem;
-			}
-			d2l-list-item.expanding-content {
-				overflow-y: hidden;
-			}
+		.d2l-filter-dimension-set-value {
+			align-items: center;
+			color: var(--d2l-color-ferrite);
+			display: flex;
+			gap: 0.45rem;
+			line-height: unset;
+		}
+		.d2l-filter-dimension-set-value d2l-icon {
+			flex-shrink: 0;
+		}
+		d2l-expand-collapse-content[expanded] {
+			margin-inline-start: -2.1rem;
+			padding-block: 0.8rem 0.4rem;
+		}
+		d2l-list-item.expanding-content {
+			overflow-y: hidden;
+		}
 
-			.d2l-filter-dimension-set-value-text {
-				hyphens: auto;
-				${getOverflowDeclarations({ lines: 2 })}
-			}
+		.d2l-filter-dimension-set-value-text {
+			hyphens: auto;
+			${getOverflowDeclarations({ lines: 2 })}
+		}
 
-			d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,
-			d2l-list-item[selection-disabled] .d2l-body-small {
-				color: var(--d2l-color-chromite);
-			}
+		d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,
+		d2l-list-item[selection-disabled] .d2l-body-small {
+			color: var(--d2l-color-chromite);
+		}
 
-			.d2l-filter-dimension-intro-text {
-				margin: 0;
-				padding: 0.6rem 1.5rem 1.5rem;
-				text-align: center;
-			}
+		.d2l-filter-dimension-intro-text {
+			margin: 0;
+			padding: 0.6rem 1.5rem 1.5rem;
+			text-align: center;
+		}
 
-			.d2l-filter-dimension-intro-text.multi-dimension {
-				padding: 0 1.5rem 1.5rem;
-			}
+		.d2l-filter-dimension-intro-text.multi-dimension {
+			padding: 0 1.5rem 1.5rem;
+		}
 
-			.d2l-empty-state-container {
-				padding: 0.9rem 0.9rem calc(0.9rem - 5px);
-			}
+		.d2l-empty-state-container {
+			padding: 0.9rem 0.9rem calc(0.9rem - 5px);
+		}
 
-			.list-header-text {
-				color: var(--d2l-color-ferrite);
-				margin: 0;
-				padding-bottom: 0.05rem;
-				padding-top: 0.65rem;
-			}
+		.list-header-text {
+			color: var(--d2l-color-ferrite);
+			margin: 0;
+			padding-bottom: 0.05rem;
+			padding-top: 0.65rem;
+		}
 
-			.d2l-filter-dimension-info-message {
-				color: var(--d2l-color-ferrite);
-				display: flex;
-				justify-content: center;
-			}
+		.d2l-filter-dimension-info-message {
+			color: var(--d2l-color-ferrite);
+			display: flex;
+			justify-content: center;
+		}
 
-			/* Needed to "undo" the menu-item style for multiple dimensions */
-			d2l-hierarchical-view {
-				cursor: auto;
-			}
+		/* Needed to "undo" the menu-item style for multiple dimensions */
+		d2l-hierarchical-view {
+			cursor: auto;
+		}
 
-			d2l-loading-spinner {
-				padding-top: 0.6rem;
-				width: 100%;
-			}
-		`];
-	}
+		d2l-loading-spinner {
+			padding-top: 0.6rem;
+			width: 100%;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/focus-trap/focus-trap.js

@@ -12,27 +12,23 @@ const traps = [];
  */
 class FocusTrap extends FocusMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether the component should trap user focus.
-			 * @type {boolean}
-			 */
-			trap: { type: Boolean },
-			_legacyPromptIds: { state: true }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static properties = {
+		/**
+		 * Whether the component should trap user focus.
+		 * @type {boolean}
+		 */
+		trap: { type: Boolean },
+		_legacyPromptIds: { state: true }
+	};
+
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/form/form-element-mixin.js

@@ -77,41 +77,39 @@ export class FormElementValidityState {
 
 export const FormElementMixin = superclass => class extends LocalizeCoreElement(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			forceInvalid: { type: Boolean, attribute: false },
-			/**
-			 * @ignore
-			 */
-			invalid: { type: Boolean, reflect: true },
-			/**
-			 * Name of the form control. Submitted with the form as part of a name/value pair.
-			 * @type {string}
-			 */
-			name: { type: String },
-			/**
-			 * @ignore
-			 */
-			noValidate: { type: Boolean, attribute: 'novalidate' },
-			/**
-			 * @ignore
-			 * Perform validation immediately instead of waiting for the user to make changes.
-			 */
-			validateOnInit: { type: Boolean, attribute: 'validate-on-init' },
-			/**
-			 * @ignore
-			 */
-			validationError: { type: String, attribute: false },
-			/**
-			 * @ignore
-			 */
-			childErrors: { type: Object, attribute: false },
-			_errors: { type: Array, attribute: false }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		forceInvalid: { type: Boolean, attribute: false },
+		/**
+		 * @ignore
+		 */
+		invalid: { type: Boolean, reflect: true },
+		/**
+		 * Name of the form control. Submitted with the form as part of a name/value pair.
+		 * @type {string}
+		 */
+		name: { type: String },
+		/**
+		 * @ignore
+		 */
+		noValidate: { type: Boolean, attribute: 'novalidate' },
+		/**
+		 * @ignore
+		 * Perform validation immediately instead of waiting for the user to make changes.
+		 */
+		validateOnInit: { type: Boolean, attribute: 'validate-on-init' },
+		/**
+		 * @ignore
+		 */
+		validationError: { type: String, attribute: false },
+		/**
+		 * @ignore
+		 */
+		childErrors: { type: Object, attribute: false },
+		_errors: { type: Array, attribute: false }
+	};
 
 	constructor() {
 		super();