@brightspace-ui/core 3.227.4 → 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 (176) hide show
  1. package/components/button/button.js +8 -8
  2. package/components/demo/test/demo-page-settings.test.js +25 -0
  3. package/components/demo/test/demo-page.test.js +17 -0
  4. package/package.json +1 -1
  5. package/components/alert/demo/alert-toast.html +0 -106
  6. package/components/alert/demo/alert.html +0 -82
  7. package/components/backdrop/demo/backdrop-loading.html +0 -166
  8. package/components/backdrop/demo/backdrop.html +0 -57
  9. package/components/breadcrumbs/demo/breadcrumbs.html +0 -53
  10. package/components/button/demo/button-add.html +0 -55
  11. package/components/button/demo/button-copy.html +0 -122
  12. package/components/button/demo/button-icon.html +0 -174
  13. package/components/button/demo/button-move.html +0 -38
  14. package/components/button/demo/button-split.html +0 -76
  15. package/components/button/demo/button-subtle.html +0 -132
  16. package/components/button/demo/button-toggle.html +0 -80
  17. package/components/button/demo/button.html +0 -67
  18. package/components/button/demo/floating-buttons-in-frame.html +0 -44
  19. package/components/button/demo/floating-buttons-in-tabs.html +0 -244
  20. package/components/button/demo/floating-buttons-page.html +0 -100
  21. package/components/button/demo/floating-buttons.html +0 -101
  22. package/components/calendar/demo/calendar.html +0 -76
  23. package/components/card/demo/card.html +0 -304
  24. package/components/collapsible-panel/demo/collapsible-panel.html +0 -218
  25. package/components/colors/demo/color-swatch.js +0 -240
  26. package/components/colors/demo/colors.html +0 -139
  27. package/components/count-badge/demo/count-badge-icon.html +0 -48
  28. package/components/count-badge/demo/count-badge.html +0 -73
  29. package/components/demo/demo/demo-snippet.html +0 -71
  30. package/components/description-list/demo/description-list-test.js +0 -142
  31. package/components/description-list/demo/description-list.html +0 -48
  32. package/components/dialog/demo/dialog-async-content-until.js +0 -89
  33. package/components/dialog/demo/dialog-async-content.js +0 -72
  34. package/components/dialog/demo/dialog-confirm.html +0 -102
  35. package/components/dialog/demo/dialog-container.js +0 -40
  36. package/components/dialog/demo/dialog-fullscreen.html +0 -273
  37. package/components/dialog/demo/dialog-nested.html +0 -94
  38. package/components/dialog/demo/dialog.html +0 -398
  39. package/components/dropdown/demo/dropdown-button.html +0 -102
  40. package/components/dropdown/demo/dropdown-context-menu.html +0 -129
  41. package/components/dropdown/demo/dropdown-flicker-inner.html +0 -70
  42. package/components/dropdown/demo/dropdown-flicker.html +0 -142
  43. package/components/dropdown/demo/dropdown-menu-demo-view.js +0 -37
  44. package/components/dropdown/demo/dropdown-menu.html +0 -227
  45. package/components/dropdown/demo/dropdown-more.html +0 -160
  46. package/components/dropdown/demo/dropdown-positioning.html +0 -127
  47. package/components/dropdown/demo/dropdown-tabs.html +0 -87
  48. package/components/dropdown/demo/dropdown.html +0 -217
  49. package/components/empty-state/demo/empty-state.html +0 -94
  50. package/components/expand-collapse/demo/expand-collapse-content.html +0 -58
  51. package/components/filter/demo/filter-load-more-demo.js +0 -182
  52. package/components/filter/demo/filter-overflow-group.html +0 -246
  53. package/components/filter/demo/filter-search-demo.js +0 -135
  54. package/components/filter/demo/filter-tags.html +0 -115
  55. package/components/filter/demo/filter.html +0 -230
  56. package/components/focus-trap/demo/focus-trap.html +0 -75
  57. package/components/form/demo/form-demo.js +0 -105
  58. package/components/form/demo/form-dialog-demo.js +0 -94
  59. package/components/form/demo/form-panel-demo.js +0 -89
  60. package/components/form/demo/form.html +0 -37
  61. package/components/hierarchical-view/demo/hierarchical-view.html +0 -221
  62. package/components/html-block/demo/html-block-code.html +0 -55
  63. package/components/html-block/demo/html-block.html +0 -696
  64. package/components/icons/demo/icon-color-override.js +0 -23
  65. package/components/icons/demo/icon-custom.html +0 -112
  66. package/components/icons/demo/icon-size-override.js +0 -24
  67. package/components/icons/demo/icon.html +0 -52
  68. package/components/inputs/demo/input-checkbox.html +0 -118
  69. package/components/inputs/demo/input-color-palette.js +0 -67
  70. package/components/inputs/demo/input-color.html +0 -110
  71. package/components/inputs/demo/input-date-range.html +0 -114
  72. package/components/inputs/demo/input-date-time-range.html +0 -128
  73. package/components/inputs/demo/input-date-time.html +0 -100
  74. package/components/inputs/demo/input-date.html +0 -81
  75. package/components/inputs/demo/input-group.html +0 -56
  76. package/components/inputs/demo/input-number.html +0 -136
  77. package/components/inputs/demo/input-percent.html +0 -99
  78. package/components/inputs/demo/input-radio-label-test.js +0 -45
  79. package/components/inputs/demo/input-radio-solo-test.js +0 -47
  80. package/components/inputs/demo/input-radio.html +0 -119
  81. package/components/inputs/demo/input-search.html +0 -75
  82. package/components/inputs/demo/input-select-test.js +0 -60
  83. package/components/inputs/demo/input-select.html +0 -45
  84. package/components/inputs/demo/input-text.html +0 -163
  85. package/components/inputs/demo/input-textarea.html +0 -124
  86. package/components/inputs/demo/input-time-range.html +0 -121
  87. package/components/inputs/demo/input-time.html +0 -95
  88. package/components/link/demo/link.html +0 -111
  89. package/components/list/demo/demo-list-nav.js +0 -170
  90. package/components/list/demo/demo-list-nested-iterations-helper.js +0 -168
  91. package/components/list/demo/demo-list-nested-lazy-load.js +0 -133
  92. package/components/list/demo/demo-list-nested.js +0 -291
  93. package/components/list/demo/demo-list.js +0 -241
  94. package/components/list/demo/list-color.html +0 -423
  95. package/components/list/demo/list-demo-scenarios.js +0 -380
  96. package/components/list/demo/list-drag-and-drop-position.js +0 -102
  97. package/components/list/demo/list-drag-and-drop.html +0 -82
  98. package/components/list/demo/list-expand-collapse.html +0 -136
  99. package/components/list/demo/list-item-actions.html +0 -371
  100. package/components/list/demo/list-item-custom.js +0 -204
  101. package/components/list/demo/list-item-layouts.html +0 -331
  102. package/components/list/demo/list-item-scroll.html +0 -122
  103. package/components/list/demo/list-layout.html +0 -575
  104. package/components/list/demo/list-nav.html +0 -110
  105. package/components/list/demo/list-nested.html +0 -270
  106. package/components/list/demo/list-selection.html +0 -301
  107. package/components/list/demo/list.html +0 -319
  108. package/components/loading-spinner/demo/loading-spinner-override.js +0 -34
  109. package/components/loading-spinner/demo/loading-spinner.html +0 -63
  110. package/components/menu/demo/checkbox-menu.html +0 -52
  111. package/components/menu/demo/custom-menu-item.js +0 -37
  112. package/components/menu/demo/custom-view.js +0 -63
  113. package/components/menu/demo/menu.html +0 -211
  114. package/components/menu/demo/radio-menu.html +0 -52
  115. package/components/meter/demo/meter.html +0 -115
  116. package/components/more-less/demo/more-less-test.js +0 -67
  117. package/components/more-less/demo/more-less.html +0 -71
  118. package/components/object-property-list/demo/object-property-list.html +0 -99
  119. package/components/offscreen/demo/offscreen-demo.js +0 -16
  120. package/components/offscreen/demo/offscreen.html +0 -44
  121. package/components/overflow-group/demo/demo-overflow-group.js +0 -29
  122. package/components/overflow-group/demo/overflow-group.html +0 -110
  123. package/components/paging/demo/pager-load-more.html +0 -120
  124. package/components/popover/demo/popover.html +0 -309
  125. package/components/progress/demo/progress.html +0 -104
  126. package/components/scroll-wrapper/demo/scroll-wrapper-test.js +0 -108
  127. package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -52
  128. package/components/selection/demo/demo-selection.js +0 -35
  129. package/components/selection/demo/selection.html +0 -198
  130. package/components/skeleton/demo/skeleton-group-nested-test.js +0 -71
  131. package/components/skeleton/demo/skeleton-group-test-wrapper.js +0 -18
  132. package/components/skeleton/demo/skeleton-group-test.js +0 -91
  133. package/components/skeleton/demo/skeleton-mixin.html +0 -78
  134. package/components/skeleton/demo/skeleton-test-box.js +0 -34
  135. package/components/skeleton/demo/skeleton-test-container.js +0 -45
  136. package/components/skeleton/demo/skeleton-test-heading.js +0 -44
  137. package/components/skeleton/demo/skeleton-test-link.js +0 -47
  138. package/components/skeleton/demo/skeleton-test-paragraph.js +0 -54
  139. package/components/skeleton/demo/skeleton-test-stack.js +0 -38
  140. package/components/skeleton/demo/skeleton-test-width.js +0 -20
  141. package/components/sorting/demo/sort.html +0 -37
  142. package/components/status-indicator/demo/status-indicator.html +0 -99
  143. package/components/switch/demo/switch.html +0 -95
  144. package/components/table/demo/table-test.js +0 -271
  145. package/components/table/demo/table.html +0 -107
  146. package/components/tabs/demo/tab-custom.js +0 -39
  147. package/components/tabs/demo/tabs-array.js +0 -43
  148. package/components/tabs/demo/tabs.html +0 -558
  149. package/components/tag-list/demo/tag-list.html +0 -117
  150. package/components/tooltip/demo/tooltip.html +0 -275
  151. package/components/typography/demo/typography.html +0 -93
  152. package/components/view-switcher/demo/demo-table-view.js +0 -41
  153. package/components/view-switcher/demo/view-switcher.html +0 -71
  154. package/directives/animate/demo/animate-test.js +0 -98
  155. package/directives/animate/demo/index.html +0 -23
  156. package/helpers/demo/announce-test.js +0 -37
  157. package/helpers/demo/announce.html +0 -19
  158. package/helpers/demo/dismissible-test.js +0 -66
  159. package/helpers/demo/dismissible.html +0 -38
  160. package/helpers/demo/gestures.html +0 -58
  161. package/helpers/demo/prism.html +0 -694
  162. package/helpers/demo/template-tags.html +0 -118
  163. package/mixins/arrow-keys/demo/arrow-keys-mixin.html +0 -29
  164. package/mixins/arrow-keys/demo/arrow-keys-test.js +0 -38
  165. package/mixins/async-container/demo/async-container.html +0 -109
  166. package/mixins/async-container/demo/async-container.js +0 -27
  167. package/mixins/async-container/demo/async-item.js +0 -80
  168. package/mixins/labelled/demo/labelled-mixin.html +0 -90
  169. package/mixins/localize/demo/localize-mixin-greeting.js +0 -39
  170. package/mixins/localize/demo/localize-mixin-mission.js +0 -25
  171. package/mixins/localize/demo/localize-mixin.html +0 -28
  172. package/templates/primary-secondary/demo/form.html +0 -55
  173. package/templates/primary-secondary/demo/index.html +0 -27
  174. package/templates/primary-secondary/demo/integration.html +0 -457
  175. package/templates/primary-secondary/demo/overflow-hidden.html +0 -22
  176. package/templates/primary-secondary/demo/width-type-normal.html +0 -26
