@brightspace-ui/core 2.39.1 → 2.40.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.
|
@@ -298,6 +298,10 @@ A tag-list allowing the user to see (and remove) the currently applied filters.
|
|
|
298
298
|
| `label` | String | The text displayed in this component's label |
|
|
299
299
|
<!-- docs: end hidden content -->
|
|
300
300
|
|
|
301
|
+
## Filter Overflow Group [d2l-filter-overflow-group]
|
|
302
|
+
|
|
303
|
+
**Coming Soon!**
|
|
304
|
+
|
|
301
305
|
## Filter Dimension: Date [d2l-filter-dimension-date]
|
|
302
306
|
|
|
303
307
|
**Coming Soon!**
|
|
@@ -0,0 +1,168 @@
|
|
|
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
|
+
</script>
|
|
14
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
|
|
15
|
+
<meta charset="UTF-8">
|
|
16
|
+
<style>
|
|
17
|
+
d2l-filter-tags {
|
|
18
|
+
padding-top: 1rem;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
|
|
23
|
+
<body unresolved>
|
|
24
|
+
|
|
25
|
+
<d2l-demo-page page-title="d2l-filter-overflow-group">
|
|
26
|
+
|
|
27
|
+
<h2>Filter Overflow Group</h2>
|
|
28
|
+
<d2l-demo-snippet>
|
|
29
|
+
<template>
|
|
30
|
+
<d2l-filter-overflow-group>
|
|
31
|
+
<d2l-filter>
|
|
32
|
+
<d2l-filter-dimension-set key="skill" text="Skill">
|
|
33
|
+
<d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
|
|
34
|
+
<d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
|
|
35
|
+
<d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
|
|
36
|
+
<d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
|
|
37
|
+
</d2l-filter-dimension-set>
|
|
38
|
+
</d2l-filter>
|
|
39
|
+
<d2l-filter>
|
|
40
|
+
<d2l-filter-dimension-set key="type" text="Type" selection-single>
|
|
41
|
+
<d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
|
|
42
|
+
<d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
|
|
43
|
+
<d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
|
|
44
|
+
<d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
|
|
45
|
+
</d2l-filter-dimension-set>
|
|
46
|
+
</d2l-filter>
|
|
47
|
+
<d2l-filter>
|
|
48
|
+
<d2l-filter-dimension-set key="provider" text="Semester3">
|
|
49
|
+
<d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
|
|
50
|
+
<d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
|
|
51
|
+
<d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
|
|
52
|
+
<d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
|
|
53
|
+
</d2l-filter-dimension-set>
|
|
54
|
+
</d2l-filter>
|
|
55
|
+
<d2l-filter>
|
|
56
|
+
<d2l-filter-dimension-set key="format" text="Format">
|
|
57
|
+
<d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
|
|
58
|
+
<d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
|
|
59
|
+
</d2l-filter-dimension-set>
|
|
60
|
+
</d2l-filter>
|
|
61
|
+
<d2l-filter>
|
|
62
|
+
<d2l-filter-dimension-set key="language" text="Language" selection-single>
|
|
63
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
64
|
+
<d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
|
|
65
|
+
<d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
|
|
66
|
+
</d2l-filter-dimension-set>
|
|
67
|
+
</d2l-filter>
|
|
68
|
+
<d2l-filter>
|
|
69
|
+
<d2l-filter-dimension-set key="course" text="Course" select-all>
|
|
70
|
+
<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
|
|
71
|
+
<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
|
|
72
|
+
<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
|
|
73
|
+
<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
|
|
74
|
+
<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
|
|
75
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
76
|
+
<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>
|
|
77
|
+
<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
|
|
78
|
+
<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
|
|
79
|
+
<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
|
|
80
|
+
<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
|
|
81
|
+
</d2l-filter-dimension-set>
|
|
82
|
+
<d2l-filter-dimension-set key="duration" text="Duration">
|
|
83
|
+
<d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
|
|
84
|
+
<d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
|
|
85
|
+
<d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
|
|
86
|
+
</d2l-filter-dimension-set>
|
|
87
|
+
<d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
|
|
88
|
+
<d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
|
|
89
|
+
<d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
|
|
90
|
+
<d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
|
|
91
|
+
</d2l-filter-dimension-set>
|
|
92
|
+
</d2l-filter>
|
|
93
|
+
</d2l-filter-overflow-group>
|
|
94
|
+
</template>
|
|
95
|
+
</d2l-demo-snippet>
|
|
96
|
+
|
|
97
|
+
<h2>Filter Overflow Group with Tags (external to d2l-filter-overflow-group)</h2>
|
|
98
|
+
<d2l-demo-snippet>
|
|
99
|
+
<template>
|
|
100
|
+
<d2l-filter-overflow-group>
|
|
101
|
+
<d2l-filter id="filter1">
|
|
102
|
+
<d2l-filter-dimension-set key="skill" text="Skill">
|
|
103
|
+
<d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
|
|
104
|
+
<d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
|
|
105
|
+
<d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
|
|
106
|
+
<d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
|
|
107
|
+
</d2l-filter-dimension-set>
|
|
108
|
+
</d2l-filter>
|
|
109
|
+
<d2l-filter id="filter2">
|
|
110
|
+
<d2l-filter-dimension-set key="type" text="Type" selection-single>
|
|
111
|
+
<d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
|
|
112
|
+
<d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
|
|
113
|
+
<d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
|
|
114
|
+
<d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
|
|
115
|
+
</d2l-filter-dimension-set>
|
|
116
|
+
</d2l-filter>
|
|
117
|
+
<d2l-filter id="filter3">
|
|
118
|
+
<d2l-filter-dimension-set key="provider" text="Semester3">
|
|
119
|
+
<d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
|
|
120
|
+
<d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
|
|
121
|
+
<d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
|
|
122
|
+
<d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
|
|
123
|
+
</d2l-filter-dimension-set>
|
|
124
|
+
</d2l-filter>
|
|
125
|
+
<d2l-filter id="filter4">
|
|
126
|
+
<d2l-filter-dimension-set key="format" text="Format">
|
|
127
|
+
<d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
|
|
128
|
+
<d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
|
|
129
|
+
</d2l-filter-dimension-set>
|
|
130
|
+
</d2l-filter>
|
|
131
|
+
<d2l-filter id="filter5">
|
|
132
|
+
<d2l-filter-dimension-set key="language" text="Language" selection-single>
|
|
133
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
134
|
+
<d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
|
|
135
|
+
<d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
|
|
136
|
+
</d2l-filter-dimension-set>
|
|
137
|
+
</d2l-filter>
|
|
138
|
+
<d2l-filter id="filter6">
|
|
139
|
+
<d2l-filter-dimension-set key="course" text="Course" select-all>
|
|
140
|
+
<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
|
|
141
|
+
<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
|
|
142
|
+
<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
|
|
143
|
+
<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
|
|
144
|
+
<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
|
|
145
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
146
|
+
<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>
|
|
147
|
+
<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
|
|
148
|
+
<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
|
|
149
|
+
<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
|
|
150
|
+
<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
|
|
151
|
+
</d2l-filter-dimension-set>
|
|
152
|
+
<d2l-filter-dimension-set key="duration" text="Duration">
|
|
153
|
+
<d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
|
|
154
|
+
<d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
|
|
155
|
+
<d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
|
|
156
|
+
</d2l-filter-dimension-set>
|
|
157
|
+
<d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
|
|
158
|
+
<d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
|
|
159
|
+
<d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
|
|
160
|
+
<d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
|
|
161
|
+
</d2l-filter-dimension-set>
|
|
162
|
+
</d2l-filter-overflow-group>
|
|
163
|
+
<d2l-filter-tags filter-ids="filter1 filter2 filter3 filter4 filter5 filter6" label="Applied Filters:"></d2l-filter-tags>
|
|
164
|
+
</template>
|
|
165
|
+
</d2l-demo-snippet>
|
|
166
|
+
</d2l-demo-page>
|
|
167
|
+
</body>
|
|
168
|
+
</html>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { css, LitElement } from 'lit';
|
|
2
|
+
import { OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container
|
|
6
|
+
* @slot - d2l-filters to be added to the container
|
|
7
|
+
*/
|
|
8
|
+
class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
|
|
9
|
+
|
|
10
|
+
static get styles() {
|
|
11
|
+
return [super.styles, css`
|
|
12
|
+
::slotted(d2l-filter) {
|
|
13
|
+
margin-right: 0.3rem;
|
|
14
|
+
}
|
|
15
|
+
`];
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
convertToOverflowItem(node) {
|
|
19
|
+
const tagName = node.tagName.toLowerCase();
|
|
20
|
+
if (tagName !== 'd2l-filter') console.warn(`d2l-filter-overflow-group: ${tagName} is invalid in this group. This group should only contain d2l-filter direct child elements.`);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
getOverflowContainer() {
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
customElements.define('d2l-filter-overflow-group', FilterOverflowGroup);
|
|
@@ -163,6 +163,14 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
|
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
+
convertToOverflowItem() {
|
|
167
|
+
throw new Error('OverflowGroupMixin.convertToOverflowItem must be overridden');
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
getOverflowContainer() {
|
|
171
|
+
throw new Error('OverflowGroupMixin.getOverflowContainer must be overridden');
|
|
172
|
+
}
|
|
173
|
+
|
|
166
174
|
_autoDetectBoundaries(items) {
|
|
167
175
|
if (!items) return;
|
|
168
176
|
|
|
@@ -196,6 +204,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
|
|
|
196
204
|
} else if (this._overflowContainer) {
|
|
197
205
|
this._overflowContainerWidth = this._overflowContainer.offsetWidth;
|
|
198
206
|
}
|
|
207
|
+
this._overflowContainerWidth = this._overflowContainerWidth || 0;
|
|
199
208
|
|
|
200
209
|
const showing = {
|
|
201
210
|
count: 0,
|
package/custom-elements.json
CHANGED
|
@@ -3359,6 +3359,71 @@
|
|
|
3359
3359
|
}
|
|
3360
3360
|
]
|
|
3361
3361
|
},
|
|
3362
|
+
{
|
|
3363
|
+
"name": "d2l-filter-overflow-group",
|
|
3364
|
+
"path": "./components/filter/filter-overflow-group.js",
|
|
3365
|
+
"description": "A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container",
|
|
3366
|
+
"attributes": [
|
|
3367
|
+
{
|
|
3368
|
+
"name": "auto-show",
|
|
3369
|
+
"description": "Use predefined classes on slot elements to set min and max slotted items to show",
|
|
3370
|
+
"type": "boolean",
|
|
3371
|
+
"default": "false"
|
|
3372
|
+
},
|
|
3373
|
+
{
|
|
3374
|
+
"name": "max-to-show",
|
|
3375
|
+
"description": "maximum amount of slotted items to show",
|
|
3376
|
+
"type": "number",
|
|
3377
|
+
"default": "-1"
|
|
3378
|
+
},
|
|
3379
|
+
{
|
|
3380
|
+
"name": "min-to-show",
|
|
3381
|
+
"description": "minimum amount of slotted items to show",
|
|
3382
|
+
"type": "number",
|
|
3383
|
+
"default": "1"
|
|
3384
|
+
}
|
|
3385
|
+
],
|
|
3386
|
+
"properties": [
|
|
3387
|
+
{
|
|
3388
|
+
"name": "autoShow",
|
|
3389
|
+
"attribute": "auto-show",
|
|
3390
|
+
"description": "Use predefined classes on slot elements to set min and max slotted items to show",
|
|
3391
|
+
"type": "boolean",
|
|
3392
|
+
"default": "false"
|
|
3393
|
+
},
|
|
3394
|
+
{
|
|
3395
|
+
"name": "maxToShow",
|
|
3396
|
+
"attribute": "max-to-show",
|
|
3397
|
+
"description": "maximum amount of slotted items to show",
|
|
3398
|
+
"type": "number",
|
|
3399
|
+
"default": "-1"
|
|
3400
|
+
},
|
|
3401
|
+
{
|
|
3402
|
+
"name": "minToShow",
|
|
3403
|
+
"attribute": "min-to-show",
|
|
3404
|
+
"description": "minimum amount of slotted items to show",
|
|
3405
|
+
"type": "number",
|
|
3406
|
+
"default": "1"
|
|
3407
|
+
},
|
|
3408
|
+
{
|
|
3409
|
+
"name": "openerType",
|
|
3410
|
+
"type": "string",
|
|
3411
|
+
"default": "\"DEFAULT\""
|
|
3412
|
+
}
|
|
3413
|
+
],
|
|
3414
|
+
"events": [
|
|
3415
|
+
{
|
|
3416
|
+
"name": "d2l-overflow-group-updated",
|
|
3417
|
+
"description": "Dispatched when there is an update performed to the overflow group"
|
|
3418
|
+
}
|
|
3419
|
+
],
|
|
3420
|
+
"slots": [
|
|
3421
|
+
{
|
|
3422
|
+
"name": "",
|
|
3423
|
+
"description": "d2l-filters to be added to the container"
|
|
3424
|
+
}
|
|
3425
|
+
]
|
|
3426
|
+
},
|
|
3362
3427
|
{
|
|
3363
3428
|
"name": "d2l-filter-tags",
|
|
3364
3429
|
"path": "./components/filter/filter-tags.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.40.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",
|