@brightspace-ui/core 3.267.1 → 3.268.0

package/components/empty-state/empty-state-action-button.js

@@ -12,29 +12,25 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  */
 class EmptyStateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: The action text to be used in the button
-			 * @type {string}
-			 */
-			text: { type: String, required: true },
-			/**
-			 * This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components
-			 * @type {boolean}
-			 */
-			primary: { type: Boolean },
-			_illustrated: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: The action text to be used in the button
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components
+		 * @type {boolean}
+		 */
+		primary: { type: Boolean },
+		_illustrated: { state: true }
+	};
 
-	static get styles() {
-		return css`
-					.d2l-empty-state-action {
-						vertical-align: top;
-					}
-				`;
-	}
+	static styles = css`
+		.d2l-empty-state-action {
+			vertical-align: top;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/empty-state/empty-state-action-link.js

@@ -9,24 +9,20 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  */
 class EmptyStateActionLink extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: The action text to be used in the subtle button
-			 * @type {string}
-			 */
-			text: { type: String, required: true },
-			/**
-			 * REQUIRED: The action URL or URL fragment of the link
-			 * @type {string}
-			 */
-			href: { type: String, required: true },
-		};
-	}
-
-	static get styles() {
-		return [bodyCompactStyles, linkStyles];
-	}
+	static properties = {
+		/**
+		 * REQUIRED: The action text to be used in the subtle button
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * REQUIRED: The action URL or URL fragment of the link
+		 * @type {string}
+		 */
+		href: { type: String, required: true },
+	};
+
+	static styles = [bodyCompactStyles, linkStyles];
 
 	static get focusElementSelector() {
 		return '.d2l-link';

package/components/empty-state/empty-state-illustrated.js

@@ -18,31 +18,27 @@ const illustrationAspectRatio = 500 / 330;
  */
 class EmptyStateIllustrated extends LoadingCompleteMixin(EmptyStateMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: A description giving details about the empty state
-			 * @type {string}
-			 */
-			description: { type: String, required: true },
-			/**
-			 * The name of the preset image you would like to display in the component
-			 * @type {string}
-			 */
-			illustrationName: { type: String, attribute: 'illustration-name' },
-			/**
-			 * REQUIRED: A title for the empty state
-			 * @type {string}
-			 */
-			titleText: { type: String, attribute: 'title-text', required: true },
-			_contentHeight: { state: true },
-			_titleSmall: { state: true }
-		};
-	}
-
-	static get styles() {
-		return [bodyCompactStyles, emptyStateStyles, emptyStateIllustratedStyles];
-	}
+	static properties = {
+		/**
+		 * REQUIRED: A description giving details about the empty state
+		 * @type {string}
+		 */
+		description: { type: String, required: true },
+		/**
+		 * The name of the preset image you would like to display in the component
+		 * @type {string}
+		 */
+		illustrationName: { type: String, attribute: 'illustration-name' },
+		/**
+		 * REQUIRED: A title for the empty state
+		 * @type {string}
+		 */
+		titleText: { type: String, attribute: 'title-text', required: true },
+		_contentHeight: { state: true },
+		_titleSmall: { state: true }
+	};
+
+	static styles = [bodyCompactStyles, emptyStateStyles, emptyStateIllustratedStyles];
 
 	constructor() {
 		super();

package/components/empty-state/empty-state-simple.js

@@ -10,19 +10,15 @@ import { EmptyStateMixin } from './empty-state-mixin.js';
  */
 class EmptyStateSimple extends EmptyStateMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: A description giving details about the empty state
-			 * @type {string}
-			 */
-			description: { type: String, required: true },
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: A description giving details about the empty state
+		 * @type {string}
+		 */
+		description: { type: String, required: true },
+	};
 
-	static get styles() {
-		return [bodyCompactStyles, emptyStateStyles, emptyStateSimpleStyles];
-	}
+	static styles = [bodyCompactStyles, emptyStateStyles, emptyStateSimpleStyles];
 
 	render() {
 		return html`

package/components/expand-collapse/expand-collapse-content.js

