@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/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>