@brightspace-ui/core 3.47.0 → 3.48.0

package/components/calendar/README.md

@@ -30,8 +30,12 @@ Note: All `*-value` properties should be in ISO 8601 calendar date format (`YYYY
 * `d2l-calendar-selected`: dispatched when a date is selected through click, space, or enter. `e.detail.date` is in ISO 8601 calendar date format (`YYYY-MM-DD`).
 <!-- docs: end hidden content -->
 
+### Methods
+
+- `getShownValue()`: returns the date representing the year and month in view as an ISO 8601 calendar date format (`YYYY-MM-DD`).
+
 ## Accessibility
 
 The Daylight calendar (`d2l-calendar`) generally follows the W3C's best practice recommendations for a [Date picker dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/). Of note is the keyboard behaviour following the [grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
 
-The W3C recommendations, specifically relating to `attributes` on the calendar's table elements, were followed as much as possible. At the time of development it was not possible to create a calendar with a `grid` role which had the desired appearance, functionality, and supported all browser/screen reader combinations that we support; the expected screen reader experience was replicated as much as possible (e.g., announcing the expected content).
+The W3C recommendations, specifically relating to `attributes` on the calendar's table elements, were followed as much as possible. At the time of development it was not possible to create a calendar with a `grid` role which had the desired appearance, functionality, and supported all browser/screen reader combinations that we support; the expected screen reader experience was replicated as much as possible (e.g., announcing the expected content).

package/components/calendar/calendar.js

@@ -40,7 +40,8 @@ function getCalendarData() {
 	return calendarData;
 }
 
-function getInitialFocusDate(selectedValue, minValue, maxValue) {
+function getInitialFocusDate(initialValue, selectedValue, minValue, maxValue) {
+	if (initialValue) return getDateFromISODate(initialValue);
 	if (selectedValue) return getDateFromISODate(selectedValue);
 	else return getDateFromISODate(getClosestValidDate(minValue, maxValue, false));
 }
@@ -50,9 +51,9 @@ export function checkIfDatesEqual(date1, date2) {
 	return date1.getTime() === date2.getTime();
 }
 
-export function getMinMaxDatesInView(selectedValue, minValue, maxValue) {
+export function getMinMaxDatesInView(initialValue, selectedValue, minValue, maxValue) {
 	getCalendarData();
-	const date = getInitialFocusDate(selectedValue, minValue, maxValue);
+	const date = getInitialFocusDate(initialValue, selectedValue, minValue, maxValue);
 	const dates = getDatesInMonthArray(date.getMonth(), date.getFullYear());
 	return {
 		maxValue: dates[dates.length - 1][6],
@@ -160,6 +161,11 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			 * @type {string}
 			 */
 			label: { attribute: 'label', reflect: true, type: String },
+			/**
+			 * ADVANCED: Initial date to override the logic for determining default date to initially show
+			 * @type {string}
+			 */
+			initialValue: { attribute: 'initial-value', type: String },
 			/**
 			 * Maximum valid date that could be selected by a user
 			 * @type {string}
@@ -609,7 +615,9 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			composed: false,
 			detail: {
 				maxValue: dates[dates.length - 1][6],
-				minValue: dates[0][0]
+				month: this._shownMonth,
+				minValue: dates[0][0],
+				year: this._shownYear
 			}
 		}));
 
@@ -625,6 +633,10 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}
 	}
 
+	getShownValue() {
+		return new Date(this._shownYear, this._shownMonth).toISOString();
+	}
+
 	async reset(allowDisabled) {
 		const date = this._getInitialFocusDate();
 		await this._updateFocusDate(date, false, allowDisabled);
@@ -649,7 +661,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	_getInitialFocusDate() {
-		const date = getInitialFocusDate(this.selectedValue, this.minValue, this.maxValue);
+		const date = getInitialFocusDate(this.initialValue, this.selectedValue, this.minValue, this.maxValue);
 		this._shownMonth = date.getMonth();
 		this._shownYear = date.getFullYear();
 		return date;

package/components/calendar/demo/calendar.html

@@ -62,8 +62,11 @@
 						};
 
 						const calendar = document.querySelector('#eventsCalendar');
-						calendar.dayInfos = getEvents(getMinMaxDatesInView(calendar.selectedValue));
-						calendar.addEventListener('d2l-calendar-view-change', e => calendar.dayInfos = getEvents(e.detail));
+						calendar.dayInfos = getEvents(getMinMaxDatesInView(undefined, calendar.selectedValue));
+						calendar.addEventListener('d2l-calendar-view-change', e => {
+							console.log(e);
+							calendar.dayInfos = getEvents(e.detail);
+						});
 					</script>
 				</template>
 			</d2l-demo-snippet>

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

@@ -1,13 +1,14 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { renderEmbeds } from '../../helpers/embeds.js';
 import { requestInstance } from '../../mixins/provider/provider-mixin.js';
 import { tryGet } from '@brightspace-ui/lms-context-provider/client.js';
-import { until } from 'lit/directives/until.js';
 
 export const htmlBlockContentStyles = css`
 	.d2l-html-block-rendered {
@@ -142,7 +143,7 @@ const getRenderers = async() => {
 /**
  * A component for displaying user-authored HTML.
  */
-class HtmlBlock extends LitElement {
+class HtmlBlock extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -206,8 +207,7 @@ class HtmlBlock extends LitElement {
 		this._initialContextResolve = undefined;
 		this._initialContextPromise = new Promise(resolve => this._initialContextResolve = resolve);
 
-		this._renderersProcessedResolve = undefined;
-		this._renderersProcessedPromise = new Promise(resolve => this._renderersProcessedResolve = resolve);
+		this._renderContainerRef = createRef();
 
 		const contextKeysPromise = getRenderers().then(renderers => renderers.reduce((keys, currentRenderer) => {
 			if (currentRenderer.contextKeys) currentRenderer.contextKeys.forEach(key => keys.push(key));
@@ -216,10 +216,7 @@ class HtmlBlock extends LitElement {
 
 		const contextValsPromise = contextKeysPromise.then(contextKeys => {
 			return Promise.allSettled(contextKeys.map(key => {
-				return tryGet(key, undefined, ctx => {
-					this._context.set(key, ctx);
-					this.updated(new Map([['_context']]));
-				});
+				return tryGet(key, undefined, ctx => this._context.set(key, ctx));
 			}));
 		});
 
@@ -238,24 +235,18 @@ class HtmlBlock extends LitElement {
 		};
 
 		return html`
-			<div class="${classMap(renderContainerClasses)}">
-				${!this.noDeferredRendering ? until(this._processEmbeds(), nothing) : nothing}
-			</div>
+			<div class="${classMap(renderContainerClasses)}" ${ref(this._renderContainerRef)}></div>
 			${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
 		`;
 	}
 
 	async updated(changedProperties) {
 		super.updated(changedProperties);
-		if ((changedProperties.has('embeds') || changedProperties.has('_context')) && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
+		if (this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
 			await this._updateRenderContainer();
 		}
 	}
 
-	async getLoadingComplete() {
-		return this._renderersProcessedPromise;
-	}
-
 	async _handleSlotChange(e) {
 		if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
 		await this._renderInline(e.target);
@@ -264,7 +255,6 @@ class HtmlBlock extends LitElement {
 	async _processEmbeds() {
 		const htmlFragment = document.createRange().createContextualFragment(this.html);
 		await renderEmbeds(htmlFragment);
-		this.updated(new Map([['embeds']]));
 		return htmlFragment;
 	}
 
@@ -289,7 +279,7 @@ class HtmlBlock extends LitElement {
 				loadingCompletePromises.push(renderer.getLoadingComplete());
 			}
 		}
-		Promise.all(loadingCompletePromises).then(() => this._renderersProcessedResolve());
+		Promise.all(loadingCompletePromises).then(this.resolveLoadingComplete);
 	}
 
 	async _renderInline(slot) {
@@ -300,15 +290,16 @@ class HtmlBlock extends LitElement {
 			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'DIV'));
 
 		if (!noDeferredRenderingContainer) {
-			this._renderersProcessedResolve();
+			this.resolveLoadingComplete();
 			return;
 		}
 		await this._processRenderers(noDeferredRenderingContainer);
 	}
 
 	async _updateRenderContainer() {
-		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
-		await this._processRenderers(renderContainer);
+		this._renderContainerRef.value.innerHTML = '';
+		this._renderContainerRef.value.append(await this._processEmbeds());
+		await this._processRenderers(this._renderContainerRef.value);
 	}
 
 	_validateHtml() {

package/custom-elements.json

@@ -823,6 +823,11 @@
           "description": "Unique label text for calendar (necessary if multiple calendars on page)",
           "type": "string"
         },
+        {
+          "name": "initial-value",
+          "description": "ADVANCED: Initial date to override the logic for determining default date to initially show",
+          "type": "string"
+        },
         {
           "name": "max-value",
           "description": "Maximum valid date that could be selected by a user",
@@ -857,6 +862,12 @@
           "description": "Unique label text for calendar (necessary if multiple calendars on page)",
           "type": "string"
         },
+        {
+          "name": "initialValue",
+          "attribute": "initial-value",
+          "description": "ADVANCED: Initial date to override the logic for determining default date to initially show",
+          "type": "string"
+        },
         {
           "name": "maxValue",
           "attribute": "max-value",
@@ -4759,6 +4770,14 @@
           "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.",
           "type": "Boolean",
           "default": "false"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
         }
       ]
     },

package/package.json

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