@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/loading-spinner/demo/loading-spinner.html DELETED
@@ -1,63 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import '../loading-spinner.js';
10
- import './loading-spinner-override.js';
11
- </script>
12
- </head>
13
- <body unresolved>
14
-
15
- <d2l-demo-page page-title="d2l-loading-spinner">
16
-
17
- <h2>Default</h2>
18
-
19
- <d2l-demo-snippet>
20
- <template>
21
- <d2l-loading-spinner></d2l-loading-spinner>
22
- </template>
23
- </d2l-demo-snippet>
24
-
25
- <h2>Color Override (attribute)</h2>
26
-
27
- <d2l-demo-snippet>
28
- <template>
29
- <d2l-loading-spinner color="#cd2026"></d2l-loading-spinner>
30
- <d2l-loading-spinner color="var(--d2l-color-cinnabar)"></d2l-loading-spinner>
31
- </template>
32
- </d2l-demo-snippet>
33
-
34
- <h2>Size Override (attribute)</h2>
35
-
36
- <d2l-demo-snippet>
37
- <template>
38
- <d2l-loading-spinner size="30"></d2l-loading-spinner>
39
- <d2l-loading-spinner size="70"></d2l-loading-spinner>
40
- <d2l-loading-spinner size="100"></d2l-loading-spinner>
41
- </template>
42
- </d2l-demo-snippet>
43
-
44
- <h2>Color Override (CSS variable)</h2>
45
-
46
- <d2l-demo-snippet>
47
- <template>
48
- <d2l-loading-spinner-demo-override override-color></d2l-loading-spinner-demo-override>
49
- </template>
50
- </d2l-demo-snippet>
51
-
52
- <h2>Size Override (CSS variable)</h2>
53
-
54
- <d2l-demo-snippet>
55
- <template>
56
- <d2l-loading-spinner-demo-override override-size></d2l-loading-spinner-demo-override>
57
- </template>
58
- </d2l-demo-snippet>
59
-
60
- </d2l-demo-page>
61
-
62
- </body>
63
- </html>
package/components/menu/demo/checkbox-menu.html DELETED
@@ -1,52 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import '../menu.js';
10
- import '../menu-item-checkbox.js';
11
- </script>
12
- </head>
13
- <body unresolved>
14
-
15
- <d2l-demo-page page-title="d2l-menu (checkbox)">
16
-
17
- <h2>Checkbox Menu</h2>
18
- <d2l-demo-snippet>
19
- <template>
20
- <d2l-menu label="Checkbox Menu" style="max-width: 400px;">
21
- <d2l-menu-item-checkbox text="Checkbox 1 with an extremely long title that will only be cut off with an ellipsis after two lines" value="1"></d2l-menu-item-checkbox>
22
- <d2l-menu-item-checkbox text="Checkbox 2" value="2"></d2l-menu-item-checkbox>
23
- <d2l-menu-item-checkbox text="Checkbox 3" value="3"></d2l-menu-item-checkbox>
24
- </d2l-menu>
25
-
26
- <script>
27
- document.body.addEventListener('d2l-menu-item-change', (e) => {
28
- console.log('item selection changed:', e.target);
29
- });
30
- </script>
31
- </template>
32
- </d2l-demo-snippet>
33
-
34
- <h2>Supporting Slot</h2>
35
- <d2l-demo-snippet>
36
- <template>
37
- <d2l-menu label="Checkbox Menu" style="max-width: 400px;">
38
- <d2l-menu-item-checkbox text="Checkbox 1" value="1">
39
- <div slot="supporting">1 point</div>
40
- </d2l-menu-item-checkbox>
41
- <d2l-menu-item-checkbox text="Checkbox 2" value="2">
42
- <div slot="supporting">2 points</div>
43
- </d2l-menu-item-checkbox>
44
- <d2l-menu-item-checkbox text="Checkbox 3" value="3">
45
- <div slot="supporting">3 points</div>
46
- </d2l-menu-item-checkbox>
47
- </d2l-menu>
48
- </template>
49
- </d2l-demo-snippet>
50
- </d2l-demo-page>
51
- </body>
52
- </html>
package/components/menu/demo/custom-menu-item.js DELETED
@@ -1,37 +0,0 @@
1
- import { css, html, LitElement } from 'lit';
2
- import { MenuItemMixin } from '../menu-item-mixin.js';
3
- import { menuItemStyles } from '../menu-item-styles.js';
4
-
5
- class CustomMenuItem extends MenuItemMixin(LitElement) {
6
-
7
- static get properties() {
8
- return {
9
- text: { type: String }
10
- };
11
- }
12
-
13
- static get styles() {
14
- return [ menuItemStyles,
15
- css`
16
- :host {
17
- padding: 0.75rem 1.5rem;
18
- }
19
- :host(:hover) .d2l-menu-item-text,
20
- :host(:focus) .d2l-menu-item-text {
21
- -webkit-transform: rotateY(360deg);
22
- transform: rotateY(360deg);
23
- transition: transform 2s;
24
- }
25
- `
26
- ];
27
- }
28
-
29
- render() {
30
- return html`
31
- <div class="d2l-menu-item-text">${this.text}</div>
32
- <slot></slot>
33
- `;
34
- }
35
- }
36
-
37
- customElements.define('d2l-custom-menu-item', CustomMenuItem);
package/components/menu/demo/custom-view.js DELETED
@@ -1,63 +0,0 @@
1
- import { css, html, LitElement } from 'lit';
2
- import { HierarchicalViewMixin } from '../../hierarchical-view/hierarchical-view-mixin.js';
3
-
4
- class CustomView extends HierarchicalViewMixin(LitElement) {
5
-
6
- static get styles() {
7
- return [ super.styles,
8
- css`
9
- :host {
10
- background-color: black;
11
- border: 1px solid black;
12
- border-radius: 0.3rem;
13
- box-sizing: border-box;
14
- color: white;
15
- font-size: 1.5rem;
16
- }
17
- :host .d2l-hierarchical-view-content {
18
- min-height: 500px;
19
- padding: 1rem;
20
- }
21
- :host .d2l-custom-view-back-container {
22
- margin-top: 1rem;
23
- }
24
- :host a {
25
- color: white;
26
- font-size: 0.7rem;
27
- }
28
- `
29
- ];
30
- }
31
-
32
- firstUpdated() {
33
- super.firstUpdated();
34
-
35
- this.addEventListener('d2l-hierarchical-view-show-complete', this._onShowComplete);
36
- }
37
-
38
- render() {
39
- return html`
40
- <div class="d2l-hierarchical-view-content">
41
- <slot></slot>
42
- <div class="d2l-custom-view-back-container">
43
- <a href="javascript:void(0);" @click="${this._handleHide}" tabindex="-1">Go Back</a>
44
- </div>
45
- </div>
46
- `;
47
- }
48
-
49
- focus() {
50
- if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-custom-view-back-container > a').focus();
51
- }
52
-
53
- _handleHide(e) {
54
- e.stopPropagation();
55
- this.hide();
56
- }
57
-
58
- _onShowComplete() {
59
- this.focus();
60
- }
61
- }
62
-
63
- customElements.define('d2l-custom-view', CustomView);
package/components/menu/demo/menu.html DELETED
@@ -1,211 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import './custom-menu-item.js';
10
- import './custom-view.js';
11
- import '../menu.js';
12
- import '../menu-item.js';
13
- import '../menu-item-link.js';
14
- import '../menu-item-separator.js';
15
- </script>
16
- </head>
17
- <body unresolved>
18
-
19
- <d2l-demo-page page-title="d2l-menu">
20
- <h2>Basic Menu (demo of focus bug)</h2>
21
- <d2l-demo-snippet>
22
- <template>
23
- <div role="menu">
24
- <div role="menuitem" tabindex="0">
25
- <span>Menu Item 1</span>
26
- </div><div role="menuitem" tabindex="-1">
27
- <span>Menu Item 2</span>
28
- </div><div role="menuitem" tabindex="-1">
29
- <span>Menu Item 3</span>
30
- </div>
31
- </div>
32
- <script>
33
- const menu = document.querySelector('div[role="menu"]');
34
- const menuItems = menu.querySelectorAll('div[role="menuitem"]');
35
-
36
- menuItems.forEach(item => {
37
- item.addEventListener('keydown', (e) => {
38
- if (e.keyCode === 40 || e.keyCode === 38) {
39
- // prevent scrolling when up/down arrows pressed
40
- e.preventDefault();
41
- e.stopPropagation();
42
- if (e.keyCode === 40) {
43
- if (item.nextSibling) item.nextSibling.focus();
44
- } else if (e.keyCode === 38) {
45
- if (item.previousSibling) item.previousSibling.focus();
46
- }
47
- return;
48
- }
49
- });
50
- });
51
- </script>
52
- </template>
53
- </d2l-demo-snippet>
54
-
55
- <h2>Menu</h2>
56
-
57
- <d2l-demo-snippet>
58
- <template>
59
- <d2l-menu label="Astronomy" style="max-width: 400px;">
60
- <d2l-menu-item text="Introduction"></d2l-menu-item>
61
- <d2l-menu-item-separator></d2l-menu-item-separator>
62
- <d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
63
- <d2l-menu-item text="The Solar System"></d2l-menu-item>
64
- <d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
65
- <d2l-menu-item disabled text="The Night Sky"></d2l-menu-item>
66
- <d2l-menu-item text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon"></d2l-menu-item>
67
- <d2l-menu-item text="The Universe"></d2l-menu-item>
68
- </d2l-menu>
69
- </template>
70
- </d2l-demo-snippet>
71
-
72
- <h2>Custom View</h2>
73
- <d2l-demo-snippet>
74
- <template>
75
- <d2l-menu label="Astronomy" style="max-width: 400px;">
76
- <d2l-menu-item text="Introduction"></d2l-menu-item>
77
- <d2l-menu-item text="Searching the Heavens">
78
- <d2l-custom-view>Searching the Heavens</d2l-custom-view>
79
- </d2l-menu-item>
80
- <d2l-custom-menu-item text="The Solar System (Custom)"></d2l-custom-menu-item>
81
- <d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
82
- <d2l-menu-item text="The Night Sky"></d2l-menu-item>
83
- <d2l-menu-item-link href="https://en.wikipedia.org/wiki/Interstellar_object" text="Interstellar Objects" target="_blank"></d2l-menu-item-link>
84
- <d2l-menu-item-link href="https://en.wikipedia.org/wiki/Universe" text="The Universe (link)"></d2l-menu-item-link>
85
- <d2l-menu-item-link href="https://en.wikipedia.org/wiki/Universe" text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon"></d2l-menu-item-link>
86
- </d2l-menu>
87
- </template>
88
- </d2l-demo-snippet>
89
-
90
- <h2>Nested Menu</h2>
91
-
92
- <d2l-demo-snippet>
93
- <template>
94
- <d2l-menu label="Astronomy" style="max-width: 400px;">
95
- <d2l-menu-item text="Introduction"></d2l-menu-item>
96
- <d2l-menu-item-separator></d2l-menu-item-separator>
97
- <d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
98
- <d2l-menu-item text="The Solar System">
99
- <d2l-menu>
100
- <d2l-menu-item text="Formation"></d2l-menu-item>
101
- <d2l-menu-item text="Modern Solar System"></d2l-menu-item>
102
- <d2l-menu-item text="Future Solar System"></d2l-menu-item>
103
- <d2l-menu-item text="The Planets">
104
- <d2l-menu>
105
- <d2l-menu-item text="Mercury"></d2l-menu-item>
106
- <d2l-menu-item text="Venus"></d2l-menu-item>
107
- <d2l-menu-item text="Earth"></d2l-menu-item>
108
- <d2l-menu-item text="Mars"></d2l-menu-item>
109
- <d2l-menu-item text="Jupiter"></d2l-menu-item>
110
- <d2l-menu-item text="Saturn"></d2l-menu-item>
111
- <d2l-menu-item text="Uranus"></d2l-menu-item>
112
- <d2l-menu-item text="Neptune"></d2l-menu-item>
113
- <d2l-menu-item text="Dwarf Planets"></d2l-menu-item>
114
- </d2l-menu>
115
- </d2l-menu-item>
116
- <d2l-menu-item text="The Sun"></d2l-menu-item>
117
- <d2l-menu-item text="Solar &amp; Lunar Eclipses"></d2l-menu-item>
118
- <d2l-menu-item text="Meteors &amp; Meteorites"></d2l-menu-item>
119
- <d2l-menu-item text="Asteroids"></d2l-menu-item>
120
- <d2l-menu-item text="Comets"></d2l-menu-item>
121
- </d2l-menu>
122
- </d2l-menu-item>
123
- <d2l-menu-item text="Stars &amp; Galaxies">
124
- <d2l-menu>
125
- <d2l-menu-item text="What is a Star?"></d2l-menu-item>
126
- <d2l-menu-item text="Lifecycle of a Star"></d2l-menu-item>
127
- <d2l-menu-item text="Binaries &amp; Multiples"></d2l-menu-item>
128
- <d2l-menu-item text="Star Clusters"></d2l-menu-item>
129
- <d2l-menu-item text="Star Death">
130
- <d2l-menu>
131
- <d2l-menu-item text="Supernovae"></d2l-menu-item>
132
- <d2l-menu-item text="Black Holes"></d2l-menu-item>
133
- </d2l-menu>
134
- </d2l-menu-item>
135
- <d2l-menu-item text="Star Clusters"></d2l-menu-item>
136
- <d2l-menu-item text="Galaxies">
137
- <d2l-menu>
138
- <d2l-menu-item text="Classification"></d2l-menu-item>
139
- <d2l-menu-item text="Birth &amp; Evolution"></d2l-menu-item>
140
- <d2l-menu-item text="Spiral"></d2l-menu-item>
141
- <d2l-menu-item text="Elliptical"></d2l-menu-item>
142
- <d2l-menu-item text="Lenticular"></d2l-menu-item>
143
- <d2l-menu-item text="Irregular"></d2l-menu-item>
144
- <d2l-menu-item text="Active &amp; Radio"></d2l-menu-item>
145
- <d2l-menu-item text="Quasars"></d2l-menu-item>
146
- <d2l-menu-item text="Galaxy Clusters"></d2l-menu-item>
147
- </d2l-menu>
148
- </d2l-menu-item>
149
- </d2l-menu>
150
- </d2l-menu-item>
151
- <d2l-menu-item text="Aliens, The Search Extraterrestrial Life, Unidentified Flying Objects, and Other Astronomical Phenomenon">
152
- <d2l-menu>
153
- <d2l-menu-item text="Constellations"></d2l-menu-item>
154
- <d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>
155
- <d2l-menu-item text="Reading Star Maps"></d2l-menu-item>
156
- <d2l-menu-item text="Telescopes"></d2l-menu-item>
157
- </d2l-menu>
158
- </d2l-menu-item>
159
- <d2l-menu-item text="The Universe"></d2l-menu-item>
160
- </d2l-menu>
161
- </template>
162
- </d2l-demo-snippet>
163
-
164
- <h2>Supporting Slot</h2>
165
-
166
- <d2l-demo-snippet>
167
- <template>
168
- <d2l-menu label="The Solar System" style="max-width: 400px;">
169
- <d2l-menu-item text="Mercury">
170
- <span slot="supporting">0.39 AU</span>
171
- </d2l-menu-item>
172
- <d2l-menu-item text="Venus">
173
- <span slot="supporting">0.72 AU</span>
174
- </d2l-menu-item>
175
- <d2l-menu-item text="Earth">
176
- <span slot="supporting">1 AU</span>
177
- </d2l-menu-item>
178
- <d2l-menu-item text="Mars">
179
- <span slot="supporting">1.5 AU</span>
180
- </d2l-menu-item>
181
- <d2l-menu-item text="Jupiter">
182
- <span slot="supporting">5.2 AU</span>
183
- </d2l-menu-item>
184
- <d2l-menu-item text="Saturn">
185
- <span slot="supporting">9.5 AU</span>
186
- </d2l-menu-item>
187
- <d2l-menu-item text="Uranus">
188
- <span slot="supporting">19.2 AU</span>
189
- </d2l-menu-item>
190
- <d2l-menu-item text="Neptune" description="The farthest planet">
191
- <span slot="supporting">30 AU</span>
192
- </d2l-menu-item>
193
- <d2l-menu-item-link text="Dwarf Planets (link)" href="https://en.wikipedia.org/wiki/Dwarf_planet">
194
- <span slot="supporting">39+ AU</span>
195
- </d2l-menu-item-link>
196
- <d2l-menu-item-link text="Dwarf Planets (link to download)" description="Dwarf Planets Download (link)" href="../menu.js" target="_blank" download>
197
- <span slot="supporting">Something</span>
198
- </d2l-menu-item-link>
199
- </d2l-menu>
200
- </template>
201
- </d2l-demo-snippet>
202
- </d2l-demo-page>
203
-
204
- <script>
205
- document.addEventListener('click', e => {
206
- if (e.target.tagName !== 'D2L-MENU-ITEM-LINK') return;
207
- console.log('Click event propagated up for router!', e.target);
208
- });
209
- </script>
210
- </body>
211
- </html>
package/components/menu/demo/radio-menu.html DELETED
@@ -1,52 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import '../menu.js';
10
- import '../menu-item-radio.js';
11
- </script>
12
- </head>
13
- <body unresolved>
14
-
15
- <d2l-demo-page page-title="d2l-menu (radio)">
16
-
17
- <h2>Radio Menu</h2>
18
- <d2l-demo-snippet>
19
- <template>
20
- <d2l-menu id="menu" label="Radio Menu" style="max-width: 400px;">
21
- <d2l-menu-item-radio text="Radio Option 1 with an extremely long title that will only be cut off with an ellipsis after two lines" value="1"></d2l-menu-item-radio>
22
- <d2l-menu-item-radio text="Radio Option 2" value="2"></d2l-menu-item-radio>
23
- <d2l-menu-item-radio text="Radio Option 3" value="3"></d2l-menu-item-radio>
24
- </d2l-menu>
25
-
26
- <script>
27
- document.body.addEventListener('d2l-menu-item-change', (e) => {
28
- console.log('item selection changed:', e.target);
29
- });
30
- </script>
31
- </template>
32
- </d2l-demo-snippet>
33
-
34
- <h2>Supporting Slot</h2>
35
- <d2l-demo-snippet>
36
- <template>
37
- <d2l-menu id="menu" label="Radio Menu" style="max-width: 400px;">
38
- <d2l-menu-item-radio text="Radio Option 1" value="1">
39
- <div slot="supporting">1 point</div>
40
- </d2l-menu-item-radio>
41
- <d2l-menu-item-radio text="Radio Option 2" value="2">
42
- <div slot="supporting">2 points</div>
43
- </d2l-menu-item-radio>
44
- <d2l-menu-item-radio text="Radio Option 3" value="3">
45
- <div slot="supporting">3 points</div>
46
- </d2l-menu-item-radio>
47
- </d2l-menu>
48
- </template>
49
- </d2l-demo-snippet>
50
- </d2l-demo-page>
51
- </body>
52
- </html>
package/components/meter/demo/meter.html DELETED
@@ -1,115 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import '../meter-linear.js';
10
- import '../meter-radial.js';
11
- import '../meter-circle.js';
12
- </script>
13
- <style>
14
- d2l-demo-snippet > div > div {
15
- padding: 1rem;
16
- }
17
- d2l-meter-linear {
18
- width: 250px;
19
- }
20
- d2l-meter-linear, d2l-meter-radial, d2l-meter-circle {
21
- margin-bottom: 1rem;
22
- }
23
- .dark-background {
24
- background-color: var(--d2l-color-celestine);
25
- }
26
-
27
- </style>
28
- </head>
29
- <body unresolved>
30
-
31
- <d2l-demo-page page-title="Meter Components">
32
-
33
- <h2>Meter Linear</h2>
34
-
35
- <d2l-demo-snippet no-padding>
36
- <template>
37
- <div>
38
- <d2l-meter-linear value="2" max="15" text-inline></d2l-meter-linear>
39
- <d2l-meter-linear value="2" max="15" text-inline percent></d2l-meter-linear>
40
- <d2l-meter-linear value="2" max="15" text-inline text="Activities"></d2l-meter-linear>
41
- <d2l-meter-linear value="2" max="15" text-inline text="Activities" percent></d2l-meter-linear>
42
- <d2l-meter-linear value="3" max="6"></d2l-meter-linear>
43
- <d2l-meter-linear value="3" max="6" percent></d2l-meter-linear>
44
- <d2l-meter-linear value="3" max="6" text="Visited: {x/y}" percent></d2l-meter-linear>
45
- <d2l-meter-linear value="3" max="6" text="Visited: {x/y}" percent text-hidden></d2l-meter-linear>
46
- <d2l-meter-linear value="3" max="6" text="Visited: {%}"></d2l-meter-linear>
47
- <d2l-meter-linear value="3" max="6" text="You're doing great!" percent></d2l-meter-linear>
48
- <d2l-meter-linear value="3" max="6" text="You're doing great!" text-align-end></d2l-meter-linear>
49
- <d2l-meter-linear value="1" max="3" text="Round up({x/y} => {%})" percent percent-rounding-mode="ceil"></d2l-meter-linear>
50
- <d2l-meter-linear value="2" max="3" text="Round down({x/y} => {%})" percent percent-rounding-mode="floor"></d2l-meter-linear>
51
- </div>
52
- <div class="dark-background">
53
- <d2l-meter-linear value="2" max="15" foreground-light text-inline></d2l-meter-linear>
54
- <d2l-meter-linear value="2" max="15" foreground-light text-inline percent></d2l-meter-linear>
55
- <d2l-meter-linear value="2" max="15" foreground-light text-inline text="Activities"></d2l-meter-linear>
56
- <d2l-meter-linear value="2" max="15" foreground-light text-inline text="Activities" percent></d2l-meter-linear>
57
- <d2l-meter-linear value="3" max="6" foreground-light></d2l-meter-linear>
58
- <d2l-meter-linear value="3" max="6" foreground-light percent></d2l-meter-linear>
59
- <d2l-meter-linear value="3" max="6" foreground-light text="Visited: {x/y}" percent></d2l-meter-linear>
60
- <d2l-meter-linear value="3" max="6" foreground-light text="Visited: {%}"></d2l-meter-linear>
61
- <d2l-meter-linear value="3" max="6" foreground-light text="You're doing great!" percent></d2l-meter-linear>
62
- <d2l-meter-linear value="1" max="3" foreground-light text="Round up({x/y} => {%})" percent percent-rounding-mode="ceil"></d2l-meter-linear>
63
- <d2l-meter-linear value="2" max="3" foreground-light text="Round down({x/y} => {%})" percent percent-rounding-mode="floor"></d2l-meter-linear>
64
- </div>
65
- </template>
66
- </d2l-demo-snippet>
67
-
68
- <h2>Meter Radial</h2>
69
-
70
- <d2l-demo-snippet no-padding>
71
- <template>
72
- <div>
73
- <d2l-meter-radial value="0" max="10"></d2l-meter-radial>
74
- <d2l-meter-radial value="5" max="13"></d2l-meter-radial>
75
- <d2l-meter-radial value="5" max="13" percent></d2l-meter-radial>
76
- <d2l-meter-radial value="10" max="10"></d2l-meter-radial>
77
- <d2l-meter-radial value="5" max="10" text="Completed"></d2l-meter-radial>
78
- <d2l-meter-radial value="19" max="26" style="width: 25%;"></d2l-meter-radial>
79
- </div>
80
- <div class="dark-background">
81
- <d2l-meter-radial value="0" max="10" foreground-light></d2l-meter-radial>
82
- <d2l-meter-radial value="5" max="13" foreground-light></d2l-meter-radial>
83
- <d2l-meter-radial value="5" max="13" percent foreground-light text="Made some progress" text-hidden></d2l-meter-radial>
84
- <d2l-meter-radial value="10" max="10" foreground-light></d2l-meter-radial>
85
- <d2l-meter-radial value="5" max="10" text="Completed" foreground-light></d2l-meter-radial>
86
- <d2l-meter-radial value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-radial>
87
- </div>
88
- </template>
89
- </d2l-demo-snippet>
90
-
91
- <h2>Meter Circle</h2>
92
-
93
- <d2l-demo-snippet no-padding>
94
- <template>
95
- <div>
96
- <d2l-meter-circle value="0" max="10"></d2l-meter-circle>
97
- <d2l-meter-circle value="5" max="13"></d2l-meter-circle>
98
- <d2l-meter-circle value="5" max="13" percent></d2l-meter-circle>
99
- <d2l-meter-circle value="0.004" max="100" percent text="Rounds to Zero" text-hidden></d2l-meter-circle>
100
- <d2l-meter-circle value="10" max="10" text="Completed"></d2l-meter-circle>
101
- <d2l-meter-circle value="19" max="26" style="width: 25%;"></d2l-meter-circle>
102
- </div>
103
- <div class="dark-background">
104
- <d2l-meter-circle value="0" max="10" foreground-light></d2l-meter-circle>
105
- <d2l-meter-circle value="5" max="13" foreground-light></d2l-meter-circle>
106
- <d2l-meter-circle value="5" max="13" percent foreground-light text="Made some progress" text-hidden></d2l-meter-circle>
107
- <d2l-meter-circle value="10" max="10" foreground-light text="Completed"></d2l-meter-circle>
108
- <d2l-meter-circle value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-circle>
109
- </div>
110
- </template>
111
- </d2l-demo-snippet>
112
-
113
- </d2l-demo-page>
114
- </body>
115
- </html>
package/components/more-less/demo/more-less-test.js DELETED
@@ -1,67 +0,0 @@
1
- import '../more-less.js';
2
- import { css, html, LitElement } from 'lit';
3
-
4
- const text = {
5
- short: 'Short text.',
6
- long: 'This is a much longer piece of text that will demonstrate the more-less component functionality. It should initially be truncated and then expandable to show the full content when the user clicks "more".'
7
- };
8
-
9
- class MoreLessTest extends LitElement {
10
- static get properties() {
11
- return {
12
- text: { type: String },
13
- margin: { type: Boolean, reflect: true },
14
- extraItems: { type: Number }
15
- };
16
- }
17
- static get styles() {
18
- return css`
19
- button:last-of-type {
20
- margin-bottom: 2em;
21
- }
22
- :host([margin]) .hidden-div {
23
- margin-bottom: 500px;
24
- }
25
- `;
26
- }
27
-
28
- constructor() {
29
- super();
30
- this.text = text.short;
31
- this.margin = false;
32
- this.extraItems = 0;
33
- }
34
-
35
- render() {
36
- return html`
37
- <button @click="${this.#toggleText}">Toggle Text Length</button>
38
- <button @click="${this.#toggleDivMargin}">Toggle Text Margin</button>
39
- <button @click="${this.#addExtraItem}">Add Extra Item</button>
40
- <button ?disabled="${this.extraItems === 0}" @click="${this.#removeExtraItem}">Remove Extra Item</button>
41
- <hr>
42
- <d2l-more-less>
43
- ${this.text}
44
- <div class="hidden-div"></div>
45
- ${Array.from({ length: this.extraItems }, (_, i) => html`<div>Extra item ${i + 1}</div>`)}
46
- </d2l-more-less>
47
- `;
48
- }
49
-
50
- #addExtraItem() {
51
- this.extraItems += 1;
52
- }
53
-
54
- #removeExtraItem() {
55
- if (this.extraItems > 0) this.extraItems -= 1;
56
- }
57
-
58
- #toggleDivMargin() {
59
- this.margin = !this.margin;
60
- }
61
-
62
- #toggleText() {
63
- this.text = this.text === text.short ? text.long : text.short;
64
- }
65
-
66
- }
67
- customElements.define('d2l-more-less-test', MoreLessTest);