@brightspace-ui/core 3.227.4 → 3.227.6

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

@@ -1,182 +0,0 @@
-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 get properties() {
-		return {
-			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
-				@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

@@ -1,246 +0,0 @@
-<!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

@@ -1,135 +0,0 @@
-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);