@brightspace-ui/core 2.76.3 → 2.78.0

package/components/list/demo/list-demo-scenarios.js

@@ -0,0 +1,321 @@
+export const listDemos = {
+	imgPrimaryAndSupporting: [{
+		key: '1',
+		primaryText: 'Introductory Earth Sciences',
+		supportingText: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.',
+		imgSrc: 'https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg',
+		dropNested: true,
+		items: [{
+			key: '1-1',
+			primaryText: 'Glaciation',
+			supportingText: 'Nesting Allowed',
+			imgSrc: 'https://s.brightspace.com/course-images/images/bf648978-6637-4fdc-815b-81572c436c0e/tile-high-density-max-size.jpg',
+			dropNested: true,
+			items: []
+		}, {
+			key: '1-2',
+			primaryText: 'Weathering',
+			supportingText: 'Nesting Allowed',
+			imgSrc: 'https://s.brightspace.com/course-images/images/50f91ba6-7c25-482a-bd71-1c4b7c8d2154/tile-high-density-min-size.jpg',
+			dropNested: true,
+			items: []
+		}, {
+			key: '1-3',
+			primaryText: 'Volcanism',
+			supportingText: 'Nesting Allowed',
+			imgSrc: 'https://s.brightspace.com/course-images/images/5eb2371d-6099-4c8d-8aad-075f357012a2/tile-high-density-min-size.jpg',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '2',
+		primaryText: 'Applied Wetland Science',
+		supportingText: 'Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.',
+		imgSrc: 'https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg',
+		items: [{
+			key: '-1',
+			primaryText: 'Carbon & Nitrogen Cycling',
+			supportingText: 'Nesting Allowed',
+			imgSrc: 'https://s.brightspace.com/course-images/images/623b420b-a305-4762-8af8-598f0e72e956/tile-high-density-min-size.jpg',
+			dropNested: true,
+			items: []
+		}, {
+			key: '2-2',
+			primaryText: 'Wetland Engineering',
+			supportingText: 'Nesting Allowed',
+			imgSrc: 'https://s.brightspace.com/course-images/images/26102577-8f2a-4e24-84b5-19d76decbc7a/tile-high-density-min-size.jpg',
+			dropNested: true,
+			items: []
+		}]
+	}],
+	primaryAndSupportingText: [{
+		key: '1',
+		primaryText: 'Introductory Earth Sciences',
+		supportingText: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.',
+		dropNested: true,
+		items: [{
+			key: '1-1',
+			primaryText: 'Glaciation',
+			supportingText: 'Nesting Allowed',
+			dropNested: true,
+			items: []
+		}, {
+			key: '1-2',
+			primaryText: 'Weathering',
+			supportingText: 'Nesting Allowed',
+			dropNested: true,
+			items: []
+		}, {
+			key: '1-3',
+			primaryText: 'Volcanism',
+			supportingText: 'Nesting Allowed',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '2',
+		primaryText: 'Applied Wetland Science',
+		supportingText: 'Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.',
+		items: [{
+			key: '2-1',
+			primaryText: 'Carbon & Nitrogen Cycling',
+			supportingText: 'Nesting Allowed',
+			dropNested: true,
+			items: []
+		}, {
+			key: '2-2',
+			primaryText: 'Wetland Engineering',
+			supportingText: 'Nesting Allowed',
+			dropNested: true,
+			items: []
+		}]
+	}],
+	primaryTextOnly: [{
+		key: '1',
+		primaryText: 'Introductory Earth Sciences',
+		dropNested: true,
+		items: [{
+			key: '1-1',
+			primaryText: 'Glaciation',
+			dropNested: true,
+			items: []
+		}, {
+			key: '1-2',
+			primaryText: 'Weathering',
+			dropNested: true,
+			items: []
+		}, {
+			key: '1-3',
+			primaryText: 'Volcanism',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '2',
+		primaryText: 'Applied Wetland Science',
+		items: [{
+			key: '2-1',
+			primaryText: 'Carbon & Nitrogen Cycling',
+			dropNested: true,
+			items: []
+		}, {
+			key: '2-2',
+			primaryText: 'Wetland Engineering',
+			dropNested: true,
+			items: []
+		}]
+	}],
+	primaryTextOnlyDeepNesting: [{
+		key: '1',
+		primaryText: 'Item 1 - Deeply Nested',
+		dropNested: true,
+		items: [{
+			key: '1-1',
+			primaryText: 'Glaciation',
+			dropNested: true,
+			items: [{
+				key: '1-1-1',
+				primaryText: 'Ice',
+				dropNested: true,
+				items: [{
+					key: '1-1-1-1',
+					primaryText: 'Cold',
+					dropNested: true,
+					items: [{
+						key: '1-1-1-1-1',
+						primaryText: 'Winter',
+						dropNested: true,
+						items: [{
+							key: '1-1-1-1-1-1',
+							primaryText: 'Canada',
+							dropNested: true,
+							items: [{
+								key: '1-1-1-1-1-1-1',
+								primaryText: 'Moose',
+								dropNested: true,
+								items: []
+							}]
+						}]
+					}]
+				}]
+			}, {
+				key: '1-1-2',
+				primaryText: 'Snow',
+				dropNested: true,
+				items: []
+			}]
+		}, {
+			key: '1-2',
+			primaryText: 'Weathering',
+			dropNested: true,
+			items: []
+		}, {
+			key: '1-3',
+			primaryText: 'Volcanism',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '2',
+		primaryText: 'Item 2',
+		items: [{
+			key: '2-1',
+			primaryText: '2-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '2-2',
+			primaryText: '2-2',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '3',
+		primaryText: 'Item 3',
+		items: [{
+			key: '3-1',
+			primaryText: '3-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '3-2',
+			primaryText: '3-2',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '4',
+		primaryText: 'Item 4',
+		items: [{
+			key: '4-1',
+			primaryText: '4-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '4-2',
+			primaryText: '4-2',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '5',
+		primaryText: 'Item 5',
+		items: [{
+			key: '5-1',
+			primaryText: '5-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '5-2',
+			primaryText: '5-2',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '6',
+		primaryText: 'Item 6',
+		items:[{
+			key: '6-1',
+			primaryText: '6-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '6-2',
+			primaryText: '6-2',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '7',
+		primaryText: 'Item 7',
+		items: [{
+			key: '7-1',
+			primaryText: '7-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '7-2',
+			primaryText: '7-2',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '8',
+		primaryText: 'Item 8',
+		items: [{
+			key: '8-1',
+			primaryText: '8-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '8-2',
+			primaryText: '8-2',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '9',
+		primaryText: 'Item 9',
+		items: [{
+			key: '9-1',
+			primaryText: '9-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '9-2',
+			primaryText: '9-2',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '10',
+		primaryText: 'Item 10',
+		items: [{
+			key: '10-1',
+			primaryText: '10-1',
+			dropNested: true,
+			items: []
+		}, {
+			key: '10-2',
+			primaryText: '10-2',
+			dropNested: true,
+			items: []
+		}]
+	}],
+	oneChild: [{
+		key: '1',
+		primaryText: 'Introductory Earth Sciences',
+		dropNested: true,
+		items: [{
+			key: '1-1',
+			primaryText: 'Glaciation',
+			dropNested: true,
+			items: []
+		}]
+	}, {
+		key: '2',
+		primaryText: 'Applied Wetland Science',
+		dropNested: true,
+		items: []
+	}]
+};

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

@@ -7,7 +7,7 @@
 	<script type="module">
 		import '../../demo/demo-page.js';
 		import './list-drag-and-drop-position.js';
-		import './list-drag-and-drop.js';
+		import './demo-list-nested.js';
 	</script>
 </head>
 <body unresolved>
@@ -26,7 +26,7 @@
 
 		<d2l-demo-snippet>
 			<template>
-				<d2l-demo-list-drag-and-drop></d2l-demo-list-drag-and-drop>
+				<d2l-demo-list-nested demo-item-key="imgPrimaryAndSupporting" draggable selectable disable-expand-feature></d2l-demo-list-nested>
 			</template>
 		</d2l-demo-snippet>
 

package/components/list/demo/list-expand-collapse.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+	<script type="module">
+		import '../../demo/demo-page.js';
+		import './demo-list-nested.js';
+		import './demo-list-nested-lazy-load.js';
+	</script>
+</head>
+<body unresolved>
+
+	<d2l-demo-page page-title="d2l-list (with expand/collapse)">
+		<h2>Draggable & Selectable (with grid)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested
+					demo-item-key="imgPrimaryAndSupporting"
+					draggable
+					selectable
+					expandable
+					expanded
+					include-action-href
+					include-secondary-actions
+					include-list-header></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="primaryAndSupportingText" draggable selectable expandable></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="primaryTextOnly" draggable selectable expandable></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Draggable & Selectable (without grid)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested
+					demo-item-key="imgPrimaryAndSupporting"
+					draggable
+					selectable
+					expandable
+					expanded
+					include-secondary-actions
+					include-list-header
+					disable-list-grid></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Selectable</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="primaryAndSupportingText" selectable expandable expanded></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Draggable</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="primaryAndSupportingText" draggable expandable></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Expandable</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="primaryTextOnlyDeepNesting" expandable></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Button list item</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested
+					demo-item-key="imgPrimaryAndSupporting"
+					draggable
+					selectable
+					expandable
+					include-secondary-actions
+					include-list-header
+					use-button-item></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Load More</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="primaryTextOnlyDeepNesting" expandable expanded show-load-more></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>One Child</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="oneChild" expandable include-action-href></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>No Primary Action</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested
+					demo-item-key="imgPrimaryAndSupporting"
+					draggable
+					selectable
+					expandable
+					no-primary-action></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Lazy Loaded Children</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested-lazy-load></d2l-demo-list-nested-lazy-load>
+			</template>
+		</d2l-demo-snippet>
+	</d2l-demo-page>
+
+	<script>
+		document.body.addEventListener('d2l-list-items-move', e => {
+			console.log('d2l-list-items-move', e.detail);
+		});
+	</script>
+
+</body>
+</html>

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

@@ -2,14 +2,10 @@ import '../selection/selection-input.js';
 import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
-/**
- * @property label - The hidden label for the checkbox if selectable
- */
-export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(LabelledMixin(superclass)) {
+export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	static get properties() {
 		return {
@@ -83,8 +79,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		super.connectedCallback();
 		if (this.selectable) {
 			if (!this.key) console.warn('ListItemCheckboxMixin requires a key.');
-		} else {
-			this.labelRequired = false;
 		}
 		if (!this.key) this.setSelected(undefined, true);
 	}
@@ -130,7 +124,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		}
 	}
 
-	_onNestedSlotChange() {
+	_onNestedSlotChangeCheckboxMixin() {
 		this._updateNestedSelectionProvider();
 	}
 

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

@@ -363,6 +363,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	firstUpdated(changedProperties) {
 		this.addEventListener('dragenter', this._onHostDragEnter.bind(this));
+		this.addEventListener('dragleave', this._onHostDragLeave.bind(this));
 		super.firstUpdated(changedProperties);
 	}
 
@@ -395,6 +396,17 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		}));
 	}
 
+	_dispatchMoveAroundCollapsedItem(listItem, moveAbove) {
+		const parentListItem = this._getParentList();
+		if (parentListItem) {
+			const parentItems = parentListItem.getItems();
+			const nextItemIdex = parentItems.indexOf(listItem);
+			this._dispatchListItemsMove([this], parentItems[nextItemIdex], moveAbove ? moveLocations.above : moveLocations.below, true);
+		} else {
+			this._dispatchMoveRootItem(moveAbove);
+		}
+	}
+
 	_dispatchMoveListItemFirst(moveToRoot) {
 		const list = (moveToRoot ? this._getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
 		const items = list.getItems();
@@ -410,42 +422,54 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_dispatchMoveListItemNest() {
 		const listItem = this._getPreviousListItemSibling();
 		if (listItem) {
+			this._expandListItemOnKeyboardMove(listItem);
 			this._dispatchListItemsMove([this], listItem, moveLocations.nest, true);
 		}
 	}
 
 	_dispatchMoveListItemNext() {
-		const listItem = this._getNextListItemSibling();
-		if (listItem) {
-			const nestedList = listItem._getNestedList();
+		const nextListItemSibling = this._getNextListItemSibling();
+		// if next sibling is collapsed - move item below it
+		if (nextListItemSibling && nextListItemSibling.expandable && !nextListItemSibling.expanded) {
+			this._dispatchMoveAroundCollapsedItem(nextListItemSibling, false);
+		} else if (nextListItemSibling) {
+			this._expandListItemOnKeyboardMove(nextListItemSibling);
+			const nestedList = nextListItemSibling._getNestedList();
 			const items = (nestedList ? nestedList.getItems() : []);
 			if (items.length > 0) {
 				this._dispatchListItemsMove([this], items[0], moveLocations.above, true);
 			} else {
-				this._dispatchListItemsMove([this], listItem, moveLocations.below, true);
+				this._dispatchListItemsMove([this], nextListItemSibling, moveLocations.below, true);
 			}
 		} else {
 			const parentListItem = this._getParentListItem();
 			if (parentListItem) {
 				this._dispatchListItemsMove([this], parentListItem, moveLocations.below, true);
+			} else {
+				this._dispatchMoveRootItem(false);
 			}
 		}
 	}
 
 	_dispatchMoveListItemPrevious() {
-		const listItem = this._getPreviousListItemSibling();
-		if (listItem) {
-			const nestedList = listItem._getNestedList();
+		const previousListItemSibling = this._getPreviousListItemSibling();
+		// if previous sibling is collapsed - move item above it
+		if (previousListItemSibling && previousListItemSibling.expandable && !previousListItemSibling.expanded) {
+			this._dispatchMoveAroundCollapsedItem(previousListItemSibling, true);
+		} else if (previousListItemSibling) {
+			const nestedList = previousListItemSibling._getNestedList();
 			const items = (nestedList ? nestedList.getItems() : []);
 			if (items.length > 0) {
 				this._dispatchListItemsMove([this], items[items.length - 1], moveLocations.below, true);
 			} else {
-				this._dispatchListItemsMove([this], listItem, moveLocations.above, true);
+				this._dispatchListItemsMove([this], previousListItemSibling, moveLocations.above, true);
 			}
 		} else {
 			const parentListItem = this._getParentListItem();
 			if (parentListItem) {
 				this._dispatchListItemsMove([this], parentListItem, moveLocations.above, true);
+			} else {
+				this._dispatchMoveRootItem(true);
 			}
 		}
 	}
@@ -453,10 +477,28 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_dispatchMoveListItemUnnest() {
 		const listItem = this._getParentListItem();
 		if (listItem) {
+			this._expandListItemOnKeyboardMove(listItem);
 			this._dispatchListItemsMove([this], listItem, moveLocations.below, true);
 		}
 	}
 
+	_dispatchMoveRootItem(moveAbove) {
+		const rootList = this._getRootList();
+		const items = rootList.getItems();
+		const currentIndex = items.indexOf(this);
+		if (moveAbove && currentIndex !== 0) {
+			this._dispatchListItemsMove([this], items[currentIndex - 1], moveLocations.above, true);
+		} else if (!moveAbove && currentIndex !== items.length - 1) {
+			this._dispatchListItemsMove([this], items[currentIndex + 1], moveLocations.below, true);
+		}
+	}
+
+	_expandListItemOnKeyboardMove(listItem) {
+		if (this._keyboardActive && listItem.expandable && !listItem.expanded) {
+			listItem._toggleExpandCollapse();
+		}
+	}
+
 	_findListItemFromCoordinates(x, y) {
 		const listNode = findComposedAncestor(this.parentNode, (node) => node && node.tagName === 'D2L-LIST');
 		return listNode.shadowRoot.elementFromPoint(x, y);
@@ -557,17 +599,34 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			e.dataTransfer.setData('text/plain', `${this.dropText}`);
 		}
 
-		const rootList = this._getRootList(this);
-		const selectionInfo = rootList.getSelectionInfo(rootList.dragMultiple);
-
-		if (rootList.dragMultiple && selectionInfo.keys.length > 1) {
+		const getDragImage = (count, includePlusSign) => {
 			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);
+			dragImage.count = count;
+			dragImage.includePlusSign = includePlusSign;
+			return dragImage;
+		};
+
+		const rootList = this._getRootList(this);
+		const selectionInfo = rootList.getSelectionInfo(rootList.dragMultiple);
+		if (rootList.dragMultiple && selectionInfo.keys.length > 1) {
+			const lazyLoadListItems = this._getFlattenedListItems().lazyLoadListItems;
+			let includePlus = false;
+			if (lazyLoadListItems.size > 0) {
+				for (const selectedItemKey of selectionInfo.keys) {
+					if (lazyLoadListItems.has(selectedItemKey)) {
+						includePlus = true;
+						break;
+					}
+				}
+			}
+			e.dataTransfer.setDragImage(getDragImage(selectionInfo.keys.length, includePlus), 24, 26);
+		} else if (rootList.dragMultiple && this.expandable) {
+			const flattenedListItems = this._getFlattenedListItems(this);
+			e.dataTransfer.setDragImage(getDragImage(flattenedListItems.listItems.size, flattenedListItems.lazyLoadListItems.size > 0), 24, 26);
 		} else {
 			if (this.shadowRoot) {
 				const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
@@ -697,6 +756,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		e.dataTransfer.dropEffect = 'move';
 	}
 
+	_onHostDragLeave() {
+		this._draggingOver = false;
+	}
+
 	_onTouchCancel() {
 		if (this._touchTimeoutId) clearTimeout(this._touchTimeoutId);
 		this._touchStarted = false;
@@ -735,6 +798,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		if (!listItem) return;
 		// simulate host dragenter
 		if (listItem !== this && this._currentTouchListItem !== listItem) {
+			this._currentTouchListItem.dispatchEvent(createDragEvent('dragleave'));
 			listItem.dispatchEvent(createDragEvent('dragenter'));
 			this._currentTouchListItem = listItem;
 		}