@brightspace-ui/core 3.267.1 → 3.268.0

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

@@ -8,44 +8,42 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * **Selection:** Disables selection
-			 * @type {boolean}
-			 */
-			selectionDisabled: { type: Boolean, attribute: 'selection-disabled', reflect: true },
-			/**
-			 * **Selection:** Tooltip text when selection is disabled
-			 * @type {string}
-			 */
-			selectionDisabledTooltip: { type: String, attribute: 'selection-disabled-tooltip' },
-			/**
-			 * **Selection:** Value to identify item if selectable
-			 * @type {string}
-			 */
-			key: { type: String, reflect: true },
-			/**
-			 * **Selection:** Indicates an input should be rendered for selecting the item
-			 * @type {boolean}
-			 */
-			selectable: { type: Boolean },
-			/**
-			 * **Selection:** Whether the item is selected
-			 * @type {boolean}
-			 */
-			selected: { type: Boolean, reflect: true },
-			/**
-			 * Private. The selection info (set by the selection component).
-			 * @ignore
-			 */
-			selectionInfo: { type: Object, attribute: false },
-			_hoveringSelection: { type: Boolean, attribute: '_hovering-selection', reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * **Selection:** Disables selection
+		 * @type {boolean}
+		 */
+		selectionDisabled: { type: Boolean, attribute: 'selection-disabled', reflect: true },
+		/**
+		 * **Selection:** Tooltip text when selection is disabled
+		 * @type {string}
+		 */
+		selectionDisabledTooltip: { type: String, attribute: 'selection-disabled-tooltip' },
+		/**
+		 * **Selection:** Value to identify item if selectable
+		 * @type {string}
+		 */
+		key: { type: String, reflect: true },
+		/**
+		 * **Selection:** Indicates an input should be rendered for selecting the item
+		 * @type {boolean}
+		 */
+		selectable: { type: Boolean },
+		/**
+		 * **Selection:** Whether the item is selected
+		 * @type {boolean}
+		 */
+		selected: { type: Boolean, reflect: true },
+		/**
+		 * Private. The selection info (set by the selection component).
+		 * @ignore
+		 */
+		selectionInfo: { type: Object, attribute: false },
+		_hoveringSelection: { type: Boolean, attribute: '_hovering-selection', reflect: true }
+	};
 
 	static get styles() {
-		const styles = [ css`
+		const styles = [css`
 			.d2l-checkbox-action {
 				cursor: pointer;
 				display: block;
@@ -61,7 +59,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			:host([layout="tile"]) .bump-inline {
 				margin-inline-start: 2rem !important;
 			}
-		` ];
+		`];
 
 		super.styles && styles.unshift(super.styles);
 		return styles;

package/components/list/list-item-content.js

@@ -10,41 +10,39 @@ import { css, html, LitElement } from 'lit';
  */
 class ListItemContent extends LitElement {
 
-	static get styles() {
-		return [ bodySmallStyles, bodyCompactStyles, css`
-			:host {
-				min-width: 0;
-			}
-
-			.d2l-list-item-content-text {
-				margin: 0;
-			}
-
-			.d2l-list-item-content-text > div {
-				border-radius: var(--d2l-list-item-content-text-border-radius);
-				color: var(--d2l-list-item-content-text-color);
-				display: block; /* multi-line clamping won't work inside of inline-block in Safari - the compromise is the outline is full width */
-				max-width: 100%;
-				outline: var(--d2l-list-item-content-text-outline, none);
-				outline-offset: var(--d2l-list-item-content-text-outline-offset);
-				overflow-wrap: anywhere;
-				text-decoration: var(--d2l-list-item-content-text-decoration, none);
-			}
-
-			.d2l-list-item-content-text-secondary {
-				color: var(--d2l-list-item-content-text-secondary-color, var(--d2l-color-tungsten));
-			}
-
-			.d2l-list-item-content-text-supporting-info {
-				color: var(--d2l-color-ferrite);
-			}
-
-			.d2l-list-item-content-text-secondary ::slotted(*),
-			.d2l-list-item-content-text-supporting-info ::slotted(*) {
-				margin-top: 0.15rem;
-			}
-		`];
-	}
+	static styles = [bodySmallStyles, bodyCompactStyles, css`
+		:host {
+			min-width: 0;
+		}
+
+		.d2l-list-item-content-text {
+			margin: 0;
+		}
+
+		.d2l-list-item-content-text > div {
+			border-radius: var(--d2l-list-item-content-text-border-radius);
+			color: var(--d2l-list-item-content-text-color);
+			display: block; /* multi-line clamping won't work inside of inline-block in Safari - the compromise is the outline is full width */
+			max-width: 100%;
+			outline: var(--d2l-list-item-content-text-outline, none);
+			outline-offset: var(--d2l-list-item-content-text-outline-offset);
+			overflow-wrap: anywhere;
+			text-decoration: var(--d2l-list-item-content-text-decoration, none);
+		}
+
+		.d2l-list-item-content-text-secondary {
+			color: var(--d2l-list-item-content-text-secondary-color, var(--d2l-color-tungsten));
+		}
+
+		.d2l-list-item-content-text-supporting-info {
+			color: var(--d2l-color-ferrite);
+		}
+
+		.d2l-list-item-content-text-secondary ::slotted(*),
+		.d2l-list-item-content-text-supporting-info ::slotted(*) {
+			margin-top: 0.15rem;
+		}
+	`];
 
 	render() {
 		return html`

package/components/list/list-item-drag-drop-mixin.js

@@ -248,55 +248,53 @@ export class NewPositionEventDetails {
 
 export const ListItemDragDropMixin = superclass => class extends superclass {
 
-	static get properties() {
-		return {
-			/**
-			 * **Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.
-			 * @type {boolean}
-			 */
-			keyboardDragDisabled: { type: Boolean, attribute: 'keyboard-drag-disabled' },
-			/**
-			 * **Drag & drop:** Whether the item is draggable
-			 * @type {boolean}
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			draggable: { type: Boolean, reflect: true },
-			/**
-			 * @ignore
-			 */
-			dragging: { type: Boolean, reflect: true },
-			/**
-			 * **Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.
-			 * @type {string}
-			*/
-			dragHandleText: { type: String, attribute: 'drag-handle-text' },
-			/**
-			 * **Drag & drop:** Whether nested items can be dropped on this item
-			 * @type {boolean}
-			*/
-			dropNested: { type: Boolean, attribute: 'drop-nested' },
-			/**
-			 * **Drag & drop:** Text to drag and drop
-			 * @type {string}
-			*/
-			dropText: { type: String, attribute: 'drop-text' },
-			/**
-			 * Value to identify item if selectable
-			 * @type {string}
-			*/
-			key: { type: String, reflect: true },
-			_dragHandleShowAlways: { type: Boolean, attribute: '_drag-handle-show-always', reflect: true },
-			_draggingOver: { type: Boolean },
-			_dropLocation: { type: Number, reflect: true, attribute: '_drop-location' },
-			_focusingDragHandle: { type: Boolean },
-			_hovering: { type: Boolean },
-			_keyboardActive: { type: Boolean },
-			_keyboardTextInfo: { type: Object }
-		};
-	}
+	static properties = {
+		/**
+		 * **Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.
+		 * @type {boolean}
+		 */
+		keyboardDragDisabled: { type: Boolean, attribute: 'keyboard-drag-disabled' },
+		/**
+		 * **Drag & drop:** Whether the item is draggable
+		 * @type {boolean}
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		draggable: { type: Boolean, reflect: true },
+		/**
+		 * @ignore
+		 */
+		dragging: { type: Boolean, reflect: true },
+		/**
+		 * **Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.
+		 * @type {string}
+		*/
+		dragHandleText: { type: String, attribute: 'drag-handle-text' },
+		/**
+		 * **Drag & drop:** Whether nested items can be dropped on this item
+		 * @type {boolean}
+		*/
+		dropNested: { type: Boolean, attribute: 'drop-nested' },
+		/**
+		 * **Drag & drop:** Text to drag and drop
+		 * @type {string}
+		*/
+		dropText: { type: String, attribute: 'drop-text' },
+		/**
+		 * Value to identify item if selectable
+		 * @type {string}
+		*/
+		key: { type: String, reflect: true },
+		_dragHandleShowAlways: { type: Boolean, attribute: '_drag-handle-show-always', reflect: true },
+		_draggingOver: { type: Boolean },
+		_dropLocation: { type: Number, reflect: true, attribute: '_drop-location' },
+		_focusingDragHandle: { type: Boolean },
+		_hovering: { type: Boolean },
+		_keyboardActive: { type: Boolean },
+		_keyboardTextInfo: { type: Object }
+	};
 
 	static get styles() {
-		const styles = [ css`
+		const styles = [css`
 			:host {
 				display: block;
 				position: relative;

package/components/list/list-item-drag-handle.js

@@ -47,91 +47,87 @@ export const resetDisplayedTooltip = () => {
  */
 class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the handle
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Additional context information for accessibility
-			 * @type {object}
-			 */
-			keyboardTextInfo: { type: Object, attribute: 'keyboard-text-info' },
-			/**
-			 * The drag-handle label for assistive technology
-			 * @type {string}
-			 */
-			text: { type: String },
-			/**
-			 * When layout = tile, the drag handle become horizontal
-			 */
-			layout: { type: String },
-			_displayKeyboardTooltip: { type: Boolean },
-			_keyboardActive: { type: Boolean }
-		};
-	}
-
-	static get styles() {
-		return [ buttonStyles, css`
-			:host {
-				display: flex;
-				margin: 0.25rem;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.d2l-list-item-drag-handle-dragger-button {
-				background-color: unset;
-				display: block;
-				margin: 0;
-				min-height: 1.8rem;
-				padding: 0;
-				width: 0.9rem;
-			}
-			/* Firefox includes a hidden border which messes up button dimensions */
-			button::-moz-focus-inner {
-				border: 0;
-			}
-			.d2l-button-dragger-icon {
-				height: 0.9rem;
-				width: 0.9rem;
-			}
-			button,
-			button[disabled]:hover,
-			button[disabled]:focus {
-				background-color: var(--d2l-color-gypsum);
-				color: var(--d2l-color-ferrite);
-			}
-			.d2l-list-item-drag-handle-dragger-button:hover,
-			.d2l-list-item-drag-handle-dragger-button:focus {
-				background-color: var(--d2l-color-mica);
-			}
-			button[disabled] {
-				cursor: default;
-				opacity: 0.5;
-			}
-			d2l-tooltip > div {
-				font-weight: 700;
-			}
-			d2l-tooltip > ul {
-				padding-inline-start: 1rem;
-			}
-			.d2l-list-item-drag-handle-tooltip-key {
-				font-weight: 700;
-			}
-			d2l-button-move {
-				pointer-events: auto; /* required since ancestors may set point-events: none; (see generic layout) */
-			}
+	static properties = {
+		/**
+		 * Disables the handle
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Additional context information for accessibility
+		 * @type {object}
+		 */
+		keyboardTextInfo: { type: Object, attribute: 'keyboard-text-info' },
+		/**
+		 * The drag-handle label for assistive technology
+		 * @type {string}
+		 */
+		text: { type: String },
+		/**
+		 * When layout = tile, the drag handle become horizontal
+		 */
+		layout: { type: String },
+		_displayKeyboardTooltip: { type: Boolean },
+		_keyboardActive: { type: Boolean }
+	};
+
+	static styles = [buttonStyles, css`
+		:host {
+			display: flex;
+			margin: 0.25rem;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.d2l-list-item-drag-handle-dragger-button {
+			background-color: unset;
+			display: block;
+			margin: 0;
+			min-height: 1.8rem;
+			padding: 0;
+			width: 0.9rem;
+		}
+		/* Firefox includes a hidden border which messes up button dimensions */
+		button::-moz-focus-inner {
+			border: 0;
+		}
+		.d2l-button-dragger-icon {
+			height: 0.9rem;
+			width: 0.9rem;
+		}
+		button,
+		button[disabled]:hover,
+		button[disabled]:focus {
+			background-color: var(--d2l-color-gypsum);
+			color: var(--d2l-color-ferrite);
+		}
+		.d2l-list-item-drag-handle-dragger-button:hover,
+		.d2l-list-item-drag-handle-dragger-button:focus {
+			background-color: var(--d2l-color-mica);
+		}
+		button[disabled] {
+			cursor: default;
+			opacity: 0.5;
+		}
+		d2l-tooltip > div {
+			font-weight: 700;
+		}
+		d2l-tooltip > ul {
+			padding-inline-start: 1rem;
+		}
+		.d2l-list-item-drag-handle-tooltip-key {
+			font-weight: 700;
+		}
+		d2l-button-move {
+			pointer-events: auto; /* required since ancestors may set point-events: none; (see generic layout) */
+		}
 
-			:host([layout="tile"]) {
-				align-items: center;
-				display: flex;
-				height: 39px;
-			}
-		`];
-	}
+		:host([layout="tile"]) {
+			align-items: center;
+			display: flex;
+			height: 39px;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/list/list-item-drag-image.js

@@ -8,88 +8,84 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			count: { type: Number },
-			includePlusSign: { type: Boolean, attribute: 'include-plus-sign' }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		count: { type: Number },
+		includePlusSign: { type: Boolean, attribute: 'include-plus-sign' }
+	};
 
-	static get styles() {
-		return [ super.styles, bodySmallStyles, css`
-			:host {
-				display: block;
-				height: 70px;
-				inset-inline-start: -10000px;
-				position: absolute;
-				width: 340px;
-				z-index: 0;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.first, .second, .third {
-				background-color: white;
-				border: 1px solid var(--d2l-color-mica);
-				border-radius: 4px;
-				box-sizing: border-box;
-				height: 100%;
-				position: absolute;
-				width: 100%;
-			}
-			.first {
-				align-items: start;
-				display: flex;
-				padding: 16px 8px;
-			}
-			.second {
-				margin-inline-start: 6px;
-				margin-top: 6px;
-				z-index: -1;
-			}
-			.third {
-				margin-inline-start: 12px;
-				margin-top: 12px;
-				z-index: -2;
-			}
-			.text {
-				width: 100%;
-			}
-			.line-1 {
-				height: 24px;
-				margin-bottom: 4px;
-				width: 100%;
-			}
-			.line-2 {
-				height: 16px;
-				width: 25%;
-			}
-			d2l-input-checkbox {
-				line-height: 0;
-				margin: 0;
-				margin-inline-start: 16px;
-			}
-			.count {
-				background-color: var(--d2l-color-celestine);
-				border-radius: 0.7rem;
-				box-sizing: border-box;
-				color: white;
-				left: 26px;
-				min-width: 1.4rem;
-				padding: 0.25rem 0.4rem;
-				position: absolute;
-				text-align: center;
-				top: 30px;
-				z-index: 998; /* must be higher than the skeleton z-index */
-			}
-			.count:dir(rtl) {
-				left: 14px;
-			}
-		`];
-	}
+	static styles = [super.styles, bodySmallStyles, css`
+		:host {
+			display: block;
+			height: 70px;
+			inset-inline-start: -10000px;
+			position: absolute;
+			width: 340px;
+			z-index: 0;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.first, .second, .third {
+			background-color: white;
+			border: 1px solid var(--d2l-color-mica);
+			border-radius: 4px;
+			box-sizing: border-box;
+			height: 100%;
+			position: absolute;
+			width: 100%;
+		}
+		.first {
+			align-items: start;
+			display: flex;
+			padding: 16px 8px;
+		}
+		.second {
+			margin-inline-start: 6px;
+			margin-top: 6px;
+			z-index: -1;
+		}
+		.third {
+			margin-inline-start: 12px;
+			margin-top: 12px;
+			z-index: -2;
+		}
+		.text {
+			width: 100%;
+		}
+		.line-1 {
+			height: 24px;
+			margin-bottom: 4px;
+			width: 100%;
+		}
+		.line-2 {
+			height: 16px;
+			width: 25%;
+		}
+		d2l-input-checkbox {
+			line-height: 0;
+			margin: 0;
+			margin-inline-start: 16px;
+		}
+		.count {
+			background-color: var(--d2l-color-celestine);
+			border-radius: 0.7rem;
+			box-sizing: border-box;
+			color: white;
+			left: 26px;
+			min-width: 1.4rem;
+			padding: 0.25rem 0.4rem;
+			position: absolute;
+			text-align: center;
+			top: 30px;
+			z-index: 998; /* must be higher than the skeleton z-index */
+		}
+		.count:dir(rtl) {
+			left: 14px;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/list/list-item-expand-collapse-mixin.js

@@ -10,26 +10,24 @@ const dragHoverDropTime = 1000;
 
 export const ListItemExpandCollapseMixin = superclass => class extends SkeletonMixin(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * Whether to show the expand collapse toggle
-			 * @type {boolean}
-			 */
-			expandable: { type: Boolean },
-			/**
-			 * Default state for expand collapse toggle - if not set, collapsed will be the default state
-			 * @type {boolean}
-			 */
-			expanded: { type: Boolean, reflect: true },
-			_siblingHasNestedItems: { state: true },
-			_renderExpandCollapseSlot: { type: Boolean, reflect: true, attribute: '_render-expand-collapse-slot' },
-			_showNestedLoadingSpinner: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Whether to show the expand collapse toggle
+		 * @type {boolean}
+		 */
+		expandable: { type: Boolean },
+		/**
+		 * Default state for expand collapse toggle - if not set, collapsed will be the default state
+		 * @type {boolean}
+		 */
+		expanded: { type: Boolean, reflect: true },
+		_siblingHasNestedItems: { state: true },
+		_renderExpandCollapseSlot: { type: Boolean, reflect: true, attribute: '_render-expand-collapse-slot' },
+		_showNestedLoadingSpinner: { state: true }
+	};
 
 	static get styles() {
-		const styles = [ css`
+		const styles = [css`
 			:host {
 				--d2l-expand-collapse-slot-transition-duration: 0.3s;
 			}
@@ -66,7 +64,7 @@ export const ListItemExpandCollapseMixin = superclass => class extends SkeletonM
 					transition: width var(--d2l-expand-collapse-slot-transition-duration) cubic-bezier(0, 0.7, 0.5, 1);
 				}
 			}
-		` ];
+		`];
 
 		super.styles && styles.unshift(super.styles);
 		return styles;