@brightspace-ui/core 3.158.1 → 3.159.0

package/components/form/{form-errory-summary.js → form-error-summary.js}

@@ -9,7 +9,9 @@ class FormErrorSummary extends LocalizeCoreElement(LitElement) {
 	static get properties() {
 		return {
 			errors: { type: Object, attribute: false },
-			_expanded: { type: Boolean, attribute: false }
+			_expanded: { type: Boolean, attribute: false },
+			_hasBottomMargin: { type: Boolean, attribute: '_has-bottom-margin', reflect: true },
+			_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
 		};
 	}
 
@@ -19,10 +21,12 @@ class FormErrorSummary extends LocalizeCoreElement(LitElement) {
 			:host {
 				display: block;
 			}
-
 			:host([hidden]) {
 				display: none;
 			}
+			:host([_has-bottom-margin][_has-errors]) {
+				margin-block-end: 1rem;
+			}
 
 			.d2l-form-error-summary-header {
 				cursor: pointer;
@@ -54,6 +58,8 @@ class FormErrorSummary extends LocalizeCoreElement(LitElement) {
 		super();
 		this.errors = [];
 		this._expanded = true;
+		this._hasBottomMargin = false;
+		this._hasErrors = false;
 	}
 
 	render() {
@@ -82,6 +88,13 @@ class FormErrorSummary extends LocalizeCoreElement(LitElement) {
 		return this.errors.length > 0 ? errorSummary : nothing;
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('errors')) {
+			this._hasErrors = this.errors.length > 0;
+		}
+	}
+
 	async focus() {
 		if (this.errors.length === 0) {
 			super.focus();

package/components/form/form-helper.js

@@ -31,7 +31,8 @@ const _findFormElementsHelper = (ele, eles, isFormElementPredicate, visitChildre
 		eles.push(ele);
 	}
 	if (visitChildrenPredicate(ele)) {
-		for (const child of ele.children) {
+		const children = ele.tagName === 'SLOT' && ['primary', 'secondary'].includes(ele.name) ? ele.assignedNodes() : ele.children;
+		for (const child of children) {
 			_findFormElementsHelper(child, eles, isFormElementPredicate, visitChildrenPredicate);
 		}
 	}

package/components/form/form.js

@@ -1,4 +1,4 @@
-import './form-errory-summary.js';
+import './form-error-summary.js';
 import '../tooltip/tooltip.js';
 import '../link/link.js';
 import { css, html, LitElement } from 'lit';
@@ -34,6 +34,11 @@ class Form extends LocalizeCoreElement(LitElement) {
 			 * @type {boolean}
 			 */
 			trackChanges: { type: Boolean, attribute: 'track-changes', reflect: true },
+			/**
+			 * Id for an alternative error summary element
+			 * @type {string}
+			 */
+			summaryId: { type: String, attribute: 'summary-id' },
 			_errors: { type: Object },
 			_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
 		};
@@ -56,6 +61,7 @@ class Form extends LocalizeCoreElement(LitElement) {
 	constructor() {
 		super();
 		this.trackChanges = false;
+		this.summaryId = null;
 		this._errors = new Map();
 		this._isSubForm = false;
 		this._nestedForms = new Map();
@@ -63,6 +69,7 @@ class Form extends LocalizeCoreElement(LitElement) {
 		this._firstUpdatePromise = new Promise((resolve) => {
 			this._firstUpdateResolve = resolve;
 		});
+		this._hasErrors = false;
 		this._tooltips = new Map();
 		this._validationCustoms = new Set();
 
@@ -76,6 +83,12 @@ class Form extends LocalizeCoreElement(LitElement) {
 		this.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
 	}
 
+	get errorSummary() {
+		return [...flattenMap(this._errors)]
+			.filter(([, eleErrors]) => eleErrors.length > 0)
+			.map(([ele, eleErrors]) => ({ href: `#${ele.id}`, message: eleErrors[0], onClick: () => ele.focus() }));
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		window.addEventListener('beforeunload', this._onUnload);
@@ -103,11 +116,8 @@ class Form extends LocalizeCoreElement(LitElement) {
 
 	render() {
 		let errorSummary = null;
-		if (this._isRootForm()) {
-			const errors = [...flattenMap(this._errors)]
-				.filter(([, eleErrors]) => eleErrors.length > 0)
-				.map(([ele, eleErrors]) => ({ href: `#${ele.id}`, message: eleErrors[0], onClick: () => ele.focus() }));
-			errorSummary = html`<d2l-form-error-summary .errors=${errors}></d2l-form-error-summary>`;
+		if (!this.summaryId && this._isRootForm()) {
+			errorSummary = html`<d2l-form-error-summary .errors=${this.errorSummary}></d2l-form-error-summary>`;
 		}
 		return html`
 			${errorSummary}
@@ -120,6 +130,9 @@ class Form extends LocalizeCoreElement(LitElement) {
 		if (changedProperties.has('_errors')) {
 			this._hasErrors = this._errors.size > 0;
 		}
+		if ((changedProperties.has('summary-id') || changedProperties.has('_errors')) && this.summaryId) {
+			this.querySelector(`#${this.summaryId}`).errors = this.errorSummary;
+		}
 	}
 
 	async requestSubmit(submitter) {

package/components/menu/menu.js

@@ -70,6 +70,7 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 				--d2l-menu-background-color: #333536; /* tungsten @ 70% */
 				--d2l-menu-background-color-hover: #123559; /* celestine-1 @ 50% */
 				--d2l-menu-border-color: var(--d2l-color-tungsten);
+				--d2l-menu-border-color-hover: #ffffff;
 				--d2l-menu-foreground-color: var(--d2l-color-sylvite);
 				--d2l-menu-foreground-color-hover: #ffffff;
 				--d2l-menu-separator-color: var(--d2l-color-galena);

package/custom-elements.json

@@ -4786,7 +4786,7 @@
     },
     {
       "name": "d2l-form-error-summary",
-      "path": "./components/form/form-errory-summary.js",
+      "path": "./components/form/form-error-summary.js",
       "properties": [
         {
           "name": "errors",
@@ -4810,6 +4810,11 @@
           "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "summary-id",
+          "description": "Id for an alternative error summary element",
+          "type": "string"
         }
       ],
       "properties": [
@@ -4819,12 +4824,22 @@
           "description": "Indicates that the form should opt-out of nesting.\nThis means that it will not be submitted or validated if an ancestor form is submitted or validated.\nHowever, directly submitting or validating a form with `no-nesting` will still trigger submission and validation for its descendant forms unless they also opt-out using `no-nesting`.",
           "type": "boolean"
         },
+        {
+          "name": "errorSummary",
+          "type": "{ href: string; message: any; onClick: () => any; }[]"
+        },
         {
           "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"
+        },
+        {
+          "name": "summaryId",
+          "attribute": "summary-id",
+          "description": "Id for an alternative error summary element",
+          "type": "string"
         }
       ],
       "events": [
@@ -14733,6 +14748,12 @@
           "description": "Whether content fills the screen or not",
           "type": "'fullscreen'|'normal'",
           "default": "\"fullscreen\""
+        },
+        {
+          "name": "has-form",
+          "description": "Whether to render an encompassing form over all panels",
+          "type": " Boolean ",
+          "default": "false"
         }
       ],
       "properties": [
@@ -14748,6 +14769,9 @@
           "description": "The key used to persist the divider's position to local storage. This key\nshould not be shared between pages so that users can save different divider\npositions on different pages. If no key is provided, the template will fall\nback its default size.",
           "type": "string"
         },
+        {
+          "name": "form"
+        },
         {
           "name": "backgroundShading",
           "attribute": "background-shading",
@@ -14775,6 +14799,13 @@
           "description": "Whether content fills the screen or not",
           "type": "'fullscreen'|'normal'",
           "default": "\"fullscreen\""
+        },
+        {
+          "name": "hasForm",
+          "attribute": "has-form",
+          "description": "Whether to render an encompassing form over all panels",
+          "type": " Boolean ",
+          "default": "false"
         }
       ],
       "events": [
@@ -14785,6 +14816,18 @@
         {
           "name": "d2l-template-primary-secondary-resize-end",
           "description": "Dispatched when a user finishes moving the divider."
+        },
+        {
+          "name": "d2l-template-primary-secondary-form-invalid",
+          "description": "Dispatched when the form fails validation. The error map can be obtained from the detail's errors property."
+        },
+        {
+          "name": "d2l-template-primary-secondary-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-template-primary-secondary-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.158.1",
+  "version": "3.159.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/templates/primary-secondary/demo/form.html

@@ -0,0 +1,55 @@
+<!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="../../../components/demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../../components/button/button.js';
+			import '../../../components/demo/demo-page.js';
+			import '../../../components/inputs/input-group.js';
+			import '../../../components/inputs/input-radio-group.js';
+			import '../../../components/inputs/input-radio.js';
+			import '../../../components/inputs/input-text.js';
+			import '../../../components/inputs/input-textarea.js';
+			import '../primary-secondary.js';
+		</script>
+		<style>
+			d2l-template-primary-secondary {
+				--d2l-template-primary-secondary-primary-padding: 20px;
+			}
+			div[slot="secondary"] {
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body>
+		<d2l-template-primary-secondary has-form background-shading="secondary" width-type="normal">
+			<div slot="primary">
+				<h1>Title</h1>
+				<d2l-input-group>
+					<d2l-input-text name="name" label="Name" required></d2l-input-text>
+					<d2l-input-textarea name="description" label="Description"></d2l-input-textarea>
+				</d2l-input-group>
+			</div>
+			<div slot="secondary">
+				<d2l-input-radio-group name="band" label="Band" required>
+					<d2l-input-radio label="FM" value="fm"></d2l-input-radio>
+					<d2l-input-radio label="AM" value="am"></d2l-input-radio>
+				</d2l-input-radio-group>
+			</div>
+			<div slot="footer">
+				<d2l-button primary>Save</d2l-button>
+			</div>
+		</d2l-template-primary-secondary>
+		<script>
+			const form = document.querySelector('d2l-template-primary-secondary');
+			document
+				.querySelector('d2l-button')
+				.addEventListener('click', () => form.submitForm());
+			form.addEventListener('d2l-form-submit', (e) => {
+				console.log('Form submitted!', e.detail.formData);
+			});
+		</script>
+	</body>
+</html>

package/templates/primary-secondary/primary-secondary.js

@@ -1,8 +1,10 @@
 import '../../components/colors/colors.js';
+import '../../components/form/form.js';
+import '../../components/form/form-error-summary.js';
 import '../../components/icons/icon-custom.js';
 import '../../components/icons/icon.js';
 import '../../components/offscreen/offscreen.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { formatPercent } from '@brightspace-ui/intl';
@@ -547,6 +549,9 @@ class MobileTouchResizer extends Resizer {
  * @slot secondary - Supplementary page content
  * @fires d2l-template-primary-secondary-resize-start - Dispatched when a user begins moving the divider.
  * @fires d2l-template-primary-secondary-resize-end - Dispatched when a user finishes moving the divider.
+ * @fires d2l-template-primary-secondary-form-invalid Dispatched when the form fails validation. The error map can be obtained from the detail's errors property.
+ * @fires d2l-template-primary-secondary-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.
+ * @fires d2l-template-primary-secondary-form-submit Dispatched when the form is submitted. The form data can be obtained from the detail's formData property.
  */
 class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 
@@ -587,7 +592,12 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 			 * @type {'fullscreen'|'normal'}
 			 */
 			widthType: { type: String, attribute: 'width-type', reflect: true },
-			_animateResize: { type: Boolean, attribute: false },
+			/**
+			 * Whether to render an encompassing form over all panels
+			 * @type { Boolean }
+			 */
+			hasForm: { type: Boolean, attribute: 'has-form' },
+			_formErrorSummary: { type: Array },
 			_hasFooter: { type: Boolean, attribute: false },
 			_isCollapsed: { type: Boolean, attribute: false },
 			_isExpanded: { type: Boolean, attribute: false },
@@ -599,7 +609,8 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 
 	static get styles() {
 		return css`
-			:host {
+			:host,
+			:host > d2l-form {
 				bottom: 0;
 				left: 0;
 				overflow: hidden;
@@ -607,6 +618,7 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 				right: 0;
 				top: 0;
 			}
+
 			:host([hidden]) {
 				display: none;
 			}
@@ -631,6 +643,7 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 			main {
 				flex: 2 0 0;
 				overflow-x: hidden;
+				padding: var(--d2l-template-primary-secondary-primary-padding, 0);
 				transition: none;
 			}
 			:host([resizable]) main {
@@ -1003,6 +1016,12 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		this._isMobile = isMobile();
 		this._hasConnectedResizers = false;
 		this._sizeAsPercent = 0;
+
+		this.hasForm = false;
+	}
+
+	get form() {
+		return this.shadowRoot.querySelector('d2l-form');
 	}
 
 	disconnectedCallback() {
@@ -1032,7 +1051,10 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		const scrollClasses = {
 			'd2l-template-scroll': isWindows
 		};
-		const primarySection = html`<main class="${classMap(scrollClasses)}"><slot name="primary"></slot></main>`;
+		const primarySection = html`<main class="${classMap(scrollClasses)}">
+			${this.hasForm ? html`<d2l-form-error-summary _has-bottom-margin id="form-error-summary"></d2l-form-error-summary>` : nothing}
+			<slot name="primary"></slot>
+		</main>`;
 		const secondarySection = html`
 			<div style=${styleMap(secondaryPanelStyles)} class="d2l-template-primary-secondary-secondary-container" @transitionend=${this._onTransitionEnd}>
 				<div class="d2l-template-primary-secondary-divider-shadow"></div>
@@ -1040,7 +1062,7 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 					<slot name="secondary"></slot>
 				</aside>
 			</div>`;
-		return html`
+		const content = html`
 			<div class="d2l-template-primary-secondary-container">
 				<header><slot name="header"></slot></header>
 				<div class="d2l-template-primary-secondary-content" data-background-shading="${this.backgroundShading}" ?data-animate-resize=${this._animateResize} ?data-is-collapsed=${this._isCollapsed} ?data-is-expanded=${this._isExpanded}>
@@ -1053,6 +1075,15 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 				</footer>
 			</div>
 		`;
+
+		if (this.hasForm) return html`<d2l-form
+			summary-id="form-error-summary"
+			@d2l-form-invalid=${this.#handleInvalidForm}
+			@d2l-form-submit=${this.#handleFormSubmit}
+			@d2l-form-dirty=${this.#handleFormDirty}>
+			${content}
+		</d2l-form>`;
+		return content;
 	}
 
 	updated(changedProperties) {
@@ -1097,6 +1128,10 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		}
 	}
 
+	submitForm() {
+		this.form.submit();
+	}
+
 	get _size() {
 		return this.__size;
 	}
@@ -1281,6 +1316,18 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		`;
 
 	}
+
+	#handleFormDirty(e) {
+		this.dispatchEvent(new CustomEvent('d2l-template-primary-secondary-form-dirty', { detail: e.detail }));
+	}
+
+	#handleFormSubmit(e) {
+		this.dispatchEvent(new CustomEvent('d2l-template-primary-secondary-form-submit', { detail: e.detail }));
+	}
+
+	#handleInvalidForm(e) {
+		this.dispatchEvent(new CustomEvent('d2l-template-primary-secondary-form-invalid', { detail: e.detail }));
+	}
 }
 
 customElements.define('d2l-template-primary-secondary', TemplatePrimarySecondary);