@brightspace-ui/core 3.279.1 → 3.280.0

package/components/backdrop/backdrop-loading.js

@@ -34,6 +34,10 @@ class BackdropLoading extends PropertyRequiredMixin(FreshnessMixin(LocalizeCoreE
 	};
 
 	static styles = [css`
+
+		:host {
+			position: absolute;
+		}
 		.backdrop-container {
 			display: none;
 		}
@@ -158,7 +162,7 @@ class BackdropLoading extends PropertyRequiredMixin(FreshnessMixin(LocalizeCoreE
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 
-		if (changedProperties.has('freshness') && changedProperties.get('freshness') !== undefined) {
+		if (changedProperties.has('freshness')) {
 			this.#clearLiveRegionContent();
 
 			const oldState = changedProperties.get('freshness');
@@ -170,9 +174,9 @@ class BackdropLoading extends PropertyRequiredMixin(FreshnessMixin(LocalizeCoreE
 				this.#setLiveRegionContent(this.localize('components.backdrop-loading.loadingCompleteAnnouncement'));
 			}
 
-			if (oldState === freshness.fresh) {
+			if (oldState === freshness.fresh || (oldState === undefined && this.freshness !== freshness.fresh)) {
 				this.#show();
-			} else if (newState === freshness.fresh) {
+			} else if (oldState !== undefined && newState === freshness.fresh) {
 				this.#fade();
 			} else if (oldState === freshness.loading && newState === freshness.stale) {
 				setTimeout(() => {

package/components/list/list.js

@@ -1,4 +1,6 @@
+import '../backdrop/backdrop-loading.js';
 import { css, html, LitElement } from 'lit';
+import { freshness, FreshnessMixin } from '../../mixins/freshness/freshness-mixin.js';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -10,6 +12,7 @@ const keyCodes = {
 };
 
 export const listSelectionStates = SelectionInfo.states;
+export const listFreshness = freshness;
 
 export const listLayouts = Object.freeze({
 	list: 'list',
@@ -33,7 +36,7 @@ const ro = new ResizeObserver(entries => {
  * @slot pager - Slot for `d2l-pager-load-more` to be rendered below the list
  * @fires d2l-list-items-move - Dispatched when one or more items are moved. See [Event Details: d2l-list-items-move](#event-details%3A-%40d2l-list-items-move).
  */
-class List extends PageableMixin(SelectionMixin(LitElement)) {
+class List extends FreshnessMixin(PageableMixin(SelectionMixin(LitElement))) {
 
 	static properties = {
 		/**
@@ -111,13 +114,13 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			--d2l-list-item-illustration-max-width: 4.5rem;
 			display: block;
 		}
-		:host([layout="tiles"]) > .d2l-list-content {
+		:host([layout="tiles"]) > div > .d2l-list-content {
 			display: flex;
 			flex-wrap: wrap;
 			gap: 0.9rem;
 			justify-content: normal;
 		}
-		:host(:not([slot="nested"])) > .d2l-list-content {
+		:host(:not([slot="nested"])) > div > .d2l-list-content {
 			padding-bottom: 1px;
 		}
 		:host([hidden]) {
@@ -150,6 +153,17 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			margin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */
 		}
 
+		.backdrop-loading-container {
+			position: relative;
+		}
+		d2l-backdrop-loading {
+			margin: -12px; /* must match outside-control-container */
+		}
+		:host([extend-separators]) d2l-backdrop-loading,
+		:host([layout="tiles"]) d2l-backdrop-loading {
+			margin: 0; /* must match outside-control-container */
+		}
+
 		::slotted(.d2l-list-tile-break) {
 			display: none;
 		}
@@ -246,12 +260,22 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return html`
 			<slot name="controls"></slot>
 			<slot name="header"></slot>
-			<div role="${role}" aria-label="${ifDefined(ariaLabel)}" class="d2l-list-content">
-				<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>
+			<div class="backdrop-loading-container">
+				<div id="list-content" role="${role}" aria-label="${ifDefined(ariaLabel)}" class="d2l-list-content">
+					<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>
+				</div>
+				<d2l-backdrop-loading
+					@d2l-backdrop-stale-overlay-action="${this._handleBackdropStaleOverlayAction}"
+					for="list-content"
+					freshness="${this.freshness}"
+					freshness-stale-button-text="${this.freshnessStaleButtonText}"
+					freshness-stale-text="${this.freshnessStaleText}">
+				</d2l-backdrop-loading>
+				${this._renderPagerContainer()}
 			</div>
-			${this._renderPagerContainer()}
 		`;
 	}
+
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has('breakpoints') && changedProperties.get('breakpoints') !== undefined) {
@@ -377,6 +401,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return items.length > 0 ? items[0]._getFlattenedListItems().lazyLoadListItems : new Map();
 	}
 
+	_handleBackdropStaleOverlayAction() {
+		/** Dispatched when the action button on the stale overlay is clicked */
+		this.dispatchEvent(new CustomEvent('d2l-list-stale-button-click'));
+	}
+
 	_handleKeyDown(e) {
 		if (!this.grid || this.slot === 'nested' || e.keyCode !== keyCodes.TAB) return;
 		e.preventDefault();

package/components/selection/selection-mixin.js

@@ -1,5 +1,6 @@
 import { getFirstFocusableDescendant, getLastFocusableDescendant, getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { CollectionMixin } from '../../mixins/collection/collection-mixin.js';
+import { freshness } from '../../mixins/freshness/freshness-mixin.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 
 const keyCodes = {
@@ -95,6 +96,14 @@ export const SelectionMixin = superclass => class extends CollectionMixin(superc
 		this.removeEventListener('d2l-selection-input-subscribe', this._handleSelectionInputSubscribe);
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+
+		if (changedProperties.has('freshness')) {
+			this._updateSelectionObservers();
+		}
+	}
+
 	getSelectionInfo() {
 		let allEnabledSelected = true;
 		let state = (this._selectionSelectables.size > 0 ? SelectionInfo.states.none : SelectionInfo.states.notSet);
@@ -254,7 +263,10 @@ export const SelectionMixin = superclass => class extends CollectionMixin(superc
 		this._updateObserversRequested = true;
 		setTimeout(() => {
 			const info = this.getSelectionInfo(true);
-			this._selectionObservers.forEach(observer => observer.selectionInfo = info);
+			this._selectionObservers.forEach(observer => {
+				observer.selectionInfo = info;
+				observer.selectionDisabled = (this.freshness === freshness.stale || this.freshness === freshness.loading);
+			});
 			this._updateObserversRequested = false;
 		}, 0);
 	}

package/components/selection/selection-observer-mixin.js

@@ -4,6 +4,12 @@ import { SelectionInfo } from './selection-mixin.js';
 export const SelectionObserverMixin = superclass => class extends superclass {
 
 	static properties = {
+		/**
+		 * Whether selection is disabled (set by the selection component)
+		 * @ignore
+		 * @type {boolean}
+		 */
+		selectionDisabled: { type: Boolean, reflect: true, attribute: 'selection-disabled' },
 		/**
 		 * Id of the `SelectionMixin` component this component wants to observe (if not located within that component)
 		 * @type {string}
@@ -20,6 +26,7 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 
 	constructor() {
 		super();
+		this.selectionDisabled = false;
 		this.selectionInfo = new SelectionInfo();
 		this._provider = null;
 	}

package/components/selection/selection-select-all-pages.js

@@ -34,6 +34,7 @@ class SelectAllPages extends FocusMixin(LocalizeCoreElement(SelectionObserverMix
 		return html`
 			<d2l-button-subtle
 				@click="${this._handleClick}"
+				?disabled="${this.selectionDisabled}"
 				text="${this.localize('components.selection.select-all-items', { count: this._provider.itemCount, countFormatted: formatNumber(this._provider.itemCount) })}">
 			</d2l-button-subtle>`;
 	}

package/components/selection/selection-select-all.js

@@ -51,7 +51,7 @@ class SelectAll extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(Li
 				label-hidden
 				@change="${this.#handleCheckboxChange}"
 				?checked="${this.#getIsChecked()}"
-				?disabled="${this.disabled}"
+				?disabled="${this.disabled || this.selectionDisabled }"
 				description="${ifDefined(this.selectionInfo.state !== SelectionInfo.states.none ? summary : undefined)}"
 				?indeterminate="${this.#getIsIndeterminate()}">
 			</d2l-input-checkbox>

package/custom-elements.json

@@ -9997,6 +9997,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -11383,6 +11388,22 @@
           "type": "'list'|'tiles'",
           "default": "\"\\\"list\\\"\""
         },
+        {
+          "name": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
+        },
         {
           "name": "item-count",
           "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
@@ -11435,7 +11456,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-list-item-color-border-radius: 6px;\\n\\t\\t\\t--d2l-list-item-color-width: 6px;\\n\\t\\t\\t--d2l-list-item-illustration-margin-inline-end: 0.9rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 2.6rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 4.5rem;\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host([layout=\\\"tiles\\\"]) > .d2l-list-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: wrap;\\n\\t\\t\\tgap: 0.9rem;\\n\\t\\t\\tjustify-content: normal;\\n\\t\\t}\\n\\t\\t:host(:not([slot=\\\"nested\\\"])) > .d2l-list-content {\\n\\t\\t\\tpadding-bottom: 1px;\\n\\t\\t}\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\tslot[name=\\\"pager\\\"]::slotted(*) {\\n\\t\\t\\tmargin-top: 10px;\\n\\t\\t}\\n\\t\\t:host([extend-separators]) slot[name=\\\"pager\\\"]::slotted(*) {\\n\\t\\t\\tmargin-left: 0.9rem;\\n\\t\\t\\tmargin-right: 0.9rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"1\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 3.55rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 6rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"2\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 5.1rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 9rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"3\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 6rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 10.8rem;\\n\\t\\t}\\n\\t\\t:host([_slim-color]) {\\n\\t\\t\\t--d2l-list-item-color-border-radius: 3px;\\n\\t\\t\\t--d2l-list-item-color-width: 3px;\\n\\t\\t}\\n\\t\\t:host([add-button]) ::slotted([slot=\\\"controls\\\"]) {\\n\\t\\t\\tmargin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */\\n\\t\\t}\\n\\n\\t\\t::slotted(.d2l-list-tile-break) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([layout=\\\"tiles\\\"]) ::slotted(.d2l-list-tile-break) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tflex-basis: 100%;\\n\\t\\t\\theight: 0;\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-list-item-color-border-radius: 6px;\\n\\t\\t\\t--d2l-list-item-color-width: 6px;\\n\\t\\t\\t--d2l-list-item-illustration-margin-inline-end: 0.9rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 2.6rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 4.5rem;\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host([layout=\\\"tiles\\\"]) > div > .d2l-list-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: wrap;\\n\\t\\t\\tgap: 0.9rem;\\n\\t\\t\\tjustify-content: normal;\\n\\t\\t}\\n\\t\\t:host(:not([slot=\\\"nested\\\"])) > div > .d2l-list-content {\\n\\t\\t\\tpadding-bottom: 1px;\\n\\t\\t}\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\tslot[name=\\\"pager\\\"]::slotted(*) {\\n\\t\\t\\tmargin-top: 10px;\\n\\t\\t}\\n\\t\\t:host([extend-separators]) slot[name=\\\"pager\\\"]::slotted(*) {\\n\\t\\t\\tmargin-left: 0.9rem;\\n\\t\\t\\tmargin-right: 0.9rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"1\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 3.55rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 6rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"2\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 5.1rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 9rem;\\n\\t\\t}\\n\\t\\t:host([_breakpoint=\\\"3\\\"]) {\\n\\t\\t\\t--d2l-list-item-illustration-max-height: 6rem;\\n\\t\\t\\t--d2l-list-item-illustration-max-width: 10.8rem;\\n\\t\\t}\\n\\t\\t:host([_slim-color]) {\\n\\t\\t\\t--d2l-list-item-color-border-radius: 3px;\\n\\t\\t\\t--d2l-list-item-color-width: 3px;\\n\\t\\t}\\n\\t\\t:host([add-button]) ::slotted([slot=\\\"controls\\\"]) {\\n\\t\\t\\tmargin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */\\n\\t\\t}\\n\\n\\t\\t.backdrop-loading-container {\\n\\t\\t\\tposition: relative;\\n\\t\\t}\\n\\t\\td2l-backdrop-loading {\\n\\t\\t\\tmargin: -12px; /* must match outside-control-container */\\n\\t\\t}\\n\\t\\t:host([extend-separators]) d2l-backdrop-loading,\\n\\t\\t:host([layout=\\\"tiles\\\"]) d2l-backdrop-loading {\\n\\t\\t\\tmargin: 0; /* must match outside-control-container */\\n\\t\\t}\\n\\n\\t\\t::slotted(.d2l-list-tile-break) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([layout=\\\"tiles\\\"]) ::slotted(.d2l-list-tile-break) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tflex-basis: 100%;\\n\\t\\t\\theight: 0;\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "addButton",
@@ -11479,6 +11500,25 @@
           "type": "'list'|'tiles'",
           "default": "\"\\\"list\\\"\""
         },
+        {
+          "name": "freshnessStaleButtonText",
+          "attribute": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshnessStaleText",
+          "attribute": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness",
+          "attribute": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",
@@ -11511,6 +11551,10 @@
           "name": "d2l-list-selection-change",
           "description": "Dispatched when the selection state changes"
         },
+        {
+          "name": "d2l-list-stale-button-click",
+          "description": "Dispatched when the action button on the stale overlay is clicked"
+        },
         {
           "name": "d2l-list-add-button-click",
           "description": "Dispatched when the add button directly before or after the item is clicked. Event detail includes position ('before' or 'after') and key.\nThe `key` belongs to the list item adjacent to where the new item should be positioned.\nThe `position` represents where the new item should be positioned relative to the item with that key."
@@ -14209,6 +14253,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },
@@ -14332,6 +14381,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },
@@ -14473,6 +14527,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         },
@@ -14594,6 +14653,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14744,6 +14808,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14790,6 +14859,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14835,6 +14909,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14850,6 +14929,22 @@
       "name": "d2l-test-selection",
       "path": "./components/selection/test/selection-component.js",
       "attributes": [
+        {
+          "name": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
+        },
         {
           "name": "selection-single",
           "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
@@ -14858,6 +14953,25 @@
         }
       ],
       "properties": [
+        {
+          "name": "freshnessStaleButtonText",
+          "attribute": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshnessStaleText",
+          "attribute": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
+        {
+          "name": "freshness",
+          "attribute": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
+        },
         {
           "name": "selectionNoInputArrowKeyBehaviour",
           "type": "boolean",
@@ -14893,6 +15007,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -14920,6 +15039,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }
@@ -16167,6 +16291,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "selectionDisabled",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionInfo"
         }

package/package.json

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