@brightspace-ui/core 3.288.3 → 3.290.0

package/components/filter/README.md

@@ -360,7 +360,8 @@ e.detail.loadMoreCompleteCallback({ displayAllKeys: true });
 ### Selection and manual search/paging
 
 The filter component depends entirely on the consumer to include the selected filter values in order for the selected counts and `d2l-filter-tags` to display the correct values. Ideally, all values should be loaded into the dimensions and the event callbacks should be leveraged to set the visibility on those values. However, in the cases where this is not possible and new values are being added/removed manually from the dimension, then selection should be persisted. This means that selected items should always be loaded and included in the dimension and they should not be removed in order to maintain the functionality of counts and filter tags.
-<!-- docs: demo -->
+
+<!-- docs: demo align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/demo/filter-load-more-demo.js'

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

@@ -0,0 +1,182 @@
+import '../filter.js';
+import '../filter-dimension-set.js';
+import '../filter-dimension-set-value.js';
+import '../filter-overflow-group.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' },
+		],
+		loadCount: 6
+	},
+	{
+		key: 'role',
+		text: 'Role',
+		values: [
+			{ key: 'admin', selected:false, text: 'Admin' },
+			{ key: 'instructor', selected:false, text: 'Instructor' },
+			{ key: 'student', selected:false, text: 'Student' }
+		],
+		loadCount: 2
+	},
+	{
+		key: 'dep',
+		text: 'Department',
+		values: [
+			{ key: 'english', selected:false, text: 'English' },
+			{ key: 'spanish', selected:false, text: 'Spanish' },
+			{ key: 'science', selected:false, text: 'Science' }
+		],
+		loadCount: 2
+	},
+	{
+		key: 'grad',
+		text: 'Grade Level',
+		values: [
+			{ key: '1', selected:false, text: '1st Grade' },
+			{ key: '2', selected:false, text: '2nd Grade' },
+			{ key: '3', selected:false, text: '3rd Grade' }
+		],
+		loadCount: 2
+	}
+	,
+	{
+		key: 'city',
+		text: 'City',
+		values: [
+			{ key: '1', selected:false, text: '1st City' },
+			{ key: '2', selected:false, text: '2nd City' },
+			{ key: '3', selected:false, text: '3rd City' }
+		],
+		loadCount: 2
+	}
+];
+
+class FilterLoadMoreDemo extends LitElement {
+
+	static properties = {
+		opened: { type: Boolean, reflect: true },
+		useOverflowGroup: { type: Boolean, attribute: 'use-overflow-group' }
+	};
+
+	constructor() {
+		super();
+		this._dimensions = FullData.map(dim => ({ ...dim }));
+	}
+
+	render() {
+		if (this.useOverflowGroup) return html`<d2l-filter-overflow-group min-to-show="0">
+			${repeat(this._dimensions, dimension => dimension.key, dimension => html`<d2l-filter
+				@d2l-filter-change="${this._handleFilterChange}"
+				@d2l-filter-dimension-load-more=${this._handleLoadMore}
+				@d2l-filter-dimension-search=${this._handleSearch}>
+				${this._renderDimensionSet(dimension)}
+			</d2l-filter>`)}
+		</d2l-filter-overflow-group>`;
+		return html`
+			<d2l-filter
+				?opened="${this.opened}"
+				@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 = '') {
+		dimension.loadCount += addCount;
+		const keys = dimension.values.filter(val => this._textIsInSearch(searchValue, val.text));
+		const selectedKeys = [];
+		const unselectedKeys = [];
+		for (const val of keys) {
+			if (val.selected) {
+				selectedKeys.push(val.key);
+			} else {
+				unselectedKeys.push(val.key);
+			}
+		}
+
+		dimension.loadCount = Math.max(selectedKeys.length, dimension.loadCount);
+		dimension.hasMore = keys.length > dimension.loadCount;
+
+		return selectedKeys.concat(unselectedKeys).slice(0, dimension.loadCount);
+	}
+
+	_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);
+
+		dimension.loadCount = 0;
+		const keysToDisplay = this._addKeys(dimension, dimData.loadCount, 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-overflow-group.html

@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+	<script type="module">
+		import '../../demo/demo-page.js';
+		import '../../filter/filter.js';
+		import '../../filter/filter-dimension-set.js';
+		import '../../filter/filter-dimension-set-value.js';
+		import '../../filter/filter-overflow-group.js';
+		import '../../filter/filter-tags.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">
+	<style>
+		d2l-filter-tags {
+			padding-top: 1rem;
+		}
+	</style>
+</head>
+
+<body unresolved>
+
+	<d2l-demo-page page-title="d2l-filter-overflow-group">
+
+		<h2>Filter Overflow Group</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter-overflow-group>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="skill" text="Skill">
+							<d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="type" text="Type" selection-single>
+							<d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="provider" text="Semester3">
+							<d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="format" text="Format">
+							<d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="language" text="Language" selection-single>
+							<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="course" text="Course" select-all>
+							<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+						<d2l-filter-dimension-set key="duration" text="Duration">
+							<d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+						<d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
+							<d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+				</d2l-filter-overflow-group>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Filter Overflow Group with Tags (built-in)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter-overflow-group tags>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="skill" text="Skill">
+							<d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter id="filter-2">
+						<d2l-filter-dimension-set key="type" text="Type" selection-single>
+							<d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="provider" text="Semester3">
+							<d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="format" text="Format">
+							<d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="language" text="Language" select-single>
+							<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="course" text="Course" select-all>
+							<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+						<d2l-filter-dimension-set key="duration" text="Duration">
+							<d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+						<d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
+							<d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+				</d2l-filter-overflow-group>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Filter Overflow Group with Tags (external to d2l-filter-overflow-group)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter-overflow-group>
+					<d2l-filter id="filter1">
+						<d2l-filter-dimension-set key="skill" text="Skill">
+							<d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter id="filter2">
+						<d2l-filter-dimension-set key="type" text="Type" selection-single>
+							<d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter id="filter3">
+						<d2l-filter-dimension-set key="provider" text="Semester3">
+							<d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter id="filter4">
+						<d2l-filter-dimension-set key="format" text="Format">
+							<d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter id="filter5">
+						<d2l-filter-dimension-set key="language" text="Language" selection-single>
+							<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter id="filter6">
+						<d2l-filter-dimension-set key="course" text="Course" select-all>
+							<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+						<d2l-filter-dimension-set key="duration" text="Duration">
+							<d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+						<d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
+							<d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+				</d2l-filter-overflow-group>
+				<d2l-filter-tags filter-ids="filter1 filter2 filter3 filter4 filter5 filter6" label="Applied Filters:"></d2l-filter-tags>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Filter Overflow Group with Load More and Search</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter-load-more-demo use-overflow-group></d2l-filter-load-more-demo>
+			</template>
+		</d2l-demo-snippet>
+	</d2l-demo-page>
+</body>
+</html>

package/components/filter/demo/filter-search-demo.js

@@ -0,0 +1,135 @@
+import '../filter.js';
+import '../filter-dimension-set.js';
+import '../filter-dimension-set-value.js';
+import { html, LitElement } from 'lit';
+
+const initialData = [
+	{ key: 'admin', text: 'Admin', selected: false },
+	{ key: 'instructor', text: 'Instructor', selected: true },
+	{ key: 'student', text: 'Student', selected: false }
+];
+
+class FilterSearchDemo extends LitElement {
+
+	constructor() {
+		super();
+		this._fullData = JSON.parse(JSON.stringify(initialData));
+		this._fullDataSingle = JSON.parse(JSON.stringify(initialData));
+		this._fullDataInitialSubset = JSON.parse(JSON.stringify(initialData));
+	}
+
+	render() {
+		return html`
+			<d2l-filter @d2l-filter-change="${this._handleFilterChange}" @d2l-filter-dimension-first-open="${this._handleFirstOpen}" @d2l-filter-dimension-search="${this._handleSearch}">
+				<d2l-filter-dimension-set key="none" text="No Search" search-type="none">
+					<d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
+				</d2l-filter-dimension-set>
+				<d2l-filter-dimension-set key="none-select-all" text="No Search and Select All" search-type="none" select-all>
+					<d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
+				</d2l-filter-dimension-set>
+				<d2l-filter-dimension-set key="event" text="Event on Search" select-all search-type="manual">
+					${this._fullData.map(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>
+				<d2l-filter-dimension-set key="event-single" text="Event on Search - Single" search-type="manual" selection-single>
+					${this._fullDataSingle.map(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>
+				<d2l-filter-dimension-set key="event-initial-subset" text="Event on Search - Initial Subset" search-type="manual" header-text="Related Roles at D2L" selected-first>
+					${this._fullDataInitialSubset.map(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>
+				<d2l-filter-dimension-set key="auto" text="Automatic Search" search-type="automatic">
+					<d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
+				</d2l-filter-dimension-set>
+			</d2l-filter>
+		`;
+	}
+
+	_handleFilterChange(e) {
+		if (e.detail.dimensions.length === 1) {
+			console.log(`Filter selection(s) changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes); // eslint-disable-line no-console
+			if (e.detail.dimensions[0].cleared) console.log(`(Dimension "${e.detail.dimensions[0].dimensionKey}" cleared)`); // eslint-disable-line no-console
+		} else {
+			console.log('Multiple dimension selections changed:', e.detail.dimensions); // eslint-disable-line no-console
+		}
+
+		e.detail.dimensions.forEach(dimension => {
+			if (!dimension.dimensionKey.includes('event')) return;
+
+			const dataToUpdateMap = {
+				'event': this._fullData,
+				'event-single': this._fullDataSingle,
+				'event-initial-subset': this._fullDataInitialSubset,
+			};
+			const dataToUpdate = dataToUpdateMap[dimension.dimensionKey];
+			if (dimension.cleared) {
+				dataToUpdate.forEach(value => value.selected = false);
+			} else {
+				dimension.changes.forEach(change => { dataToUpdate.find(value => value.key === change.valueKey).selected = change.selected; });
+			}
+		});
+
+		if (e.detail.allCleared) {
+			console.log('(All dimensions cleared)'); // eslint-disable-line no-console
+		}
+		this.requestUpdate();
+	}
+
+	_handleFirstOpen(e) {
+		// eslint-disable-next-line no-console
+		console.log(`Filter dimension opened for the first time: ${e.detail.key}`);
+	}
+
+	_handleSearch(e) {
+		if (!e.detail.key.includes('event')) return;
+
+		let keysToDisplay = [];
+		if (e.detail.key === 'event-initial-subset') keysToDisplay = this._performInitialSubsetSearch(e.detail.value);
+		else {
+			this._fullData.forEach(value => {
+				if (value.text.toLowerCase().indexOf(e.detail.value.toLowerCase()) > -1) {
+					keysToDisplay.push(value.key);
+				}
+			});
+		}
+
+		setTimeout(() => {
+			e.detail.searchCompleteCallback({ keysToDisplay: keysToDisplay });
+			// eslint-disable-next-line no-console
+			console.log(`Filter dimension "${e.detail.key}" searched: ${e.detail.value}`);
+		}, 2000);
+
+	}
+
+	_performInitialSubsetSearch(searchValue) {
+		const initialSubset = ['admin', 'instructor'];
+		let keysToDisplay = [];
+		if (searchValue === '') {
+			keysToDisplay = initialSubset;
+			this._fullDataInitialSubset.forEach(value => {
+				if (value.selected) {
+					if (!keysToDisplay.includes(value.key)) keysToDisplay.push(value.key);
+				}
+			});
+		} else {
+			this._fullDataInitialSubset.forEach(value => {
+				if (value.text.toLowerCase().indexOf(searchValue.toLowerCase()) > -1) {
+					keysToDisplay.push(value.key);
+				}
+			});
+		}
+		return keysToDisplay;
+	}
+
+}
+customElements.define('d2l-filter-search-demo', FilterSearchDemo);