@brightspace-ui/core 2.77.0 → 2.78.0

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

@@ -3,17 +3,19 @@ import '../inputs/input-checkbox.js';
 import { css, html, LitElement } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
-class ListItemDragImage extends SkeletonMixin(RtlMixin(LitElement)) {
+class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(RtlMixin(LitElement))) {
 
 	static get properties() {
 		return {
 			/**
 			 * @ignore
 			 */
-			count: { type: Number }
+			count: { type: Number },
+			includePlusSign: { type: Boolean, attribute: 'include-plus-sign' }
 		};
 	}
 
@@ -103,7 +105,7 @@ class ListItemDragImage extends SkeletonMixin(RtlMixin(LitElement)) {
 	render() {
 		return html`
 			<div class="first">
-				<div class="count d2l-body-small">${formatNumber(this.count)}</div>
+				<div class="count d2l-body-small">${this.includePlusSign ? this.localize('components.count-badge.plus', { number: this.count }) : 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>

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

@@ -0,0 +1,168 @@
+import '../button/button-icon.js';
+import '../loading-spinner/loading-spinner.js';
+import { css, html, nothing } from 'lit';
+import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
+
+const dragIntervalDelay = 100;
+const dragHoverDropTime = 1000;
+
+export const ListItemExpandCollapseMixin = superclass => class extends 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 get styles() {
+		const styles = [ css`
+			:host {
+				--d2l-expand-collapse-slot-transition-duration: 0.3s;
+			}
+			.d2l-list-expand-collapse {
+				width: 0;
+			}
+			:host([dir="rtl"][_render-expand-collapse-slot]) .d2l-list-expand-collapse {
+				padding: 0.4rem 0 0 0.3rem;
+			}
+			.d2l-list-expand-collapse d2l-button-icon {
+				--d2l-button-icon-min-height: 1.2rem;
+				--d2l-button-icon-min-width: 1.2rem;
+			}
+			.d2l-list-expand-collapse:hover d2l-button-icon {
+				background-color: var(--d2l-button-icon-background-color-hover);
+				border-radius: var(--d2l-button-icon-border-radius);
+			}
+			:host([_render-expand-collapse-slot]) .d2l-list-expand-collapse {
+				padding: 0.4rem 0.3rem 0 0;
+				width: 1.2rem;
+			}
+			.d2l-list-expand-collapse-action {
+				cursor: pointer;
+				display: block;
+				height: 100%;
+			}
+			.d2l-list-nested-loading {
+				display: flex;
+				justify-content: center;
+				padding: 0.4rem;
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				.d2l-list-expand-collapse {
+					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;
+	}
+
+	constructor() {
+		super();
+		this._siblingHasNestedItems = false;
+		this._renderExpandCollapseSlot = false;
+		this._showNestedLoadingSpinner = false;
+		this._parentChildUpdateSubscription = new EventSubscriberController(this, {}, { eventName: 'd2l-list-child-status' });
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		// mixin requires key for events
+		if (!this.key && this.expandable) {
+			console.warn('ListItemExpandCollapseMixin requires a key.');
+			this.expandable = false;
+		}
+	}
+
+	updated(changedProperties) {
+		if (changedProperties.has('_siblingHasNestedItems') || changedProperties.has('expandable')) {
+			this._renderExpandCollapseSlot = this.expandable || this._siblingHasNestedItems;
+		}
+		if (changedProperties.has('_draggingOver') && this._draggingOver && this.dropNested && !this.expanded && this.expandable) {
+			let elapsedHoverTime = 0;
+			let dragIntervalId = null;
+			const watchDraggingOver = () => {
+				if (elapsedHoverTime >= dragHoverDropTime) {
+					if (this._draggingOver) {
+						this._toggleExpandCollapse();
+					}
+					clearInterval(dragIntervalId);
+				} else {
+					if (!this._draggingOver) {
+						clearInterval(dragIntervalId);
+					} else {
+						elapsedHoverTime += dragIntervalDelay;
+					}
+				}
+			};
+			// check if they are still hovered over same item every 100ms
+			dragIntervalId = setInterval(watchDraggingOver, dragIntervalDelay);
+		}
+		if (changedProperties.has('expanded') || changedProperties.has('_hasNestedList')) {
+			this._showNestedLoadingSpinner = this.expanded && !this._hasNestedList;
+		}
+	}
+
+	updateSiblingHasChildren(siblingHasNestedItems) {
+		this._siblingHasNestedItems = siblingHasNestedItems;
+	}
+
+	_renderExpandCollapse() {
+		if (!this.expandable) {
+			return nothing;
+		}
+		return html`
+			<d2l-button-icon
+				icon="${this.expanded ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small' }"
+				aria-expanded="${this.expanded ? 'true' : 'false'}"
+				text="${this.label}"
+				@click="${this._toggleExpandCollapse}"></d2l-button-icon>`;
+	}
+
+	_renderExpandCollapseAction() {
+		if (this.selectable || !this.expandable || this.noPrimaryAction) {
+			return nothing;
+		}
+
+		return html`<div class="d2l-list-expand-collapse-action" @click="${this._toggleExpandCollapse}"></div>`;
+	}
+
+	_renderNestedLoadingSpinner() {
+		if (!this.expandable || !this._showNestedLoadingSpinner) {
+			return nothing;
+		}
+		return html`
+			<div class="d2l-list-nested-loading">
+				<d2l-loading-spinner size="40"></d2l-loading-spinner>
+			</div>`;
+	}
+
+	_toggleExpandCollapse(e = null) {
+		if (e) {
+			e.stopPropagation();
+		}
+		if (!this.expandable) {
+			return;
+		}
+		this.expanded = !this.expanded;
+		/** Dispatched whenever the list item expand state is toggled. */
+		this.dispatchEvent(new CustomEvent('d2l-list-item-expand-collapse-toggled', {
+			composed: true,
+			bubbles: true
+		}));
+	}
+};

package/components/list/list-item-generic-layout.js

@@ -62,7 +62,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				display: grid;
 				grid-template-columns:
 					[start outside-control-start] minmax(0, min-content)
-					[control-start outside-control-end] minmax(0, min-content)
+					[expand-collapse-start outside-control-end] minmax(0, min-content)
+					[control-start expand-collapse-end] minmax(0, min-content)
 					[control-end content-start] minmax(0, auto)
 					[content-end actions-start] minmax(0, min-content)
 					[end actions-end];
@@ -79,7 +80,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: control-start / end;
 			}
 			:host(.d2l-dragging-over) ::slotted([slot="nested"]) {
-				z-index: 6; /* must be greater than item's drop-target to allow dropping onto items within nested list  */
+				z-index: 7; /* must be greater than item's drop-target to allow dropping onto items within nested list  */
 			}
 
 			::slotted([slot="drop-target"]) {
@@ -87,10 +88,11 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				position: absolute;
 				top: 0;
 				width: 100%;
-				z-index: 5;
+				z-index: 6;
 			}
 
 			::slotted([slot="outside-control"]),
+			::slotted([slot="expand-collapse"]),
 			::slotted([slot="control"]),
 			::slotted([slot="content"]),
 			::slotted([slot="actions"]) {
@@ -98,7 +100,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			}
 			::slotted([slot="outside-control"]) {
 				grid-column: outside-control-start / outside-control-end;
-				width: 2.2rem;
+				width: fit-content;
+			}
+
+			::slotted([slot="expand-collapse"]) {
+				cursor: pointer;
+				grid-column: expand-collapse-start / expand-collapse-end;
+				z-index: 2;
 			}
 
 			::slotted([slot="control"]) {
@@ -117,7 +125,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			::slotted([slot="actions"]) {
 				grid-column: actions-start / actions-end;
 				justify-self: end;
-				z-index: 4;
+				z-index: 5;
 			}
 
 			::slotted([slot="outside-control-action"]),
@@ -136,14 +144,14 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: control-start / end;
 				height: 100%;
 				width: 100%;
-				z-index: 2;
+				z-index: 3;
 			}
 			:host([no-primary-action]) ::slotted([slot="control-action"]) {
 				grid-column: control-start / control-end;
 			}
 			::slotted([slot="content-action"]) {
 				grid-column: content-start / end;
-				z-index: 3;
+				z-index: 4;
 			}
 			:host([no-primary-action]) ::slotted([slot="content-action"]) {
 				display: none;
@@ -154,7 +162,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-row: 1 / 2;
 			}
 			::slotted([slot="control-container"]) {
-				grid-column: control-start / end;
+				grid-column: expand-collapse-start / end;
 				grid-row: 1 / 2;
 			}
 		`;
@@ -192,13 +200,14 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			<slot name="control-container"></slot>
 			<slot name="outside-control-container"></slot>
 			<slot name="drop-target"></slot>
-			<slot name="content-action" class="d2l-cell" data-cell-num="5"></slot>
+			<slot name="content-action" class="d2l-cell" data-cell-num="6"></slot>
 			<slot name="outside-control-action" class="d2l-cell" data-cell-num="1"></slot>
 			<slot name="outside-control" class="d2l-cell" data-cell-num="2"></slot>
 			<slot name="control-action" class="d2l-cell" data-cell-num="3"></slot>
-			<slot name="control" class="d2l-cell" data-cell-num="4"></slot>
-			<slot name="actions" class="d2l-cell" data-cell-num="6"></slot>
-			<slot name="content" class="d2l-cell" data-cell-num="7" @focus="${!this.noPrimaryAction ? this._preventFocus : null}"></slot>
+			<slot name="expand-collapse" class="d2l-cell" data-cell-num="4"></slot>
+			<slot name="control" class="d2l-cell" data-cell-num="5"></slot>
+			<slot name="actions" class="d2l-cell" data-cell-num="7"></slot>
+			<slot name="content" class="d2l-cell" data-cell-num="8" @focus="${!this.noPrimaryAction ? this._preventFocus : null}"></slot>
 			<slot name="nested"></slot>
 		`;
 	}

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

@@ -2,14 +2,18 @@ import '../colors/colors.js';
 import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
 import '../tooltip/tooltip.js';
+import '../expand-collapse/expand-collapse-content.js';
 import { css, html, nothing } from 'lit';
 import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { composeMixins } from '../../helpers/composeMixins.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
+import { ListItemExpandCollapseMixin } from './list-item-expand-collapse-mixin.js';
 import { ListItemRoleMixin } from './list-item-role-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -43,7 +47,18 @@ const ro = new ResizeObserver(entries => {
 
 const defaultBreakpoints = [842, 636, 580, 0];
 
-export const ListItemMixin = superclass => class extends LocalizeCoreElement(ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass))))) {
+/**
+ * @property label - The hidden label for the checkbox and expand collapse control
+ */
+export const ListItemMixin = superclass => class extends composeMixins(
+	superclass,
+	LabelledMixin,
+	LocalizeCoreElement,
+	ListItemExpandCollapseMixin,
+	ListItemDragDropMixin,
+	ListItemCheckboxMixin,
+	ListItemRoleMixin,
+	RtlMixin) {
 
 	static get properties() {
 		return {
@@ -77,7 +92,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
-			_tooltipShowing: { type: Boolean, attribute: '_tooltip-showing', reflect: true }
+			_tooltipShowing: { type: Boolean, attribute: '_tooltip-showing', reflect: true },
+			_hasNestedList: { state: true }
 		};
 	}
 
@@ -262,14 +278,16 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				margin-left: 1rem;
 				margin-right: 0;
 			}
+
 			d2l-selection-input {
-				margin: 0.55rem 0.9rem 0.55rem 0;
+				margin: 0.55rem 0.55rem 0.55rem 0;
 			}
 			.d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-left: 0.9rem;
 			}