@@ -20,67 +20,63 @@ export const states = {
  */
 class ExpandCollapseContent extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * Specifies the expanded/collapsed state of the content
-			 * @type {boolean}
-			 */
-			expanded: { type: Boolean, reflect: true },
-			_height: { type: String },
-			_state: { type: String }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				--d2l-expand-collapse-content-transition-duration: 0.2s;
-				--d2l-expand-collapse-content-transition-function: cubic-bezier(0.4, 0.4, 0.25, 1);
-				display: block;
-			}
+	static properties = {
+		/**
+		 * Specifies the expanded/collapsed state of the content
+		 * @type {boolean}
+		 */
+		expanded: { type: Boolean, reflect: true },
+		_height: { type: String },
+		_state: { type: String }
+	};
+
+	static styles = css`
+		:host {
+			--d2l-expand-collapse-content-transition-duration: 0.2s;
+			--d2l-expand-collapse-content-transition-function: cubic-bezier(0.4, 0.4, 0.25, 1);
+			display: block;
+		}
 
-			:host([hidden]) {
-				display: none;
-			}
+		:host([hidden]) {
+			display: none;
+		}
 
-			.d2l-expand-collapse-content-container {
-				display: block;
-				opacity: 0;
-				overflow: hidden;
-				transition:
-					height var(--d2l-expand-collapse-content-transition-duration) var(--d2l-expand-collapse-content-transition-function),
-					opacity var(--d2l-expand-collapse-content-transition-duration) var(--d2l-expand-collapse-content-transition-function);
-			}
+		.d2l-expand-collapse-content-container {
+			display: block;
+			opacity: 0;
+			overflow: hidden;
+			transition:
+				height var(--d2l-expand-collapse-content-transition-duration) var(--d2l-expand-collapse-content-transition-function),
+				opacity var(--d2l-expand-collapse-content-transition-duration) var(--d2l-expand-collapse-content-transition-function);
+		}
 
-			.d2l-expand-collapse-content-container[data-state="collapsed"] {
-				display: none;
-			}
+		.d2l-expand-collapse-content-container[data-state="collapsed"] {
+			display: none;
+		}
 
-			.d2l-expand-collapse-content-container[data-state="expanded"] {
-				overflow: visible;
-			}
+		.d2l-expand-collapse-content-container[data-state="expanded"] {
+			overflow: visible;
+		}
 
 
-			.d2l-expand-collapse-content-container[data-state="expanded"],
-			.d2l-expand-collapse-content-container[data-state="expanding"] {
-				opacity: 1;
-			}
+		.d2l-expand-collapse-content-container[data-state="expanded"],
+		.d2l-expand-collapse-content-container[data-state="expanding"] {
+			opacity: 1;
+		}
 
-			/* prevent margin colapse on slotted children */
-			.d2l-expand-collapse-content-inner::before,
-			.d2l-expand-collapse-content-inner::after {
-				content: " ";
-				display: table;
-			}
+		/* prevent margin colapse on slotted children */
+		.d2l-expand-collapse-content-inner::before,
+		.d2l-expand-collapse-content-inner::after {
+			content: " ";
+			display: table;
+		}
 
-			@media (prefers-reduced-motion: reduce) {
-				.d2l-expand-collapse-content-container {
-					transition: none;
-				}
+		@media (prefers-reduced-motion: reduce) {
+			.d2l-expand-collapse-content-container {
+				transition: none;
 			}
-		`;
-	}
+		}
+	`;
 
 	constructor() {
 		super();

package/components/filter/filter-dimension-set-date-text-value.js

@@ -9,42 +9,40 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  */
 class FilterDimensionSetDateTextValue extends LocalizeCoreElement(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether this value in the filter is disabled or not
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * @ignore
-			 */
-			endValue: { type: String },
-			/**
-			 * REQUIRED: Unique key to represent this value in the dimension
-			 * @type {string}
-			 */
-			key: { type: String },
-			/**
-			 * REQUIRED: The preset date/time range that the list item represents
-			 * @type {'today'|'lastHour'|'24hours'|'48hours'|'7days'|'14days'|'30days'|'6months'}
-			 */
-			range: { type: String },
-			/**
-			 * Whether this value in the filter is selected or not
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-			/**
-			 * @ignore
-			 */
-			startValue: { type: String },
-			/**
-			 * @ignore
-			 */
-			text: { type: String, reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Whether this value in the filter is disabled or not
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * @ignore
+		 */
+		endValue: { type: String },
+		/**
+		 * REQUIRED: Unique key to represent this value in the dimension
+		 * @type {string}
+		 */
+		key: { type: String },
+		/**
+		 * REQUIRED: The preset date/time range that the list item represents
+		 * @type {'today'|'lastHour'|'24hours'|'48hours'|'7days'|'14days'|'30days'|'6months'}
+		 */
+		range: { type: String },
+		/**
+		 * Whether this value in the filter is selected or not
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+		/**
+		 * @ignore
+		 */
+		startValue: { type: String },
+		/**
+		 * @ignore
+		 */
+		text: { type: String, reflect: true }
+	};
 
 	constructor() {
 		super();

package/components/filter/filter-dimension-set-date-time-range-value.js

@@ -13,53 +13,51 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  */
 class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether this value in the filter is disabled or not
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Value of the end date or date-time input. Expected to be in UTC.
-			 * @type {string}
-			 */
-			endValue: { type: String, attribute: 'end-value' },
-			/**
-			 * @ignore
-			 */
-			inactive: { type: Boolean },
-			/**
-			 * REQUIRED: Unique key to represent this value in the dimension
-			 * @type {string}
-			 */
-			key: { type: String },
-			/**
-			 * Whether this value in the filter is selected or not
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-			/**
-			 * Value of the start date or date-time input. Expected to be in UTC.
-			 * @type {string}
-			 */
-			startValue: { type: String, attribute: 'start-value' },
-			/**
-			 * Defaults to "Custom Date Range" (localized). Can be overridden if desired.
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true },
-			/**
-			 * Date/time range input type
-			 * @type {'date'|'date-time'}
-			 */
-			type: { type: String },
-			/**
-			 * @ignore
-			 */
-			valueText: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * Whether this value in the filter is disabled or not
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Value of the end date or date-time input. Expected to be in UTC.
+		 * @type {string}
+		 */
+		endValue: { type: String, attribute: 'end-value' },
+		/**
+		 * @ignore
+		 */
+		inactive: { type: Boolean },
+		/**
+		 * REQUIRED: Unique key to represent this value in the dimension
+		 * @type {string}
+		 */
+		key: { type: String },
+		/**
+		 * Whether this value in the filter is selected or not
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+		/**
+		 * Value of the start date or date-time input. Expected to be in UTC.
+		 * @type {string}
+		 */
+		startValue: { type: String, attribute: 'start-value' },
+		/**
+		 * Defaults to "Custom Date Range" (localized). Can be overridden if desired.
+		 * @type {string}
+		 */
+		text: { type: String, reflect: true },
+		/**
+		 * Date/time range input type
+		 * @type {'date'|'date-time'}
+		 */
+		type: { type: String },
+		/**
+		 * @ignore
+		 */
+		valueText: { type: String }
+	};
 
 	constructor() {
 		super();

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

@@ -6,25 +6,23 @@ import { LitElement } from 'lit';
  */
 class FilterDimensionSetEmptyState extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * The href that will be used for the empty state action. When set with action-text, d2l-filter will render a link action.
-			 * @type {string}
-			 */
-			actionHref: { type: String, attribute: 'action-href' },
-			/**
-			 * The text that will be displayed in the empty state action. When set, d2l-filter renders a button action, or a link if action-href is also defined.
-			 * @type {string}
-			 */
-			actionText: { type: String, attribute: 'action-text' },
-			/**
-			 * REQUIRED: The text that is displayed in the empty state description
-			 * @type {string}
-			 */
-			description: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * The href that will be used for the empty state action. When set with action-text, d2l-filter will render a link action.
+		 * @type {string}
+		 */
+		actionHref: { type: String, attribute: 'action-href' },
+		/**
+		 * The text that will be displayed in the empty state action. When set, d2l-filter renders a button action, or a link if action-href is also defined.
+		 * @type {string}
+		 */
+		actionText: { type: String, attribute: 'action-text' },
+		/**
+		 * REQUIRED: The text that is displayed in the empty state description
+		 * @type {string}
+		 */
+		description: { type: String }
+	};
 
 	constructor() {
 		super();

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

@@ -6,35 +6,33 @@ import { LitElement } from 'lit';
  */
 class FilterDimensionSetValue extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * Count for the value in the list. If no count is provided, no count will be displayed
-			 * @type {number}
-			 */
-			count: { type: Number },
-			/**
-			 * Whether this value in the filter is disabled or not
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * REQUIRED: Unique key to represent this value in the dimension
-			 * @type {string}
-			 */
-			key: { type: String },
-			/**
-			 * Whether this value in the filter is selected or not
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-			/**
-			 * REQUIRED: The text that is displayed for the value
-			 * @type {string}
-			 */
-			text: { type: String }
-		};
-	}
+	static properties = {
+		/**
+		 * Count for the value in the list. If no count is provided, no count will be displayed
+		 * @type {number}
+		 */
+		count: { type: Number },
+		/**
+		 * Whether this value in the filter is disabled or not
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * REQUIRED: Unique key to represent this value in the dimension
+		 * @type {string}
+		 */
+		key: { type: String },
+		/**
+		 * Whether this value in the filter is selected or not
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+		/**
+		 * REQUIRED: The text that is displayed for the value
+		 * @type {string}
+		 */
+		text: { type: String }
+	};
 
 	constructor() {
 		super();