@brightspace-ui/core 3.7.1 → 3.8.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/dropdown/demo/dropdown-positioning.html +137 -0
- package/components/dropdown/dropdown-content-mixin.js +56 -1
- package/components/icons/catalogue.md +82 -80
- package/components/icons/images/tier1/accessibility.svg +5 -0
- package/components/icons/images/tier2/accessibility.svg +5 -0
- package/components/icons/images/tier3/accessibility.svg +5 -0
- package/generated/icons/presetIconLoader.js +6 -0
- package/generated/icons/tier1/accessibility.js +7 -0
- package/generated/icons/tier2/accessibility.js +7 -0
- package/generated/icons/tier3/accessibility.js +7 -0
- package/package.json +1 -1
- package/components/dropdown/demo/dropdown-fixed.html +0 -171
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
|
6
|
+
<meta charset="UTF-8">
|
|
7
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
8
|
+
<script>
|
|
9
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
10
|
+
window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => (urlParams.get('position') === 'fixed') } } } } };
|
|
11
|
+
</script>
|
|
12
|
+
<script type="module">
|
|
13
|
+
import '../../demo/demo-page.js';
|
|
14
|
+
import '../../button/button.js';
|
|
15
|
+
import '../../button/button-subtle.js';
|
|
16
|
+
import '../../dialog/dialog.js';
|
|
17
|
+
import '../dropdown.js';
|
|
18
|
+
import '../dropdown-content.js';
|
|
19
|
+
import '../../table/demo/table-test.js';
|
|
20
|
+
</script>
|
|
21
|
+
</head>
|
|
22
|
+
|
|
23
|
+
<body unresolved>
|
|
24
|
+
|
|
25
|
+
<d2l-demo-page page-title="d2l-dropdown">
|
|
26
|
+
|
|
27
|
+
<h2>Dropdown (in a scrollable container)</h2>
|
|
28
|
+
<d2l-demo-snippet>
|
|
29
|
+
<template>
|
|
30
|
+
<div style="height: 250px; overflow: scroll;">
|
|
31
|
+
<p>Gabion warp American Main gunwalls cutlass gally cable gibbet jib keel. Trysail chantey swing the lead hempen halter hang the jib chase Jack Tar furl galleon scurvy. Brig splice the main brace provost pink rutters tender heave to Shiver me timbers belaying pin Brethren of the Coast.</p>
|
|
32
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
33
|
+
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
34
|
+
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
35
|
+
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
36
|
+
<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
|
|
37
|
+
<a href="http://www.desire2learn.com">D2L</a>
|
|
38
|
+
</d2l-dropdown-content>
|
|
39
|
+
</d2l-dropdown>
|
|
40
|
+
<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>
|
|
41
|
+
<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>
|
|
42
|
+
<p>Hardtack hang the jib haul wind booty pillage spike hearties Pirate Round tack yard. Piracy fire ship trysail stern scurvy blow the man down skysail salmagundi lee grog blossom. Hands gabion ho schooner lad ballast keel mutiny square-rigged haul wind.</p>
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
</d2l-demo-snippet>
|
|
46
|
+
|
|
47
|
+
<h2>Dropdown (in a table with sticky headers)</h2>
|
|
48
|
+
|
|
49
|
+
<d2l-demo-snippet>
|
|
50
|
+
<template>
|
|
51
|
+
<d2l-test-table type="default" sticky-headers sticky-controls></d2l-test-table>
|
|
52
|
+
</template>
|
|
53
|
+
</d2l-demo-snippet>
|
|
54
|
+
|
|
55
|
+
<h2>Dropdown (in another dropdown)</h2>
|
|
56
|
+
|
|
57
|
+
<d2l-demo-snippet>
|
|
58
|
+
<template>
|
|
59
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
60
|
+
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
61
|
+
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
62
|
+
<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign.</p>
|
|
63
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
64
|
+
<d2l-button-subtle class="d2l-dropdown-opener">Open Nested!</d2l-button-subtle>
|
|
65
|
+
<d2l-dropdown-content max-width="600" align="start" prefer-fixed-positioning>
|
|
66
|
+
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
67
|
+
<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
|
|
68
|
+
<a href="http://www.desire2learn.com">D2L</a>
|
|
69
|
+
</d2l-dropdown-content>
|
|
70
|
+
</d2l-dropdown>
|
|
71
|
+
<p>Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
|
|
72
|
+
</d2l-dropdown-content>
|
|
73
|
+
</d2l-dropdown>
|
|
74
|
+
</template>
|
|
75
|
+
</d2l-demo-snippet>
|
|
76
|
+
|
|
77
|
+
<h2>Dropdown (in a dialog)</h2>
|
|
78
|
+
|
|
79
|
+
<d2l-demo-snippet>
|
|
80
|
+
<template>
|
|
81
|
+
<d2l-button id="openDialog1">Show Dialog</d2l-button>
|
|
82
|
+
<d2l-dialog id="dialog1" title-text="Dialog Title">
|
|
83
|
+
<div>
|
|
84
|
+
<p>Bilge tack furl dance the hempen jig fathom weigh anchor mizzen Blimey Jack Ketch flogging. Lee galleon avast schooner long clothes scuppers pinnace bucko deadlights gibbet. Nipper brigantine Buccaneer Gold Road matey gangway booty tender killick Brethren of the Coast.</p>
|
|
85
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
86
|
+
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
87
|
+
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
88
|
+
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
89
|
+
<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
|
|
90
|
+
<a href="http://www.desire2learn.com">D2L</a>
|
|
91
|
+
</d2l-dropdown-content>
|
|
92
|
+
</d2l-dropdown>
|
|
93
|
+
<p>Piracy bowsprit Arr shrouds salmagundi scuttle heave down doubloon trysail Jack Ketch. Killick boom Jolly Roger Pieces of Eight crack Jennys tea cup Cat o'nine tails league Privateer topgallant lanyard. Cat o'nine tails coxswain scurvy spirits keelhaul quarterdeck matey nipper scallywag Jolly Roger.</p>
|
|
94
|
+
<p>Clap of thunder aye Corsair Barbary Coast prow shrouds schooner keel topmast code of conduct. Matey case shot spirits Davy Jones' Locker draft schooner Brethren of the Coast barkadeer jury mast measured fer yer chains. Bilge rat run a rig gaff warp loot clipper belaying pin main sheet lanyard avast.</p>
|
|
95
|
+
<p>Pieces of Eight lookout Letter of Marque mutiny tender spanker Jack Ketch long clothes crow's nest line. Lass draught six pounders spirits skysail jib American Main chase hulk coxswain. Run a shot across the bow galleon Cat o'nine tails brigantine reef Admiral of the Black wherry quarterdeck keelhaul coffer.</p>
|
|
96
|
+
</div>
|
|
97
|
+
<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
|
|
98
|
+
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
99
|
+
</d2l-dialog>
|
|
100
|
+
<script>
|
|
101
|
+
document.querySelector('#openDialog1').addEventListener('click', () => {
|
|
102
|
+
document.querySelector('#dialog1').opened = true;
|
|
103
|
+
});
|
|
104
|
+
</script>
|
|
105
|
+
</template>
|
|
106
|
+
</d2l-demo-snippet>
|
|
107
|
+
|
|
108
|
+
<h2>Dropdown (with DOM mutation)</h2>
|
|
109
|
+
|
|
110
|
+
<d2l-demo-snippet>
|
|
111
|
+
<template>
|
|
112
|
+
<div>
|
|
113
|
+
<div id="mutations-above"></div>
|
|
114
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
115
|
+
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
116
|
+
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
117
|
+
<d2l-button-subtle id="mutations-add-above">Add to Above</d2l-button-subtle>
|
|
118
|
+
</d2l-dropdown-content>
|
|
119
|
+
</d2l-dropdown>
|
|
120
|
+
</div>
|
|
121
|
+
<script>
|
|
122
|
+
document.querySelector('#mutations-add-above').addEventListener('click', e => {
|
|
123
|
+
const mutationsContainer = e.target.parentNode.parentNode.parentNode.querySelector('#mutations-above');
|
|
124
|
+
const newContent = document.createElement('p');
|
|
125
|
+
newContent.innerText = 'Blimey brigantine gangplank booty rope\'s end lugger heave down run a rig Yellow Jack dead men tell no tales. Pirate Round scuppers spanker hogshead Davy Jone\'s Locker heave down wench fluke marooned boom. Lanyard salmagundi careen doubloon swing the lead shrouds crow\'s nest parrel gun pressgang.';
|
|
126
|
+
mutationsContainer.appendChild(newContent);
|
|
127
|
+
});
|
|
128
|
+
</script>
|
|
129
|
+
</template>
|
|
130
|
+
</d2l-demo-snippet>
|
|
131
|
+
|
|
132
|
+
<script>
|
|
133
|
+
document.querySelector('d2l-demo-page').pageTitle = `d2l-dropdown (${ window.D2L.LP.Web.UI.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) ? 'fixed' : 'relative' })`;
|
|
134
|
+
</script>
|
|
135
|
+
</body>
|
|
136
|
+
|
|
137
|
+
</html>
|
|
@@ -2,7 +2,7 @@ import '../backdrop/backdrop.js';
|
|
|
2
2
|
import '../button/button.js';
|
|
3
3
|
import '../focus-trap/focus-trap.js';
|
|
4
4
|
import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
|
|
5
|
-
import { findComposedAncestor, getBoundingAncestor, isComposedAncestor, isVisible } from '../../helpers/dom.js';
|
|
5
|
+
import { findComposedAncestor, getBoundingAncestor, getComposedParent, isComposedAncestor, isVisible } from '../../helpers/dom.js';
|
|
6
6
|
import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
8
|
import { html } from 'lit';
|
|
@@ -284,6 +284,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
284
284
|
this._showBackdrop = false;
|
|
285
285
|
this._verticalOffset = defaultVerticalOffset;
|
|
286
286
|
|
|
287
|
+
this.__reposition = this.__reposition.bind(this);
|
|
287
288
|
this.__onResize = this.__onResize.bind(this);
|
|
288
289
|
this.__onAutoCloseFocus = this.__onAutoCloseFocus.bind(this);
|
|
289
290
|
this.__onAutoCloseClick = this.__onAutoCloseClick.bind(this);
|
|
@@ -316,6 +317,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
316
317
|
this.mediaQueryList = window.matchMedia(`(max-width: ${this.mobileBreakpointOverride - 1}px)`);
|
|
317
318
|
this._useMobileStyling = this.mediaQueryList.matches;
|
|
318
319
|
if (this.mediaQueryList.addEventListener) this.mediaQueryList.addEventListener('change', this._handleMobileResize);
|
|
320
|
+
if (this.opened) this.__addRepositionHandlers();
|
|
319
321
|
}
|
|
320
322
|
|
|
321
323
|
disconnectedCallback() {
|
|
@@ -330,6 +332,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
330
332
|
this.__dismissibleId = null;
|
|
331
333
|
|
|
332
334
|
if (this.__resizeObserver) this.__resizeObserver.disconnect();
|
|
335
|
+
this.__removeRepositionHandlers();
|
|
333
336
|
}
|
|
334
337
|
|
|
335
338
|
firstUpdated(changedProperties) {
|
|
@@ -447,6 +450,33 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
447
450
|
}
|
|
448
451
|
}
|
|
449
452
|
|
|
453
|
+
__addRepositionHandlers() {
|
|
454
|
+
if (!this._fixedPositioning) return;
|
|
455
|
+
|
|
456
|
+
const isScrollable = (node, prop) => {
|
|
457
|
+
const value = window.getComputedStyle(node, null).getPropertyValue(prop);
|
|
458
|
+
return (value === 'scroll' || value === 'auto');
|
|
459
|
+
};
|
|
460
|
+
|
|
461
|
+
let node = this;
|
|
462
|
+
this.__removeRepositionHandlers();
|
|
463
|
+
this._scrollablesObserved = [];
|
|
464
|
+
while (node) {
|
|
465
|
+
let observeScrollable = false;
|
|
466
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
467
|
+
observeScrollable = isScrollable(node, 'overflow-y') || isScrollable(node, 'overflow-x');
|
|
468
|
+
} else if (node.nodeType === Node.DOCUMENT_NODE) {
|
|
469
|
+
observeScrollable = true;
|
|
470
|
+
}
|
|
471
|
+
if (observeScrollable) {
|
|
472
|
+
this._scrollablesObserved.push(node);
|
|
473
|
+
node.addEventListener('scroll', this.__reposition);
|
|
474
|
+
}
|
|
475
|
+
node = getComposedParent(node);
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
}
|
|
479
|
+
|
|
450
480
|
__disconnectResizeObserver(entries) {
|
|
451
481
|
for (let i = 0; i < entries.length; i++) {
|
|
452
482
|
const entry = entries[i];
|
|
@@ -617,8 +647,12 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
617
647
|
|
|
618
648
|
await doOpen();
|
|
619
649
|
|
|
650
|
+
this.__addRepositionHandlers();
|
|
651
|
+
|
|
620
652
|
} else {
|
|
621
653
|
|
|
654
|
+
this.__removeRepositionHandlers();
|
|
655
|
+
|
|
622
656
|
if (this.__dismissibleId) {
|
|
623
657
|
clearDismissible(this.__dismissibleId);
|
|
624
658
|
this.__dismissibleId = null;
|
|
@@ -755,6 +789,27 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
755
789
|
await adjustPosition();
|
|
756
790
|
}
|
|
757
791
|
|
|
792
|
+
__removeRepositionHandlers() {
|
|
793
|
+
if (!this._fixedPositioning) return;
|
|
794
|
+
if (!this._scrollablesObserved) return;
|
|
795
|
+
|
|
796
|
+
this._scrollablesObserved.forEach(node => {
|
|
797
|
+
node.removeEventListener('scroll', this.__reposition);
|
|
798
|
+
});
|
|
799
|
+
this._scrollablesObserved = null;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
__reposition() {
|
|
803
|
+
// throttle repositioning (https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#scroll_event_throttling)
|
|
804
|
+
if (!this.__repositioning) {
|
|
805
|
+
requestAnimationFrame(() => {
|
|
806
|
+
this.__position(true);
|
|
807
|
+
this.__repositioning = false;
|
|
808
|
+
});
|
|
809
|
+
}
|
|
810
|
+
this.__repositioning = true;
|
|
811
|
+
}
|
|
812
|
+
|
|
758
813
|
__toggleScrollStyles() {
|
|
759
814
|
/* scrollHeight incorrect in IE by 4px second time opened */
|
|
760
815
|
this._bottomOverflow = this.__content.scrollHeight - (this.__content.scrollTop + this.__content.clientHeight) >= 5;
|
|
@@ -38,8 +38,9 @@ Size: `18px` x `18`px
|
|
|
38
38
|
|
|
39
39
|
| Icon | Name | | Icon | Name | | Icon | Name |
|
|
40
40
|
| :---: | :--- | --- | :---: | :--- | --- | :---: | :--- |
|
|
41
|
-
|  | accelerator | |  | access-special | |  | accelerator | |  | enrollment | |  | plus-default |
|
|
42
|
+
|  | access-special | |  | eportfolio | |  | plus-large-thick |
|
|
43
|
+
|  | accessibility | |  | event-log | |  | plus-large |
|
|
43
44
|
|  | add-file | |  | exemption-add | |  | preview |
|
|
44
45
|
|  | add-message | |  | exemption-remove | |  | print |
|
|
45
46
|
|  | add-to-lor | |  | export | |  | profile-default |
|
|
@@ -114,7 +115,6 @@ Size: `18px` x `18`px
|
|
|
114
115
|
|  | email-read | |  | pin-filled | |  | wizard |
|
|
115
116
|
|  | email | |  | pin-hollow | |  | zoom-in |
|
|
116
117
|
|  | enable | |  | play | |  | zoom-out |
|
|
117
|
-
|  | enrollment | |  | plus-default | | | |
|
|
118
118
|
|
|
119
119
|
## tier2
|
|
120
120
|
|
|
@@ -122,61 +122,62 @@ Size: `24px` x `24`px
|
|
|
122
122
|
|
|
123
123
|
| Icon | Name | | Icon | Name | | Icon | Name |
|
|
124
124
|
| :---: | :--- | --- | :---: | :--- | --- | :---: | :--- |
|
|
125
|
-
|  | accelerator | |  | eportfolio | |  | add | |  | file-audio | |  | check-box | |  | lock | |  | check | |  | lor | |  | divider | |  | online | |  | edit | |  | pin-hollow | |  | email | |  | print | |
|
|
125
|
+
|  | accelerator | |  | eportfolio | |  | profile-pic |
|
|
126
|
+
|  | accessibility | |  | evaluate-all | |  | project |
|
|
127
|
+
|  | add-file | |  | external | |  | publish-all |
|
|
128
|
+
|  | add-message | |  | feedback | |  | publish-to-lor |
|
|
129
|
+
|  | add-to-lor | |  | file-archive | |  | quicklink |
|
|
130
|
+
|  | add-user | |  | file-audio | |  | quiz-submissions |
|
|
131
|
+
|  | add | |  | file-document | |  | quizzing |
|
|
132
|
+
|  | ai | |  | file-image | |  | read-unread |
|
|
133
|
+
|  | alarmbell | |  | file-presentation | |  | read |
|
|
134
|
+
|  | alert | |  | file-video | |  | reading |
|
|
135
|
+
|  | arrow-collapse | |  | filter | |  | reflection |
|
|
136
|
+
|  | assignments | |  | flag-fill | |  | refresh |
|
|
137
|
+
|  | attach | |  | flag-hollow | |  | release-conditions |
|
|
138
|
+
|  | attendance | |  | folder | |  | remove-user |
|
|
139
|
+
|  | awards | |  | forms | |  | reorder |
|
|
140
|
+
|  | binder | |  | fullscreen | |  | reply-all |
|
|
141
|
+
|  | blocked | |  | game | |  | reply |
|
|
142
|
+
|  | blog | |  | gear | |  | reporting |
|
|
143
|
+
|  | book-management | |  | glossary | |  | rss |
|
|
144
|
+
|  | bookmark-filled | |  | google-drive | |  | rubrics |
|
|
145
|
+
|  | bookmark-hollow | |  | grade | |  | save |
|
|
146
|
+
|  | broken-link | |  | help | |  | scorm |
|
|
147
|
+
|  | browser | |  | history | |  | search |
|
|
148
|
+
|  | bullseye | |  | home | |  | seating |
|
|
149
|
+
|  | calculate | |  | insights-portal | |  | self-assessment |
|
|
150
|
+
|  | calendar | |  | link | |  | send |
|
|
151
|
+
|  | capture | |  | location | |  | share |
|
|
152
|
+
|  | change-file | |  | locations | |  | smallscreen |
|
|
153
|
+
|  | chat | |  | lock-unlocked | |  | style |
|
|
154
|
+
|  | check-box-unchecked | |  | lock | |  | subscribe-filled |
|
|
155
|
+
|  | check-box | |  | locker | |  | subscribe-hollow |
|
|
156
|
+
|  | check-circle | |  | lor | |  | surveys |
|
|
157
|
+
|  | check | |  | manage-dates | |  | syllabus |
|
|
158
|
+
|  | checklist | |  | manage-files | |  | table-of-contents |
|
|
159
|
+
|  | chevron-down | |  | media | |  | tag |
|
|
160
|
+
|  | chevron-left | |  | menu-hamburger | |  | time |
|
|
161
|
+
|  | chevron-right | |  | merge | |  | tools |
|
|
162
|
+
|  | chevron-up | |  | message-new | |  | topic-last |
|
|
163
|
+
|  | classes | |  | messages | |  | unapproved |
|
|
164
|
+
|  | classlist | |  | mic | |  | undo |
|
|
165
|
+
|  | contacts | |  | move-down | |  | unsaved |
|
|
166
|
+
|  | content | |  | move-to | |  | upload |
|
|
167
|
+
|  | copy | |  | move-up | |  | user-competencies |
|
|
168
|
+
|  | course-tile-sort | |  | navigate | |  | user-progress |
|
|
169
|
+
|  | coursebuilder | |  | news | |  | validate |
|
|
170
|
+
|  | delete | |  | one-drive | |  | video-assignment |
|
|
171
|
+
|  | discussions | |  | online-rooms | |  | view-submission-list |
|
|
172
|
+
|  | divider-big | |  | online | |  | viewed-notviewed |
|
|
173
|
+
|  | divider | |  | outcomes | |  | virtual-classroom |
|
|
174
|
+
|  | dot | |  | password | |  | visibility-hide |
|
|
175
|
+
|  | download | |  | pic | |  | visibility-show |
|
|
176
|
+
|  | draft | |  | pin-filled | |  | volume-muted |
|
|
177
|
+
|  | edit-not-editable | |  | pin-hollow | |  | volume |
|
|
178
|
+
|  | edit | |  | preview | |  | wizard |
|
|
179
|
+
|  | email-open | |  | print | | | |
|
|
180
|
+
|  | email | |  | profile-default | | | |
|
|
180
181
|
|
|
181
182
|
## tier3
|
|
182
183
|
|
|
@@ -184,26 +185,27 @@ Size: `30px` x `30`px
|
|
|
184
185
|
|
|
185
186
|
| Icon | Name | | Icon | Name | | Icon | Name |
|
|
186
187
|
| :---: | :--- | --- | :---: | :--- | --- | :---: | :--- |
|
|
187
|
-
|  | chevron-left | |  | file-video | |  | chevron-right | |  | gear | |  | close | |  | home | |  | accessibility | |  | download | |  | news |
|
|
189
|
+
|  | ai | |  | email-open | |  | notification-bell |
|
|
190
|
+
|  | alert | |  | email | |  | pause-borderless |
|
|
191
|
+
|  | assignments | |  | evaluate-all | |  | pause |
|
|
192
|
+
|  | bookmark | |  | export | |  | pic |
|
|
193
|
+
|  | bullseye | |  | external | |  | play-borderless |
|
|
194
|
+
|  | calendar | |  | feed | |  | play |
|
|
195
|
+
|  | chat | |  | file-audio | |  | preview |
|
|
196
|
+
|  | check-circle | |  | file-document | |  | profile-default |
|
|
197
|
+
|  | chevron-down | |  | file-presentation | |  | profile-pic |
|
|
198
|
+
|  | chevron-left-circle | |  | file-video | |  | publish-all |
|
|
199
|
+
|  | chevron-left | |  | game | |  | quizzing |
|
|
200
|
+
|  | chevron-right-circle | |  | gear | |  | rubric-graded |
|
|
201
|
+
|  | chevron-right | |  | google-drive | |  | rubric |
|
|
202
|
+
|  | chevron-up | |  | grade | |  | scorm |
|
|
203
|
+
|  | classes | |  | help | |  | search |
|
|
204
|
+
|  | close-thick | |  | home | |  | stop-borderless |
|
|
205
|
+
|  | close | |  | image | |  | stop |
|
|
206
|
+
|  | copy | |  | import | |  | syllabus |
|
|
207
|
+
|  | course-progress-complete | |  | lock-unlocked | |  | upload |
|
|
208
|
+
|  | course-progress-in-progress | |  | lock | |  | view-submission-list |
|
|
209
|
+
|  | course-progress-not-started | |  | menu-hamburger | | | |
|
|
210
|
+
|  | discussions | |  | menu | | | |
|
|
209
211
|
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18Zm0-2A7 7 0 1 0 9 2a7 7 0 0 0 0 14Z" fill="#494c4e"/>
|
|
3
|
+
<path d="M10.5 4.75a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" fill="#494c4e"/>
|
|
4
|
+
<path d="M13.154 7.207c.11-.069.236-.113.344-.184a.557.557 0 0 0-.19-1.011.523.523 0 0 0-.226.014c-.572.131-3.193.724-4.082.724-.889 0-3.51-.593-4.082-.724a.523.523 0 0 0-.226-.014.557.557 0 0 0-.21.997c.118.085.258.138.38.217.837.542 2.644 1.249 2.391 2.262l-1.078 3.986a.639.639 0 0 0 1.138.557L9 11l1.687 3.03a.639.639 0 0 0 1.138-.556l-1.078-3.986c-.23-.923 1.628-1.801 2.407-2.281Z" fill="#494c4e"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm0-2.667A9.333 9.333 0 0 0 21.333 12a9.333 9.333 0 1 0-18.666 0A9.333 9.333 0 0 0 12 21.333Z" fill="#494c4e"/>
|
|
3
|
+
<path d="M14 6.333a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" fill="#494c4e"/>
|
|
4
|
+
<path d="M17.595 9.574c.11-.069.232-.115.346-.177a.743.743 0 0 0-.235-1.388.6.6 0 0 0-.228.017C16.798 8.183 13.205 9 12 9s-4.797-.817-5.478-.974a.6.6 0 0 0-.228-.017.743.743 0 0 0-.256 1.377c.125.072.262.127.383.208 1.086.728 3.594 1.68 3.25 3.057l-1.437 5.315a.852.852 0 0 0 1.516.742L12 14.667l2.25 4.04a.852.852 0 0 0 1.516-.741L14.33 12.65c-.313-1.254 2.263-2.444 3.265-3.077Z" fill="#494c4e"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15Zm0-3.333c6.443 0 11.667-5.224 11.667-11.667S21.443 3.333 15 3.333 3.333 8.557 3.333 15 8.557 26.667 15 26.667Z" fill="#494c4e"/>
|
|
3
|
+
<path d="M17.5 7.917a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" fill="#494c4e"/>
|
|
4
|
+
<path d="M21.924 12.011c.184-.114.392-.188.573-.306a.928.928 0 0 0-.317-1.685.873.873 0 0 0-.377.023c-.953.22-5.322 1.207-6.803 1.207-1.481 0-5.85-.988-6.803-1.207a.873.873 0 0 0-.377-.023.929.929 0 0 0-.35 1.662c.197.142.43.23.633.361 1.395.903 4.408 2.082 3.985 3.77l-1.796 6.644a1.065 1.065 0 0 0 1.896.928L15 18.333l2.812 5.052a1.065 1.065 0 0 0 1.896-.928l-1.796-6.644c-.385-1.539 2.713-3.002 4.012-3.802Z" fill="#494c4e"/>
|
|
5
|
+
</svg>
|
|
@@ -113,6 +113,8 @@ export function loadSvg(icon) {
|
|
|
113
113
|
return import(/* webpackChunkName: "icon-accelerator" */'./tier1/accelerator.js');
|
|
114
114
|
case 'tier1:access-special':
|
|
115
115
|
return import(/* webpackChunkName: "icon-access-special" */'./tier1/access-special.js');
|
|
116
|
+
case 'tier1:accessibility':
|
|
117
|
+
return import(/* webpackChunkName: "icon-accessibility" */'./tier1/accessibility.js');
|
|
116
118
|
case 'tier1:add-file':
|
|
117
119
|
return import(/* webpackChunkName: "icon-add-file" */'./tier1/add-file.js');
|
|
118
120
|
case 'tier1:add-message':
|
|
@@ -571,6 +573,8 @@ export function loadSvg(icon) {
|
|
|
571
573
|
return import(/* webpackChunkName: "icon-zoom-out" */'./tier1/zoom-out.js');
|
|
572
574
|
case 'tier2:accelerator':
|
|
573
575
|
return import(/* webpackChunkName: "icon-accelerator" */'./tier2/accelerator.js');
|
|
576
|
+
case 'tier2:accessibility':
|
|
577
|
+
return import(/* webpackChunkName: "icon-accessibility" */'./tier2/accessibility.js');
|
|
574
578
|
case 'tier2:add-file':
|
|
575
579
|
return import(/* webpackChunkName: "icon-add-file" */'./tier2/add-file.js');
|
|
576
580
|
case 'tier2:add-message':
|
|
@@ -899,6 +903,8 @@ export function loadSvg(icon) {
|
|
|
899
903
|
return import(/* webpackChunkName: "icon-volume" */'./tier2/volume.js');
|
|
900
904
|
case 'tier2:wizard':
|
|
901
905
|
return import(/* webpackChunkName: "icon-wizard" */'./tier2/wizard.js');
|
|
906
|
+
case 'tier3:accessibility':
|
|
907
|
+
return import(/* webpackChunkName: "icon-accessibility" */'./tier3/accessibility.js');
|
|
902
908
|
case 'tier3:ai':
|
|
903
909
|
return import(/* webpackChunkName: "icon-ai" */'./tier3/ai.js');
|
|
904
910
|
case 'tier3:alert':
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// auto-generated
|
|
2
|
+
export const val = `<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18Zm0-2A7 7 0 1 0 9 2a7 7 0 0 0 0 14Z" fill="#494c4e"/>
|
|
4
|
+
<path d="M10.5 4.75a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" fill="#494c4e"/>
|
|
5
|
+
<path d="M13.154 7.207c.11-.069.236-.113.344-.184a.557.557 0 0 0-.19-1.011.523.523 0 0 0-.226.014c-.572.131-3.193.724-4.082.724-.889 0-3.51-.593-4.082-.724a.523.523 0 0 0-.226-.014.557.557 0 0 0-.21.997c.118.085.258.138.38.217.837.542 2.644 1.249 2.391 2.262l-1.078 3.986a.639.639 0 0 0 1.138.557L9 11l1.687 3.03a.639.639 0 0 0 1.138-.556l-1.078-3.986c-.23-.923 1.628-1.801 2.407-2.281Z" fill="#494c4e"/>
|
|
6
|
+
</svg>
|
|
7
|
+
`;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// auto-generated
|
|
2
|
+
export const val = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm0-2.667A9.333 9.333 0 0 0 21.333 12a9.333 9.333 0 1 0-18.666 0A9.333 9.333 0 0 0 12 21.333Z" fill="#494c4e"/>
|
|
4
|
+
<path d="M14 6.333a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" fill="#494c4e"/>
|
|
5
|
+
<path d="M17.595 9.574c.11-.069.232-.115.346-.177a.743.743 0 0 0-.235-1.388.6.6 0 0 0-.228.017C16.798 8.183 13.205 9 12 9s-4.797-.817-5.478-.974a.6.6 0 0 0-.228-.017.743.743 0 0 0-.256 1.377c.125.072.262.127.383.208 1.086.728 3.594 1.68 3.25 3.057l-1.437 5.315a.852.852 0 0 0 1.516.742L12 14.667l2.25 4.04a.852.852 0 0 0 1.516-.741L14.33 12.65c-.313-1.254 2.263-2.444 3.265-3.077Z" fill="#494c4e"/>
|
|
6
|
+
</svg>
|
|
7
|
+
`;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// auto-generated
|
|
2
|
+
export const val = `<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15Zm0-3.333c6.443 0 11.667-5.224 11.667-11.667S21.443 3.333 15 3.333 3.333 8.557 3.333 15 8.557 26.667 15 26.667Z" fill="#494c4e"/>
|
|
4
|
+
<path d="M17.5 7.917a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" fill="#494c4e"/>
|
|
5
|
+
<path d="M21.924 12.011c.184-.114.392-.188.573-.306a.928.928 0 0 0-.317-1.685.873.873 0 0 0-.377.023c-.953.22-5.322 1.207-6.803 1.207-1.481 0-5.85-.988-6.803-1.207a.873.873 0 0 0-.377-.023.929.929 0 0 0-.35 1.662c.197.142.43.23.633.361 1.395.903 4.408 2.082 3.985 3.77l-1.796 6.644a1.065 1.065 0 0 0 1.896.928L15 18.333l2.812 5.052a1.065 1.065 0 0 0 1.896-.928l-1.796-6.644c-.385-1.539 2.713-3.002 4.012-3.802Z" fill="#494c4e"/>
|
|
6
|
+
</svg>
|
|
7
|
+
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.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",
|
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
-
<script>
|
|
8
|
-
window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
|
|
9
|
-
</script>
|
|
10
|
-
<script type="module">
|
|
11
|
-
import '../../demo/demo-page.js';
|
|
12
|
-
import '../../button/button.js';
|
|
13
|
-
import '../../button/button-subtle.js';
|
|
14
|
-
import '../../dialog/dialog.js';
|
|
15
|
-
import '../dropdown.js';
|
|
16
|
-
import '../dropdown-content.js';
|
|
17
|
-
import { css, html, LitElement } from 'lit';
|
|
18
|
-
|
|
19
|
-
class MutationDemo extends LitElement {
|
|
20
|
-
|
|
21
|
-
static get properties() {
|
|
22
|
-
return {
|
|
23
|
-
count: { type: Number }
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
static get styles() {
|
|
28
|
-
return css`
|
|
29
|
-
:host {
|
|
30
|
-
border: 1px solid var(--d2l-color-tungsten);
|
|
31
|
-
border-radius: 6px;
|
|
32
|
-
display: block;
|
|
33
|
-
margin: 1rem;
|
|
34
|
-
position: relative;
|
|
35
|
-
}
|
|
36
|
-
div::before {
|
|
37
|
-
border-bottom: 1px solid black;
|
|
38
|
-
border-left: 1px solid black;
|
|
39
|
-
content: 'WC';
|
|
40
|
-
font-size: 0.7rem;
|
|
41
|
-
padding: 0 0.2rem;
|
|
42
|
-
position: absolute;
|
|
43
|
-
right: 0;
|
|
44
|
-
top: 0;
|
|
45
|
-
}
|
|
46
|
-
p {
|
|
47
|
-
margin: 0.5rem;
|
|
48
|
-
}
|
|
49
|
-
`;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
constructor() {
|
|
53
|
-
super();
|
|
54
|
-
this.count = 1;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
render() {
|
|
58
|
-
const elems = [];
|
|
59
|
-
for (let i = 0; i < this.count; i++) {
|
|
60
|
-
const newContent = document.createElement('p');
|
|
61
|
-
newContent.innerText = 'Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway.';
|
|
62
|
-
elems.push(newContent);
|
|
63
|
-
}
|
|
64
|
-
return html`<div>${elems}</div>`;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
customElements.define('d2l-demo-mutation', MutationDemo);
|
|
69
|
-
|
|
70
|
-
</script>
|
|
71
|
-
</head>
|
|
72
|
-
|
|
73
|
-
<body unresolved>
|
|
74
|
-
|
|
75
|
-
<d2l-demo-page page-title="d2l-dropdown (fixed position)">
|
|
76
|
-
|
|
77
|
-
<h2>Dropdown (mutation testing)</h2>
|
|
78
|
-
|
|
79
|
-
<d2l-demo-snippet>
|
|
80
|
-
<template>
|
|
81
|
-
<div style="border: 1px solid var(--d2l-color-tungsten); border-radius: 6px; height: 600px; overflow: scroll;">
|
|
82
|
-
<d2l-demo-mutation count="1"></d2l-demo-mutation>
|
|
83
|
-
<div style="padding: 25px; position: relative;">
|
|
84
|
-
<d2l-dropdown prefer-fixed-positioning>
|
|
85
|
-
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
86
|
-
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
87
|
-
<d2l-button-subtle id="add-content1">Add to Light</d2l-button-subtle>
|
|
88
|
-
<d2l-button-subtle id="add-content2">Add to Shadow</d2l-button-subtle>
|
|
89
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
90
|
-
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
91
|
-
commodo consequat. </p>
|
|
92
|
-
<a href="http://www.desire2learn.com">D2L</a>
|
|
93
|
-
</d2l-dropdown-content>
|
|
94
|
-
</d2l-dropdown>
|
|
95
|
-
<br><br><br><br><br><br>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
<script>
|
|
99
|
-
document.querySelector('#add-content1').addEventListener('click', e => {
|
|
100
|
-
const dropdown = e.target.parentNode.parentNode;
|
|
101
|
-
const newContent = document.createElement('p');
|
|
102
|
-
newContent.innerText = '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.';
|
|
103
|
-
dropdown.parentNode.insertBefore(newContent, dropdown);
|
|
104
|
-
});
|
|
105
|
-
document.querySelector('#add-content2').addEventListener('click', () => {
|
|
106
|
-
const mutationDemo = document.querySelector('d2l-demo-mutation');
|
|
107
|
-
mutationDemo.count += 1;
|
|
108
|
-
});
|
|
109
|
-
</script>
|
|
110
|
-
</template>
|
|
111
|
-
</d2l-demo-snippet>
|
|
112
|
-
|
|
113
|
-
<h2>Dropdown (transform container)</h2>
|
|
114
|
-
|
|
115
|
-
<d2l-demo-snippet>
|
|
116
|
-
<template>
|
|
117
|
-
|
|
118
|
-
<div style="padding: 25px; transform: translate(0);">
|
|
119
|
-
<d2l-dropdown prefer-fixed-positioning>
|
|
120
|
-
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
121
|
-
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
122
|
-
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
123
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
124
|
-
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
125
|
-
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
126
|
-
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
|
127
|
-
anim id est laborum.</p>
|
|
128
|
-
<a href="http://www.desire2learn.com">D2L</a>
|
|
129
|
-
</d2l-dropdown-content>
|
|
130
|
-
</d2l-dropdown>
|
|
131
|
-
</div>
|
|
132
|
-
|
|
133
|
-
</template>
|
|
134
|
-
</d2l-demo-snippet>
|
|
135
|
-
|
|
136
|
-
<h2>Dropdown (in a dialog)</h2>
|
|
137
|
-
|
|
138
|
-
<d2l-demo-snippet>
|
|
139
|
-
<template>
|
|
140
|
-
<d2l-button id="openDialog1">Show Dialog</d2l-button>
|
|
141
|
-
<d2l-dialog id="dialog1" title-text="Dialog Title">
|
|
142
|
-
<div>
|
|
143
|
-
<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>
|
|
144
|
-
<d2l-dropdown prefer-fixed-positioning>
|
|
145
|
-
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
146
|
-
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
147
|
-
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
148
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
149
|
-
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
150
|
-
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
151
|
-
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
|
152
|
-
anim id est laborum.</p>
|
|
153
|
-
<a href="http://www.desire2learn.com">D2L</a>
|
|
154
|
-
</d2l-dropdown-content>
|
|
155
|
-
</d2l-dropdown>
|
|
156
|
-
</div>
|
|
157
|
-
<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
|
|
158
|
-
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
159
|
-
</d2l-dialog>
|
|
160
|
-
<script>
|
|
161
|
-
document.querySelector('#openDialog1').addEventListener('click', () => {
|
|
162
|
-
document.querySelector('#dialog1').opened = true;
|
|
163
|
-
});
|
|
164
|
-
</script>
|
|
165
|
-
</template>
|
|
166
|
-
</d2l-demo-snippet>
|
|
167
|
-
|
|
168
|
-
</d2l-demo-page>
|
|
169
|
-
|
|
170
|
-
</body>
|
|
171
|
-
</html>
|