@brightspace-ui/core 1.210.1 → 1.213.1

package/README.md

@@ -55,6 +55,8 @@ npm install @brightspace-ui/core
   * [Tooltip](components/tooltip/): tooltip components
   * [Typography](components/typography/): typography styles and components
   * [Validation](components/validation/): plugin custom validation logic to native and custom form elements
+* Controllers
+  * [Subscriber](controllers/subscriber/): for managing a registry of subscribers in a many-to-many relationship
 * Directives
   * [Animate](directives/animate/): animate showing, hiding and removal of elements
 * Helpers

package/components/filter/filter.js

@@ -212,6 +212,25 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		`;
 	}
 
+	focus() {
+		const opener = this.shadowRoot.querySelector('d2l-dropdown-button-subtle');
+		if (opener) opener.focus();
+	}
+
+	requestFilterClearAll() {
+		this._handleClearAll();
+	}
+
+	requestFilterValueClear(keyObject) {
+		const dimension = this._dimensions.find(dimension => dimension.key === keyObject.dimension);
+
+		switch (dimension.type) {
+			case 'd2l-filter-dimension-set':
+				this._performChangeSetDimension(dimension, keyObject.value, false);
+				break;
+		}
+	}
+
 	_buildDimension(dimension, singleDimension) {
 		let dimensionHTML;
 		switch (dimension.type) {
@@ -433,20 +452,9 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		const dimensionKey = e.target.id.slice(SET_DIMENSION_ID_PREFIX.length);
 		const dimension = this._dimensions.find(dimension => dimension.key === dimensionKey);
 		const valueKey = e.detail.key;
-		const value = dimension.values.find(value => value.key === valueKey);
 		const selected = e.detail.selected;
 
-		value.selected = selected;
-
-		if (selected) {
-			dimension.appliedCount++;
-			this._totalAppliedCount++;
-		} else {
-			dimension.appliedCount--;
-			this._totalAppliedCount--;
-		}
-
-		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
+		this._performChangeSetDimension(dimension, valueKey, selected);
 	}
 
 	_handleClear() {
@@ -621,6 +629,22 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		return false;
 	}
 
+	_performChangeSetDimension(dimension, valueKey, selected) {
+		const value = dimension.values.find(value => value.key === valueKey);
+		if (value.selected === selected) return;
+		value.selected = selected;
+
+		if (selected) {
+			dimension.appliedCount++;
+			this._totalAppliedCount++;
+		} else {
+			dimension.appliedCount--;
+			this._totalAppliedCount--;
+		}
+
+		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
+	}
+
 	_performDimensionClear(dimension) {
 		this._totalAppliedCount = this._totalAppliedCount - dimension.appliedCount;
 		dimension.appliedCount = 0;

package/components/html-block/html-block.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
 import { css, LitElement } from 'lit-element/lit-element.js';
-import { HtmlAttributeObserverController } from '../../helpers/htmlAttributeObserverController.js';
+import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
 import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';
 

package/components/list/demo/{list-demo-drag-and-drop-usage.js → list-drag-and-drop-position.js}

@@ -5,7 +5,8 @@ import { html, LitElement } from 'lit-element/lit-element.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 
-class ListDemoDragAndDropUsage extends LitElement {
+class ListDemoDragAndDropPosition extends LitElement {
+
 	static get properties() {
 		return {
 			list: { type: Array },
@@ -92,4 +93,4 @@ class ListDemoDragAndDropUsage extends LitElement {
 	}
 }
 
-customElements.define('d2l-list-demo-drag-and-drop-usage', ListDemoDragAndDropUsage);
+customElements.define('d2l-demo-list-drag-and-drop-position', ListDemoDragAndDropPosition);

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

@@ -6,45 +6,38 @@
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 	<script type="module">
 		import '../../demo/demo-page.js';
-		import './list-demo-drag-and-drop-usage.js';
+		import './list-drag-and-drop-position.js';
+		import './list-drag-and-drop.js';
 	</script>
 </head>
 <body unresolved>
 
 	<d2l-demo-page page-title="d2l-list (with drag & drop)">
 
-		<h2>Draggable</h2>
+		<h2>Position Change Event</h2>
 
 		<d2l-demo-snippet>
 			<template>
-				<d2l-list-demo-drag-and-drop-usage></d2l-list-demo-drag-and-drop-usage>
+				<d2l-demo-list-drag-and-drop-position grid selectable hrefs></d2l-demo-list-drag-and-drop-position>
 			</template>
 		</d2l-demo-snippet>
 
-		<h2>Draggable and Selectable</h2>
+		<h2>Move Event</h2>
 
 		<d2l-demo-snippet>
 			<template>
-				<d2l-list-demo-drag-and-drop-usage selectable></d2l-list-demo-drag-and-drop-usage>
+				<d2l-demo-list-drag-and-drop></d2l-demo-list-drag-and-drop>
 			</template>
 		</d2l-demo-snippet>
 
-		<h2>Draggable with Grid and Selectable</h2>
 
-		<d2l-demo-snippet>
-			<template>
-				<d2l-list-demo-drag-and-drop-usage grid selectable></d2l-list-demo-drag-and-drop-usage>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>All the Fixins (grid, draggable, selectable, hrefs)</h2>
+	</d2l-demo-page>
 
-		<d2l-demo-snippet>
-			<template>
-				<d2l-list-demo-drag-and-drop-usage grid selectable hrefs></d2l-list-demo-drag-and-drop-usage>
-			</template>
-		</d2l-demo-snippet>
+	<script>
+		document.body.addEventListener('d2l-list-items-move', e => {
+			console.log('d2l-list-items-move', e.detail);
+		});
+	</script>
 
-	</d2l-demo-page>
 </body>
 </html>

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

@@ -0,0 +1,171 @@
+import '../list-item-content.js';
+import '../list-item.js';
+import '../list.js';
+import { html, LitElement } from 'lit-element/lit-element.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { moveLocations } from '../list-item-drag-drop-mixin.js';
+import { repeat } from 'lit-html/directives/repeat.js';
+
+class ListDemoDragAndDrop extends LitElement {
+
+	static get properties() {
+		return {
+			items: { type: Array }
+		};
+	}
+
+	constructor() {
+		super();
+		this.items = [{
+			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',
+			items: [{
+				key: '1-1',
+				primaryText: 'Glaciation',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}, {
+				key: '1-2',
+				primaryText: 'Weathering',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}, {
+				key: '1-3',
+				primaryText: 'Volcanism',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}]
+		}, {
+			key: '2',
+			primaryText: 'Flow and Transport Through Fractured Rocks',
+			supportingText: 'Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.',
+			imgSrc: 'https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg',
+			items: [{
+				key: '2-1',
+				primaryText: 'Contaminant Transport',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}, {
+				key: '2-2',
+				primaryText: 'Modelling Flow in Fractured Media',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}]
+		}, {
+			key: '3',
+			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: '3-1',
+				primaryText: 'Carbon & Nitrogen Cycling',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}, {
+				key: '3-2',
+				primaryText: 'Wetland Engineering',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}]
+		}];
+	}
+
+	render() {
+		const renderList = (items, nested) => {
+			return html`
+				<d2l-list grid slot="${ifDefined(nested ? 'nested' : undefined)}">
+					${repeat(items, item => item.key, item => html`
+						<d2l-list-item
+							action-href="http://www.d2l.com"
+							draggable
+							drag-handle-text="${item.primaryText}"
+							drop-nested
+							key="${item.key}"
+							label="${item.primaryText}"
+							selectable>
+								${nested ? null : html`<img slot="illustration" src="${item.imgSrc}">`}
+								<d2l-list-item-content>
+									<div>${item.primaryText}</div>
+									<div slot="supporting-info">${item.supportingText}</div>
+								</d2l-list-item-content>
+								${item.items.length > 0 ? renderList(item.items, true) : null}
+						</d2l-list-item>
+					`)}
+				</d2l-list>
+			`;
+		};
+
+		return html`
+			<div @d2l-list-items-move="${this._handleListItemsMove}">
+				${renderList(this.items, false)}
+			</div>
+		`;
+	}
+
+	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);
+			info.owner.splice(info.index, 1);
+			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 (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]);
+		}
+
+		await this.requestUpdate();
+
+		if (e.detail.keyboardActive) {
+			requestAnimationFrame(() => {
+				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
+				newItem.activateDragHandle();
+			});
+		}
+
+	}
+
+}
+
+customElements.define('d2l-demo-list-drag-and-drop', ListDemoDragAndDrop);

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

@@ -113,16 +113,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		}));
 	}
 
-	_getNestedList() {
-		const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
-		let nestedNodes = nestedSlot.assignedNodes();
-		if (nestedNodes.length === 0) {
-			nestedNodes = [...nestedSlot.childNodes];
-		}
-
-		return nestedNodes.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-LIST'));
-	}
-
 	_onCheckboxActionClick(event) {
 		event.preventDefault();
 		if (this.disabled) return;
@@ -140,6 +130,10 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		}
 	}
 
+	_onNestedSlotChange() {
+		this._updateNestedSelectionProvider();
+	}
+
 	_onSelectionProviderConnected(e) {
 		e.stopPropagation();
 		this._updateNestedSelectionProvider();