@brightspace-ui/core 3.117.0 → 3.119.0

package/components/list/list-item-nav-button.js

@@ -0,0 +1,19 @@
+import { ListItemNavButtonMixin } from './list-item-nav-button-mixin.js';
+import { LitElement } from 'lit';
+
+/**
+ * A component for a "listitem" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.
+ * @slot - Default content placed inside of the component
+ * @slot illustration - Image associated with the list item located at the left of the item
+ * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
+ * @slot nested - Nested d2l-list element
+ */
+class ListItemNavButton extends ListItemNavButtonMixin(LitElement) {
+
+	render() {
+		return this._renderListItem();
+	}
+
+}
+
+customElements.define('d2l-list-item-nav-button', ListItemNavButton);

package/components/list/list.js

@@ -370,8 +370,8 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	}
 
 	_handleListItemPropertyChange(e) {
-		e.stopPropagation();
 		if (e.detail.name === 'color') {
+			e.stopPropagation();
 			if (e.detail.value) {
 				this._childHasColor = true;
 				this._listChildrenUpdatedSubscribers.updateSubscribers();
@@ -379,6 +379,46 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 				// if color has had its value removed then need to loop through all the items to determine if there are still others with colors
 				this._handleListItemNestedChange(e);
 			}
+		} else if (e.detail.name === 'current') {
+			if (this.slot === 'nested') return;
+			e.stopPropagation();
+
+			if (!e.detail.value) {
+				e.target.dispatchSetChildCurrentEvent(false);
+				return;
+			}
+
+			/**
+			 * When a nav item is set to current, do the following:
+			 * - If previous current item:
+			 *   - Set its current to FALSE
+			 *   	- This triggers the d2l-list-item-nav-set-child-current with value of false, causing
+			 * 		  the previous current item to set its aria-current to undefined if it is not the current item
+			 * - After the reset event has worked its way up OR if there is no previous current item:
+			 *   - Trigger the d2l-list-item-nav-set-child-current event with value of true, which sets all parent item aria-current to "location"
+			 */
+			const currentItems = this.querySelectorAll('[current]');
+			// length of 2 is fine as long as one is e.target and the other is the previous current item
+			if (currentItems.length > 2) {
+				console.warn('d2l-list: More than one list item has been set to current. This is not allowed and will cause unexpected behavior.');
+			}
+			const target = e.target;
+
+			let prevCurrent = false;
+			currentItems.forEach((item) => {
+				if (item === target) return;
+				prevCurrent = item;
+			});
+
+			if (prevCurrent) {
+				this.addEventListener('d2l-list-item-nav-set-child-current', (e) => {
+					e.stopPropagation();
+					target.dispatchSetChildCurrentEvent(true);
+				}, { once: true });
+				prevCurrent.current = false;
+			} else {
+				target.dispatchSetChildCurrentEvent(true);
+			}
 		}
 	}
 

package/components/validation/README.md

@@ -4,10 +4,10 @@
 The `d2l-validation-custom` component is used to add custom validation logic to native form elements like `input`, `select` and `textarea` or custom form elements created with the [`FormElementMixin`](../form/docs/form-element-mixin.md).
 
 **Native Form Elements:**
-- When attached to native form elements like `input`, `select` and `textarea`, both the `d2l-validation-custom` and native form element **must** be within a [`d2l-form`](../form/docs/form.md) or [`d2l-form-native`](../form/docs/form-native.md) for the validation custom to function.
+- When attached to native form elements like `input`, `select` and `textarea`, both the `d2l-validation-custom` and native form element **must** be within a [`d2l-form`](../form/docs/form.md) for the validation custom to function.
 
 **Custom Form Elements:**
