@brightspace-ui/core 3.100.2 → 3.101.0

package/components/dialog/README.md

@@ -258,6 +258,86 @@ document.querySelector('#open').addEventListener('click', () => {
 });
 ```
 
+## Loading Asynchronous Content
+
+The `until` directive can be used for manging the rendering of dialog content when it is loaded asynchronously. The example below loads some dialog content asynchronously, displaying a [Loading Spinner](../loading-spinner/) until the content is ready.
+
+Notes on this example:
+- Dialog sizing: `this.resolveLoadingComplete` (part of `LoadingCompleteMixin`) on image load triggers the dialog resize
+- Focus management: focus will go to the first footer button by default. If focus should instead go to a focusable element in the content then that would need to be specified, often by using `.focus()` on the other focusable element.
+
+<!-- docs: demo code autoSize:false size:xlarge -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
+  import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';
+  import { html, LitElement, noChange } from 'lit';
+  import { guard } from 'lit/directives/guard.js';
+  import { LoadingCompleteMixin } from '@brightspace-ui/core/mixins/loading-complete/loading-complete-mixin.js';
+  import { until } from 'lit/directives/until.js';
+
+  class DialogAsyncContentUntil extends LoadingCompleteMixin(LitElement) {
+
+    static get properties() {
+      return {
+        key: { type: String }
+      };
+    }
+    
+    constructor() {
+      super();
+      this.key = null;
+    }
+
+    render() {
+      const loadingSpinner = html`<d2l-loading-spinner size="100" style="width: 100%;"></d2l-loading-spinner>`;
+      return html`${guard([this.key], () => until(this.#getContent(this.key), loadingSpinner, noChange))}`;
+    }
+    
+    #getContent(key) {
+      return new Promise((resolve) => {
+      if (!key) return;
+      setTimeout(() => {
+        resolve(html`
+        <d2l-button>Focus on me!</d2l-button>
+        <img 
+          src="https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1600/https://us.v-cdn.net/6036482/uploads/Y6MNPRWX5OVH/moose-poses-guided-tour.png" 
+          style="height: 300px; display: block;"
+          @load="${this.#handleImageLoad}"
+        >
+        `);
+        }, 1000);
+      });
+    }
+
+    #handleImageLoad() {
+      this.shadowRoot.querySelector('d2l-button').focus();
+      this.resolveLoadingComplete();
+    }
+  }
+
+  customElements.define('d2l-dialog-demo-async-content-until', DialogAsyncContentUntil);
+</script>
+<script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
+  import '@brightspace-ui/core/components/dialog/dialog.js';
+  
+  document.querySelector('#open').addEventListener('click', () => {
+    document.querySelector('#dialog').opened = true;
+    document.querySelector('d2l-dialog-demo-async-content-until').key = 'my-dialog';
+  });
+  document.querySelector('#dialog').addEventListener('d2l-dialog-close', (e) => {
+    console.log('dialog action:', e.detail.action);
+  });
+</script>
+<d2l-dialog id="dialog" title-text="Async Dialog">
+  <d2l-dialog-demo-async-content-until></d2l-dialog-demo-async-content-until>
+  <d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
+  <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+</d2l-dialog>
+<d2l-button id="open">Show Dialog</d2l-button>
+```
+
 ## Accessibility
 
 ### Focus Management

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

@@ -0,0 +1,89 @@
+import '../../button/button.js';
+import '../../list/list.js';
+import '../../list/list-item.js';
+import '../../list/list-item-content.js';
+import '../../loading-spinner/loading-spinner.js';
+import { css, html, LitElement, noChange } from 'lit';
+import { guard } from 'lit/directives/guard.js';
+import { LoadingCompleteMixin } from '../../../mixins/loading-complete/loading-complete-mixin.js';
+import { until } from 'lit/directives/until.js';
+
+class DialogAsyncContentUntil extends LoadingCompleteMixin(LitElement) {
+
+	static get properties() {
+		return {
+			href: { type: String }
+		};
+	}
+
+	static get styles() {
+		return css`
+			.content-button {
+				padding-block: 1rem;
+			}
+			.d2l-dialog-content-loading {
+				text-align: center;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.href = null;
+	}
+
+	render() {
+		const loadingSpinner = html`
+			<div class="d2l-dialog-content-loading">
+				<d2l-loading-spinner size="100"></d2l-loading-spinner>
+			</div>
+		`;
+		return html`${guard([this.href], () => until(this._getContent(this.href), loadingSpinner, noChange))}`;
+	}
+
+	_getContent(href) {
+		return new Promise((resolve) => {
+			if (!href) return;
+			setTimeout(() => {
+				resolve(html`
+					<d2l-button class="content-button">Focus on me!</d2l-button>
+					<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" @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" @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" @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>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+					`);
+			}, 1000);
+		});
+	}
+
+	#handleImageLoad() {
+		const images = this.shadowRoot.querySelectorAll('img');
+		for (const image of images) {
+			if (!image.complete) return;
+		}
+		this.shadowRoot.querySelector('.content-button').focus();
+		this.resolveLoadingComplete();
+	}
+
+}
+
+customElements.define('d2l-dialog-demo-async-content-until', DialogAsyncContentUntil);

