@brightspace-ui/core 2.133.0 → 2.134.0

package/components/filter/demo/filter-load-more-demo.js

@@ -0,0 +1,161 @@
+import '../filter.js';
+import '../filter-dimension-set.js';
+import '../filter-dimension-set-value.js';
+import { html, LitElement } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+const FullData = [
+	{
+		key: 'course',
+		text: 'Course',
+		values: [
+			{ key: 'art', selected:false, text: 'Art' },
+			{ key: 'astronomy', selected:false, text: 'Astronomy' },
+			{ key: 'biology', selected:true, text: 'Biology' },
+			{ key: 'chemistry', selected:false, text: 'Chemistry' },
+			{ key: 'drama', selected:false, text: 'Drama' },
+			{ key: 'english', selected:false, text: 'English' },
+			{ key: 'how-to', selected:false, text: 'How To Write a How To Article With a Flashy Title' },
+			{ key: 'math', selected:false, text: 'Math' },
+			{ key: 'physics', selected:false, text: 'Physics' },
+			{ key: 'stats', selected:false, text: 'Statistics' },
+			{ key: 'writerscraft', selected:true, text: 'Writer\'s Craft' },
+		],
+		initialCount: 6
+	},
+	{
+		key: 'role',
+		text: 'Role',
+		values: [
+			{ key: 'admin', selected:false, text: 'Admin' },
+			{ key: 'instructor', selected:false, text: 'Instructor' },
+			{ key: 'student', selected:false, text: 'Student' }
+		],
+		initialCount: 2
+	}
+];
+
+class FilterLoadMoreDemo extends LitElement {
+
+	constructor() {
+		super();
+		const dimensions = [];
+		for (const dim of FullData) {
+			const values =  {};
+			let selectedCount = 0;
+			for (const v of dim.values)  {
+				if (!v.selected) continue;
+				values[v.key] = { ...v };
+				selectedCount++;
+			}
+			const data = {
+				key: dim.key,
+				text: dim.text,
+				values
+			};
+			this._addKeys(data, dim.initialCount - selectedCount);
+			dimensions.push(data);
+		}
+		this._dimensions = dimensions;
+	}
+
+	render() {
+		return html`
+			<d2l-filter 
+				@d2l-filter-change="${this._handleFilterChange}"
+				@d2l-filter-dimension-load-more=${this._handleLoadMore}
+				@d2l-filter-dimension-search=${this._handleSearch}>
+				${repeat(this._dimensions, dimension => dimension.key, dimension => this._renderDimensionSet(dimension))}
+			</d2l-filter>
+		`;
+	}
+
+	_addKeys(dimension, addCount, searchValue = '') {
+		const dimData = FullData.find(dim => dim.key === dimension.key);
+
+		const keys = [];
+		for (const valKey in dimension.values) {
+			if (this._textIsInSearch(searchValue, dimension.values[valKey].text)) {
+				keys.push(valKey);
+			}
+		}
+		const total = keys.length + addCount;
+		dimension.hasMore = false;
+		for (const v of dimData.values) {
+			if (v.key in dimension.values || !this._textIsInSearch(searchValue, v.text)) continue;
+			if (total <= keys.length) {
+				dimension.hasMore = true;
+				break;
+			}
+			dimension.values[v.key] = { ...v };
+			keys.push(v.key);
+		}
+		return keys;
+	}
+
+	_handleFilterChange(e) {
+		e.detail.dimensions.forEach(dimension => {
+			const localData = Object.values(this._dimensions.find(dim => dim.key === dimension.dimensionKey).values);
+			const FullDataValues = FullData.find(dim => dim.key === dimension.dimensionKey).values;
+			if (dimension.cleared) {
+				localData.forEach(value => value.selected = false);
+				FullDataValues.forEach(value => value.selected = false);
+			} else {
+				dimension.changes.forEach(change => {
+					localData.find(value => value.key === change.valueKey).selected = change.selected;
+					FullDataValues.find(value => value.key === change.valueKey).selected = change.selected;
+				});
+			}
+		});
+		this.requestUpdate();
+	}
+
+	async _handleLoadMore(e) {
+		const dimensionKey = e.detail.key;
+		const dimension = this._dimensions.find(dim => dim.key === dimensionKey);
+
+		const keysToDisplay = this._addKeys(dimension, 2, e.detail.value);
+		this.requestUpdate();
+		await this.updateComplete;
+		e.detail.loadMoreCompleteCallback({ keysToDisplay });
+	}
+
+	async _handleSearch(e) {
+		const dimensionKey = e.detail.key;
+		const dimension = this._dimensions.find(dim => dim.key === dimensionKey);
+		const dimData = FullData.find(dim => dim.key === dimensionKey);
+
+		let selectedCount = 0;
+		for (const valKey in dimension.values) {
+			if (!dimension.values[valKey].selected) delete dimension.values[valKey];
+			else if (this._textIsInSearch(e.detail.value, dimension.values[valKey].text)) selectedCount++;
+		}
+		const keysToDisplay = this._addKeys(dimension, dimData.initialCount - selectedCount, e.detail.value);
+
+		this.requestUpdate();
+		await this.updateComplete;
+		e.detail.searchCompleteCallback({ keysToDisplay });
+	}
+
+	_renderDimensionSet(dimension) {
+		const { values, key, text, hasMore } = dimension;
+
+		return html`
+		<d2l-filter-dimension-set key="${key}" text="${text}" ?has-more="${hasMore}" search-type="manual">
+			${repeat(Object.values(values).sort((a, b) => (a.text < b.text ? -1 : 0)), value => value.key, value => html`
+				<d2l-filter-dimension-set-value
+					key="${value.key}"
+					text="${value.text}"
+					?selected=${value.selected}>
+				</d2l-filter-dimension-set-value>
+			`)}
+		</d2l-filter-dimension-set>`;
+	}
+
+	_textIsInSearch(searchValue, text) {
+		return searchValue === '' || text.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+	}
+
+}
+customElements.define('d2l-filter-load-more-demo', FilterLoadMoreDemo);
+

