@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/dropdown/demo/dropdown-flicker-inner.html DELETED
@@ -1,70 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- </head>
9
-
10
- <body>
11
-
12
- <div>This is stuff</div>
13
- <div>This is stuff</div>
14
- <div>This is stuff</div>
15
- <div>This is stuff</div>
16
- <div>This is stuff</div>
17
- <div>This is stuff</div>
18
- <div>This is stuff</div>
19
- <div>This is stuff</div>
20
- <div>This is stuff</div>
21
- <div>This is stuff</div>
22
- <div>This is stuff</div>
23
- <div>This is stuff</div>
24
- <div>This is stuff</div>
25
- <div>This is stuff</div>
26
- <div>This is stuff</div>
27
- <div>This is stuff</div>
28
- <div>This is stuff</div>
29
- <div>This is stuff</div>
30
- <div>This is stuff</div>
31
- <div>This is stuff</div>
32
- <div>This is stuff</div>
33
- <div>This is stuff</div>
34
- <div>This is stuff</div>
35
- <div>This is stuff</div>
36
- <div>This is stuff</div>
37
- <div>This is stuff</div>
38
- <div>This is stuff</div>
39
- <div>This is stuff</div>
40
- <div>This is stuff</div>
41
- <div>This is stuff</div>
42
- <div>This is stuff</div>
43
- <div>This is stuff</div>
44
- <div>This is stuff</div>
45
- <div>This is stuff</div>
46
- <div>This is stuff</div>
47
- <div>This is stuff</div>
48
- <div>This is stuff</div>
49
- <div>This is stuff</div>
50
- <div>This is stuff</div>
51
- <div>This is stuff</div>
52
- <div>This is stuff</div>
53
- <div>This is stuff</div>
54
- <div>This is stuff</div>
55
- <div>This is stuff</div>
56
- <div>This is stuff</div>
57
- <div>This is stuff</div>
58
- <div>This is stuff</div>
59
- <div>This is stuff</div>
60
- <div>This is stuff</div>
61
- <div>This is stuff</div>
62
- <div>This is stuff</div>
63
- <div>This is stuff</div>
64
- <div>This is stuff</div>
65
- <div>This is stuff</div>
66
- <div>This is stuff</div>
67
- <div>This is stuff</div>
68
- </body>
69
-
70
- </html>
package/components/dropdown/demo/dropdown-flicker.html DELETED
@@ -1,142 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script type="module">
9
- import '../../demo/demo-page.js';
10
- import '../../menu/menu.js';
11
- import '../../menu/menu-item.js';
12
- import '../dropdown-more.js';
13
- import '../dropdown-menu.js';
14
- </script>
15
- <style>
16
- iframe {
17
- border: 0;
18
- margin: 0;
19
- outline: 0;
20
- padding: 0;
21
- width: 100%;
22
- }
23
- </style>
24
- </head>
25
-
26
- <body unresolved>
27
-
28
- <d2l-demo-page page-title="d2l-dropdown-more" style="width: 900px;">
29
-
30
- <div style="text-align: right;">
31
- <d2l-dropdown-more text="Open!">
32
- <d2l-dropdown-menu>
33
- <d2l-menu label="Astronomy">
34
- <d2l-menu-item text="Introduction"></d2l-menu-item>
35
- <d2l-menu-item text="Searching for the Heavens"></d2l-menu-item>
36
- <d2l-menu-item text="The Night Sky"></d2l-menu-item>
37
- <d2l-menu-item text="The Universe"></d2l-menu-item>
38
- <d2l-menu-item text="Constellations"></d2l-menu-item>
39
- <d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>
40
- <d2l-menu-item text="Reading Star Maps"></d2l-menu-item>
41
- <d2l-menu-item text="Telescopes"></d2l-menu-item>
42
- </d2l-menu>
43
- </d2l-dropdown-menu>
44
- </d2l-dropdown-more>
45
- </div>
46
- <iframe src="dropdown-flicker-inner.html"></iframe>
47
-
48
- </d2l-demo-page>
49
- <script>
50
- function doIFrameStuff(iframe) {
51
-
52
- const pollInterval = 50;
53
-
54
- const getSafeHeight = height => {
55
- // If the client gives us content with no size restrictions then it will shrink to the minimal size allowed
56
- // The minimal allowed size in this case will be 150: http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height
57
- // Major browsers may add 8px of margins to top and bottom depending on what tags client wrap their content in or client might put their own defaults in place too
58
- // So we'll use the greater of the configured default height on the frame or 200, which will account for 150 from the auto size and another 50 of tolerance.
59
- // For tiny content this may unfortunately force some unnecessary whitespace
60
- // But in most cases this will allow us to give clients a reasonable default if they forget to enforce minimums in their content.
61
- // The default height can be confgured from within the frame by setting `window.frameElement.dataset.defaultHeight`. Values lower then 200 are not respected.
62
- const defaultHeight = Math.max(iframe.dataset.defaultHeight || 0, 200);
63
-
64
- if (!height || height < defaultHeight) {
65
- height = defaultHeight;
66
- }
67
- return `${height}px`;
68
- };
69
-
70
- const getMinHeight = (iframe, currentHeight) => {
71
- const doc = iframe.contentDocument;
72
- const docElem = doc.documentElement;
73
- const rootScrollHeight = docElem.scrollHeight;
74
- const bodyScrollHeight = doc.body.scrollHeight;
75
- const rootHeight = doc.documentElement.getBoundingClientRect().height;
76
- const bodyHeight = doc.body.getBoundingClientRect().height;
77
- const minHeight = Math.ceil(Math.min(rootScrollHeight, bodyScrollHeight, rootHeight, bodyHeight));
78
- return minHeight < currentHeight ? minHeight : currentHeight - 100;
79
- };
80
-
81
- const getHeight = iframe => {
82
- const doc = iframe.contentDocument;
83
- const docElem = doc.documentElement;
84
- const rootScrollHeight = docElem.scrollHeight > docElem.clientHeight ? docElem.scrollHeight : 0;
85
- const bodyScrollHeight = doc.body.scrollHeight > doc.body.clientHeight ? doc.body.scrollHeight : 0;
86
- const rootHeight = doc.documentElement.getBoundingClientRect().height;
87
- const bodyHeight = doc.body.getBoundingClientRect().height;
88
- return Math.ceil(Math.max(rootScrollHeight, bodyScrollHeight, rootHeight, bodyHeight));
89
- };
90
-
91
- const doResize = (height, location) => {
92
-
93
- //console.log('doResize');
94
-
95
- let newHeight, newLocation, stopResizing;
96
-
97
- try {
98
- const targetWindow = iframe.contentWindow;
99
-
100
- iframe.style.height = getSafeHeight(getMinHeight(iframe, height));
101
- newHeight = getHeight(iframe);
102
-
103
- targetWindow.document.body.style.overflowY = 'hidden';
104
- newLocation = targetWindow.location.href;
105
-
106
- iframe.style.height = getSafeHeight(newHeight);
107
- iframe.style.overflowY = 'hidden';
108
-
109
- iframe.parentElement.style.minHeight = iframe.style.height; // This ensures that we will not reset scrollbar to the top ( see US52307 )
110
-
111
- } catch {
112
- // We were unable to size content so we should go to defaults
113
- iframe.style.height = getSafeHeight();
114
- iframe.parentElement.style.minHeight = iframe.style.height;
115
-
116
- if (iframe.contentDocument?.body) {
117
- iframe.contentDocument.body.style.overflowY = 'auto';
118
- }
119
- }
120
-
121
- if (newLocation !== location && newHeight !== height) {
122
- //Now that content is resized we should snap back to the top when we follow a link to a new page
123
- window.parent.scroll(0, 0);
124
- }
125
-
126
- if (!stopResizing) {
127
- setTimeout(() => doResize(newHeight, newLocation), pollInterval);
128
- }
129
- };
130
-
131
- const resize = function() {
132
- if (iframe.contentDocument) doResize();
133
- };
134
-
135
- resize();
136
- }
137
-
138
- doIFrameStuff(document.querySelector('iframe'));
139
- </script>
140
- </body>
141
-
142
- </html>
package/components/dropdown/demo/dropdown-menu-demo-view.js DELETED
@@ -1,37 +0,0 @@
1
- import '../../colors/colors.js';
2
- import '../../button/button-subtle.js';
3
- import { css, html, LitElement } from 'lit';
4
- import { HierarchicalViewMixin } from '../../hierarchical-view/hierarchical-view-mixin.js';
5
- import { LocalizeCoreElement } from '../../../helpers/localize-core-element.js';
6
-
7
- class DemoView extends LocalizeCoreElement(HierarchicalViewMixin(LitElement)) {
8
-
9
- static get styles() {
10
- return [ super.styles,
11
- css`
12
- :host {
13
- box-sizing: border-box;
14
- color: var(--d2l-color-ferrite);
15
- cursor: default;
16
- }
17
- .d2l-hierarchical-view-content {
18
- padding: 12px;
19
- }
20
- `
21
- ];
22
- }
23
-
24
- render() {
25
- return html`
26
- <div class="d2l-hierarchical-view-content">
27
- <div>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.</div>
28
- <div>
29
- <d2l-button-subtle text="${this.localize('components.pager-load-more.action')}"></d2l-button-subtle>
30
- </div>
31
- </div>
32
- `;
33
- }
34
-
35
- }
36
-
37
- customElements.define('d2l-dropdown-menu-demo-view', DemoView);
package/components/dropdown/demo/dropdown-menu.html DELETED
@@ -1,227 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script type="module">
9
- import '../../demo/demo-page.js';
10
- import '../../menu/menu.js';
11
- import '../../menu/menu-item.js';
12
- import '../../menu/menu-item-link.js';
13
- import '../../menu/menu-item-radio.js';
14
- import '../dropdown.js';
15
- import '../dropdown-menu.js';
16
- import './dropdown-menu-demo-view.js';
17
- </script>
18
- </head>
19
-
20
- <body unresolved>
21
-
22
- <d2l-demo-page page-title="d2l-dropdown-menu">
23
-
24
- <h2>Normal</h2>
25
- <d2l-demo-snippet>
26
- <template>
27
- <d2l-dropdown>
28
- <button class="d2l-dropdown-opener">Open it!</button>
29
- <d2l-dropdown-menu id="dropdown">
30
- <d2l-menu label="Astronomy">
31
- <d2l-menu-item text="Introduction"></d2l-menu-item>
32
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
33
- <d2l-menu-item text="The Solar System">
34
- <d2l-menu>
35
- <d2l-menu-item text="Formation"></d2l-menu-item>
36
- <d2l-menu-item text="Modern Solar System"></d2l-menu-item>
37
- <d2l-menu-item text="Future Solar System"></d2l-menu-item>
38
- <d2l-menu-item text="The Planets">
39
- <d2l-menu>
40
- <d2l-menu-item text="Mercury"></d2l-menu-item>
41
- <d2l-menu-item text="Venus"></d2l-menu-item>
42
- <d2l-menu-item text="Earth"></d2l-menu-item>
43
- <d2l-menu-item text="Mars"></d2l-menu-item>
44
- <d2l-menu-item text="Jupiter"></d2l-menu-item>
45
- <d2l-menu-item text="Saturn"></d2l-menu-item>
46
- <d2l-menu-item text="Uranus"></d2l-menu-item>
47
- <d2l-menu-item text="Neptune"></d2l-menu-item>
48
- <d2l-menu-item text="Dwarf Planets"></d2l-menu-item>
49
- </d2l-menu>
50
- </d2l-menu-item>
51
- <d2l-menu-item text="The Sun"></d2l-menu-item>
52
- <d2l-menu-item text="Solar &amp; Lunar Eclipses"></d2l-menu-item>
53
- <d2l-menu-item text="Meteors &amp; Meteorites"></d2l-menu-item>
54
- <d2l-menu-item text="Asteroids"></d2l-menu-item>
55
- <d2l-menu-item text="Comets"></d2l-menu-item>
56
- </d2l-menu>
57
- </d2l-menu-item>
58
- <d2l-menu-item text="Stars &amp; Galaxies">
59
- <d2l-menu>
60
- <d2l-menu-item text="What is a Star?"></d2l-menu-item>
61
- <d2l-menu-item text="Lifecycle of a Star"></d2l-menu-item>
62
- <d2l-menu-item text="Binaries &amp; Multiples"></d2l-menu-item>
63
- <d2l-menu-item text="Star Clusters"></d2l-menu-item>
64
- <d2l-menu-item text="Star Death">
65
- <d2l-menu>
66
- <d2l-menu-item text="Supernovae"></d2l-menu-item>
67
- <d2l-menu-item text="Black Holes"></d2l-menu-item>
68
- </d2l-menu>
69
- </d2l-menu-item>
70
- <d2l-menu-item text="Star Clusters"></d2l-menu-item>
71
- <d2l-menu-item text="Galaxies">
72
- <d2l-menu>
73
- <d2l-menu-item text="Classification"></d2l-menu-item>
74
- <d2l-menu-item text="Birth &amp; Evolution"></d2l-menu-item>
75
- <d2l-menu-item text="Spiral"></d2l-menu-item>
76
- <d2l-menu-item text="Elliptical"></d2l-menu-item>
77
- <d2l-menu-item text="Lenticular"></d2l-menu-item>
78
- <d2l-menu-item text="Irregular"></d2l-menu-item>
79
- <d2l-menu-item text="Active &amp; Radio"></d2l-menu-item>
80
- <d2l-menu-item text="Quasars"></d2l-menu-item>
81
- <d2l-menu-item text="Galaxy Clusters"></d2l-menu-item>
82
- </d2l-menu>
83
- </d2l-menu-item>
84
- </d2l-menu>
85
- </d2l-menu-item>
86
- <d2l-menu-item text="The Night Sky">
87
- <d2l-menu>
88
- <d2l-menu-item text="Constellations"></d2l-menu-item>
89
- <d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>
90
- <d2l-menu-item text="Reading Star Maps"></d2l-menu-item>
91
- <d2l-menu-item text="Telescopes"></d2l-menu-item>
92
- </d2l-menu>
93
- </d2l-menu-item>
94
- <d2l-menu-item text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon"></d2l-menu-item>
95
- <d2l-menu-item text="The Universe"></d2l-menu-item>
96
- </d2l-menu>
97
- </d2l-dropdown-menu>
98
- </d2l-dropdown>
99
- </template>
100
- </d2l-demo-snippet>
101
-
102
- <h2>With Header/Footer</h2>
103
- <d2l-demo-snippet>
104
- <template>
105
- <d2l-dropdown>
106
- <button class="d2l-dropdown-opener">Open it!</button>
107
- <d2l-dropdown-menu id="dropdown" no-padding-footer>
108
- <div slot="header" style="font-weight: bold; text-align: center; width: 100%;">Physics Topics</div>
109
- <d2l-menu label="Physics Topics">
110
- <d2l-menu-item text="Introduction"></d2l-menu-item>
111
- <d2l-menu-item text="Matter"></d2l-menu-item>
112
- <d2l-menu-item text="Speed"></d2l-menu-item>
113
- <d2l-menu-item text="Velocity"></d2l-menu-item>
114
- <d2l-menu-item text="Acceleration"></d2l-menu-item>
115
- <d2l-menu-item text="Jerk"></d2l-menu-item>
116
- <d2l-menu-item text="Jounce"></d2l-menu-item>
117
- <d2l-menu-item text="Friction"></d2l-menu-item>
118
- <d2l-menu-item text="Centrifugal Force"></d2l-menu-item>
119
- <d2l-menu-item text="Centripetal Force"></d2l-menu-item>
120
- <d2l-menu-item text="Torque"></d2l-menu-item>
121
- <d2l-menu-item text="Inertia"></d2l-menu-item>
122
- <d2l-menu-item text="Momentum"></d2l-menu-item>
123
- <d2l-menu-item text="Potential Energy"></d2l-menu-item>
124
- <d2l-menu-item text="Gravity"></d2l-menu-item>
125
- <d2l-menu-item text="Magnetism"></d2l-menu-item>
126
- </d2l-menu>
127
- <div slot="footer" style="font-size: 0.75rem; text-align: center; width: 100%;">And <a href="#">More</a>!</div>
128
- </d2l-dropdown-menu>
129
- </d2l-dropdown>
130
- </template>
131
- </d2l-demo-snippet>
132
-
133
- <h2>Long Menu with Right Mobile Tray</h2>
134
- <d2l-demo-snippet>
135
- <template>
136
- <d2l-dropdown>
137
- <button class="d2l-dropdown-opener">Open it!</button>
138
- <d2l-dropdown-menu id="dropdown" no-padding-footer mobile-tray="right" max-height="300">
139
- <div slot="header" style="font-weight: bold; text-align: center; width: 100%;">Physics Topics</div>
140
- <d2l-menu label="Physics Topics">
141
- <d2l-menu-item text="Introduction"></d2l-menu-item>
142
- <d2l-menu-item text="Matter"></d2l-menu-item>
143
- <d2l-menu-item text="Speed"></d2l-menu-item>
144
- <d2l-menu-item text="Velocity"></d2l-menu-item>
145
- <d2l-menu-item text="Acceleration"></d2l-menu-item>
146
- <d2l-menu-item text="Jerk"></d2l-menu-item>
147
- <d2l-menu-item text="Jounce"></d2l-menu-item>
148
- <d2l-menu-item text="Friction"></d2l-menu-item>
149
- <d2l-menu-item text="Centrifugal Force"></d2l-menu-item>
150
- <d2l-menu-item text="Centripetal Force"></d2l-menu-item>
151
- <d2l-menu-item text="Torque"></d2l-menu-item>
152
- <d2l-menu-item text="Inertia"></d2l-menu-item>
153
- <d2l-menu-item text="Momentum"></d2l-menu-item>
154
- <d2l-menu-item text="Potential Energy"></d2l-menu-item>
155
- <d2l-menu-item text="Gravity"></d2l-menu-item>
156
- <d2l-menu-item text="Magnetism"></d2l-menu-item>
157
- </d2l-menu>
158
- <div slot="footer" style="font-size: 0.75rem; text-align: center; width: 100%;">And <a href="#">More</a>!</div>
159
- </d2l-dropdown-menu>
160
- </d2l-dropdown>
161
- </template>
162
- </d2l-demo-snippet>
163
-
164
- <h2>With Radio Menu</h2>
165
- <d2l-demo-snippet>
166
- <template>
167
- <d2l-dropdown>
168
- <button class="d2l-dropdown-opener">Open it!</button>
169
- <d2l-dropdown-menu id="dropdown" no-padding-footer>
170
- <div slot="header" style="font-weight: bold; text-align: center; width: 100%;">Study Guide</div>
171
- <d2l-menu label="Study Guide">
172
- <d2l-menu-item-radio text="Introduction" value=0></d2l-menu-item-radio>
173
- <d2l-menu-item-radio text="Chapter 1" value=1></d2l-menu-item-radio>
174
- <d2l-menu-item-radio text="Chapter 2" value=2></d2l-menu-item-radio>
175
- <d2l-menu-item-radio text="Chapter 3" value=3></d2l-menu-item-radio>
176
- <d2l-menu-item-radio text="Chapter 4" value=4></d2l-menu-item-radio>
177
- <d2l-menu-item-radio text="Chapter 5" value=5 selected></d2l-menu-item-radio>
178
- <d2l-menu-item-radio text="Chapter 6" value=6></d2l-menu-item-radio>
179
- <d2l-menu-item-radio text="Chapter 7" value=7></d2l-menu-item-radio>
180
- <d2l-menu-item-radio text="Chapter 8" value=8></d2l-menu-item-radio>
181
- <d2l-menu-item-radio text="Chapter 9" value=9></d2l-menu-item-radio>
182
- <d2l-menu-item-radio text="Chapter 10" value=10></d2l-menu-item-radio>
183
- </d2l-menu>
184
- </d2l-dropdown-menu>
185
- </d2l-dropdown>
186
- </template>
187
- </d2l-demo-snippet>
188
-
189
- <h2>With Links</h2>
190
- <d2l-demo-snippet>
191
- <template>
192
- <d2l-dropdown>
193
- <button class="d2l-dropdown-opener">Open it!</button>
194
- <d2l-dropdown-menu no-padding-footer>
195
- <div slot="header" style="font-weight: bold; text-align: center; width: 100%;">Helpful Links</div>
196
- <d2l-menu label="Helpful Links">
197
- <d2l-menu-item-link text="menu.js (View)" href="../../menu/menu.js"></d2l-menu-item-link>
198
- <d2l-menu-item-link text="menu.js (Download)" href="../../menu/menu.js" target="_blank" download></d2l-menu-item-link>
199
- </d2l-menu>
200
- </d2l-dropdown-menu>
201
- </d2l-dropdown>
202
- </template>
203
- </d2l-demo-snippet>
204
-
205
- <h2>Custom View</h2>
206
- <d2l-demo-snippet>
207
- <template>
208
- <d2l-dropdown>
209
- <button class="d2l-dropdown-opener">Open it!</button>
210
- <d2l-dropdown-menu>
211
- <d2l-menu label="Astronomy">
212
- <d2l-menu-item text="Introduction"></d2l-menu-item>
213
- <d2l-menu-item text="Searching for the Heavens">
214
- <d2l-dropdown-menu-demo-view></d2l-dropdown-menu-demo-view>
215
- </d2l-menu-item>
216
- <d2l-menu-item text="The Solar System"></d2l-menu-item>
217
- </d2l-menu>
218
- </d2l-dropdown-menu>
219
- </d2l-dropdown>
220
- </template>
221
- </d2l-demo-snippet>
222
-
223
- </d2l-demo-page>
224
-
225
- </body>
226
-
227
- </html>
package/components/dropdown/demo/dropdown-more.html DELETED
@@ -1,160 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script type="module">
9
- import '../../demo/demo-page.js';
10
- import '../../menu/menu.js';
11
- import '../../menu/menu-item.js';
12
- import '../dropdown-more.js';
13
- import '../dropdown-menu.js';
14
- </script>
15
- <style>
16
- .ancestor-container {
17
- padding: 0.5rem;
18
- position: relative;
19
- }
20
-
21
- .ancestor-container::before {
22
- background-color: rgba(0, 0, 0, 0.03);
23
- box-sizing: border-box;
24
- content: "visible-on-ancestor-target";
25
- font-size: 0.7rem;
26
- height: 100%;
27
- left: 0;
28
- padding: 0.5rem;
29
- position: absolute;
30
- text-align: right;
31
- top: 0;
32
- width: 100%;
33
- }
34
-
35
- .translucent-container {
36
- height: 150px;
37
- position: relative;
38
- }
39
-
40
- .translucent-container > img {
41
- border-radius: 6px;
42
- height: 100%;
43
- max-width: 400px;
44
- position: absolute;
45
- width: 100%;
46
- }
47
-
48
- .translucent-container > d2l-dropdown-more {
49
- margin-left: 12px;
50
- margin-top: 12px;
51
- padding-right: 0;
52
- }
53
- </style>
54
- </head>
55
-
56
- <body unresolved>
57
-
58
- <d2l-demo-page page-title="d2l-dropdown-more">
59
-
60
- <h2>Normal</h2>
61
- <d2l-demo-snippet>
62
- <template>
63
- <d2l-dropdown-more text="Open!">
64
- <d2l-dropdown-menu>
65
- <d2l-menu label="Astronomy">
66
- <d2l-menu-item text="Introduction"></d2l-menu-item>
67
- <d2l-menu-item text="Searching for the Heavens"></d2l-menu-item>
68
- <d2l-menu-item text="The Night Sky">
69
- <d2l-menu>
70
- <d2l-menu-item text="Constellations"></d2l-menu-item>
71
- <d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>
72
- <d2l-menu-item text="Reading Star Maps"></d2l-menu-item>
73
- <d2l-menu-item text="Telescopes"></d2l-menu-item>
74
- </d2l-menu>
75
- </d2l-menu-item>
76
- <d2l-menu-item text="The Universe"></d2l-menu-item>
77
- </d2l-menu>
78
- </d2l-dropdown-menu>
79
- </d2l-dropdown-more>
80
- </template>
81
- </d2l-demo-snippet>
82
-
83
- <h2>Translucent</h2>
84
- <d2l-demo-snippet>
85
- <template>
86
- <d2l-dropdown-more text="Open!" translucent>
87
- <d2l-dropdown-menu>
88
- <d2l-menu label="Astronomy">
89
- <d2l-menu-item text="Introduction"></d2l-menu-item>
90
- <d2l-menu-item text="Searching for the Heavens"></d2l-menu-item>
91
- <d2l-menu-item text="The Night Sky">
92
- <d2l-menu>
93
- <d2l-menu-item text="Constellations"></d2l-menu-item>
94
- <d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>
95
- <d2l-menu-item text="Reading Star Maps"></d2l-menu-item>
96
- <d2l-menu-item text="Telescopes"></d2l-menu-item>
97
- </d2l-menu>
98
- </d2l-menu-item>
99
- <d2l-menu-item text="The Universe"></d2l-menu-item>
100
- </d2l-menu>
101
- </d2l-dropdown-menu>
102
- </d2l-dropdown-more>
103
- </template>
104
- </d2l-demo-snippet>
105
-
106
- <h2>Visible on Ancestor</h2>
107
- <d2l-demo-snippet>
108
- <template>
109
- <div class="ancestor-container d2l-visible-on-ancestor-target">
110
- <d2l-dropdown-more text="Open!" visible-on-ancestor>
111
- <d2l-dropdown-menu>
112
- <d2l-menu label="Astronomy">
113
- <d2l-menu-item text="Introduction"></d2l-menu-item>
114
- <d2l-menu-item text="Searching for the Heavens"></d2l-menu-item>
115
- <d2l-menu-item text="The Night Sky">
116
- <d2l-menu>
117
- <d2l-menu-item text="Constellations"></d2l-menu-item>
118
- <d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>
119
- <d2l-menu-item text="Reading Star Maps"></d2l-menu-item>
120
- <d2l-menu-item text="Telescopes"></d2l-menu-item>
121
- </d2l-menu>
122
- </d2l-menu-item>
123
- <d2l-menu-item text="The Universe"></d2l-menu-item>
124
- </d2l-menu>
125
- </d2l-dropdown-menu>
126
- </d2l-dropdown-more>
127
- </div>
128
- </template>
129
- </d2l-demo-snippet>
130
-
131
- <h2>Translucent + Visible on Ancestor</h2>
132
- <d2l-demo-snippet>
133
- <template>
134
- <div class="translucent-container d2l-visible-on-ancestor-target">
135
- <img alt
136
- src="https://s.brightspace.com/course-images/images/e4fbb461-4cd9-4512-8304-44f2c2b741f1/tile-low-density-max-size.jpg">
137
- <d2l-dropdown-more text="Open!" translucent visible-on-ancestor>
138
- <d2l-dropdown-menu>
139
- <d2l-menu label="Astronomy">
140
- <d2l-menu-item text="Introduction"></d2l-menu-item>
141
- <d2l-menu-item text="Searching for the Heavens"></d2l-menu-item>
142
- <d2l-menu-item text="The Night Sky">
143
- <d2l-menu>
144
- <d2l-menu-item text="Constellations"></d2l-menu-item>
145
- <d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>
146
- <d2l-menu-item text="Reading Star Maps"></d2l-menu-item>
147
- <d2l-menu-item text="Telescopes"></d2l-menu-item>
148
- </d2l-menu>
149
- </d2l-menu-item>
150
- <d2l-menu-item text="The Universe"></d2l-menu-item>
151
- </d2l-menu>
152
- </d2l-dropdown-menu>
153
- </d2l-dropdown-more>
154
- </div>
155
- </template>
156
- </d2l-demo-snippet>
157
- </d2l-demo-page>
158
- </body>
159
-
160
- </html>