@brightspace-ui/core 2.85.1 → 2.85.3
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.
|
@@ -129,6 +129,7 @@ class CollapsiblePanel extends RtlMixin(LitElement) {
|
|
|
129
129
|
box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
|
|
130
130
|
position: sticky;
|
|
131
131
|
top: 0;
|
|
132
|
+
z-index: 11; /* must be greater greater than list-items with open dropdowns or tooltips */
|
|
132
133
|
}
|
|
133
134
|
.d2l-collapsible-panel.focused.scrolled .d2l-collapsible-panel-header {
|
|
134
135
|
top: 2px;
|
|
@@ -114,7 +114,6 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
|
|
|
114
114
|
position: absolute;
|
|
115
115
|
resize: none;
|
|
116
116
|
top: 0;
|
|
117
|
-
z-index: 2;
|
|
118
117
|
}
|
|
119
118
|
:host([no-border]) textarea.d2l-input {
|
|
120
119
|
border-color: transparent;
|
|
@@ -145,9 +144,6 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
|
|
|
145
144
|
padding-left: calc(18px + 0.8rem);
|
|
146
145
|
padding-right: 0.75rem;
|
|
147
146
|
}
|
|
148
|
-
:host([skeleton]) .d2l-skeletize::before {
|
|
149
|
-
z-index: 3;
|
|
150
|
-
}
|
|
151
147
|
`];
|
|
152
148
|
}
|
|
153
149
|
|
|
@@ -110,7 +110,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
110
110
|
|
|
111
111
|
:host([_tooltip-showing]),
|
|
112
112
|
:host([_dropdown-open]) {
|
|
113
|
-
z-index: 10; /* must be greater than adjacent selected items */
|
|
113
|
+
z-index: 10; /* must be greater than adjacent selected items (if this is increased, d2l-collapsible-panel must be updated too) */
|
|
114
114
|
}
|
|
115
115
|
:host([_fullscreen-within]) {
|
|
116
116
|
position: fixed; /* required for Safari */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.85.
|
|
3
|
+
"version": "2.85.3",
|
|
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",
|
|
@@ -9,26 +9,42 @@
|
|
|
9
9
|
import '../primary-secondary.js';
|
|
10
10
|
import '../../../components/button/button.js';
|
|
11
11
|
import '../../../components/button/button-icon.js';
|
|
12
|
+
import '../../../components/card/card.js';
|
|
13
|
+
import '../../../components/card/card-footer-link.js';
|
|
14
|
+
import '../../../components/collapsible-panel/collapsible-panel.js';
|
|
15
|
+
import '../../../components/collapsible-panel/collapsible-panel-summary-item.js';
|
|
12
16
|
import '../../../components/demo/demo-page.js';
|
|
13
17
|
import '../../../components/dialog/dialog-fullscreen.js';
|
|
14
18
|
import '../../../components/dropdown/dropdown-button-subtle.js';
|
|
19
|
+
import '../../../components/dropdown/dropdown-content.js';
|
|
15
20
|
import '../../../components/dropdown/dropdown-menu.js';
|
|
16
21
|
import '../../../components/dropdown/dropdown-more.js';
|
|
22
|
+
import '../../../components/inputs/input-textarea.js';
|
|
23
|
+
import '../../../components/list/list-controls.js';
|
|
24
|
+
import '../../../components/list/list-item-content.js';
|
|
25
|
+
import '../../../components/list/list-item.js';
|
|
26
|
+
import '../../../components/list/list.js';
|
|
17
27
|
import '../../../components/menu/menu.js';
|
|
18
28
|
import '../../../components/menu/menu-item.js';
|
|
19
29
|
import '../../../components/selection/selection-action.js';
|
|
20
30
|
import '../../../components/selection/selection-action-dropdown.js';
|
|
21
31
|
import '../../../components/selection/selection-action-menu-item.js';
|
|
22
32
|
import '../../../components/tooltip/tooltip.js';
|
|
23
|
-
import '../../../components/list/list-controls.js';
|
|
24
|
-
import '../../../components/list/list-item-content.js';
|
|
25
|
-
import '../../../components/list/list-item.js';
|
|
26
|
-
import '../../../components/list/list.js';
|
|
27
33
|
</script>
|
|
28
34
|
<style>
|
|
29
35
|
html {
|
|
30
36
|
--d2l-list-controls-background-color: #f1f5fb;
|
|
31
37
|
}
|
|
38
|
+
.cards {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-wrap: wrap;
|
|
41
|
+
gap: 0.5rem;
|
|
42
|
+
}
|
|
43
|
+
d2l-card {
|
|
44
|
+
flex: none;
|
|
45
|
+
height: 190px;
|
|
46
|
+
width: 140px;
|
|
47
|
+
}
|
|
32
48
|
</style>
|
|
33
49
|
</head>
|
|
34
50
|
<body>
|
|
@@ -326,28 +342,72 @@
|
|
|
326
342
|
</d2l-list>
|
|
327
343
|
|
|
328
344
|
</div>
|
|
329
|
-
<div slot="secondary">
|
|
330
|
-
|
|
331
|
-
<
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
<
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
345
|
+
<div slot="secondary" style="padding: 1rem;">
|
|
346
|
+
<d2l-dialog-fullscreen id="dialogFullscreen" title-text="Fullscreen Title">
|
|
347
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
348
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
349
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
350
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
351
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
352
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
353
|
+
<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
|
|
354
|
+
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
355
|
+
</d2l-dialog-fullscreen>
|
|
356
|
+
<d2l-collapsible-panel panel-title="Availability" expanded>
|
|
357
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
358
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Hidden by special access"></d2l-collapsible-panel-summary-item>
|
|
359
|
+
<d2l-button-icon slot="actions" icon="tier1:gear" id="open" text="Settings"></d2l-button-icon>
|
|
360
|
+
<d2l-dropdown-more slot="actions">
|
|
361
|
+
<d2l-dropdown-menu>
|
|
362
|
+
<d2l-menu>
|
|
363
|
+
<d2l-menu-item text="Duplicate"></d2l-menu-item>
|
|
364
|
+
<d2l-menu-item text="Delete"></d2l-menu-item>
|
|
365
|
+
</d2l-menu>
|
|
366
|
+
</d2l-dropdown-menu>
|
|
367
|
+
</d2l-dropdown-more>
|
|
368
|
+
<div class="cards">
|
|
369
|
+
<d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology">
|
|
370
|
+
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
371
|
+
<d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
|
|
372
|
+
<d2l-dropdown-content>
|
|
373
|
+
<div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div>
|
|
374
|
+
<div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div>
|
|
375
|
+
</d2l-dropdown-content>
|
|
376
|
+
</d2l-dropdown-more>
|
|
377
|
+
<div slot="content">EARTH101</div>
|
|
378
|
+
<div slot="footer">
|
|
379
|
+
<d2l-card-footer-link id="googleDriveLink1" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
|
|
380
|
+
<d2l-tooltip slot="tooltip" for="googleDriveLink1">Go to Google Drive</d2l-tooltip>
|
|
381
|
+
</d2l-card-footer-link>
|
|
382
|
+
<d2l-card-footer-link id="rssFeedLink1" icon="tier1:rss" text="RSS Feed" secondary-count="1">
|
|
383
|
+
<d2l-tooltip slot="tooltip" for="rssFeedLink1">RSS Feed</d2l-tooltip>
|
|
384
|
+
</d2l-card-footer-link>
|
|
385
|
+
</div>
|
|
386
|
+
</d2l-card>
|
|
387
|
+
<d2l-card align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting">
|
|
388
|
+
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-low-density-max-size.jpg">
|
|
389
|
+
<d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
|
|
390
|
+
<d2l-dropdown-content>
|
|
391
|
+
<div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div>
|
|
392
|
+
<div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div>
|
|
393
|
+
</d2l-dropdown-content>
|
|
394
|
+
</d2l-dropdown-more>
|
|
395
|
+
<div slot="content">ART201</div>
|
|
396
|
+
</d2l-card>
|
|
397
|
+
</div>
|
|
398
|
+
<d2l-input-textarea label="Extra Text" label-hidden rows="6" value="This is a d2l-input-textarea." style="margin-top: 1rem;"></d2l-input-textarea>
|
|
399
|
+
</d2l-collapsible-panel>
|
|
400
|
+
<script>
|
|
401
|
+
document.querySelector('#open').addEventListener('click', () => {
|
|
402
|
+
document.querySelector('#dialogFullscreen').opened = true;
|
|
403
|
+
});
|
|
404
|
+
document.querySelector('#dialogFullscreen').addEventListener('d2l-dialog-close', (e) => {
|
|
405
|
+
console.log('confirm action:', e.detail.action);
|
|
406
|
+
});
|
|
407
|
+
</script>
|
|
408
|
+
<p>
|
|
409
|
+
Quisque justo risus, elementum quis condimentum vitae, venenatis sit amet nisl. Vivamus interdum pretium libero dictum eleifend. Donec eros tortor, facilisis eget maximus in, malesuada a magna. Nulla ac felis turpis. Donec pellentesque est in rhoncus tempus. Proin ac purus porttitor, interdum est a, venenatis mi. Maecenas nunc nulla, viverra ut ornare id, luctus eu nulla. Pellentesque massa turpis, porta ut tincidunt ut, ullamcorper vitae urna. Nam congue euismod placerat. Vestibulum aliquet, metus vitae viverra posuere, lacus urna hendrerit turpis, vel laoreet ligula odio et nisl. Mauris id lectus magna. Sed gravida tincidunt sapien quis dapibus.Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spankerDeadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spankerDeadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker
|
|
410
|
+
</p>
|
|
351
411
|
</div>
|
|
352
412
|
<div slot="footer">I'm in the <b>footer</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
|
|
353
413
|
</d2l-template-primary-secondary>
|