@brightspace-ui/core 3.267.1 → 3.268.0

package/components/dialog/dialog-fullscreen.js

@@ -22,172 +22,168 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
  */
 class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement)))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin
-			 * @type {boolean}
-			 */
-			async: { type: Boolean },
-			/**
-			 * Render with no content padding
-			 * @type {boolean}
-			 */
-			noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
-			/**
-			 * REQUIRED: the title for the dialog
-			 */
-			titleText: { type: String, attribute: 'title-text', required: true },
-			/**
-			 * The preferred width (unit-less) for the dialog. Minimum 1170 (anything smaller will have no effect).
-			 */
-			width: { type: Number },
-			_autoSize: { state: true }, /* DE52039 This is only redefined here to suppress a lit-analyzer linting issue */
-			_hasFooterContent: { state: true },
-			_icon: { state: true },
-			_headerStyle: { state: true },
-		};
-	}
+	static properties = {
+		/**
+		 * Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin
+		 * @type {boolean}
+		 */
+		async: { type: Boolean },
+		/**
+		 * Render with no content padding
+		 * @type {boolean}
+		 */
+		noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
+		/**
+		 * REQUIRED: the title for the dialog
+		 */
+		titleText: { type: String, attribute: 'title-text', required: true },
+		/**
+		 * The preferred width (unit-less) for the dialog. Minimum 1170 (anything smaller will have no effect).
+		 */
+		width: { type: Number },
+		_autoSize: { state: true }, /* DE52039 This is only redefined here to suppress a lit-analyzer linting issue */
+		_hasFooterContent: { state: true },
+		_icon: { state: true },
+		_headerStyle: { state: true },
+	};
+
+	static styles = [_generateResetStyles(':host'), dialogStyles, heading2Styles, heading3Styles, css`
+
+		.d2l-dialog-footer.d2l-footer-no-content {
+			display: none;
+		}
 
-	static get styles() {
-		return [ _generateResetStyles(':host'), dialogStyles, heading2Styles, heading3Styles, css`
+		.d2l-dialog-content-loading {
+			text-align: center;
+		}
 
-			.d2l-dialog-footer.d2l-footer-no-content {
-				display: none;
+		.d2l-dialog-outer {
+			max-width: calc(100% - 3rem);
+		}
+
+		:host([no-padding]) .d2l-dialog-content {
+			--d2l-list-controls-padding: 0px; /* stylelint-disable-line length-zero-no-unit */
+			padding: 0;
+		}
+
+		@media (min-width: 616px) {
+
+			.d2l-dialog-header {
+				border-bottom: 1px solid var(--d2l-theme-border-color-subtle);
+				padding-bottom: 0.9rem;
+				padding-top: 1rem;
 			}
 
-			.d2l-dialog-content-loading {
-				text-align: center;
+			.d2l-dialog-content > div {
+				/* required to properly calculate preferred height when there are bottom
+				margins at the end of the slotted content */
+				border-bottom: 1px solid transparent;
+				box-sizing: border-box;
+				height: calc(100% - 1rem);
+				padding-top: 1rem;
 			}
 
-			.d2l-dialog-outer {
-				max-width: calc(100% - 3rem);
+			:host([no-padding]) .d2l-dialog-content > div {
+				height: 100%;
+				padding-top: 0;
 			}
 
-			:host([no-padding]) .d2l-dialog-content {
-				--d2l-list-controls-padding: 0px; /* stylelint-disable-line length-zero-no-unit */
-				padding: 0;
+			.d2l-dialog-header > div > d2l-button-icon {
+				flex: none;
+				margin-block: -2px 0;
+				margin-inline: 0 -12px;
 			}
 
-			@media (min-width: 616px) {
+			dialog.d2l-dialog-outer,
+			div.d2l-dialog-outer {
+				animation: d2l-dialog-fullscreen-close 200ms ease-in;
+				border-radius: 8px;
+				margin: 1.5rem;
+				top: 0;
+				width: auto;
+			}
 
-				.d2l-dialog-header {
-					border-bottom: 1px solid var(--d2l-theme-border-color-subtle);
-					padding-bottom: 0.9rem;
-					padding-top: 1rem;
-				}
+			@keyframes d2l-dialog-fullscreen-close {
+				0% { opacity: 1; transform: translateY(0); }
+				100% { opacity: 0; transform: translateY(-50px) scale(0.97); }
+			}
 
-				.d2l-dialog-content > div {
-					/* required to properly calculate preferred height when there are bottom
-					margins at the end of the slotted content */
-					border-bottom: 1px solid transparent;
-					box-sizing: border-box;
-					height: calc(100% - 1rem);
-					padding-top: 1rem;
-				}
+			@keyframes d2l-dialog-fullscreen-open {
+				0% { opacity: 0; transform: translateY(-50px) scale(0.97); }
+				100% { opacity: 1; transform: translateY(0); }
+			}
 
-				:host([no-padding]) .d2l-dialog-content > div {
-					height: 100%;
-					padding-top: 0;
-				}
+			dialog.d2l-dialog-outer.d2l-dialog-fullscreen-within,
+			div.d2l-dialog-outer.d2l-dialog-fullscreen-within {
+				/* no margins when there is a fullscreen element within */
+				margin: 0;
+			}
 
-				.d2l-dialog-header > div > d2l-button-icon {
-					flex: none;
-					margin-block: -2px 0;
-					margin-inline: 0 -12px;
-				}
+			:host(:not([in-iframe])) dialog.d2l-dialog-outer,
+			:host(:not([in-iframe])) div.d2l-dialog-outer {
+				height: calc(100% - 3rem);
+			}
 
+			/* for screens wider than 1170px + 60px margins */
+			@media (min-width: 1230px) {
 				dialog.d2l-dialog-outer,
 				div.d2l-dialog-outer {
-					animation: d2l-dialog-fullscreen-close 200ms ease-in;
-					border-radius: 8px;
-					margin: 1.5rem;
-					top: 0;
-					width: auto;
-				}
-
-				@keyframes d2l-dialog-fullscreen-close {
-					0% { opacity: 1; transform: translateY(0); }
-					100% { opacity: 0; transform: translateY(-50px) scale(0.97); }
+					/* center the dialog */
+					margin-left: auto;
+					margin-right: auto;
 				}
+			}
 
-				@keyframes d2l-dialog-fullscreen-open {
-					0% { opacity: 0; transform: translateY(-50px) scale(0.97); }
-					100% { opacity: 1; transform: translateY(0); }
-				}
+			:host([_state="showing"]) dialog.d2l-dialog-outer,
+			:host([_state="showing"]) div.d2l-dialog-outer {
+				animation: d2l-dialog-fullscreen-open 400ms ease-out;
+			}
 
-				dialog.d2l-dialog-outer.d2l-dialog-fullscreen-within,
-				div.d2l-dialog-outer.d2l-dialog-fullscreen-within {
-					/* no margins when there is a fullscreen element within */
-					margin: 0;
-				}
+			:host([_state="showing"]) dialog::backdrop {
+				transition-duration: 400ms;
+			}
 
-				:host(:not([in-iframe])) dialog.d2l-dialog-outer,
-				:host(:not([in-iframe])) div.d2l-dialog-outer {
-					height: calc(100% - 3rem);
-				}
+			.d2l-dialog-footer {
+				border-top: 1px solid var(--d2l-theme-border-color-subtle);
+				padding-bottom: 0; /* 0.9rem padding included on button */
+				padding-top: 0.9rem;
+			}
 
-				/* for screens wider than 1170px + 60px margins */
-				@media (min-width: 1230px) {
-					dialog.d2l-dialog-outer,
-					div.d2l-dialog-outer {
-						/* center the dialog */
-						margin-left: auto;
-						margin-right: auto;
-					}
-				}
+			@media (prefers-reduced-motion: reduce) {
 
+				dialog.d2l-dialog-outer,
+				div.d2l-dialog-outer,
 				:host([_state="showing"]) dialog.d2l-dialog-outer,
 				:host([_state="showing"]) div.d2l-dialog-outer {
-					animation: d2l-dialog-fullscreen-open 400ms ease-out;
+					animation: none;
 				}
 
-				:host([_state="showing"]) dialog::backdrop {
-					transition-duration: 400ms;
-				}
-
-				.d2l-dialog-footer {
-					border-top: 1px solid var(--d2l-theme-border-color-subtle);
-					padding-bottom: 0; /* 0.9rem padding included on button */
-					padding-top: 0.9rem;
-				}
-
-				@media (prefers-reduced-motion: reduce) {
-
-					dialog.d2l-dialog-outer,
-					div.d2l-dialog-outer,
-					:host([_state="showing"]) dialog.d2l-dialog-outer,
-					:host([_state="showing"]) div.d2l-dialog-outer {
-						animation: none;
-					}
-
-					dialog::backdrop {
-						transition: none;
-					}
+				dialog::backdrop {
+					transition: none;
 				}
 			}
+		}
 
-			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
-
-				.d2l-dialog-header {
-					padding-bottom: 15px;
-				}
+		@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
 
-				.d2l-dialog-footer.d2l-footer-no-content {
-					padding: 0 0 5px 0;
-				}
+			.d2l-dialog-header {
+				padding-bottom: 15px;
+			}
 
-				.d2l-dialog-content > div {
-					/* required to properly calculate preferred height when there are bottom
-					margins at the end of the slotted content */
-					border-bottom: 1px solid transparent;
-					/* required to render full height in an i-Frame */
-					height: calc(100% - 1px);
-				}
+			.d2l-dialog-footer.d2l-footer-no-content {
+				padding: 0 0 5px 0;
+			}
 
+			.d2l-dialog-content > div {
+				/* required to properly calculate preferred height when there are bottom
+				margins at the end of the slotted content */
+				border-bottom: 1px solid transparent;
+				/* required to render full height in an i-Frame */
+				height: calc(100% - 1px);
 			}
-		`];
-	}
+
+		}
+	`];
 
 	constructor() {
 		super();

package/components/dialog/dialog-mixin.js

@@ -30,47 +30,45 @@ const closeDialogWhenDisconnectedFlag = getFlag('GAUD-10113-close-dialog-when-di
 
 export const DialogMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			focusableContentElemPresent: { state: true },
-			/**
-			 * Whether or not the dialog is open
-			 */
-			opened: { type: Boolean, reflect: true },
-			/**
-			 * ADVANCED: Opt out of dialog content scrolling
-			 */
-			noContentScroll: { type: Boolean, attribute: 'no-content-scroll', reflect: true },
-			/**
-			 * @ignore
-			 * Do NOT use this
-			 */
-			preferNative: { type: Boolean, attribute: 'prefer-native' },
-			/**
-			 * The optional title for the dialog
-			 */
-			titleText: { type: String, attribute: 'title-text' },
-			_autoSize: { state: true },
-			_fullscreenWithin: { state: true },
-			_height: { state: true },
-			_inIframe: { type: Boolean, attribute: 'in-iframe', reflect: true },
-			_isFullHeight: { state: true },
-			_left: { state: true },
-			_margin: { state: true },
-			_nestedShowing: { state: true },
-			_overflowBottom: { state: true },
-			_overflowTop: { state: true },
-			_parentDialog: { state: true },
-			_scroll: { state: true },
-			_state: { type: String, reflect: true },
-			_top: { state: true },
-			_width: { state: true },
-			_useNative: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		focusableContentElemPresent: { state: true },
+		/**
+		 * Whether or not the dialog is open
+		 */
+		opened: { type: Boolean, reflect: true },
+		/**
+		 * ADVANCED: Opt out of dialog content scrolling
+		 */
+		noContentScroll: { type: Boolean, attribute: 'no-content-scroll', reflect: true },
+		/**
+		 * @ignore
+		 * Do NOT use this
+		 */
+		preferNative: { type: Boolean, attribute: 'prefer-native' },
+		/**
+		 * The optional title for the dialog
+		 */
+		titleText: { type: String, attribute: 'title-text' },
+		_autoSize: { state: true },
+		_fullscreenWithin: { state: true },
+		_height: { state: true },
+		_inIframe: { type: Boolean, attribute: 'in-iframe', reflect: true },
+		_isFullHeight: { state: true },
+		_left: { state: true },
+		_margin: { state: true },
+		_nestedShowing: { state: true },
+		_overflowBottom: { state: true },
+		_overflowTop: { state: true },
+		_parentDialog: { state: true },
+		_scroll: { state: true },
+		_state: { type: String, reflect: true },
+		_top: { state: true },
+		_width: { state: true },
+		_useNative: { state: true }
+	};
 
 	constructor() {
 		super();

package/components/dialog/dialog.js

@@ -22,80 +22,76 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
  */
 class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement)))) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin
-			 */
-			async: { type: Boolean },
-
-			/**
-			 * Whether the dialog should indicate that its message is important to the user
-			 */
-			critical: { type: Boolean },
-
-			/**
-			 * Causes screen readers to announce the content of the dialog on open. Only use if the content is concise and contains only text since screen readers ignore HTML semantics and some have a ~250 character limit.
-			 */
-			describeContent: { type: Boolean, attribute: 'describe-content' },
-
-			/**
-			 * Whether to render the dialog at the maximum height
-			 */
-			fullHeight: { type: Boolean, attribute: 'full-height' },
-
-			/**
-			 * REQUIRED: the title for the dialog
-			 */
-			titleText: { type: String, attribute: 'title-text', required: true },
-
-			/**
-			 * The preferred width (unit-less) for the dialog
-			 */
-			width: { type: Number },
-			_hasFooterContent: { type: Boolean, attribute: false }
-		};
-	}
+	static properties = {
+		/**
+		 * Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin
+		 */
+		async: { type: Boolean },
+
+		/**
+		 * Whether the dialog should indicate that its message is important to the user
+		 */
+		critical: { type: Boolean },
+
+		/**
+		 * Causes screen readers to announce the content of the dialog on open. Only use if the content is concise and contains only text since screen readers ignore HTML semantics and some have a ~250 character limit.
+		 */
+		describeContent: { type: Boolean, attribute: 'describe-content' },
+
+		/**
+		 * Whether to render the dialog at the maximum height
+		 */
+		fullHeight: { type: Boolean, attribute: 'full-height' },
+
+		/**
+		 * REQUIRED: the title for the dialog
+		 */
+		titleText: { type: String, attribute: 'title-text', required: true },
+
+		/**
+		 * The preferred width (unit-less) for the dialog
+		 */
+		width: { type: Number },
+		_hasFooterContent: { type: Boolean, attribute: false }
+	};
+
+	static styles = [_generateResetStyles(':host'), dialogStyles, heading3Styles, css`
+
+		.d2l-dialog-header,
+		:host([critical]) .d2l-dialog-header {
+			padding-bottom: 15px;
+		}
 
-	static get styles() {
-		return [ _generateResetStyles(':host'), dialogStyles, heading3Styles, css`
+		.d2l-dialog-header > div > d2l-button-icon {
+			flex: none;
+			margin-block: -4px 0;
+			margin-inline: 15px -15px;
+		}
 
-			.d2l-dialog-header,
-			:host([critical]) .d2l-dialog-header {
-				padding-bottom: 15px;
-			}
+		.d2l-dialog-content > div {
+			/* required to properly calculate preferred height when there are bottom
+			margins at the end of the slotted content */
+			border-bottom: 1px solid transparent;
+		}
 
-			.d2l-dialog-header > div > d2l-button-icon {
-				flex: none;
-				margin-block: -4px 0;
-				margin-inline: 15px -15px;
-			}
+		.d2l-dialog-content-loading {
+			text-align: center;
+		}
 
-			.d2l-dialog-content > div {
-				/* required to properly calculate preferred height when there are bottom
-				margins at the end of the slotted content */
-				border-bottom: 1px solid transparent;
-			}
+		.d2l-dialog-footer.d2l-footer-no-content {
+			padding: 0 0 5px 0;
+		}
 
-			.d2l-dialog-content-loading {
-				text-align: center;
-			}
+		@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
 
-			.d2l-dialog-footer.d2l-footer-no-content {
-				padding: 0 0 5px 0;
+			.d2l-dialog-header,
+			:host([critical]) .d2l-dialog-header {
+				padding-bottom: 9px;
 			}
 
-			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
-
-				.d2l-dialog-header,
-				:host([critical]) .d2l-dialog-header {
-					padding-bottom: 9px;
-				}
-
-			}
+		}
 
-		`];
-	}
+	`];
 
 	constructor() {
 		super();

package/components/dropdown/dropdown-button-subtle.js

@@ -10,31 +10,27 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  */
 class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * A description to be added to the opener button for accessibility when text on button does not provide enough context
-			 * @type {string}
-			 */
-			description: { type: String },
-
-			/**
-			* Aligns the leading edge of text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
-			* @type {'text'|'text-end'|''}
-			*/
-			hAlign: { type: String, reflect: true, attribute: 'h-align' },
-
-			/**
-			 * REQUIRED: Text for the button
-			 * @type {string}
-			 */
-			text: { type: String }
-		};
-	}
-
-	static get styles() {
-		return dropdownOpenerStyles;
-	}
+	static properties = {
+		/**
+		 * A description to be added to the opener button for accessibility when text on button does not provide enough context
+		 * @type {string}
+		 */
+		description: { type: String },
+
+		/**
+		* Aligns the leading edge of text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
+		* @type {'text'|'text-end'|''}
+		*/
+		hAlign: { type: String, reflect: true, attribute: 'h-align' },
+
+		/**
+		 * REQUIRED: Text for the button
+		 * @type {string}
+		 */
+		text: { type: String }
+	};
+
+	static styles = dropdownOpenerStyles;
 
 	render() {
 		return html`

package/components/dropdown/dropdown-button.js

@@ -10,43 +10,39 @@ import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
  */
 class DropdownButton extends DropdownOpenerMixin(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Optionally render button as primary button
-			 * @type {boolean}
-			 */
-			primary: {
-				type: Boolean,
-				reflect: true
-			},
+	static properties = {
+		/**
+		 * Optionally render button as primary button
+		 * @type {boolean}
+		 */
+		primary: {
+			type: Boolean,
+			reflect: true
+		},
 
-			/**
-			 * REQUIRED: Text for the button
-			 * @type {string}
-			 */
-			text: {
-				type: String
-			}
-		};
-	}
+		/**
+		 * REQUIRED: Text for the button
+		 * @type {string}
+		 */
+		text: {
+			type: String
+		}
+	};
 
-	static get styles() {
-		return [dropdownOpenerStyles, css`
-			d2l-icon {
-				height: 0.8rem;
-				margin-inline-start: 0.6rem;
-				pointer-events: none;
-				width: 0.8rem;
-			}
-			:host([primary]) d2l-icon {
-				color: var(--d2l-theme-text-color-static-inverted);
-			}
-			d2l-button {
-				width: 100%;
-			}
-		`];
-	}
+	static styles = [dropdownOpenerStyles, css`
+		d2l-icon {
+			height: 0.8rem;
+			margin-inline-start: 0.6rem;
+			pointer-events: none;
+			width: 0.8rem;
+		}
+		:host([primary]) d2l-icon {
+			color: var(--d2l-theme-text-color-static-inverted);
+		}
+		d2l-button {
+			width: 100%;
+		}
+	`];
 
 	constructor() {
 		super();