@brightspace-ui/core 3.289.0 → 3.290.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/components/filter/README.md +2 -1
  2. package/components/filter/demo/filter-load-more-demo.js +182 -0
  3. package/components/filter/demo/filter-overflow-group.html +246 -0
  4. package/components/filter/demo/filter-search-demo.js +135 -0
  5. package/components/filter/demo/filter-tags.html +115 -0
  6. package/components/filter/demo/filter.html +230 -0
  7. package/custom-elements.json +10 -1
  8. package/package.json +2 -1
package/components/filter/README.md CHANGED
@@ -360,7 +360,8 @@ e.detail.loadMoreCompleteCallback({ displayAllKeys: true });
360
360
  ### Selection and manual search/paging
361
361
 
362
362
  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.
363
- <!-- docs: demo -->
363
+
364
+ <!-- docs: demo align:start autoOpen:true autoSize:false size:large -->
364
365
  ```html
365
366
  <script type="module">
366
367
  import '@brightspace-ui/core/components/filter/demo/filter-load-more-demo.js'
package/components/filter/demo/filter-load-more-demo.js ADDED
@@ -0,0 +1,182 @@
1
+ import '../filter.js';
2
+ import '../filter-dimension-set.js';
3
+ import '../filter-dimension-set-value.js';
4
+ import '../filter-overflow-group.js';
5
+ import { html, LitElement } from 'lit';
6
+ import { repeat } from 'lit/directives/repeat.js';
7
+
8
+ const FullData = [
9
+ {
10
+ key: 'course',
11
+ text: 'Course',
12
+ values: [
13
+ { key: 'art', selected:false, text: 'Art' },
14
+ { key: 'astronomy', selected:false, text: 'Astronomy' },
15
+ { key: 'biology', selected:true, text: 'Biology' },
16
+ { key: 'chemistry', selected:false, text: 'Chemistry' },
17
+ { key: 'drama', selected:false, text: 'Drama' },
18
+ { key: 'english', selected:false, text: 'English' },
19
+ { key: 'how-to', selected:false, text: 'How To Write a How To Article With a Flashy Title' },
20
+ { key: 'math', selected:false, text: 'Math' },
21
+ { key: 'physics', selected:false, text: 'Physics' },
22
+ { key: 'stats', selected:false, text: 'Statistics' },
23
+ { key: 'writerscraft', selected:true, text: 'Writer\'s Craft' },
24
+ ],
25
+ loadCount: 6
26
+ },
27
+ {
28
+ key: 'role',
29
+ text: 'Role',
30
+ values: [
31
+ { key: 'admin', selected:false, text: 'Admin' },
32
+ { key: 'instructor', selected:false, text: 'Instructor' },
33
+ { key: 'student', selected:false, text: 'Student' }
34
+ ],
35
+ loadCount: 2
36
+ },
37
+ {
38
+ key: 'dep',
39
+ text: 'Department',
40
+ values: [
41
+ { key: 'english', selected:false, text: 'English' },
42
+ { key: 'spanish', selected:false, text: 'Spanish' },
43
+ { key: 'science', selected:false, text: 'Science' }
44
+ ],
45
+ loadCount: 2
46
+ },
47
+ {
48
+ key: 'grad',
49
+ text: 'Grade Level',
50
+ values: [
51
+ { key: '1', selected:false, text: '1st Grade' },
52
+ { key: '2', selected:false, text: '2nd Grade' },
53
+ { key: '3', selected:false, text: '3rd Grade' }
54
+ ],
55
+ loadCount: 2
56
+ }
57
+ ,
58
+ {
59
+ key: 'city',
60
+ text: 'City',
61
+ values: [
62
+ { key: '1', selected:false, text: '1st City' },
63
+ { key: '2', selected:false, text: '2nd City' },
64
+ { key: '3', selected:false, text: '3rd City' }
65
+ ],
66
+ loadCount: 2
67
+ }
68
+ ];
69
+
70
+ class FilterLoadMoreDemo extends LitElement {
71
+
72
+ static properties = {
73
+ opened: { type: Boolean, reflect: true },
74
+ useOverflowGroup: { type: Boolean, attribute: 'use-overflow-group' }
75
+ };
76
+
77
+ constructor() {
78
+ super();
79
+ this._dimensions = FullData.map(dim => ({ ...dim }));
80
+ }
81
+
82
+ render() {
83
+ if (this.useOverflowGroup) return html`<d2l-filter-overflow-group min-to-show="0">
84
+ ${repeat(this._dimensions, dimension => dimension.key, dimension => html`<d2l-filter
85
+ @d2l-filter-change="${this._handleFilterChange}"
86
+ @d2l-filter-dimension-load-more=${this._handleLoadMore}
87
+ @d2l-filter-dimension-search=${this._handleSearch}>
88
+ ${this._renderDimensionSet(dimension)}
89
+ </d2l-filter>`)}
90
+ </d2l-filter-overflow-group>`;
91
+ return html`
92
+ <d2l-filter
93
+ ?opened="${this.opened}"
94
+ @d2l-filter-change="${this._handleFilterChange}"
95
+ @d2l-filter-dimension-load-more=${this._handleLoadMore}
96
+ @d2l-filter-dimension-search=${this._handleSearch}>
97
+ ${repeat(this._dimensions, dimension => dimension.key, dimension => this._renderDimensionSet(dimension))}
98
+ </d2l-filter>
99
+ `;
100
+ }
101
+
102
+ _addKeys(dimension, addCount, searchValue = '') {
103
+ dimension.loadCount += addCount;
104
+ const keys = dimension.values.filter(val => this._textIsInSearch(searchValue, val.text));
105
+ const selectedKeys = [];
106
+ const unselectedKeys = [];
107
+ for (const val of keys) {
108
+ if (val.selected) {
109
+ selectedKeys.push(val.key);
110
+ } else {
111
+ unselectedKeys.push(val.key);
112
+ }
113
+ }
114
+
115
+ dimension.loadCount = Math.max(selectedKeys.length, dimension.loadCount);
116
+ dimension.hasMore = keys.length > dimension.loadCount;
117
+
118
+ return selectedKeys.concat(unselectedKeys).slice(0, dimension.loadCount);
119
+ }
120
+
121
+ _handleFilterChange(e) {
122
+ e.detail.dimensions.forEach(dimension => {
123
+ const localData = Object.values(this._dimensions.find(dim => dim.key === dimension.dimensionKey).values);
124
+ const FullDataValues = FullData.find(dim => dim.key === dimension.dimensionKey).values;
125
+ if (dimension.cleared) {
126
+ localData.forEach(value => value.selected = false);
127
+ FullDataValues.forEach(value => value.selected = false);
128
+ } else {
129
+ dimension.changes.forEach(change => {
130
+ localData.find(value => value.key === change.valueKey).selected = change.selected;
131
+ FullDataValues.find(value => value.key === change.valueKey).selected = change.selected;
132
+ });
133
+ }
134
+ });
135
+ this.requestUpdate();
136
+ }
137
+
138
+ async _handleLoadMore(e) {
139
+ const dimensionKey = e.detail.key;
140
+ const dimension = this._dimensions.find(dim => dim.key === dimensionKey);
141
+
142
+ const keysToDisplay = this._addKeys(dimension, 2, e.detail.value);
143
+ this.requestUpdate();
144
+ await this.updateComplete;
145
+ e.detail.loadMoreCompleteCallback({ keysToDisplay });
146
+ }
147
+
148
+ async _handleSearch(e) {
149
+ const dimensionKey = e.detail.key;
150
+ const dimension = this._dimensions.find(dim => dim.key === dimensionKey);
151
+ const dimData = FullData.find(dim => dim.key === dimensionKey);
152
+
153
+ dimension.loadCount = 0;
154
+ const keysToDisplay = this._addKeys(dimension, dimData.loadCount, e.detail.value);
155
+
156
+ this.requestUpdate();
157
+ await this.updateComplete;
158
+ e.detail.searchCompleteCallback({ keysToDisplay });
159
+ }
160
+
161
+ _renderDimensionSet(dimension) {
162
+ const { values, key, text, hasMore } = dimension;
163
+
164
+ return html`
165
+ <d2l-filter-dimension-set key="${key}" text="${text}" ?has-more="${hasMore}" search-type="manual">
166
+ ${repeat(Object.values(values).sort((a, b) => (a.text < b.text ? -1 : 0)), value => value.key, value => html`
167
+ <d2l-filter-dimension-set-value
168
+ key="${value.key}"
169
+ text="${value.text}"
170
+ ?selected=${value.selected}>
171
+ </d2l-filter-dimension-set-value>
172
+ `)}
173
+ </d2l-filter-dimension-set>`;
174
+ }
175
+
176
+ _textIsInSearch(searchValue, text) {
177
+ return searchValue === '' || text.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
178
+ }
179
+
180
+ }
181
+ customElements.define('d2l-filter-load-more-demo', FilterLoadMoreDemo);
182
+
package/components/filter/demo/filter-overflow-group.html ADDED
@@ -0,0 +1,246 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
6
+ <script type="module">
7
+ import '../../demo/demo-page.js';
8
+ import '../../filter/filter.js';
9
+ import '../../filter/filter-dimension-set.js';
10
+ import '../../filter/filter-dimension-set-value.js';
11
+ import '../../filter/filter-overflow-group.js';
12
+ import '../../filter/filter-tags.js';
13
+ import './filter-load-more-demo.js';
14
+ </script>
15
+ <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
16
+ <meta charset="UTF-8">
17
+ <style>
18
+ d2l-filter-tags {
19
+ padding-top: 1rem;
20
+ }
21
+ </style>
22
+ </head>
23
+
24
+ <body unresolved>
25
+
26
+ <d2l-demo-page page-title="d2l-filter-overflow-group">
27
+
28
+ <h2>Filter Overflow Group</h2>
29
+ <d2l-demo-snippet>
30
+ <template>
31
+ <d2l-filter-overflow-group>
32
+ <d2l-filter>
33
+ <d2l-filter-dimension-set key="skill" text="Skill">
34
+ <d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
35
+ <d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
36
+ <d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
37
+ <d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
38
+ </d2l-filter-dimension-set>
39
+ </d2l-filter>
40
+ <d2l-filter>
41
+ <d2l-filter-dimension-set key="type" text="Type" selection-single>
42
+ <d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
43
+ <d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
44
+ <d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
45
+ <d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
46
+ </d2l-filter-dimension-set>
47
+ </d2l-filter>
48
+ <d2l-filter>
49
+ <d2l-filter-dimension-set key="provider" text="Semester3">
50
+ <d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
51
+ <d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
52
+ <d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
53
+ <d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
54
+ </d2l-filter-dimension-set>
55
+ </d2l-filter>
56
+ <d2l-filter>
57
+ <d2l-filter-dimension-set key="format" text="Format">
58
+ <d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
59
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
60
+ </d2l-filter-dimension-set>
61
+ </d2l-filter>
62
+ <d2l-filter>
63
+ <d2l-filter-dimension-set key="language" text="Language" selection-single>
64
+ <d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
65
+ <d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
66
+ <d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
67
+ </d2l-filter-dimension-set>
68
+ </d2l-filter>
69
+ <d2l-filter>
70
+ <d2l-filter-dimension-set key="course" text="Course" select-all>
71
+ <d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
72
+ <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
73
+ <d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
74
+ <d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
75
+ <d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
76
+ <d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
77
+ <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>
78
+ <d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
79
+ <d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
80
+ <d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
81
+ <d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
82
+ </d2l-filter-dimension-set>
83
+ <d2l-filter-dimension-set key="duration" text="Duration">
84
+ <d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
85
+ <d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
86
+ <d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
87
+ </d2l-filter-dimension-set>
88
+ <d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
89
+ <d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
90
+ <d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
91
+ <d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
92
+ </d2l-filter-dimension-set>
93
+ </d2l-filter>
94
+ </d2l-filter-overflow-group>
95
+ </template>
96
+ </d2l-demo-snippet>
97
+
98
+ <h2>Filter Overflow Group with Tags (built-in)</h2>
99
+ <d2l-demo-snippet>
100
+ <template>
101
+ <d2l-filter-overflow-group tags>
102
+ <d2l-filter>
103
+ <d2l-filter-dimension-set key="skill" text="Skill">
104
+ <d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
105
+ <d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
106
+ <d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
107
+ <d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
108
+ </d2l-filter-dimension-set>
109
+ </d2l-filter>
110
+ <d2l-filter id="filter-2">
111
+ <d2l-filter-dimension-set key="type" text="Type" selection-single>
112
+ <d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
113
+ <d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
114
+ <d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
115
+ <d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
116
+ </d2l-filter-dimension-set>
117
+ </d2l-filter>
118
+ <d2l-filter>
119
+ <d2l-filter-dimension-set key="provider" text="Semester3">
120
+ <d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
121
+ <d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
122
+ <d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
123
+ <d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
124
+ </d2l-filter-dimension-set>
125
+ </d2l-filter>
126
+ <d2l-filter>
127
+ <d2l-filter-dimension-set key="format" text="Format">
128
+ <d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
129
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
130
+ </d2l-filter-dimension-set>
131
+ </d2l-filter>
132
+ <d2l-filter>
133
+ <d2l-filter-dimension-set key="language" text="Language" select-single>
134
+ <d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
135
+ <d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
136
+ <d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
137
+ </d2l-filter-dimension-set>
138
+ </d2l-filter>
139
+ <d2l-filter>
140
+ <d2l-filter-dimension-set key="course" text="Course" select-all>
141
+ <d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
142
+ <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
143
+ <d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
144
+ <d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
145
+ <d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
146
+ <d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
147
+ <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>
148
+ <d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
149
+ <d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
150
+ <d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
151
+ <d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
152
+ </d2l-filter-dimension-set>
153
+ <d2l-filter-dimension-set key="duration" text="Duration">
154
+ <d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
155
+ <d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
156
+ <d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
157
+ </d2l-filter-dimension-set>
158
+ <d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
159
+ <d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
160
+ <d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
161
+ <d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
162
+ </d2l-filter-dimension-set>
163
+ </d2l-filter>
164
+ </d2l-filter-overflow-group>
165
+ </template>
166
+ </d2l-demo-snippet>
167
+
168
+ <h2>Filter Overflow Group with Tags (external to d2l-filter-overflow-group)</h2>
169
+ <d2l-demo-snippet>
170
+ <template>
171
+ <d2l-filter-overflow-group>
172
+ <d2l-filter id="filter1">
173
+ <d2l-filter-dimension-set key="skill" text="Skill">
174
+ <d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
175
+ <d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
176
+ <d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
177
+ <d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
178
+ </d2l-filter-dimension-set>
179
+ </d2l-filter>
180
+ <d2l-filter id="filter2">
181
+ <d2l-filter-dimension-set key="type" text="Type" selection-single>
182
+ <d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
183
+ <d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
184
+ <d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
185
+ <d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
186
+ </d2l-filter-dimension-set>
187
+ </d2l-filter>
188
+ <d2l-filter id="filter3">
189
+ <d2l-filter-dimension-set key="provider" text="Semester3">
190
+ <d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
191
+ <d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
192
+ <d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
193
+ <d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
194
+ </d2l-filter-dimension-set>
195
+ </d2l-filter>
196
+ <d2l-filter id="filter4">
197
+ <d2l-filter-dimension-set key="format" text="Format">
198
+ <d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
199
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
200
+ </d2l-filter-dimension-set>
201
+ </d2l-filter>
202
+ <d2l-filter id="filter5">
203
+ <d2l-filter-dimension-set key="language" text="Language" selection-single>
204
+ <d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
205
+ <d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
206
+ <d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
207
+ </d2l-filter-dimension-set>
208
+ </d2l-filter>
209
+ <d2l-filter id="filter6">
210
+ <d2l-filter-dimension-set key="course" text="Course" select-all>
211
+ <d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
212
+ <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
213
+ <d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
214
+ <d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
215
+ <d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
216
+ <d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
217
+ <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>
218
+ <d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
219
+ <d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
220
+ <d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
221
+ <d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
222
+ </d2l-filter-dimension-set>
223
+ <d2l-filter-dimension-set key="duration" text="Duration">
224
+ <d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
225
+ <d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
226
+ <d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
227
+ </d2l-filter-dimension-set>
228
+ <d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
229
+ <d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
230
+ <d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
231
+ <d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
232
+ </d2l-filter-dimension-set>
233
+ </d2l-filter-overflow-group>
234
+ <d2l-filter-tags filter-ids="filter1 filter2 filter3 filter4 filter5 filter6" label="Applied Filters:"></d2l-filter-tags>
235
+ </template>
236
+ </d2l-demo-snippet>
237
+
238
+ <h2>Filter Overflow Group with Load More and Search</h2>
239
+ <d2l-demo-snippet>
240
+ <template>
241
+ <d2l-filter-load-more-demo use-overflow-group></d2l-filter-load-more-demo>
242
+ </template>
243
+ </d2l-demo-snippet>
244
+ </d2l-demo-page>
245
+ </body>
246
+ </html>
package/components/filter/demo/filter-search-demo.js ADDED
@@ -0,0 +1,135 @@
1
+ import '../filter.js';
2
+ import '../filter-dimension-set.js';
3
+ import '../filter-dimension-set-value.js';
4
+ import { html, LitElement } from 'lit';
5
+
6
+ const initialData = [
7
+ { key: 'admin', text: 'Admin', selected: false },
8
+ { key: 'instructor', text: 'Instructor', selected: true },
9
+ { key: 'student', text: 'Student', selected: false }
10
+ ];
11
+
12
+ class FilterSearchDemo extends LitElement {
13
+
14
+ constructor() {
15
+ super();
16
+ this._fullData = JSON.parse(JSON.stringify(initialData));
17
+ this._fullDataSingle = JSON.parse(JSON.stringify(initialData));
18
+ this._fullDataInitialSubset = JSON.parse(JSON.stringify(initialData));
19
+ }
20
+
21
+ render() {
22
+ return html`
23
+ <d2l-filter @d2l-filter-change="${this._handleFilterChange}" @d2l-filter-dimension-first-open="${this._handleFirstOpen}" @d2l-filter-dimension-search="${this._handleSearch}">
24
+ <d2l-filter-dimension-set key="none" text="No Search" search-type="none">
25
+ <d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
26
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
27
+ <d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
28
+ </d2l-filter-dimension-set>
29
+ <d2l-filter-dimension-set key="none-select-all" text="No Search and Select All" search-type="none" select-all>
30
+ <d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
31
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
32
+ <d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
33
+ </d2l-filter-dimension-set>
34
+ <d2l-filter-dimension-set key="event" text="Event on Search" select-all search-type="manual">
35
+ ${this._fullData.map(value => html`
36
+ <d2l-filter-dimension-set-value key="${value.key}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
37
+ `)}
38
+ </d2l-filter-dimension-set>
39
+ <d2l-filter-dimension-set key="event-single" text="Event on Search - Single" search-type="manual" selection-single>
40
+ ${this._fullDataSingle.map(value => html`
41
+ <d2l-filter-dimension-set-value key="${value.key}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
42
+ `)}
43
+ </d2l-filter-dimension-set>
44
+ <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>
45
+ ${this._fullDataInitialSubset.map(value => html`
46
+ <d2l-filter-dimension-set-value key="${value.key}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
47
+ `)}
48
+ </d2l-filter-dimension-set>
49
+ <d2l-filter-dimension-set key="auto" text="Automatic Search" search-type="automatic">
50
+ <d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
51
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
52
+ <d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
53
+ </d2l-filter-dimension-set>
54
+ </d2l-filter>
55
+ `;
56
+ }
57
+
58
+ _handleFilterChange(e) {
59
+ if (e.detail.dimensions.length === 1) {
60
+ console.log(`Filter selection(s) changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes); // eslint-disable-line no-console
61
+ if (e.detail.dimensions[0].cleared) console.log(`(Dimension "${e.detail.dimensions[0].dimensionKey}" cleared)`); // eslint-disable-line no-console
62
+ } else {
63
+ console.log('Multiple dimension selections changed:', e.detail.dimensions); // eslint-disable-line no-console
64
+ }
65
+
66
+ e.detail.dimensions.forEach(dimension => {
67
+ if (!dimension.dimensionKey.includes('event')) return;
68
+
69
+ const dataToUpdateMap = {
70
+ 'event': this._fullData,
71
+ 'event-single': this._fullDataSingle,
72
+ 'event-initial-subset': this._fullDataInitialSubset,
73
+ };
74
+ const dataToUpdate = dataToUpdateMap[dimension.dimensionKey];
75
+ if (dimension.cleared) {
76
+ dataToUpdate.forEach(value => value.selected = false);
77
+ } else {
78
+ dimension.changes.forEach(change => { dataToUpdate.find(value => value.key === change.valueKey).selected = change.selected; });
79
+ }
80
+ });
81
+
82
+ if (e.detail.allCleared) {
83
+ console.log('(All dimensions cleared)'); // eslint-disable-line no-console
84
+ }
85
+ this.requestUpdate();
86
+ }
87
+
88
+ _handleFirstOpen(e) {
89
+ // eslint-disable-next-line no-console
90
+ console.log(`Filter dimension opened for the first time: ${e.detail.key}`);
91
+ }
92
+
93
+ _handleSearch(e) {
94
+ if (!e.detail.key.includes('event')) return;
95
+
96
+ let keysToDisplay = [];
97
+ if (e.detail.key === 'event-initial-subset') keysToDisplay = this._performInitialSubsetSearch(e.detail.value);
98
+ else {
99
+ this._fullData.forEach(value => {
100
+ if (value.text.toLowerCase().indexOf(e.detail.value.toLowerCase()) > -1) {
101
+ keysToDisplay.push(value.key);
102
+ }
103
+ });
104
+ }
105
+
106
+ setTimeout(() => {
107
+ e.detail.searchCompleteCallback({ keysToDisplay: keysToDisplay });
108
+ // eslint-disable-next-line no-console
109
+ console.log(`Filter dimension "${e.detail.key}" searched: ${e.detail.value}`);
110
+ }, 2000);
111
+
112
+ }
113
+
114
+ _performInitialSubsetSearch(searchValue) {
115
+ const initialSubset = ['admin', 'instructor'];
116
+ let keysToDisplay = [];
117
+ if (searchValue === '') {
118
+ keysToDisplay = initialSubset;
119
+ this._fullDataInitialSubset.forEach(value => {
120
+ if (value.selected) {
121
+ if (!keysToDisplay.includes(value.key)) keysToDisplay.push(value.key);
122
+ }
123
+ });
124
+ } else {
125
+ this._fullDataInitialSubset.forEach(value => {
126
+ if (value.text.toLowerCase().indexOf(searchValue.toLowerCase()) > -1) {
127
+ keysToDisplay.push(value.key);
128
+ }
129
+ });
130
+ }
131
+ return keysToDisplay;
132
+ }
133
+
134
+ }
135
+ customElements.define('d2l-filter-search-demo', FilterSearchDemo);
package/components/filter/demo/filter-tags.html ADDED
@@ -0,0 +1,115 @@
1
+ <!doctype html>
2
+ <html lang="en" data-timezone='{"name":"Canada - Toronto", "identifier":"America/Toronto"}'>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
+ <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
+ <script type="module">
8
+ import '../../demo/demo-page.js';
9
+ import '../filter.js';
10
+ import '../filter-dimension-set.js';
11
+ import '../filter-dimension-set-value.js';
12
+ import '../../filter/filter-dimension-set-date-text-value.js';
13
+ import '../../filter/filter-dimension-set-date-time-range-value.js';
14
+ import '../filter-tags.js';
15
+ </script>
16
+ <style>
17
+ d2l-demo-snippet {
18
+ max-width: 1400px;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body unresolved class="d2l-typography">
23
+
24
+ <d2l-demo-page page-title="d2l-filter-tags">
25
+
26
+ <div class="d2l-body-compact">
27
+ Use these d2l-filters to control the applied filters in the demos below. The first filter is set up to send the dimension and value to the subscribers. The second filter only sends the value.
28
+ </div>
29
+
30
+ <d2l-filter id="core-filter">
31
+ <d2l-filter-dimension-set key="1" text="Dim 1">
32
+ <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
33
+ <d2l-filter-dimension-set-value selected text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
34
+ <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
35
+ <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
36
+ </d2l-filter-dimension-set>
37
+ <d2l-filter-dimension-set key="2" text="Dim 2">
38
+ <d2l-filter-dimension-set-value text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
39
+ <d2l-filter-dimension-set-value selected text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
40
+ <d2l-filter-dimension-set-value selected text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
41
+ </d2l-filter-dimension-set>
42
+ </d2l-filter>
43
+
44
+ <d2l-filter id="core-filter-2">
45
+ <d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
46
+ <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
47
+ <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
48
+ <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
49
+ <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
50
+ </d2l-filter-dimension-set>
51
+ <d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
52
+ <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
53
+ <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
54
+ <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
55
+ </d2l-filter-dimension-set>
56
+ </d2l-filter>
57
+
58
+ <d2l-filter id="dates-filter">
59
+ <d2l-filter-dimension-set key="dates" text="Dates" value-only-active-filter-text>
60
+ <d2l-filter-dimension-set-value key="lastweek" text="Last 60 days"></d2l-filter-dimension-set-value>
61
+ <d2l-filter-dimension-set-date-text-value key="lastHour" range="lastHour"></d2l-filter-dimension-set-date-text-value>
62
+ <d2l-filter-dimension-set-date-text-value key="48hours" range="48hours" disabled></d2l-filter-dimension-set-date-text-value>
63
+ <d2l-filter-dimension-set-date-text-value key="today" range="today"></d2l-filter-dimension-set-date-text-value>
64
+ <d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
65
+ <d2l-filter-dimension-set-date-time-range-value key="custom" type="date" selected start-value="2022-02-04T12:00:00Z"></d2l-filter-dimension-set-date-time-range-value>
66
+ <d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time"></d2l-filter-dimension-set-date-time-range-value>
67
+ </d2l-filter-dimension-set>
68
+ </d2l-filter>
69
+ <script>
70
+ const coreFilter = document.querySelector('#core-filter');
71
+ coreFilter.addEventListener('d2l-filter-dimension-first-open', (e) => {
72
+ logEvent(e, 'Filter dimension opened!');
73
+ });
74
+ coreFilter.addEventListener('d2l-filter-dimension-search', (e) => {
75
+ logEvent(e, 'Filter dimension searched!');
76
+ });
77
+ coreFilter.addEventListener('d2l-filter-change', (e) => {
78
+ logEvent(e, 'Filter value(s) changed!');
79
+ });
80
+ function logEvent(e, text) {
81
+ console.group(text);
82
+ console.log('event', e);
83
+ if (e.detail) console.log('detail', e.detail);
84
+ console.groupEnd();
85
+ }
86
+ </script>
87
+
88
+ <h2>Registered to both filters</h2>
89
+
90
+ <d2l-demo-snippet>
91
+ <d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
92
+ </d2l-demo-snippet>
93
+
94
+ <h2>Registered to only the first filter</h2>
95
+
96
+ <d2l-demo-snippet>
97
+ <d2l-filter-tags filter-ids="core-filter"></d2l-filter-tags>
98
+ </d2l-demo-snippet>
99
+
100
+ <h2>Registered to first filter and dates filter</h2>
101
+
102
+ <d2l-demo-snippet>
103
+ <d2l-filter-tags filter-ids="core-filter dates-filter"></d2l-filter-tags>
104
+ </d2l-demo-snippet>
105
+
106
+ <h2>Registered to dates filter</h2>
107
+
108
+ <d2l-demo-snippet>
109
+ <d2l-filter-tags filter-ids="dates-filter"></d2l-filter-tags>
110
+ </d2l-demo-snippet>
111
+
112
+ </d2l-demo-page>
113
+
114
+ </body>
115
+ </html>
package/components/filter/demo/filter.html ADDED
@@ -0,0 +1,230 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-timezone='{"name":"Canada - Toronto", "identifier":"America/Toronto"}'>
3
+
4
+ <head>
5
+ <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
6
+ <script type="module">
7
+ import '../../demo/demo-page.js';
8
+ import '../../button/button.js';
9
+ import '../../filter/filter.js';
10
+ import '../../filter/filter-dimension-set.js';
11
+ import '../../filter/filter-dimension-set-empty-state.js';
12
+ import '../../filter/filter-dimension-set-value.js';
13
+ import '../../filter/filter-dimension-set-date-text-value.js';
14
+ import '../../filter/filter-dimension-set-date-time-range-value.js';
15
+ import './filter-search-demo.js';
16
+ import './filter-load-more-demo.js';
17
+ </script>
18
+ <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
19
+ <meta charset="UTF-8">
20
+ </head>
21
+
22
+ <body unresolved>
23
+
24
+ <d2l-demo-page page-title="d2l-filter">
25
+
26
+ <h2>Single Set Dimension</h2>
27
+ <d2l-demo-snippet>
28
+ <template>
29
+ <d2l-filter id="filter-single">
30
+ <d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." text="Course" select-all>
31
+ <d2l-filter-dimension-set-value key="art" text="Art" count="12"></d2l-filter-dimension-set-value>
32
+ <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="2" selected></d2l-filter-dimension-set-value>
33
+ <d2l-filter-dimension-set-value key="biology" text="Biology" count="15"></d2l-filter-dimension-set-value>
34
+ <d2l-filter-dimension-set-value key="chemistry" text="Chemistry" count="1" disabled selected></d2l-filter-dimension-set-value>
35
+ <d2l-filter-dimension-set-value key="drama" text="Drama" count="23" disabled></d2l-filter-dimension-set-value>
36
+ <d2l-filter-dimension-set-value key="english" text="English" count="100"></d2l-filter-dimension-set-value>
37
+ <d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title" count="100"></d2l-filter-dimension-set-value>
38
+ <d2l-filter-dimension-set-value key="math" text="Math" count="50"></d2l-filter-dimension-set-value>
39
+ <d2l-filter-dimension-set-value key="physics" text="Physics" count="23"></d2l-filter-dimension-set-value>
40
+ <d2l-filter-dimension-set-value key="stats" text="Statistics" count="333"></d2l-filter-dimension-set-value>
41
+ <d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft" count="2211"></d2l-filter-dimension-set-value>
42
+ <d2l-filter-dimension-set-empty-state slot="search-empty-state" description="Search returned no results." action-text="Do something"></d2l-filter-dimension-set-empty-state>
43
+ <d2l-filter-dimension-set-empty-state slot="set-empty-state" description="There are no available items." action-text="Add an item"></d2l-filter-dimension-set-empty-state>
44
+ </d2l-filter-dimension-set>
45
+ </d2l-filter>
46
+ </template>
47
+ </d2l-demo-snippet>
48
+
49
+ <h2>Single Set Dimension - Single Selection</h2>
50
+ <d2l-demo-snippet>
51
+ <template>
52
+ <d2l-filter>
53
+ <d2l-filter-dimension-set key="semester" text="Semester" selection-single>
54
+ <d2l-filter-dimension-set-value key="fall" text="Fall"></d2l-filter-dimension-set-value>
55
+ <d2l-filter-dimension-set-value key="winter" text="Winter" selected></d2l-filter-dimension-set-value>
56
+ <d2l-filter-dimension-set-value key="spring" text="Spring" disabled></d2l-filter-dimension-set-value>
57
+ <d2l-filter-dimension-set-value key="summer" text="Summer"></d2l-filter-dimension-set-value>
58
+ </d2l-filter-dimension-set>
59
+ </d2l-filter>
60
+ </template>
61
+ </d2l-demo-snippet>
62
+
63
+ <h2>Single Set Dimension - Header Text and Selected First</h2>
64
+ <d2l-demo-snippet>
65
+ <template>
66
+ <d2l-filter id="filter-single">
67
+ <d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" text="Course" select-all selected-first>
68
+ <d2l-filter-dimension-set-value key="art" text="Art" count="12"></d2l-filter-dimension-set-value>
69
+ <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="2" selected></d2l-filter-dimension-set-value>
70
+ <d2l-filter-dimension-set-value key="biology" text="Biology" count="15"></d2l-filter-dimension-set-value>
71
+ <d2l-filter-dimension-set-value key="chemistry" text="Chemistry" count="1"disabled></d2l-filter-dimension-set-value>
72
+ <d2l-filter-dimension-set-value key="drama" text="Drama" count="23" disabled></d2l-filter-dimension-set-value>
73
+ <d2l-filter-dimension-set-value key="english" text="English" count="100"></d2l-filter-dimension-set-value>
74
+ <d2l-filter-dimension-set-value key="physics" text="Physics" count="23"></d2l-filter-dimension-set-value>
75
+ <d2l-filter-dimension-set-value key="stats" text="Statistics" count="333"></d2l-filter-dimension-set-value>
76
+ <d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft" count="2211"></d2l-filter-dimension-set-value>
77
+ </d2l-filter-dimension-set>
78
+ </d2l-filter>
79
+ </template>
80
+ </d2l-demo-snippet>
81
+
82
+ <h2>Multiple Dimensions</h2>
83
+ <d2l-demo-snippet>
84
+ <template>
85
+ <d2l-filter>
86
+ <d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" text="Course" select-all>
87
+ <d2l-filter-dimension-set-value key="art" text="Art" count="0"></d2l-filter-dimension-set-value>
88
+ <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="1" selected></d2l-filter-dimension-set-value>
89
+ <d2l-filter-dimension-set-value key="biology" text="Biology" count="-12"></d2l-filter-dimension-set-value>
90
+ <d2l-filter-dimension-set-value key="chemistry" text="Chemistry" count="12.35"></d2l-filter-dimension-set-value>
91
+ <d2l-filter-dimension-set-value key="drama" text="Drama" count="xxx"></d2l-filter-dimension-set-value>
92
+ <d2l-filter-dimension-set-value key="english" text="English" count="881"></d2l-filter-dimension-set-value>
93
+ <d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title" count="100"></d2l-filter-dimension-set-value>
94
+ <d2l-filter-dimension-set-value key="math" text="Math" count="23909"></d2l-filter-dimension-set-value>
95
+ <d2l-filter-dimension-set-value key="physics" text="Physics" count="1012"></d2l-filter-dimension-set-value>
96
+ <d2l-filter-dimension-set-value key="stats" text="Statistics" count="2"></d2l-filter-dimension-set-value>
97
+ <d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
98
+ <d2l-filter-dimension-set-empty-state slot="search-empty-state" description="Search returned no results." action-text="Do something" action-href="https://d2l.com/"></d2l-filter-dimension-set-empty-state>
99
+ </d2l-filter-dimension-set>
100
+ <d2l-filter-dimension-set key="role" text="Role" selected-first>
101
+ <d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
102
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>
103
+ <d2l-filter-dimension-set-value key="student" text="Student" count="50"></d2l-filter-dimension-set-value>
104
+ </d2l-filter-dimension-set>
105
+ <d2l-filter-dimension-set key="semester" text="Semester" selection-single>
106
+ <d2l-filter-dimension-set-value key="fall" text="Fall"></d2l-filter-dimension-set-value>
107
+ <d2l-filter-dimension-set-value key="winter" text="Winter" selected></d2l-filter-dimension-set-value>
108
+ <d2l-filter-dimension-set-value key="spring" text="Spring"></d2l-filter-dimension-set-value>
109
+ <d2l-filter-dimension-set-value key="summer" text="Summer"></d2l-filter-dimension-set-value>
110
+ </d2l-filter-dimension-set>
111
+ </d2l-filter>
112
+ </template>
113
+ </d2l-demo-snippet>
114
+
115
+ <h2>Loading and Empty State</h2>
116
+ <d2l-demo-snippet>
117
+ <template>
118
+ <d2l-filter>
119
+ <d2l-filter-dimension-set key="course" text="Course" loading select-all>
120
+ <d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
121
+ <d2l-filter-dimension-set-value key="astronomy" text="Astronomy"></d2l-filter-dimension-set-value>
122
+ <d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
123
+ <d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
124
+ <d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
125
+ <d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
126
+ <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>
127
+ <d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
128
+ <d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
129
+ <d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
130
+ <d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
131
+ </d2l-filter-dimension-set>
132
+
133
+ </d2l-filter>
134
+ <d2l-filter text="More Filters">
135
+ <d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>
136
+ <d2l-filter-dimension-set key="role" text="Role" loading>
137
+ <d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
138
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
139
+ <d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
140
+ </d2l-filter-dimension-set>
141
+ <d2l-filter-dimension-set key="semester" text="Semester" loading selection-single></d2l-filter-dimension-set>
142
+ </d2l-filter>
143
+ <d2l-button id="finish-loading">Finish loading (in 5 seconds)</d2l-button>
144
+ </template>
145
+ </d2l-demo-snippet>
146
+
147
+ <h2>Load More</h2>
148
+ <d2l-demo-snippet>
149
+ <template>
150
+ <d2l-filter-load-more-demo></d2l-filter-load-more-demo>
151
+ </template>
152
+ </d2l-demo-snippet>
153
+
154
+ <h2>Search</h2>
155
+ <d2l-demo-snippet>
156
+ <template>
157
+ <d2l-filter-search-demo></d2l-filter-search-demo>
158
+ </template>
159
+ </d2l-demo-snippet>
160
+
161
+ <h2>Date Filter</h2>
162
+ <d2l-demo-snippet>
163
+ <template>
164
+ <d2l-filter id="filter-single">
165
+ <d2l-filter-dimension-set key="dates" text="Dates">
166
+ <d2l-filter-dimension-set-value key="60days" text="Last 60 days"></d2l-filter-dimension-set-value>
167
+ <d2l-filter-dimension-set-date-text-value key="lastHour" range="lastHour" ></d2l-filter-dimension-set-date-text-value>
168
+ <d2l-filter-dimension-set-date-text-value key="48hours" range="48hours" disabled></d2l-filter-dimension-set-date-text-value>
169
+ <d2l-filter-dimension-set-date-text-value key="today" range="today"></d2l-filter-dimension-set-date-text-value>
170
+ <d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
171
+ <d2l-filter-dimension-set-date-time-range-value key="custom" type="date"></d2l-filter-dimension-set-date-time-range-value>
172
+ <d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time" start-value="2024-10-12T12:00:00Z"></d2l-filter-dimension-set-date-time-range-value>
173
+ </d2l-filter-dimension-set>
174
+ <d2l-filter-dimension-set key="dates2" text="Dates (short)">
175
+ <d2l-filter-dimension-set-date-text-value key="6months2" range="6months"></d2l-filter-dimension-set-date-text-value>
176
+ <d2l-filter-dimension-set-date-time-range-value key="custom3" text="Custom Date Range with Time" start-value="2024-10-12T12:00:00Z"></d2l-filter-dimension-set-date-time-range-value>
177
+ </d2l-filter-dimension-set>
178
+ <d2l-filter-dimension-set key="dates3" text="Start and End Ranges" ignore-enforce-selection-single>
179
+ <d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
180
+ <d2l-filter-dimension-set-date-time-range-value key="custom4" text="Start Date"></d2l-filter-dimension-set-date-time-range-value>
181
+ <d2l-filter-dimension-set-date-time-range-value key="custom5" text="End Date"></d2l-filter-dimension-set-date-time-range-value>
182
+ </d2l-filter-dimension-set>
183
+ <d2l-filter-dimension-set key="role" text="Role" selected-first>
184
+ <d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
185
+ <d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>
186
+ <d2l-filter-dimension-set-value key="student" text="Student" count="50"></d2l-filter-dimension-set-value>
187
+ </d2l-filter-dimension-set>
188
+ </d2l-filter>
189
+ </template>
190
+ </d2l-demo-snippet>
191
+ </d2l-demo-page>
192
+
193
+ <script type="module">
194
+ document.addEventListener('d2l-filter-change', e => {
195
+ if (e.detail.dimensions.length === 1) {
196
+ console.log(`Filter selection(s) changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes);
197
+ if (e.detail.dimensions[0].cleared) console.log(`(Dimension "${e.detail.dimensions[0].dimensionKey}" cleared)`);
198
+ } else {
199
+ console.log('Multiple dimension selections changed:', e.detail.dimensions);
200
+ }
201
+
202
+ if (e.detail.allCleared) {
203
+ console.log('(All dimensions cleared)');
204
+ }
205
+ });
206
+
207
+ document.addEventListener('d2l-filter-dimension-first-open', e => {
208
+ console.log(`Filter dimension opened for the first time: ${e.detail.key}`);
209
+ });
210
+
211
+ document.querySelector('#filter-single').addEventListener('d2l-filter-dimension-empty-state-action', e => {
212
+ console.log(`Filter dimension empty state action clicked:\nkey: ${e.detail.key}\ntype: ${e.detail.type}`);
213
+ });
214
+
215
+ requestAnimationFrame(() => {
216
+ document.getElementById('finish-loading').addEventListener('click', e => {
217
+ e.target.disabled = true;
218
+ setTimeout(() => {
219
+ const loadingFilters = document.querySelectorAll('d2l-filter-dimension-set[loading]');
220
+ loadingFilters.forEach(filter => {
221
+ filter.loading = false;
222
+ });
223
+ e.target.textContent = 'Done Loading';
224
+ }, 5000);
225
+ });
226
+ });
227
+ </script>
228
+
229
+ </body>
230
+ </html>
package/custom-elements.json CHANGED
@@ -4579,12 +4579,21 @@
4579
4579
  "name": "d2l-filter-load-more-demo",
4580
4580
  "path": "./components/filter/demo/filter-load-more-demo.js",
4581
4581
  "attributes": [
4582
+ {
4583
+ "name": "opened",
4584
+ "type": "boolean"
4585
+ },
4582
4586
  {
4583
4587
  "name": "use-overflow-group",
4584
4588
  "type": "boolean"
4585
4589
  }
4586
4590
  ],
4587
4591
  "properties": [
4592
+ {
4593
+ "name": "opened",
4594
+ "attribute": "opened",
4595
+ "type": "boolean"
4596
+ },
4588
4597
  {
4589
4598
  "name": "useOverflowGroup",
4590
4599
  "attribute": "use-overflow-group",
@@ -13147,7 +13156,7 @@
13147
13156
  "properties": [
13148
13157
  {
13149
13158
  "name": "styles",
13150
- "default": "\"css`\\n\\t\\t.full-nav-header {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 90px;\\n\\t\\t}\\n\\t\\t.full-nav-header-left {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 1 auto;\\n\\t\\t\\tgap: 5px;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-course {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tgap: 5px;\\n\\t\\t}\\n\\t\\t.full-nav-header-spacer {\\n\\t\\t\\tflex: 1 1 auto;\\n\\t\\t\\tmin-width: 30px;\\n\\t\\t}\\n\\t\\t.full-nav-header-right {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 0 auto;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-alerts {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t}\\n\\t\\t.full-nav-header-alerts-combined {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t.full-nav-header-right d2l-page-header-button {\\n\\t\\t\\tmargin-inline: 15px;\\n\\t\\t}\\n\\t\\t.full-nav-logo {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t\\tcolor: white;\\n\\t\\t\\tfont-size: 0.8rem;\\n\\t\\t\\tfont-weight: 700;\\n\\t\\t\\tpadding: 8px 14px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-inner {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tgap: 20px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-links {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 0 1 auto;\\n\\t\\t\\tgap: 20px;\\n\\t\\t\\tmin-width: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t.full-nav-footer-inner d2l-button-icon {\\n\\t\\t\\tflex: 0 0 auto;\\n\\t\\t}\\n\\t\\t.full-nav-footer-link {\\n\\t\\t\\tborder-bottom: 4px solid transparent;\\n\\t\\t\\tcolor: var(--d2l-color-ferrite);\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tpadding: 8px 0;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t}\\n\\t\\t.full-nav-footer-link:hover,\\n\\t\\t.full-nav-footer-link:focus-visible {\\n\\t\\t\\tborder-bottom-color: var(--d2l-color-celestine);\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t@media (max-width: 615px) {\\n\\t\\t\\t.full-nav-header-alerts {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\t\\t\\t.full-nav-header-alerts-combined {\\n\\t\\t\\t\\tdisplay: inline-flex;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 400px) {\\n\\t\\t\\t.full-nav-header-course {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
13159
+ "default": "\"css`\\n\\t\\t.full-nav-header {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 90px;\\n\\t\\t}\\n\\t\\t.full-nav-header-left {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex: 1;\\n\\t\\t}\\n\\t\\t.full-nav-logo {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t\\tcolor: white;\\n\\t\\t\\tfont-weight: 700;\\n\\t\\t\\tpadding: 8px 14px;\\n\\t\\t}\\n\\t\\t.full-nav-footer-links {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tgap: 20px;\\n\\t\\t\\tpadding: 0.4rem;\\n\\t\\t}\\n\\t`\""
13151
13160
  }
13152
13161
  ]
13153
13162
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.289.0",
3
+ "version": "3.290.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",
@@ -43,6 +43,7 @@
43
43
  "!test",
44
44
  "/components/demo",
45
45
  "/components/description-list/demo",
46
+ "/components/filter/demo/",
46
47
  "/components/selection/demo",
47
48
  "/components/table/demo",
48
49
  "!/components/demo/demo"