@brightspace-ui/core 3.227.3 → 3.227.5

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 (179) hide show
  1. package/components/button/button.js +8 -8
  2. package/components/colors/colors.js +8 -0
  3. package/components/count-badge/count-badge-icon.js +1 -1
  4. package/components/count-badge/count-badge-mixin.js +4 -4
  5. package/components/demo/test/demo-page-settings.test.js +25 -0
  6. package/components/demo/test/demo-page.test.js +17 -0
  7. package/package.json +1 -1
  8. package/components/alert/demo/alert-toast.html +0 -106
  9. package/components/alert/demo/alert.html +0 -82
  10. package/components/backdrop/demo/backdrop-loading.html +0 -166
  11. package/components/backdrop/demo/backdrop.html +0 -57
  12. package/components/breadcrumbs/demo/breadcrumbs.html +0 -53
  13. package/components/button/demo/button-add.html +0 -55
  14. package/components/button/demo/button-copy.html +0 -122
  15. package/components/button/demo/button-icon.html +0 -174
  16. package/components/button/demo/button-move.html +0 -38
  17. package/components/button/demo/button-split.html +0 -76
  18. package/components/button/demo/button-subtle.html +0 -132
  19. package/components/button/demo/button-toggle.html +0 -80
  20. package/components/button/demo/button.html +0 -67
  21. package/components/button/demo/floating-buttons-in-frame.html +0 -44
  22. package/components/button/demo/floating-buttons-in-tabs.html +0 -244
  23. package/components/button/demo/floating-buttons-page.html +0 -100
  24. package/components/button/demo/floating-buttons.html +0 -101
  25. package/components/calendar/demo/calendar.html +0 -76
  26. package/components/card/demo/card.html +0 -304
  27. package/components/collapsible-panel/demo/collapsible-panel.html +0 -218
  28. package/components/colors/demo/color-swatch.js +0 -240
  29. package/components/colors/demo/colors.html +0 -139
  30. package/components/count-badge/demo/count-badge-icon.html +0 -48
  31. package/components/count-badge/demo/count-badge.html +0 -73
  32. package/components/demo/demo/demo-snippet.html +0 -71
  33. package/components/description-list/demo/description-list-test.js +0 -142
  34. package/components/description-list/demo/description-list.html +0 -48
  35. package/components/dialog/demo/dialog-async-content-until.js +0 -89
  36. package/components/dialog/demo/dialog-async-content.js +0 -72
  37. package/components/dialog/demo/dialog-confirm.html +0 -102
  38. package/components/dialog/demo/dialog-container.js +0 -40
  39. package/components/dialog/demo/dialog-fullscreen.html +0 -273
  40. package/components/dialog/demo/dialog-nested.html +0 -94
  41. package/components/dialog/demo/dialog.html +0 -398
  42. package/components/dropdown/demo/dropdown-button.html +0 -102
  43. package/components/dropdown/demo/dropdown-context-menu.html +0 -129
  44. package/components/dropdown/demo/dropdown-flicker-inner.html +0 -70
  45. package/components/dropdown/demo/dropdown-flicker.html +0 -142
  46. package/components/dropdown/demo/dropdown-menu-demo-view.js +0 -37
  47. package/components/dropdown/demo/dropdown-menu.html +0 -227
  48. package/components/dropdown/demo/dropdown-more.html +0 -160
  49. package/components/dropdown/demo/dropdown-positioning.html +0 -127
  50. package/components/dropdown/demo/dropdown-tabs.html +0 -87
  51. package/components/dropdown/demo/dropdown.html +0 -217
  52. package/components/empty-state/demo/empty-state.html +0 -94
  53. package/components/expand-collapse/demo/expand-collapse-content.html +0 -58
  54. package/components/filter/demo/filter-load-more-demo.js +0 -182
  55. package/components/filter/demo/filter-overflow-group.html +0 -246
  56. package/components/filter/demo/filter-search-demo.js +0 -135
  57. package/components/filter/demo/filter-tags.html +0 -115
  58. package/components/filter/demo/filter.html +0 -230
  59. package/components/focus-trap/demo/focus-trap.html +0 -75
  60. package/components/form/demo/form-demo.js +0 -105
  61. package/components/form/demo/form-dialog-demo.js +0 -94
  62. package/components/form/demo/form-panel-demo.js +0 -89
  63. package/components/form/demo/form.html +0 -37
  64. package/components/hierarchical-view/demo/hierarchical-view.html +0 -221
  65. package/components/html-block/demo/html-block-code.html +0 -55
  66. package/components/html-block/demo/html-block.html +0 -696
  67. package/components/icons/demo/icon-color-override.js +0 -23
  68. package/components/icons/demo/icon-custom.html +0 -112
  69. package/components/icons/demo/icon-size-override.js +0 -24
  70. package/components/icons/demo/icon.html +0 -52
  71. package/components/inputs/demo/input-checkbox.html +0 -118
  72. package/components/inputs/demo/input-color-palette.js +0 -67
  73. package/components/inputs/demo/input-color.html +0 -110
  74. package/components/inputs/demo/input-date-range.html +0 -114
  75. package/components/inputs/demo/input-date-time-range.html +0 -128
  76. package/components/inputs/demo/input-date-time.html +0 -100
  77. package/components/inputs/demo/input-date.html +0 -81
  78. package/components/inputs/demo/input-group.html +0 -56
  79. package/components/inputs/demo/input-number.html +0 -136
  80. package/components/inputs/demo/input-percent.html +0 -99
  81. package/components/inputs/demo/input-radio-label-test.js +0 -45
  82. package/components/inputs/demo/input-radio-solo-test.js +0 -47
  83. package/components/inputs/demo/input-radio.html +0 -119
  84. package/components/inputs/demo/input-search.html +0 -75
  85. package/components/inputs/demo/input-select-test.js +0 -60
  86. package/components/inputs/demo/input-select.html +0 -45
  87. package/components/inputs/demo/input-text.html +0 -163
  88. package/components/inputs/demo/input-textarea.html +0 -124
  89. package/components/inputs/demo/input-time-range.html +0 -121
  90. package/components/inputs/demo/input-time.html +0 -95
  91. package/components/link/demo/link.html +0 -111
  92. package/components/list/demo/demo-list-nav.js +0 -170
  93. package/components/list/demo/demo-list-nested-iterations-helper.js +0 -168
  94. package/components/list/demo/demo-list-nested-lazy-load.js +0 -133
  95. package/components/list/demo/demo-list-nested.js +0 -291
  96. package/components/list/demo/demo-list.js +0 -241
  97. package/components/list/demo/list-color.html +0 -423
  98. package/components/list/demo/list-demo-scenarios.js +0 -380
  99. package/components/list/demo/list-drag-and-drop-position.js +0 -102
  100. package/components/list/demo/list-drag-and-drop.html +0 -82
  101. package/components/list/demo/list-expand-collapse.html +0 -136
  102. package/components/list/demo/list-item-actions.html +0 -371
  103. package/components/list/demo/list-item-custom.js +0 -204
  104. package/components/list/demo/list-item-layouts.html +0 -331
  105. package/components/list/demo/list-item-scroll.html +0 -122
  106. package/components/list/demo/list-layout.html +0 -575
  107. package/components/list/demo/list-nav.html +0 -110
  108. package/components/list/demo/list-nested.html +0 -270
  109. package/components/list/demo/list-selection.html +0 -301
  110. package/components/list/demo/list.html +0 -319
  111. package/components/loading-spinner/demo/loading-spinner-override.js +0 -34
  112. package/components/loading-spinner/demo/loading-spinner.html +0 -63
  113. package/components/menu/demo/checkbox-menu.html +0 -52
  114. package/components/menu/demo/custom-menu-item.js +0 -37
  115. package/components/menu/demo/custom-view.js +0 -63
  116. package/components/menu/demo/menu.html +0 -211
  117. package/components/menu/demo/radio-menu.html +0 -52
  118. package/components/meter/demo/meter.html +0 -115
  119. package/components/more-less/demo/more-less-test.js +0 -67
  120. package/components/more-less/demo/more-less.html +0 -71
  121. package/components/object-property-list/demo/object-property-list.html +0 -99
  122. package/components/offscreen/demo/offscreen-demo.js +0 -16
  123. package/components/offscreen/demo/offscreen.html +0 -44
  124. package/components/overflow-group/demo/demo-overflow-group.js +0 -29
  125. package/components/overflow-group/demo/overflow-group.html +0 -110
  126. package/components/paging/demo/pager-load-more.html +0 -120
  127. package/components/popover/demo/popover.html +0 -309
  128. package/components/progress/demo/progress.html +0 -104
  129. package/components/scroll-wrapper/demo/scroll-wrapper-test.js +0 -108
  130. package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -52
  131. package/components/selection/demo/demo-selection.js +0 -35
  132. package/components/selection/demo/selection.html +0 -198
  133. package/components/skeleton/demo/skeleton-group-nested-test.js +0 -71
  134. package/components/skeleton/demo/skeleton-group-test-wrapper.js +0 -18
  135. package/components/skeleton/demo/skeleton-group-test.js +0 -91
  136. package/components/skeleton/demo/skeleton-mixin.html +0 -78
  137. package/components/skeleton/demo/skeleton-test-box.js +0 -34
  138. package/components/skeleton/demo/skeleton-test-container.js +0 -45
  139. package/components/skeleton/demo/skeleton-test-heading.js +0 -44
  140. package/components/skeleton/demo/skeleton-test-link.js +0 -47
  141. package/components/skeleton/demo/skeleton-test-paragraph.js +0 -54
  142. package/components/skeleton/demo/skeleton-test-stack.js +0 -38
  143. package/components/skeleton/demo/skeleton-test-width.js +0 -20
  144. package/components/sorting/demo/sort.html +0 -37
  145. package/components/status-indicator/demo/status-indicator.html +0 -99
  146. package/components/switch/demo/switch.html +0 -95
  147. package/components/table/demo/table-test.js +0 -271
  148. package/components/table/demo/table.html +0 -107
  149. package/components/tabs/demo/tab-custom.js +0 -39
  150. package/components/tabs/demo/tabs-array.js +0 -43
  151. package/components/tabs/demo/tabs.html +0 -558
  152. package/components/tag-list/demo/tag-list.html +0 -117
  153. package/components/tooltip/demo/tooltip.html +0 -275
  154. package/components/typography/demo/typography.html +0 -93
  155. package/components/view-switcher/demo/demo-table-view.js +0 -41
  156. package/components/view-switcher/demo/view-switcher.html +0 -71
  157. package/directives/animate/demo/animate-test.js +0 -98
  158. package/directives/animate/demo/index.html +0 -23
  159. package/helpers/demo/announce-test.js +0 -37
  160. package/helpers/demo/announce.html +0 -19
  161. package/helpers/demo/dismissible-test.js +0 -66
  162. package/helpers/demo/dismissible.html +0 -38
  163. package/helpers/demo/gestures.html +0 -58
  164. package/helpers/demo/prism.html +0 -694
  165. package/helpers/demo/template-tags.html +0 -118
  166. package/mixins/arrow-keys/demo/arrow-keys-mixin.html +0 -29
  167. package/mixins/arrow-keys/demo/arrow-keys-test.js +0 -38
  168. package/mixins/async-container/demo/async-container.html +0 -109
  169. package/mixins/async-container/demo/async-container.js +0 -27
  170. package/mixins/async-container/demo/async-item.js +0 -80
  171. package/mixins/labelled/demo/labelled-mixin.html +0 -90
  172. package/mixins/localize/demo/localize-mixin-greeting.js +0 -39
  173. package/mixins/localize/demo/localize-mixin-mission.js +0 -25
  174. package/mixins/localize/demo/localize-mixin.html +0 -28
  175. package/templates/primary-secondary/demo/form.html +0 -55
  176. package/templates/primary-secondary/demo/index.html +0 -27
  177. package/templates/primary-secondary/demo/integration.html +0 -457
  178. package/templates/primary-secondary/demo/overflow-hidden.html +0 -22
  179. package/templates/primary-secondary/demo/width-type-normal.html +0 -26
