@brightspace-ui/core 3.203.2 → 3.204.1

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 (27) hide show
  1. package/components/button/button-copy.js +10 -1
  2. package/components/button/demo/button-copy.html +16 -0
  3. package/components/list/README.md +239 -0
  4. package/components/list/demo/list-layout.html +52 -52
  5. package/custom-elements.json +11 -0
  6. package/lang/ar.js +6 -3
  7. package/lang/cy.js +3 -3
  8. package/lang/da.js +3 -3
  9. package/lang/de.js +3 -3
  10. package/lang/es-es.js +3 -3
  11. package/lang/es.js +3 -3
  12. package/lang/fr-fr.js +3 -3
  13. package/lang/fr.js +3 -3
  14. package/lang/haw.js +2 -3
  15. package/lang/hi.js +3 -3
  16. package/lang/ja.js +2 -2
  17. package/lang/ko.js +2 -2
  18. package/lang/mi.js +3 -3
  19. package/lang/nl.js +3 -3
  20. package/lang/pt.js +3 -3
  21. package/lang/sv.js +3 -3
  22. package/lang/th.js +2 -2
  23. package/lang/tr.js +3 -3
  24. package/lang/vi.js +2 -2
  25. package/lang/zh-cn.js +2 -2
  26. package/lang/zh-tw.js +2 -2
  27. package/package.json +1 -1
package/components/button/button-copy.js CHANGED
@@ -16,6 +16,11 @@ class ButtonCopy extends FocusMixin(LocalizeCoreElement(LitElement)) {
16
16
  * @type {boolean}
17
17
  */
18
18
  disabled: { type: Boolean, reflect: true },
19
+ /**
20
+ * Description of the content being copied to clipboard
21
+ * @type {string}
22
+ */
23
+ text: { type: String },
19
24
  _iconCheckTimeoutId: { state: true },
20
25
  _toastState: { state: true }
21
26
  };