package/components/dialog/demo/dialog.html

@@ -18,6 +18,7 @@
 			import '../../list/demo/demo-list.js';
 			import '../dialog.js';
 			import './dialog-async-content.js';
+			import './dialog-async-content-until.js';
 			import './dialog-container.js';
 		</script>
 		<style>
@@ -133,6 +134,28 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (async using until)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openAsyncUntil">Show Dialog</d2l-button>
+					<d2l-dialog id="dialogAsyncUntil" title-text="Dialog Title">
+						<d2l-dialog-demo-async-content-until></d2l-dialog-demo-async-content-until>
+						<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog>
+					<script>
+						document.querySelector('#openAsyncUntil').addEventListener('click', () => {
+							document.querySelector('#dialogAsyncUntil').opened = true;
+							document.querySelector('d2l-dialog-demo-async-content-until').href = 'some-href';
+						});
+						document.querySelector('#dialogAsyncUntil').addEventListener('d2l-dialog-close', (e) => {
+							console.log('dialog action:', e.detail.action);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Dialog (intercept closing)</h2>
 
 			<d2l-demo-snippet>

package/components/dialog/dialog-mixin.js

@@ -53,7 +53,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			_isFullHeight: { state: true },
 			_left: { state: true },
 			_margin: { state: true },
-			_mobileDropdownShowing: { state: true },
 			_nestedShowing: { state: true },
 			_overflowBottom: { state: true },
 			_overflowTop: { state: true },
@@ -73,7 +72,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
 		this._fullscreenWithin = 0;
-		this._handleDropdownOpenClose = this._handleDropdownOpenClose.bind(this);
 		this._handleMvcDialogOpen = this._handleMvcDialogOpen.bind(this);
 		this._inIframe = false;
 		this._isDialogMixin = true;
@@ -81,7 +79,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._height = 0;
 		this._left = 0;
 		this._margin = { top: defaultMargin.top, right: defaultMargin.right, bottom: defaultMargin.bottom, left: defaultMargin.left };
-		this._mobileDropdownShowing = false;
 		this._nestedShowing = false;
 		this._overflowBottom = false;
 		this._overflowTop = false;
@@ -158,8 +155,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	_addHandlers() {
 		window.addEventListener('resize', this._updateSize);
 		this.addEventListener('touchstart', this._handleTouchStart);
-		this.addEventListener('d2l-dropdown-open', this._handleDropdownOpenClose, { capture: true });
-		this.addEventListener('d2l-dropdown-close', this._handleDropdownOpenClose, { capture: true });
 		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').addEventListener('scroll', this._updateOverflow);
 	}
 
@@ -350,10 +345,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		e.stopPropagation();
 	}
 
-	_handleDropdownOpenClose(e) {
-		this._mobileDropdownShowing = e.composedPath()[0]._useMobileStyling;
-	}
-
 	_handleFocusTrapEnter(e) {
 		// ignore focus trap events when the target is another element
 		// to prevent infinite focus loops
@@ -476,8 +467,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	_removeHandlers() {
 		window.removeEventListener('resize', this._updateSize);
 		this.removeEventListener('touchstart', this._handleTouchStart);
-		this.removeEventListener('d2l-dropdown-open', this._handleDropdownOpenClose, { capture: true });
-		this.removeEventListener('d2l-dropdown-close', this._handleDropdownOpenClose, { capture: true });
 		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').removeEventListener('scroll', this._updateOverflow);
 	}
 
@@ -506,8 +495,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			'd2l-dialog-outer-nested-showing': !this._useNative && this._nestedShowing,
 			'd2l-dialog-outer-scroll': this._scroll,
 			'd2l-dialog-fullscreen-mobile': info.fullscreenMobile,
-			'd2l-dialog-fullscreen-within': this._fullscreenWithin !== 0,
-			'd2l-dialog-dropdown-mobile': this._mobileDropdownShowing
+			'd2l-dialog-fullscreen-within': this._fullscreenWithin !== 0
 		};
 
 		return html`${this._useNative ?

package/components/dialog/dialog-styles.js

@@ -151,10 +151,6 @@ export const dialogStyles = css`
 		overflow: auto;
 	}
 
