@brightspace-ui/core 1.192.1 → 1.193.0

package/components/form/docs/form.md

@@ -112,6 +112,7 @@ If you're looking to emulate native form element submission, `d2l-form-native` m
 ### Events
 - `d2l-form-submit`: Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property.
 - `d2l-form-invalid`: Dispatched when the form fails validation. The error map can be obtained from the `detail`'s `errors` property.
+- `d2l-form-dirty`: Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
 <!-- docs: end hidden content -->
 
 ### Methods
@@ -234,6 +235,7 @@ If you're looking to submit form data via your own API calls or nest multiple fo
 ### Events
 - `submit`: Dispatched when the form is submitted. Cancelling this event will prevent form submission.
 - `formdata`: 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.
+- `d2l-form-dirty`: Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
 <!-- docs: end hidden content -->
 
 ### Methods

package/components/form/form-mixin.js

@@ -100,13 +100,19 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
 		e.stopPropagation();
 		this._updateErrors(e.target, e.detail.errors);
 	}
+
 	async _onFormElementChange(e) {
 		const ele = e.target;
+
+		if ((isNativeFormElement(ele) || isCustomFormElement(ele)) && e.type !== 'focusout') {
+			this._dirty = true;
+			this.dispatchEvent(new CustomEvent('d2l-form-dirty'));
+		}
+
 		if (!isNativeFormElement(ele)) {
 			return;
 		}
 		e.stopPropagation();
-		this._dirty = true;
 		const errors = await this._validateFormElement(ele, e.type === 'focusout');
 		this._updateErrors(ele, errors);
 	}

package/components/form/form-native.js

@@ -8,6 +8,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
  * These interactive controls are submitted using a native HTML form submission.
  * @slot - The native and custom form elements that participate in validation and submission
  * @fires submit - Dispatched when the form is submitted. Cancelling this event will prevent form submission.
+ * @fires d2l-form-dirty - Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
  */
 class FormNative extends FormMixin(LitElement) {
 

package/components/form/form.js

@@ -6,6 +6,7 @@ import { FormMixin } from './form-mixin.js';
  * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
  * Values of these interactive controls are aggregated but the user is responsible for handling submission via the @d2l-form-submit event.
  * @slot - The native and custom form elements that participate in validation and submission
+ * @fires d2l-form-dirty - Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
  */
 class Form extends FormMixin(LitElement) {
 

package/custom-elements.json

@@ -3135,6 +3135,10 @@
           "name": "submit",
           "description": "Dispatched when the form is submitted. Cancelling this event will prevent form submission."
         },
+        {
+          "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": "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."
@@ -3180,6 +3184,10 @@
         }
       ],
       "events": [
+        {
+          "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-invalid",
           "description": "Dispatched when the form fails validation. The error map can be obtained from the `detail`'s `errors` property."

package/package.json

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