@brightspace-ui/core 3.227.4 → 3.227.6

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 (180) hide show
  1. package/components/button/button-icon.js +10 -10
  2. package/components/button/button.js +8 -8
  3. package/components/demo/test/demo-page-settings.test.js +25 -0
  4. package/components/demo/test/demo-page.test.js +17 -0
  5. package/components/filter/filter-dimension-set-date-time-range-value.js +2 -1
  6. package/components/filter/filter-dimension-set.js +1 -1
  7. package/components/filter/filter.js +2 -1
  8. package/package.json +1 -1
  9. package/components/alert/demo/alert-toast.html +0 -106
  10. package/components/alert/demo/alert.html +0 -82
  11. package/components/backdrop/demo/backdrop-loading.html +0 -166
  12. package/components/backdrop/demo/backdrop.html +0 -57
  13. package/components/breadcrumbs/demo/breadcrumbs.html +0 -53
  14. package/components/button/demo/button-add.html +0 -55
  15. package/components/button/demo/button-copy.html +0 -122
  16. package/components/button/demo/button-icon.html +0 -174
  17. package/components/button/demo/button-move.html +0 -38
  18. package/components/button/demo/button-split.html +0 -76
  19. package/components/button/demo/button-subtle.html +0 -132
  20. package/components/button/demo/button-toggle.html +0 -80
  21. package/components/button/demo/button.html +0 -67
  22. package/components/button/demo/floating-buttons-in-frame.html +0 -44
  23. package/components/button/demo/floating-buttons-in-tabs.html +0 -244
  24. package/components/button/demo/floating-buttons-page.html +0 -100
  25. package/components/button/demo/floating-buttons.html +0 -101
  26. package/components/calendar/demo/calendar.html +0 -76
  27. package/components/card/demo/card.html +0 -304
  28. package/components/collapsible-panel/demo/collapsible-panel.html +0 -218
  29. package/components/colors/demo/color-swatch.js +0 -240
  30. package/components/colors/demo/colors.html +0 -139
  31. package/components/count-badge/demo/count-badge-icon.html +0 -48
  32. package/components/count-badge/demo/count-badge.html +0 -73
  33. package/components/demo/demo/demo-snippet.html +0 -71
  34. package/components/description-list/demo/description-list-test.js +0 -142
  35. package/components/description-list/demo/description-list.html +0 -48
  36. package/components/dialog/demo/dialog-async-content-until.js +0 -89
  37. package/components/dialog/demo/dialog-async-content.js +0 -72
  38. package/components/dialog/demo/dialog-confirm.html +0 -102
  39. package/components/dialog/demo/dialog-container.js +0 -40
  40. package/components/dialog/demo/dialog-fullscreen.html +0 -273
  41. package/components/dialog/demo/dialog-nested.html +0 -94
  42. package/components/dialog/demo/dialog.html +0 -398
  43. package/components/dropdown/demo/dropdown-button.html +0 -102
  44. package/components/dropdown/demo/dropdown-context-menu.html +0 -129
  45. package/components/dropdown/demo/dropdown-flicker-inner.html +0 -70
  46. package/components/dropdown/demo/dropdown-flicker.html +0 -142
  47. package/components/dropdown/demo/dropdown-menu-demo-view.js +0 -37
  48. package/components/dropdown/demo/dropdown-menu.html +0 -227
  49. package/components/dropdown/demo/dropdown-more.html +0 -160
  50. package/components/dropdown/demo/dropdown-positioning.html +0 -127
  51. package/components/dropdown/demo/dropdown-tabs.html +0 -87
  52. package/components/dropdown/demo/dropdown.html +0 -217
  53. package/components/empty-state/demo/empty-state.html +0 -94
  54. package/components/expand-collapse/demo/expand-collapse-content.html +0 -58
  55. package/components/filter/demo/filter-load-more-demo.js +0 -182
  56. package/components/filter/demo/filter-overflow-group.html +0 -246
  57. package/components/filter/demo/filter-search-demo.js +0 -135
  58. package/components/filter/demo/filter-tags.html +0 -115
  59. package/components/filter/demo/filter.html +0 -230
  60. package/components/focus-trap/demo/focus-trap.html +0 -75
  61. package/components/form/demo/form-demo.js +0 -105
  62. package/components/form/demo/form-dialog-demo.js +0 -94
  63. package/components/form/demo/form-panel-demo.js +0 -89
  64. package/components/form/demo/form.html +0 -37
  65. package/components/hierarchical-view/demo/hierarchical-view.html +0 -221
  66. package/components/html-block/demo/html-block-code.html +0 -55
  67. package/components/html-block/demo/html-block.html +0 -696
  68. package/components/icons/demo/icon-color-override.js +0 -23
  69. package/components/icons/demo/icon-custom.html +0 -112
  70. package/components/icons/demo/icon-size-override.js +0 -24
  71. package/components/icons/demo/icon.html +0 -52
  72. package/components/inputs/demo/input-checkbox.html +0 -118
  73. package/components/inputs/demo/input-color-palette.js +0 -67
  74. package/components/inputs/demo/input-color.html +0 -110
  75. package/components/inputs/demo/input-date-range.html +0 -114
  76. package/components/inputs/demo/input-date-time-range.html +0 -128
  77. package/components/inputs/demo/input-date-time.html +0 -100
  78. package/components/inputs/demo/input-date.html +0 -81
  79. package/components/inputs/demo/input-group.html +0 -56
  80. package/components/inputs/demo/input-number.html +0 -136
  81. package/components/inputs/demo/input-percent.html +0 -99
  82. package/components/inputs/demo/input-radio-label-test.js +0 -45
  83. package/components/inputs/demo/input-radio-solo-test.js +0 -47
  84. package/components/inputs/demo/input-radio.html +0 -119
  85. package/components/inputs/demo/input-search.html +0 -75
  86. package/components/inputs/demo/input-select-test.js +0 -60
  87. package/components/inputs/demo/input-select.html +0 -45
  88. package/components/inputs/demo/input-text.html +0 -163
  89. package/components/inputs/demo/input-textarea.html +0 -124
  90. package/components/inputs/demo/input-time-range.html +0 -121
  91. package/components/inputs/demo/input-time.html +0 -95
  92. package/components/link/demo/link.html +0 -111
  93. package/components/list/demo/demo-list-nav.js +0 -170
  94. package/components/list/demo/demo-list-nested-iterations-helper.js +0 -168
  95. package/components/list/demo/demo-list-nested-lazy-load.js +0 -133
  96. package/components/list/demo/demo-list-nested.js +0 -291
  97. package/components/list/demo/demo-list.js +0 -241
  98. package/components/list/demo/list-color.html +0 -423
  99. package/components/list/demo/list-demo-scenarios.js +0 -380
  100. package/components/list/demo/list-drag-and-drop-position.js +0 -102
  101. package/components/list/demo/list-drag-and-drop.html +0 -82
  102. package/components/list/demo/list-expand-collapse.html +0 -136
  103. package/components/list/demo/list-item-actions.html +0 -371
  104. package/components/list/demo/list-item-custom.js +0 -204
  105. package/components/list/demo/list-item-layouts.html +0 -331
  106. package/components/list/demo/list-item-scroll.html +0 -122
  107. package/components/list/demo/list-layout.html +0 -575
  108. package/components/list/demo/list-nav.html +0 -110
  109. package/components/list/demo/list-nested.html +0 -270
  110. package/components/list/demo/list-selection.html +0 -301
  111. package/components/list/demo/list.html +0 -319
  112. package/components/loading-spinner/demo/loading-spinner-override.js +0 -34
  113. package/components/loading-spinner/demo/loading-spinner.html +0 -63
  114. package/components/menu/demo/checkbox-menu.html +0 -52
  115. package/components/menu/demo/custom-menu-item.js +0 -37
  116. package/components/menu/demo/custom-view.js +0 -63
  117. package/components/menu/demo/menu.html +0 -211
  118. package/components/menu/demo/radio-menu.html +0 -52
  119. package/components/meter/demo/meter.html +0 -115
  120. package/components/more-less/demo/more-less-test.js +0 -67
  121. package/components/more-less/demo/more-less.html +0 -71
  122. package/components/object-property-list/demo/object-property-list.html +0 -99
  123. package/components/offscreen/demo/offscreen-demo.js +0 -16
  124. package/components/offscreen/demo/offscreen.html +0 -44
  125. package/components/overflow-group/demo/demo-overflow-group.js +0 -29
  126. package/components/overflow-group/demo/overflow-group.html +0 -110
  127. package/components/paging/demo/pager-load-more.html +0 -120
  128. package/components/popover/demo/popover.html +0 -309
  129. package/components/progress/demo/progress.html +0 -104
  130. package/components/scroll-wrapper/demo/scroll-wrapper-test.js +0 -108
  131. package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -52
  132. package/components/selection/demo/demo-selection.js +0 -35
  133. package/components/selection/demo/selection.html +0 -198
  134. package/components/skeleton/demo/skeleton-group-nested-test.js +0 -71
  135. package/components/skeleton/demo/skeleton-group-test-wrapper.js +0 -18
  136. package/components/skeleton/demo/skeleton-group-test.js +0 -91
  137. package/components/skeleton/demo/skeleton-mixin.html +0 -78
  138. package/components/skeleton/demo/skeleton-test-box.js +0 -34
  139. package/components/skeleton/demo/skeleton-test-container.js +0 -45
  140. package/components/skeleton/demo/skeleton-test-heading.js +0 -44
  141. package/components/skeleton/demo/skeleton-test-link.js +0 -47
  142. package/components/skeleton/demo/skeleton-test-paragraph.js +0 -54
  143. package/components/skeleton/demo/skeleton-test-stack.js +0 -38
  144. package/components/skeleton/demo/skeleton-test-width.js +0 -20
  145. package/components/sorting/demo/sort.html +0 -37
  146. package/components/status-indicator/demo/status-indicator.html +0 -99
  147. package/components/switch/demo/switch.html +0 -95
  148. package/components/table/demo/table-test.js +0 -271
  149. package/components/table/demo/table.html +0 -107
  150. package/components/tabs/demo/tab-custom.js +0 -39
  151. package/components/tabs/demo/tabs-array.js +0 -43
  152. package/components/tabs/demo/tabs.html +0 -558
  153. package/components/tag-list/demo/tag-list.html +0 -117
  154. package/components/tooltip/demo/tooltip.html +0 -275
  155. package/components/typography/demo/typography.html +0 -93
  156. package/components/view-switcher/demo/demo-table-view.js +0 -41
  157. package/components/view-switcher/demo/view-switcher.html +0 -71
  158. package/directives/animate/demo/animate-test.js +0 -98
  159. package/directives/animate/demo/index.html +0 -23
  160. package/helpers/demo/announce-test.js +0 -37
  161. package/helpers/demo/announce.html +0 -19
  162. package/helpers/demo/dismissible-test.js +0 -66
  163. package/helpers/demo/dismissible.html +0 -38
  164. package/helpers/demo/gestures.html +0 -58
  165. package/helpers/demo/prism.html +0 -694
  166. package/helpers/demo/template-tags.html +0 -118
  167. package/mixins/arrow-keys/demo/arrow-keys-mixin.html +0 -29
  168. package/mixins/arrow-keys/demo/arrow-keys-test.js +0 -38
  169. package/mixins/async-container/demo/async-container.html +0 -109
  170. package/mixins/async-container/demo/async-container.js +0 -27
  171. package/mixins/async-container/demo/async-item.js +0 -80
  172. package/mixins/labelled/demo/labelled-mixin.html +0 -90
  173. package/mixins/localize/demo/localize-mixin-greeting.js +0 -39
  174. package/mixins/localize/demo/localize-mixin-mission.js +0 -25
  175. package/mixins/localize/demo/localize-mixin.html +0 -28
  176. package/templates/primary-secondary/demo/form.html +0 -55
  177. package/templates/primary-secondary/demo/index.html +0 -27
  178. package/templates/primary-secondary/demo/integration.html +0 -457
  179. package/templates/primary-secondary/demo/overflow-hidden.html +0 -22
  180. package/templates/primary-secondary/demo/width-type-normal.html +0 -26
