@brightspace-ui/core 3.10.0 → 3.12.0

package/components/filter/filter.js

@@ -8,6 +8,7 @@ import '../dropdown/dropdown-menu.js';
 import '../empty-state/empty-state-action-button.js';
 import '../empty-state/empty-state-action-link.js';
 import '../empty-state/empty-state-simple.js';
+import '../expand-collapse/expand-collapse-content.js';
 import '../hierarchical-view/hierarchical-view.js';
 import '../inputs/input-search.js';
 import '../list/list.js';
@@ -132,12 +133,20 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			}
 
 			.d2l-filter-dimension-set-value {
+				align-items: center;
 				color: var(--d2l-color-ferrite);
 				display: flex;
 				gap: 0.45rem;
 				line-height: unset;
 				overflow: hidden;
 			}
+			.d2l-filter-dimension-set-value d2l-icon {
+				flex-shrink: 0;
+			}
+			d2l-expand-collapse-content[expanded] {
+				padding-block: 0.5rem;
+				padding-inline: 0.2rem;
+			}
 
 			.d2l-filter-dimension-set-value-text {
 				-webkit-box-orient: vertical;
@@ -577,11 +586,22 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				?hidden="${item.hidden}"
 				key="${item.key}"
 				label="${item.text}"
+				?no-primary-action="${item.additionalContent && item.selected}"
 				selectable
 				?selected="${item.selected}">
-				<div class="d2l-filter-dimension-set-value d2l-body-compact">
-					<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
-					${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
+				<div>
+					<div class="d2l-filter-dimension-set-value d2l-body-compact">
+						<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
+						${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
+						${item.additionalContent
+		? html`<d2l-icon icon="${item.selected ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small'}"></d2l-icon>`
+		: nothing}
+					</div>
+					${item.additionalContent ? html`
+						<d2l-expand-collapse-content ?expanded="${item.selected}">
+							${item.additionalContent()}
+						</d2l-expand-collapse-content>
+					` : nothing}
 				</div>
 			</d2l-list-item>
 		`;

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

@@ -92,6 +92,11 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 			 * @type {string}
 			 */
 			minValue: { attribute: 'min-value', reflect: true, type: String },
+			/**
+			 * Temporary.
+			 * @ignore
+			 */
+			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that values are required
 			 * @type {boolean}
@@ -197,6 +202,7 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 						max-value="${ifDefined(this.maxValue)}"
 						min-value="${ifDefined(this.minValue)}"
 						?opened="${this.startOpened}"
+						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						slot="left"
@@ -215,6 +221,7 @@ class InputDateRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 						max-value="${ifDefined(this.maxValue)}"
 						min-value="${ifDefined(this.minValue)}"
 						?opened="${this.endOpened}"
+						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						slot="right"

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

@@ -130,6 +130,11 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 			 * @type {string}
 			 */
 			minValue: { attribute: 'min-value', reflect: true, type: String },
+			/**
+			 * Temporary.
+			 * @ignore
+			 */
+			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that values are required
 			 * @type {boolean}
@@ -248,6 +253,7 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 							max-value="${ifDefined(this.maxValue)}"
 							min-value="${ifDefined(this.minValue)}"
 							?opened="${this.startOpened}"
+							?prefer-fixed-positioning="${this.preferFixedPositioning}"
 							?required="${this.required}"
 							?skeleton="${this.skeleton}"
 							time-default-value="startOfDay"
@@ -270,6 +276,7 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 							max-value="${ifDefined(this.maxValue)}"
 							min-value="${ifDefined(this.minValue)}"
 							?opened="${this.endOpened}"
+							?prefer-fixed-positioning="${this.preferFixedPositioning}"
 							?required="${this.required}"
 							?skeleton="${this.skeleton}"
 							time-default-value="endOfDay"

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

@@ -76,6 +76,11 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean },
+			/**
+			 * Temporary.
+			 * @ignore
+			 */
+			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that a value is required
 			 * @type {boolean}
@@ -248,6 +253,7 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 				label-hidden
 				.labelRequired="${false}"
 				max-height="430"
+				?prefer-fixed-positioning="${this.preferFixedPositioning}"
 				?required="${this.required}"
 				?skeleton="${this.skeleton}"
 				.value="${parsedValue}">
@@ -277,6 +283,7 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 						max-value="${ifDefined(this._maxValueLocalized)}"
 						min-value="${ifDefined(this._minValueLocalized)}"
 						?opened="${dateOpened}"
+						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						style="${styleMap(dateStyle)}"

package/components/inputs/input-date.js

@@ -73,6 +73,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean, reflect: true },
+			/**
+			 * Temporary.
+			 * @ignore
+			 */
+			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that a value is required
 			 * @type {boolean}
@@ -256,7 +261,8 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				trap-focus
 				no-auto-focus
 				mobile-tray="bottom"
-				no-padding>
+				no-padding
+				?prefer-fixed-positioning="${this.preferFixedPositioning}">
 				<d2l-calendar
 					@d2l-calendar-selected="${this._handleDateSelected}"
 					label="${ifDefined(this.label)}"
@@ -277,7 +283,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				<div>${this.emptyText}</div>
 			</div>
 			${errorTooltip}
-			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open>
+			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open ?prefer-fixed-positioning="${this.preferFixedPositioning}">
 				<d2l-input-text
 					?novalidate="${this.noValidate}"
 					aria-invalid="${this.invalid ? 'true' : 'false'}"

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

@@ -95,6 +95,11 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 			 * @type {boolean}
 			 */
 			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
+			/**
+			 * Temporary.
+			 * @ignore
+			 */
+			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that values are required
 			 * @type {boolean}
@@ -248,6 +253,7 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 						label="${startLabel}"
 						?label-hidden="${this.childLabelsHidden}"
 						?opened="${this.startOpened}"
+						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						slot="left"
@@ -266,6 +272,7 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
 						label="${endLabel}"
 						?label-hidden="${this.childLabelsHidden}"
 						?opened="${this.endOpened}"
+						?prefer-fixed-positioning="${this.preferFixedPositioning}"
 						?required="${this.required}"
 						?skeleton="${this.skeleton}"
 						slot="right"

package/components/inputs/input-time.js

@@ -154,6 +154,11 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean },
+			/**
+			 * Temporary.
+			 * @ignore
+			 */
+			preferFixedPositioning: { type: Boolean, attribute: 'prefer-fixed-positioning' },
 			/**
 			 * Indicates that a value is required
 			 * @type {boolean}
@@ -339,7 +344,7 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 				class="${this.label && !this.labelHidden && !this.labelledBy ? 'd2l-input-label d2l-skeletize' : 'd2l-offscreen'}"
 				for="${this._dropdownId}-input"
 				id="${this._dropdownId}-label">${this.label}</label>
-			<d2l-dropdown class="d2l-skeletize" ?disabled="${disabled}">
+			<d2l-dropdown class="d2l-skeletize" ?disabled="${disabled}" ?prefer-fixed-positioning="${this.preferFixedPositioning}">
 				<input
 					aria-invalid="${this.invalid ? 'true' : 'false'}"
 					aria-controls="${this._dropdownId}"
@@ -363,7 +368,8 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 					no-padding-footer
 					max-height="${ifDefined(this.maxHeight)}"
 					min-width="195"
-					?opened="${opened}">
+					?opened="${opened}"
+					?prefer-fixed-positioning="${this.preferFixedPositioning}">
 					<d2l-menu
 						aria-labelledby="${this._dropdownId}-label"
 						class="d2l-input-time-menu"

package/package.json

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