+
 			d2l-list-item-drag-handle {
-				margin: 0.25rem 0 0.25rem 0.4rem;
+				margin: 0.25rem 0.3rem;
 			}
 			:host([dir="rtl"]) d2l-selection-input {
 				margin-left: 0.9rem;
@@ -356,6 +374,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		this._displayKeyboardTooltip = false;
 		this._fullscreenWithin = false;
 		this._fullscreenWithinCount = 0;
+		this._hasNestedList = false;
 	}
 
 	get breakpoints() {
@@ -375,6 +394,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		if (this.role === 'rowgroup') {
 			addTabListener();
 		}
+		if (!this.selectable && !this.expandable) {
+			this.labelRequired = false;
+		}
 	}
 
 	disconnectedCallback() {
@@ -439,6 +461,30 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		else this.scrollIntoView({ behavior: 'smooth', block: alignToTop ? 'start' : 'end' });
 	}
 
+	_getFlattenedListItems(listItem) {
+		const listItems = new Map();
+		const lazyLoadListItems = new Map();
+		this._getListItems(listItems, lazyLoadListItems, listItem);
+		return { listItems, lazyLoadListItems };
+	}
+
+	_getListItems(listItems, lazyLoadListItems, listItem) {
+		if (!listItem) {
+			const rootList = this._getRootList();
+			const rootListItems = rootList.getItems();
+			rootListItems.forEach(listItem => this._getListItems(listItems, lazyLoadListItems, listItem));
+		} else {
+			listItems.set(listItem.key, listItem);
+			if (listItem.expandable && !listItem._hasNestedList) {
+				lazyLoadListItems.set(listItem.key, listItem);
+			}
+			if (listItem._hasNestedList) {
+				const nestedList = listItem._getNestedList();
+				nestedList.getItems().forEach(listItem => this._getListItems(listItems, lazyLoadListItems, listItem));
+			}
+		}
+	}
+
 	_getNestedList() {
 		if (!this.shadowRoot) return;
 		const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
@@ -458,6 +504,16 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		}
 	}
 
