@brightspace-ui/core 3.79.5 → 3.79.7

package/components/dialog/demo/dialog-async-content.js

@@ -3,8 +3,9 @@ import '../../list/list-item.js';
 import '../../list/list-item-content.js';
 import { html, LitElement } from 'lit';
 import { InitialStateError, runAsync } from '../../../directives/run-async/run-async.js';
+import { LoadingCompleteMixin } from '../../../mixins/loading-complete/loading-complete-mixin.js';
 
-class DialogAsyncContent extends LitElement {
+class DialogAsyncContent extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -32,21 +33,21 @@ class DialogAsyncContent extends LitElement {
 				resolve(html`
 					<d2l-list>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Introductory Earth Sciences</div>
 								<div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
 							</d2l-list-item-content>
 						</d2l-list-item>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Engineering Materials for Energy Systems</div>
 								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
 							</d2l-list-item-content>
 						</d2l-list-item>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Geomorphology and GIS </div>
 								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
@@ -58,6 +59,14 @@ class DialogAsyncContent extends LitElement {
 		});
 	}
 
+	#handleImageLoad() {
+		const images = this.shadowRoot.querySelectorAll('img');
+		for (const image of images) {
+			if (!image.complete) return;
+		}
+		this.resolveLoadingComplete();
+	}
+
 }
 
 customElements.define('d2l-dialog-demo-async-content', DialogAsyncContent);

package/components/dialog/dialog-mixin.js

@@ -2,7 +2,7 @@ import '../focus-trap/focus-trap.js';
 import '../../helpers/viewport-size.js';
 import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
-import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { findComposedAncestor, getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement, getFirstFocusableDescendant, getNextFocusable, isFocusable } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
@@ -11,6 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
+import { waitForElem } from '../../helpers/internal/waitForElem.js';
 
 window.D2L = window.D2L || {};
 window.D2L.DialogMixin = window.D2L.DialogMixin || {};
@@ -452,6 +453,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			if (reduceMotion) await new Promise(resolve => requestAnimationFrame(resolve));
 			else await animPromise;
 
+			const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-7397-dialog-resize-updateComplete', true) ?? true;
+			if (flag) {
+				await this.#waitForUpdateComplete();
+			}
+			await this._updateSize();
 			/** Dispatched when the dialog is opened */
 			this.dispatchEvent(new CustomEvent(
 				'd2l-dialog-open', { bubbles: true, composed: true }
@@ -580,4 +586,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			});
 		});
 	}
+
+	async #waitForUpdateComplete() {
+		const predicate = () => true;
+		const composedChildren = getComposedChildren(this, predicate);
+		await Promise.all(composedChildren.map(child => waitForElem(child, predicate)));
+	}
 };

package/components/popover/popover-mixin.js

@@ -1,3 +1,4 @@
+import '../backdrop/backdrop.js';
 import '../colors/colors.js';
 import '../focus-trap/focus-trap.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
@@ -6,6 +7,7 @@ import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocus
 import { getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { _offscreenStyleDeclarations } from '../offscreen/offscreen.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 
 const defaultPreferredPosition = {
 	location: 'block-end', // block-start, block-end
@@ -46,6 +48,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			_position: { state: true },
 			_preferredPosition: { state: true },
 			_rtl: { state: true },
+			_showBackdrop: { state: true },
 			_trapFocus: { state: true },
 			_useNativePopover: { type: String, reflect: true, attribute: 'popover' },
 			_width: { state: true }
@@ -207,6 +210,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		super();
 		this.configure();
 		this._mobile = false;
+		this._showBackdrop = false;
 		this._useNativePopover = isSupported ? 'manual' : undefined;
 		this.#handleAncestorMutationBound = this.#handleAncestorMutation.bind(this);
 		this.#handleAutoCloseClickBound = this.#handleAutoCloseClick.bind(this);
@@ -236,8 +240,9 @@ export const PopoverMixin = superclass => class extends superclass {
 	async close() {
 		if (!this._opened) return;
 
-		this._opened = false;
+		const ifrauBackdropService = await tryGetIfrauBackdropService();
 
+		this._opened = false;
 		if (this._useNativePopover) this.hidePopover();
 
 		this._previousFocusableAncestor = null;
@@ -245,6 +250,13 @@ export const PopoverMixin = superclass => class extends superclass {
 		this.#removeMediaQueryHandlers();
 		this.#removeRepositionHandlers();
 		this.#clearDismissible();
+
+		if (ifrauBackdropService && this._showBackdrop) {
+			ifrauBackdropService.hideBackdrop();
+			this.#ifrauContextInfo = null;
+		}
+		this._showBackdrop = false;
+
 		await this.updateComplete; // wait before applying focus to opener
 		this.#focusOpener();
 		this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
@@ -281,6 +293,8 @@ export const PopoverMixin = superclass => class extends superclass {
 	async open(applyFocus = true) {
 		if (this._opened) return;
 
+		const ifrauBackdropService = await tryGetIfrauBackdropService();
+
 		this.#addMediaQueryHandlers();
 
 		this._rtl = document.documentElement.getAttribute('dir') === 'rtl';
@@ -297,6 +311,11 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		await this.#position();
 
+		this._showBackdrop = this._mobile && this._mobileTrayLocation;
+		if (ifrauBackdropService && this._showBackdrop) {
+			this.#ifrauContextInfo = await ifrauBackdropService.showBackdrop();
+		}
+
 		this._dismissibleId = setDismissible(() => this.close());
 
 		this.#focusContent(this);
@@ -323,7 +342,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		const contentStyle = stylesMap['content'];
 
 		content = html`
-			<div class="content-width vdiff-target" style=${styleMap(widthStyle)}>
+			<div id="content-wrapper" class="content-width vdiff-target" style=${styleMap(widthStyle)}>
 				<div class="content-container" style=${styleMap(contentStyle)}>${content}</div>
 			</div>
 		`;
@@ -362,12 +381,16 @@ export const PopoverMixin = superclass => class extends superclass {
 			</div>
 		` : nothing;
 
-		return html`${content}${pointer}`;
+		const backdrop = this._mobileTrayLocation ?
+			html`<d2l-backdrop for-target="content-wrapper" ?shown="${this._showBackdrop}"></d2l-backdrop>` :
+			nothing;
+		return html`${content}${backdrop}${pointer}`;
 
 	}
 
 	async resize() {
 		if (!this._opened) return;
+		this._showBackdrop = this._mobile && this._mobileTrayLocation;
 		await this.#position();
 	}
 
@@ -376,6 +399,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		else return this.open(!this._noAutoFocus && applyFocus);
 	}
 
+	#ifrauContextInfo;
 	#mediaQueryList;
 	#handleAncestorMutationBound;
 	#handleAutoCloseClickBound;
@@ -520,7 +544,8 @@ export const PopoverMixin = superclass => class extends superclass {
 	#getMobileTrayBlockStyleMaps() {
 
 		let maxHeightOverride;
-		const availableHeight = Math.min(window.innerHeight, window.screen.height);
+		let availableHeight = Math.min(window.innerHeight, window.screen.height);
+		if (this.#ifrauContextInfo) availableHeight = this.#ifrauContextInfo.availableHeight;
 
 		// default maximum height for bottom tray (42px margin)
 		const mobileTrayMaxHeightDefault = availableHeight - minBackdropHeightMobile;
@@ -532,12 +557,20 @@ export const PopoverMixin = superclass => class extends superclass {
 		}
 		maxHeightOverride = `${maxHeightOverride}px`;
 
+		let bottomOverride;
+		if (this.#ifrauContextInfo) {
+			// the bottom override is measured as the distance from the bottom of the screen
+			const screenHeight = window.innerHeight - this.#ifrauContextInfo.availableHeight + Math.min(this.#ifrauContextInfo.top, 0);
+			bottomOverride = `${screenHeight}px`;
+		}
+
 		const widthOverride = '100vw';
 
 		const widthStyle = {
 			minWidth: widthOverride,
 			width: widthOverride,
 			maxHeight: maxHeightOverride,
+			bottom: bottomOverride
 		};
 
 		const contentWidthStyle = {
@@ -552,14 +585,15 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		return {
 			width: widthStyle,
-			content: contentStyle,
+			content: contentStyle
 		};
 	}
 
 	#getMobileTrayInlineStyleMaps() {
 
 		let maxWidthOverride = this._maxWidth;
-		const availableWidth = Math.min(window.innerWidth, window.screen.width);
+		let availableWidth = Math.min(window.innerWidth, window.screen.width);
+		if (this.#ifrauContextInfo) availableWidth = this.#ifrauContextInfo.availableWidth;
 
 		// default maximum width for tray (30px margin)
 		const mobileTrayMaxWidthDefault = Math.min(availableWidth - minBackdropWidthMobile, 420);
@@ -592,7 +626,16 @@ export const PopoverMixin = superclass => class extends superclass {
 		// add 2 to content width since scrollWidth does not include border
 		const containerWidth = `${widthOverride + 20}px`;
 
-		const topOverride = (window.innerHeight > window.screen.height) ? window.pageYOffset : undefined;
+		const maxHeightOverride = this.#ifrauContextInfo ? `${this.#ifrauContextInfo.availableHeight}px` : '';
+
+		let topOverride;
+		if (this.#ifrauContextInfo) {
+			// if inside iframe, use ifrauContext top as top of screen
+			topOverride = `${this.#ifrauContextInfo.top < 0 ? -this.#ifrauContextInfo.top : 0}px`;
+		} else if (window.innerHeight > window.screen.height) {
+			// non-responsive page, manually override top to scroll distance
+			topOverride = window.pageYOffset;
+		}
 
 		let inlineEndOverride;
 		let inlineStartOverride;
@@ -614,6 +657,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			minWidth: minWidthOverride,
 			width: containerWidth,
 			top: topOverride,
+			maxHeight: maxHeightOverride,
 			insetInlineStart: inlineStartOverride,
 			insetInlineEnd: inlineEndOverride
 		};
@@ -626,11 +670,12 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		const contentStyle = {
 			...contentWidthStyle,
+			maxHeight: maxHeightOverride,
 		};
 
 		return {
-			width : widthStyle,
-			content : contentStyle,
+			width: widthStyle,
+			content: contentStyle
 		};
 	}
 
@@ -767,8 +812,8 @@ export const PopoverMixin = superclass => class extends superclass {
 		};
 
 		return {
-			width : widthStyle,
-			content : contentStyle
+			width: widthStyle,
+			content: contentStyle
 		};
 	}
 
@@ -824,7 +869,10 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	async #handleMobileResize() {
 		this._mobile = this.#mediaQueryList.matches;
-		if (this._opened) await this.#position();
+		if (this._opened) {
+			this._showBackdrop = this._mobile && this._mobileTrayLocation;
+			await this.#position();
+		}
 	}
 
 	#handleResize() {

package/custom-elements.json

@@ -1996,6 +1996,14 @@
           "name": "href",
           "attribute": "href",
           "type": "string"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
         }
       ]
     },

