@brightspace-ui/core 3.267.1 → 3.268.0

package/components/form/form-error-summary.js

@@ -7,53 +7,48 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 class FormErrorSummary extends LocalizeCoreElement(LitElement) {
 
-	static get properties() {
-		return {
-			errors: { type: Object, attribute: false },
-			_expanded: { type: Boolean, attribute: false },
-			_hasTopMargin: { type: Boolean, attribute: '_has-top-margin', reflect: true },
-			_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
-		};
-	}
-
-	static get styles() {
-		return [linkStyles, css`
+	static properties = {
+		errors: { type: Object, attribute: false },
+		_expanded: { type: Boolean, attribute: false },
+		_hasTopMargin: { type: Boolean, attribute: '_has-top-margin', reflect: true },
+		_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
+	};
 
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			:host([_has-top-margin][_has-errors]) {
-				margin-block-start: 1rem;
-			}
+	static styles = [linkStyles, css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([_has-top-margin][_has-errors]) {
+			margin-block-start: 1rem;
+		}
 
-			.d2l-form-error-summary-header {
-				cursor: pointer;
-				display: flex;
-				justify-content: space-between;
-				padding-block: 0.3rem;
-				padding-inline: 1.2rem 0.3rem;
-			}
+		.d2l-form-error-summary-header {
+			cursor: pointer;
+			display: flex;
+			justify-content: space-between;
+			padding-block: 0.3rem;
+			padding-inline: 1.2rem 0.3rem;
+		}
 
-			.d2l-form-error-summary-text {
-				align-items: center;
-				display: flex;
-			}
+		.d2l-form-error-summary-text {
+			align-items: center;
+			display: flex;
+		}
 
-			.d2l-form-error-summary-error-list {
-				margin-block: 0;
-				margin-inline: 1.2rem 0;
-				padding-bottom: 0.6rem;
-				padding-top: 0.3rem;
-			}
+		.d2l-form-error-summary-error-list {
+			margin-block: 0;
+			margin-inline: 1.2rem 0;
+			padding-bottom: 0.6rem;
+			padding-top: 0.3rem;
+		}
 
-			d2l-alert {
-				max-width: none;
-			}
-		`];
-	}
+		d2l-alert {
+			max-width: none;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/form/form.js

@@ -17,43 +17,39 @@ import { localizeFormElement } from './form-element-localize-helper.js';
  */
 class Form extends LocalizeCoreElement(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Indicates that the form should opt-out of nesting.
-			 * This means that it will not be submitted or validated if an ancestor form is submitted or validated.
-			 * However, directly submitting or validating a form with `no-nesting` will still trigger submission and validation for its descendant forms unless they also opt-out using `no-nesting`.
-			 * @type {boolean}
-			 */
-			noNesting: { type: Boolean, attribute: 'no-nesting', reflect: true },
-			/**
-			 * Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.
-			 * @type {boolean}
-			 */
-			trackChanges: { type: Boolean, attribute: 'track-changes', reflect: true },
-			/**
-			 * Id for an alternative error summary element
-			 * @type {string}
-			 */
-			summaryId: { type: String, attribute: 'summary-id' },
-			_errors: { type: Object },
-			_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			:host([_has-errors]) ::slotted(d2l-input-group) {
-				margin-block-start: 1rem;
-			}
-		`;
-	}
+	static properties = {
+		/**
+		 * Indicates that the form should opt-out of nesting.
+		 * This means that it will not be submitted or validated if an ancestor form is submitted or validated.
+		 * However, directly submitting or validating a form with `no-nesting` will still trigger submission and validation for its descendant forms unless they also opt-out using `no-nesting`.
+		 * @type {boolean}
+		 */
+		noNesting: { type: Boolean, attribute: 'no-nesting', reflect: true },
+		/**
+		 * Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.
+		 * @type {boolean}
+		 */
+		trackChanges: { type: Boolean, attribute: 'track-changes', reflect: true },
+		/**
+		 * Id for an alternative error summary element
+		 * @type {string}
+		 */
+		summaryId: { type: String, attribute: 'summary-id' },
+		_errors: { type: Object },
+		_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
+	};
+
+	static styles = css`
+		:host {
+			display: block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		:host([_has-errors]) ::slotted(d2l-input-group) {
+			margin-block-start: 1rem;
+		}
+	`;
 
 	constructor() {
 		super();

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -8,92 +8,88 @@ const escapeKeyCode = 27;
 
 export const HierarchicalViewMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			hierarchicalView: { type: Boolean },
-			/**
-			 * @ignore
-			 */
-			rootView: { type: Boolean, attribute: 'root-view' },
-			/**
-			 * @ignore
-			 */
-			shown: { type: Boolean, reflect: true },
-			_childView: { type: Boolean, reflect: true, attribute: 'child-view' },
-		};
-	}
-
-	static get styles() {
-		return css`
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		hierarchicalView: { type: Boolean },
+		/**
+		 * @ignore
+		 */
+		rootView: { type: Boolean, attribute: 'root-view' },
+		/**
+		 * @ignore
+		 */
+		shown: { type: Boolean, reflect: true },
+		_childView: { type: Boolean, reflect: true, attribute: 'child-view' },
+	};
+
+	static styles = css`
+		:host {
+			--d2l-hierarchical-view-height-transition: height 300ms linear;
+			box-sizing: border-box;
+			display: none;
+			left: 0;
+			overflow: hidden;
+			position: relative;
+			-webkit-transition: var(--d2l-hierarchical-view-height-transition);
+			transition: var(--d2l-hierarchical-view-height-transition);
+			width: 100%;
+		}
+		:host([child-view]) {
+			display: none;
+			left: 100%;
+			position: absolute;
+			top: 0;
+		}
+		:host([shown]) {
+			display: inline-block;
+			vertical-align: top; /* DE37329: required to prevent extra spacing caused by inline-block */
+		}
+		.d2l-hierarchical-view-content {
+			position: relative;
+		}
+		.d2l-hierarchical-view-content.d2l-child-view-show {
+			-webkit-animation: show-child-view-animation forwards 300ms linear;
+			animation: show-child-view-animation 300ms forwards linear;
+		}
+		.d2l-hierarchical-view-content.d2l-child-view-hide {
+			-webkit-animation: hide-child-view-animation forwards 300ms linear;
+			animation: hide-child-view-animation 300ms forwards linear;
+		}
+		@media (prefers-reduced-motion: reduce) {
 			:host {
-				--d2l-hierarchical-view-height-transition: height 300ms linear;
-				box-sizing: border-box;
-				display: none;
-				left: 0;
-				overflow: hidden;
-				position: relative;
-				-webkit-transition: var(--d2l-hierarchical-view-height-transition);
-				transition: var(--d2l-hierarchical-view-height-transition);
-				width: 100%;
-			}
-			:host([child-view]) {
-				display: none;
-				left: 100%;
-				position: absolute;
-				top: 0;
-			}
-			:host([shown]) {
-				display: inline-block;
-				vertical-align: top; /* DE37329: required to prevent extra spacing caused by inline-block */
-			}
-			.d2l-hierarchical-view-content {
-				position: relative;
+				-webkit-transition: none;
+				transition: none;
 			}
 			.d2l-hierarchical-view-content.d2l-child-view-show {
-				-webkit-animation: show-child-view-animation forwards 300ms linear;
-				animation: show-child-view-animation 300ms forwards linear;
+				-webkit-animation: none;
+				animation: none;
+				left: -100%;
 			}
 			.d2l-hierarchical-view-content.d2l-child-view-hide {
-				-webkit-animation: hide-child-view-animation forwards 300ms linear;
-				animation: hide-child-view-animation 300ms forwards linear;
-			}
-			@media (prefers-reduced-motion: reduce) {
-				:host {
-					-webkit-transition: none;
-					transition: none;
-				}
-				.d2l-hierarchical-view-content.d2l-child-view-show {
-					-webkit-animation: none;
-					animation: none;
-					left: -100%;
-				}
-				.d2l-hierarchical-view-content.d2l-child-view-hide {
-					-webkit-animation: none;
-					animation: none;
-					left: 0;
-				}
-			}
-			@keyframes show-child-view-animation {
-				0% { left: 0; }
-				100% { left: -100%; }
-			}
-			@-webkit-keyframes show-child-view-animation {
-				0% { left: 0; }
-				100% { left: -100%; }
-			}
-			@keyframes hide-child-view-animation {
-				0% { left: -100%; }
-				100% { left: 0; }
-			}
-			@-webkit-keyframes hide-child-view-animation {
-				0% { left: -100%; }
-				100% { left: 0; }
+				-webkit-animation: none;
+				animation: none;
+				left: 0;
 			}
-		`;
-	}
+		}
+		@keyframes show-child-view-animation {
+			0% { left: 0; }
+			100% { left: -100%; }
+		}
+		@-webkit-keyframes show-child-view-animation {
+			0% { left: 0; }
+			100% { left: -100%; }
+		}
+		@keyframes hide-child-view-animation {
+			0% { left: -100%; }
+			100% { left: 0; }
+		}
+		@-webkit-keyframes hide-child-view-animation {
+			0% { left: -100%; }
+			100% { left: 0; }
+		}
+	`;
 
 	constructor() {
 		super();

package/components/hierarchical-view/hierarchical-view.js

@@ -10,13 +10,11 @@ import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mi
  */
 class HierarchicalView extends HierarchicalViewMixin(LitElement) {
 
-	static get styles() {
-		return [ super.styles, css`
-			:host {
-				display: inline-block;
-			}
-		`];
-	}
+	static styles = [super.styles, css`
+		:host {
+			display: inline-block;
+		}
+	`];
 
 	render() {
 		return html`

package/components/html-block/html-block.js

@@ -188,8 +188,8 @@ const getRenderers = async() => {
 	if (renderers) return renderers;
 	const rendererLoader = requestInstance(document, 'html-block-renderer-loader');
 	const tempRenderers = rendererLoader ? await rendererLoader.getRenderers() : undefined;
-	const defaultRenderers = [ createMathRenderer(), createCodeRenderer() ];
-	renderers = (tempRenderers ? [ ...defaultRenderers, ...tempRenderers ] : defaultRenderers);
+	const defaultRenderers = [createMathRenderer(), createCodeRenderer()];
+	renderers = (tempRenderers ? [...defaultRenderers, ...tempRenderers] : defaultRenderers);
 	return renderers;
 };
 
@@ -198,53 +198,49 @@ const getRenderers = async() => {
  */
 class HtmlBlock extends LoadingCompleteMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether compact styles should be applied
-			 * @type {Boolean}
-			 */
-			compact: { type: Boolean },
-			/**
-			 * The HTML to be rendered. Ignored if slotted content is provided.
-			 * @type {String}
-			 */
-			html: { type: String },
-			/**
-			 * Whether to display the HTML in inline mode
-			 * @type {Boolean}
-			 */
-			inline: { type: Boolean },
-			/**
-			 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
-			 * unless your HTML relies on script executions that may break upon stamping.
-			 * @type {Boolean}
-			 */
-			noDeferredRendering: { type: Boolean, attribute: 'no-deferred-rendering' },
-			_context: { type: Object, state: true }
-		};
-	}
-
-	static get styles() {
-		return [ htmlBlockContentStyles, css`
-			:host {
-				display: block;
-			}
-			${_generateHtmlBlockRootStyles(':host')}
-			:host([inline]),
-			:host([inline]) .d2l-html-block-rendered {
-				display: inline;
-			}
-			:host([hidden]),
-			:host([no-deferred-rendering]) .d2l-html-block-rendered,
-			slot {
-				display: none;
-			}
-			:host([no-deferred-rendering]) slot {
-				display: contents;
-			}
-		`];
-	}
+	static properties = {
+		/**
+		 * Whether compact styles should be applied
+		 * @type {Boolean}
+		 */
+		compact: { type: Boolean },
+		/**
+		 * The HTML to be rendered. Ignored if slotted content is provided.
+		 * @type {String}
+		 */
+		html: { type: String },
+		/**
+		 * Whether to display the HTML in inline mode
+		 * @type {Boolean}
+		 */
+		inline: { type: Boolean },
+		/**
+		 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
+		 * unless your HTML relies on script executions that may break upon stamping.
+		 * @type {Boolean}
+		 */
+		noDeferredRendering: { type: Boolean, attribute: 'no-deferred-rendering' },
+		_context: { type: Object, state: true }
+	};
+
+	static styles = [htmlBlockContentStyles, css`
+		:host {
+			display: block;
+		}
+		${_generateHtmlBlockRootStyles(':host')}
+		:host([inline]),
+		:host([inline]) .d2l-html-block-rendered {
+			display: inline;
+		}
+		:host([hidden]),
+		:host([no-deferred-rendering]) .d2l-html-block-rendered,
+		slot {
+			display: none;
+		}
+		:host([no-deferred-rendering]) slot {
+			display: contents;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/icons/icon-custom.js

@@ -4,31 +4,27 @@ import { iconStyles } from './icon-styles.js';
 
 class IconCustom extends LitElement {
 
-	static get properties() {
-		return {
-			size: {
-				type: String,
-				reflect: true
-			}
-		};
-	}
+	static properties = {
+		size: {
+			type: String,
+			reflect: true
+		}
+	};
 
-	static get styles() {
-		return [ iconStyles, css`
-			:host([size="tier1"]) {
-				height: var(--d2l-icon-height, 18px);
-				width: var(--d2l-icon-width, 18px);
-			}
-			:host([size="tier2"]) {
-				height: var(--d2l-icon-height, 24px);
-				width: var(--d2l-icon-width, 24px);
-			}
-			:host([size="tier3"]) {
-				height: var(--d2l-icon-height, 30px);
-				width: var(--d2l-icon-width, 30px);
-			}
-		`];
-	}
+	static styles = [iconStyles, css`
+		:host([size="tier1"]) {
+			height: var(--d2l-icon-height, 18px);
+			width: var(--d2l-icon-width, 18px);
+		}
+		:host([size="tier2"]) {
+			height: var(--d2l-icon-height, 24px);
+			width: var(--d2l-icon-width, 24px);
+		}
+		:host([size="tier3"]) {
+			height: var(--d2l-icon-height, 30px);
+			width: var(--d2l-icon-width, 30px);
+		}
+	`];
 
 	render() {
 		return html`<slot @slotchange="${this._handleSlotChange}"></slot>`;

package/components/icons/icon.js

@@ -9,31 +9,27 @@ import { until } from 'lit/directives/until.js';
 
 class Icon extends LitElement {
 
-	static get properties() {
-		return {
-			icon: {
-				type: String,
-				reflect: true
-			}
-		};
-	}
+	static properties = {
+		icon: {
+			type: String,
+			reflect: true
+		}
+	};
 
-	static get styles() {
-		return [ iconStyles, css`
-			:host([icon*="tier1:"]) {
-				height: var(--d2l-icon-height, 18px);
-				width: var(--d2l-icon-width, 18px);
-			}
-			:host([icon*="tier2:"]) {
-				height: var(--d2l-icon-height, 24px);
-				width: var(--d2l-icon-width, 24px);
-			}
-			:host([icon*="tier3:"]) {
-				height: var(--d2l-icon-height, 30px);
-				width: var(--d2l-icon-width, 30px);
-			}
-		`];
-	}
+	static styles = [iconStyles, css`
+		:host([icon*="tier1:"]) {
+			height: var(--d2l-icon-height, 18px);
+			width: var(--d2l-icon-width, 18px);
+		}
+		:host([icon*="tier2:"]) {
+			height: var(--d2l-icon-height, 24px);
+			width: var(--d2l-icon-width, 24px);
+		}
+		:host([icon*="tier3:"]) {
+			height: var(--d2l-icon-height, 30px);
+			width: var(--d2l-icon-width, 30px);
+		}
+	`];
 
 	render() {
 		return guard([this.icon], () => until(this._getIcon(), noChange));

package/components/icons/slotted-icon-mixin.js

@@ -3,26 +3,24 @@ import { css, html, nothing } from 'lit';
 
 export const SlottedIconMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-
-			/**
-			 * Preset icon key (e.g. "tier1:gear")
-			 * @type {string}
-			 */
-			icon: {
-				type: String,
-				reflect: true,
-				required: {
-					validator: (_value, elem, hasValue) => hasValue || elem._hasCustomIcon || !elem._iconRequired
-				}
-			},
-			_hasCustomIcon: { state: true }
-		};
-	}
+	static properties = {
+
+		/**
+		 * Preset icon key (e.g. "tier1:gear")
+		 * @type {string}
+		 */
+		icon: {
+			type: String,
+			reflect: true,
+			required: {
+				validator: (_value, elem, hasValue) => hasValue || elem._hasCustomIcon || !elem._iconRequired
+			}
+		},
+		_hasCustomIcon: { state: true }
+	};
 
 	static get styles() {
-		const styles = [ css`
+		const styles = [css`
 			slot[name="icon"]::slotted(*) {
 				display: none;
 			}