@brightspace-ui/core 1.222.1 → 1.224.0

package/components/list/demo/list-drag-and-drop.js

@@ -90,7 +90,7 @@ class ListDemoDragAndDrop extends LitElement {
 	render() {
 		const renderList = (items, nested) => {
 			return html`
-				<d2l-list grid slot="${ifDefined(nested ? 'nested' : undefined)}">
+				<d2l-list grid drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
 					${repeat(items, item => item.key, item => html`
 						<d2l-list-item
 							action-href="http://www.d2l.com"

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

@@ -1,3 +1,4 @@
+import './list-item-drag-image.js';
 import { css, html } from 'lit-element/lit-element.js';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
@@ -332,7 +333,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 					opacity: 1;
 				}
 			}
-		` ];
+		`];
 
 		super.styles && styles.unshift(super.styles);
 		return styles;
@@ -550,15 +551,26 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			e.dataTransfer.setData('text/plain', `${this.dropText}`);
 		}
 
-		if (this.shadowRoot) {
-			const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
-			e.dataTransfer.setDragImage(nodeImage, 50, 50);
-		}
-
 		const rootList = this._getRootList(this);
+		const selectionInfo = rootList.getSelectionInfo(rootList.dragMultiple);
+
+		if (rootList.dragMultiple && selectionInfo.keys.length > 1) {
+			let dragImage = this.shadowRoot.querySelector('d2l-list-item-drag-image');
+			if (!dragImage) {
+				dragImage = document.createElement('d2l-list-item-drag-image');
+				this.shadowRoot.appendChild(dragImage);
+			}
+			dragImage.count = selectionInfo.keys.length;
+			e.dataTransfer.setDragImage(dragImage, 24, 26);
+		} else {
+			if (this.shadowRoot) {
+				const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
+				e.dataTransfer.setDragImage(nodeImage, 50, 50);
+			}
+		}
 
 		// getSelectionInfo(false) is fast so we can quickly check the state