package/components/popover/demo/popover.html DELETED
@@ -1,309 +0,0 @@
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 type="module">
9
- import '../../button/button.js';
10
- import '../../button/button-subtle.js';
11
- import '../../demo/demo-page.js';
12
- import '../../dialog/dialog.js';
13
- import '../../link/link.js';
14
- import '../test/popover.js';
15
-
16
- window.wireUpPopover = demo => {
17
- const popover = demo.querySelector('d2l-test-popover');
18
- const openButton = demo.querySelector('d2l-button-subtle[text="Open"]');
19
- openButton.addEventListener('click', () => popover.open(openButton));
20
- const closeButton = demo.querySelector('d2l-button-subtle[text="Close"]');
21
- if (closeButton) closeButton.addEventListener('click', () => popover.close());
22
- };
23
- </script>
24
- </head>
25
-
26
- <body unresolved>
27
-
28
- <d2l-demo-page page-title="d2l-popover">
29
-
30
- <h2>Popover</h2>
31
- <d2l-demo-snippet>
32
- <template>
33
- <d2l-button-subtle text="Open"></d2l-button-subtle>
34
- <d2l-test-popover>
35
- <div slot="header">header content</div>
36
- <d2l-button-subtle text="Close"></d2l-button-subtle>
37
- <div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
38
- <div style="border: 1px solid black; width: 600px;">stuff</div>
39
- <div slot="footer">footer content</div>
40
- </d2l-test-popover>
41
- <script data-demo-hide>
42
- window.wireUpPopover(document.currentScript.parentNode);
43
- </script>
44
- </template>
45
- </d2l-demo-snippet>
46
-
47
- <h2>Popover (content width less than min-width)</h2>
48
- <d2l-demo-snippet>
49
- <template>
50
- <d2l-button-subtle text="Open"></d2l-button-subtle>
51
- <d2l-test-popover>
52
- <div>1</div>
53
- </d2l-test-popover>
54
- <script data-demo-hide>
55
- window.wireUpPopover(document.currentScript.parentNode);
56
- </script>
57
- </template>
58
- </d2l-demo-snippet>
59
-
60
- <h2>Popover (content width greater than min-width, less than max-width)</h2>
61
- <d2l-demo-snippet>
62
- <template>
63
- <div style="text-align: center;"><d2l-button-subtle text="Open"></d2l-button-subtle></div>
64
- <d2l-test-popover>
65
- <div>Sink me piracy Gold Road.</div>
66
- </d2l-test-popover>
67
- <script data-demo-hide>
68
- window.wireUpPopover(document.currentScript.parentNode);
69
- </script>
70
- </template>
71
- </d2l-demo-snippet>
72
-
73
- <h2>Popover (content width greater than max-width)</h2>
74
- <d2l-demo-snippet>
75
- <template>
76
- <d2l-button-subtle text="Open"></d2l-button-subtle>
77
- <d2l-test-popover>
78
- <div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
79
- </d2l-test-popover>
80
- <script data-demo-hide>
81
- window.wireUpPopover(document.currentScript.parentNode);
82
- </script>
83
- </template>
84
- </d2l-demo-snippet>
85
-
86
- <h2>Popover (no pointer)</h2>
87
- <d2l-demo-snippet>
88
- <template>
89
- <d2l-button-subtle text="Open"></d2l-button-subtle>
90
- <d2l-test-popover no-pointer>
91
- <div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
92
- </d2l-test-popover>
93
- <script data-demo-hide>
94
- window.wireUpPopover(document.currentScript.parentNode);
95
- </script>
96
- </template>
97
- </d2l-demo-snippet>
98
-
99
- <h2>Popover (custom max-width, single-line)</h2>
100
- <d2l-demo-snippet>
101
- <template>
102
- <d2l-button-subtle text="Open"></d2l-button-subtle>
103
- <d2l-test-popover max-width="1000">
104
- <div>Sink me piracy Gold Road quarterdeck wherry and some.</div>
105
- </d2l-test-popover>
106
- <script data-demo-hide>
107
- window.wireUpPopover(document.currentScript.parentNode);
108
- </script>
109
- </template>
110
- </d2l-demo-snippet>
111
-
112
- <h2>Popover (custom max-width, multi-line)</h2>
113
- <d2l-demo-snippet>
114
- <template>
115
- <d2l-button-subtle text="Open"></d2l-button-subtle>
116
- <d2l-test-popover max-width="1000">
117
- <div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
118
- </d2l-test-popover>
119
- <script data-demo-hide>
120
- window.wireUpPopover(document.currentScript.parentNode);
121
- </script>
122
- </template>
123
- </d2l-demo-snippet>
124
-
125
- <h2>Popover (custom min-width)</h2>
126
- <d2l-demo-snippet>
127
- <template>
128
- <d2l-button-subtle text="Open"></d2l-button-subtle>
129
- <d2l-test-popover min-width="60">
130
- <div>1</div>
131
- </d2l-test-popover>
132
- <script data-demo-hide>
133
- window.wireUpPopover(document.currentScript.parentNode);
134
- </script>
135
- </template>
136
- </d2l-demo-snippet>
137
-
138
- <h2>Popover (position location)</h2>
139
- <d2l-demo-snippet>
140
- <template>
141
- <div>
142
- <select id="location">
143
- <option value="block-start">block-start</option>
144
- <option value="block-end" selected>block-end</option>
145
- <option value="inline-start">inline-start</option>
146
- <option value="inline-end">inline-end</option>
147
- </select>
148
- <select id="span">
149
- <option value="all" selected>all</option>
150
- <option value="start">start</option>
151
- <option value="end">end</option>
152
- </select>
153
- </div>
154
- <div style="text-align: center;">
155
- <d2l-button-subtle text="Open"></d2l-button-subtle>
156
- <d2l-test-popover position-location="block-end">
157
- <div>Sink me piracy Gold Road.</div>
158
- </d2l-test-popover>
159
- </div>
160
- <script data-demo-hide>
161
- const demo = document.currentScript.parentNode;
162
- window.wireUpPopover(demo);
163
- demo.querySelector('#location').addEventListener('change', e => {
164
- demo.querySelector('d2l-test-popover').positionLocation = e.target.value;
165
- });
166
- demo.querySelector('#span').addEventListener('change', e => {
167
- demo.querySelector('d2l-test-popover').positionSpan = e.target.value;
168
- });
169
- </script>
170
- </template>
171
- </d2l-demo-snippet>
172
-
173
- <h2>Popover (in a scrollable container)</h2>
174
- <d2l-demo-snippet>
175
- <template>
176
- <div style="height: 250px; overflow: scroll;">
177
- <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>
178
- <d2l-button-subtle text="Open"></d2l-button-subtle>
179
- <d2l-test-popover>
180
- <div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
181
- </d2l-test-popover>
182
- <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>
183
- <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>
184
- <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>
185
- </div>
186
- <script data-demo-hide>
187
- window.wireUpPopover(document.currentScript.parentNode);
188
- </script>
189
- </template>
190
- </d2l-demo-snippet>
191
-
192
- <h2>Popover (with DOM mutation)</h2>
193
- <d2l-demo-snippet>
194
- <template>
195
- <div>
196
- <div id="mutations-above"></div>
197
- <d2l-button-subtle text="Open"></d2l-button-subtle>
198
- <d2l-test-popover>
199
- <d2l-button-subtle id="mutations-add-above">Add to Above</d2l-button-subtle>
200
- </d2l-test-popover>
201
- </div>
202
- <script data-demo-hide>
203
- window.wireUpPopover(document.currentScript.parentNode);
204
-
205
- document.querySelector('#mutations-add-above').addEventListener('click', e => {
206
- const mutationsContainer = e.target.parentNode.parentNode.parentNode.querySelector('#mutations-above');
207
- const newContent = document.createElement('p');
208
- 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.';
209
- mutationsContainer.appendChild(newContent);
210
- });
211
- </script>
212
- </template>
213
- </d2l-demo-snippet>
214
-
215
- <h2>Popover (in a dialog)</h2>
216
- <d2l-demo-snippet>
217
- <template>
218
- <d2l-button id="openDialog1">Show Dialog</d2l-button>
219
- <d2l-dialog id="dialog1" title-text="Dialog Title">
220
- <div>
221
- <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>
222
- <d2l-button-subtle id="openPopover1" text="Open"></d2l-button-subtle>
223
- <d2l-test-popover id="popover1">
224
- <div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
225
- </d2l-test-popover>
226
- <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>
227
- <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>
228
- <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>
229
- </div>
230
- <d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
231
- <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
232
- </d2l-dialog>
233
- <script data-demo-hide>
234
- document.querySelector('#openDialog1').addEventListener('click', () => {
235
- document.querySelector('#dialog1').opened = true;
236
- });
237
- document.querySelector('#openPopover1').addEventListener('click', e => {
238
- const popover = document.querySelector('#popover1');
239
- popover.open(e.target);
240
- });
241
- </script>
242
- </template>
243
- </d2l-demo-snippet>
244
-
245
- <h2>Popover (in another popover)</h2>
246
- <d2l-demo-snippet>
247
- <template>
248
- <d2l-button-subtle id="outerOpener" text="Open"></d2l-button-subtle>
249
- <d2l-test-popover id="outerPopover">
250
- <d2l-button-subtle id="innerOpener" text="Open Nested"></d2l-button-subtle>
251
- <d2l-test-popover id="innerPopover">
252
- <div>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.</div>
253
- </d2l-test-popover>
254
- </d2l-test-popover>
255
- <script data-demo-hide>
256
- document.querySelector('#outerOpener').addEventListener('click', e => {
257
- const popover = document.querySelector('#outerPopover');
258
- popover.open(e.target);
259
- });
260
- document.querySelector('#innerOpener').addEventListener('click', e => {
261
- const popover = document.querySelector('#innerPopover');
262
- popover.open(e.target);
263
- });
264
- </script>
265
- </template>
266
- </d2l-demo-snippet>
267
-
268
-
269
- <h2>Popover (trap-focus)</h2>
270
- <d2l-demo-snippet>
271
- <template>
272
- <d2l-button-subtle text="Open"></d2l-button-subtle>
273
- <d2l-test-popover trap-focus style="max-width: 400px;">
274
- <d2l-link href="https://pirateipsum.me/" target="_blank">Pirate Ipsum</d2l-link>
275
- <div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
276
- <d2l-button-subtle text="Close"></d2l-button-subtle>
277
- </d2l-test-popover>
278
- <script data-demo-hide>
279
- window.wireUpPopover(document.currentScript.parentNode);
280
- </script>
281
- </template>
282
- </template>
283
- </d2l-demo-snippet>
284
-
285
- <h2>Popover (mobile tray)</h2>
286
- <d2l-demo-snippet>
287
- <template>
288
- <d2l-button-subtle text="Open"></d2l-button-subtle>
289
- <d2l-test-popover mobile-tray-location="inline-start" style="max-width: 400px;">
290
- <d2l-link href="https://pirateipsum.me/" target="_blank">Pirate Ipsum</d2l-link>
291
- <div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
292
- </d2l-test-popover>
293
- <script data-demo-hide>
294
- window.wireUpPopover(document.currentScript.parentNode);
295
- </script>
296
- </template>
297
- </template>
298
- </d2l-demo-snippet>
299
-
300
- </d2l-demo-page>
301
-
302
- <script>
303
- document.addEventListener('d2l-popover-open', e => console.log(e.type, e));
304
- document.addEventListener('d2l-popover-close', e => console.log(e.type, e));
305
- document.addEventListener('d2l-popover-focus-enter', e => console.log(e.type, e), true);
306
- </script>
307
- </body>
308
-
309
- </html>
package/components/progress/demo/progress.html DELETED
@@ -1,104 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
-
10
- import '../progress.js';
11
- </script>
12
- </head>
13
- <body unresolved>
14
- <d2l-demo-page page-title="d2l-progress">
15
-
16
- <h2>Basic</h2>
17
-
18
- <d2l-demo-snippet>
19
- <template>
20
- <d2l-progress label="Progress" value="1" max="3"></d2l-progress>
21
- </template>
22
- </d2l-demo-snippet>
23
-
24
- <h2>Sizes</h2>
25
-
26
- <d2l-demo-snippet>
27
- <template>
28
- <d2l-progress size="small" label="Small" value="8" max="10"></d2l-progress>
29
- <d2l-progress size="medium" label="Medium(default)" value="8" max="10"></d2l-progress>
30
- <d2l-progress size="large" label="Large" value="8" max="10"></d2l-progress>
31
- </template>
32
- </d2l-demo-snippet>
33
-
34
- <h2>Complete</h2>
35
-
36
- <d2l-demo-snippet>
37
- <template>
38
- <d2l-progress label="Progress" value="10" max="10"></d2l-progress>
39
- </template>
40
- </d2l-demo-snippet>
41
-
42
- <h2>Label Hidden</h2>
43
-
44
- <d2l-demo-snippet>
45
- <template>
46
- <d2l-progress label="Progress" label-hidden value="50"></d2l-progress>
47
- </template>
48
- </d2l-demo-snippet>
49
-
50
- <h2>Value Hidden</h2>
51
-
52
- <d2l-demo-snippet>
53
- <template>
54
- <d2l-progress label="Progress" value-hidden value="50"></d2l-progress>
55
- </template>
56
- </d2l-demo-snippet>
57
-
58
- <h2>Both Hidden</h2>
59
-
60
- <d2l-demo-snippet>
61
- <template>
62
- <d2l-progress label="Progress" value-hidden label-hidden value="50"></d2l-progress>
63
- </template>
64
- </d2l-demo-snippet>
65
-
66
-
67
- <h2>Animation</h2>
68
-
69
- <d2l-demo-snippet>
70
- <template>
71
- <button id="start">Start Animation</button><button id="reset">Reset</button>
72
- <d2l-progress label="Waiting..." announce-label></d2l-progress>
73
- <script data-demo-hide>
74
- (demo => {
75
- const startButton = demo.querySelector('#start');
76
- const resetButton = demo.querySelector('#reset');
77
- const progress = demo.querySelector('d2l-progress');
78
- let to = null;
79
- startButton.addEventListener('click', () => {
80
- let i = 0;
81
- const step = () => {
82
- console.log(i);
83
-
84
- if (i === 4) progress.label = 'Complete';
85
- else if (i >= 2) progress.label = 'Validating...';
86
- else progress.label = 'Uploading...';
87
- progress.value = i * 25;
88
- i++;
89
- if (i < 5) to = setTimeout(step, 1000);
90
- };
91
- step();
92
- });
93
- resetButton.addEventListener('click', () => {
94
- clearTimeout(to);
95
- progress.value = undefined;
96
- progress.label = 'Waiting...';
97
- });
98
- })(document.currentScript.parentNode);
99
- </script>
100
- </template>
101
- </d2l-demo-snippet>
102
- </d2l-demo-page>
103
- </body>
104
- </html>
package/components/scroll-wrapper/demo/scroll-wrapper-test.js DELETED
@@ -1,108 +0,0 @@
1
- import '../scroll-wrapper.js';
2
- import { css, html, LitElement } from 'lit';
3
- import { LocalizeCoreElement } from '../../../helpers/localize-core-element.js';
4
- import { styleMap } from 'lit/directives/style-map.js';
5
-
6
- class TestScrollWrapper extends LocalizeCoreElement(LitElement) {
7
-
8
- static get properties() {
9
- return {
10
- hideActions: { attribute: 'hide-actions', type: Boolean },
11
- scroll: { attribute: 'scroll', type: Number },
12
- splitScrollers: { attribute: 'split-scrollers', type: Boolean },
13
- width: { type: Number },
14
- _customScrollers: { state: true }
15
- };
16
- }
17
-
18
- static get styles() {
19
- return css`
20
- :host {
21
- display: block;
22
- }
23
- .d2l-scroll-wrapper-gradient {
24
- background: linear-gradient(to right, #e66465, #9198e5);
25
- height: 100px;
26
- }
27
- .d2l-scroll-wrapper-gradient-secondary {
28
- background: linear-gradient(to left, #e66465, #9198e5);
29
- height: 40px;
30
- position: relative;
31
- }
32
- .d2l-scroll-wrapper-gradient-secondary button {
33
- inset-inline-end: 0;
34
- position: absolute;
35
- top: 0;
36
- }
37
- `;
38
- }
39
-
40
- constructor() {
41
- super();
42
- this.hideActions = false;
43
- this.scroll = 0;
44
- this.splitScrollers = false;
45
- this.width = 300;
46
- this._customScrollers = {};
47
- }
48
-
49
- firstUpdated(changedProperties) {
50
- super.firstUpdated(changedProperties);
51
- this.scrollDistance();
52
- if (this.splitScrollers) {
53
- this._customScrollers = { primary: this.shadowRoot.querySelector('.primary'), secondary: this.shadowRoot.querySelectorAll('.secondary') };
54
- }
55
- }
56
-
57
- render() {
58
- const style = {
59
- width: `${this.width}px`
60
- };
61
-
62
- const secondaryScroller = html`
63
- <div class="secondary">
64
- <div class="d2l-scroll-wrapper-gradient-secondary" style="${styleMap(style)}">
65
- Secondary scroller (No mouse scroll)
66
- <button>Focus</button>
67
- </div>
68
- </div>
69
- `;
70
-
71
- const contents = this.splitScrollers ? html`
72
- ${secondaryScroller}
73
- <div class="primary">
74
- <div class="d2l-scroll-wrapper-gradient" style="${styleMap(style)}"></div>
75
- </div>
76
- ${secondaryScroller}
77
- ` : html`<div class="d2l-scroll-wrapper-gradient" style="${styleMap(style)}"></div>`;
78
-
79
- return html`
80
- <d2l-scroll-wrapper class="vdiff-target" ?hide-actions="${this.hideActions}" .customScrollers="${this._customScrollers}">
81
- ${contents}
82
- </d2l-scroll-wrapper>
83
- `;
84
- }
85
-
86
- updated(changedProperties) {
87
- super.updated(changedProperties);
88
- if (changedProperties.has('localize')) this.scrollDistance();
89
- }
90
-
91
- focus() {
92
- if (this.shadowRoot) this.shadowRoot.querySelector('d2l-scroll-wrapper')._container.focus();
93
- }
94
-
95
- async scrollDistance() {
96
- const scrollDir = document.documentElement.getAttribute('dir');
97
- if (this._dir === scrollDir) return;
98
- this._dir = scrollDir;
99
-
100
- if (this.scroll !== 0) {
101
- const wrapper = this.shadowRoot.querySelector('d2l-scroll-wrapper');
102
- await wrapper.updateComplete;
103
- requestAnimationFrame(() => wrapper.scrollDistance(this.scroll, false));
104
- }
105
- }
106
-
107
- }
108
- customElements.define('d2l-test-scroll-wrapper', TestScrollWrapper);
package/components/scroll-wrapper/demo/scroll-wrapper.html DELETED
@@ -1,52 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import './scroll-wrapper-test.js';
10
- </script>
11
- </head>
12
- <body unresolved>
13
-
14
- <d2l-demo-page page-title="d2l-scroll-wrapper">
15
-
16
- <button id="print">Print</button>
17
-
18
- <h2>Actions</h2>
19
- <d2l-demo-snippet>
20
- <template>
21
- <div style="max-width: 700px;">
22
- <d2l-test-scroll-wrapper width="1000" scroll="100"></d2l-test-scroll-wrapper>
23
- </div>
24
- </template>
25
- </d2l-demo-snippet>
26
-
27
- <h2>Hide Actions</h2>
28
- <d2l-demo-snippet>
29
- <template>
30
- <div style="max-width: 700px;">
31
- <d2l-test-scroll-wrapper width="1000" hide-actions></d2l-test-scroll-wrapper>
32
- </div>
33
- </template>
34
- </d2l-demo-snippet>
35
-
36
- <h2>Split scrollers</h2>
37
- <d2l-demo-snippet>
38
- <template>
39
- <div style="max-width: 700px;">
40
- <d2l-test-scroll-wrapper width="1000" split-scrollers></d2l-test-scroll-wrapper>
41
- </div>
42
- </template>
43
- </d2l-demo-snippet>
44
-
45
- </d2l-demo-page>
46
- <script>
47
- document.querySelector('#print').addEventListener('click', () => {
48
- window.print();
49
- });
50
- </script>
51
- </body>
52
- </html>
package/components/selection/demo/demo-selection.js DELETED
@@ -1,35 +0,0 @@
1
- import { css, html, LitElement } from 'lit';
2
- import { PageableMixin } from '../../paging/pageable-mixin.js';
3
- import { SelectionMixin } from '../selection-mixin.js';
4
-
5
- class DemoBase extends LitElement {
6
- static get styles() {
7
- return css`
8
- :host {
9
- display: block;
10
- }
11
- `;
12
- }
13
- render() {
14
- return html`
15
- <slot></slot>
16
- `;
17
- }
18
- }
19
-
20
- class DemoSelection extends SelectionMixin(DemoBase) {}
21
-
22
- class DemoPageable extends PageableMixin(DemoBase) {
23
- _getItemByIndex() {
24
- return null;
25
- }
26
- _getItemShowingCount() {
27
- return 3;
28
- }
29
- }
30
-
31
- class DemoSelectionPageable extends SelectionMixin(DemoPageable) {}
32
-
33
- customElements.define('d2l-demo-selection', DemoSelection);
34
- customElements.define('d2l-demo-pageable', DemoPageable);
35
- customElements.define('d2l-demo-selection-pageable', DemoSelectionPageable);