@brightspace-ui/core 3.227.4 → 3.227.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (176) hide show
  1. package/components/button/button.js +8 -8
  2. package/components/demo/test/demo-page-settings.test.js +25 -0
  3. package/components/demo/test/demo-page.test.js +17 -0
  4. package/package.json +1 -1
  5. package/components/alert/demo/alert-toast.html +0 -106
  6. package/components/alert/demo/alert.html +0 -82
  7. package/components/backdrop/demo/backdrop-loading.html +0 -166
  8. package/components/backdrop/demo/backdrop.html +0 -57
  9. package/components/breadcrumbs/demo/breadcrumbs.html +0 -53
  10. package/components/button/demo/button-add.html +0 -55
  11. package/components/button/demo/button-copy.html +0 -122
  12. package/components/button/demo/button-icon.html +0 -174
  13. package/components/button/demo/button-move.html +0 -38
  14. package/components/button/demo/button-split.html +0 -76
  15. package/components/button/demo/button-subtle.html +0 -132
  16. package/components/button/demo/button-toggle.html +0 -80
  17. package/components/button/demo/button.html +0 -67
  18. package/components/button/demo/floating-buttons-in-frame.html +0 -44
  19. package/components/button/demo/floating-buttons-in-tabs.html +0 -244
  20. package/components/button/demo/floating-buttons-page.html +0 -100
  21. package/components/button/demo/floating-buttons.html +0 -101
  22. package/components/calendar/demo/calendar.html +0 -76
  23. package/components/card/demo/card.html +0 -304
  24. package/components/collapsible-panel/demo/collapsible-panel.html +0 -218
  25. package/components/colors/demo/color-swatch.js +0 -240
  26. package/components/colors/demo/colors.html +0 -139
  27. package/components/count-badge/demo/count-badge-icon.html +0 -48
  28. package/components/count-badge/demo/count-badge.html +0 -73
  29. package/components/demo/demo/demo-snippet.html +0 -71
  30. package/components/description-list/demo/description-list-test.js +0 -142
  31. package/components/description-list/demo/description-list.html +0 -48
  32. package/components/dialog/demo/dialog-async-content-until.js +0 -89
  33. package/components/dialog/demo/dialog-async-content.js +0 -72
  34. package/components/dialog/demo/dialog-confirm.html +0 -102
  35. package/components/dialog/demo/dialog-container.js +0 -40
  36. package/components/dialog/demo/dialog-fullscreen.html +0 -273
  37. package/components/dialog/demo/dialog-nested.html +0 -94
  38. package/components/dialog/demo/dialog.html +0 -398
  39. package/components/dropdown/demo/dropdown-button.html +0 -102
  40. package/components/dropdown/demo/dropdown-context-menu.html +0 -129
  41. package/components/dropdown/demo/dropdown-flicker-inner.html +0 -70
  42. package/components/dropdown/demo/dropdown-flicker.html +0 -142
  43. package/components/dropdown/demo/dropdown-menu-demo-view.js +0 -37
  44. package/components/dropdown/demo/dropdown-menu.html +0 -227
  45. package/components/dropdown/demo/dropdown-more.html +0 -160
  46. package/components/dropdown/demo/dropdown-positioning.html +0 -127
  47. package/components/dropdown/demo/dropdown-tabs.html +0 -87
  48. package/components/dropdown/demo/dropdown.html +0 -217
  49. package/components/empty-state/demo/empty-state.html +0 -94
  50. package/components/expand-collapse/demo/expand-collapse-content.html +0 -58
  51. package/components/filter/demo/filter-load-more-demo.js +0 -182
  52. package/components/filter/demo/filter-overflow-group.html +0 -246
  53. package/components/filter/demo/filter-search-demo.js +0 -135
  54. package/components/filter/demo/filter-tags.html +0 -115
  55. package/components/filter/demo/filter.html +0 -230
  56. package/components/focus-trap/demo/focus-trap.html +0 -75
  57. package/components/form/demo/form-demo.js +0 -105
  58. package/components/form/demo/form-dialog-demo.js +0 -94
  59. package/components/form/demo/form-panel-demo.js +0 -89
  60. package/components/form/demo/form.html +0 -37
  61. package/components/hierarchical-view/demo/hierarchical-view.html +0 -221
  62. package/components/html-block/demo/html-block-code.html +0 -55
  63. package/components/html-block/demo/html-block.html +0 -696
  64. package/components/icons/demo/icon-color-override.js +0 -23
  65. package/components/icons/demo/icon-custom.html +0 -112
  66. package/components/icons/demo/icon-size-override.js +0 -24
  67. package/components/icons/demo/icon.html +0 -52
  68. package/components/inputs/demo/input-checkbox.html +0 -118
  69. package/components/inputs/demo/input-color-palette.js +0 -67
  70. package/components/inputs/demo/input-color.html +0 -110
  71. package/components/inputs/demo/input-date-range.html +0 -114
  72. package/components/inputs/demo/input-date-time-range.html +0 -128
  73. package/components/inputs/demo/input-date-time.html +0 -100
  74. package/components/inputs/demo/input-date.html +0 -81
  75. package/components/inputs/demo/input-group.html +0 -56
  76. package/components/inputs/demo/input-number.html +0 -136
  77. package/components/inputs/demo/input-percent.html +0 -99
  78. package/components/inputs/demo/input-radio-label-test.js +0 -45
  79. package/components/inputs/demo/input-radio-solo-test.js +0 -47
  80. package/components/inputs/demo/input-radio.html +0 -119
  81. package/components/inputs/demo/input-search.html +0 -75
  82. package/components/inputs/demo/input-select-test.js +0 -60
  83. package/components/inputs/demo/input-select.html +0 -45
  84. package/components/inputs/demo/input-text.html +0 -163
  85. package/components/inputs/demo/input-textarea.html +0 -124
  86. package/components/inputs/demo/input-time-range.html +0 -121
  87. package/components/inputs/demo/input-time.html +0 -95
  88. package/components/link/demo/link.html +0 -111
  89. package/components/list/demo/demo-list-nav.js +0 -170
  90. package/components/list/demo/demo-list-nested-iterations-helper.js +0 -168
  91. package/components/list/demo/demo-list-nested-lazy-load.js +0 -133
  92. package/components/list/demo/demo-list-nested.js +0 -291
  93. package/components/list/demo/demo-list.js +0 -241
  94. package/components/list/demo/list-color.html +0 -423
  95. package/components/list/demo/list-demo-scenarios.js +0 -380
  96. package/components/list/demo/list-drag-and-drop-position.js +0 -102
  97. package/components/list/demo/list-drag-and-drop.html +0 -82
  98. package/components/list/demo/list-expand-collapse.html +0 -136
  99. package/components/list/demo/list-item-actions.html +0 -371
  100. package/components/list/demo/list-item-custom.js +0 -204
  101. package/components/list/demo/list-item-layouts.html +0 -331
  102. package/components/list/demo/list-item-scroll.html +0 -122
  103. package/components/list/demo/list-layout.html +0 -575
  104. package/components/list/demo/list-nav.html +0 -110
  105. package/components/list/demo/list-nested.html +0 -270
  106. package/components/list/demo/list-selection.html +0 -301
  107. package/components/list/demo/list.html +0 -319
  108. package/components/loading-spinner/demo/loading-spinner-override.js +0 -34
  109. package/components/loading-spinner/demo/loading-spinner.html +0 -63
  110. package/components/menu/demo/checkbox-menu.html +0 -52
  111. package/components/menu/demo/custom-menu-item.js +0 -37
  112. package/components/menu/demo/custom-view.js +0 -63
  113. package/components/menu/demo/menu.html +0 -211
  114. package/components/menu/demo/radio-menu.html +0 -52
  115. package/components/meter/demo/meter.html +0 -115
  116. package/components/more-less/demo/more-less-test.js +0 -67
  117. package/components/more-less/demo/more-less.html +0 -71
  118. package/components/object-property-list/demo/object-property-list.html +0 -99
  119. package/components/offscreen/demo/offscreen-demo.js +0 -16
  120. package/components/offscreen/demo/offscreen.html +0 -44
  121. package/components/overflow-group/demo/demo-overflow-group.js +0 -29
  122. package/components/overflow-group/demo/overflow-group.html +0 -110
  123. package/components/paging/demo/pager-load-more.html +0 -120
  124. package/components/popover/demo/popover.html +0 -309
  125. package/components/progress/demo/progress.html +0 -104
  126. package/components/scroll-wrapper/demo/scroll-wrapper-test.js +0 -108
  127. package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -52
  128. package/components/selection/demo/demo-selection.js +0 -35
  129. package/components/selection/demo/selection.html +0 -198
  130. package/components/skeleton/demo/skeleton-group-nested-test.js +0 -71
  131. package/components/skeleton/demo/skeleton-group-test-wrapper.js +0 -18
  132. package/components/skeleton/demo/skeleton-group-test.js +0 -91
  133. package/components/skeleton/demo/skeleton-mixin.html +0 -78
  134. package/components/skeleton/demo/skeleton-test-box.js +0 -34
  135. package/components/skeleton/demo/skeleton-test-container.js +0 -45
  136. package/components/skeleton/demo/skeleton-test-heading.js +0 -44
  137. package/components/skeleton/demo/skeleton-test-link.js +0 -47
  138. package/components/skeleton/demo/skeleton-test-paragraph.js +0 -54
  139. package/components/skeleton/demo/skeleton-test-stack.js +0 -38
  140. package/components/skeleton/demo/skeleton-test-width.js +0 -20
  141. package/components/sorting/demo/sort.html +0 -37
  142. package/components/status-indicator/demo/status-indicator.html +0 -99
  143. package/components/switch/demo/switch.html +0 -95
  144. package/components/table/demo/table-test.js +0 -271
  145. package/components/table/demo/table.html +0 -107
  146. package/components/tabs/demo/tab-custom.js +0 -39
  147. package/components/tabs/demo/tabs-array.js +0 -43
  148. package/components/tabs/demo/tabs.html +0 -558
  149. package/components/tag-list/demo/tag-list.html +0 -117
  150. package/components/tooltip/demo/tooltip.html +0 -275
  151. package/components/typography/demo/typography.html +0 -93
  152. package/components/view-switcher/demo/demo-table-view.js +0 -41
  153. package/components/view-switcher/demo/view-switcher.html +0 -71
  154. package/directives/animate/demo/animate-test.js +0 -98
  155. package/directives/animate/demo/index.html +0 -23
  156. package/helpers/demo/announce-test.js +0 -37
  157. package/helpers/demo/announce.html +0 -19
  158. package/helpers/demo/dismissible-test.js +0 -66
  159. package/helpers/demo/dismissible.html +0 -38
  160. package/helpers/demo/gestures.html +0 -58
  161. package/helpers/demo/prism.html +0 -694
  162. package/helpers/demo/template-tags.html +0 -118
  163. package/mixins/arrow-keys/demo/arrow-keys-mixin.html +0 -29
  164. package/mixins/arrow-keys/demo/arrow-keys-test.js +0 -38
  165. package/mixins/async-container/demo/async-container.html +0 -109
  166. package/mixins/async-container/demo/async-container.js +0 -27
  167. package/mixins/async-container/demo/async-item.js +0 -80
  168. package/mixins/labelled/demo/labelled-mixin.html +0 -90
  169. package/mixins/localize/demo/localize-mixin-greeting.js +0 -39
  170. package/mixins/localize/demo/localize-mixin-mission.js +0 -25
  171. package/mixins/localize/demo/localize-mixin.html +0 -28
  172. package/templates/primary-secondary/demo/form.html +0 -55
  173. package/templates/primary-secondary/demo/index.html +0 -27
  174. package/templates/primary-secondary/demo/integration.html +0 -457
  175. package/templates/primary-secondary/demo/overflow-hidden.html +0 -22
  176. package/templates/primary-secondary/demo/width-type-normal.html +0 -26