-- When attached to custom form elements created with the [`FormElementMixin`](../form/docs/form-element-mixin.md), the `d2l-validation-custom` will function even if no [`d2l-form`](../form/docs/form.md) or [`d2l-form-native`](../form/docs/form-native.md) is present.
+- When attached to custom form elements created with the [`FormElementMixin`](../form/docs/form-element-mixin.md), the `d2l-validation-custom` will function even if no [`d2l-form`](../form/docs/form.md) is present.
 
 **Usage:**
 ```html

package/custom-elements.json

@@ -4759,10 +4759,6 @@
       "name": "d2l-form-dialog-demo",
       "path": "./components/form/demo/form-dialog-demo.js"
     },
-    {
-      "name": "d2l-form-native-demo",
-      "path": "./components/form/demo/form-native-demo.js"
-    },
     {
       "name": "d2l-form-panel-demo",
       "path": "./components/form/demo/form-panel-demo.js"
@@ -4778,100 +4774,6 @@
         }
       ]
     },
-    {
-      "name": "d2l-form-native",
-      "path": "./components/form/form-native.js",
-      "description": "A component that can be used to build sections containing interactive controls that are validated and submitted as a group.\nThese interactive controls are submitted using a native HTML form submission.",
-      "attributes": [
-        {
-          "name": "action",
-          "description": "The URL that processes the form submission.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "enctype",
-          "description": "If the value of the method attribute is post, enctype is the MIME type of the form submission.",
-          "type": "'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'",
-          "default": "\"application/x-www-form-urlencoded\""
-        },
-        {
-          "name": "method",
-          "description": "The HTTP method to submit the form with.",
-          "type": "'get'|'post'",
-          "default": "\"get\""
-        },
-        {
-          "name": "target",
-          "description": "Indicates where to display the response after submitting the form.",
-          "type": "'_self '|'_blank'|'_parent'|'_top'",
-          "default": "\"_self\""
-        },
-        {
-          "name": "track-changes",
-          "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "properties": [
-        {
-          "name": "action",
-          "attribute": "action",
-          "description": "The URL that processes the form submission.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "enctype",
-          "attribute": "enctype",
-          "description": "If the value of the method attribute is post, enctype is the MIME type of the form submission.",
-          "type": "'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'",
-          "default": "\"application/x-www-form-urlencoded\""
-        },
-        {
-          "name": "method",
-          "attribute": "method",
-          "description": "The HTTP method to submit the form with.",
-          "type": "'get'|'post'",
-          "default": "\"get\""
-        },
-        {
-          "name": "target",
-          "attribute": "target",
-          "description": "Indicates where to display the response after submitting the form.",
-          "type": "'_self '|'_blank'|'_parent'|'_top'",
-          "default": "\"_self\""
-        },
-        {
-          "name": "trackChanges",
-          "attribute": "track-changes",
-          "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "events": [
-        {
-          "name": "submit",
-          "description": "Dispatched when the form is submitted. Cancelling this event will prevent form submission."
-        },
-        {
-          "name": "formdata",
-          "description": "Dispatched after the entry list representing the form's data is constructed. This happens when the form is submitted just prior to submission. The form data can be obtained from the `detail`'s `formData` property."
-        },
-        {
-          "name": "d2l-form-dirty",
-          "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "The native and custom form elements that participate in validation and submission"
-        }
-      ]
-    },
     {
       "name": "d2l-form",
       "path": "./components/form/form.js",
@@ -4913,13 +4815,13 @@
           "name": "d2l-form-invalid",
           "description": "Dispatched when the form fails validation. The error map can be obtained from the `detail`'s `errors` property."
         },
-        {
-          "name": "d2l-form-submit",
-          "description": "Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property."
-        },
         {
           "name": "d2l-form-dirty",
           "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
+        },
+        {
+          "name": "d2l-form-submit",
+          "description": "Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property."
         }
       ],
       "slots": [
@@ -9492,6 +9394,291 @@
         }
       ]
     },
+    {
+      "name": "d2l-list-item-nav-button",
+      "path": "./components/list/list-item-nav-button.js",
+      "description": "A component for a \"listitem\" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.",
+      "attributes": [
+        {
+          "name": "current",
+          "description": "Whether the list item is the current page in a navigation context",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "button-disabled",
+          "description": "Disables the primary action button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
+        {
+          "name": "color",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
+          "type": "string"
+        },
+        {
+          "name": "no-primary-action",
+          "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'none'",
+          "default": "\"normal\""
+        },
+        {
+          "name": "selectable",
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "description": "**Selection:** Whether the item is selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drag-handle-text",
+          "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
+          "type": "string"
+        },
+        {
+          "name": "drop-text",
+          "description": "**Drag & drop:** Text to drag and drop",
+          "type": "string"
+        },
+        {
+          "name": "key",
+          "description": "**Selection:** Value to identify item if selectable",
+          "type": "string"
+        },
+        {
+          "name": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drop-nested",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expandable",
+          "description": "Whether to show the expand collapse toggle",
+          "type": "boolean"
+        },
+        {
+          "name": "expanded",
+          "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
+          "type": "boolean"
+        },
+        {
+          "name": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        },
+        {
+          "name": "labelled-by",
+          "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "current",
+          "attribute": "current",
+          "description": "Whether the list item is the current page in a navigation context",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "buttonDisabled",
+          "attribute": "button-disabled",
+          "description": "Disables the primary action button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dragTargetHandleOnly",
+          "attribute": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
+        {
+          "name": "color",
+          "attribute": "color",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
+          "type": "string"
+        },
+        {
+          "name": "first",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noPrimaryAction",
+          "attribute": "no-primary-action",
+          "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'none'",
+          "default": "\"normal\""
+        },
+        {
+          "name": "selectable",
+          "attribute": "selectable",
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "**Selection:** Whether the item is selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectionDisabled",
+          "attribute": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectionInfo"
+        },
+        {
+          "name": "dragHandleText",
+          "attribute": "drag-handle-text",
+          "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
+          "type": "string"
+        },
+        {
+          "name": "dropText",
+          "attribute": "drop-text",
+          "description": "**Drag & drop:** Text to drag and drop",
+          "type": "string"
+        },
+        {
+          "name": "key",
+          "attribute": "key",
+          "description": "**Selection:** Value to identify item if selectable",
+          "type": "string"
+        },
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dropNested",
+          "attribute": "drop-nested",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expandable",
+          "attribute": "expandable",
+          "description": "Whether to show the expand collapse toggle",
+          "type": "boolean"
+        },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
+          "type": "boolean"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-list-item-button-click",
+          "description": "Dispatched when the item's primary button action is clicked"
+        },
+        {
+          "name": "d2l-list-item-selected",
+          "description": "Dispatched when the component item is selected"
+        },
+        {
+          "name": "d2l-list-item-position-change",
+          "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
+        },
+        {
+          "name": "d2l-list-item-expand-collapse-toggled",
+          "description": "Dispatched whenever the list item expand state is toggled."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default content placed inside of the component"
+        },
+        {
+          "name": "illustration",
+          "description": "Image associated with the list item located at the left of the item"
+        },
+        {
+          "name": "actions",
+          "description": "Actions (e.g., button icons) associated with the listen item located at the right of the item"
+        },
+        {
+          "name": "nested",
+          "description": "Nested d2l-list element"
+        }
+      ]
+    },
     {
       "name": "d2l-list-item-placement-marker",
       "path": "./components/list/list-item-placement-marker.js"

package/package.json

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

package/components/form/demo/form-native-demo.js

@@ -1,80 +0,0 @@
-
-import '../../button/button.js';
-import '../../inputs/input-date.js';
-import '../../inputs/input-date-time-range.js';
-import '../../inputs/input-text.js';
-import '../../validation/validation-custom.js';
-import '../form-native.js';
-import { css, html, LitElement } from 'lit';
-import { inputStyles } from '../../inputs/input-styles.js';
-import { selectStyles } from '../../inputs/input-select-styles.js';
-
-class FormNativeDemo extends LitElement {
-
-	static get styles() {
-		return [inputStyles, selectStyles, css`
-			:first-child.d2l-form-demo-container {
-				margin-top: 18px;
-			}
-			.d2l-form-demo-container {
-				margin-bottom: 10px;
-			}
-		`];
-	}
-
-	render() {
-		return html`
-			<d2l-form-native>
-				<div class="d2l-form-demo-container">
-					<d2l-input-text label="Name" type="text" name="name" required minlength="4" maxlength="8"></d2l-input-text>
-				</div>
-				<div class="d2l-form-demo-container">
-					<d2l-input-text label="Email" name="email" type="email"></d2l-input-text>
-				</div>
-				<div class="d2l-form-demo-container">
-					<d2l-validation-custom for="password" @d2l-validation-custom-validate=${this._validatePassword} failure-text="Expected hunter2 or 12345" ></d2l-validation-custom>
-					<d2l-input-text label="Password" id="password" name="password" required type="password"></d2l-input-text>
-				</div>
-				<fieldset class="d2l-form-demo-container">
-					<legend>Choose your favorite monster</legend>
-					<input type="radio" id="kraken" name="monster" value="kraken">
-					<label for="kraken">Kraken</label><br />
-					<input type="radio" id="sasquatch" name="monster" value="sasquatch">
-					<label for="sasquatch">Sasquatch</label><br />
-				</fieldset>
-				<div class="d2l-form-demo-container">
-					<label for="pet-select">Favorite Pet</label><br />
-					<select class="d2l-input-select" name="pets" id="pet-select" required>
-						<option value="">--Please choose an option--</option>
-						<option value="porpoise">Porpoise</option>
-						<option value="house hippo">House Hippo</option>
-						<option value="spiker monkey">Spider Monkey</option>
-						<option value="capybara">Capybara</option>
-					</select>
-				</div>
-				<d2l-input-date label="Date" name="my-date" required></d2l-input-date>
-				<div class="d2l-form-demo-container">
-					<label for="story">Tell us your story</label>
-						<textarea class="d2l-input" minlength="20" id="story" name="story" rows="5" cols="33">It was...</textarea>
-					</label>
-				</div>
-				<d2l-input-date-time-range label="Assignment Dates" required min-value="2018-08-27T12:30:00Z" max-value="2018-09-30T12:30:00Z"></d2l-input-date-time-range>
-				<div class="d2l-form-demo-container">
-					<label for="file">Super Secret File</label><br />
-					<input type="file" id="file" name="super-secret-file">
-				</div>
-				<button name="action" value="save" type="submit" @click=${this._onClick}>Save</button>
-			</d2l-form-native>
-		`;
-	}
-
-	_onClick(e) {
-		if (this.shadowRoot) this.shadowRoot.querySelector('d2l-form-native').requestSubmit(e.target);
-	}
-
-	_validatePassword(e) {
-		e.detail.resolve(e.detail.forElement.value === 'hunter2' || e.detail.forElement.value === '12345');
-	}
-
-}
-customElements.define('d2l-form-native-demo', FormNativeDemo);

package/components/form/demo/form-native.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta charset="UTF-8">
-	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script type="module">
-		import '../../demo/demo-page.js';
-		import './form-native-demo.js';
-	</script>
-</head>
-
-<body unresolved>
-
-	<d2l-demo-page page-title="d2l-form-native">
-
-		<h2>Basic</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-form-native-demo></d2l-form-native-demo>
-			</template>
-		</d2l-demo-snippet>
-
-	</d2l-demo-page>
-
-</body>
-
-</html>