@brightspace-ui/core 2.48.0 → 2.50.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.
- package/components/filter/README.md +1 -0
- package/components/filter/demo/filter-overflow-group.html +70 -0
- package/components/filter/filter-overflow-group.js +50 -2
- package/components/overflow-group/overflow-group-mixin.js +3 -2
- package/components/selection/selection-mixin.js +1 -1
- package/custom-elements.json +17 -6
- package/package.json +1 -1
|
@@ -371,6 +371,7 @@ The `d2l-filter-overflow-group` is a container for multiple filters that handles
|
|
|
371
371
|
|---|---|---|
|
|
372
372
|
| `min-to-show` | Number | The minimum number of elements to always show. Please consult the design team when using this attribute. |
|
|
373
373
|
| `max-to-show` | Number | The maximum number of elements to show |
|
|
374
|
+
| `tags` | Boolean, default: `false` | Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group. |
|
|
374
375
|
<!-- docs: end hidden content -->
|
|
375
376
|
|
|
376
377
|
## Filter Dimension: Date [d2l-filter-dimension-date]
|
|
@@ -94,6 +94,76 @@
|
|
|
94
94
|
</template>
|
|
95
95
|
</d2l-demo-snippet>
|
|
96
96
|
|
|
97
|
+
<h2>Filter Overflow Group with Tags (built-in)</h2>
|
|
98
|
+
<d2l-demo-snippet>
|
|
99
|
+
<template>
|
|
100
|
+
<d2l-filter-overflow-group tags>
|
|
101
|
+
<d2l-filter>
|
|
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="filter-2">
|
|
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>
|
|
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>
|
|
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>
|
|
132
|
+
<d2l-filter-dimension-set key="language" text="Language" select-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>
|
|
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>
|
|
163
|
+
</d2l-filter-overflow-group>
|
|
164
|
+
</template>
|
|
165
|
+
</d2l-demo-snippet>
|
|
166
|
+
|
|
97
167
|
<h2>Filter Overflow Group with Tags (external to d2l-filter-overflow-group)</h2>
|
|
98
168
|
<d2l-demo-snippet>
|
|
99
169
|
<template>
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import './filter.js';
|
|
2
|
+
import './filter-tags.js';
|
|
2
3
|
import { css, html, LitElement } from 'lit';
|
|
3
4
|
import { OVERFLOW_CLASS, OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
|
|
5
|
+
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
4
6
|
import { RtlMixin } from '../../mixins/rtl-mixin.js';
|
|
5
7
|
|
|
6
8
|
function createFilterItem(node) {
|
|
@@ -15,6 +17,17 @@ function createFilterItem(node) {
|
|
|
15
17
|
*/
|
|
16
18
|
class FilterOverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
|
|
17
19
|
|
|
20
|
+
static get properties() {
|
|
21
|
+
return {
|
|
22
|
+
/**
|
|
23
|
+
* Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.
|
|
24
|
+
* @type {boolean}
|
|
25
|
+
*/
|
|
26
|
+
tags: { type: Boolean },
|
|
27
|
+
_filterIds: { state: true }
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
|
|
18
31
|
static get styles() {
|
|
19
32
|
return [super.styles, css`
|
|
20
33
|
::slotted(d2l-filter) {
|
|
@@ -27,16 +40,51 @@ class FilterOverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
|
|
|
27
40
|
`];
|
|
28
41
|
}
|
|
29
42
|
|
|
43
|
+
constructor() {
|
|
44
|
+
super();
|
|
45
|
+
|
|
46
|
+
this._filterIds = '';
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
connectedCallback() {
|
|
50
|
+
super.connectedCallback();
|
|
51
|
+
|
|
52
|
+
if (!this.tags) return;
|
|
53
|
+
|
|
54
|
+
this._filterTags = document.createElement('d2l-filter-tags');
|
|
55
|
+
this._filterTags.setAttribute('slot', 'adjacent');
|
|
56
|
+
this.appendChild(this._filterTags);
|
|
57
|
+
}
|
|
58
|
+
|
|
30
59
|
firstUpdated(changedProperties) {
|
|
31
60
|
super.firstUpdated(changedProperties);
|
|
32
61
|
|
|
33
62
|
this.addEventListener('d2l-filter-change', this._handleFilterChange);
|
|
34
63
|
}
|
|
35
64
|
|
|
65
|
+
updated(changedProperties) {
|
|
66
|
+
super.updated(changedProperties);
|
|
67
|
+
|
|
68
|
+
if (changedProperties.has('_filterIds') && this.tags) {
|
|
69
|
+
this._filterTags.setAttribute('filter-ids', this._filterIds.trim());
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
36
73
|
convertToOverflowItem(node) {
|
|
37
74
|
const tagName = node.tagName.toLowerCase();
|
|
38
|
-
if (tagName !== 'd2l-filter')
|
|
39
|
-
|
|
75
|
+
if (tagName !== 'd2l-filter') {
|
|
76
|
+
console.warn(`d2l-filter-overflow-group: ${tagName} is invalid in this group. This group should only contain d2l-filter direct child elements.`);
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (this.tags && !node.hasAttribute('data-filter-tags-subscribed')) {
|
|
81
|
+
const filterId = node.id || getUniqueId();
|
|
82
|
+
node.id = filterId;
|
|
83
|
+
this._filterIds += ` ${filterId}`;
|
|
84
|
+
node.setAttribute('data-filter-tags-subscribed', 'data-filter-tags-subscribed');
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return createFilterItem(node);
|
|
40
88
|
}
|
|
41
89
|
|
|
42
90
|
getOverflowContainer(overflowItems) {
|
|
@@ -141,6 +141,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
|
|
|
141
141
|
<slot @slotchange="${this._handleSlotChange}"></slot>
|
|
142
142
|
${overflowContainer}
|
|
143
143
|
</div>
|
|
144
|
+
<slot name="adjacent"></slot>
|
|
144
145
|
`;
|
|
145
146
|
}
|
|
146
147
|
|
|
@@ -211,7 +212,6 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
|
|
|
211
212
|
} else if (this._overflowContainer) {
|
|
212
213
|
this._overflowContainerWidth = this._overflowContainer.offsetWidth;
|
|
213
214
|
}
|
|
214
|
-
this._overflowContainerWidth = this._overflowContainerWidth || 0;
|
|
215
215
|
|
|
216
216
|
const showing = {
|
|
217
217
|
count: 0,
|
|
@@ -356,7 +356,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
|
|
|
356
356
|
|
|
357
357
|
if (!this._hasResized) {
|
|
358
358
|
this._hasResized = true;
|
|
359
|
-
|
|
359
|
+
this._handleSlotChange();
|
|
360
360
|
} else {
|
|
361
361
|
this._chomp();
|
|
362
362
|
}
|
|
@@ -382,6 +382,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
|
|
|
382
382
|
}
|
|
383
383
|
|
|
384
384
|
this._chomp();
|
|
385
|
+
this.requestUpdate();
|
|
385
386
|
});
|
|
386
387
|
}
|
|
387
388
|
};
|
|
@@ -50,7 +50,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
50
50
|
*/
|
|
51
51
|
selectionSingle: { type: Boolean, attribute: 'selection-single' },
|
|
52
52
|
/**
|
|
53
|
-
*
|
|
53
|
+
* ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.
|
|
54
54
|
* @type {number}
|
|
55
55
|
*/
|
|
56
56
|
selectionCountOverride: { type: Number, attribute: 'selection-count-override' }
|
package/custom-elements.json
CHANGED
|
@@ -3420,6 +3420,11 @@
|
|
|
3420
3420
|
"path": "./components/filter/filter-overflow-group.js",
|
|
3421
3421
|
"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",
|
|
3422
3422
|
"attributes": [
|
|
3423
|
+
{
|
|
3424
|
+
"name": "tags",
|
|
3425
|
+
"description": "Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.",
|
|
3426
|
+
"type": "boolean"
|
|
3427
|
+
},
|
|
3423
3428
|
{
|
|
3424
3429
|
"name": "max-to-show",
|
|
3425
3430
|
"description": "maximum amount of slotted items to show",
|
|
@@ -3434,6 +3439,12 @@
|
|
|
3434
3439
|
}
|
|
3435
3440
|
],
|
|
3436
3441
|
"properties": [
|
|
3442
|
+
{
|
|
3443
|
+
"name": "tags",
|
|
3444
|
+
"attribute": "tags",
|
|
3445
|
+
"description": "Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.",
|
|
3446
|
+
"type": "boolean"
|
|
3447
|
+
},
|
|
3437
3448
|
{
|
|
3438
3449
|
"name": "autoShow",
|
|
3439
3450
|
"type": "boolean",
|
|
@@ -7882,7 +7893,7 @@
|
|
|
7882
7893
|
},
|
|
7883
7894
|
{
|
|
7884
7895
|
"name": "selection-count-override",
|
|
7885
|
-
"description": "
|
|
7896
|
+
"description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
|
|
7886
7897
|
"type": "number"
|
|
7887
7898
|
},
|
|
7888
7899
|
{
|
|
@@ -7930,7 +7941,7 @@
|
|
|
7930
7941
|
{
|
|
7931
7942
|
"name": "selectionCountOverride",
|
|
7932
7943
|
"attribute": "selection-count-override",
|
|
7933
|
-
"description": "
|
|
7944
|
+
"description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
|
|
7934
7945
|
"type": "number"
|
|
7935
7946
|
},
|
|
7936
7947
|
{
|
|
@@ -9106,7 +9117,7 @@
|
|
|
9106
9117
|
"attributes": [
|
|
9107
9118
|
{
|
|
9108
9119
|
"name": "selection-count-override",
|
|
9109
|
-
"description": "
|
|
9120
|
+
"description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
|
|
9110
9121
|
"type": "number"
|
|
9111
9122
|
},
|
|
9112
9123
|
{
|
|
@@ -9126,7 +9137,7 @@
|
|
|
9126
9137
|
{
|
|
9127
9138
|
"name": "selectionCountOverride",
|
|
9128
9139
|
"attribute": "selection-count-override",
|
|
9129
|
-
"description": "
|
|
9140
|
+
"description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
|
|
9130
9141
|
"type": "number"
|
|
9131
9142
|
},
|
|
9132
9143
|
{
|
|
@@ -9658,7 +9669,7 @@
|
|
|
9658
9669
|
"attributes": [
|
|
9659
9670
|
{
|
|
9660
9671
|
"name": "selection-count-override",
|
|
9661
|
-
"description": "
|
|
9672
|
+
"description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
|
|
9662
9673
|
"type": "number"
|
|
9663
9674
|
},
|
|
9664
9675
|
{
|
|
@@ -9678,7 +9689,7 @@
|
|
|
9678
9689
|
{
|
|
9679
9690
|
"name": "selectionCountOverride",
|
|
9680
9691
|
"attribute": "selection-count-override",
|
|
9681
|
-
"description": "
|
|
9692
|
+
"description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
|
|
9682
9693
|
"type": "number"
|
|
9683
9694
|
},
|
|
9684
9695
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.50.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",
|