@brightspace-ui/core 3.288.3 → 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 (36) 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/components/page/page.js +52 -3
  8. package/custom-elements.json +11 -2
  9. package/lang/ar.js +2 -0
  10. package/lang/ca.js +2 -0
  11. package/lang/cy.js +2 -0
  12. package/lang/da.js +2 -0
  13. package/lang/de.js +2 -0
  14. package/lang/en-gb.js +2 -0
  15. package/lang/en.js +2 -0
  16. package/lang/es-es.js +2 -0
  17. package/lang/es.js +2 -0
  18. package/lang/fr-fr.js +2 -0
  19. package/lang/fr.js +2 -0
  20. package/lang/haw.js +2 -0
  21. package/lang/hi.js +2 -0
  22. package/lang/ja.js +2 -0
  23. package/lang/ko.js +2 -0
  24. package/lang/mi.js +2 -0
  25. package/lang/nl.js +2 -0
  26. package/lang/pl.js +2 -0
  27. package/lang/pt.js +2 -0
  28. package/lang/ru.js +2 -0
  29. package/lang/sv.js +2 -0
  30. package/lang/th.js +2 -0
  31. package/lang/tr.js +2 -0
  32. package/lang/ur.js +2 -0
  33. package/lang/vi.js +2 -0
  34. package/lang/zh-cn.js +2 -0
  35. package/lang/zh-tw.js +2 -0
  36. package/package.json +2 -1
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/components/page/page.js CHANGED
@@ -224,6 +224,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
224
224
  margin-inline: var(--d2l-page-margin-inline, 0);
225
225
  max-width: var(--d2l-page-content-max-width, 100%);
226
226
  padding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */
227
+ position: relative;
227
228
  }
228
229
  .content.has-panels {
229
230
  min-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));
@@ -232,6 +233,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
232
233
  main {
233
234
  flex: 1;
234
235
  min-width: min(${MAIN_MIN_WIDTH}px, 100%);
236
+ position: relative;
237
+ }
238
+ .content.has-panels main {
239
+ max-width: calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px);
240
+ min-width: min(${MAIN_MIN_WIDTH}px, calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px));
235
241
  }
236
242
 
237
243
  .side-nav,
@@ -245,6 +251,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
245
251
 
246
252
  .side-nav-panel,
247
253
  .supporting-panel {
254
+ background-color: white;
248
255
  overflow: hidden;
249
256
  }
250
257
 
@@ -322,6 +329,30 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
322
329
  margin-inline: var(--d2l-page-margin-inline, 0);
323
330
  max-width: var(--d2l-page-footer-max-width, 100%);
324
331
  }
332
+
333
+ /* Overlay Mode */
334
+ .scrim {
335
+ background-color: var(--d2l-color-regolith);
336
+ inset: 0;
337
+ opacity: 0.7;
338
+ position: absolute;
339
+ z-index: 14; /* To be over d2l-page-main panel header and sticky content of our core components */
340
+ }
341
+ @media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {
342
+ .content.scrimmed {
343
+ overflow: clip;
344
+ }
345
+ .side-nav-panel {
346
+ flex-shrink: 0;
347
+ }
348
+ .supporting {
349
+ display: flex;
350
+ inset-block: 0;
351
+ inset-inline-end: 0;
352
+ position: absolute;
353
+ z-index: 15; /* To be over d2l-page-* panel headers and sticky content of our core components */
354
+ }
355
+ }
325
356
  `;
326
357
 
327
358
  constructor() {
@@ -413,6 +444,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
413
444
  render() {
414
445
  const sideNavPanelKey = this._inOverlayMode ? 'side-nav-overlay' : 'side-nav';
415
446
  const supportingPanelKey = this._inMobileMode ? 'supporting-overlay' : (this._inOverlayMode ? 'supporting-overlay' : 'supporting'); // TO DO: Switch to supporting-mobile
447
+ const { showScrim, scrimMessage } = this.#determineScrimVisibility();
416
448
 
417
449
  const pageClasses = {
418
450
  'page': true,
@@ -420,7 +452,8 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
420
452
  };
421
453
  const contentClasses = {
422
454
  'content': true,
423
- 'has-panels': this._slotVisibility['side-nav'] || this._slotVisibility['supporting']
455
+ 'has-panels': this._slotVisibility['side-nav'] || this._slotVisibility['supporting'],
456
+ 'scrimmed': showScrim
424
457
  };
425
458
 
426
459
  return html`
