@brightspace-ui/core 1.222.3 → 1.223.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/custom-elements.json

@@ -6943,6 +6943,32 @@
         }
       ]
     },
+    {
+      "name": "d2l-list-item-drag-image",
+      "path": "./components/list/list-item-drag-image.js",
+      "attributes": [
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "true"
+        }
+      ],
+      "properties": [
+        {
+          "name": "count",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "true"
+        }
+      ]
+    },
     {
       "name": "d2l-list-item-generic-layout",
       "path": "./components/list/list-item-generic-layout.js",
@@ -7242,6 +7268,12 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "drag-multiple",
+          "description": "Whether the user can drag multiple items",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "extend-separators",
           "description": "Whether to extend the separators beyond the content's edge",
@@ -7271,6 +7303,8 @@
         },
         {
           "name": "dragMultiple",
+          "attribute": "drag-multiple",
+          "description": "Whether the user can drag multiple items",
           "type": "boolean",
           "default": "false"
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.222.3",
+  "version": "1.223.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",