@brightspace-ui/core 1.230.0 → 1.230.4

package/components/inputs/input-number.js

@@ -264,14 +264,13 @@ class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeC
 			countDecimalDigits(this._valueTrailingZeroes, false),
 			this.maxFractionDigits
 		);
-		let valueTrailingZeroes = this.value.toString();
-		const decimalDiff = (numDecimals - countDecimalDigits(valueTrailingZeroes, false));
-		if (decimalDiff > 0) {
-			if (decimalDiff === numDecimals) {
-				valueTrailingZeroes += '.';
+		const valueTrailingZeroes = new Intl.NumberFormat(
+			'en-US',
+			{
+				minimumFractionDigits: numDecimals,
+				useGrouping: false
 			}
-			valueTrailingZeroes = valueTrailingZeroes.padEnd(valueTrailingZeroes.length + decimalDiff, '0');
-		}
+		).format(this.value);
 		return valueTrailingZeroes;
 	}
 	set valueTrailingZeroes(val) {

package/components/list/list-item-mixin.js

@@ -105,15 +105,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				filter: grayscale(75%);
 				opacity: 0.4;
 			}
-			:host([draggable]) .d2l-list-item-drag-image {
-				transform: rotate(-1deg);
-			}
 			:host([dragging]) .d2l-list-item-drag-image {
 				background: white;
 			}
-			:host([draggable]) d2l-list-item-generic-layout {
-				transform: rotate(1deg);
-			}
 			d2l-list-item-generic-layout {
 				border-bottom: 1px solid var(--d2l-color-mica);
 				border-top: 1px solid var(--d2l-color-mica);
@@ -281,10 +275,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				width: 100%;
 				z-index: 5;
 			}
-			:host([draggable][selected]:not([disabled])) .d2l-list-item-active-border,
-			:host([draggable][selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
-				transform: rotate(1deg);
-			}
 			d2l-tooltip > div {
 				font-weight: 700;
 			}
@@ -466,52 +456,54 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
 		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
 
+		const innerView = html`
+			<d2l-list-item-generic-layout
+				@focusin="${this._onFocusIn}"
+				@focusout="${this._onFocusOut}"
+				class="${classMap(classes)}"
+				data-breakpoint="${this._breakpoint}"
+				data-separators="${ifDefined(this._separators)}"
+				?grid-active="${this.role === 'rowgroup'}">
+				${this._renderDropTarget()}
+				${this._renderDragHandle(this._renderOutsideControl)}
+				${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
+				${this.selectable ? html`
+				<div slot="control">${this._renderCheckbox()}</div>
+				<div slot="control-action"
+					@mouseenter="${this._onMouseEnter}"
+					@mouseleave="${this._onMouseLeave}">
+						${this._renderCheckboxAction('')}
+				</div>` : nothing }
+				${primaryAction ? html`
+				<div slot="content-action"
+					@focusin="${this._onFocusInPrimaryAction}"
+					@focusout="${this._onFocusOutPrimaryAction}"
+					@mouseenter="${this._onMouseEnterPrimaryAction}"
+					@mouseleave="${this._onMouseLeavePrimaryAction}">
+						${primaryAction}
+				</div>` : nothing}
+				<div slot="content"
+					class="${classMap(contentClasses)}"
+					id="${this._contentId}">
+					<slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
+					<slot>${content}</slot>
+				</div>
+				<div slot="actions"
+					@mouseenter="${this._onMouseEnter}"
+					@mouseleave="${this._onMouseLeave}"
+					class="d2l-list-item-actions-container">
+					<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
+				</div>
+				<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
+					<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
+				</div>
+			</d2l-list-item-generic-layout>
+			<div class="d2l-list-item-active-border"></div>
+		`;
+
 		return html`
 			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
-			<div class="d2l-list-item-drag-image">
-				<d2l-list-item-generic-layout
-					@focusin="${this._onFocusIn}"
-					@focusout="${this._onFocusOut}"
-					class="${classMap(classes)}"
-					data-breakpoint="${this._breakpoint}"
-					data-separators="${ifDefined(this._separators)}"
-					?grid-active="${this.role === 'rowgroup'}">
-					${this._renderDropTarget()}
-					${this._renderDragHandle(this._renderOutsideControl)}
-					${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
-					${this.selectable ? html`
-					<div slot="control">${this._renderCheckbox()}</div>
-					<div slot="control-action"
-						@mouseenter="${this._onMouseEnter}"
-						@mouseleave="${this._onMouseLeave}">
-							${this._renderCheckboxAction('')}
-					</div>` : nothing }
-					${primaryAction ? html`
-					<div slot="content-action"
-						@focusin="${this._onFocusInPrimaryAction}"
-						@focusout="${this._onFocusOutPrimaryAction}"
-						@mouseenter="${this._onMouseEnterPrimaryAction}"
-						@mouseleave="${this._onMouseLeavePrimaryAction}">
-							${primaryAction}
-					</div>` : nothing}
-					<div slot="content"
-						class="${classMap(contentClasses)}"
-						id="${this._contentId}">
-						<slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
-						<slot>${content}</slot>
-					</div>
-					<div slot="actions"
-						@mouseenter="${this._onMouseEnter}"
-						@mouseleave="${this._onMouseLeave}"
-						class="d2l-list-item-actions-container">
-						<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
-					</div>
-					<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
-						<slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
-					</div>
-				</d2l-list-item-generic-layout>
-				<div class="d2l-list-item-active-border"></div>
-			</div>
+			${this.draggable ? html`<div class="d2l-list-item-drag-image">${innerView}</div>` : innerView}
 			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
 			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;

package/components/menu/menu-item-mixin.js

@@ -1,6 +1,4 @@
-
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
-export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMixin(superclass) {
+export const MenuItemMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {

package/components/menu/menu-item-styles.js

@@ -17,8 +17,8 @@ export const menuItemStyles = css`
 	}
 
 	:host(:hover),