@@ -428,7 +461,10 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
428
461
  ${this.#renderHeader()}
429
462
  <div class="${classMap(contentClasses)}">
430
463
  ${this.#renderSideNavPanel(sideNavPanelKey)}
431
- <main><slot></slot></main>
464
+ <main aria-label="${ifDefined(showScrim ? this.localize(scrimMessage) : undefined)}">
465
+ <div class="main" ?inert="${showScrim}"><slot></slot></div>
466
+ ${showScrim ? html`<div class="scrim"></div>` : nothing}
467
+ </main>
432
468
  ${this.#renderSupportingPanel(supportingPanelKey)}
433
469
  </div>
434
470
  ${this.#renderFooter()}
@@ -460,13 +496,26 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
460
496
  this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
461
497
  };
462
498
 
499
+ #determineScrimVisibility() {
500
+ let scrimMessage = null;
501
+ if (!this._inOverlayMode) return { showScrim: false, scrimMessage };
502
+
503
+ if (this._slotVisibility['side-nav'] && !this._panelState.getCollapsed('side-nav-overlay')) {
504
+ scrimMessage = 'components.page.side-nav-scrim';
505
+ } else if (this._slotVisibility['supporting'] && !this._panelState.getCollapsed('supporting-overlay')) {
506
+ // TO DO: No scrim for supporting in mobile mode
507
+ scrimMessage = 'components.page.supporting-scrim';
508
+ }
509
+ return { showScrim: scrimMessage !== null, scrimMessage };
510
+ }
511
+
463
512
  #getMaxDrawerHeight() {
464
513
  const reservedSpace = this._headerHeight + this._footerHeight + DIVIDER_WIDTH;
465
514
  return Math.max(DRAWER_MIN_HEIGHT, window.innerHeight - reservedSpace);
466
515
  }
467
516
 
468
517
  #getMaxPanelOverlayWidth() {
469
- const reservedSpace = MAIN_MIN_WIDTH + DIVIDER_WIDTH; // TO DO: Update when overlay styles added
518
+ const reservedSpace = DIVIDER_WIDTH + DIVIDER_GUTTER_WIDTH;
470
519
  return Math.max(PANEL_MIN_WIDTH, this._contentWidth - reservedSpace);
471
520
  }
472
521
 
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
  },
@@ -13589,7 +13598,7 @@
13589
13598
  "properties": [
13590
13599
  {
13591
13600
  "name": "styles",
13592
- "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: ${MOBILE_MODE_BREAKPOINT}px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\t\\t.side-nav[hidden],\\n\\t\\t.supporting[hidden] {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel.collapsed {\\n\\t\\t\\tpadding-inline-end: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tpadding-inline-start: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed .side-nav-panel-content,\\n\\t\\t.supporting-panel.collapsed .supporting-panel-content {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tpadding 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate.collapsed .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tvisibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
13601
+ "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: ${MOBILE_MODE_BREAKPOINT}px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t\\tposition: relative;\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t\\tposition: relative;\\n\\t\\t}\\n\\t\\t.content.has-panels main {\\n\\t\\t\\tmax-width: calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px);\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, calc(100% - ${DIVIDER_WIDTH}px - ${DIVIDER_GUTTER_WIDTH}px));\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\t\\t.side-nav[hidden],\\n\\t\\t.supporting[hidden] {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel.collapsed {\\n\\t\\t\\tpadding-inline-end: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tpadding-inline-start: ${DIVIDER_GUTTER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed .side-nav-panel-content,\\n\\t\\t.supporting-panel.collapsed .supporting-panel-content {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tpadding 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate.collapsed .supporting-panel-content {\\n\\t\\t\\t\\ttransition:\\n\\t\\t\\t\\t\\twidth 400ms cubic-bezier(0, 0.7, 0.5, 1),\\n\\t\\t\\t\\t\\tvisibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\n\\t\\t/* Overlay Mode */\\n\\t\\t.scrim {\\n\\t\\t\\tbackground-color: var(--d2l-color-regolith);\\n\\t\\t\\tinset: 0;\\n\\t\\t\\topacity: 0.7;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tz-index: 14; /* To be over d2l-page-main panel header and sticky content of our core components */\\n\\t\\t}\\n\\t\\t@media (max-width: ${OVERLAY_MODE_BREAKPOINT}px) {\\n\\t\\t\\t.content.scrimmed {\\n\\t\\t\\t\\toverflow: clip;\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel {\\n\\t\\t\\t\\tflex-shrink: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.supporting {\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tinset-block: 0;\\n\\t\\t\\t\\tinset-inline-end: 0;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers and sticky content of our core components */\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
13593
13602
  },
13594
13603
  {
13595
13604
  "name": "stateStorageKey",
package/lang/ar.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "الرئيسية",
161
161
  "components.page.side-nav-divider-label": "مقسّم التنقل الجانبي",
162
162
  "components.page.side-nav-label": "جانبية",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "فاصل اللوحة الداعمة",
164
165
  "components.page.supporting-label": "داعمة",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} مادة واحد}
