@brightspace-ui/core 3.269.3 → 3.269.5

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

@@ -113,8 +113,6 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 
 	constructor() {
 		super();
-		this._validationCustomConnected = this._validationCustomConnected.bind(this);
-		this._onFormElementErrorsChange = this._onFormElementErrorsChange.bind(this);
 
 		this._firstUpdateResolve = null;
 		this._firstUpdatePromise = new Promise((resolve) => {
@@ -160,14 +158,14 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 
 	connectedCallback() {
 		super.connectedCallback();
-		this.shadowRoot.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
-		this.shadowRoot.addEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
+		this.shadowRoot.addEventListener('d2l-validation-custom-connected', this.#validationCustomConnected);
+		this.shadowRoot.addEventListener('d2l-form-element-errors-change', this.#onFormElementErrorsChange);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.shadowRoot.removeEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
-		this.shadowRoot.removeEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
+		this.shadowRoot.removeEventListener('d2l-validation-custom-connected', this.#validationCustomConnected);
+		this.shadowRoot.removeEventListener('d2l-form-element-errors-change', this.#onFormElementErrorsChange);
 	}
 
 	firstUpdated(changedProperties) {
@@ -261,7 +259,7 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		this._validationCustoms.delete(custom);
 	}
 
-	_onFormElementErrorsChange(e) {
+	#onFormElementErrorsChange = (e) => {
 		e.stopPropagation();
 		const errors = e.detail.errors;
 		if (errors.length === 0) {
@@ -273,9 +271,9 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			this.childErrors.set(e.target, errors);
 			this.requestUpdate('childErrors');
 		}
-	}
+	};
 
-	_validationCustomConnected(e) {
+	#validationCustomConnected = (e) => {
 		e.stopPropagation();
 		const custom = e.composedPath()[0];
 		this.validationCustomConnected(custom);
@@ -285,6 +283,6 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			this.validationCustomDisconnected(custom);
 		};
 		custom.addEventListener('d2l-validation-custom-disconnected', onDisconnect);
-	}
+	};
 
 };

package/components/form/form.js

@@ -4,7 +4,6 @@ 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 { 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';
@@ -66,9 +65,6 @@ class Form extends LocalizeCoreElement(LitElement) {
 		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);
@@ -84,14 +80,14 @@ class Form extends LocalizeCoreElement(LitElement) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		window.addEventListener('beforeunload', this._onUnload);
+		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);
+		window.removeEventListener('beforeunload', this.#onUnload);
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-form-disconnect'));
 		this._isSubForm = false;
@@ -193,6 +189,13 @@ class Form extends LocalizeCoreElement(LitElement) {
 		return flattenedErrorMap;
 	}
 
+	#onUnload = (e) => {
+		if (this.trackChanges && this._dirty) {
+			e.preventDefault();
+			e.returnValue = false;
+		}
+	};
+
 	_displayInvalid(ele, message) {
 		let tooltip = this._tooltips.get(ele);
 		if (!tooltip) {
@@ -296,20 +299,6 @@ class Form extends LocalizeCoreElement(LitElement) {
 		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,

package/components/inputs/input-text.js

@@ -302,8 +302,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		this._lastSlotWidth = 0;
 		this._prevValue = '';
 
-		this._handleBlur = this._handleBlur.bind(this);
-		this._handleFocus = this._handleFocus.bind(this);
 		this._perfMonitor = new PerfMonitor(this);
 	}
 
@@ -369,8 +367,8 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
 		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
 		if (!container) return;
-		container.removeEventListener('blur', this._handleBlur, true);
-		container.removeEventListener('focus', this._handleFocus, true);
+		container.removeEventListener('blur', this.#handleBlur, true);
+		container.removeEventListener('focus', this.#handleFocus, true);
 	}
 
 	firstUpdated(changedProperties) {
@@ -380,8 +378,8 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 
 		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
 		if (!container) return;
-		container.addEventListener('blur', this._handleBlur, true);
-		container.addEventListener('focus', this._handleFocus, true);
+		container.addEventListener('blur', this.#handleBlur, true);
+		container.addEventListener('focus', this.#handleFocus, true);
 
 		// if initially hidden then update layout when it becomes visible
 		if (typeof(IntersectionObserver) === 'function') {
@@ -534,6 +532,24 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		});
 	}
 
+	#handleBlur = async(e) => {
+		this._focused = false;
+		this.requestValidate(true);
+
+		/**
+		 * This is needed only for Legacy-Edge
+		 * the _handleChange function is NOT triggered, therefore we have to detect the blur and handle it ourselves.
+		 */
+		const browserType = window.navigator.userAgent;
+		if (this._prevValue !== e.target.value && (browserType.indexOf('Edge') > -1)) {
+			this._handleChange();
+		}
+	};
+
+	#handleFocus = () => {
+		this._focused = true;
+	};
+
 	_getAriaLabel() {
 		let label;
 		if (this.label && (this.labelHidden || this.labelledBy)) {
@@ -565,20 +581,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		this._hasAfterContent = (afterContent && afterContent.length > 0);
 	}
 
-	async _handleBlur(e) {
-		this._focused = false;
-		this.requestValidate(true);
-
-		/**
-		 * This is needed only for Legacy-Edge
-		 * the _handleChange function is NOT triggered, therefore we have to detect the blur and handle it ourselves.
-		 */
-		const browserType = window.navigator.userAgent;
-		if (this._prevValue !== e.target.value && (browserType.indexOf('Edge') > -1)) {
-			this._handleChange();
-		}
-	}
-
 	_handleChange() {
 		// Change events aren't composed, so we need to re-dispatch
 		this.dispatchEvent(new CustomEvent(
@@ -587,10 +589,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		));
 	}
 
-	_handleFocus() {
-		this._focused = true;
-	}
-
 	_handleInput(e) {
 		this._setValue(e.target.value, false);
 		return true;

package/components/overflow-group/overflow-group-mixin.js

@@ -83,10 +83,8 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 	constructor() {
 		super();
 
-		this._handleItemMutation = this._handleItemMutation.bind(this);
-		this._handleResize = this._handleResize.bind(this);
-		this._itemObserver = new MutationObserver(this._handleItemMutation);
-		this._resizeObserver = new ResizeObserver((entries) => requestAnimationFrame(() => this._handleResize(entries)));
+		this._itemObserver = new MutationObserver(this.#handleItemMutation);
+		this._resizeObserver = new ResizeObserver((entries) => requestAnimationFrame(() => this.#handleResize(entries)));
 
 		this._hasResized = false;
 		this._isObservingResize = false;
@@ -183,6 +181,46 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 		throw new Error('OverflowGroupMixin.getOverflowContainer must be overridden');
 	}
 
+	#handleItemMutation = (mutations) => {
+		if (!mutations || mutations.length === 0) return;
+		if (this._updateOverflowItemsRequested) return;
+
+		let isWidthModifyingMutation = false;
+		for (const mutation of mutations) {
+			if (mutation.attributeName
+				&& (mutation.attributeName === 'selected' || mutation.attributeName === 'text')
+			) {
+				isWidthModifyingMutation = true;
+				break;
+			}
+		}
+
+		this._updateOverflowItemsRequested = true;
+		setTimeout(() => {
+			this._overflowItems = this._slotItems.map((node) => this.convertToOverflowItem(node));
+
+			// when certain attributes change the corresponding item width can also change and so we need to re-get the layouts and chomp
+			if (isWidthModifyingMutation) {
+				this._itemLayouts = this._getItemLayouts(this._slotItems);
+				this._chomp();
+			}
+			this._updateOverflowItemsRequested = false;
+			this.requestUpdate();
+		}, 0);
+	};
+
+	#handleResize = async(entries) => {
+		await (document.fonts ? document.fonts.ready : Promise.resolve()); // computed widths can be incorrect if we don't wait for fonts to load
+		this._availableWidth = Math.ceil(entries[0].contentRect.width);
+
+		if (!this._hasResized) {
+			this._hasResized = true;
+			this._handleSlotChange();
+		} else {
+			this._chomp();
+		}
+	};
+
 	_autoDetectBoundaries(items) {
 		if (!items) return;
 
@@ -335,46 +373,6 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 		return filteredNodes;
 	}
 
-	_handleItemMutation(mutations) {
-		if (!mutations || mutations.length === 0) return;
-		if (this._updateOverflowItemsRequested) return;
-
-		let isWidthModifyingMutation = false;
-		for (const mutation of mutations) {
-			if (mutation.attributeName
-				&& (mutation.attributeName === 'selected' || mutation.attributeName === 'text')
-			) {
-				isWidthModifyingMutation = true;
-				break;
-			}
-		}
-
-		this._updateOverflowItemsRequested = true;
-		setTimeout(() => {
-			this._overflowItems = this._slotItems.map((node) => this.convertToOverflowItem(node));
-
-			// when certain attributes change the corresponding item width can also change and so we need to re-get the layouts and chomp
-			if (isWidthModifyingMutation) {
-				this._itemLayouts = this._getItemLayouts(this._slotItems);
-				this._chomp();
-			}
-			this._updateOverflowItemsRequested = false;
-			this.requestUpdate();
-		}, 0);
-	}
-
-	async _handleResize(entries) {
-		await (document.fonts ? document.fonts.ready : Promise.resolve()); // computed widths can be incorrect if we don't wait for fonts to load
-		this._availableWidth = Math.ceil(entries[0].contentRect.width);
-
-		if (!this._hasResized) {
-			this._hasResized = true;
-			this._handleSlotChange();
-		} else {
-			this._chomp();
-		}
-	}
-
 	_handleSlotChange() {
 		if (!this._hasResized) return;
 		requestAnimationFrame(async() => {

package/components/page/page.js

@@ -111,11 +111,15 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		}
 
 		.content {
+			box-sizing: border-box;
 			display: flex;
 			margin-inline: var(--d2l-page-margin-inline, 0);
 			max-width: var(--d2l-page-content-max-width, 100%);
 			padding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */
 		}
+		.content.has-panels {
+			min-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));
+		}
 
 		main {
 			flex: 1;
@@ -124,7 +128,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 		.side-nav-panel,
 		.supporting-panel {
-			height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
+			max-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
 			overflow: clip auto;
 			position: sticky;
 			top: var(--d2l-page-header-height, 0);
@@ -162,11 +166,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			'supporting-mobile': { minSize: DRAWER_MIN_HEIGHT }
 		});
 		this._slotVisibility = {};
-		this.#handleWindowResizeBound = this.#handleWindowResize.bind(this);
 		this.#resizeObserver = new ResizeObserver(entries => {
 			for (const entry of entries) {
 				if (entry.target.classList.contains('header')) {
 					this._headerHeight = entry.target.offsetHeight;
+					this.style.setProperty('--d2l-page-header-height-measured', `${this._headerHeight}px`);
 
 					const height = this._headerIsSticky ? this._headerHeight : 0;
 					this.style.setProperty('--d2l-page-header-height', `${height}px`);
@@ -194,13 +198,13 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		window.addEventListener('resize', this.#handleWindowResizeBound);
+		window.addEventListener('resize', this.#handleWindowResize);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver.disconnect();
-		window.removeEventListener('resize', this.#handleWindowResizeBound);
+		window.removeEventListener('resize', this.#handleWindowResize);
 	}
 
 	firstUpdated() {
@@ -217,11 +221,15 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			'page': true,
 			'header-sticky': this._headerIsSticky
 		};
+		const contentClasses = {
+			'content': true,
+			'has-panels': this._slotVisibility['side-nav'] || this._slotVisibility['supporting']
+		};
 
 		return html`
 			<div class="${classMap(pageClasses)}">
 				${this.#renderHeader()}
-				<div class="content">
+				<div class="${classMap(contentClasses)}">
 					${this.#renderSideNavPanel()}
 					<main><slot></slot></main>
 					${this.#renderSupportingPanel()}
@@ -238,9 +246,12 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		}
 	}
 
-	#handleWindowResizeBound;
 	#resizeObserver;
 
+	#handleWindowResize = () => {
+		this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
+	};
+
 	#getMaxDrawerHeight() {
 		const reservedSpace = this._headerHeight + this._footerHeight + DIVIDER_WIDTH;
 		return Math.max(DRAWER_MIN_HEIGHT, window.innerHeight - reservedSpace);
@@ -266,10 +277,6 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
 	}
 
-	#handleWindowResize() {
-		this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
-	};
-
 	#initializePanelSizes() {
 		const defaultWidth = Math.floor(this._contentWidth / 3);
 		const defaultHeight = Math.floor(window.innerHeight / 2);

package/components/scroll-wrapper/scroll-wrapper.js

@@ -168,9 +168,7 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 		this._scrollbarRight = false;
 		this._syncDriver = null;
 		this._syncDriverTimeout = null;
-		this._checkScrollThresholds = this._checkScrollThresholds.bind(this);
 
-		this._synchronizeScroll = this._synchronizeScroll.bind(this);
 	}
 
 	disconnectedCallback() {
@@ -218,7 +216,7 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 	checkScrollbar() {
 		if (!this._container) return;
 		this._hScrollbar = this._container.offsetWidth !== this._container.scrollWidth;
-		this._checkScrollThresholds();
+		this.#checkScrollThresholds();
 	}
 
 	notifyResize() {
@@ -237,13 +235,24 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 		}
 	}
 
-	_checkScrollThresholds() {
+	#checkScrollThresholds = () => {
 		if (!this._container) return;
 		const lowerScrollValue = this._container.scrollWidth - this._baseContainer.offsetWidth - Math.abs(this._container.scrollLeft);
 		this._scrollbarLeft = (this._container.scrollLeft === 0);
 		this._scrollbarRight = (lowerScrollValue <= 0);
 
-	}
+	};
+
+	#synchronizeScroll = (e) => {
+		if (this._syncDriver && e.target !== this._syncDriver) return;
+		if (this._syncDriverTimeout) clearTimeout(this._syncDriverTimeout);
+
+		this._syncDriver = e.target;
+		this._allScrollers.forEach(element => {
+			if (element && element !== e.target) element.scrollLeft = e.target.scrollLeft;
+		});
+		this._syncDriverTimeout = setTimeout(() => this._syncDriver = null, 100);
+	};
 
 	_disconnectAll() {
 		this._resizeObserver?.disconnect();
@@ -252,11 +261,11 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 			this._container.style.removeProperty('overflow-x');
 			this._container.classList.remove('d2l-scroll-wrapper-focus');
 			this._container.removeAttribute('tabindex');
-			this._container.removeEventListener('scroll', this._synchronizeScroll);
-			this._container.removeEventListener('scroll', this._checkScrollThresholds);
+			this._container.removeEventListener('scroll', this.#synchronizeScroll);
+			this._container.removeEventListener('scroll', this.#checkScrollThresholds);
 			this._secondaryScrollers.forEach(element => {
 				element.style.removeProperty('overflow-x');
-				element.removeEventListener('scroll', this._synchronizeScroll);
+				element.removeEventListener('scroll', this.#synchronizeScroll);
 			});
 		}
 	}
@@ -276,17 +285,6 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 		this.scrollDistance(scrollDistance, true);
 	}
 
-	_synchronizeScroll(e) {
-		if (this._syncDriver && e.target !== this._syncDriver) return;
-		if (this._syncDriverTimeout) clearTimeout(this._syncDriverTimeout);
-
-		this._syncDriver = e.target;
-		this._allScrollers.forEach(element => {
-			if (element && element !== e.target) element.scrollLeft = e.target.scrollLeft;
-		});
-		this._syncDriverTimeout = setTimeout(() => this._syncDriver = null, 100);
-	}
-
 	_updateScrollTargets() {
 		this._disconnectAll();
 
@@ -307,17 +305,17 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 			}
 			this._container.style.overflowX = 'auto';
 			this._resizeObserver.observe(this._container);
-			this._container.addEventListener('scroll', this._checkScrollThresholds);
+			this._container.addEventListener('scroll', this.#checkScrollThresholds);
 			this._updateTabIndex();
 		}
 
 		if (this._secondaryScrollers.length) {
 			this._secondaryScrollers.forEach(element => {
 				element.style.overflowX = 'hidden';
-				element.addEventListener('scroll', this._synchronizeScroll);
+				element.addEventListener('scroll', this.#synchronizeScroll);
 			});
-			this._container.addEventListener('scroll', this._synchronizeScroll);
-			this._synchronizeScroll({ target: this._container });
+			this._container.addEventListener('scroll', this.#synchronizeScroll);
+			this.#synchronizeScroll({ target: this._container });
 		}
 	}