@brightspace-ui/core 2.48.0 → 2.49.1
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/skeleton/skeleton-mixin.js +6 -1
- package/custom-elements.json +11 -0
- 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
|
};
|
|
@@ -3,6 +3,11 @@ import { css } from 'lit';
|
|
|
3
3
|
import { dedupeMixin } from '@open-wc/dedupe-mixin';
|
|
4
4
|
import { RtlMixin } from '../../mixins/rtl-mixin.js';
|
|
5
5
|
|
|
6
|
+
// DE50056: starting in Safari 16, the pulsing animation causes FACE
|
|
7
|
+
// (and possibly elsewhere) to render a blank page
|
|
8
|
+
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
9
|
+
const animation = isSafari ? css`none` : css`loadingPulse 1.8s linear infinite`;
|
|
10
|
+
|
|
6
11
|
export const skeletonStyles = css`
|
|
7
12
|
@keyframes loadingPulse {
|
|
8
13
|
0% { background-color: var(--d2l-color-sylvite); }
|
|
@@ -14,7 +19,7 @@ export const skeletonStyles = css`
|
|
|
14
19
|
opacity: 0.999;
|
|
15
20
|
}
|
|
16
21
|
:host([skeleton]) .d2l-skeletize::before {
|
|
17
|
-
animation:
|
|
22
|
+
animation: ${animation};
|
|
18
23
|
background-color: var(--d2l-color-sylvite);
|
|
19
24
|
border-radius: 0.2rem;
|
|
20
25
|
bottom: 0;
|
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",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.49.1",
|
|
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",
|