package/components/filter/demo/filter.html

@@ -11,6 +11,7 @@
 		import '../../filter/filter-dimension-set-empty-state.js';
 		import '../../filter/filter-dimension-set-value.js';
 		import './filter-search-demo.js';
+		import './filter-load-more-demo.js';
 	</script>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
     <meta charset="UTF-8">
@@ -141,6 +142,13 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Load More</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter-load-more-demo></d2l-filter-load-more-demo>
+			</template>
+		</d2l-demo-snippet>
+
 		<h2>Search</h2>
 		<d2l-demo-snippet>
 			<template>

package/components/filter/filter-dimension-set.js

@@ -31,6 +31,11 @@ class FilterDimensionSet extends LitElement {
 			 * @type {boolean}
 			 */
 			loading: { type: Boolean },
+			/**
+			 * Whether the dimension has more values to load
+			 * @type {boolean}
+			 */
+			hasMore: { type: Boolean, attribute: 'has-more' },
 			/**
 			 * Whether to hide the search input, perform a simple text search, or fire an event on search
 			 * @type {'none'|'automatic'|'manual'}
@@ -69,6 +74,7 @@ class FilterDimensionSet extends LitElement {
 		this.headerText = '';
 		this.introductoryText = '';
 		this.loading = false;
+		this.hasMore = false;
 		this.searchType = 'automatic';
 		this.selectAll = false;
 		this.selectedFirst = false;
@@ -100,7 +106,7 @@ class FilterDimensionSet extends LitElement {
 		changedProperties.forEach((oldValue, prop) => {
 			if (oldValue === undefined) return;
 
-			if (prop === 'text' || prop === 'loading') {
+			if (prop === 'text' || prop === 'loading' || prop === 'hasMore' || prop === 'selectedFirst') {
 				changes.set(prop, this[prop]);
 			}
 		});
@@ -132,6 +138,16 @@ class FilterDimensionSet extends LitElement {
 		return values;
 	}
 
+	willUpdate(changedProperties) {
+		if (changedProperties.has('hasMore') && this.hasMore) {
+			if (this.searchType !== 'manual') {
+				console.warn('Paging requires search type set to manual.');
+				this.hasMore = false;
+			}
+			else this.selectedFirst = true;
+		}
+	}
+
 	_dispatchDataChangeEvent(eventDetail) {
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-data-change', {

package/components/filter/filter.js

@@ -15,6 +15,7 @@ import '../list/list-item.js';
 import '../loading-spinner/loading-spinner.js';
 import '../menu/menu.js';
 import '../menu/menu-item.js';
+import '../paging/pager-load-more.js';
 import '../selection/selection-select-all.js';
 import '../selection/selection-summary.js';
 
@@ -42,6 +43,7 @@ const SET_DIMENSION_ID_PREFIX = 'list-';
  * @fires d2l-filter-dimension-empty-state-action - Dispatched when an empty state action button is clicked
  * @fires d2l-filter-dimension-first-open - Dispatched when a dimension is opened for the first time
  * @fires d2l-filter-dimension-search - Dispatched when a dimension that supports searching and has the "manual" search-type is searched
+ * @fires d2l-filter-dimension-load-more - Dispatched when a dimension load more pager clicked
  */
 class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
@@ -292,7 +294,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	requestFilterValueClear(keyObject) {
-		const dimension = this._dimensions.find(dimension => dimension.key === keyObject.dimension);
+		const dimension = this._getDimensionByKey(keyObject.dimension);
 
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':
@@ -541,6 +543,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				${selectedListItems}
 				${listHeader}
 				${listItems}
+				<d2l-pager-load-more slot="pager"
+					@d2l-pager-load-more="${this._handleDimensionLoadMore}"
+					?has-more="${dimension.hasMore}">
+				</d2l-pager-load-more>
 			</d2l-list>
 		`;
 	}
@@ -607,7 +613,23 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	_getActiveDimension() {
-		return !this._activeDimensionKey ? this._dimensions[0] : this._dimensions.find(dimension => dimension.key === this._activeDimensionKey);
+		return !this._activeDimensionKey ? this._dimensions[0] : this._getDimensionByKey(this._activeDimensionKey);
+	}
+
+	_getDimensionByKey(key) {
+		return this._dimensions.find(dimension => dimension.key === key);
+	}
+
+	_getSearchCallback(dimension) {
+		return function({ keysToDisplay = [], displayAllKeys = false } = {}) {
+			requestAnimationFrame(() => {
+				dimension.displayAllKeys = displayAllKeys;
+				dimension.searchKeysToDisplay = keysToDisplay;
+				this._performDimensionSearch(dimension);
+				dimension.loading = false;
+				this.requestUpdate();
+			});
+		}.bind(this);
 	}
 
 	_getSlottedNodes(slot) {
@@ -618,7 +640,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 	_handleChangeSetDimension(e) {
 		const dimensionKey = e.target.id.slice(SET_DIMENSION_ID_PREFIX.length);
-		const dimension = this._dimensions.find(dimension => dimension.key === dimensionKey);
+		const dimension = this._getDimensionByKey(dimensionKey);
 		const valueKey = e.detail.key;
 		const selected = e.detail.selected;
 
@@ -652,7 +674,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 	_handleDimensionDataChange(e) {
 		const changes = e.detail.changes;
-		const dimension = this._dimensions.find(dimension => dimension.key === e.detail.dimensionKey);
+		const dimension = this._getDimensionByKey(e.detail.dimensionKey);
 		const value = e.detail.valueKey && dimension.values.find(value => value.key === e.detail.valueKey);
 		const toUpdate = e.detail.valueKey ? value : dimension;
 
@@ -710,6 +732,25 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._activeDimensionKey = null;
 	}
 
+	_handleDimensionLoadMore(e) {
+		const dimensionKey = e.target.parentNode.id.slice(SET_DIMENSION_ID_PREFIX.length);
+		const dimension = this._getDimensionByKey(dimensionKey);
+		const applySearch = this._getSearchCallback(dimension);
+
+		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-load-more', {
+			detail: {
+				key: dimensionKey,
+				value: dimension.searchValue,
+				loadMoreCompleteCallback: (options) => {
+					applySearch(options);
+					e.detail.complete();
+				}
+			},
+			bubbles: true,
+			composed: false
+		}));
+	}
+
 	_handleDimensionShowComplete() {
 		const returnButton = this.shadowRoot
 			&& this.shadowRoot.querySelector('d2l-button-icon[icon="tier1:chevron-left"]');
@@ -718,7 +759,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 	_handleDimensionShowStart(e) {
 		this._activeDimensionKey = e.detail.sourceView.getAttribute('data-key');
-		const dimension = this._dimensions.find(dimension => dimension.key === this._activeDimensionKey);
+		const dimension = this._getDimensionByKey(this._activeDimensionKey);
 		if (dimension.introductoryText) announce(dimension.introductoryText);
 		if (dimension.selectedFirst) this._updateDimensionShouldBubble(dimension);
 		this._dispatchDimensionFirstOpenEvent(dimension);
@@ -753,9 +794,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const searchValue = e.detail.value.trim();
 		dimension.searchValue = searchValue;
 
-		if (dimension.selectedFirst) {
-			this._updateDimensionShouldBubble(dimension);
-		}
 		this._search(dimension);
 	}
 
@@ -775,6 +813,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				case 'd2l-filter-dimension-set': {
 					info.headerText = dimension.headerText;
 					info.introductoryText = dimension.introductoryText;
+					info.hasMore = dimension.hasMore;
 					info.searchType = dimension.searchType;
 					info.searchValue = '';
 					info.selectedFirst = dimension.selectedFirst;
@@ -839,6 +878,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	_performDimensionSearch(dimension) {
+		if (dimension.selectedFirst) this._updateDimensionShouldBubble(dimension);
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':
 				dimension.values.forEach(value => {
@@ -882,15 +922,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				detail: {
 					key: dimension.key,
 					value: dimension.searchValue,
-					searchCompleteCallback: function({ keysToDisplay = [], displayAllKeys = false } = {}) {
-						requestAnimationFrame(() => {
-							dimension.displayAllKeys = displayAllKeys;
-							dimension.searchKeysToDisplay = keysToDisplay;
-							this._performDimensionSearch(dimension);
-							dimension.loading = false;
-							this.requestUpdate();
-						});
-					}.bind(this)
+					searchCompleteCallback: this._getSearchCallback(dimension)
 				}
 			}));
 		}

package/custom-elements.json

@@ -3669,6 +3669,10 @@
         }
       ]
     },
+    {
+      "name": "d2l-filter-load-more-demo",
+      "path": "./components/filter/demo/filter-load-more-demo.js"
+    },
     {
       "name": "d2l-filter-search-demo",
       "path": "./components/filter/demo/filter-search-demo.js"
@@ -3819,6 +3823,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "has-more",
+          "description": "Whether the dimension has more values to load",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "search-type",
           "description": "Whether to hide the search input, perform a simple text search, or fire an event on search",
@@ -3884,6 +3894,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "hasMore",
+          "attribute": "has-more",
+          "description": "Whether the dimension has more values to load",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "searchType",
           "attribute": "search-type",
@@ -4102,6 +4119,10 @@
         {
           "name": "d2l-filter-dimension-search",
           "description": "Dispatched when a dimension that supports searching and has the \"manual\" search-type is searched"
+        },
+        {
+          "name": "d2l-filter-dimension-load-more",
+          "description": "Dispatched when a dimension load more pager clicked"
         }
       ],
       "slots": [

package/package.json

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