@brightspace-ui/core 3.227.3 → 3.227.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/components/button/button.js +8 -8
  2. package/components/colors/colors.js +8 -0
  3. package/components/count-badge/count-badge-icon.js +1 -1
  4. package/components/count-badge/count-badge-mixin.js +4 -4
  5. package/components/demo/test/demo-page-settings.test.js +25 -0
  6. package/components/demo/test/demo-page.test.js +17 -0
  7. package/package.json +1 -1
  8. package/components/alert/demo/alert-toast.html +0 -106
  9. package/components/alert/demo/alert.html +0 -82
  10. package/components/backdrop/demo/backdrop-loading.html +0 -166
  11. package/components/backdrop/demo/backdrop.html +0 -57
  12. package/components/breadcrumbs/demo/breadcrumbs.html +0 -53
  13. package/components/button/demo/button-add.html +0 -55
  14. package/components/button/demo/button-copy.html +0 -122
  15. package/components/button/demo/button-icon.html +0 -174
  16. package/components/button/demo/button-move.html +0 -38
  17. package/components/button/demo/button-split.html +0 -76
  18. package/components/button/demo/button-subtle.html +0 -132
  19. package/components/button/demo/button-toggle.html +0 -80
  20. package/components/button/demo/button.html +0 -67
  21. package/components/button/demo/floating-buttons-in-frame.html +0 -44
  22. package/components/button/demo/floating-buttons-in-tabs.html +0 -244
  23. package/components/button/demo/floating-buttons-page.html +0 -100
  24. package/components/button/demo/floating-buttons.html +0 -101
  25. package/components/calendar/demo/calendar.html +0 -76
  26. package/components/card/demo/card.html +0 -304
  27. package/components/collapsible-panel/demo/collapsible-panel.html +0 -218
  28. package/components/colors/demo/color-swatch.js +0 -240
  29. package/components/colors/demo/colors.html +0 -139
  30. package/components/count-badge/demo/count-badge-icon.html +0 -48
  31. package/components/count-badge/demo/count-badge.html +0 -73
  32. package/components/demo/demo/demo-snippet.html +0 -71
  33. package/components/description-list/demo/description-list-test.js +0 -142
  34. package/components/description-list/demo/description-list.html +0 -48
  35. package/components/dialog/demo/dialog-async-content-until.js +0 -89
  36. package/components/dialog/demo/dialog-async-content.js +0 -72
  37. package/components/dialog/demo/dialog-confirm.html +0 -102
  38. package/components/dialog/demo/dialog-container.js +0 -40
  39. package/components/dialog/demo/dialog-fullscreen.html +0 -273
  40. package/components/dialog/demo/dialog-nested.html +0 -94
  41. package/components/dialog/demo/dialog.html +0 -398
  42. package/components/dropdown/demo/dropdown-button.html +0 -102
  43. package/components/dropdown/demo/dropdown-context-menu.html +0 -129
  44. package/components/dropdown/demo/dropdown-flicker-inner.html +0 -70
  45. package/components/dropdown/demo/dropdown-flicker.html +0 -142
  46. package/components/dropdown/demo/dropdown-menu-demo-view.js +0 -37
  47. package/components/dropdown/demo/dropdown-menu.html +0 -227
  48. package/components/dropdown/demo/dropdown-more.html +0 -160
  49. package/components/dropdown/demo/dropdown-positioning.html +0 -127
  50. package/components/dropdown/demo/dropdown-tabs.html +0 -87
  51. package/components/dropdown/demo/dropdown.html +0 -217
  52. package/components/empty-state/demo/empty-state.html +0 -94
  53. package/components/expand-collapse/demo/expand-collapse-content.html +0 -58
  54. package/components/filter/demo/filter-load-more-demo.js +0 -182
  55. package/components/filter/demo/filter-overflow-group.html +0 -246
  56. package/components/filter/demo/filter-search-demo.js +0 -135
  57. package/components/filter/demo/filter-tags.html +0 -115
  58. package/components/filter/demo/filter.html +0 -230
  59. package/components/focus-trap/demo/focus-trap.html +0 -75
  60. package/components/form/demo/form-demo.js +0 -105
  61. package/components/form/demo/form-dialog-demo.js +0 -94
  62. package/components/form/demo/form-panel-demo.js +0 -89
  63. package/components/form/demo/form.html +0 -37
  64. package/components/hierarchical-view/demo/hierarchical-view.html +0 -221
  65. package/components/html-block/demo/html-block-code.html +0 -55
  66. package/components/html-block/demo/html-block.html +0 -696
  67. package/components/icons/demo/icon-color-override.js +0 -23
  68. package/components/icons/demo/icon-custom.html +0 -112
  69. package/components/icons/demo/icon-size-override.js +0 -24
  70. package/components/icons/demo/icon.html +0 -52
  71. package/components/inputs/demo/input-checkbox.html +0 -118
  72. package/components/inputs/demo/input-color-palette.js +0 -67
  73. package/components/inputs/demo/input-color.html +0 -110
  74. package/components/inputs/demo/input-date-range.html +0 -114
  75. package/components/inputs/demo/input-date-time-range.html +0 -128
  76. package/components/inputs/demo/input-date-time.html +0 -100
  77. package/components/inputs/demo/input-date.html +0 -81
  78. package/components/inputs/demo/input-group.html +0 -56
  79. package/components/inputs/demo/input-number.html +0 -136
  80. package/components/inputs/demo/input-percent.html +0 -99
  81. package/components/inputs/demo/input-radio-label-test.js +0 -45
  82. package/components/inputs/demo/input-radio-solo-test.js +0 -47
  83. package/components/inputs/demo/input-radio.html +0 -119
  84. package/components/inputs/demo/input-search.html +0 -75
  85. package/components/inputs/demo/input-select-test.js +0 -60
  86. package/components/inputs/demo/input-select.html +0 -45
  87. package/components/inputs/demo/input-text.html +0 -163
  88. package/components/inputs/demo/input-textarea.html +0 -124
  89. package/components/inputs/demo/input-time-range.html +0 -121
  90. package/components/inputs/demo/input-time.html +0 -95
  91. package/components/link/demo/link.html +0 -111
  92. package/components/list/demo/demo-list-nav.js +0 -170
  93. package/components/list/demo/demo-list-nested-iterations-helper.js +0 -168
  94. package/components/list/demo/demo-list-nested-lazy-load.js +0 -133
  95. package/components/list/demo/demo-list-nested.js +0 -291
  96. package/components/list/demo/demo-list.js +0 -241
  97. package/components/list/demo/list-color.html +0 -423
  98. package/components/list/demo/list-demo-scenarios.js +0 -380
  99. package/components/list/demo/list-drag-and-drop-position.js +0 -102
  100. package/components/list/demo/list-drag-and-drop.html +0 -82
  101. package/components/list/demo/list-expand-collapse.html +0 -136
  102. package/components/list/demo/list-item-actions.html +0 -371
  103. package/components/list/demo/list-item-custom.js +0 -204
  104. package/components/list/demo/list-item-layouts.html +0 -331
  105. package/components/list/demo/list-item-scroll.html +0 -122
  106. package/components/list/demo/list-layout.html +0 -575
  107. package/components/list/demo/list-nav.html +0 -110
  108. package/components/list/demo/list-nested.html +0 -270
  109. package/components/list/demo/list-selection.html +0 -301
  110. package/components/list/demo/list.html +0 -319
  111. package/components/loading-spinner/demo/loading-spinner-override.js +0 -34
  112. package/components/loading-spinner/demo/loading-spinner.html +0 -63
  113. package/components/menu/demo/checkbox-menu.html +0 -52
  114. package/components/menu/demo/custom-menu-item.js +0 -37
  115. package/components/menu/demo/custom-view.js +0 -63
  116. package/components/menu/demo/menu.html +0 -211
  117. package/components/menu/demo/radio-menu.html +0 -52
  118. package/components/meter/demo/meter.html +0 -115
  119. package/components/more-less/demo/more-less-test.js +0 -67
  120. package/components/more-less/demo/more-less.html +0 -71
  121. package/components/object-property-list/demo/object-property-list.html +0 -99
  122. package/components/offscreen/demo/offscreen-demo.js +0 -16
  123. package/components/offscreen/demo/offscreen.html +0 -44
  124. package/components/overflow-group/demo/demo-overflow-group.js +0 -29
  125. package/components/overflow-group/demo/overflow-group.html +0 -110
  126. package/components/paging/demo/pager-load-more.html +0 -120
  127. package/components/popover/demo/popover.html +0 -309
  128. package/components/progress/demo/progress.html +0 -104
  129. package/components/scroll-wrapper/demo/scroll-wrapper-test.js +0 -108
  130. package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -52
  131. package/components/selection/demo/demo-selection.js +0 -35
  132. package/components/selection/demo/selection.html +0 -198
  133. package/components/skeleton/demo/skeleton-group-nested-test.js +0 -71
  134. package/components/skeleton/demo/skeleton-group-test-wrapper.js +0 -18
  135. package/components/skeleton/demo/skeleton-group-test.js +0 -91
  136. package/components/skeleton/demo/skeleton-mixin.html +0 -78
  137. package/components/skeleton/demo/skeleton-test-box.js +0 -34
  138. package/components/skeleton/demo/skeleton-test-container.js +0 -45
  139. package/components/skeleton/demo/skeleton-test-heading.js +0 -44
  140. package/components/skeleton/demo/skeleton-test-link.js +0 -47
  141. package/components/skeleton/demo/skeleton-test-paragraph.js +0 -54
  142. package/components/skeleton/demo/skeleton-test-stack.js +0 -38
  143. package/components/skeleton/demo/skeleton-test-width.js +0 -20
  144. package/components/sorting/demo/sort.html +0 -37
  145. package/components/status-indicator/demo/status-indicator.html +0 -99
  146. package/components/switch/demo/switch.html +0 -95
  147. package/components/table/demo/table-test.js +0 -271
  148. package/components/table/demo/table.html +0 -107
  149. package/components/tabs/demo/tab-custom.js +0 -39
  150. package/components/tabs/demo/tabs-array.js +0 -43
  151. package/components/tabs/demo/tabs.html +0 -558
  152. package/components/tag-list/demo/tag-list.html +0 -117
  153. package/components/tooltip/demo/tooltip.html +0 -275
  154. package/components/typography/demo/typography.html +0 -93
  155. package/components/view-switcher/demo/demo-table-view.js +0 -41
  156. package/components/view-switcher/demo/view-switcher.html +0 -71
  157. package/directives/animate/demo/animate-test.js +0 -98
  158. package/directives/animate/demo/index.html +0 -23
  159. package/helpers/demo/announce-test.js +0 -37
  160. package/helpers/demo/announce.html +0 -19
  161. package/helpers/demo/dismissible-test.js +0 -66
  162. package/helpers/demo/dismissible.html +0 -38
  163. package/helpers/demo/gestures.html +0 -58
  164. package/helpers/demo/prism.html +0 -694
  165. package/helpers/demo/template-tags.html +0 -118
  166. package/mixins/arrow-keys/demo/arrow-keys-mixin.html +0 -29
  167. package/mixins/arrow-keys/demo/arrow-keys-test.js +0 -38
  168. package/mixins/async-container/demo/async-container.html +0 -109
  169. package/mixins/async-container/demo/async-container.js +0 -27
  170. package/mixins/async-container/demo/async-item.js +0 -80
  171. package/mixins/labelled/demo/labelled-mixin.html +0 -90
  172. package/mixins/localize/demo/localize-mixin-greeting.js +0 -39
  173. package/mixins/localize/demo/localize-mixin-mission.js +0 -25
  174. package/mixins/localize/demo/localize-mixin.html +0 -28
  175. package/templates/primary-secondary/demo/form.html +0 -55
  176. package/templates/primary-secondary/demo/index.html +0 -27
  177. package/templates/primary-secondary/demo/integration.html +0 -457
  178. package/templates/primary-secondary/demo/overflow-hidden.html +0 -22
  179. package/templates/primary-secondary/demo/width-type-normal.html +0 -26
package/components/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>