@brightspace-ui/core 1.213.1 → 1.216.0

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');
@@ -207,6 +217,7 @@ class HtmlBlock extends LitElement {
 	}
 
 	_findSlottedElement(tagName, slot) {
+		if (!this.shadowRoot) return;
 		if (!slot) slot = this.shadowRoot.querySelector('slot');
 		return slot.assignedNodes({ flatten: true })
 			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === tagName.toUpperCase()));

package/components/inputs/demo/input-radio-solo-test.js

@@ -38,7 +38,7 @@ class TestInputRadioSolo extends LitElement {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('input');
 		if (elem) elem.focus();
 	}
 

package/components/inputs/demo/input-radio-spacer-test.js

@@ -19,7 +19,7 @@ class TestInputRadioSpacer extends LitElement {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('input');
 		if (elem) elem.focus();
 	}
 

package/components/inputs/demo/input-select-test.js

@@ -53,7 +53,7 @@ class TestInputSelect extends SkeletonMixin(RtlMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('select');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('select');
 		if (elem) elem.focus();
 	}
 

package/components/inputs/input-checkbox.js

@@ -205,7 +205,7 @@ class InputCheckbox extends SkeletonMixin(RtlMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('input.d2l-input-checkbox');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('input.d2l-input-checkbox');
 		if (elem) elem.focus();
 	}
 

package/components/inputs/input-date-range.js