package/templates/primary-secondary/demo/index.html DELETED
@@ -1,27 +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="../../../components/demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../../components/demo/demo-page.js';
9
- import '../primary-secondary.js';
10
- import '../../../components/button/button.js';
11
- </script>
12
- </head>
13
- <body>
14
- <d2l-template-primary-secondary resizable storage-key="demo-index">
15
- <div slot="header" style="background-color: #dddddd;">I'm in the <b>header</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
16
- <div slot="primary">
17
- <p>I'm in the <b>primary</b> slot of the <b>d2l-template-primary-secondary</b> component!</p>
18
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo.
19
- </div>
20
- <div slot="secondary">
21
- <p>I'm in the <b>secondary</b> slot of the <b>d2l-template-primary-secondary</b> component!</p>
22
- 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
23
- </div>
24
- <div slot="footer">I'm in the <b>footer</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
25
- </d2l-template-primary-secondary>
26
- </body>
27
- </html>
package/templates/primary-secondary/demo/integration.html DELETED
@@ -1,457 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Primary-Secondary Template (Integration)</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" href="../../../components/demo/styles.css" type="text/css">
8
- <script type="module">
9
- import '../primary-secondary.js';
10
- import '../../../components/button/button.js';
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';
16
- import '../../../components/demo/demo-page.js';
17
- import '../../../components/dialog/dialog.js';
18
- import '../../../components/dialog/dialog-fullscreen.js';
19
- import '../../../components/dropdown/dropdown-button-subtle.js';
20
- import '../../../components/dropdown/dropdown-content.js';
21
- import '../../../components/dropdown/dropdown-menu.js';
22
- import '../../../components/dropdown/dropdown-more.js';
23
- import '../../../components/inputs/input-textarea.js';
24
- import '../../../components/list/list-controls.js';
25
- import '../../../components/list/list-item-content.js';
26
- import '../../../components/list/list-item.js';
27
- import '../../../components/list/list.js';
28
- import '../../../components/menu/menu.js';
29
- import '../../../components/menu/menu-item.js';
30
- import '../../../components/selection/selection-action.js';
31
- import '../../../components/selection/selection-action-dropdown.js';
32
- import '../../../components/selection/selection-action-menu-item.js';
33
- import '../../../components/tooltip/tooltip.js';
34
- </script>
35
- <style>
36
- html {
37
- --d2l-list-controls-background-color: #f1f5fb;
38
- }
39
- .cards {
40
- display: flex;
41
- flex-wrap: wrap;
42
- gap: 0.5rem;
43
- }
44
- d2l-card {
45
- flex: none;
46
- height: 190px;
47
- width: 140px;
48
- }
49
- </style>
50
- </head>
51
- <body>
52
- <d2l-template-primary-secondary resizable storage-key="demo-index">
53
- <div slot="controls" style="background-color: #dddddd;">I'm in the <b>controls</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
54
- <div slot="primary">
55
-
56
- <d2l-list item-count="50" extend-separators add-button>
57
- <d2l-list-controls slot="controls" select-all-pages-allowed>
58
- <d2l-selection-action id="openMainDialog" icon="tier1:plus-default" text="Add"></d2l-selection-action>
59
- <d2l-selection-action-dropdown text="Move To" requires-selection>
60
- <d2l-dropdown-menu>
61
- <d2l-menu label="Move To Options">
62
- <d2l-menu-item text="Top of Quiz"></d2l-menu-item>
63
- <d2l-menu-item text="Bottom of Quiz"></d2l-menu-item>
64
- <d2l-menu-item text="Section">
65
- <d2l-menu>
66
- <d2l-menu-item text="Option 1"></d2l-menu-item>
67
- <d2l-menu-item text="Option 2"></d2l-menu-item>
68
- </d2l-menu-item>
69
- </d2l-menu-item>
70
- </d2l-menu>
71
- </d2l-dropdown-menu>
72
- </d2l-selection-action-dropdown>
73
- <d2l-dropdown-button-subtle text="Actions">
74
- <d2l-dropdown-menu>
75
- <d2l-menu label="Actions">
76
- <d2l-selection-action-menu-item text="Bookmark (requires selection)" requires-selection></d2l-selection-action-menu-item>
77
- <d2l-selection-action-menu-item text="Advanced"></d2l-selection-action-menu-item>
78
- </d2l-menu>
79
- </d2l-dropdown-menu>
80
- </d2l-dropdown-button-subtle>
81
- <d2l-selection-action icon="tier1:gear" text="Settings" requires-selection></d2l-selection-action>
82
- </d2l-list-controls>
83
- <d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
84
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
85
- <d2l-list-item-content>
86
- <div>Introductory Earth Sciences</div>
87
- <div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
88
- </d2l-list-item-content>
89
- <div slot="actions">
90
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
91
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
92
- <d2l-dropdown-more text="Open!">
93
- <d2l-dropdown-menu>
94
- <d2l-menu label="Astronomy">
95
- <d2l-menu-item text="Introduction"></d2l-menu-item>
96
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
97
- </d2l-menu>
98
- </d2l-dropdown-menu>
99
- </d2l-dropdown-more>
100
- </div>
101
- </d2l-list-item>
102
- <d2l-list-item href="http://www.d2l.com" selectable key="2" selected label="Engineering Materials for Energy Systems">
103
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
104
- <d2l-list-item-content>
105
- <div>Engineering Materials for Energy Systems</div>
106
- <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
107
- </d2l-list-item-content>
108
- <div slot="actions">
109
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
110
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
111
- <d2l-dropdown-more text="Open!">
112
- <d2l-dropdown-menu>
113
- <d2l-menu label="Astronomy">
114
- <d2l-menu-item text="Introduction"></d2l-menu-item>
115
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
116
- </d2l-menu>
117
- </d2l-dropdown-menu>
118
- </d2l-dropdown-more>
119
- </div>
120
- </d2l-list-item>
121
- <d2l-list-item href="http://www.d2l.com" selectable key="3" label="Geomorphology and GIS">
122
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
123
- <d2l-list-item-content>
124
- <div>Geomorphology and GIS</div>
125
- <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
126
- </d2l-list-item-content>
127
- <div slot="actions">
128
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
129
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
130
- <d2l-dropdown-more text="Open!">
131
- <d2l-dropdown-menu>
132
- <d2l-menu label="Astronomy">
133
- <d2l-menu-item text="Introduction"></d2l-menu-item>
134
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
135
- </d2l-menu>
136
- </d2l-dropdown-menu>
137
- </d2l-dropdown-more>
138
- </div>
139
- </d2l-list-item>
140
- <d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
141
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
142
- <d2l-list-item-content>
143
- <div>Introductory Earth Sciences</div>
144
- <div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
145
- </d2l-list-item-content>
146
- <div slot="actions">
147
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
148
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
149
- <d2l-dropdown-more text="Open!">
150
- <d2l-dropdown-menu>
151
- <d2l-menu label="Astronomy">
152
- <d2l-menu-item text="Introduction"></d2l-menu-item>
153
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
154
- </d2l-menu>
155
- </d2l-dropdown-menu>
156
- </d2l-dropdown-more>
157
- </div>
158
- </d2l-list-item>
159
- <d2l-list-item href="http://www.d2l.com" selectable key="2" selected label="Engineering Materials for Energy Systems">
160
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
161
- <d2l-list-item-content>
162
- <div>Engineering Materials for Energy Systems</div>
163
- <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
164
- </d2l-list-item-content>
165
- <div slot="actions">
166
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
167
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
168
- <d2l-dropdown-more text="Open!">
169
- <d2l-dropdown-menu>
170
- <d2l-menu label="Astronomy">
171
- <d2l-menu-item text="Introduction"></d2l-menu-item>
172
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
173
- </d2l-menu>
174
- </d2l-dropdown-menu>
175
- </d2l-dropdown-more>
176
- </div>
177
- </d2l-list-item>
178
- <d2l-list-item href="http://www.d2l.com" selectable key="3" label="Geomorphology and GIS">
179
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
180
- <d2l-list-item-content>
181
- <div>Geomorphology and GIS</div>
182
- <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
183
- </d2l-list-item-content>
184
- <div slot="actions">
185
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
186
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
187
- <d2l-dropdown-more text="Open!">
188
- <d2l-dropdown-menu>
189
- <d2l-menu label="Astronomy">
190
- <d2l-menu-item text="Introduction"></d2l-menu-item>
191
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
192
- </d2l-menu>
193
- </d2l-dropdown-menu>
194
- </d2l-dropdown-more>
195
- </div>
196
- </d2l-list-item>
197
- </d2l-list>
198
-
199
- <div style="height: 100px;"></div>
200
-
201
- <d2l-list item-count="50">
202
- <d2l-list-controls slot="controls" select-all-pages-allowed>
203
- <d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
204
- <d2l-selection-action-dropdown text="Move To" requires-selection>
205
- <d2l-dropdown-menu>
206
- <d2l-menu label="Move To Options">
207
- <d2l-menu-item text="Top of Quiz"></d2l-menu-item>
208
- <d2l-menu-item text="Bottom of Quiz"></d2l-menu-item>
209
- <d2l-menu-item text="Section">
210
- <d2l-menu>
211
- <d2l-menu-item text="Option 1"></d2l-menu-item>
212
- <d2l-menu-item text="Option 2"></d2l-menu-item>
213
- </d2l-menu-item>
214
- </d2l-menu-item>
215
- </d2l-menu>
216
- </d2l-dropdown-menu>
217
- </d2l-selection-action-dropdown>
218
- <d2l-dropdown-button-subtle text="Actions">
219
- <d2l-dropdown-menu>
220
- <d2l-menu label="Actions">
221
- <d2l-selection-action-menu-item text="Bookmark (requires selection)" requires-selection></d2l-selection-action-menu-item>
222
- <d2l-selection-action-menu-item text="Advanced"></d2l-selection-action-menu-item>
223
- </d2l-menu>
224
- </d2l-dropdown-menu>
225
- </d2l-dropdown-button-subtle>
226
- <d2l-selection-action icon="tier1:gear" text="Settings" requires-selection></d2l-selection-action>
227
- </d2l-list-controls>
228
- <d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
229
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
230
- <d2l-list-item-content>
231
- <div>Introductory Earth Sciences</div>
232
- <div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
233
- </d2l-list-item-content>
234
- <div slot="actions">
235
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
236
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
237
- <d2l-dropdown-more text="Open!">
238
- <d2l-dropdown-menu>
239
- <d2l-menu label="Astronomy">
240
- <d2l-menu-item text="Introduction"></d2l-menu-item>
241
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
242
- </d2l-menu>
243
- </d2l-dropdown-menu>
244
- </d2l-dropdown-more>
245
- </div>
246
- </d2l-list-item>
247
- <d2l-list-item href="http://www.d2l.com" selectable key="2" selected label="Engineering Materials for Energy Systems">
248
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
249
- <d2l-list-item-content>
250
- <div>Engineering Materials for Energy Systems</div>
251
- <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
252
- </d2l-list-item-content>
253
- <div slot="actions">
254
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
255
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
256
- <d2l-dropdown-more text="Open!">
257
- <d2l-dropdown-menu>
258
- <d2l-menu label="Astronomy">
259
- <d2l-menu-item text="Introduction"></d2l-menu-item>
260
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
261
- </d2l-menu>
262
- </d2l-dropdown-menu>
263
- </d2l-dropdown-more>
264
- </div>
265
- </d2l-list-item>
266
- <d2l-list-item href="http://www.d2l.com" selectable key="3" label="Geomorphology and GIS">
267
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
268
- <d2l-list-item-content>
269
- <div>Geomorphology and GIS</div>
270
- <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
271
- </d2l-list-item-content>
272
- <div slot="actions">
273
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
274
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
275
- <d2l-dropdown-more text="Open!">
276
- <d2l-dropdown-menu>
277
- <d2l-menu label="Astronomy">
278
- <d2l-menu-item text="Introduction"></d2l-menu-item>
279
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
280
- </d2l-menu>
281
- </d2l-dropdown-menu>
282
- </d2l-dropdown-more>
283
- </div>
284
- </d2l-list-item>
285
- <d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
286
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
287
- <d2l-list-item-content>
288
- <div>Introductory Earth Sciences</div>
289
- <div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
290
- </d2l-list-item-content>
291
- <div slot="actions">
292
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
293
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
294
- <d2l-dropdown-more text="Open!">
295
- <d2l-dropdown-menu>
296
- <d2l-menu label="Astronomy">
297
- <d2l-menu-item text="Introduction"></d2l-menu-item>
298
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
299
- </d2l-menu>
300
- </d2l-dropdown-menu>
301
- </d2l-dropdown-more>
302
- </div>
303
- </d2l-list-item>
304
- <d2l-list-item href="http://www.d2l.com" selectable key="2" selected label="Engineering Materials for Energy Systems">
305
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
306
- <d2l-list-item-content>
307
- <div>Engineering Materials for Energy Systems</div>
308
- <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
309
- </d2l-list-item-content>
310
- <div slot="actions">
311
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
312
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
313
- <d2l-dropdown-more text="Open!">
314
- <d2l-dropdown-menu>
315
- <d2l-menu label="Astronomy">
316
- <d2l-menu-item text="Introduction"></d2l-menu-item>
317
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
318
- </d2l-menu>
319
- </d2l-dropdown-menu>
320
- </d2l-dropdown-more>
321
- </div>
322
- </d2l-list-item>
323
- <d2l-list-item href="http://www.d2l.com" selectable key="3" label="Geomorphology and GIS">
324
- <img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
325
- <d2l-list-item-content>
326
- <div>Geomorphology and GIS</div>
327
- <div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
328
- </d2l-list-item-content>
329
- <div slot="actions">
330
- <d2l-button-icon id="tooltip-btn-1" text="My Button" icon="tier1:preview"></d2l-button-icon>
331
- <d2l-tooltip for="tooltip-btn-1">Preview</d2l-tooltip>
332
- <d2l-dropdown-more text="Open!">
333
- <d2l-dropdown-menu>
334
- <d2l-menu label="Astronomy">
335
- <d2l-menu-item text="Introduction"></d2l-menu-item>
336
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
337
- </d2l-menu>
338
- </d2l-dropdown-menu>
339
- </d2l-dropdown-more>
340
- </div>
341
- </d2l-list-item>
342
- </d2l-list>
343
-
344
- <d2l-dialog-fullscreen id="dialogMain" title-text="Dialog Title" no-padding>
345
- <d2l-template-primary-secondary resizable storage-key="demo-dialog">
346
- <div slot="header" style="background-color: #dddddd; padding: 1rem;">Primary/Secondary Controls</div>
347
- <div slot="primary" style="padding: 1rem;">
348
- <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>
349
- <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>
350
- <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>
351
- <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>
352
- <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>
353
- <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>
354
- </div>
355
- <div slot="secondary" style="padding: 1rem;">
356
- <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>
357
- <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>
358
- <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>
359
- <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>
360
- <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>
361
- <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>
362
- </div>
363
- <div slot="footer">Primary/Secondary Footer</div>
364
- </d2l-template-primary-secondary>
365
- <d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
366
- <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
367
- </d2l-dialog-fullscreen>
368
-
369
- <script>
370
- document.querySelector('#openMainDialog').addEventListener('d2l-selection-action-click', () => {
371
- document.querySelector('#dialogMain').opened = true;
372
- });
373
- document.querySelector('#dialogMain').addEventListener('d2l-dialog-close', (e) => {
374
- console.log('main dialog action:', e.detail.action);
375
- });
376
- </script>
377
-
378
- </div>
379
- <div slot="secondary" style="padding: 1rem;">
380
-
381
- <d2l-collapsible-panel panel-title="Availability" expanded>
382
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
383
- <d2l-collapsible-panel-summary-item slot="summary" text="Hidden by special access"></d2l-collapsible-panel-summary-item>
384
- <d2l-button-icon slot="actions" icon="tier1:gear" id="openSecondaryDialog" text="Settings"></d2l-button-icon>
385
- <d2l-dropdown-more slot="actions">
386
- <d2l-dropdown-menu>
387
- <d2l-menu>
388
- <d2l-menu-item text="Add New"></d2l-menu-item>
389
- <d2l-menu-item text="Bookmark"></d2l-menu-item>
390
- <d2l-menu-item text="Duplicate"></d2l-menu-item>
391
- <d2l-menu-item text="Settings"></d2l-menu-item>
392
- <d2l-menu-item text="Move"></d2l-menu-item>
393
- <d2l-menu-item text="Publish"></d2l-menu-item>
394
- <d2l-menu-item text="Delete"></d2l-menu-item>
395
- </d2l-menu>
396
- </d2l-dropdown-menu>
397
- </d2l-dropdown-more>
398
- <div class="cards">
399
- <d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology">
400
- <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">
401
- <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
402
- <d2l-dropdown-content>
403
- <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>
404
- <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>
405
- </d2l-dropdown-content>
406
- </d2l-dropdown-more>
407
- <div slot="content">EARTH101</div>
408
- <div slot="footer">
409
- <d2l-card-footer-link id="googleDriveLink1" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
410
- <d2l-tooltip slot="tooltip" for="googleDriveLink1">Go to Google Drive</d2l-tooltip>
411
- </d2l-card-footer-link>
412
- <d2l-card-footer-link id="rssFeedLink1" icon="tier1:rss" text="RSS Feed" secondary-count="1">
413
- <d2l-tooltip slot="tooltip" for="rssFeedLink1">RSS Feed</d2l-tooltip>
414
- </d2l-card-footer-link>
415
- </div>
416
- </d2l-card>
417
- <d2l-card align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting">
418
- <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">
419
- <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
420
- <d2l-dropdown-content>
421
- <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>
422
- <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>
423
- </d2l-dropdown-content>
424
- </d2l-dropdown-more>
425
- <div slot="content">ART201</div>
426
- </d2l-card>
427
- </div>
428
- <d2l-input-textarea label="Extra Text" label-hidden rows="6" value="This is a d2l-input-textarea." style="margin-top: 1rem;"></d2l-input-textarea>
429
- </d2l-collapsible-panel>
430
-
431
- <d2l-dialog id="dialogSecondary" title-text="Dialog Title">
432
- <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>
433
- <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>
434
- <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>
435
- <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>
436
- <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>
437
- <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>
438
- <d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
439
- <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
440
- </d2l-dialog>
441
-
442
- <script>
443
- document.querySelector('#openSecondaryDialog').addEventListener('click', () => {
444
- document.querySelector('#dialogSecondary').opened = true;
445
- });
446
- document.querySelector('#dialogSecondary').addEventListener('d2l-dialog-close', (e) => {
447
- console.log('secondary dialog action:', e.detail.action);
448
- });
449
- </script>
450
- <p>
451
- 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
452
- </p>
453
- </div>
454
- <div slot="footer">I'm in the <b>footer</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
455
- </d2l-template-primary-secondary>
456
- </body>
457
- </html>
package/templates/primary-secondary/demo/overflow-hidden.html DELETED
@@ -1,22 +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="../../../components/demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../../components/demo/demo-page.js';
9
- import '../primary-secondary.js';
10
- </script>
11
- </head>
12
- <body>
13
- <d2l-template-primary-secondary primary-overflow="hidden" width-type="fullscreen" storage-key="demo-overflow-hidden">
14
- <div slot="header" style="background-color: #dddddd;">Header</div>
15
- <div slot="primary" style="background-color: green; height: 100%; overflow: auto;">
16
- <div style="height: 200vh;"><p>Very tall scrolling thing in the primary panel.</p></div>
17
- </div>
18
- <p slot="secondary">Secondary</p>
19
- <div slot="footer">Footer</div>
20
- </d2l-template-primary-secondary>
21
- </body>
22
- </html>
package/templates/primary-secondary/demo/width-type-normal.html DELETED
@@ -1,26 +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="../../../components/demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../../components/demo/demo-page.js';
9
- import '../primary-secondary.js';
10
- </script>
11
- </head>
12
- <body>
13
- <d2l-template-primary-secondary width-type="normal" storage-key="demo-width-type-normal">
14
- <div slot="header" style="background-color: #dddddd;">I'm in the <b>header</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
15
- <div slot="primary">
16
- <p>I'm in the <b>primary</b> slot of the <b>d2l-template-primary-secondary</b> component!</p>
17
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo.
18
- </div>
19
- <div slot="secondary">
20
- <p>I'm in the <b>secondary</b> slot of the <b>d2l-template-primary-secondary</b> component!</p>
21
- 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.
22
- </div>
23
- <div slot="footer" style="background-color: #aaaaaa;">I'm in the <b>footer</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
24
- </d2l-template-primary-secondary>
25
- </body>
26
- </html>