@brightspace-ui/core 3.220.2 → 3.221.0

package/components/inputs/input-textarea.js

@@ -170,6 +170,18 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 		this._textareaId = getUniqueId();
 	}
 
+	/** @ignore */
+	get selectionStart() {
+		return this.textarea?.selectionStart || 0;
+	}
+
+	/** @ignore */
+	set selectionStart(value) {
+		if (this.textarea !== null) {
+			this.textarea.selectionStart = value;
+		}
+	}
+
 	static get focusElementSelector() {
 		return 'textarea';
 	}
@@ -177,7 +189,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 	/** @ignore */
 	get textarea() {
 		// temporary until consumers are updated
-		return this.shadowRoot && this.shadowRoot.querySelector('textarea');
+		return this.shadowRoot?.querySelector('textarea');
 	}
 
 	/** @ignore */

package/components/view-switcher/README.md

@@ -0,0 +1,52 @@
+# View Switcher
+A segmented component to switch between views. Use a view switcher to change between the presentation of a single set of information. It is not recommended to use the switcher to change the information being presented.
+
+## View Switcher [d2l-view-switcher]
+
+<!-- docs: demo code properties name:d2l-view-switcher sandboxTitle:'View Switcher' autoSize:false  -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
+  import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
+</script>
+
+<d2l-view-switcher label="Layout Options">
+	<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
+	<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
+	<d2l-view-switcher-button key="table" text="Table"></d2l-view-switcher-button>
+</d2l-view-switcher>
+```
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `label` | String, required | Sets an accessible label for the switcher. |
+<!-- docs: end hidden content -->
+
+## View Switcher Button [d2l-view-switcher-button]
+
+<!-- docs: demo code properties name:d2l-view-switcher-button autoSize:false -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
+  import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
+</script>
+
+<d2l-view-switcher label="Layout Options">
+	<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
+	<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
+</d2l-view-switcher>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+| Property | Type | Description |
+|---|---|---|
+|`key` | String, required | Key for the button. |
+|`text`| String, required  | Text for the button. |
+|`selected`| Boolean, default: `false` | Indicates if the item is selected. |
+
+### Events
+* `d2l-view-switcher-select`: Dispatched when the item is selected
+<!-- docs: end hidden content -->

package/components/view-switcher/demo/demo-table-view.js

@@ -0,0 +1,41 @@
+import { css, html, LitElement } from 'lit';
+import { tableStyles } from '../../table/table-wrapper.js';
+
+class TableView extends LitElement {
+	static get styles() {
+		return [tableStyles, css`
+			:host([hidden]) {
+				display: none;
+			}
+		`];
+	}
+
+	render() {
+		return html`
+			<d2l-table-wrapper>
+				<table class="d2l-table">
+					<thead>
+					<tr>
+						<th>Name</th>
+						<th>Section</th>
+						<th>Info</th>
+					</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th>Jane Doe</th>
+							<td>Section 1</td>
+							<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</td>
+						</tr>
+						<tr>
+							<th>John Smith</th>
+							<td>Section 2</td>
+							<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</td>
+						</tr>
+					</tbody>
+				</table>
+			</d2l-table-wrapper>
+		`;
+	}
+}
+customElements.define('d2l-demo-table-view', TableView);

package/components/view-switcher/demo/view-switcher.html

@@ -8,22 +8,59 @@
 			import '../../demo/demo-page.js';
 			import '../view-switcher.js';
 			import '../view-switcher-button.js';
+			import '../../list/list-item-content.js';
+			import '../../list/list-item.js';
+			import './demo-table-view.js';
+			import { listLayouts } from '../../list/list.js';
+			window.listLayouts = listLayouts;
 		</script>
 	</head>
 	<body unresolved>
 
 		<d2l-demo-page page-title="d2l-view-switcher">
 
-			<h2>Segmented Button</h2>
+			<h2>View Switcher</h2>
 
 			<d2l-demo-snippet>
-				<template>
-					<d2l-view-switcher label="Save Options">
-						<d2l-view-switcher-button selected key="saveAsDraft" text="Save as Draft"></d2l-view-switcher-button>
-						<d2l-view-switcher-button key="saveAndClose" text="Save and Close"></d2l-view-switcher-button>
-						<d2l-view-switcher-button key="saveAndNew" text="Save and New"></d2l-view-switcher-button>
-					</d2l-view-switcher>
-				</template>
+				<d2l-view-switcher label="Layout Options">
+					<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
+					<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
+					<d2l-view-switcher-button key="table" text="Table"></d2l-view-switcher-button>
+				</d2l-view-switcher>
+				<br><br>
+
+				<d2l-list layout="tiles">
+					<d2l-list-item label="item 1">
+						<d2l-list-item-content>
+							<div>Jane Doe</div>
+							<div slot="secondary">Section 1</div>
+							<div slot="supporting-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</div>
+						</d2l-list-item-content>
+					</d2l-list-item>
+					<d2l-list-item label="item 2">
+						<d2l-list-item-content>
+							<div>John Smith</div>
+							<div slot="secondary">Section 2</div>
+							<div slot="supporting-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</div>
+						</d2l-list-item-content>
+					</d2l-list-item>
+				</d2l-list>
+				<d2l-demo-table-view hidden></d2l-demo-table-view>
+
+				<script data-demo-hide>
+					document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
+						const list = document.querySelector('d2l-list');
+						const table = document.querySelector('d2l-demo-table-view');
+						if (e.detail.key === 'table') {
+							table.removeAttribute('hidden');
+							list.setAttribute('hidden', '');
+						} else {
+							table.setAttribute('hidden', '');
+							list.removeAttribute('hidden');
+							list.layout = (e.detail.key === 'tiles' ? window.listLayouts.tiles : window.listLayouts.list);
+						}
+					});
+				</script>
 			</d2l-demo-snippet>
 
 

package/components/view-switcher/view-switcher-button.js

@@ -15,12 +15,12 @@ class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(LitElement)) {
 	static get properties() {
 		return {
 			/**
-			 * REQUIRED: Key of the action
+			 * REQUIRED: Key for the button
 			 * @type {string}
 			 */
 			key: { type: String, required: true },
 			/**
-			 * REQUIRED: Button text
+			 * REQUIRED: Text for the button
 			 * @type {string}
 			 */
 			text: { type: String, required: true },

package/components/view-switcher/view-switcher.js

@@ -91,7 +91,13 @@ class ViewSwitcher extends LocalizeCoreElement(LitElement) {
 		const items = this.items;
 		this._count = items.length;
 		if (items.length === 0) return;
-		if (!items.find(i => i.selected)) items[0].selected = true;
+		const selectedItems = items.filter(i => i.selected);
+		if (selectedItems.length === 0) items[0].selected = true;
+		if (selectedItems.length > 1) { // unselect all but the first selected item
+			for (let i = 1; i < selectedItems.length; i++) {
+				selectedItems[i].selected = false;
+			}
+		}
 	}
 
 }

package/custom-elements.json

@@ -15433,6 +15433,10 @@
         }
       ]
     },
+    {
+      "name": "d2l-demo-table-view",
+      "path": "./components/view-switcher/demo/demo-table-view.js"
+    },
     {
       "name": "d2l-view-switcher-button",
       "path": "./components/view-switcher/view-switcher-button.js",
@@ -15440,12 +15444,12 @@
       "attributes": [
         {
           "name": "key",
-          "description": "REQUIRED: Key of the action",
+          "description": "REQUIRED: Key for the button",
           "type": "string"
         },
         {
           "name": "text",
-          "description": "REQUIRED: Button text",
+          "description": "REQUIRED: Text for the button",
           "type": "string"
         },
         {
@@ -15459,13 +15463,13 @@
         {
           "name": "key",
           "attribute": "key",
-          "description": "REQUIRED: Key of the action",
+          "description": "REQUIRED: Key for the button",
           "type": "string"
         },
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: Button text",
+          "description": "REQUIRED: Text for the button",
           "type": "string"
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.220.2",
+  "version": "3.221.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",