package/lang/ca.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "Principal",
161
161
  "components.page.side-nav-divider-label": "Separador de la navegació lateral",
162
162
  "components.page.side-nav-label": "Lateral",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "Divisor del panell de suport",
164
165
  "components.page.supporting-label": "Suport",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} element}
package/lang/cy.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "Prif",
161
161
  "components.page.side-nav-divider-label": "Raniwr Llywio Ochr",
162
162
  "components.page.side-nav-label": "Ochr",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "Raniwr Panel Cymorth",
164
165
  "components.page.supporting-label": "Cefnogi",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} eitem}
package/lang/da.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "Hoved",
161
161
  "components.page.side-nav-divider-label": "Skillelinje i sidemenu",
162
162
  "components.page.side-nav-label": "Side",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "Skillelinje i sidepanel",
164
165
  "components.page.supporting-label": "Understøttende",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} element}
package/lang/de.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "Haupt-",
161
161
  "components.page.side-nav-divider-label": "Trennung für Seitennavigation",
162
162
  "components.page.side-nav-label": "Seiten-",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "Trennung für Unterstützungsbereich",
164
165
  "components.page.supporting-label": "Unterstützung",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} Element}
package/lang/en-gb.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "Main",
161
161
  "components.page.side-nav-divider-label": "Side Navigation Divider",
162
162
  "components.page.side-nav-label": "Side",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "Supporting Panel Divider",
164
165
  "components.page.supporting-label": "Supporting",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} item}
package/lang/en.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "Main",
161
161
  "components.page.side-nav-divider-label": "Side Navigation Divider",
162
162
  "components.page.side-nav-label": "Side",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "Supporting Panel Divider",
164
165
  "components.page.supporting-label": "Supporting",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} item}
package/lang/es-es.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "Principal",
161
161
  "components.page.side-nav-divider-label": "Separador de navegación lateral",
162
162
  "components.page.side-nav-label": "Lateral",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "Separador del panel complementario",
164
165
  "components.page.supporting-label": "Complementario",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} elemento}
package/lang/es.js CHANGED
@@ -160,8 +160,10 @@ export default {
160
160
  "components.page.header-nav-label": "Principal",
161
161
  "components.page.side-nav-divider-label": "Divisor de navegación lateral",
162
162
  "components.page.side-nav-label": "Lateral",
163
+ "components.page.side-nav-scrim": "Main content is currently hidden by the Side Navigation Panel. Close the panel to access.",
163
164
  "components.page.supporting-divider-label": "Divisor de panel de soporte",
164
165
  "components.page.supporting-label": "Soporte",
166
+ "components.page.supporting-scrim": "Main content is currently hidden by the Supporting Panel. Close the panel to access.",
165
167
  "components.pageable.info":
166
168
  `{count, plural,
167
169
  one {{countFormatted} elemento}