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