@brightspace-ui/core 1.213.2 → 1.215.2

package/components/html-block/demo/html-block.html

@@ -80,6 +80,37 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (compact)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block compact>
+						<template>
+							<h1>heading 1</h1>
+							<h2>heading 2</h2>
+							<h3>heading 3</h3>
+							<h4>heading 4</h4>
+							<h5>heading 5</h5>
+							<h6>heading 6</h6>
+							<div><strong>strong</strong></div>
+							<div><b>bold</b></div>
+							<div>text</div>
+							<pre>preformatted</pre>
+							<p>paragraph</p>
+							<ul>
+								<li>unordered item 1</li>
+								<li>unordered item 2</li>
+							</ul>
+							<ol>
+								<li>ordered item 1</li>
+								<li>ordered item 2</li>
+							</ol>
+							<div><a href="https://d2l.com">anchor</a></div>
+						</template>
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (math)</h2>
 
 			<d2l-demo-snippet>

package/components/html-block/html-block.js

@@ -5,6 +5,11 @@ import { HtmlBlockMathRenderer } from '../../helpers/mathjax.js';
 import { requestInstance } from '../../mixins/provider-mixin.js';
 
 export const htmlBlockContentStyles = css`
+	.d2l-html-block-compact {
+		font-size: 0.8rem;
+		font-weight: 400;
+		line-height: 1.2rem;
+	}
 	h1, h2, h3, h4, h5, h6, b, strong, b *, strong * {
 		font-weight: bold;
 	}
@@ -49,7 +54,11 @@ export const htmlBlockContentStyles = css`
 	ul, ol {
 		list-style-position: outside;
 		margin: 1em 0;
-		padding-left: 3em;
+		padding-inline-start: 3em;
+	}
+	.d2l-html-block-compact ul,
+	.d2l-html-block-compact ol {
+		padding-inline-start: 1.5em;
 	}
 	ul, ul[type="disc"] {
 		list-style-type: disc;
@@ -95,11 +104,6 @@ export const htmlBlockContentStyles = css`
 	:host([dir="rtl"]) {
 		text-align: right;
 	}
-	:host([dir="rtl"]) ul,
-	:host([dir="rtl"]) ol {
-		padding-left: 0;
-		padding-right: 3em;
-	}
 `;
 
 let renderers;
@@ -120,6 +124,11 @@ class HtmlBlock extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * Whether compact styles should be applied
+			 * @type {Boolean}
+			 */
+			compact: { type: Boolean },
 			/**
 			 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
 			 * unless your HTML relies on script executions that may break upon stamping.
@@ -153,6 +162,7 @@ class HtmlBlock extends LitElement {
 
 	constructor() {
 		super();
+		this.compact = false;
 		this.noDeferredRendering = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {
@@ -185,7 +195,7 @@ class HtmlBlock extends LitElement {
 
 		if (this._renderContainer) return;
 
-		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered"></div><slot></slot>';
+		this.shadowRoot.innerHTML += `<div class="d2l-html-block-rendered${this.compact ? ' d2l-html-block-compact' : ''}"></div><slot></slot>`;
 
 		this.shadowRoot.querySelector('slot').addEventListener('slotchange', async e => await this._render(e.target));
 		this._renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');

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/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/custom-elements.json

@@ -3378,6 +3378,12 @@
       "path": "./components/html-block/html-block.js",
       "description": "A component for displaying user-authored HTML.",
       "attributes": [
+        {
+          "name": "compact",
+          "description": "Whether compact styles should be applied",
+          "type": "Boolean",
+          "default": "false"
+        },
         {
           "name": "no-deferred-rendering",
           "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
@@ -3386,6 +3392,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "compact",
+          "attribute": "compact",
+          "description": "Whether compact styles should be applied",
+          "type": "Boolean",
+          "default": "false"
+        },
         {
           "name": "noDeferredRendering",
           "attribute": "no-deferred-rendering",

package/directives/animate/animate.js

@@ -1,6 +1,8 @@
-import { directive, PropertyPart } from 'lit-html';
+import { directive, PartType } from 'lit-html/directive.js';
 import { getComposedActiveElement, getNextFocusable } from '../../helpers/focus.js';
+import { AsyncDirective } from 'lit-html/async-directive.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
+import { noChange } from 'lit-html';
 
 const stateMap = new WeakMap();
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -10,15 +12,13 @@ const moveYValue = 20;
 
 class AnimationState {
 
-	constructor(propertyPart) {
-
-		if (!(propertyPart instanceof PropertyPart) || propertyPart.committer.name !== 'animate') {
-			throw new Error('animation directives must be used with "animate" property');
+	constructor(partInfo) {
+		if (!(partInfo.type === PartType.PROPERTY) || partInfo.name !== 'animate') {
+			throw new Error('animate directives must be used with "animate" property');
 		}
-
 		this.id = 0;
 		this.clone = null;
-		this.elem = propertyPart.committer.element;
+		this.elem = partInfo.element;
 		this.state = 'unknown';
 		this.styleAttr = null;
 		this.styleAttrUse = false;
@@ -289,20 +289,37 @@ class AnimationState {
 
 }
 
-async function helper(part, action, opts) {
-	let state = stateMap.get(part);
-	if (state === undefined) {
-		state = new AnimationState(part);
-		stateMap.set(part, state);
+class Hide extends AsyncDirective {
+	render() {
+		return noChange;
 	}
-	opts = opts || {};
-	if (action === 'show') {
-		state.show(opts);
-	} else if (action === 'hide') {
+	update(part, [opts]) {
+		opts = opts || {};
+		let state = stateMap.get(part.element);
+		if (state === undefined) {
+			state = new AnimationState(part);
+			stateMap.set(part.element, state);
+		}
 		state.hide(opts);
+		return this.render();
 	}
 }
 
-export const hide = directive((opts) => async(part) => helper(part, 'hide', opts));
+class Show extends AsyncDirective {
+	render() {
+		return noChange;
+	}
+	update(part, [opts]) {
+		opts = opts || {};
+		let state = stateMap.get(part.element);
+		if (state === undefined) {
+			state = new AnimationState(part);
+			stateMap.set(part.element, state);
+		}
+		state.show(opts);
+		return this.render();
+	}
+}
 
-export const show = directive((opts) => async(part) => helper(part, 'show', opts));
+export const hide = directive(Hide);
+export const show = directive(Show);

package/package.json

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