-	.d2l-dialog-dropdown-mobile .d2l-dialog-content {
-		overflow: hidden; /* workaround to fix clipping of nested fixed position elements with overlowing content in Safari bug: https://bugs.webkit.org/show_bug.cgi?id=160953 */
-	}
-
 	.d2l-dialog-footer {
 		box-sizing: border-box;
 		flex: none;

package/components/dropdown/dropdown-popover-mixin.js

@@ -285,7 +285,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 			case 'left': return 'inline-start';
 			case 'right': return 'inline-end';
 			default: return undefined;
-		  }
+		}
 	}
 
 	#adaptPositionSpan(val) {
@@ -293,7 +293,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 			case 'start': return 'end';
 			case 'end': return 'start';
 			default: return 'all';
-		  }
+		}
 	}
 
 	#getMobileCloseButtonStyles() {

package/components/filter/filter.js

@@ -644,9 +644,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					<div class="d2l-filter-dimension-set-value d2l-body-compact">
 						<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
 						${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
-						${item.additionalContent
-		? html`<d2l-icon icon="${item.selected ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small'}" aria-hidden="true"></d2l-icon>`
-		: nothing}
+						${item.additionalContent ? html`<d2l-icon icon="${item.selected ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small'}" aria-hidden="true"></d2l-icon>` : nothing}
 					</div>
 					${item.additionalContent ? html`
 						<d2l-expand-collapse-content 
@@ -658,9 +656,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					` : nothing}
 				</div>
 			</d2l-list-item>
-			${item.additionalContent && item.selected && this._displayKeyboardTooltip
-		? html`<d2l-tooltip align="start" announced for="${itemId}" for-type="descriptor" @d2l-tooltip-hide="${this._handleTooltipHide}">${this.localizeHTML('components.filter.additionalContentTooltip')}</d2l-tooltip>`
-		: nothing}
+			${item.additionalContent && item.selected && this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" announced for="${itemId}" for-type="descriptor" @d2l-tooltip-hide="${this._handleTooltipHide}">${this.localizeHTML('components.filter.additionalContentTooltip')}</d2l-tooltip>` : nothing}
 		`;
 	}
 

package/components/list/demo/demo-list.js

@@ -1,4 +1,3 @@
-/* eslint-disable indent */
 import '../../button/button-icon.js';
 import '../../dropdown/dropdown-button-subtle.js';
 import '../../dropdown/dropdown-menu.js';

package/custom-elements.json

@@ -1982,6 +1982,31 @@
         }
       ]
     },
+    {
+      "name": "d2l-dialog-demo-async-content-until",
+      "path": "./components/dialog/demo/dialog-async-content-until.js",
+      "attributes": [
+        {
+          "name": "href",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "href",
+          "attribute": "href",
+          "type": "string"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
+        }
+      ]
+    },
     {
       "name": "d2l-dialog-demo-async-content",
       "path": "./components/dialog/demo/dialog-async-content.js",

package/package.json

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