@brightspace-ui/core 3.227.4 → 3.227.6

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