@brightspace-ui/core 3.42.0 → 3.43.0

package/components/dialog/dialog-mixin.js

@@ -76,6 +76,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._handleDropdownOpenClose = this._handleDropdownOpenClose.bind(this);
 		this._handleMvcDialogOpen = this._handleMvcDialogOpen.bind(this);
 		this._inIframe = false;
+		this._isDialogMixin = true;
 		this._isFullHeight = false;
 		this._height = 0;
 		this._left = 0;

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

@@ -71,6 +71,7 @@ class FormNestedDemo extends LitElement {
 				</div>
 				<d2l-floating-buttons always-float>
 					<d2l-button primary @click=${this._submit}>Save</d2l-button>
+					<d2l-button @click=${this._reset}>Reset</d2l-button>
 				</d2l-floating-buttons>
 			</d2l-form>
 		`;
@@ -85,6 +86,10 @@ class FormNestedDemo extends LitElement {
 		e.preventDefault();
 	}
 
+	_reset() {
+		if (this.shadowRoot) this.shadowRoot.querySelector('#root').resetValidation();
+	}
+
 	_submit() {
 		if (this.shadowRoot) this.shadowRoot.querySelector('#root').submit();
 	}

package/components/form/docs/form-element-mixin.md

@@ -18,6 +18,7 @@ invalid state.
 | `name` | String | The name of the form control. Submitted with the form as part of a name/value pair. |
 
 **Methods:**
+- `resetValidation()`: Resets any validation errors on the form element. Note that this does not reset any form element value.
 - `setFormValue(value)`: Sets the current value of the form control. Submitted with the form as part of a name/value pair. `value` may be a:
 	1. An `Object`: `{ 'key1': val, 'key2': val }`
 		- When an `Object` is provided, all keys-value pairs will be submitted. To avoid collision it is recommended that you prefix each key with the component's `name` property value.

package/components/form/docs/form.md

@@ -114,6 +114,7 @@ If you're looking to emulate native form element submission, `d2l-form-native` m
 ### Methods
 - `submit()`: Submits the form. This will first perform validation on all elements within the form including nested `d2l-form` elements.
   - **Note:** If validation succeeds, the form data will be aggregated and passed back to the caller via the `d2l-form-submit` event. It will not be submitted by the form itself.
+- `resetValidation()`: Resets the validation errors. Note that this does not reset any form values. Daylight dialog components (e.g., `d2l-dialog`) will automatically run this method on close.
 - `async validate()`: Validates the form and any nested `d2l-form` elements without submitting even if validation succeeds for all elements. Returns a `Map` mapping from an element to the list of error messages associated with it.
   - **Note:** The return value will include elements and errors from both the root form and any nested descendant forms.
 

package/components/form/form-element-mixin.js

@@ -227,6 +227,18 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		await this.updatedComplete;
 	}
 
+	resetValidation() {
+		this.invalid = false;
+		this.validationError = null;
+		this._errors = [];
+
+		this.childErrors.forEach((_, ele) => {
+			if (!isCustomFormElement(ele)) return;
+			ele.resetValidation();
+		});
+		this.childErrors = new Map();
+	}
+
 	setFormValue(formValue) {
 		this.formValue = formValue;
 	}

package/components/form/form.js

@@ -1,5 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
+import { findComposedAncestor } from '../../helpers/dom.js';
 import { FormMixin } from './form-mixin.js';
 
 /**
@@ -55,6 +56,12 @@ class Form extends FormMixin(LitElement) {
 		this._isSubForm = false;
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		this._setupDialogValidationReset();
+	}
+
 	render() {
 		let errorSummary = null;
 		if (this._isRootForm()) {
@@ -77,6 +84,26 @@ class Form extends FormMixin(LitElement) {
 		this._submitData(submitter);
 	}
 
+	resetValidation() {
+		const formElements = this._findFormElements();
+		for (const ele of formElements) {
+			if (this._hasSubForms(ele)) {
+				const forms = this._getSubForms(ele);
+				for (const form of forms) {
+					form.resetValidation();
+				}
+			} else {
+				if (isCustomFormElement(ele)) {
+					ele.resetValidation();
+				} else if (isNativeFormElement(ele)) {
+					this._displayValid(ele);
+				}
+			}
+		}
+		this._errors = new Map();
+		this._tooltips = new Map();
+	}
+
 	async submit() {
 		return this.requestSubmit(null);
 	}
@@ -165,6 +192,21 @@ class Form extends FormMixin(LitElement) {
 
 	}
 
+	_setupDialogValidationReset() {
+		const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-6979-dialog-close-reset-validation', true) ?? true;
+		if (!flag) return;
+
+		const dialogAncestor = findComposedAncestor(
+			this,
+			node => node?._isDialogMixin
+		);
+		if (!dialogAncestor) return;
+
+		dialogAncestor.addEventListener('d2l-dialog-close', () => {
+			this.resetValidation();
+		});
+	}
+
 	async _submitData(submitter) {
 		this._dirty = false;
 

package/package.json

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