package/components/card/demo/card.html DELETED
@@ -1,304 +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 '../../button/button.js';
10
- import '../../button/button-icon.js';
11
- import '../../dropdown/dropdown-more.js';
12
- import '../../dropdown/dropdown-content.js';
13
- import '../../status-indicator/status-indicator.js';
14
- import '../../tooltip/tooltip.js';
15
- import '../../tooltip/tooltip-help.js';
16
- import '../card.js';
17
- import '../card-loading-shimmer.js';
18
- import '../card-content-meta.js';
19
- import '../card-content-title.js';
20
- import '../card-footer-link.js';
21
- </script>
22
- <style>
23
- .cards {
24
- display: flex;
25
- flex-wrap: wrap;
26
- gap: 0.6rem;
27
- }
28
- .cards-subtle {
29
- background-color: #f6f7f8;
30
- padding: 20px;
31
- }
32
- d2l-card {
33
- flex: none;
34
- }
35
- .badge {
36
- text-align: center;
37
- }
38
- .badge > img {
39
- background-color: white;
40
- border: 1px solid #202122; /* ferrite */
41
- border-radius: 6px;
42
- height: 70px;
43
- object-fit: cover;
44
- object-position: center;
45
- }
46
- .badge-status {
47
- background-color: white;
48
- border: 1px solid white;
49
- border-radius: 0.6rem;
50
- display: inline-block;
51
- }
52
- div[slot="footer"] {
53
- display: inline-block;
54
- }
55
- #toggleLoading {
56
- margin-top: 20px;
57
- }
58
- .truncate {
59
- -webkit-box-orient: vertical;
60
- display: -webkit-box;
61
- -webkit-line-clamp: 2;
62
- overflow-clip-margin: 0.2em;
63
- overflow-wrap: anywhere;
64
- overflow-x: clip;
65
- overflow-y: clip;
66
- white-space: normal;
67
- }
68
- </style>
69
- </head>
70
- <body unresolved>
71
-
72
- <d2l-demo-page page-title="d2l-card">
73
-
74
- <h2>Subtle Card (badges, no-link)</h2>
75
-
76
- <d2l-demo-snippet>
77
- <template>
78
- <div class="cards cards-subtle">
79
-
80
- <d2l-card subtle align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
81
- <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">
82
- <div slot="badge" class="badge">
83
- <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Stick_Figure.svg/340px-Stick_Figure.svg.png">
84
- </div>
85
- <div slot="content">Image Badge</div>
86
- </d2l-card>
87
-
88
- <d2l-card subtle align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
89
- <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">
90
- <div class="badge-status" slot="badge">
91
- <d2l-status-indicator text="Success" state="success"></d2l-status-indicator>
92
- </div>
93
- <div slot="content">Status Badge</div>
94
- </d2l-card>
95
-
96
- <d2l-card subtle align-center text="No Link" style="height: 280px; width: 245px;">
97
- <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">
98
- <div slot="content">No Link</div>
99
- </d2l-card>
100
-
101
- </div>
102
- </template>
103
- </d2l-demo-snippet>
104
-
105
- <h2>Subtle Card (header actions, meta-content, footer links)</h2>
106
-
107
- <d2l-demo-snippet>
108
- <template>
109
- <div class="cards cards-subtle">
110
-
111
- <d2l-card subtle align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;">
112
- <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">
113
- <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
114
- <d2l-dropdown-content>
115
- <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>
116
- <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>
117
- <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>
118
- </d2l-dropdown-content>
119
- </d2l-dropdown-more>
120
- <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
121
- <div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
122
- <div slot="footer">
123
- <d2l-card-footer-link id="googleDriveLink1" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
124
- <d2l-tooltip slot="tooltip" for="googleDriveLink1">Go to Google Drive</d2l-tooltip>
125
- </d2l-card-footer-link>
126
- <d2l-card-footer-link id="rssFeedLink1" icon="tier1:rss" text="RSS Feed" secondary-count="1">
127
- <d2l-tooltip slot="tooltip" for="rssFeedLink1">RSS Feed</d2l-tooltip>
128
- </d2l-card-footer-link>
129
- <d2l-card-footer-link id="outcomesLink1" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
130
- <d2l-tooltip slot="tooltip" for="outcomesLink1">Outcomes</d2l-tooltip>
131
- </d2l-card-footer-link>
132
- <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-count="3">
133
- <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 3 assignments due tomorrow.</d2l-tooltip>
134
- </d2l-card-footer-link>
135
- </div>
136
- </d2l-card>
137
-
138
- <d2l-card subtle align-center text="Grade 2" style="height: 300px; width: 245px;">
139
- <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-low-density-max-size.jpg">
140
- <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
141
- <d2l-dropdown-content><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></d2l-dropdown-content>
142
- </d2l-dropdown-more>
143
- <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
144
- <div slot="content">
145
- <div class="truncate">No Link. 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</div>
146
- <d2l-tooltip-help text="Help Tooltip!">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
147
- </div>
148
- <div slot="footer">
149
- <d2l-card-footer-link id="googleDriveLink2" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
150
- <d2l-tooltip slot="tooltip" for="googleDriveLink2">Go to Google Drive</d2l-tooltip>
151
- </d2l-card-footer-link>
152
- <d2l-card-footer-link id="rssFeedLink2" icon="tier1:rss" text="RSS Feed" secondary-count="1">
153
- <d2l-tooltip slot="tooltip" for="rssFeedLink2">RSS Feed</d2l-tooltip>
154
- </d2l-card-footer-link>
155
- <d2l-card-footer-link id="outcomesLink2" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
156
- <d2l-tooltip slot="tooltip" for="outcomesLink2">Outcomes</d2l-tooltip>
157
- </d2l-card-footer-link>
158
- </div>
159
- </d2l-card>
160
-
161
- <d2l-card subtle align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="height: 300px; width: 245px;">
162
- <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">
163
- <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
164
- <d2l-dropdown-content><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></d2l-dropdown-content>
165
- </d2l-dropdown-more>
166
- <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
167
- <div slot="content">Painting</div>
168
- <d2l-button slot="footer" style="width: 100%;">Shiny Button</d2l-button>
169
- </d2l-card>
170
-
171
- </div>
172
- </template>
173
- </d2l-demo-snippet>
174
-
175
- <h2>Card (badges, no-link)</h2>
176
-
177
- <d2l-demo-snippet>
178
- <template>
179
- <div class="cards">
180
-
181
- <d2l-card align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
182
- <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">
183
- <div slot="badge" class="badge">
184
- <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Stick_Figure.svg/340px-Stick_Figure.svg.png">
185
- </div>
186
- <div slot="content">Image Badge</div>
187
- </d2l-card>
188
-
189
- <d2l-card align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
190
- <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">
191
- <div class="badge-status" slot="badge">
192
- <d2l-status-indicator text="Success" state="success"></d2l-status-indicator>
193
- </div>
194
- <div slot="content">Status Badge</div>
195
- </d2l-card>
196
-
197
- <d2l-card align-center text="No Link" style="height: 280px; width: 245px;">
198
- <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">
199
- <div slot="content">No Link</div>
200
- </d2l-card>
201
-
202
- </div>
203
- </template>
204
- </d2l-demo-snippet>
205
-
206
- <h2>Card (header actions, meta-content, footer links)</h2>
207
-
208
- <d2l-demo-snippet>
209
- <template>
210
- <div class="cards">
211
-
212
- <d2l-card align-center text="Hydrology" style="height: 300px; width: 245px;">
213
- <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">
214
- <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
215
- <d2l-dropdown-content>
216
- <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>
217
- <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>
218
- <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>
219
- </d2l-dropdown-content>
220
- </d2l-dropdown-more>
221
- <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
222
- <div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
223
- <div slot="footer">
224
- <d2l-card-footer-link id="googleDriveLink3" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
225
- <d2l-tooltip slot="tooltip" for="googleDriveLink3">Go to Google Drive</d2l-tooltip>
226
- </d2l-card-footer-link>
227
- <d2l-card-footer-link id="rssFeedLink3" icon="tier1:rss" text="RSS Feed" secondary-count="1">
228
- <d2l-tooltip slot="tooltip" for="rssFeedLink3">RSS Feed</d2l-tooltip>
229
- </d2l-card-footer-link>
230
- <d2l-card-footer-link id="outcomesLink3" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
231
- <d2l-tooltip slot="tooltip" for="outcomesLink3">Outcomes</d2l-tooltip>
232
- </d2l-card-footer-link>
233
- <d2l-card-footer-link id="assignmentsLink3" icon="tier1:assignments" text="Assignments" secondary-count="3">
234
- <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink3">You have 3 assignments due tomorrow.</d2l-tooltip>
235
- </d2l-card-footer-link>
236
- </div>
237
- </d2l-card>
238
-
239
- <d2l-card align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="height: 300px; width: 245px;">
240
- <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">
241
- <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
242
- <d2l-dropdown-content><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></d2l-dropdown-content>
243
- </d2l-dropdown-more>
244
- <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
245
- <div slot="content">Painting</div>
246
- <d2l-button slot="footer" style="width: 100%;">Shiny Button</d2l-button>
247
- </d2l-card>
248
-
249
- <d2l-card align-center text="Grade 2" style="height: 300px; width: 245px;">
250
- <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-low-density-max-size.jpg">
251
- <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
252
- <d2l-dropdown-content><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></d2l-dropdown-content>
253
- </d2l-dropdown-more>
254
- <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
255
- <div slot="content">
256
- <div class="truncate">No Link. 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</div>
257
- <d2l-tooltip-help text="Help Tooltip!">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
258
- </div>
259
- <div slot="footer">
260
- <d2l-card-footer-link id="googleDriveLink4" icon="tier1:google-drive" text="Google Drive" secondary-count-type="count" secondary-count="100" href="https://www.google.ca/drive/">
261
- <d2l-tooltip slot="tooltip" for="googleDriveLink4">Go to Google Drive</d2l-tooltip>
262
- </d2l-card-footer-link>
263
- <d2l-card-footer-link id="rssFeedLink4" icon="tier1:rss" text="RSS Feed" secondary-count-type="count" secondary-count="1">
264
- <d2l-tooltip slot="tooltip" for="rssFeedLink4">RSS Feed</d2l-tooltip>
265
- </d2l-card-footer-link>
266
- <d2l-card-footer-link id="outcomesLink4" icon="tier1:outcomes" text="Outcomes" secondary-count-type="count" secondary-count="5">
267
- <d2l-tooltip slot="tooltip" for="outcomesLink4">Outcomes</d2l-tooltip>
268
- </d2l-card-footer-link>
269
- </div>
270
- </d2l-card>
271
-
272
- </div>
273
- </template>
274
- </d2l-demo-snippet>
275
-
276
- <h2>Card (with header loading)</h2>
277
-
278
- <d2l-demo-snippet>
279
- <template>
280
- <div class="cards">
281
-
282
- <d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;">
283
- <d2l-card-loading-shimmer slot="header" loading style="display: block; height: 103.5px; width: 100%;">
284
- <img 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">
285
- </d2l-card-loading-shimmer>
286
- <div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
287
- </d2l-card>
288
-
289
- </div>
290
- <div>
291
- <d2l-button id="toggleLoading">Toggle Loading State</d2l-button>
292
- </div>
293
- <script>
294
- document.querySelector('#toggleLoading').addEventListener('click', () => {
295
- const loadingContainer = document.querySelector('d2l-card-loading-shimmer');
296
- loadingContainer.loading = !loadingContainer.loading;
297
- });
298
- </script>
299
- </template>
300
- </d2l-demo-snippet>
301
-
302
- </d2l-demo-page>
303
- </body>
304
- </html>
package/components/collapsible-panel/demo/collapsible-panel.html DELETED
@@ -1,218 +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 '../collapsible-panel.js';
9
- import '../collapsible-panel-group.js';
10
- import '../collapsible-panel-summary-item.js';
11
- import '../../button/button-icon.js';
12
- import '../../button/button-subtle.js';
13
- import '../../dropdown/dropdown-more.js';
14
- import '../../dropdown/dropdown-menu.js';
15
- import '../../inputs/input-search.js';
16
- import '../../filter/filter.js';
17
- import '../../filter/filter-dimension-set.js';
18
- import '../../link/link.js';
19
- import '../../menu/menu.js';
20
- import '../../menu/menu-item.js';
21
- import '../../status-indicator/status-indicator.js';
22
- import '../../demo/demo-page.js';
23
- </script>
24
- <style>
25
- .background {
26
- background-color: var(--d2l-color-gypsum);
27
- margin: -18px;
28
- padding: 18px;
29
- }
30
- </style>
31
- </head>
32
- <body unresolved>
33
-
34
- <d2l-demo-page page-title="d2l-collapsible-panel">
35
- <h2>Simple</h2>
36
- <d2l-demo-snippet>
37
- <d2l-collapsible-panel-group>
38
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions">
39
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
40
- </d2l-collapsible-panel>
41
-
42
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions">
43
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
44
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
45
- </d2l-collapsible-panel>
46
- </d2l-collapsible-panel-group>
47
- </d2l-demo-snippet>
48
-
49
- <h2>Subtle</h2>
50
- <d2l-demo-snippet>
51
- <div class="background">
52
- <d2l-collapsible-panel-group>
53
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="subtle">
54
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
55
- </d2l-collapsible-panel>
56
-
57
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="subtle">
58
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
59
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
60
- </d2l-collapsible-panel>
61
- </d2l-collapsible-panel-group>
62
- </div>
63
- </d2l-demo-snippet>
64
-
65
- <h2>Inline</h2>
66
- <d2l-demo-snippet>
67
- <d2l-collapsible-panel-group>
68
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline">
69
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
70
- </d2l-collapsible-panel>
71
-
72
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline">
73
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
74
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
75
- </d2l-collapsible-panel>
76
- </d2l-collapsible-panel-group>
77
- </d2l-demo-snippet>
78
-
79
- <h2>Inline with large padding</h2>
80
- <d2l-demo-snippet>
81
- <d2l-collapsible-panel-group>
82
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding-type="large">
83
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
84
- </d2l-collapsible-panel>
85
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding-type="large">
86
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
87
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
88
- </d2l-collapsible-panel>
89
- </d2l-collapsible-panel-group>
90
- </d2l-demo-snippet>
91
-
92
- <h2>Multi-line summary and interactive content</h2>
93
- <d2l-demo-snippet>
94
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions">
95
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
96
- <d2l-collapsible-panel-summary-item slot="summary" text="1 release condition"></d2l-collapsible-panel-summary-item>
97
- <d2l-collapsible-panel-summary-item slot="summary" text="Hidden by special access"></d2l-collapsible-panel-summary-item>
98
- <div style="display: flex; gap: 0.3rem; margin-bottom: 1.2rem;">
99
- <d2l-input-search label="search" placeholder="Search Students"></d2l-input-search>
100
- <d2l-button-subtle text="Evaluate All"></d2l-button-subtle>
101
- <d2l-filter>
102
- <d2l-filter-dimension-set key="Filter" text="Filter">
103
- </d2l-filter-dimension-set>
104
- </d2l-filter>
105
- </div>
106
- <div>
107
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
108
- </div>
109
- </d2l-collapsible-panel>
110
- </d2l-demo-snippet>
111
-
112
- <h2>With custom action, before and header content</h2>
113
- <d2l-demo-snippet>
114
- <d2l-collapsible-panel panel-title="Session: January 1, 2021: 10:00 AM" expand-collapse-label="Session on January 1">
115
- <d2l-icon icon="tier3:assignments" slot="before"></d2l-icon>
116
- <d2l-button-icon slot="actions" icon="tier1:fullscreen" text="Fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download" text="Download"></d2l-button-icon><d2l-dropdown-more slot="actions" text="More">
117
- <d2l-dropdown-menu>
118
- <d2l-menu>
119
- <d2l-menu-item text="Duplicate"></d2l-menu-item>
120
- <d2l-menu-item text="Delete"></d2l-menu-item>
121
- </d2l-menu>
122
- </d2l-dropdown-menu>
123
- </d2l-dropdown-more>
124
- <div slot="header" style="align-items: center; display: flex; gap: 0.6rem;">
125
- <d2l-status-indicator state="none" text="Due Today"></d2l-status-indicator>
126
- <p class="d2l-body-small">Posts: 1 thread, 1 reply</p>
127
- <d2l-link small href="https://www.d2l.com" target="blank">Link</d2l-link>
128
- </div>
129
- <d2l-collapsible-panel-summary-item slot="summary" text="Always available"></d2l-collapsible-panel-summary-item>
130
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
131
- </d2l-collapsible-panel>
132
- </d2l-demo-snippet>
133
-
134
- <h2>With long title</h2>
135
- <d2l-demo-snippet>
136
- <d2l-collapsible-panel panel-title="https://en.wikipedia.org/wiki/William_Thomson,_1st_Baron_Kelvin (the guy who invented absolute zero and some other cool thermodynamics stuff)" expand-collapse-label="Session on January 1">
137
- <d2l-button-icon slot="actions" icon="tier1:fullscreen" text="Fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download" text="Download"></d2l-button-icon><d2l-dropdown-more slot="actions" text="More">
138
- <d2l-dropdown-menu>
139
- <d2l-menu>
140
- <d2l-menu-item text="Duplicate"></d2l-menu-item>
141
- <d2l-menu-item text="Delete"></d2l-menu-item>
142
- </d2l-menu>
143
- </d2l-dropdown-menu>
144
- </d2l-dropdown-more>
145
- <div slot="header" style="align-items: center; display: flex; gap: 0.6rem;">
146
- <d2l-status-indicator state="none" text="Due Today"></d2l-status-indicator>
147
- <p class="d2l-body-small">Posts: 1 thread, 1 reply</p>
148
- <d2l-link small href="https://www.d2l.com" target="blank">Link</d2l-link>
149
- </div>
150
- <d2l-collapsible-panel-summary-item slot="summary" text="Always available"></d2l-collapsible-panel-summary-item>
151
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
152
- </d2l-collapsible-panel>
153
- </d2l-demo-snippet>
154
-
155
- <h2>Headings</h2>
156
- <d2l-demo-snippet>
157
- <d2l-collapsible-panel-group>
158
- <d2l-collapsible-panel heading-level="1" panel-title="Heading Level 1">
159
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
160
- </d2l-collapsible-panel>
161
-
162
- <d2l-collapsible-panel heading-level="2" panel-title="Heading Level 2">
163
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
164
- </d2l-collapsible-panel>
165
-
166
- <d2l-collapsible-panel heading-level="3" panel-title="Heading Level 3">
167
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
168
- </d2l-collapsible-panel>
169
-
170
- <d2l-collapsible-panel heading-level="4" panel-title="Heading Level 4">
171
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
172
- </d2l-collapsible-panel>
173
-
174
- <d2l-collapsible-panel heading-level="5" panel-title="Heading Level 5">
175
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
176
- </d2l-collapsible-panel>
177
-
178
- <d2l-collapsible-panel heading-level="6" panel-title="Heading Level 6">
179
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
180
- </d2l-collapsible-panel>
181
-
182
- <d2l-collapsible-panel heading-style="2" panel-title="Heading Style 2">
183
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
184
- </d2l-collapsible-panel>
185
-
186
- <d2l-collapsible-panel heading-style="4" heading-level="2" panel-title="Heading Style 4">
187
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
188
- </d2l-collapsible-panel>
189
- </d2l-collapsible-panel-group>
190
- </d2l-demo-snippet>
191
-
192
- <h2>Loooooong</h2>
193
- <d2l-demo-snippet>
194
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions">
195
- <d2l-collapsible-panel-summary-item slot="summary" lines="2" text="Quisque porttitor sollicitudin ligula, ut egestas tortor fringilla sed. Morbi porta libero velit, et venenatis massa facilisis nec. Nulla facilisi. In semper, ex ut egestas finibus, felis sem cursus orci, vel molestie sem leo vitae est. Cras vehicula massa et sapien pulvinar facilisis. Nam feugiat congue libero ut tristique. Ut id luctus arcu. Proin id augue eu est porttitor pretium. Ut bibendum semper rhoncus. Nullam a ligula faucibus, aliquet lectus sodales, dictum ipsum. Proin eget dapibus velit, sit amet egestas lorem."></d2l-collapsible-panel-summary-item>
196
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a feugiat mi, in consectetur justo. Suspendisse finibus placerat purus, quis volutpat libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempor bibendum tempor. Suspendisse potenti. Quisque auctor purus id magna laoreet finibus. Maecenas eleifend est id velit vulputate finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum semper lorem nibh, gravida maximus libero hendrerit eu. Sed congue turpis ac iaculis laoreet. In commodo orci sit amet mollis facilisis. Pellentesque eu viverra metus. Nunc convallis laoreet augue, vitae sollicitudin nisl facilisis id. Aliquam sollicitudin fermentum dui, non convallis nulla facilisis quis.</p>
197
-
198
- <p>Fusce lacus magna, efficitur in bibendum sit amet, egestas sit amet libero. Aenean nec felis ut justo maximus scelerisque in eget eros. Nam tincidunt nisi ipsum, vitae pretium augue vehicula a. Donec eget diam et ex posuere dictum eget id dui. Sed elementum felis in condimentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas volutpat dui semper mi semper, id varius purus sagittis. Praesent fringilla vel magna nec porttitor. Nulla nec gravida magna. Donec vitae dui consequat, ornare velit at, maximus turpis. Morbi porttitor massa eu tempus pretium. Nunc at justo eu erat dictum volutpat et ac lacus. Etiam congue ut massa vel tempor. Curabitur pellentesque nec massa a elementum. Nulla non dictum velit.</p>
199
-
200
- <p>Duis risus mauris, egestas vel metus venenatis, vulputate placerat purus. Maecenas a congue risus. Cras auctor, massa id tincidunt tempor, nisi sem eleifend arcu, a gravida magna mauris ac ligula. Suspendisse quis purus commodo, faucibus orci ultricies, semper tortor. Proin at neque enim. Sed dapibus augue sit amet ligula tempor, interdum ornare nulla imperdiet. Nulla dolor ante, bibendum a velit a, molestie tincidunt nibh. Ut a viverra turpis. Vivamus vel dolor pulvinar, molestie libero ac, sollicitudin neque. Mauris dictum sem non dui pellentesque euismod. Integer mi velit, finibus ut libero eu, posuere commodo mi. Etiam sit amet leo metus. Ut ornare magna in tortor aliquet, quis condimentum ex lacinia. Sed ultricies sollicitudin est, et tempor ante rutrum vitae.</p>
201
-
202
- <p>Quisque porttitor sollicitudin ligula, ut egestas tortor fringilla sed. Morbi porta libero velit, et venenatis massa facilisis nec. Nulla facilisi. In semper, ex ut egestas finibus, felis sem cursus orci, vel molestie sem leo vitae est. Cras vehicula massa et sapien pulvinar facilisis. Nam feugiat congue libero ut tristique. Ut id luctus arcu. Proin id augue eu est porttitor pretium. Ut bibendum semper rhoncus. Nullam a ligula faucibus, aliquet lectus sodales, dictum ipsum. Proin eget dapibus velit, sit amet egestas lorem. Vivamus suscipit sem turpis, nec sodales nibh ultrices vitae. Nulla augue sem, blandit sit amet fringilla at, tincidunt quis lacus.</p>
203
-
204
- <p>Vestibulum enim leo, lobortis nec faucibus at, dictum rhoncus odio. Suspendisse dapibus, quam sed condimentum fermentum, est tellus malesuada justo, ut gravida libero dolor eu felis. Integer turpis dui, rhoncus sit amet dignissim eget, laoreet viverra magna. Nam varius arcu orci, sed consequat eros dictum nec. Nunc finibus quis diam id tincidunt. Quisque sed nunc ultrices, feugiat purus ac, iaculis leo. Morbi elementum, tellus sit amet eleifend tempor, magna massa eleifend turpis, id aliquam est ante vitae arcu. Vivamus non dapibus magna. Sed maximus fringilla sem, ac lacinia mi condimentum ac. Duis id eros nibh. Donec eget lectus et mi vulputate sollicitudin consequat quis lacus. Aliquam dui nibh, congue eu iaculis sed, fermentum a felis. Curabitur id magna sed urna lobortis hendrerit. Sed placerat nisl sit amet erat vulputate suscipit. Vestibulum sed efficitur odio. Sed dapibus nibh ac neque convallis tempus.</p>
205
- </d2l-collapsible-panel>
206
- </d2l-demo-snippet>
207
- </d2l-demo-page>
208
-
209
- <script>
210
- document.body.addEventListener('d2l-collapsible-panel-expand', e => {
211
- console.log('d2l-collapsible-panel-expand', e);
212
- }, true);
213
- document.body.addEventListener('d2l-collapsible-panel-collapse', e => {
214
- console.log('d2l-collapsible-panel-collapse', e);
215
- }, true);
216
- </script>
217
- </body>
218
- </html>