package/components/button/demo/button-copy.html DELETED
@@ -1,122 +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 '../../icons/icon-custom.js';
10
- import '../../inputs/input-text.js';
11
- import '../button-icon.js';
12
- import '../button-copy.js';
13
- import '../button-subtle-copy.js';
14
- </script>
15
- <style>
16
- d2l-button-copy[slot="after"] {
17
- margin-inline-start: 0.3rem;
18
- }
19
- </style>
20
- </head>
21
- <body unresolved>
22
-
23
- <d2l-demo-page page-title="d2l-button-copy">
24
-
25
- <h2>With d2l-input-text</h2>
26
-
27
- <d2l-demo-snippet>
28
- <template>
29
- <d2l-input-text label="Name">
30
- <d2l-button-copy slot="after"></d2l-button-copy>
31
- </d2l-input-text>
32
- <script>
33
- (demo => {
34
- demo.querySelector('d2l-button-copy').addEventListener('click', async(e) => {
35
- console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('d2l-input-text').value));
36
- });
37
- })(document.currentScript.parentNode);
38
- </script>
39
- </template>
40
- </d2l-demo-snippet>
41
-
42
- <h2>Disabled</h2>
43
-
44
- <d2l-demo-snippet>
45
- <template>
46
- <span>Donuts are yummmmmy!</span>
47
- <d2l-button-copy disabled></d2l-button-copy>
48
- <script>
49
- (demo => {
50
- demo.querySelector('d2l-button-copy').addEventListener('click', async(e) => {
51
- console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
52
- });
53
- })(document.currentScript.parentNode);
54
- </script>
55
- </template>
56
- </d2l-demo-snippet>
57
-
58
- <h2>Text</h2>
59
-
60
- <d2l-demo-snippet>
61
- <template>
62
- <span>Donuts are yummmmmy!</span>
63
- <d2l-button-copy text="Donuts are yummmmmy!"></d2l-button-copy>
64
- <script>
65
- (demo => {
66
- demo.querySelector('d2l-button-copy').addEventListener('click', async(e) => {
67
- console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
68
- });
69
- })(document.currentScript.parentNode);
70
- </script>
71
- </template>
72
- </d2l-demo-snippet>
73
-
74
- <h2>Subtle Button Copy</h2>
75
- <d2l-demo-snippet>
76
- <template>
77
- <span>Donuts are yummmmmy!</span>
78
- <d2l-button-subtle-copy text="Copy text"></d2l-button-subtle-copy>
79
- <script>
80
- (demo => {
81
- demo.querySelector('d2l-button-subtle-copy').addEventListener('click', async(e) => {
82
- console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
83
- });
84
- })(document.currentScript.parentNode);
85
- </script>
86
- </template>
87
- </d2l-demo-snippet>
88
-
89
- <h2>Subtle Button Copy Slim</h2>
90
- <d2l-demo-snippet>
91
- <template>
92
- <span>Donuts are yummmmmy!</span>
93
- <d2l-button-subtle-copy text="Copy text" slim></d2l-button-subtle-copy>
94
- <script>
95
- (demo => {
96
- demo.querySelector('d2l-button-subtle-copy').addEventListener('click', async(e) => {
97
- console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
98
- });
99
- })(document.currentScript.parentNode);
100
- </script>
101
- </template>
102
- </d2l-demo-snippet>
103
-
104
- <h2>Subtle Button Copy Disabled</h2>
105
- <d2l-demo-snippet>
106
- <template>
107
- <span>Donuts are yummmmmy!</span>
108
- <d2l-button-subtle-copy text="Copy text" disabled></d2l-button-subtle-copy>
109
- <script>
110
- (demo => {
111
- demo.querySelector('d2l-button-subtle-copy').addEventListener('click', async(e) => {
112
- console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
113
- });
114
- })(document.currentScript.parentNode);
115
- </script>
116
- </template>
117
- </d2l-demo-snippet>
118
-
119
- </d2l-demo-page>
120
-
121
- </body>
122
- </html>
package/components/button/demo/button-icon.html DELETED
@@ -1,174 +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 '../../icons/icon-custom.js';
10
- import '../button-icon.js';
11
- </script>
12
- <style>
13
- .ancestor-container {
14
- padding: 0.5rem;
15
- position: relative;
16
- }
17
- .ancestor-container::before {
18
- background-color: rgba(0, 0, 0, 0.03);
19
- box-sizing: border-box;
20
- content: "visible-on-ancestor-target";
21
- font-size: 0.7rem;
22
- height: 100%;
23
- left: 0;
24
- padding: 0.5rem;
25
- position: absolute;
26
- text-align: right;
27
- top: 0;
28
- width: 100%;
29
- }
30
- [dir="rtl"].ancestor-container::before {
31
- text-align: left;
32
- }
33
- .translucent-container {
34
- height: 150px;
35
- position: relative;
36
- }
37
- .translucent-container > img {
38
- border-radius: 6px;
39
- height: 100%;
40
- position: absolute;
41
- width: 300px;
42
- }
43
- .translucent-container.d2l-visible-on-ancestor-target {
44
- width: 300px;
45
- }
46
- .translucent-container > d2l-button-icon {
47
- margin-left: 12px;
48
- margin-top: 12px;
49
- }
50
- [dir="rtl"].translucent-container > d2l-button-icon {
51
- margin-left: 0;
52
- margin-right: 12px;
53
- }
54
- .custom {
55
- --d2l-button-icon-min-height: 1.5rem;
56
- --d2l-button-icon-min-width: 1.5rem;
57
- --d2l-button-icon-border-radius: 4px;
58
- --d2l-button-focus-color: #006fbf;
59
- --d2l-button-focus-offset: 1px;
60
- }
61
- </style>
62
- </head>
63
- <body unresolved>
64
-
65
- <d2l-demo-page page-title="d2l-button-icon">
66
-
67
- <h2>Icon Button</h2>
68
-
69
- <d2l-demo-snippet>
70
- <template>
71
- <d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>
72
- </template>
73
- </d2l-demo-snippet>
74
-
75
- <h2>Icon Button Disabled</h2>
76
-
77
- <d2l-demo-snippet>
78
- <template>
79
- <d2l-button-icon icon="tier1:gear" text="Icon Button" disabled></d2l-button-icon>
80
- </template>
81
- </d2l-demo-snippet>
82
-
83
- <h2>Icon Button Disabled with Tooltip</h2>
84
-
85
- <d2l-demo-snippet>
86
- <template>
87
- <d2l-button-icon icon="tier1:gear" text="Icon Button" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-icon>
88
- </template>
89
- </d2l-demo-snippet>
90
-
91
- <h2>Icon Button Translucent</h2>
92
-
93
- <d2l-demo-snippet>
94
- <template>
95
- <div class="translucent-container">
96
- <img alt="" src="https://s.brightspace.com/course-images/images/e4fbb461-4cd9-4512-8304-44f2c2b741f1/tile-low-density-max-size.jpg">
97
- <d2l-button-icon icon="tier1:gear" text="Icon Button" translucent></d2l-button-icon>
98
- </div>
99
- </template>
100
- </d2l-demo-snippet>
101
-
102
- <h2>Icon Button with Horizontal Align</h2>
103
-
104
- <d2l-demo-snippet>
105
- <template>
106
- <div style="border: 1px dashed #999999; text-align: start;">
107
- <d2l-button-icon icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-icon>
108
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
109
- <d2l-button-icon icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-icon>
110
- </div>
111
- <div style="border: 1px dashed #999999; text-align: end;">
112
- <d2l-button-icon icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-icon>
113
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
114
- <d2l-button-icon icon="tier1:gear" text="Button Content Aligned" h-align="text-end"></d2l-button-icon>
115
- </div>
116
- </template>
117
- </d2l-demo-snippet>
118
-
119
- <h2>Icon Button with Visible on Ancestor</h2>
120
-
121
- <d2l-demo-snippet>
122
- <template>
123
- <div class="ancestor-container d2l-visible-on-ancestor-target">
124
- <d2l-button-icon icon="tier1:home" text="Home"></d2l-button-icon>
125
- <d2l-button-icon icon="tier1:bookmark-hollow" text="Bookmark"></d2l-button-icon>
126
- <d2l-button-icon icon="tier1:gear" text="Gear" visible-on-ancestor></d2l-button-icon>
127
- </div>
128
- </template>
129
- </d2l-demo-snippet>
130
-
131
- <h2>Icon Button with Translucent + Visible on Ancestor</h2>
132
-
133
- <d2l-demo-snippet>
134
- <template>
135
- <div class="translucent-container d2l-visible-on-ancestor-target">
136
- <img alt="" src="https://s.brightspace.com/course-images/images/e4fbb461-4cd9-4512-8304-44f2c2b741f1/tile-low-density-max-size.jpg">
137
- <d2l-button-icon icon="tier1:gear" text="Settings" translucent visible-on-ancestor></d2l-button-icon>
138
- </div>
139
- </template>
140
- </d2l-demo-snippet>
141
-
142
- <h2>Icon Button with Customized Size and Focus Box-Shadow</h2>
143
-
144
- <d2l-demo-snippet>
145
- <template>
146
- <d2l-button-icon icon="tier1:search" text="Search" class="custom"></d2l-button-icon>
147
- </template>
148
- </d2l-demo-snippet>
149
-
150
- <h2>Icon Button with Custom Icon</h2>
151
-
152
- <d2l-demo-snippet>
153
- <template>
154
- <d2l-button-icon text="Custom Icon Button">
155
- <d2l-icon-custom slot="icon">
156
- <svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
157
- <path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
158
- <path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
159
- </svg>
160
- </d2l-icon-custom>
161
- </d2l-button-icon>
162
- </template>
163
- </d2l-demo-snippet>
164
- </d2l-demo-page>
165
-
166
- <script>
167
- document.addEventListener('click', e => {
168
- if (e.target.tagName !== 'D2L-BUTTON-ICON') return;
169
- console.log('button clicked', e.target);
170
- });
171
- </script>
172
-
173
- </body>
174
- </html>
package/components/button/demo/button-move.html DELETED
@@ -1,38 +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 '../button-move.js';
10
- </script>
11
- </head>
12
- <body unresolved>
13
-
14
- <d2l-demo-page page-title="d2l-button-move">
15
-
16
- <h2>Move Button</h2>
17
-
18
- <d2l-demo-snippet>
19
- <template>
20
- <d2l-button-move id="move-button" text="Reorder Item"></d2l-button-move>
21
- <script>
22
- document.querySelector('#move-button').addEventListener('d2l-button-move-action', e => {
23
- console.log('d2l-button-move-action', e.target, e.detail);
24
- });
25
- </script>
26
- </template>
27
- </d2l-demo-snippet>
28
-
29
- <h2>Move Button Disabled</h2>
30
-
31
- <d2l-demo-snippet>
32
- <template>
33
- <d2l-button-move text="Reorder Item" disabled-up disabled-down disabled-left disabled-right disabled-home disabled-end></d2l-button-move>
34
- </template>
35
- </d2l-demo-snippet>
36
-
37
- </body>
38
- </html>
package/components/button/demo/button-split.html DELETED
@@ -1,76 +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 '../button-split.js';
10
- import '../button-split-item.js';
11
- </script>
12
- </head>
13
- <body unresolved>
14
-
15
- <d2l-demo-page page-title="d2l-button-split">
16
-
17
- <h2>Split Button</h2>
18
-
19
- <d2l-demo-snippet>
20
- <template>
21
- <button id="focusButton" style="display: block; margin-block-end: 1rem;">Focus It!</button>
22
- <d2l-button-split key="save" text="Save">
23
- <d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
24
- <d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
25
- <d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
26
- </d2l-button-split>
27
- <script>
28
- (demo => {
29
- const splitButton = demo.querySelector('d2l-button-split');
30
- demo.querySelector('#focusButton').addEventListener('click', () => splitButton.focus());
31
- splitButton.addEventListener('click', e => console.log('click:', e.detail.key));
32
- })(document.currentScript.parentNode);
33
- </script>
34
- </template>
35
- </d2l-demo-snippet>
36
-
37
- <h2>Split Button (with a description)</h2>
38
-
39
- <d2l-demo-snippet>
40
- <template>
41
- <d2l-button-split key="save" text="Save" description="Super fancy save options!">
42
- <d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
43
- <d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
44
- <d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
45
- </d2l-button-split>
46
- </template>
47
- </d2l-demo-snippet>
48
-
49
- <h2>Split Button (primary)</h2>
50
-
51
- <d2l-demo-snippet>
52
- <template>
53
- <d2l-button-split key="save" text="Save" primary>
54
- <d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
55
- <d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
56
- <d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
57
- </d2l-button-split>
58
- </template>
59
- </d2l-demo-snippet>
60
-
61
- <h2>Split Button (disabled)</h2>
62
-
63
- <d2l-demo-snippet>
64
- <template>
65
- <d2l-button-split key="save" text="Save" primary disabled disabled-tooltip="Too fancy!">
66
- <d2l-button-split-item key="saveAsDraft" text="Save as Draft"></d2l-button-split-item>
67
- <d2l-button-split-item key="saveAndClose" text="Save and Close"></d2l-button-split-item>
68
- <d2l-button-split-item key="saveAndNew" text="Save and New"></d2l-button-split-item>
69
- </d2l-button-split>
70
- </template>
71
- </d2l-demo-snippet>
72
-
73
- </d2l-demo-page>
74
-
75
- </body>
76
- </html>
package/components/button/demo/button-subtle.html DELETED
@@ -1,132 +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 '../button-subtle.js';
10
- </script>
11
- </head>
12
- <body unresolved>
13
-
14
- <d2l-demo-page page-title="d2l-button-subtle">
15
-
16
- <h2>Subtle Button with Text Only</h2>
17
-
18
- <d2l-demo-snippet>
19
- <template>
20
- <d2l-button-subtle text="Subtle Button"></d2l-button-subtle>
21
- <d2l-button-subtle slim text="Slim Subtle Button"></d2l-button-subtle>
22
- </template>
23
- </d2l-demo-snippet>
24
-
25
- <h2>Subtle Button Disabled</h2>
26
-
27
- <d2l-demo-snippet>
28
- <template>
29
- <d2l-button-subtle text="Subtle Button" disabled></d2l-button-subtle>
30
- <d2l-button-subtle slim text="Slim Subtle Button" disabled></d2l-button-subtle>
31
- </template>
32
- </d2l-demo-snippet>
33
-
34
- <h2>Subtle Button Disabled with Tooltip</h2>
35
-
36
- <d2l-demo-snippet>
37
- <template>
38
- <d2l-button-subtle text="Subtle Button" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-subtle>
39
- <d2l-button-subtle slim text="Slim Subtle Button" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-subtle>
40
- </template>
41
- </d2l-demo-snippet>
42
-
43
- <h2>Subtle Button with Text and Icon</h2>
44
-
45
- <d2l-demo-snippet>
46
- <template>
47
- <d2l-button-subtle icon="tier1:bookmark-hollow" text="Subtle Button"></d2l-button-subtle>
48
- <d2l-button-subtle slim icon="tier1:bookmark-hollow" text="Slim Subtle Button"></d2l-button-subtle>
49
- </template>
50
- </d2l-demo-snippet>
51
-
52
- <h2>Subtle Button with Text and Icon on the Right</h2>
53
-
54
- <d2l-demo-snippet>
55
- <template>
56
- <d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right></d2l-button-subtle>
57
- <d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right></d2l-button-subtle>
58
- </template>
59
- </d2l-demo-snippet>
60
-
61
- <h2>Subtle Button with Horizontal Align</h2>
62
-
63
- <d2l-demo-snippet>
64
- <template>
65
- <div style="border: 1px dashed #999999; text-align: start;">
66
- <d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
67
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
68
- <d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-subtle>
69
- <br>
70
- <d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text"></d2l-button-subtle>
71
- <br>
72
- <d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text"></d2l-button-subtle>
73
- <br>
74
- <d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text"></d2l-button-subtle>
75
- </div>
76
- <div style="border: 1px dashed #999999; text-align: end;">
77
- <d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
78
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
79
- <d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text-end"></d2l-button-subtle>
80
- <br>
81
- <d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text-end"></d2l-button-subtle>
82
- <br>
83
- <d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text-end"></d2l-button-subtle>
84
- <br>
85
- <d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text-end"></d2l-button-subtle>
86
- </div>
87
- </template>
88
- </d2l-demo-snippet>
89
-
90
- <h2>Subtle Button with Slot Content</h2>
91
-
92
- <d2l-demo-snippet>
93
- <template>
94
- <d2l-button-subtle text="Subtle Button">Slot Content</d2l-button-subtle>
95
- <d2l-button-subtle slim text="Slim Subtle Button">Slim Slot Content</d2l-button-subtle>
96
- </template>
97
- </d2l-demo-snippet>
98
-
99
- <h2>Subtle Button with Custom Icon</h2>
100
-
101
- <d2l-demo-snippet>
102
- <template>
103
- <d2l-button-subtle text="Subtle Button">
104
- <d2l-icon-custom slot="icon">
105
- <svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
106
- <path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
107
- <path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
108
- </svg>
109
- </d2l-icon-custom>
110
- </d2l-button-subtle>
111
- <d2l-button-subtle slim text="Slim Subtle Button">
112
- <d2l-icon-custom slot="icon">
113
- <svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
114
- <path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
115
- <path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
116
- </svg>
117
- </d2l-icon-custom>
118
- </d2l-button-subtle>
119
- </template>
120
- </d2l-demo-snippet>
121
-
122
- </d2l-demo-page>
123
-
124
- <script>
125
- document.addEventListener('click', e => {
126
- if (e.target.tagName !== 'D2L-BUTTON-SUBTLE') return;
127
- console.log('button clicked', e.target);
128
- });
129
- </script>
130
-
131
- </body>
132
- </html>
package/components/button/demo/button-toggle.html DELETED
@@ -1,80 +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 '../button-icon.js';
10
- import '../button-subtle.js';
11
- import '../button-toggle.js';
12
- </script>
13
- </head>
14
- <body unresolved>
15
-
16
- <d2l-demo-page page-title="d2l-button-toggle">
17
-
18
- <h2>Toggle Button (using d2l-button-icon)</h2>
19
-
20
- <d2l-demo-snippet>
21
- <template>
22
- <d2l-button-toggle id="toggle-button-icon">
23
- <d2l-button-icon slot="not-pressed" icon="tier1:pin-hollow" text="Unpinned, click to pin."></d2l-button-icon>
24
- <d2l-button-icon slot="pressed" icon="tier1:pin-filled" text="Pinned, click to unpin."></d2l-button-icon>
25
- </d2l-button-toggle>
26
- <script>
27
- document.querySelector('#toggle-button-icon').addEventListener('d2l-button-toggle-change', e => console.log(e));
28
- </script>
29
- </template>
30
- </d2l-demo-snippet>
31
-
32
- <h2>Toggle Button (using d2l-button-subtle)</h2>
33
-
34
- <d2l-demo-snippet>
35
- <template>
36
- <d2l-button-toggle id="toggle-button-subtle" pressed>
37
- <d2l-button-subtle slot="not-pressed" icon="tier1:lock-unlock" text="Unlocked" description="Click to lock."></d2l-button-subtle>
38
- <d2l-button-subtle slot="pressed" icon="tier1:lock-locked" text="Locked" description="Click to unlock."></d2l-button-subtle>
39
- </d2l-button-toggle>
40
- <script>
41
- document.querySelector('#toggle-button-subtle').addEventListener('d2l-button-toggle-change', e => console.log(e));
42
- </script>
43
- </template>
44
- </d2l-demo-snippet>
45
-
46
- <h2>Toggle Button (disabled)</h2>
47
-
48
- <d2l-demo-snippet>
49
- <template>
50
- <d2l-button-toggle pressed>
51
- <d2l-button-subtle slot="not-pressed" disabled icon="tier1:subscribe-hollow" text="Not Subscribed" description="Click to subscribe."></d2l-button-subtle>
52
- <d2l-button-subtle slot="pressed" disabled icon="tier1:subscribe-filled" text="Subscribed" description="Click to unsubscribe."></d2l-button-subtle>
53
- </d2l-button-toggle>
54
- </template>
55
- </d2l-demo-snippet>
56
-
57
- <h2>Toggle Button (with consumer specifying when to toggle)</h2>
58
-
59
- <d2l-demo-snippet>
60
- <template>
61
- <d2l-button-toggle id="toggle-button-icon-promise-delay">
62
- <d2l-button-icon slot="not-pressed" icon="tier1:pin-hollow" text="Unpinned, click to pin."></d2l-button-icon>
63
- <d2l-button-icon slot="pressed" icon="tier1:pin-filled" text="Pinned, click to unpin."></d2l-button-icon>
64
- </d2l-button-toggle>
65
- <script>
66
- document.querySelector('#toggle-button-icon-promise-delay').addEventListener('d2l-button-toggle-before-change', e => {
67
- e.preventDefault();
68
- setTimeout(() => {
69
- e.detail.update(!e.target.pressed);
70
- }, 2000);
71
- });
72
- document.querySelector('#toggle-button-icon-promise-delay').addEventListener('d2l-button-toggle-change', e => console.log(e));
73
- </script>
74
- </template>
75
- </d2l-demo-snippet>
76
-
77
- </d2l-demo-page>
78
-
79
- </body>
80
- </html>