@brightspace-ui/core 2.121.0 → 2.122.1

package/components/dialog/dialog-mixin.js

@@ -142,6 +142,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	_addHandlers() {
 		window.addEventListener('resize', this._updateSize);
+		this.addEventListener('touchstart', this._handleTouchStart);
 		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').addEventListener('scroll', this._updateOverflow);
 	}
 
@@ -356,6 +357,12 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._useNative = false;
 	}
 
+	_handleTouchStart(e) {
+		// elements external to the dialog such as primary-secondary template should not be reacting
+		// to touchstart events originating inside the dialog or backdrop
+		e.stopPropagation();
+	}
+
 	_isCloseAborted() {
 		const abortEvent = new CustomEvent('d2l-dialog-before-close', {
 			cancelable: true,
@@ -441,6 +448,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	_removeHandlers() {
 		window.removeEventListener('resize', this._updateSize);
+		this.removeEventListener('touchstart', this._handleTouchStart);
 		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').removeEventListener('scroll', this._updateOverflow);
 	}
 

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

@@ -294,6 +294,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 		window.addEventListener('resize', this.__onResize);
 		this.addEventListener('blur', this.__onAutoCloseFocus, true);
+		this.addEventListener('touchstart', this.__onTouchStart);
 		document.body.addEventListener('focus', this.__onAutoCloseFocus, true);
 		document.body.addEventListener('click', this.__onAutoCloseClick, true);
 		this.mediaQueryList = window.matchMedia(`(max-width: ${this.mobileBreakpointOverride - 1}px)`);
@@ -305,6 +306,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		super.disconnectedCallback();
 		if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener('change', this._handleMobileResize);
 		this.removeEventListener('blur', this.__onAutoCloseFocus);
+		this.removeEventListener('touchstart', this.__onTouchStart);
 		window.removeEventListener('resize', this.__onResize);
 		if (document.body) {
 			// DE41322: document.body can be null in some scenarios
@@ -530,6 +532,12 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.resize();
 	}
 
+	__onTouchStart(e) {
+		// elements external to the dropdown content such as primary-secondary template should not be reacting
+		// to touchstart events originating inside the dropdown content
+		e.stopPropagation();
+	}
+
 	async __openedChanged(newValue) {
 
 		// DE44538: wait for dropdown content to fully render,

package/components/list/list.js

@@ -70,7 +70,6 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this.dragMultiple = false;
 		this.extendSeparators = false;
 		this.grid = false;
-		this.label = undefined;
 		this._listItemChanges = [];
 		this._childHasExpandCollapseToggle = false;
 

package/custom-elements.json

@@ -8907,6 +8907,11 @@
       "path": "./components/list/list.js",
       "description": "A container for a styled list of items (\"d2l-list-item\"). It provides the appropriate \"list\" semantics as well as options for displaying separators, etc.",
       "attributes": [
+        {
+          "name": "label",
+          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
+          "type": "string"
+        },
         {
           "name": "separators",
           "description": "Display separators. Valid values are \"all\" (default), \"between\", \"none\"",
@@ -8931,12 +8936,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "label",
-          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
-          "type": "string",
-          "default": "\"undefined\""
-        },
         {
           "name": "item-count",
           "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
@@ -8955,6 +8954,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
+          "type": "string"
+        },
         {
           "name": "separators",
           "attribute": "separators",
@@ -8983,13 +8988,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
-          "type": "string",
-          "default": "\"undefined\""
-        },
         {
           "name": "itemCount",
           "attribute": "item-count",

package/helpers/mathjax.js

@@ -43,12 +43,36 @@ class HtmlBlockMathRenderer {
 
 		const context = JSON.parse(contextVal) || {};
 
-		await typesetMath(elem, {
+		if (!elem.querySelector('math') && !(context.renderLatex && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
+
+		const mathJaxConfig = {
 			deferTypeset: true,
 			renderLatex: context.renderLatex,
 			outputScale: context.outputScale || 1,
 			window: window
+		};
+
+		await loadMathJax(mathJaxConfig);
+
+		// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
+		// This work-around should be removed when linebreaks are natively supported.
+		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
+		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
+		elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
+			elm.style.display = 'block';
+			elm.style.height = '0.5rem';
 		});
+
+		// If we're using deferred rendering, we need to create a document structure
+		// within the element so MathJax can appropriately process math.
+		if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
+
+		await window.MathJax.startup.promise;
+		window.D2L = window.D2L || {};
+
+		if (!window.D2L.renderingPromise) window.D2L.renderingPromise = Promise.resolve();
+		window.D2L.renderingPromise = window.D2L.renderingPromise.then(() => window.MathJax.typesetShadow(elem.getRootNode(), elem));
+		await window.D2L.renderingPromise;
 	}
 
 }
@@ -214,38 +238,3 @@ export function loadMathJax(mathJaxConfig) {
 	return win.D2L.mathJaxLoaded;
 
 }
-
-export async function typesetMath(elem, options) {
-	if (!elem.querySelector('math') && !(options.renderLatex && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
-
-	const win = options.window;
-
-	const mathJaxConfig = {
-		deferTypeset: options.deferTypeset,
-		renderLatex: options.renderLatex,
-		outputScale: options.outputScale || 1,
-		window: win
-	};
-
-	await loadMathJax(mathJaxConfig);
-
-	// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
-	// This work-around should be removed when linebreaks are natively supported.
-	// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
-	// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
-	elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
-		elm.style.display = 'block';
-		elm.style.height = '0.5rem';
-	});
-
-	// If we're using deferred rendering, we need to create a document structure
-	// within the element so MathJax can appropriately process math.
-	if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
-
-	await win.MathJax.startup.promise;
-	win.D2L = win.D2L || {};
-
-	if (!win.D2L.renderingPromise) win.D2L.renderingPromise = Promise.resolve();
-	win.D2L.renderingPromise = win.D2L.renderingPromise.then(() => win.MathJax.typesetShadow(elem.getRootNode(), elem));
-	await win.D2L.renderingPromise;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.121.0",
+  "version": "2.122.1",
   "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/integration.html

@@ -14,6 +14,7 @@
 			import '../../../components/collapsible-panel/collapsible-panel.js';
 			import '../../../components/collapsible-panel/collapsible-panel-summary-item.js';
 			import '../../../components/demo/demo-page.js';
+			import '../../../components/dialog/dialog.js';
 			import '../../../components/dialog/dialog-fullscreen.js';
 			import '../../../components/dropdown/dropdown-button-subtle.js';
 			import '../../../components/dropdown/dropdown-content.js';
@@ -54,6 +55,7 @@
 
 				<d2l-list item-count="50" extend-separators>
 					<d2l-list-controls slot="controls" select-all-pages-allowed>
+					<d2l-button-icon icon="tier1:gear" id="openMainDialog" text="Open"></d2l-button-icon>
 						<d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
 						<d2l-selection-action-dropdown text="Move To" requires-selection>
 							<d2l-dropdown-menu>
@@ -195,7 +197,6 @@
 					</d2l-list-item>
 				</d2l-list>
 
-
 				<div style="height: 100px;"></div>
 
 				<d2l-list item-count="50">
@@ -341,9 +342,7 @@
 					</d2l-list-item>
 				</d2l-list>
 
-			</div>
-			<div slot="secondary" style="padding: 1rem;">
-				<d2l-dialog-fullscreen id="dialogFullscreen" title-text="Fullscreen Title">
+				<d2l-dialog-fullscreen id="dialogMain" title-text="Dialog Title">
 					<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
 					<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 					<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
@@ -353,14 +352,32 @@
 					<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
 					<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 				</d2l-dialog-fullscreen>
+
+				<script>
+					document.querySelector('#openMainDialog').addEventListener('click', () => {
+						document.querySelector('#dialogMain').opened = true;
+					});
+					document.querySelector('#dialogMain').addEventListener('d2l-dialog-close', (e) => {
+						console.log('main dialog action:', e.detail.action);
+					});
+				</script>
+
+			</div>
+			<div slot="secondary" style="padding: 1rem;">
+
 				<d2l-collapsible-panel panel-title="Availability" expanded>
 					<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
 					<d2l-collapsible-panel-summary-item slot="summary" text="Hidden by special access"></d2l-collapsible-panel-summary-item>
-					<d2l-button-icon slot="actions" icon="tier1:gear" id="open" text="Settings"></d2l-button-icon>
+					<d2l-button-icon slot="actions" icon="tier1:gear" id="openSecondaryDialog" text="Settings"></d2l-button-icon>
 					<d2l-dropdown-more slot="actions">
 						<d2l-dropdown-menu>
 							<d2l-menu>
+								<d2l-menu-item text="Add New"></d2l-menu-item>
+								<d2l-menu-item text="Bookmark"></d2l-menu-item>
 								<d2l-menu-item text="Duplicate"></d2l-menu-item>
+								<d2l-menu-item text="Settings"></d2l-menu-item>
+								<d2l-menu-item text="Move"></d2l-menu-item>
+								<d2l-menu-item text="Publish"></d2l-menu-item>
 								<d2l-menu-item text="Delete"></d2l-menu-item>
 							</d2l-menu>
 						</d2l-dropdown-menu>
@@ -397,12 +414,24 @@
 					</div>
 					<d2l-input-textarea label="Extra Text" label-hidden rows="6" value="This is a d2l-input-textarea." style="margin-top: 1rem;"></d2l-input-textarea>
 				</d2l-collapsible-panel>
+
+				<d2l-dialog id="dialogSecondary" title-text="Dialog Title">
+					<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+					<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+					<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+					<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+					<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+					<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+					<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
+					<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+				</d2l-dialog>
+
 				<script>
-					document.querySelector('#open').addEventListener('click', () => {
-						document.querySelector('#dialogFullscreen').opened = true;
+					document.querySelector('#openSecondaryDialog').addEventListener('click', () => {
+						document.querySelector('#dialogSecondary').opened = true;
 					});
-					document.querySelector('#dialogFullscreen').addEventListener('d2l-dialog-close', (e) => {
-						console.log('confirm action:', e.detail.action);
+					document.querySelector('#dialogSecondary').addEventListener('d2l-dialog-close', (e) => {
+						console.log('secondary dialog action:', e.detail.action);
 					});
 				</script>
 				<p>