+	_getParentList(node) {
+		if (!node) node = this;
+		let parentList;
+		while (parentList?.tagName !== 'D2L-LIST') {
+			node = getComposedParent(node);
+			if (node.tagName === 'D2L-LIST') parentList = node;
+		}
+		return parentList;
+	}
+
 	_getParentListItem() {
 		const parentListItem = findComposedAncestor(this.parentNode, node => this._isListItem(node));
 		return parentListItem;
@@ -530,6 +586,18 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		this._hovering = false;
 	}
 
+	_onNestedSlotChange() {
+		if (this.selectable) {
+			this._onNestedSlotChangeCheckboxMixin();
+		}
+		const nestedList = this._getNestedList();
+		if (this._hasNestedList !== !!nestedList) {
+			this._hasNestedList = !!nestedList;
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent('d2l-list-item-nested-change', { bubbles: true, composed: true }));
+		}
+	}
+
 	_renderListItem({ illustration, content, actions, nested } = {}) {
 		const classes = {
 			'd2l-visible-on-ancestor-target': true,
@@ -539,7 +607,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 
 		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId) : null);
 		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
-
 		const innerView = html`
 			<d2l-list-item-generic-layout
 				align-nested="${ifDefined(this.draggable && this.selectable ? 'control' : undefined)}"
@@ -556,12 +623,15 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				${this._renderDragHandle(this._renderOutsideControl)}
 				${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
 				<div slot="control-container"></div>
-				${this.selectable ? html`
-				<div slot="control">${this._renderCheckbox()}</div>
-				<div slot="control-action"
+				<div slot="expand-collapse" class="d2l-list-expand-collapse" @click="${this._toggleExpandCollapse}">
+					${this._renderExpandCollapse()}
+				</div>
+				${this.selectable ? html`<div slot="control">${this._renderCheckbox()}</div>` : nothing}
+				${this.selectable || this.expandable ? html`<div slot="control-action"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}">
 						${this._renderCheckboxAction('')}
+						${this._renderExpandCollapseAction()}
 				</div>` : nothing }
 				${primaryAction ? html`
 				<div slot="content-action"
@@ -583,9 +653,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 					class="d2l-list-item-actions-container">
 					<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
 				</div>
-				<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
-					<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
-				</div>
+				${this._renderNested(nested)}
 			</d2l-list-item-generic-layout>
 		`;
 
@@ -598,6 +666,15 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 
 	}
 
