@brightspace-ui/core 3.47.1 → 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/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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.47.1",
+  "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",