@brightspace-ui/core 3.117.0 → 3.118.0

package/components/form/README.md

@@ -2,16 +2,15 @@
 
 There are several components and mixins available to help make working with forms easier.
 
-## Validating and Submitting Forms Using `<d2l-form>` and `<d2l-form-native>`
+## Validating and Submitting Forms Using `<d2l-form>`
 
-These two components behave much like a native `<form>` element, grouping nested form elements together and controlling how their data is validated and submitted. Unlike native `<form>`s, they support our custom form elements.
+Much like a native `<form>` element, `<d2l-form>` groups nested form elements together and controls how their data is validated and submitted. Unlike native `<form>`s, it supports our custom form elements.
 
 - [d2l-form](docs/form.md#form-d2l-form): supports aggregation of nested forms for validation and submission
-- [d2l-form-native](docs/form.md#native-form-d2l-form-native): emulates how a native `<form>` submits, but supports our custom form elements
 
 ## Custom Elements in Forms
 
-To allow custom elements to participate in `<d2l-form>` and `<d2l-form-native>` submission and validation, use the [FormElementMixin](docs/form-element-mixin.md).
+To allow custom elements to participate in `<d2l-form>` submission and validation, use the [FormElementMixin](docs/form-element-mixin.md).
 
 If your custom element uses other nested *custom* form elements internally, read about [form element nesting](docs/form-element-nesting.md).
 

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

@@ -1,14 +1,14 @@
 # FormElementMixin
 
-The `FormElementMixin` allows the user to turn a custom web component into a form element.
+The `FormElementMixin` allows custom web components to participate as a form element.
 
 This means that the component will be able to:
 1. Perform live self-validation when being edited.
-1. Participate in validation and submission when added to `d2l-form` or `d2l-form-native`.
+1. Participate in validation and submission when added to `d2l-form`.
 
-All custom form elements must provide a form value that will be submitted during `d2l-form` or `d2l-form-native` submission.
-However, participating in validation is optional. Some custom form elements may not need validation because they have no
-invalid state.
+All custom form elements must provide a form value that will be submitted during `d2l-form` submission.
+
+Participating in validation is, however, optional. Some custom form elements may not need validation because they have no invalid state.
 
 ## Form Value
 
@@ -24,7 +24,6 @@ invalid state.
 		- 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.
 	1. A single value: `'my-value'`
 		- When a single value is provided a key-value pair will be submitted with the component's `name` property value as the key. If `name` does not have a value, the value will not be submitted.
-	- **Note:** When using `d2l-form-native` all values will be converted to `String`s. Complex value may be used with `d2l-form` but should only be used if absolutely required to maintain compatibility with `d2l-form-native`.
 
 ## Validation
 
@@ -62,7 +61,6 @@ invalid state.
 
 ## Usage
 
-
 ```javascript
 import { FormElementMixin } from '@brightspace-ui/core/form/form-element-mixin.js';
 

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

@@ -199,7 +199,7 @@ render() {
 
 **8. Support Validate:**
 
-The last step is to ensure that calling validate on the parent will result in the nested components being validated. This is not required for self-validation but is important to ensure your custom form element works properly when used inside a [`d2l-form`](../form.md) or [`d2l-form-native`](../form-native.md).
+The last step is to ensure that calling validate on the parent will result in the nested components being validated. This is not required for self-validation but is important to ensure your custom form element works properly when used inside a [`d2l-form`].
 
 ```javascript
 async validate() {

package/components/form/docs/form.md

@@ -1,4 +1,4 @@
-# Form Components
+# Form [d2l-form]
 
 <!-- docs: demo -->
 ```html
@@ -34,12 +34,6 @@
 </d2l-form>
 ```
 
-There are two form components that can be used with our custom elements: `d2l-form` and `d2l-form-native`. These are useful in the following scenarios:
-- `d2l-form`: when submitting form data via your own API calls OR when nesting multiple forms within each other
-- `d2l-form-native`: when emulating native form element submission
-
-## Form [d2l-form]
-
 The `d2l-form` component can be used to build sections containing interactive controls that are validated and submitted as a group.
 
 It differs from the native HTML `form` element in 4 ways:
@@ -48,8 +42,6 @@ It differs from the native HTML `form` element in 4 ways:
 1. `d2l-form` elements can be nested. If a parent form is validated or submitted it will also trigger the corresponding action for descendent `d2l-form`s unless they explicitly opt-out using `no-nesting`. This means that a `d2l-form` will only pass validation if it and all of its nested descendants pass validation.
 1. Submission is not handled directly by `d2l-form`. Instead, all form data will be aggregated and passed back to the caller via an event. The caller is then responsible for submitting the data.
 
-If you're looking to emulate native form element submission, `d2l-form-native` may be more appropriate.
-
 <!-- docs: demo code properties name:d2l-form sandboxTitle:'Form' autoSize:false display:block size:large -->
 ```html
 <script type="module">
@@ -174,68 +166,3 @@ In the above example, calling `submit` on form `#a` will cause forms `#a` and `#
 - `d2l-form#a` will be submitted because submit was called on it directly.
 - `d2l-form#b` will be submitted because it is nested directly within `#a`'s slot.
 - `d2l-form#root`, `d2l-form#c` and the `d2l-form` within the shadow root of `#d` will _**not**_ be submitted because they are ancestors of `#a` rather than descendants.
-
-## Native Form [d2l-form-native]
-
-The `d2l-form-native` component can be used to build sections containing interactive controls that are validated and submitted as a group.
-
-It differs from the native HTML `form` element in 2 ways:
-1. It supports custom form elements made using the [`FormElementMixin`](./form-element-mixin.md) in addition to native form elements like `input`, `select` and `textarea`.
-1. Upon validation, it will display an error summary that contains error messages for any elements that failed validation.
-
-If you're looking to submit form data via your own API calls or nest multiple forms within each other, `d2l-form` may be more appropriate.
-
-<!-- docs: demo code properties name:d2l-form-native sandboxTitle:'Native Form' autoSize:false display:block size:medium -->
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/form/form-native.js';
-  import '@brightspace-ui/core/components/inputs/input-text.js';
-
-  const button = document.querySelector('button');
-  const form = document.querySelector('d2l-form-native');
-  button.addEventListener('click', () => {
-    form.submit();
-  });
-
-  function handleSubmission(e) {
-    const { formData } = e.detail;
-    const email = formData.get('email');
-    const pets = formData.get('pets');
-    console.log('Form submission data: email = ' + email + ', pets = ' + pets);
-  }
-  form.addEventListener('formdata', (e) => handleSubmission(e));
-</script>
-<d2l-form-native>
-  <d2l-input-text required label="Email" name="email" type="email"></d2l-input-text>
-  <select class="d2l-input-select" name="pets" 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>
-  <button name="action" value="save" type="submit">Save</button>
-</d2l-form-native>
-```
-
-<!-- docs: start hidden content -->
-### Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `action` | String | The URL that processes the form submission. |
-| `enctype` | default: `"application/x-www-form-urlencoded"`<br>`"multipart/form-data"`<br>`"text/plain"` | If the value of the method attribute is post, enctype is the MIME type of the form submission. |
-| `method` | default: `"get"`<br>`"post"` | The URL that processes the form submission. |
-| `target` | default: `"_self"`<br>`"_blank"`<br>`"_parent"`<br>`"_top"` | Indicates where to display the response after submitting the form. |
-| `track-changes` | Boolean, default: `false` | Indicates that the form should interrupt and warn on navigation if the user has unsaved changes. |
-
-### 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
-- `submit()`: Submits the form to the server. This will first perform validation on all elements within the form. Submission will only happen if validation succeeds.
-- `requestSubmit(submitter)`: Requests that the form be submitted using the specified submit button and its corresponding configuration. A `button`'s value is only submitted if that button is both part of the form and the `submitter`.
-- `async validate()`: Validates the form without submitting even if validation succeeds. This returns a `Map` mapping from an element to the list of error messages associated with it.

package/components/form/form.js

@@ -1,7 +1,13 @@
+import './form-errory-summary.js';
+import '../tooltip/tooltip.js';
+import '../link/link.js';
 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';
+import { getComposedActiveElement } from '../../helpers/focus.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { localizeFormElement } from './form-element-localize-helper.js';
 
 /**
  * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
@@ -9,7 +15,7 @@ import { FormMixin } from './form-mixin.js';
  * @slot - The native and custom form elements that participate in validation and submission
  * @fires d2l-form-connect - Internal event
  */
-class Form extends FormMixin(LitElement) {
+class Form extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
@@ -20,6 +26,13 @@ class Form extends FormMixin(LitElement) {
 			 * @type {boolean}
 			 */
 			noNesting: { type: Boolean, attribute: 'no-nesting', reflect: true },
+			/**
+			 * Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.
+			 * @type {boolean}
+			 */
+			trackChanges: { type: Boolean, attribute: 'track-changes', reflect: true },
+			_errors: { type: Object },
+			_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
 		};
 	}
 
@@ -39,21 +52,37 @@ class Form extends FormMixin(LitElement) {
 
 	constructor() {
 		super();
+		this.trackChanges = false;
+		this._errors = new Map();
 		this._isSubForm = false;
 		this._nestedForms = new Map();
+		this._firstUpdateResolve = null;
+		this._firstUpdatePromise = new Promise((resolve) => {
+			this._firstUpdateResolve = resolve;
+		});
+		this._tooltips = new Map();
+		this._validationCustoms = new Set();
+
+		this._onUnload = this._onUnload.bind(this);
+		this._onNativeSubmit = this._onNativeSubmit.bind(this);
 
 		/** @ignore */
 		this.addEventListener('d2l-form-connect', this._onFormConnect);
+		this.addEventListener('d2l-form-errors-change', this._onErrorsChange);
+		this.addEventListener('d2l-form-element-errors-change', this._onErrorsChange);
+		this.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
+		window.addEventListener('beforeunload', this._onUnload);
 		/** @ignore */
 		this._isSubForm = !this.dispatchEvent(new CustomEvent('d2l-form-connect', { bubbles: true, composed: true, cancelable: true }));
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		window.removeEventListener('beforeunload', this._onUnload);
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-form-disconnect'));
 		this._isSubForm = false;
@@ -62,6 +91,10 @@ class Form extends FormMixin(LitElement) {
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
+		this.addEventListener('change', this._onFormElementChange);
+		this.addEventListener('input', this._onFormElementChange);
+		this.addEventListener('focusout', this._onFormElementChange);
+		this._firstUpdateResolve();
 		this._setupDialogValidationReset();
 	}
 
@@ -79,6 +112,13 @@ class Form extends FormMixin(LitElement) {
 		`;
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('_errors')) {
+			this._hasErrors = this._errors.size > 0;
+		}
+	}
+
 	async requestSubmit(submitter) {
 		const errors = await this.validate();
 		if (errors.size > 0) {
@@ -145,6 +185,34 @@ class Form extends FormMixin(LitElement) {
 		return flattenedErrorMap;
 	}
 
+	_displayInvalid(ele, message) {
+		let tooltip = this._tooltips.get(ele);
+		if (!tooltip) {
+			tooltip = document.createElement('d2l-tooltip');
+			tooltip.for = ele.id;
+			tooltip.align = 'start';
+			tooltip.state = 'error';
+			ele.parentNode.append(tooltip);
+			this._tooltips.set(ele, tooltip);
+
+			tooltip.appendChild(document.createTextNode(message));
+		} else if (tooltip.innerText.trim() !== message.trim()) {
+			tooltip.textContent = '';
+			tooltip.appendChild(document.createTextNode(message));
+			tooltip.updatePosition();
+		}
+		ele.setAttribute('aria-invalid', 'true');
+	}
+
+	_displayValid(ele) {
+		const tooltip = this._tooltips.get(ele);
+		if (tooltip) {
+			this._tooltips.delete(ele);
+			tooltip.remove();
+		}
+		ele.setAttribute('aria-invalid', 'false');
+	}
+
 	_findFormElements() {
 		const isFormElementPredicate = ele => this._hasSubForms(ele);
 		const visitChildrenPredicate = ele => !this._hasSubForms(ele);
@@ -163,6 +231,14 @@ class Form extends FormMixin(LitElement) {
 		return !this._isSubForm || this.noNesting;
 	}
 
+	_onErrorsChange(e) {
+		if (e.target === this) {
+			return;
+		}
+		e.stopPropagation();
+		this._updateErrors(e.target, e.detail.errors);
+	}
+
 	_onFormConnect(e) {
 		if (e.target === this) {
 			return;
@@ -195,6 +271,37 @@ class Form extends FormMixin(LitElement) {
 
 	}
 
+	async _onFormElementChange(e) {
+		const ele = e.target;
+
+		if ((isNativeFormElement(ele) || isCustomFormElement(ele)) && e.type !== 'focusout') {
+			this._dirty = true;
+			/** Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not. */
+			this.dispatchEvent(new CustomEvent('d2l-form-dirty'));
+		}
+
+		if (!isNativeFormElement(ele)) {
+			return;
+		}
+		e.stopPropagation();
+		const errors = await this._validateFormElement(ele, e.type === 'focusout');
+		this._updateErrors(ele, errors);
+	}
+
+	_onNativeSubmit(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		const submitter = e.submitter || getComposedActiveElement();
+		this.requestSubmit(submitter);
+	}
+
+	_onUnload(e) {
+		if (this.trackChanges && this._dirty) {
+			e.preventDefault();
+			e.returnValue = false;
+		}
+	}
+
 	_setupDialogValidationReset() {
 		const dialogAncestor = findComposedAncestor(
 			this,
@@ -229,5 +336,59 @@ class Form extends FormMixin(LitElement) {
 		this.dispatchEvent(new CustomEvent('d2l-form-submit', { detail: { formData } }));
 	}
 
+	_updateErrors(ele, errors) {
+
+		if (!this._errors.has(ele)) {
+			return false;
+		}
+		if (Array.from(errors).length === 0) {
+			this._errors.delete(ele);
+		} else {
+			this._errors.set(ele, errors);
+		}
+		const detail = { bubbles: true, composed: true, detail: { errors: this._errors } };
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-form-errors-change', detail));
+		this.requestUpdate('_errors');
+		return true;
+	}
+
+	async _validateFormElement(ele, showNewErrors) {
+		// if validation occurs before we've rendered,
+		// localization may not have loaded yet
+		await this._firstUpdatePromise;
+		ele.id = ele.id || getUniqueId();
+		if (isCustomFormElement(ele)) {
+			return ele.validate(showNewErrors);
+		} else if (isNativeFormElement(ele)) {
+			const customs = [...this._validationCustoms].filter(custom => custom.forElement === ele);
+			const results = await Promise.all(customs.map(custom => custom.validate()));
+			const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);
+			if (!ele.checkValidity()) {
+				const validationMessage = localizeFormElement(this.localize.bind(this), ele);
+				errors.unshift(validationMessage);
+			}
+			if (errors.length > 0 && (showNewErrors || ele.getAttribute('aria-invalid') === 'true')) {
+				this._displayInvalid(ele, errors[0]);
+			} else {
+				this._displayValid(ele);
+			}
+			return errors;
+		}
+		return [];
+	}
+
+	_validationCustomConnected(e) {
+		e.stopPropagation();
+		const custom = e.composedPath()[0];
+		this._validationCustoms.add(custom);
+
+		const onDisconnect = () => {
+			custom.removeEventListener('d2l-validation-custom-disconnected', onDisconnect);
+			this._validationCustoms.delete(custom);
+		};
+		custom.addEventListener('d2l-validation-custom-disconnected', onDisconnect);
+	}
+
 }
 customElements.define('d2l-form', Form);

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": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.117.0",
+  "version": "3.118.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>

package/components/form/form-mixin.js

@@ -1,202 +0,0 @@
-import './form-errory-summary.js';
-import '../tooltip/tooltip.js';
-import '../link/link.js';
-import { isCustomFormElement, isNativeFormElement } from './form-helper.js';
-import { getComposedActiveElement } from '../../helpers/focus.js';
-import { getUniqueId } from '../../helpers/uniqueId.js';
-import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { localizeFormElement } from './form-element-localize-helper.js';
-
-export const FormMixin = superclass => class extends LocalizeCoreElement(superclass) {
-
-	static get properties() {
-		return {
-			/**
-			 * Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.
-			 * @type {boolean}
-			 */
-			trackChanges: { type: Boolean, attribute: 'track-changes', reflect: true },
-			_errors: { type: Object },
-			_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
-		};
-	}
-
-	constructor() {
-		super();
-		this._onUnload = this._onUnload.bind(this);
-		this._onNativeSubmit = this._onNativeSubmit.bind(this);
-
-		this.trackChanges = false;
-		this._errors = new Map();
-		this._firstUpdateResolve = null;
-		this._firstUpdatePromise = new Promise((resolve) => {
-			this._firstUpdateResolve = resolve;
-		});
-		this._tooltips = new Map();
-		this._validationCustoms = new Set();
-
-		this.addEventListener('d2l-form-errors-change', this._onErrorsChange);
-		this.addEventListener('d2l-form-element-errors-change', this._onErrorsChange);
-		this.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		window.addEventListener('beforeunload', this._onUnload);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		window.removeEventListener('beforeunload', this._onUnload);
-	}
-
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-		this.addEventListener('change', this._onFormElementChange);
-		this.addEventListener('input', this._onFormElementChange);
-		this.addEventListener('focusout', this._onFormElementChange);
-		this._firstUpdateResolve();
-	}
-
-	willUpdate(changedProperties) {
-		super.willUpdate(changedProperties);
-		if (changedProperties.has('_errors')) {
-			this._hasErrors = this._errors.size > 0;
-		}
-	}
-
-	// eslint-disable-next-line no-unused-vars
-	async requestSubmit(submitter) {
-		throw new Error('FormMixin.requestSubmit must be overridden');
-	}
-
-	async submit() {
-		throw new Error('FormMixin.submit must be overridden');
-	}
-
-	async validate() {
-		throw new Error('FormMixin.validate must be overridden');
-	}
-
-	_displayInvalid(ele, message) {
-		let tooltip = this._tooltips.get(ele);
-		if (!tooltip) {
-			tooltip = document.createElement('d2l-tooltip');
-			tooltip.for = ele.id;
-			tooltip.align = 'start';
-			tooltip.state = 'error';
-			ele.parentNode.append(tooltip);
-			this._tooltips.set(ele, tooltip);
-
-			tooltip.appendChild(document.createTextNode(message));
-		} else if (tooltip.innerText.trim() !== message.trim()) {
-			tooltip.textContent = '';
-			tooltip.appendChild(document.createTextNode(message));
-			tooltip.updatePosition();
-		}
-		ele.setAttribute('aria-invalid', 'true');
-	}
-
-	_displayValid(ele) {
-		const tooltip = this._tooltips.get(ele);
-		if (tooltip) {
-			this._tooltips.delete(ele);
-			tooltip.remove();
-		}
-		ele.setAttribute('aria-invalid', 'false');
-	}
-
-	_onErrorsChange(e) {
-		if (e.target === this) {
-			return;
-		}
-		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;
-			/** Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not. */
-			this.dispatchEvent(new CustomEvent('d2l-form-dirty'));
-		}
-
-		if (!isNativeFormElement(ele)) {
-			return;
-		}
-		e.stopPropagation();
-		const errors = await this._validateFormElement(ele, e.type === 'focusout');
-		this._updateErrors(ele, errors);
-	}
-
-	_onNativeSubmit(e) {
-		e.preventDefault();
-		e.stopPropagation();
-		const submitter = e.submitter || getComposedActiveElement();
-		this.requestSubmit(submitter);
-	}
-
-	_onUnload(e) {
-		if (this.trackChanges && this._dirty) {
-			e.preventDefault();
-			e.returnValue = false;
-		}
-	}
-
-	_updateErrors(ele, errors) {
-
-		if (!this._errors.has(ele)) {
-			return false;
-		}
-		if (Array.from(errors).length === 0) {
-			this._errors.delete(ele);
-		} else {
-			this._errors.set(ele, errors);
-		}
-		const detail = { bubbles: true, composed: true, detail: { errors: this._errors } };
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent('d2l-form-errors-change', detail));
-		this.requestUpdate('_errors');
-		return true;
-	}
-
-	async _validateFormElement(ele, showNewErrors) {
-		// if validation occurs before we've rendered,
-		// localization may not have loaded yet
-		await this._firstUpdatePromise;
-		ele.id = ele.id || getUniqueId();
-		if (isCustomFormElement(ele)) {
-			return ele.validate(showNewErrors);
-		} else if (isNativeFormElement(ele)) {
-			const customs = [...this._validationCustoms].filter(custom => custom.forElement === ele);
-			const results = await Promise.all(customs.map(custom => custom.validate()));
-			const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);
-			if (!ele.checkValidity()) {
-				const validationMessage = localizeFormElement(this.localize.bind(this), ele);
-				errors.unshift(validationMessage);
-			}
-			if (errors.length > 0 && (showNewErrors || ele.getAttribute('aria-invalid') === 'true')) {
-				this._displayInvalid(ele, errors[0]);
-			} else {
-				this._displayValid(ele);
-			}
-			return errors;
-		}
-		return [];
-	}
-
-	_validationCustomConnected(e) {
-		e.stopPropagation();
-		const custom = e.composedPath()[0];
-		this._validationCustoms.add(custom);
-
-		const onDisconnect = () => {
-			custom.removeEventListener('d2l-validation-custom-disconnected', onDisconnect);
-			this._validationCustoms.delete(custom);
-		};
-		custom.addEventListener('d2l-validation-custom-disconnected', onDisconnect);
-	}
-
-};

package/components/form/form-native.js

@@ -1,148 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { findFormElements, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
-import { FormMixin } from './form-mixin.js';
-import { getUniqueId } from '../../helpers/uniqueId.js';
-
-/**
- * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
- * 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.
- */
-class FormNative extends FormMixin(LitElement) {
-
-	static get properties() {
-		return {
-			/**
-			 * The URL that processes the form submission.
-			 * @type {string}
-			 */
-			action: { type: String },
-			/**
-			 * 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'}
-			 */
-			enctype: { type: String },
-			/**
-			 * The HTTP method to submit the form with.
-			 * @type {'get'|'post'}
-			 */
-			method: { type: String },
-			/**
-			 * Indicates where to display the response after submitting the form.
-			 * @type {'_self '|'_blank'|'_parent'|'_top'}
-			 */
-			target: { type: String },
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
-
-	constructor() {
-		super();
-		this.action = '';
-		this.enctype = 'application/x-www-form-urlencoded';
-		this.method = 'get';
-		this.target = '_self';
-	}
-
-	render() {
-		const errors = [...this._errors]
-			.filter(([, eleErrors]) => eleErrors.length > 0)
-			.map(([ele, eleErrors]) => ({ href: `#${ele.id}`, message: eleErrors[0], onClick: () => ele.focus() }));
-		return html`
-			<d2l-form-error-summary .errors=${errors}></d2l-form-error-summary>
-			<slot></slot>
-		`;
-	}
-
-	shouldUpdate(changedProperties) {
-		if (!super.shouldUpdate(changedProperties)) {
-			return false;
-		}
-		const ignoredProps = new Set(['action', 'enctype', 'method', 'target']);
-		return [...changedProperties].filter(([prop]) => !ignoredProps.has(prop)).length > 0;
-	}
-
-	async requestSubmit(submitter) {
-		const errors = await this.validate();
-		if (errors.size > 0) {
-			return;
-		}
-		this._dirty = false;
-
-		const form = document.createElement('form');
-		form.addEventListener('formdata', this._onFormData);
-		form.id = getUniqueId();
-		form.action = this.action;
-		form.enctype = this.enctype;
-		form.method = this.method;
-		form.target = this.target;
-		this.appendChild(form);
-
-		let customFormData = {};
-		const formElements = findFormElements(this);
-		for (const ele of formElements) {
-			const eleData = getFormElementData(ele, submitter);
-			const isCustom = isCustomFormElement(ele);
-			if (isCustom || ele === submitter) {
-				customFormData = { ...customFormData, ...eleData };
-			}
-			if (!isCustom && isNativeFormElement(ele)) {
-				ele.setAttribute('form', form.id);
-			}
-		}
-		for (const entry of Object.entries(customFormData)) {
-			const input = document.createElement('input');
-			input.type = 'hidden';
-			input.name = entry[0];
-			input.value = entry[1];
-			form.appendChild(input);
-		}
-		const submit = this.dispatchEvent(new CustomEvent('submit', { bubbles: true, cancelable: true }));
-		/** 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. */
-		this.dispatchEvent(new CustomEvent('formdata', { detail: { formData: new FormData(form) } }));
-		if (submit) {
-			form.submit();
-		}
-		form.remove();
-	}
-
-	async submit() {
-		return this.requestSubmit(null);
-	}
-
-	async validate() {
-		let errors = [];
-		const errorMap = new Map();
-		const formElements = findFormElements(this);
-		for (const ele of formElements) {
-			const eleErrors = await this._validateFormElement(ele, true);
-			if (eleErrors.length > 0) {
-				errors = [...errors, ...eleErrors];
-				errorMap.set(ele, eleErrors);
-			}
-		}
-		this._errors = errorMap;
-		if (this.shadowRoot && errorMap.size > 0) {
-			const errorSummary = this.shadowRoot.querySelector('d2l-form-error-summary');
-			this.updateComplete.then(() => errorSummary.focus());
-		}
-		return errorMap;
-	}
-
-	_onFormData(e) {
-		e.stopPropagation();
-	}
-
-}
-customElements.define('d2l-form-native', FormNative);