+	_renderNested(nested) {
+		const nestedSlot = html`<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>`;
+		return html`
+			<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
+				${this.expandable ? html`<d2l-expand-collapse-content ?expanded="${this.expanded}">${this._renderNestedLoadingSpinner()}${nestedSlot}</d2l-expand-collapse-content>` : nestedSlot}
+			</div>
+		`;
+	}
+
 	_renderOutsideControl(dragHandle) {
 		return html`<div slot="outside-control">${dragHandle}</div>`;
 	}

package/components/list/list.js

@@ -2,6 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
+import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 const keyCodes = {
 	TAB: 9
@@ -66,11 +67,19 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this._itemsShowingCount = 0;
 		this._itemsShowingTotalCount = 0;
 		this._listItemChanges = [];
+		this._childHasExpandCollapseToggle = false;
+
+		this._listChildrenUpdatedSubscribers = new SubscriberRegistryController(
+			this,
+			{ onSubscribe: this._updateActiveSubscriber.bind(this), updateSubscribers: this._updateActiveSubscribers.bind(this) },
+			{ eventName: 'd2l-list-child-status' }
+		);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener('d2l-list-items-showing-count-change', this._handleListItemsShowingCountChange);
+		this.addEventListener('d2l-list-item-nested-change', (e) => this._handleListIemNestedChange(e));
 	}
 
 	disconnectedCallback() {
@@ -80,7 +89,8 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-
+		// check if list items are expandable on first render so we adjust sibling spacing appropriately
+		this._handleListIemNestedChange();
 		this.addEventListener('d2l-list-item-selected', e => {
 
 			// batch the changes from select-all and nested lists
@@ -174,6 +184,10 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return new SelectionInfo(keys, selectionInfo.state);
 	}
 
+	getSubscriberController() {
+		return this._listChildrenUpdatedSubscribers;
+	}
+
 	_getItemByIndex(index) {
 		const items = this.getItems();
 		if (index > items.length - 1) return;
@@ -189,16 +203,14 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return this._itemsShowingCount - 1;
 	}
 
+	_getLazyLoadItems() {
+		const items = this.getItems();
+		return items.length > 0 ?  items[0]._getFlattenedListItems().lazyLoadListItems : new Map();
+	}
+
 	async _getListItemsShowingTotalCount(refresh) {
 		if (refresh) {
-			this._itemsShowingTotalCount = await this.getItems().reduce(async(count, item) => {
-				await item.updateComplete;
-				if (item._selectionProvider) {
-					return (await count + await item._selectionProvider._getListItemsShowingTotalCount(true));
-				} else {
-					return await count;
-				}
-			}, this._itemsShowingCount);
+			this._itemsShowingTotalCount = this.getItems().length;
 		}
 		return this._itemsShowingTotalCount;
 	}
@@ -212,6 +224,22 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		if (focusable) focusable.focus();
 	}
 
+	_handleListIemNestedChange(e) {
+		if (e) {
+			e.stopPropagation();
+		}
+		const items = this.getItems();
+		let aChildHasToggleEnabled = false;
+		for (const item of items) {
+			if (item.expandable) {
+				aChildHasToggleEnabled = true;
+				break;
+			}
+		}
+		this._childHasExpandCollapseToggle = aChildHasToggleEnabled;
+		this._listChildrenUpdatedSubscribers.updateSubscribers();
+	}
+
 	_handleListItemsShowingCountChange() {
 		if (this.slot === 'nested') return;
 
@@ -242,6 +270,14 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		}));
 	}
 
