@brightspace-ui/core 3.117.0 → 3.119.0

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);