package/helpers/README.md

@@ -86,7 +86,8 @@ elemIdListRemoves(node, attrName, value);
 findComposedAncestor(node, predicate);
 
 // gets the composed children (including shadow children & distributed children)
-getComposedChildren(element);
+// includes a predicate which will add children nodes when predicate(node) is true
+getComposedChildren(element, predicate = () => true);
 
 // gets the composed parent (including shadow host & insertion points)
 getComposedParent(node);

package/helpers/dom.js

@@ -79,7 +79,7 @@ export function getBoundingAncestor(node) {
 	});
 }
 
-export function getComposedChildren(node) {
+export function getComposedChildren(node, predicate = () => true) {
 
 	if (!node) {
 		return null;
@@ -104,7 +104,9 @@ export function getComposedChildren(node) {
 
 	for (let i = 0; i < nodes.length; i++) {
 		if (nodes[i].nodeType === 1) {
-			children.push(nodes[i]);
+			if (predicate(nodes[i])) {
+				children.push(nodes[i]);
+			}
 		}
 	}
 

package/helpers/internal/waitForElem.js

@@ -0,0 +1,25 @@
+import { getComposedChildren } from '../dom.js';
+
+export async function waitForElem(elem, predicate = () => true) {
+
+	if (!elem) return;
+
+	const update = elem.updateComplete;
+	if (typeof update === 'object' && Promise.resolve(update) === update) {
+		await update;
+		await new Promise(resolve => {
+			requestAnimationFrame(() => resolve());
+		});
+	}
+
+	if (typeof elem.getLoadingComplete === 'function') {
+		await elem.getLoadingComplete();
+		await new Promise(resolve => {
+			requestAnimationFrame(() => resolve());
+		});
+	}
+
+	const children = getComposedChildren(elem, predicate);
+	await Promise.all(children.map(e => waitForElem(e, predicate)));
+
+}

package/mixins/localize/README.md

@@ -196,6 +196,7 @@ static get localizeConfig() {
   };
 }
 ```
+See [Creating a new collection](https://desire2learn.atlassian.net/wiki/spaces/DEVCENTRAL/pages/3105063520/OSLO#Creating-a-new-collection) to determine your collection name. Backslash (`\`) characters in your collection name must be escaped.
 
 > **Important:** When defining language resource keys, avoid using the Full Stop (`.`) character for grouping. OSLO does not support it.
 

package/package.json

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