+	_updateActiveSubscriber(subscriber) {
+		subscriber.updateSiblingHasChildren(this._childHasExpandCollapseToggle);
+	}
+
+	_updateActiveSubscribers(subscribers) {
+		subscribers.forEach(subscriber => subscriber.updateSiblingHasChildren(this._childHasExpandCollapseToggle));
+	}
+
 }
 
 customElements.define('d2l-list', List);

package/components/selection/selection-summary.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SelectionInfo } from './selection-mixin.js';
@@ -35,25 +35,56 @@ class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 	}
 
 	render() {
+		if (!this._summary) {
+			return nothing;
+		}
+		return html`
+			<p class="d2l-body-compact">${this._summary}</p>
+		`;
+	}
+
+	willUpdate(changedProperties) {
+		if (changedProperties.has('_provider') || changedProperties.has('selectionInfo')) {
+			this._updateSelectSummary();
+		}
+	}
+
+	_updateSelectSummary() {
 		if (this._provider && this._provider.selectionSingle) return;
 
 		let count;
-		let summary;
 		if (this._provider && this._provider.selectionCountOverride !== undefined) {
 			count = this._provider.selectionCountOverride;
-			summary = (this._provider.selectionCountOverride === 0 && this.noSelectionText ?
-				this.noSelectionText : this.localize('components.selection.selected', 'count', count));
+			this._summary = this._provider.selectionCountOverride === 0 && this.noSelectionText ?
+				this.noSelectionText : this.localize('components.selection.selected', 'count', count);
 		} else {
-			count = (this.selectionInfo.state === SelectionInfo.states.allPages ?
-				this._provider.itemCount : this.selectionInfo.keys.length);
+			/* If lazy loading items is supported (ex. d2l-list) then check the keys to determine if the plus sign should be included.
+			 * If lazy loading is not supported (ex. d2l-table-wrapper), then skip this.
+			 */
+			let includePlus = false;
+			if (this._provider && this._provider._getLazyLoadItems) {
+				const lazyLoadListItems = this._provider._getLazyLoadItems();
+				if (lazyLoadListItems.size > 0) {
+					for (const selectedItemKey of this.selectionInfo.keys) {
+						if (lazyLoadListItems.has(selectedItemKey)) {
+							includePlus = true;
+							break;
+						}
+					}
+				}
+			}
 
-			summary = (this.selectionInfo.state === SelectionInfo.states.none && this.noSelectionText ?
-				this.noSelectionText : this.localize('components.selection.selected', 'count', count));
-		}
+			count = this.selectionInfo.state === SelectionInfo.states.allPages ?
+				this._provider.itemCount : this.selectionInfo.keys.length;
 
-		return html`
-			<p class="d2l-body-compact">${summary}</p>
-		`;
+			if (this.selectionInfo.state === SelectionInfo.states.none && this.noSelectionText) {
+				this._summary = this.noSelectionText;
+			} else if (includePlus) {
+				this._summary = this.localize('components.selection.selected-plus', 'count', count);
+			} else {
+				this._summary = this.localize('components.selection.selected', 'count', count);
+			}
+		}
 	}
 
 }