@@ -43,7 +48,11 @@ class ButtonCopy extends FocusMixin(LocalizeCoreElement(LitElement)) {
43
48
 
44
49
  render() {
45
50
  return html`
46
- <d2l-button-icon ?disabled="${this.disabled}" icon="${this._iconCheckTimeoutId ? 'tier1:check' : 'tier1:copy'}" text="${this.localize('intl-common:actions:copy')}" @click="${this.#handleClick}"></d2l-button-icon>
51
+ <d2l-button-icon
52
+ ?disabled="${this.disabled}"
53
+ icon="${this._iconCheckTimeoutId ? 'tier1:check' : 'tier1:copy'}"
54
+ text="${this.text ?? this.localize('intl-common:actions:copy')}"
55
+ @click="${this.#handleClick}"></d2l-button-icon>
47
56
  <d2l-alert-toast
48
57
  @d2l-alert-toast-close="${this.#handleToastClose}"
49
58
  ?open="${this._toastState}"
package/components/button/demo/button-copy.html CHANGED
@@ -54,6 +54,22 @@
54
54
  </template>
55
55
  </d2l-demo-snippet>
56
56
 
57
+ <h2>Text</h2>
58
+
59
+ <d2l-demo-snippet>
60
+ <template>
61
+ <span>Donuts are yummmmmy!</span>
62
+ <d2l-button-copy text="Donuts are yummmmmy!"></d2l-button-copy>
63
+ <script>
64
+ (demo => {
65
+ demo.querySelector('d2l-button-copy').addEventListener('click', async(e) => {
66
+ console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
67
+ });
68
+ })(document.currentScript.parentNode);
69
+ </script>
70
+ </template>
71
+ </d2l-demo-snippet>
72
+
57
73
  </d2l-demo-page>
58
74
 
59
75
  </body>
package/components/list/README.md CHANGED
@@ -803,6 +803,245 @@ The example below also includes expand/collapse behavior in order to expand or c
803
803
  - `d2l-list-item-expand-collapse-toggled`: dispatched when the item's expand/collapse toggle is clicked
804
804
  <!-- docs: end hidden content -->
805
805
 
806
+ ## Tile Layout
807
+
808
+ The `d2l-list` component supports displaying items in a tile layout. The built-in rendering will take care of laying out the illustration, selection, secondary actions, and color indicators for each item in either the `list` (default) or `tiles` layout. To display items in a tile layout, set the `d2l-list`'s `layout` property to `tiles`.
809
+
810
+ **Note:** Nested lists, separators, and drag & drop are not supported in the tile layout.
811
+
812
+ <!-- docs: demo code display:block autoSize:false size:large sandboxTitle:'List - Tile Layout'-->
813
+ ```html
814
+ <script type="module">
815
+ import '@brightspace-ui/core/components/list/list-item.js';
816
+ import '@brightspace-ui/core/components/list/list-item-content.js';
817
+ import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
818
+ import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
819
+ import { listLayouts } from '@brightspace-ui/core/components/list/list.js';
820
+ document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
821
+ document.querySelector('d2l-list').layout = (e.detail.key === 'tiles' ? listLayouts.tiles : listLayouts.list);
822
+ });
823
+ </script>
824
+ <style>
825
+ d2l-view-switcher {
826
+ margin-block-end: 0.9rem;
827
+ }
828
+ img[slot="illustration"] {
829
+ object-fit: cover;
830
+ }
831
+ d2l-list-item[layout="normal"] img[slot="illustration"] {
832
+ height: 500px;
833
+ }
834
+ d2l-list-item[layout="tile"] img[slot="illustration"] {
835
+ height: 5rem;
836
+ }
837
+ </style>
838
+
839
+ <div>
840
+ <d2l-view-switcher label="Layout Options">
841
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
842
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
843
+ </d2l-view-switcher>
844
+ <d2l-list layout="tiles">
845
+ <d2l-list-item>
846
+ <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
847
+ <d2l-list-item-content>
848
+ <div>Earth Sciences</div>
849
+ <div slot="secondary">Secondary information</div>
850
+ <div slot="supporting-info">Supporting information</div>
851
+ </d2l-list-item-content>
852
+ </d2l-list-item>
853
+ <d2l-list-item>
854
+ <img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg">
855
+ <d2l-list-item-content>
856
+ <div>Grade 2</div>
857
+ <div slot="secondary">Secondary information</div>
858
+ <div slot="supporting-info">Supporting information</div>
859
+ </d2l-list-item-content>
860
+ </d2l-list-item>
861
+ </d2l-list>
862
+ </div>
863
+ ```
864
+
865
+ Apply the `tile-header` property to the list item when using selection or secondary actions and there isn't a decorative image to render over.
866
+
867
+ <!-- docs: demo code display:block autoSize:false size:large sandboxTitle:'List - Tile Header'-->
868
+ ```html
869
+ <script type="module">
870
+ import '@brightspace-ui/core/components/button/button-icon.js';
871
+ import '@brightspace-ui/core/components/list/list-item.js';
872
+ import '@brightspace-ui/core/components/list/list-item-content.js';
873
+ import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
874
+ import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
875
+ import { listLayouts } from '@brightspace-ui/core/components/list/list.js';
876
+ document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
877
+ document.querySelector('d2l-list').layout = (e.detail.key === 'tiles' ? listLayouts.tiles : listLayouts.list);
878
+ });
879
+ </script>
880
+ <style>
881
+ d2l-view-switcher {
882
+ margin-block-end: 0.9rem;
883
+ }
884
+ img[slot="illustration"] {
885
+ object-fit: cover;
886
+ }
887
+ d2l-list-item[layout="normal"] img[slot="illustration"] {
888
+ height: 500px;
889
+ }
890
+ d2l-list-item[layout="tile"] img[slot="illustration"] {
891
+ height: 5rem;
892
+ }
893
+ </style>
894
+
895
+ <div>
896
+ <d2l-view-switcher label="Layout Options">
897
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
898
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
899
+ </d2l-view-switcher>
900
+ <d2l-list layout="tiles">
901
+ <d2l-list-item label="Earth Sciences" key="earth" selectable>
902
+ <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
903
+ <d2l-list-item-content>
904
+ <div>Earth Sciences</div>
905
+ <div slot="secondary">Secondary information</div>
906
+ <div slot="supporting-info">Supporting information</div>
907
+ </d2l-list-item-content>
908
+ <div slot="actions">
909
+ <d2l-button-icon text="More" icon="tier1:gear" translucent visible-on-ancestor></d2l-button-icon>
910
+ </div>
911
+ </d2l-list-item>
912
+ <d2l-list-item label="Grade 2" key="grade2" selectable tile-header>
913
+ <d2l-list-item-content>
914
+ <div>Grade 2</div>
915
+ <div slot="secondary">Secondary information</div>
916
+ <div slot="supporting-info">Supporting information</div>
917
+ </d2l-list-item-content>
918
+ <div slot="actions">
919
+ <d2l-button-icon text="More" icon="tier1:gear"></d2l-button-icon>
920
+ </div>
921
+ </d2l-list-item>
922
+ </d2l-list>
923
+ </div>
924
+ ```
925
+
926
+ In addition, the list item's `tile-padding-type` property enables consumers to opt out of the default item padding, enabling greater flexibility when rendering custom item layouts. To opt out of the default item padding, set the item's `tile-padding-type` property to `none`. Use the list item's existing CSS variables to apply consistent border and padding properties in the item's custom layout.
927
+
928
+ **Note:** For custom item layouts, consumers are responsible for laying out their content in both the standard `list` and `tiles` layouts if the user can change the layout. Ideally this is accomplished by simply applying slightly different styles.
929
+
930
+ <!-- docs: demo code display:block autoSize:false size:large sandboxTitle:'List - Tile Custom Layout'-->
931
+ ```html
932
+ <script type="module">
933
+ import '@brightspace-ui/core/components/button/button.js';
934
+ import '@brightspace-ui/core/components/button/button-icon.js';
935
+ import '@brightspace-ui/core/components/list/list-item.js';
936
+ import '@brightspace-ui/core/components/list/list-item-content.js';
937
+ import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
938
+ import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
939
+ import { listLayouts } from '@brightspace-ui/core/components/list/list.js';
940
+ document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
941
+ document.querySelector('d2l-list').layout = (e.detail.key === 'tiles' ? listLayouts.tiles : listLayouts.list);
942
+ });
943
+ </script>
944
+ <style>
945
+ d2l-view-switcher {
946
+ margin-block-end: 0.9rem;
947
+ }
948
+ d2l-list-item > .custom-content {
949
+ display: flex;
950
+ gap: var(--d2l-list-item-padding);
951
+ }
952
+ d2l-list-item > .custom-content > d2l-list-item-content {
953
+ flex: auto;
954
+ }
955
+ d2l-list-item > .custom-content > d2l-icon {
956
+ flex: none;
957
+ }
958
+
959
+ d2l-list-item[layout="normal"] > .custom-content {
960
+ flex-direction: row;
961
+ width: 100%;
962
+ }
963
+ d2l-list-item[layout="normal"] > .custom-content > d2l-icon {
964
+ height: 3rem;
965
+ width: 3rem;
966
+ }
967
+ d2l-list-item[layout="normal"] > .custom-content > img {
968
+ display: none;
969
+ }
970
+
971
+ d2l-list-item[layout="tile"] > .custom-content {
972
+ flex-direction: column;
973
+ height: 100%;
974
+ }
975
+ d2l-list-item[layout="tile"] > .custom-content > img {
976
+ border-bottom: 1px solid var(--d2l-list-item-border-color);
977
+ border-start-end-radius: var(--d2l-list-item-illustration-border-radius);
978
+ border-start-start-radius: var(--d2l-list-item-illustration-border-radius);
979
+ height: 5rem;
980
+ object-fit: cover;
981
+ width: 100%;
982
+ }
983
+ d2l-list-item[layout="tile"] > .custom-content > d2l-icon {
984
+ background-color: white;
985
+ border: 1px solid var(--d2l-list-item-border-color);
986
+ border-radius: var(--d2l-list-item-illustration-border-radius);
987
+ box-sizing: border-box;
988
+ height: 4rem;
989
+ margin-block-start: calc(-1 * var(--d2l-list-item-padding) - 2rem);
990
+ margin-inline: auto;
991
+ padding: var(--d2l-list-item-padding);
992
+ width: 4rem;
993
+ }
994
+ d2l-list-item[layout="tile"] > .custom-content > d2l-list-item-content {
995
+ padding-inline: var(--d2l-list-item-padding);
996
+ }
997
+ d2l-list-item[layout="tile"] > .custom-content > .footer {
998
+ padding: var(--d2l-list-item-padding);
999
+ }
1000
+ </style>
1001
+
1002
+ <div>
1003
+ <d2l-view-switcher label="Layout Options">
1004
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
1005
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
1006
+ </d2l-view-switcher>
1007
+ <d2l-list layout="tiles">
1008
+ <d2l-list-item label="Earth Sciences" key="earth" selectable tile-padding-type="none">
1009
+ <div class="custom-content">
1010
+ <img src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
1011
+ <d2l-list-item-content>
1012
+ <div>Identify categories of physical activities</div>
1013
+ <div slot="secondary">Secondary Information</div>
1014
+ <div slot="supporting-info">Specific Expectation A1.2</div>
1015
+ </d2l-list-item-content>
1016
+ <div class="footer">
1017
+ <d2l-button style="width: 100%;">Shiny Button</d2l-button>
1018
+ </div>
1019
+ </div>
1020
+ <div slot="actions">
1021
+ <d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
1022
+ </div>
1023
+ </d2l-list-item>
1024
+ <d2l-list-item label="Grade 2" key="grade2" selectable tile-padding-type="none">
1025
+ <div class="custom-content">
1026
+ <img src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
1027
+ <d2l-icon icon="tier3:home"></d2l-icon>
1028
+ <d2l-list-item-content>
1029
+ <div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
1030
+ <div slot="secondary">Secondary Information</div>
1031
+ <div slot="supporting-info">Specific Expectation B2.1</div>
1032
+ </d2l-list-item-content>
1033
+ <div class="footer">
1034
+ <d2l-button style="width: 100%;">Shiny Button</d2l-button>
1035
+ </div>
1036
+ </div>
1037
+ <div slot="actions">
1038
+ <d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
1039
+ </div>
1040
+ </d2l-list-item>
1041
+ </d2l-list>
1042
+ </div>
1043
+ ```
1044
+
806
1045
  ## ListItemMixin
807
1046
 
808
1047
  Want to maintain consistency with `d2l-list-item` but need more modularity? This mixin is for you! This mixin allows you to make a component into a list item without requiring custom styling. All of the properties and functionality from `d2l-list-item` (listed above) will be added to your new component.
package/components/list/demo/list-layout.html CHANGED
@@ -8,21 +8,21 @@
8
8
  import '../../demo/demo-page.js';
9
9
  import '../../button/button.js';
10
10
  import '../../button/button-icon.js';
11
- import '../../button/button-subtle.js';
12
- import '../../button/button-toggle.js';
13
11
  import '../../icons/icon.js';
14
12
  import '../list-item-button.js';
15
13
  import '../list-item-content.js';
16
14
  import '../list-item.js';
17
- import '../list.js';
18
- window.wireupListTileToggle = demo => {
19
- demo.querySelector('d2l-button-toggle').addEventListener('d2l-button-toggle-change', e => {
20
- demo.querySelector('d2l-list').layout = (e.target.pressed ? 'tiles' : 'list');
15
+ import '../../view-switcher/view-switcher.js';
16
+ import '../../view-switcher/view-switcher-button.js';
17
+ import { listLayouts } from '../list.js';
18
+ window.wireupViewSwitcher = demo => {
19
+ demo.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
20
+ demo.querySelector('d2l-list').layout = (e.detail.key === 'tiles' ? listLayouts.tiles : listLayouts.list);
21
21
  });
22
22
  };
23
23
  </script>
24
24
  <style>
25
- d2l-button-toggle {
25
+ d2l-view-switcher {
26
26
  margin-block-end: 0.9rem;
27
27
  }
28
28
  d2l-list-item[layout="normal"] div[slot="illustration"],
@@ -107,10 +107,10 @@
107
107
 
108
108
  <d2l-demo-snippet>
109
109
  <template>
110
- <d2l-button-toggle pressed>
111
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
112
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
113
- </d2l-button-toggle>
110
+ <d2l-view-switcher label="Layout Options">
111
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
112
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
113
+ </d2l-view-switcher>
114
114
  <d2l-list layout="tiles">
115
115
  <d2l-list-item label="item 1">
116
116
  <d2l-list-item-content>
@@ -135,7 +135,7 @@
135
135
  </d2l-list-item>
136
136
  </d2l-list>
137
137
  <script data-demo-hide>
138
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
138
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
139
139
  </script>
140
140
  </template>
141
141
  </d2l-demo-snippet>
@@ -144,10 +144,10 @@
144
144
 
145
145
  <d2l-demo-snippet>
146
146
  <template>
147
- <d2l-button-toggle pressed>
148
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
149
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
150
- </d2l-button-toggle>
147
+ <d2l-view-switcher label="Layout Options">
148
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
149
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
150
+ </d2l-view-switcher>
151
151
  <d2l-list layout="tiles">
152
152
  <d2l-list-item label="item 1">
153
153
  <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
@@ -191,7 +191,7 @@
191
191
  </d2l-list-item>
192
192
  </d2l-list>
193
193
  <script data-demo-hide>
194
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
194
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
195
195
  </script>
196
196
  </template>
197
197
  </d2l-demo-snippet>
@@ -200,10 +200,10 @@
200
200
 
201
201
  <d2l-demo-snippet>
202
202
  <template>
203
- <d2l-button-toggle pressed>
204
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
205
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
206
- </d2l-button-toggle>
203
+ <d2l-view-switcher label="Layout Options">
204
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
205
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
206
+ </d2l-view-switcher>
207
207
  <d2l-list layout="tiles">
208
208
  <d2l-list-item label="item 1" key="1" selectable tile-header>
209
209
  <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
@@ -238,7 +238,7 @@
238
238
  </d2l-list-item>
239
239
  </d2l-list>
240
240
  <script data-demo-hide>
241
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
241
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
242
242
  </script>
243
243
  </template>
244
244
  </d2l-demo-snippet>
@@ -247,10 +247,10 @@
247
247
 
248
248
  <d2l-demo-snippet>
249
249
  <template>
250
- <d2l-button-toggle pressed>
251
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
252
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
253
- </d2l-button-toggle>
250
+ <d2l-view-switcher label="Layout Options">
251
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
252
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
253
+ </d2l-view-switcher>
254
254
  <d2l-list layout="tiles">
255
255
  <d2l-list-item label="item 1" key="1" tile-header>
256
256
  <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
@@ -298,7 +298,7 @@
298
298
  </d2l-list-item>
299
299
  </d2l-list>
300
300
  <script data-demo-hide>
301
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
301
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
302
302
  </script>
303
303
  </template>
304
304
  </d2l-demo-snippet>
@@ -307,10 +307,10 @@
307
307
 
308
308
  <d2l-demo-snippet>
309
309
  <template>
310
- <d2l-button-toggle pressed>
311
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
312
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
313
- </d2l-button-toggle>
310
+ <d2l-view-switcher label="Layout Options">
311
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
312
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
313
+ </d2l-view-switcher>
314
314
  <d2l-list layout="tiles">
315
315
  <d2l-list-item label="item 1" href="http://www.d2l.com">
316
316
  <d2l-list-item-content>
@@ -335,7 +335,7 @@
335
335
  </d2l-list-item>
336
336
  </d2l-list>
337
337
  <script data-demo-hide>
338
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
338
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
339
339
  </script>
340
340
  </template>
341
341
  </d2l-demo-snippet>
@@ -344,10 +344,10 @@
344
344
 
345
345
  <d2l-demo-snippet>
346
346
  <template>
347
- <d2l-button-toggle pressed>
348
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
349
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
350
- </d2l-button-toggle>
347
+ <d2l-view-switcher label="Layout Options">
348
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
349
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
350
+ </d2l-view-switcher>
351
351
  <d2l-list layout="tiles">
352
352
  <d2l-list-item-button label="item 1" href="http://www.d2l.com">
353
353
  <d2l-list-item-content>
@@ -372,7 +372,7 @@
372
372
  </d2l-list-item-button>
373
373
  </d2l-list>
374
374
  <script data-demo-hide>
375
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
375
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
376
376
  </script>
377
377
  </template>
378
378
  </d2l-demo-snippet>
@@ -381,10 +381,10 @@
381
381
 
382
382
  <d2l-demo-snippet>
383
383
  <template>
384
- <d2l-button-toggle pressed>
385
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
386
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
387
- </d2l-button-toggle>
384
+ <d2l-view-switcher label="Layout Options">
385
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
386
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
387
+ </d2l-view-switcher>
388
388
  <d2l-list layout="tiles">
389
389
  <d2l-list-item label="item 1" key="1" selectable tile-padding-type="none">
390
390
  <div class="custom-content">
@@ -421,7 +421,7 @@
421
421
  </d2l-list-item>
422
422
  </d2l-list>
423
423
  <script data-demo-hide>
424
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
424
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
425
425
  </script>
426
426
  </template>
427
427
  </d2l-demo-snippet>
@@ -430,10 +430,10 @@
430
430
 
431
431
  <d2l-demo-snippet>
432
432
  <template>
433
- <d2l-button-toggle pressed>
434
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
435
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
436
- </d2l-button-toggle>
433
+ <d2l-view-switcher label="Layout Options">
434
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
435
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
436
+ </d2l-view-switcher>
437
437
  <d2l-list layout="tiles">
438
438
  <d2l-list-item label="item 1" key="1">
439
439
  <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
@@ -462,7 +462,7 @@
462
462
  </d2l-list-item>
463
463
  </d2l-list>
464
464
  <script data-demo-hide>
465
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
465
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
466
466
  </script>
467
467
  </template>
468
468
  </d2l-demo-snippet>
@@ -471,10 +471,10 @@
471
471
 
472
472
  <d2l-demo-snippet>
473
473
  <template>
474
- <d2l-button-toggle pressed>
475
- <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
476
- <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
477
- </d2l-button-toggle>
474
+ <d2l-view-switcher label="Layout Options">
475
+ <d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
476
+ <d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
477
+ </d2l-view-switcher>
478
478
  <d2l-list layout="tiles">
479
479
  <d2l-list-item label="item 1" key="1" color="#29a6ff" selectable tile-header>
480
480
  <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
@@ -518,7 +518,7 @@
518
518
  </d2l-list-item>
519
519
  </d2l-list>
520
520
  <script data-demo-hide>
521
- (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
521
+ (demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
522
522
  </script>
523
523
  </template>
524
524
  </d2l-demo-snippet>
package/custom-elements.json CHANGED
@@ -400,6 +400,11 @@
400
400
  "path": "./components/button/button-copy.js",
401
401
  "description": "A button component that copies to the clipboard.",
402
402
  "attributes": [
403
+ {
404
+ "name": "text",
405
+ "description": "Description of the content being copied to clipboard",
406
+ "type": "string"
407
+ },
403
408
  {
404
409
  "name": "disabled",
405
410
  "description": "Disables the button",
@@ -408,6 +413,12 @@
408
413
  }
409
414
  ],
410
415
  "properties": [
416
+ {
417
+ "name": "text",
418
+ "attribute": "text",
419
+ "description": "Description of the content being copied to clipboard",
420
+ "type": "string"
421
+ },
411
422
  {
412
423
  "name": "disabled",
413
424
  "attribute": "disabled",
package/lang/ar.js CHANGED
@@ -238,9 +238,12 @@ export default {
238
238
  "components.tag-list-item.tooltip-title": "عناصر التحكم في لوحة المفاتيح",
239
239
  "components.view-switcher.role-description":
240
240
  `{count, plural,
241
- =0 {View Switcher with 0 items}
242
- one {View Switcher with {count} item}
243
- other {View Switcher with {count} items}
241
+ =0 {مبدّل العرض يتضمن 0 عنصر}
242
+ =2 {مبدّل العرض يتضمن {count} عنصرين}
243
+ one {مبدّل العرض يتضمن {count} عنصر}
244
+ few {مبدّل العرض يتضمن {count} عناصر}
245
+ many {مبدّل العرض يتضمن {count} عنصر}
246
+ other {مبدّل العرض يتضمن {count} عنصر}
244
247
  }`,
245
248
  "templates.primary-secondary.divider": "فاصل اللوحة الثانوية",
246
249
  "templates.primary-secondary.secondary-panel": "اللوحة الثانوية"
package/lang/cy.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Rheolyddion Bysellfwrdd",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Newidydd Gwedd gyda 0 eitem}
238
+ one {Newidydd Gwedd gyda {count} eitem}
239
+ other {Newidydd Gwedd gyda {count} eitem}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Rhannwr panel eilaidd",
242
242
  "templates.primary-secondary.secondary-panel": "Panel eilaidd"
package/lang/da.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Kontrolelementer på tastaturet",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Vis skift med 0 elementer}
238
+ one {Vis skift med {count} element}
239
+ other {Vis skift med {count} elementer}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Sekundær panelskillelinje",
242
242
  "templates.primary-secondary.secondary-panel": "Sekundært panel"
package/lang/de.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Tastatursteuerung",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Ansichtswechsel mit 0 Elementen}
238
+ one {Ansichtswechsel mit {count} Element}
239
+ other {Ansichtswechsel mit {count} Elementen}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Sekundäre Bereichstrennung",
242
242
  "templates.primary-secondary.secondary-panel": "Sekundärer Bereich"
package/lang/es-es.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Controles del teclado",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Cambio de vista con 0 elementos}
238
+ one {Cambio de vista con {count} elemento}
239
+ other {Cambio de vista con {count} elementos}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Divisor de panel secundario",
242
242
  "templates.primary-secondary.secondary-panel": "Panel secundario"
package/lang/es.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Controles del teclado",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Selector de vistas con 0 elementos}
238
+ one {Selector de vistas con {count} elemento}
239
+ other {Selector de vistas con {count} elementos}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Divisor de panel secundario",
242
242
  "templates.primary-secondary.secondary-panel": "Panel secundario"
package/lang/fr-fr.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Commandes du clavier",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Sélecteur de vue comportant 0 élément}
238
+ one {Sélecteur de vue comportant {count} élément}
239
+ other {Sélecteur de vue comportant {count} éléments}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Séparateur de panneau secondaire",
242
242
  "templates.primary-secondary.secondary-panel": "Panneau secondaire"
package/lang/fr.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Commandes du clavier",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {sélecteur de vue avec 0 élément}
238
+ one {sélecteur de vue avec {count} élément}
239
+ other {sélecteur de vue avec {count} éléments}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Séparateur de panneau secondaire",
242
242
  "templates.primary-secondary.secondary-panel": "Panneau secondaire"
package/lang/haw.js CHANGED
@@ -234,9 +234,8 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Nā Mana Keyboard",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ one {Nānā i ka mea hoʻololi me {count} nā mea}
238
+ other {Nānā i ka mea hoʻololi me {count} nā mea}
240
239
  }`,
