@brightspace-ui/core 2.76.3 → 2.78.0

package/components/button/button-icon.js

@@ -62,6 +62,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 					--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
 					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color, var(--d2l-color-tungsten));
 					display: inline-block;
+					line-height: 0;
 				}
 				:host([hidden]) {
 					display: none;

package/components/inputs/demo/input-search.html

@@ -28,6 +28,14 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Search Input (Search on Input)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-search label="Search" value="Will dispatch search after every input" placeholder="Search for some stuff" search-on-input>
+					</d2l-input-search>
+				</template>
+			</d2l-demo-snippet>
+
 			<script>
 				document.body.addEventListener('d2l-input-search-searched', (e) => {
 					// eslint-disable-next-line no-console

package/components/inputs/docs/input-search.md

@@ -60,6 +60,7 @@ For text searches use `<d2l-input-search>`, which wraps the native `<input type=
 | `disabled` | Boolean | Disables the input |
 | `maxlength` | Number | Imposes an upper character limit |
 | `no-clear` | Boolean | Prevents the "clear" button from appearing |
+| `search-on-input` | Boolean | Dispatch search events after each input event |
 | `placeholder` | String, default:`'Search...'` | Placeholder text |
 | `value` | String, default: `''` | Value of the input |
 

package/components/inputs/input-search.js

@@ -8,6 +8,8 @@ import { inputStyles } from './input-styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
+const INPUT_TIMEOUT_MS = 400;
+
 /**
  * This component wraps the native "<input type="search">"" element and is for text searching.
  * @fires d2l-input-search-searched - Dispatched when a search is performed. When the input is cleared, this will be fired with an empty value.
@@ -50,6 +52,11 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 			 * @type {string}
 			 */
 			placeholder: { type: String },
+			/**
+			 * Dispatch search events after each input event
+			 * @type {boolean}
+			 */
+			searchOnInput: { type: Boolean, attribute: 'search-on-input' },
 			/**
 			 * Value of the input
 			 * @type {string}
@@ -81,9 +88,11 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 
 	constructor() {
 		super();
+		this._inputTimeout = undefined;
 		this._lastSearchValue = '';
 		this.disabled = false;
 		this.noClear = false;
+		this.searchOnInput = false;
 		this.value = '';
 	}
 
@@ -151,6 +160,12 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 		return showSearch;
 	}
 
+	_debounceInput() {
+		clearTimeout(this._inputTimeout);
+		this._setLastSearchValue(this.value);
+		this._inputTimeout = setTimeout(() => this._dispatchEvent(), INPUT_TIMEOUT_MS);
+	}
+
 	_dispatchEvent() {
 		this.dispatchEvent(new CustomEvent(
 			'd2l-input-search-searched',
@@ -169,6 +184,9 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 
 	_handleInput(e) {
 		this.value = e.target.value;
+		if (this.searchOnInput) {
+			this._debounceInput();
+		}
 	}
 
 	_handleInputKeyPress(e) {

package/components/list/README.md

@@ -193,6 +193,67 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
 </d2l-list>
 ```
 
+## Expandable Lists
+
+The `d2l-list` supports expandable items within a list. Expand and collapse toggle is enabled when `d2l-list-item`s have the `expandable` and `key` attributes set. When items are expandable the default state is collapsed. If you would like the default state to be expanded, add the `expanded` attribute to the `d2l-list-item`.
+
+### Expandable List Accessibility Properties
+
+If a `d2l-list-item` is expandable then it should have a `label` attribute that corresponds to the hidden label for the expand/collapse toggle.
+
+### Expandable List Example
+
+<!-- docs: demo code autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/list/list.js';
+  import '@brightspace-ui/core/components/list/list-header.js';
+  import '@brightspace-ui/core/components/list/list-item.js';
+  import '@brightspace-ui/core/components/list/list-item-content.js';
+  import '@brightspace-ui/core/components/selection/selection-action.js';
+</script>
+
+<d2l-list grid style="width: 100%">
+  <d2l-list-header slot="header">
+    <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
+  </d2l-list-header>
+  <d2l-list-item selectable expandable key="expand-1" label="Expandable item #1">
+    <d2l-list-item-content>
+      <div>Expandable item #1</div>
+      <div slot="supporting-info">Supporting information</div>
+    </d2l-list-item-content>
+    <d2l-list grid style="width: 100%" slot="nested">
+      <d2l-list-item selectable key="nested-1" label="Nested 1">
+        <d2l-list-item-content><div>Nested item #1</div></d2l-list-item-content>
+      </d2l-list-item>
+      <d2l-list-item selectable key="nested-2" label="Nested 2">
+        <d2l-list-item-content><div>Nested item #2</div></d2l-list-item-content>
+      </d2l-list-item>
+    </d2l-list>
+  </d2l-list-item>
+  <d2l-list-item selectable expandable expanded key="expand-2" label="Expandable item #2">
+    <d2l-list-item-content>
+      <div>Expandable Item #2</div>
+      <div slot="supporting-info">Supporting information</div>
+    </d2l-list-item-content>
+    <d2l-list grid style="width: 100%" slot="nested">
+      <d2l-list-item selectable key="nested-3" label="Nested 3">
+        <d2l-list-item-content><div>Nested item #3</div></d2l-list-item-content>
+      </d2l-list-item>
+      <d2l-list-item selectable key="nested-4" label="Nested 4">
+        <d2l-list-item-content><div>Nested item #4</div></d2l-list-item-content>
+      </d2l-list-item>
+    </d2l-list>
+  </d2l-list-item>
+  <d2l-list-item selectable key="expand-3" label="Item with no children">
+    <d2l-list-item-content>
+      <div>Item with no children</div>
+      <div slot="supporting-info">Supporting information</div>
+    </d2l-list-item-content>
+  </d2l-list-item>
+</d2l-list>
+```
+
 ## Pageable Lists
 
 Load-More paging functionality can be implemented in lists by placing a `d2l-pager-load-more` in `d2l-list`'s `pager` slot. The consumer must handle the `d2l-pager-load-more` event by loading more items, updating the pager state, and signalling completion by calling `complete()` on the event detail. Focus will be automatically moved on the first new item once complete. See [Paging](../../components/paging) for more details.
@@ -347,6 +408,8 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `drag-target-handle-only` | Boolean | Make the drag target the drag handle only. |
 | `drop-nested` | Boolean | Whether nested items can be dropped on this item |
 | `drop-text` | String | Text to drag and drop |
+| `expandable` | Boolean | Whether or not to show the expand/collapse toggle. |
+| `expanded` | Boolean | Whether the item is expanded. Requires `expandable` to be set. |
 | `href` | String | Address of item link if navigable |
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
@@ -366,6 +429,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 ### Events
 
 - `d2l-list-item-link-click`: dispatched when the item's primary link action is clicked
+- `d2l-list-item-expand-collapse-toggled`: dispatched when the item's expand/collapse toggle is clicked
 <!-- docs: end hidden content -->
 
 ### Breakpoints Property
@@ -417,6 +481,8 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 | `drag-handle-text` | String | 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. |
 | `drop-nested` | Boolean | Whether nested items can be dropped on this item |
 | `drop-text` | String | Text to drag and drop |
+| `expandable` | Boolean | Whether or not to show the expand/collapse toggle. |
+| `expanded` | Boolean | Whether the item is expanded. Requires `expandable` to be set. |
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
@@ -428,6 +494,7 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 ### Events
 
 - `d2l-list-item-button-click`: dispatched when the item's primary button action is clicked
+- `d2l-list-item-expand-collapse-toggled`: dispatched when the item's expand/collapse toggle is clicked
 <!-- docs: end hidden content -->
 
 ## ListItemMixin

package/components/list/demo/demo-list-nested-lazy-load.js

@@ -0,0 +1,133 @@
+import '../list-item-content.js';
+import '../list-item.js';
+import '../list.js';
+import '../list-header.js';
+import '../../selection/selection-action.js';
+import { html, LitElement, nothing } from 'lit';
+import { getUniqueId } from '../../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+class ListDemoNestedLazyLoad extends LitElement {
+
+	static get properties() {
+		return {
+			_items: { state: true },
+		};
+	}
+
+	constructor() {
+		super();
+		this._items = new Map();
+		this._items.set('a', {
+			key: 'a',
+			primaryText: 'Item 1: Click Expand To Lazy Load Item',
+			items: [],
+			expandable: true,
+			selected: false
+		});
+		this._items.set('b', {
+			key: 'b',
+			primaryText: 'Item 2: Click Expand To Lazy Load Item',
+			items: [],
+			expandable: true,
+			selected: false
+		});
+	}
+
+	render() {
+		return html`
+			<div>
+				${this._renderList(this._items.values(), false, true)}
+			</div>
+		`;
+	}
+
+	_handleListItemToggle(e) {
+		const listItem = e.target;
+		const itemKey = e.target.key;
+		const previouslyCollapsed = !e.target.expanded;
+		const itemToAddChildren = this._items.get(itemKey);
+		if (!previouslyCollapsed && itemToAddChildren.items.length === 0) {
+			if (listItem.selected) {
+				itemToAddChildren.selected = true;
+			}
+			const uniqueId = getUniqueId();
+			itemToAddChildren.items = [{
+				key: uniqueId,
+				primaryText: `Lazy Loaded Item ${uniqueId}`,
+				items: [],
+				expandable: false,
+				selected: listItem.selected
+			}];
+
+			setTimeout(() => {
+				// fake lazy loading items
+				this._items.set(itemKey, itemToAddChildren);
+				this.requestUpdate();
+			}, 2000);
+		}
+	}
+
+	_renderIllustration(item) {
+		if (!item.imgSrc) {
+			return nothing;
+		}
+		return html`<img slot="illustration" src="${item.imgSrc}">`;
+	}
+
+	_renderItemContent(item) {
+		return html`
+			<d2l-list-item-content>
+				<div>${item.primaryText}</div>
+				<div slot="supporting-info">${item.supportingText}</div>
+			</d2l-list-item-content>`;
+	}
+
+	_renderList(items, nested, includeHeader = false) {
+		return html`
+			<d2l-list grid drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
+				${ includeHeader ? this._renderListHeader() : nothing }
+				${repeat(items, item => item.key, item => html`
+					${this._renderListItem(item)}
+				`)}
+			</d2l-list>
+		`;
+	}
+
+	_renderListHeader() {
+		return html`
+			<d2l-list-header slot="header">
+				<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
+				<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
+			</d2l-list-header>
+		`;
+	}
+
+	_renderListItem(item) {
+		return html`
+			<d2l-list-item
+				draggable
+				selectable
+				?selected="${item.selected}"
+				drag-handle-text="${item.primaryText}"
+				key="${item.key}"
+				label="${item.primaryText}"
+				?expandable="${item.expandable}"
+				@d2l-list-item-expand-collapse-toggled="${this._handleListItemToggle}">
+					${this._renderIllustration(item)}
+					${this._renderItemContent(item)}
+					${this._renderNestedList(item)}
+			</d2l-list-item>
+		`;
+	}
+
+	_renderNestedList(item) {
+		if (item?.items?.length <= 0) {
+			return nothing;
+		}
+		return this._renderList(item.items, true);
+	}
+}
+
+customElements.define('d2l-demo-list-nested-lazy-load', ListDemoNestedLazyLoad);

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

@@ -0,0 +1,279 @@
+import '../list-item-content.js';
+import '../list-item.js';
+import '../list-item-button.js';
+import '../list.js';
+import '../../dropdown/dropdown-menu.js';
+import '../../dropdown/dropdown-more.js';
+import '../../menu/menu.js';
+import '../../menu/menu-item.js';
+import '../../paging/pager-load-more.js';
+import '../list-header.js';
+import '../../selection/selection-action.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { listDemos } from './list-demo-scenarios.js';
+import { moveLocations } from '../list-item-drag-drop-mixin.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+class ListDemoNested extends LitElement {
+
+	static get properties() {
+		return {
+			demoItemKey: { type: String, attribute: 'demo-item-key' },
+			draggable: { type: Boolean },
+			selectable: { type: Boolean },
+			disableExpandFeature: { type: Boolean, attribute: 'disable-expand-feature' },
+			expanded: { type: Boolean },
+			includeSecondaryActions: { type: Boolean, attribute: 'include-secondary-actions' },
+			includeListHeader: { type: Boolean, attribute: 'include-list-header' },
+			includeActionHref: { type: Boolean, attribute: 'include-action-href' },
+			useButtonListItem: { type: Boolean, attribute: 'use-button-item' },
+			showLoadMore: { type: Boolean, attribute: 'show-load-more' },
+			noPrimaryAction: { type: Boolean, attribute: 'no-primary-action' },
+			disableListGrid: { type: Boolean, attribute: 'disable-list-grid' },
+			_items: { state: true },
+			_loadedItems: { state: true },
+			_remainingItemCount: { state: true },
+			_lastItemLoadedIndex: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [
+			css`
+				.secondary-actions {
+					padding-right: 6px;
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+		this._items = [];
+		this._loadedItems = [];
+		this._remainingItemCount = 0;
+		this._lastItemLoadedIndex = 1;
+		this._pageSize = 1;
+	}
+
+	render() {
+		return html`
+			<div @d2l-list-items-move="${this._handleListItemsMove}">
+				${this._renderList(this._loadedItems, false, this.includeListHeader, this.showLoadMore)}
+			</div>
+		`;
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('demoItemKey')) {
+			this._items = listDemos[this.demoItemKey] ?? [];
+			this._loadedItems = this._items;
+		}
+		if (changedProperties.has('_items') || changedProperties.has('demoItemKey') || changedProperties.has('showLoadMore') || changedProperties.has('_lastItemLoadedIndex')) {
+			this._loadedItems = this.showLoadMore ? this._items.slice(0, this._lastItemLoadedIndex + 1) : this._items;
+			this._remainingItemCount = this.showLoadMore ? this._items.length - this._loadedItems.length : 0;
+		}
+	}
+
+	_handleButtonClick(e) {
+		// eslint-disable-next-line no-console
+		console.log('d2l-list-item-button clicked!', e);
+	}
+
+	async _handleListItemsMove(e) {
+
+		const sourceListItems = e.detail.sourceItems;
+		const target = e.detail.target;
+
+		// helper that gets the array containing item data, the item data, and the index within the array
+		const getItemInfo = (items, key) => {
+			for (let i = 0; i < items.length; i++) {
+				if (items[i].key === key) {
+					return { owner: items, item: items[i], index: i };
+				}
+				if (items[i].items && items[i].items.length > 0) {
+					const tempItemData = getItemInfo(items[i].items, key);
+					if (tempItemData) return tempItemData;
+				}
+			}
+		};
+
+		const dataToMove = [];
+
+		// remove data elements from original locations
+		sourceListItems.forEach(sourceListItem => {
+			const info = getItemInfo(this._items, sourceListItem.key);
+			if (info?.owner) {
+				info.owner.splice(info.index, 1);
+			}
+			if (info?.item) {
+				dataToMove.push(info.item);
+			}
+		});
+
+		// append data elements to new location
+		const targetInfo = getItemInfo(this._items, target.item.key);
+		let targetItems;
+		let targetIndex;
+		if (target.location === moveLocations.nest) {
+			if (!targetInfo.item.items) targetInfo.item.items = [];
+			targetItems = targetInfo.item.items;
+			targetIndex = targetItems.length;
+		} else {
+			targetItems = targetInfo?.owner;
+			if (!targetItems) return;
+			if (target.location === moveLocations.above) targetIndex = targetInfo.index;
+			else if (target.location === moveLocations.below) targetIndex = targetInfo.index + 1;
+		}
+		for (let i = dataToMove.length - 1; i >= 0; i--) {
+			targetItems.splice(targetIndex, 0, dataToMove[i]);
+		}
+
+		this.requestUpdate();
+		await this.updateComplete;
+
+		if (e.detail.keyboardActive) {
+			setTimeout(() => {
+				if (!this.shadowRoot) return;
+				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
+				newItem.activateDragHandle();
+			});
+		}
+
+	}
+
+	_handlePagerLoadMore(e) {
+		// mock delay consumers might have
+		setTimeout(() => {
+			this._lastItemLoadedIndex += this._pageSize;
+			e.detail.complete();
+		}, 1000);
+	}
+
+	_renderIllustration(item) {
+		if (!item.imgSrc) {
+			return nothing;
+		}
+		return html`<img slot="illustration" src="${item.imgSrc}">`;
+	}
+
+	_renderItemContent(item) {
+		return html`
+			<d2l-list-item-content>
+				<div>${item.primaryText}</div>
+				<div slot="supporting-info">${item.supportingText}</div>
+			</d2l-list-item-content>`;
+	}
+
+	_renderList(items, nested, includeHeader = false, showLoadMore = false) {
+		return html`
+			<d2l-list ?grid="${!this.disableListGrid}" drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
+				${ includeHeader ? this._renderListHeader() : nothing }
+				${repeat(items, item => item.key, item => html`
+					${this._renderListItem(item)}
+					${this._renderListItemButton(item)}
+				`)}
+				${ showLoadMore ? this._renderShowLoadMore() : nothing }
+			</d2l-list>
+		`;
+	}
+
+	_renderListHeader() {
+		return html`
+			<d2l-list-header slot="header">
+				<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
+				<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
+			</d2l-list-header>
+		`;
+	}
+
+	_renderListItem(item) {
+		if (this.useButtonListItem) {
+			return nothing;
+		}
+		const hasChildren = item?.items?.length > 0;
+		return html`
+			<d2l-list-item
+				action-href="${this.includeActionHref ? 'http://www.d2l.com' : ''}"
+				?draggable="${this.draggable}"
+				drag-handle-text="${item.primaryText}"
+				?drop-nested="${item.dropNested}"
+				key="${item.key}"
+				label="${item.primaryText}"
+				?selectable="${this.selectable}"
+				?expandable="${this.disableExpandFeature ? false : hasChildren}"
+				?expanded="${this.expanded}"
+				?no-primary-action="${this.noPrimaryAction}">
+					${this._renderIllustration(item)}
+					${this._renderItemContent(item)}
+					${this._renderSecondaryActions()}
+					${this._renderNestedList(item)}
+			</d2l-list-item>
+		`;
+	}
+
+	_renderListItemButton(item) {
+		if (!this.useButtonListItem) {
+			return nothing;
+		}
+		const hasChildren = item?.items?.length > 0;
+		return html`
+			<d2l-list-item-button
+				?draggable="${this.draggable}"
+				drag-handle-text="${item.primaryText}"
+				?drop-nested="${item.dropNested}"
+				key="${item.key}"
+				label="${item.primaryText}"
+				?selectable="${this.selectable}"
+				?expandable="${this.disableExpandFeature ? false : hasChildren}"
+				?expanded="${this.expanded}"
+				@d2l-list-item-button-click="${this._handleButtonClick}">
+					${this._renderIllustration(item)}
+					${this._renderItemContent(item)}
+					${this._renderSecondaryActions()}
+					${this._renderNestedList(item)}
+			</d2l-list-item-button>
+		`;
+	}
+
+	_renderNestedList(item) {
+		if (item?.items?.length <= 0) {
+			return nothing;
+		}
+		return this._renderList(item.items, true);
+	}
+
+	_renderSecondaryActions() {
+		if (!this.includeSecondaryActions) {
+			return nothing;
+		}
+		return html`
+			<div slot="actions" class="secondary-actions">
+				<d2l-dropdown-more text="Open!">
+					<d2l-dropdown-menu>
+						<d2l-menu label="More Actions">
+							<d2l-menu-item text="Action 1"></d2l-menu-item>
+							<d2l-menu-item text="Action 2"></d2l-menu-item>
+						</d2l-menu>
+					</d2l-dropdown-menu>
+				</d2l-dropdown-more>
+			</div>
+		`;
+	}
+
+	_renderShowLoadMore() {
+		return html`
+			<d2l-pager-load-more slot="pager"
+				@d2l-pager-load-more="${this._handlePagerLoadMore}"
+				?has-more="${this._lastItemLoadedIndex < this._items.length - 1}"
+				item-count="${this._items.length}"
+				page-size="${this._remainingItemCount < this._pageSize ? this._remainingItemCount : this._pageSize}">
+			</d2l-pager-load-more>
+		`;
+	}
+
+}
+
+customElements.define('d2l-demo-list-nested', ListDemoNested);