-		if (!rootList.dragMultiple || rootList.getSelectionInfo(false).state === SelectionInfo.states.none) {
+		if (!rootList.dragMultiple || selectionInfo.state === SelectionInfo.states.none) {
 			createDragState([this]);
 		} else {
 

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

@@ -0,0 +1,123 @@
+import '../colors/colors.js';
+import '../inputs/input-checkbox.js';
+import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { bodySmallStyles } from '../typography/styles.js';
+import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+
+class ListItemDragImage extends SkeletonMixin(RtlMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			count: { type: Number }
+		};
+	}
+
+	static get styles() {
+		return [ super.styles, bodySmallStyles, css`
+			:host {
+				display: block;
+				height: 70px;
+				left: -10000px;
+				position: absolute;
+				width: 340px;
+				z-index: 0;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			:host([dir="rtl"]) {
+				left: 0;
+				right: -10000px;
+			}
+			.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.2rem 0.4rem;
+				position: absolute;
+				text-align: center;
+				top: 30px;
+				z-index: 1000; /* must be higher than the skeleton z-index (999) */
+			}
+			:host([dir="rtl"]) .count {
+				left: 14px;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.count = 0;
+		this.skeleton = true;
+	}
+
+	render() {
+		return html`
+			<div class="first">
+				<div class="count d2l-body-small">${formatNumber(this.count)}</div>
+				<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+					<path fill="#494c4e" d="M8 16v1c0 .5-.4 1-1 1H6c-.6 0-1-.5-1-1v-1c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M13 16v1c0 .5-.4 1-1 1h-1c-.6 0-1-.5-1-1v-1c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M8 11v1c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M13 11v1c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1v-1c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M8 6v1c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M13 6v1c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M8 1v1c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1V1c0-.5.4-1 1-1h1c.6 0 1 .5 1 1M13 1v1c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1V1c0-.5.4-1 1-1h1c.6 0 1 .5 1 1"/>
+				</svg>
+				<d2l-input-checkbox disabled skeleton></d2l-input-checkbox>
+				<div class="text">
+					<div class="line-1 d2l-skeletize"></div>
+					<div class="line-2 d2l-skeletize"></div>
+				</div>
+			</div>
+			<div class="second"></div>
+			<div class="third"></div>
+		`;
+	}
+
+}
+
+customElements.define('d2l-list-item-drag-image', ListItemDragImage);

package/components/list/list.js

@@ -19,9 +19,8 @@ class List extends SelectionMixin(LitElement) {
 	static get properties() {
 		return {
 			/**
-			 * Not publicly available yet. Whether the user can drag multiple items
+			 * Whether the user can drag multiple items
 			 * @type {boolean}
- 			 * @ignore
  			 */
 			dragMultiple: { type: Boolean, reflect: true, attribute: 'drag-multiple' },
 			/**

package/components/meter/README.md

@@ -56,12 +56,11 @@ Linear meters show a horizontal progress bar.
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` Boolean: Shows a percentage instead of `value/max`.
-* `text-inline` Boolean: Keeps the meter to a single line.
-* `text` String: Context information about what the meter is about.
-	* `\{\%\}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
-	* **DEPRECATED** `{x}` in the string will be replaced with `value`
-	* **DEPRECATED** `{y}` in the string will be replaced with `max`
+* `text-inline` Boolean: Keeps the meter to a single line. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
+	* **DEPRECATED** `x` in the string will be replaced with `value`
+	* **DEPRECATED** `y` in the string will be replaced with `max`
 <!-- docs: end hidden content -->
 
 ## Radial meter [d2l-meter-radial]
@@ -89,9 +88,9 @@ Radial meters appear as a half circle. They have more visual weight than a line
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` (Boolean): Shows a percentage instead of `value/max`.
-* `text` (String): Context information about what the meter is about.
-	* `{%}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
+* `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
 <!-- docs: end hidden content -->
 
 
@@ -134,7 +133,7 @@ All `meter` components have a `foreground-light` style that ensures accessibl
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` (Boolean): Shows a percentage instead of `value/max`.
-* `text` (String): Context information about what the meter is about.
-	* `\{\%\}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
+* `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
 <!-- docs: end hidden content -->

package/components/scroll-wrapper/scroll-wrapper.js

@@ -184,7 +184,7 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
 
 	scrollDistance(distance, smooth) {
 		if (!this._container) return;
-		if (this._dir === 'rtl') distance = distance * RTL_MULTIPLIER;
+		if (this.dir === 'rtl') distance = distance * RTL_MULTIPLIER;
 		if (this._container.scrollBy) {
 			this._container.scrollBy({ left: distance, behavior: smooth ? 'smooth' : 'auto' });
 		} else {

package/components/selection/selection-mixin.js

@@ -138,13 +138,13 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 		if (currentIndex === -1) currentIndex = 0;
 		let newIndex;
 
-		if ((this._dir !== 'rtl' && e.keyCode === keyCodes.RIGHT)
-			|| (this._dir === 'rtl' && e.keyCode === keyCodes.LEFT)
+		if ((this.dir !== 'rtl' && e.keyCode === keyCodes.RIGHT)
+			|| (this.dir === 'rtl' && e.keyCode === keyCodes.LEFT)
 			|| e.keyCode === keyCodes.DOWN) {
 			if (currentIndex === selectables.length - 1) newIndex = 0;
 			else newIndex = currentIndex + 1;
-		} else if ((this._dir !== 'rtl' && e.keyCode === keyCodes.LEFT)
-			|| (this._dir === 'rtl' && e.keyCode === keyCodes.RIGHT)
+		} else if ((this.dir !== 'rtl' && e.keyCode === keyCodes.LEFT)
+			|| (this.dir === 'rtl' && e.keyCode === keyCodes.RIGHT)
 			|| e.keyCode === keyCodes.UP) {
 			if (currentIndex === 0) newIndex = selectables.length - 1;
 			else newIndex = currentIndex - 1;