241
240
  "templates.primary-secondary.divider": "Mea hoʻokaʻawale papa lua",
242
241
  "templates.primary-secondary.secondary-panel": "Pane lua"
package/lang/hi.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "कीबोर्ड कंट्रोल",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {0 आइटम के साथ स्विचर को देखें}
238
+ one {{count} आइटम के साथ स्विचर को देखें}
239
+ other {{count} आइटम के साथ स्विचर को देखें}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "सेकेंडरी पैनल डिवाइडर",
242
242
  "templates.primary-secondary.secondary-panel": "सेकेंडरी पैनल"
package/lang/ja.js CHANGED
@@ -224,8 +224,8 @@ export default {
224
224
  "components.tag-list-item.tooltip-title": "キーボードコントロール",
225
225
  "components.view-switcher.role-description":
226
226
  `{count, plural,
227
- =0 {View Switcher with 0 items}
228
- other {View Switcher with {count} items}
227
+ =0 {表示切り替えに 0 項目}
228
+ other {表示切り替えに {count} 項目}
229
229
  }`,
230
230
  "templates.primary-secondary.divider": "セカンダリパネルディバイダ",
231
231
  "templates.primary-secondary.secondary-panel": "セカンダリパネル"
package/lang/ko.js CHANGED
@@ -224,8 +224,8 @@ export default {
224
224
  "components.tag-list-item.tooltip-title": "키보드 컨트롤",
225
225
  "components.view-switcher.role-description":
226
226
  `{count, plural,
227
- =0 {View Switcher with 0 items}
228
- other {View Switcher with {count} items}
227
+ =0 {0개의 항목이 있는 보기 전환기}
228
+ other {{count}개의 항목이 있는 보기 전환기}
229
229
  }`,
230
230
  "templates.primary-secondary.divider": "보조 패널 디바이더",
231
231
  "templates.primary-secondary.secondary-panel": "보조 패널"
package/lang/mi.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Ngā Mana Papapātuhi",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Tirohia te Whakawhiti me te 0 taonga}
238
+ one {Tirohanga Whakawhiti me {count} taonga}
239
+ other {Tirohanga Whakawhiti me {count} taonga}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Kaiwehe paepae tuarua",
242
242
  "templates.primary-secondary.secondary-panel": "Pae tuarua"
package/lang/nl.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Bedieningselementen op het toetsenbord",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Weergaveschakelaar met 0 items}
238
+ one {Weergaveschakelaar met {count} item}
239
+ other {Weergaveschakelaar met {count} items}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Scheidingslijn secundair venster",
242
242
  "templates.primary-secondary.secondary-panel": "Secundair venster"
package/lang/pt.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Controles do teclado",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Alternador de visualização com 0 itens}
238
+ one {Alternador de visualização com {count} item}
239
+ other {Alternador de visualização com {count} itens}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Divisor do painel secundário",
242
242
  "templates.primary-secondary.secondary-panel": "Painel secundário"
package/lang/sv.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Tangentbordskontroller",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {Visa växlare med 0 objekt}
238
+ one {Visa växlare med {count} objekt}
239
+ other {Visa växlare med {count} objekt}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "Avgränsare för sekundär panel",
242
242
  "templates.primary-secondary.secondary-panel": "Sekundär panel"
package/lang/th.js CHANGED
@@ -225,8 +225,8 @@ export default {
225
225
  "components.tag-list-item.tooltip-title": "การควบคุมแป้นพิมพ์",
226
226
  "components.view-switcher.role-description":
227
227
  `{count, plural,
228
- =0 {View Switcher with 0 items}
229
- other {View Switcher with {count} items}
228
+ =0 {ดู Switcher ที่มี 0 รายการ}
229
+ other {ดู Switcher ที่มี {count} รายการ}
230
230
  }`,
231
231
  "templates.primary-secondary.divider": "ตัวแบ่งบานหน้าต่างรอง",
232
232
  "templates.primary-secondary.secondary-panel": "บานหน้าต่างรอง"
package/lang/tr.js CHANGED
@@ -234,9 +234,9 @@ export default {
234
234
  "components.tag-list-item.tooltip-title": "Klavye Kontrolleri",
235
235
  "components.view-switcher.role-description":
236
236
  `{count, plural,
237
- =0 {View Switcher with 0 items}
238
- one {View Switcher with {count} item}
239
- other {View Switcher with {count} items}
237
+ =0 {0 öğeli Değiştiriciyi görüntüle}
238
+ one {{count} öğeli Değiştiriciyi görüntüle}
239
+ other {{count} öğeli Değiştiriciyi görüntüle}
240
240
  }`,
241
241
  "templates.primary-secondary.divider": "İkincil panel ayırıcı",
242
242
  "templates.primary-secondary.secondary-panel": "İkincil panel"
package/lang/vi.js CHANGED
@@ -225,8 +225,8 @@ export default {
225
225
  "components.tag-list-item.tooltip-title": "Các điều khiển bàn phím",
226
226
  "components.view-switcher.role-description":
227
227
  `{count, plural,
228
- =0 {View Switcher with 0 items}
229
- other {View Switcher with {count} items}
228
+ =0 {Xem Trình chuyển đổi với 0 mục}
229
+ other {Xem Trình chuyển đổi với {count} mục}
230
230
  }`,
231
231
  "templates.primary-secondary.divider": "Bộ phân cách bảng phụ",
232
232
  "templates.primary-secondary.secondary-panel": "Bảng phụ"
package/lang/zh-cn.js CHANGED
@@ -224,8 +224,8 @@ export default {
224
224
  "components.tag-list-item.tooltip-title": "键盘控制",
225
225
  "components.view-switcher.role-description":
226
226
  `{count, plural,
227
- =0 {View Switcher with 0 items}
228
- other {View Switcher with {count} items}
227
+ =0 {包含 0 个项目的视图切换开关}
228
+ other {包含 {count} 个项目的视图切换开关}
229
229
  }`,
230
230
  "templates.primary-secondary.divider": "辅助面板分隔条",
231
231
  "templates.primary-secondary.secondary-panel": "辅助面板"
package/lang/zh-tw.js CHANGED
@@ -225,8 +225,8 @@ export default {
225
225
  "components.tag-list-item.tooltip-title": "鍵盤控制項",
226
226
  "components.view-switcher.role-description":
227
227
  `{count, plural,
228
- =0 {View Switcher with 0 items}
229
- other {View Switcher with {count} items}
228
+ =0 {檢視有 0 個項目的切換器}
229
+ other {檢視有 {count} 個項目的切換器}
230
230
  }`,
231
231
  "templates.primary-secondary.divider": "次要面板分隔線",
232
232
  "templates.primary-secondary.secondary-panel": "次要面板"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.203.2",
3
+ "version": "3.204.1",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",