-	:host(.focus-visible),
-	:host(.focus-visible[first]),
+	:host(:focus-visible),
+	:host(:focus-visible[first]),
 	:host([first]:hover) {
 		background-color: var(--d2l-menu-background-color-hover);
 		border-bottom: 1px solid var(--d2l-menu-border-color-hover);
@@ -27,7 +27,7 @@ export const menuItemStyles = css`
 		z-index: 2;
 	}
 
-	:host([disabled]), :host([disabled]:hover), :host([disabled].focus-visible) {
+	:host([disabled]), :host([disabled]:hover), :host([disabled]:focus-visible) {
 		cursor: default;
 		opacity: 0.75;
 	}
@@ -40,7 +40,7 @@ export const menuItemStyles = css`
 		border-top-color: transparent;
 	}
 
-	:host([last].focus-visible),
+	:host([last]:focus-visible),
 	:host([last]:hover) {
 		border-bottom-color: var(--d2l-menu-border-color-hover);
 	}

package/components/menu/menu.js

@@ -2,7 +2,6 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import './menu-item-return.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
 import { ThemeMixin } from '../../mixins/theme-mixin.js';
 
@@ -21,7 +20,7 @@ const keyCodes = {
  * @slot - Menu items
  * @fires d2l-menu-resize - Dispatched when size of menu changes (e.g., when nested menu of a different size is opened)
  */
-class Menu extends ThemeMixin(HierarchicalViewMixin(FocusVisiblePolyfillMixin(LitElement))) {
+class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 
 	static get properties() {
 		return {

package/helpers/mathjax.js

@@ -1,4 +1,34 @@
+/* When updating MathJax, update mathjaxBaseUrl to use the new version
+ * and verify that the font mappings included in mathjaxFontMappings
+ * match what's present in the MathJax-src repo.
+ */
+
 const mathjaxContextAttribute = 'data-mathjax-context';
+const mathjaxBaseUrl = 'https://s.brightspace.com/lib/mathjax/3.1.2';
+
+const mathjaxFontMappings = new Map([
+	['MJXTEX', 'MathJax_Main-Regular'],
+	['MJXTEX-B', 'MathJax_Main-Bold'],
+	['MJXTEX-I', 'MathJax_Math-Italic'],
+	['MJXTEX-MI', 'MathJax_Main-Italic'],
+	['MJXTEX-BI', 'MathJax_Math-BoldItalic'],
+	['MJXTEX-S1', 'MathJax_Size1-Regular'],
+	['MJXTEX-S2', 'MathJax_Size2-Regular'],
+	['MJXTEX-S3', 'MathJax_Size3-Regular'],
+	['MJXTEX-S4', 'MathJax_Size4-Regular'],
+	['MJXTEX-A', 'MathJax_AMS-Regular'],
+	['MJXTEX-C', 'MathJax_Calligraphic-Regular'],
+	['MJXTEX-CB', 'MathJax_Calligraphic-Bold'],
+	['MJXTEX-FR', 'MathJax_Fraktur-Regular'],
+	['MJXTEX-FRB', 'MathJax_Fraktur-Bold'],
+	['MJXTEX-SS', 'MathJax_SansSerif-Regular'],
+	['MJXTEX-SSB', 'MathJax_SansSerif-Bold'],
+	['MJXTEX-SSI',  'MathJax_SansSerif-Italic'],
+	['MJXTEX-SC', 'MathJax_Script-Regular'],
+	['MJXTEX-T', 'MathJax_Typewriter-Regular'],
+	['MJXTEX-V', 'MathJax_Vector-Regular'],
+	['MJXTEX-VB', 'MathJax_Vector-Bold']
+]);
 
 let mathJaxLoaded;
 
@@ -158,6 +188,23 @@ export function loadMathJax(mathJaxConfig) {
 		}
 	};
 
+	if (mathJaxConfig && mathJaxConfig.deferTypeset && !document.head.querySelector('#d2l-mathjax-fonts') && !document.head.querySelector('#MJX-CHTML-styles')) {
+		const styleElem = document.createElement('style');
+		styleElem.id = 'd2l-mathjax-fonts';
+
+		let fontImportStyles = '';
+		mathjaxFontMappings.forEach((font, family) => {
+			fontImportStyles +=
+				`\n@font-face {
+					font-family: ${family};
+					src: url("${mathjaxBaseUrl}/output/chtml/fonts/woff-v2/${font}.woff") format("woff");
+				}`;
+		});
+
+		styleElem.textContent = fontImportStyles;
+		document.head.appendChild(styleElem);
+	}
+
 	mathJaxLoaded = new Promise(resolve => {
 		const script = document.createElement('script');
 		script.async = 'async';
@@ -167,7 +214,7 @@ export function loadMathJax(mathJaxConfig) {
 			? 'tex-mml-chtml'
 			: 'mml-chtml';
 
-		script.src = `https://s.brightspace.com/lib/mathjax/3.1.2/${component}.js`;
+		script.src = `${mathjaxBaseUrl}/${component}.js`;
 		document.head.appendChild(script);
 	});
 

package/package.json

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