@brightspace-ui/core 3.154.0 → 3.155.1

package/components/calendar/calendar.js

@@ -11,7 +11,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const daysInWeek = 7;
 const keyCodes = {
@@ -148,7 +147,7 @@ export function getPrevMonth(month) {
  * A component can be used to display a responsively sized calendar that allows for date selection.
  * @slot - Content displayed under the calendar (e.g., buttons)
  */
-class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
+class Calendar extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
@@ -712,6 +711,8 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		let preventDefault = false;
 
+		const isRtl = (document.documentElement.getAttribute('dir') === 'rtl');
+
 		switch (e.keyCode) {
 			case keyCodes.ENTER:
 			case keyCodes.SPACE:
@@ -728,17 +729,17 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				break;
 			case keyCodes.LEFT:
 				preventDefault = true; // needed for voiceover in safari to properly read aria-label on dates
-				await this._onKeyDownUpdateFocusDate(this.dir === 'rtl' ? 1 : -1);
+				await this._onKeyDownUpdateFocusDate(isRtl ? 1 : -1);
 				break;
 			case keyCodes.RIGHT:
 				preventDefault = true; // needed for voiceover in safari to properly read aria-label on dates
-				await this._onKeyDownUpdateFocusDate(this.dir === 'rtl' ? -1 : 1);
+				await this._onKeyDownUpdateFocusDate(isRtl ? -1 : 1);
 				break;
 			case keyCodes.HOME: {
 				preventDefault = true;
 				let numDaysChange;
 				const dayOfTheWeek = this._focusDate.getDay();
-				if (this.dir === 'rtl') {
+				if (isRtl) {
 					numDaysChange = 6 - dayOfTheWeek + calendarData.firstDayOfWeek;
 					if (numDaysChange > 6) {
 						numDaysChange -= daysInWeek;
@@ -762,7 +763,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				preventDefault = true;
 				let numDaysChange;
 				const dayOfTheWeek = this._focusDate.getDay();
-				if (this.dir === 'rtl') {
+				if (isRtl) {
 					numDaysChange = dayOfTheWeek - calendarData.firstDayOfWeek;
 					if (numDaysChange < 0) {
 						numDaysChange += daysInWeek;
@@ -898,7 +899,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 	_triggerMonthChangeAnimations(increase, keyboardTriggered, transitionUpDown) {
 		this._monthNav = undefined;
-		increase = this.dir === 'rtl' ? !increase : increase;
+		increase = document.documentElement.getAttribute('dir') === 'rtl' ? !increase : increase;
 		if (!keyboardTriggered) this._isInitialFocusDate = true;
 		if (!reduceMotion) {
 			setTimeout(() => {

package/components/collapsible-panel/collapsible-panel.js

@@ -9,7 +9,6 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const normalizeHeadingStyle = (number) => {
@@ -53,7 +52,7 @@ function addTabListener() {
  * @fires d2l-collapsible-panel-expand - Dispatched when the panel is expanded
  * @fires d2l-collapsible-panel-collapse - Dispatched when the panel is collapsed
  */
-class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
+class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -261,11 +260,9 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 				margin: 0.6rem;
 				margin-inline-end: var(--d2l-collapsible-panel-spacing-inline);
 				position: relative;
-				width: 0.9rem;
-			}
-			:host([dir="rtl"]) d2l-icon-custom {
-				transform: scale(-1, 1);
+				transform: var(--d2l-mirror-transform, ${document.dir === 'rtl' ? css`scale(-1, 1)` : css`none`}); /* stylelint-disable-line @stylistic/string-quotes, @stylistic/function-whitespace-after */
 				transform-origin: center;
+				width: 0.9rem;
 			}
 			d2l-icon-custom svg {
 				position: absolute;

package/components/filter/demo/filter.html

@@ -175,6 +175,11 @@
 						<d2l-filter-dimension-set-date-text-value key="6months2" range="6months"></d2l-filter-dimension-set-date-text-value>
 						<d2l-filter-dimension-set-date-time-range-value key="custom3" text="Custom Date Range with Time" start-value="2024-10-12T12:00:00Z"></d2l-filter-dimension-set-date-time-range-value>
 					</d2l-filter-dimension-set>
+					<d2l-filter-dimension-set key="dates3" text="Start and End Ranges" ignore-enforce-selection-single>
+						<d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
+						<d2l-filter-dimension-set-date-time-range-value key="custom4" text="Start Date"></d2l-filter-dimension-set-date-time-range-value>
+						<d2l-filter-dimension-set-date-time-range-value key="custom5" text="End Date"></d2l-filter-dimension-set-date-time-range-value>
+					</d2l-filter-dimension-set>
 					<d2l-filter-dimension-set key="role" text="Role" selected-first>
 						<d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>

package/components/filter/filter-dimension-set.js

@@ -40,6 +40,10 @@ class FilterDimensionSet extends LitElement {
 			 * @ignore
 			 */
 			minWidth: { type: Number },
+			/**
+			 * ADVANCED: Whether to ignore the enforce single selection setting for this dimension.
+			 */
+			ignoreEnforceSelectionSingle: { type: Boolean, attribute: 'ignore-enforce-selection-single' },
 			/**
 			 * Whether to hide the search input, perform a simple text search, or fire an event on search
 			 * @type {'none'|'automatic'|'manual'}
@@ -79,6 +83,7 @@ class FilterDimensionSet extends LitElement {
 		this.introductoryText = '';
 		this.loading = false;
 		this.hasMore = false;
+		this.ignoreEnforceSelectionSingle = false;
 		this.searchType = 'automatic';
 		this.selectAll = false;
 		this.selectedFirst = false;
@@ -151,7 +156,7 @@ class FilterDimensionSet extends LitElement {
 			return value.getValueDetails();
 		});
 		if (noSearchSupport) this.searchType = 'none';
-		if (enforceSingleSelection) this.selectionSingle = true;
+		if (enforceSingleSelection && !this.ignoreEnforceSelectionSingle) this.selectionSingle = true;
 		if (minWidth) this.minWidth = minWidth;
 		return values;
 	}

package/custom-elements.json

@@ -4440,6 +4440,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "ignore-enforce-selection-single",
+          "description": "ADVANCED: Whether to ignore the enforce single selection setting for this dimension.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "search-type",
           "description": "Whether to hide the search input, perform a simple text search, or fire an event on search",
@@ -4512,6 +4518,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "ignoreEnforceSelectionSingle",
+          "attribute": "ignore-enforce-selection-single",
+          "description": "ADVANCED: Whether to ignore the enforce single selection setting for this dimension.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "searchType",
           "attribute": "search-type",

package/package.json

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