@@ -163,8 +163,8 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 	}
 
 	render() {
-		const startDateInput = this.shadowRoot.querySelector('.d2l-input-date-range-start');
-		const endDateInput = this.shadowRoot.querySelector('.d2l-input-date-range-end');
+		const startDateInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-range-start');
+		const endDateInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-range-end');
 		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
 		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
 		return html`
@@ -252,11 +252,12 @@ class InputDateRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 	}
 
 	focus() {
-		const input = this.shadowRoot.querySelector('d2l-input-date');
+		const input = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-date');
 		if (input) input.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const startDateInput = this.shadowRoot.querySelector('.d2l-input-date-range-start');
 		const endDateInput = this.shadowRoot.querySelector('.d2l-input-date-range-end');
 		const errors = await Promise.all([startDateInput.validate(), endDateInput.validate(), super.validate()]);

package/components/inputs/input-date-time-range-to.js

@@ -179,7 +179,7 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 	}
 
 	_startObserving() {
-		if (!this._parentNode) return;
+		if (!this.shadowRoot || !this._parentNode) return;
 
 		const leftElem = this.shadowRoot.querySelector('.d2l-input-date-time-range-start-container');
 		this._leftElemResizeObserver = this._leftElemResizeObserver || new ResizeObserver(() => {

package/components/inputs/input-date-time-range.js

@@ -209,8 +209,8 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 	}
 
 	render() {
-		const startDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-start');
-		const endDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-end');
+		const startDateTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-time-range-start');
+		const endDateTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-time-range-end');
 
 		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
 		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
@@ -308,11 +308,12 @@ class InputDateTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(Localiz
 	}
 
 	focus() {
-		const input = this.shadowRoot.querySelector('d2l-input-date-time');
+		const input = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-date-time');
 		if (input) input.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const startDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-start');
 		const endDateTimeInput = this.shadowRoot.querySelector('.d2l-input-date-time-range-end');
 		const errors = await Promise.all([startDateTimeInput.validate(), endDateTimeInput.validate(), super.validate()]);

package/components/inputs/input-date-time.js

@@ -296,11 +296,12 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-date');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-date');
 		if (elem) elem.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const dateInput = this.shadowRoot.querySelector('d2l-input-date');
 		const timeInput = this.shadowRoot.querySelector('d2l-input-time');
 		const errors = await Promise.all([dateInput.validate(), timeInput.validate(), super.validate()]);
@@ -319,7 +320,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		if (!newDate) {
 			this.value = '';
 		} else {
-			const inputTime = this.shadowRoot.querySelector('d2l-input-time');
+			const inputTime = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-time');
 			let time;
 			if (e.detail && e.detail.setToNow) time = _getFormattedDefaultTime('now');
 			else time = inputTime ? inputTime.value : _getFormattedDefaultTime(this.timeDefaultValue);
@@ -346,12 +347,12 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 	}
 
 	_handleInputTimeBlur() {
-		const tooltip = this.shadowRoot.querySelector('d2l-tooltip');
+		const tooltip = this.shadowRoot && this.shadowRoot.querySelector('d2l-tooltip');
 		if (tooltip) tooltip.hide();
 	}
 
 	_handleInputTimeFocus() {
-		const tooltip = this.shadowRoot.querySelector('d2l-tooltip');
+		const tooltip = this.shadowRoot && this.shadowRoot.querySelector('d2l-tooltip');
 		if (tooltip) tooltip.show();
 	}
 
@@ -360,7 +361,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 	}
 
 	async _handleTimeChange(e) {
-		const date = this.shadowRoot.querySelector('d2l-input-date').value;
+		const date = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-date').value;
 		const time = e.target.value;
 		this.value = this.localized ? _formatLocalDateTimeInISO(date, time) : getUTCDateTimeFromLocalDateTime(date, time);
 		this._dispatchChangeEvent();

package/components/inputs/input-date.js

@@ -336,6 +336,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const textInput = this.shadowRoot.querySelector('d2l-input-text');
 		const errors = await Promise.all([textInput.validate(), super.validate()]);
 		return [...errors[0], ...errors[1]];
@@ -407,6 +408,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 	}
 
 	_handleDropdownOpen() {
+		if (!this.shadowRoot) return;
 		const calendarOffset = this.shadowRoot.querySelector('d2l-calendar').getBoundingClientRect();
 		const fullCalendarVisible = calendarOffset.y + calendarOffset.height < window.innerHeight;
 		if (this._dropdown && !this._dropdown.openedAbove && !fullCalendarVisible) {
@@ -432,6 +434,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
 	async _handleFirstDropdownOpen() {
 		this._dropdownFirstOpened = true;
 		await this.updateComplete;
+		if (!this.shadowRoot) return;
 		this._calendar = this.shadowRoot.querySelector('d2l-calendar');
 		this._dropdown = this.shadowRoot.querySelector('d2l-dropdown-content');
 		await this._calendar.updateComplete;

package/components/inputs/input-number.js

@@ -366,7 +366,7 @@ class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeC
 	}
 
 	async focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-text');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-text');
 		if (elem) {
 			elem.focus();
 		} else {
@@ -376,6 +376,7 @@ class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeC
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const inputTextElem = this.shadowRoot.querySelector('d2l-input-text');
 		await inputTextElem.updateComplete;
 		const childErrors = await inputTextElem.validate();

package/components/inputs/input-percent.js

@@ -132,11 +132,12 @@ class InputPercent extends LabelledMixin(SkeletonMixin(FormElementMixin(Localize
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-number');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-number');
 		if (elem) elem.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const inputNumberElem = this.shadowRoot.querySelector('d2l-input-number');
 		await inputNumberElem.updateComplete;
 		const childErrors = await inputNumberElem.validate();

package/components/inputs/input-search.js

@@ -123,7 +123,7 @@ class InputSearch extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('d2l-input-text');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-text');
 		if (elem) elem.focus();
 	}
 
@@ -132,7 +132,7 @@ class InputSearch extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._dispatchEvent();
 		if (!this.noClear && this.value.length > 0) {
 			this.updateComplete.then(() => {
-				this.shadowRoot.querySelector('d2l-button-icon').focus();
+				if (this.shadowRoot) this.shadowRoot.querySelector('d2l-button-icon').focus();
 			});
 		}
 	}
@@ -158,7 +158,7 @@ class InputSearch extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			this._setLastSearchValue('');
 			this._dispatchEvent();
 		}
-		this.shadowRoot.querySelector('d2l-input-text').focus();
+		if (this.shadowRoot) this.shadowRoot.querySelector('d2l-input-text').focus();
 	}
 
 	_handleInput(e) {

package/components/inputs/input-text.js

@@ -271,13 +271,13 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 
 	/** @ignore */
 	get selectionEnd() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		return elem ? elem.selectionEnd : 0;
 	}
 
 	/** @ignore */
 	get selectionStart() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		return elem ? elem.selectionStart : 0;
 	}
 
@@ -301,7 +301,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 
 	/** @ignore */
 	get validity() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		if (!elem.validity.valid) {
 			return elem.validity;
 		}
@@ -318,7 +318,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
-		const container = this.shadowRoot.querySelector('.d2l-input-text-container');
+		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
 		if (!container) return;
 		container.removeEventListener('blur', this._handleBlur, true);
 		container.removeEventListener('focus', this._handleFocus, true);
@@ -331,7 +331,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 
 		this._setValue(this.value, true);
 
-		const container = this.shadowRoot.querySelector('.d2l-input-text-container');
+		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
 		if (!container) return;
 		container.addEventListener('blur', this._handleBlur, true);
 		container.addEventListener('focus', this._handleFocus, true);
@@ -464,7 +464,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 	}
 
 	async focus() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		if (elem) {
 			elem.focus();
 		} else {
@@ -572,7 +572,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 		this._prevValue = (oldVal === undefined) ? '' : oldVal;
 		this._value = val;
 
-		const input = this.shadowRoot.querySelector('.d2l-input');
+		const input = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		if (!input) return;
 
 		this.setValidity({ tooShort: this.minlength && this.value.length > 0 && this.value.length < this.minlength });
@@ -595,7 +595,7 @@ class InputText extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(Li
 	_updateInputLayout() {
 
 		// defer until we're visible
-		if (!this._isIntersecting) return;
+		if (!this.shadowRoot || !this._isIntersecting) return;
 
 		const firstContainer = this.shadowRoot.querySelector('.d2l-input-inside-before');
 		const firstSlotHasNodes = firstContainer.querySelector('slot').assignedNodes({ flatten: true }).length > 0

package/components/inputs/input-textarea.js

@@ -165,7 +165,7 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 	/** @ignore */
 	get textarea() {
 		// temporary until consumers are updated
-		return this.shadowRoot.querySelector('textarea');
+		return this.shadowRoot && this.shadowRoot.querySelector('textarea');
 	}
 
 	/** @ignore */
@@ -178,8 +178,8 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 
 	/** @ignore */
 	get validity() {
-		const elem = this.shadowRoot.querySelector('textarea');
-		if (!elem.validity.valid) {
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('textarea');
+		if (elem && !elem.validity.valid) {
 			return elem.validity;
 		}
 		return super.validity;
@@ -264,7 +264,7 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 	}
 
 	async focus() {
-		const elem = this.shadowRoot.querySelector('textarea');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('textarea');
 		if (elem) {
 			elem.focus();
 		} else {
@@ -274,7 +274,7 @@ class InputTextArea extends LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixi
 	}
 
 	async select() {
-		const elem = this.shadowRoot.querySelector('textarea');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('textarea');
 		if (elem) {
 			elem.select();
 		} else {

package/components/inputs/input-time-range.js

@@ -210,9 +210,8 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 		const startLabel = this.startLabel ? this.startLabel : this.localize('components.input-time-range.startTime');
 		const endLabel = this.endLabel ? this.endLabel : this.localize('components.input-time-range.endTime');
 
-		const startTimeInput = this.shadowRoot.querySelector('.d2l-input-time-range-start');
-		const endTimeInput = this.shadowRoot.querySelector('.d2l-input-time-range-end');
-
+		const startTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-time-range-start');
+		const endTimeInput =  this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-time-range-end');
 		/**
 		 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
 		 */
@@ -304,11 +303,12 @@ class InputTimeRange extends SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCor
 	}
 
 	focus() {
-		const input = this.shadowRoot.querySelector('d2l-input-time');
+		const input = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-time');
 		if (input) input.focus();
 	}
 
 	async validate() {
+		if (!this.shadowRoot) return;
 		const startTimeInput = this.shadowRoot.querySelector('.d2l-input-time-range-start');
 		const endTimeInput = this.shadowRoot.querySelector('.d2l-input-time-range-end');
 		const errors = await Promise.all([startTimeInput.validate(), endTimeInput.validate(), super.validate()]);

package/components/inputs/input-time.js

@@ -350,7 +350,7 @@ class InputTime extends LabelledMixin(SkeletonMixin(FormElementMixin(LitElement)
 	}
 
 	focus() {
-		const elem = this.shadowRoot.querySelector('.d2l-input');
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
 		if (elem) elem.focus();
 	}
 

package/components/link/link.js

@@ -118,7 +118,7 @@ class Link extends LitElement {
 	}
 
 	focus() {
-		const link = this.shadowRoot.querySelector('.d2l-link');
+		const link = this.shadowRoot && this.shadowRoot.querySelector('.d2l-link');
 		if (link) link.focus();
 	}
 }