@brightspace-ui/core 1.196.3 → 1.197.3

package/components/list/list-item-button-mixin.js

@@ -35,6 +35,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	}
 
 	_onButtonClick() {
+		/** Dispatched when the item's primary button action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
 	}
 

package/components/list/list-item-button.js

@@ -6,9 +6,6 @@ import { LitElement } from 'lit-element/lit-element.js';
  * @slot - Default content placed inside of the component
  * @slot illustration - Image associated with the list item located at the left of the item
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
- * @fires d2l-list-item-button-click - Dispatched when the item's primary button action is clicked
- * @fires d2l-list-item-position-change - Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change).
- * @fires d2l-list-item-selected - Dispatched when the component item is selected
  */
 class ListItemButton extends ListItemButtonMixin(LitElement) {
 

package/components/list/list-item-checkbox-mixin.js

@@ -105,6 +105,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		/* wait for internal state to be updated in case of action-click case so that a consumer
 		 calling getSelectionInfo will get the correct state */
 		await this.updateComplete;
+		/** Dispatched when the component item is selected */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-selected', {
 			detail: { key: this.key, selected: value },
 			composed: true,

package/components/list/list-item-drag-drop-mixin.js

@@ -265,6 +265,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			dragHandleText: { type: String, attribute: 'drag-handle-text' },
 			/**
 			 * **Drag & drop:** Text to drag and drop
+			 * @type {string}
 			 */
 			dropText: { type: String, attribute: 'drop-text' },
 			/**
@@ -351,6 +352,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
+		/** Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change). */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-position-change', {
 			detail: new NewPositionEventDetails({ dragTargetKey, dropTargetKey, dropLocation }),
 			bubbles: true

package/components/list/list-item-link-mixin.js

@@ -45,6 +45,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 	}
 
 	_handleLinkClick() {
+		/** Dispatched when the item's primary link action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-link-click', { bubbles: true }));
 	}
 

package/components/list/list-item.js

@@ -6,9 +6,6 @@ import { LitElement } from 'lit-element/lit-element.js';
  * @slot - Default content placed inside of the component
  * @slot illustration - Image associated with the list item located at the left of the item
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
- * @fires d2l-list-item-link-click - Dispatched when the item's primary link action is clicked
- * @fires d2l-list-item-position-change - Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change).
- * @fires d2l-list-item-selected - Dispatched when the component item is selected
  */
 class ListItem extends ListItemLinkMixin(LitElement) {
 

package/components/list/list.js

@@ -18,10 +18,12 @@ class List extends SelectionMixin(LitElement) {
 		return {
 			/**
 			 * Whether to extend the separators beyond the content's edge
+			 * @type {boolean}
 			 */
 			extendSeparators: { type: Boolean, reflect: true, attribute: 'extend-separators' },
 			/**
 			 * Use grid to manage focus with arrow keys. See [Accessibility](#accessibility).
+			 * @type {boolean}
 			 */
 			grid: { type: Boolean },
 			/**
@@ -97,6 +99,17 @@ class List extends SelectionMixin(LitElement) {
 		return this._getItems().indexOf(item);
 	}
 
+	getSelectedListItems(includeNested) {
+		let selectedItems = [];
+		this._getItems().forEach(item => {
+			if (item.selected) selectedItems.push(item);
+			if (includeNested && item._selectionProvider) {
+				selectedItems = [...selectedItems, ...item._selectionProvider.getSelectedListItems(includeNested)];
+			}
+		});
+		return selectedItems;
+	}
+
 	getSelectionInfo(includeNested) {
 		const selectionInfo = super.getSelectionInfo();
 		if (!includeNested) return selectionInfo;

package/components/menu/menu-item-checkbox.js

@@ -6,10 +6,6 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**
  * A menu item component used for selection. Multiple checkboxes can be selected at once.
- * @fires click - Dispatched when the link is clicked
- * @fires d2l-menu-item-change - Dispatched when the selected menu item changes
- * @fires d2l-menu-item-select - Dispatched when the menu item is selected
- * @fires d2l-menu-item-visibility-change - Dispatched when the visibility of the menu item changes
  */
 class MenuItemCheckbox extends RtlMixin(MenuItemSelectableMixin(LitElement)) {
 

package/components/menu/menu-item-link.js

@@ -6,8 +6,6 @@ import { menuItemStyles } from './menu-item-styles.js';
 /**
  * A menu item component used for navigating.
  * @fires click - Dispatched when the link is clicked
- * @fires d2l-menu-item-select - Dispatched when the menu item is selected
- * @fires d2l-menu-item-visibility-change - Dispatched when the visibility of the menu item changes
  */
 class MenuItemLink extends MenuItemMixin(LitElement) {
 

package/components/menu/menu-item-mixin.js

@@ -4,6 +4,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 		return {
 			/**
 			 * Disables the menu item
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
 			/**
@@ -100,6 +101,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 			// assumption: single, focusable child view
 			this.__children[0].show();
 		} else {
+			/** Dispatched when the menu item is selected */
 			this.dispatchEvent(new CustomEvent('d2l-menu-item-select', { bubbles: true, composed: true }));
 		}
 	}
@@ -162,6 +164,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 	}
 
 	_onHidden() {
+		/** Dispatched when the visibility of the menu item changes */
 		this.dispatchEvent(new CustomEvent('d2l-menu-item-visibility-change', { bubbles: true, composed: true }));
 	}
 

package/components/menu/menu-item-radio.js

@@ -6,9 +6,6 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**
  * A menu item component used for radio selection. Only one radio item in a given d2l-menu may be selected at once (i.e., selecting one option will deselect the other selected "d2l-menu-item-radio" item).
- * @fires d2l-menu-item-change - Dispatched when the selected menu item changes
- * @fires d2l-menu-item-select - Dispatched when a menu item is selected
- * @fires d2l-menu-item-visibility-change - Dispatched when the visibility of the menu item changes
  */
 class MenuItemRadio extends RtlMixin(MenuItemRadioMixin(LitElement)) {
 

package/components/menu/menu-item-selectable-mixin.js

@@ -6,6 +6,7 @@ export const MenuItemSelectableMixin = superclass => class extends MenuItemMixin
 		return {
 			/**
 			 * This will set the item to be selected by default
+			 * @type {boolean}
 			 */
 			selected: { type: Boolean, reflect: true },
 			/**
@@ -42,6 +43,7 @@ export const MenuItemSelectableMixin = superclass => class extends MenuItemMixin
 				selected: this.selected
 			}
 		};
+		/** Dispatched when the selected menu item changes */
 		this.dispatchEvent(new CustomEvent('d2l-menu-item-change', eventDetails));
 	}
 

package/components/menu/menu-item.js

@@ -6,8 +6,6 @@ import { menuItemStyles } from './menu-item-styles.js';
 /**
  * A menu item component used with JS handlers.
  * @slot - Default content placed inside of the component
- * @fires d2l-menu-item-select - Dispatched when a menu item is selected
- * @fires d2l-menu-item-visibility-change - Dispatched when the visibility of the menu item changes
  */
 class MenuItem extends MenuItemMixin(LitElement) {
 

package/components/overflow-group/overflow-group.js

@@ -111,9 +111,7 @@ function convertToDropdownItem(node) {
 }
 /**
  *
- * A component that can be used to display a set of buttons, links or menus that will be put into a
- * dropdown menu when they no longer fit on the first line of their container
- *
+ * A component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container
  * @slot - Buttons, dropdown buttons, links or other items to be added to the container
  * @fires d2l-overflow-group-updated - Dispatched when there is an update performed to the overflow group
 */
@@ -123,6 +121,7 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		return {
 			/**
 			 * Use predefined classes on slot elements to set min and max buttons to show
+			 * @type {boolean}
 			 */
 			autoShow: {
 				type: Boolean,
@@ -130,6 +129,7 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			},
 			/**
 			 * minimum amount of buttons to show
+			 * @type {number}
 			 */
 			minToShow: {
 				type: Number,
@@ -138,6 +138,7 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			},
 			/**
 			 * maximum amount of buttons to show
+			 * @type {number}
 			 */
 			maxToShow: {
 				type: Number,

package/components/scroll-wrapper/scroll-wrapper.js

@@ -12,7 +12,6 @@ const SCROLL_AMOUNT = 0.8;
 /**
  *
  * Wraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.
- *
  * @slot - User provided content to wrap
  */
 class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
@@ -54,7 +53,7 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
 			:host([hidden]) {
 				display: none;
 			}
-			
+
 			.d2l-scroll-wrapper-container {
 				box-sizing: border-box;
 				outline: none;

package/components/selection/selection-action.js

@@ -12,6 +12,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
 /**
  * An action associated with a selection component.
  * @fires d2l-selection-action-click - Dispatched when the user clicks the action; provides the selection info
+ * @fires d2l-selection-observer-subscribe - Internal event
  */
 class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlMixin(LitElement)))) {
 
@@ -19,14 +20,17 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
 		return {
 			/**
 			 * Preset icon key (e.g. "tier1:gear")
+			 * @type {string}
 			 */
 			icon: { type: String, reflect: true },
 			/**
 			 * Whether the action requires one or more selected items
+			 * @type {boolean}
 			 */
 			requiresSelection: { type: Boolean, attribute: 'requires-selection', reflect: true },
 			/**
 			 * REQUIRED: The text for the action
+			 * @type {string}
 			 */
 			text: { type: String, reflect: true }
 		};

package/components/selection/selection-input.js

@@ -13,6 +13,7 @@ const keyCodes = {
 /**
  * An input (radio or checkbox) for use in selection components such as lists and tables.
  * @fires d2l-selection-change - Dispatched when the selected state changes
+ * @fires d2l-selection-input-subscribe - Internal event
  */
 class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 
@@ -20,18 +21,22 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 		return {
 			/**
 			 * State of the input
+			 * @type {boolean}
 			 */
 			selected: { type: Boolean },
 			/**
 			 * Disables the input
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean },
 			/**
 			 * Private. Force hovering state of input
+			 * @type {boolean}
 			 */
 			hovering: { type: Boolean },
 			/**
 			 * Key for the selectable
+			 * @type {string}
 			 */
 			key: { type: String },
 			_indeterminate: { type: Boolean },
@@ -89,10 +94,12 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 				'd2l-input-radio': true,
 				'd2l-selection-input-radio': true,
 				'd2l-skeletize': true,
-				'd2l-hovering': this.hovering
+				'd2l-hovering': this.hovering,
+				'd2l-disabled': this.disabled
 			};
 			return html`
 				<div
+					aria-disabled="${ifDefined(this.disabled)}"
 					aria-label="${this.label}"
 					aria-checked="${this.selected ? 'true' : 'false'}"
 					class="${classMap(radioClasses)}"
@@ -100,7 +107,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 					@keydown="${this._handleRadioKeyDown}"
 					@keyup="${this._handleRadioKeyUp}"
 					role="radio"
-					tabindex="0"></div>
+					tabindex="${ifDefined(this.disabled ? undefined : 0)}"></div>
 			`;
 		} else {
 			return html`

package/components/selection/selection-mixin.js

@@ -39,7 +39,8 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 	static get properties() {
 		return {
 			/**
-			 * Whether the selection control is limited to single selection.
+			 * Whether the selection control is limited to single selection
+			 * @type {boolean}
 			 */
 			selectionSingle: { type: Boolean, attribute: 'selection-single' }
 		};

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

@@ -7,10 +7,12 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 		return {
 			/**
 			 * Id of the SelectionMixin component this component wants to observe (if not located within that component)
+			 * @type {string}
 			 */
 			selectionFor: { type: String, reflect: true, attribute: 'selection-for' },
 			/**
-			 * The selection info (set by the selection component).
+			 * The selection info (set by the selection component)
+			 * @type {object}
 			 */
 			selectionInfo: { type: Object },
 			_provider: { type: Object, attribute: false }

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

@@ -7,6 +7,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
 /**
  * A checkbox that provides select-all behavior for selection components such as tables and lists.
+ * @fires d2l-selection-observer-subscribe - Internal event
  */
 class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 
@@ -14,6 +15,7 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 		return {
 			/**
 			 * Disables the select all checkbox
+			 * @type {boolean}
 			 */
 			disabled: { type: Boolean }
 		};

package/components/selection/selection-summary.js

@@ -6,13 +6,15 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
 /**
  * A summary showing the current selected count.
+ * @fires d2l-selection-observer-subscribe - Internal event
  */
 class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 
 	static get properties() {
 		return {
 			/**
-			 * Text to display if no items are selected.
+			 * Text to display if no items are selected
+			 * @type {string}
 			 */
 			noSelectionText: { type: String, attribute: 'no-selection-text' }
 		};

package/components/skeleton/skeleton-mixin.js

@@ -148,6 +148,7 @@ export const SkeletonMixin = dedupeMixin(superclass => class extends RtlMixin(su
 		return {
 			/**
 			 * Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)
+			 * @type {boolean}
 			 */
 			skeleton: { reflect: true, type: Boolean  }
 		};

package/components/status-indicator/status-indicator.js

@@ -18,12 +18,14 @@ class StatusIndicator extends LitElement {
 			},
 			/**
 			 * REQUIRED: The text that is displayed within the status indicator
+			 * @type {string}
 			 */
 			text: {
 				type: String
 			},
 			/**
 			 * Use when the status is very important and needs to have a lot of prominence
+			 * @type {boolean}
 			 */
 			bold: {
 				type: Boolean,

package/components/switch/switch-visibility.js

@@ -3,6 +3,9 @@ import { html, LitElement } from 'lit-element/lit-element.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { SwitchMixin } from './switch-mixin.js';
 
+/**
+ * A variant of the generic switch configured with special icons and default text for toggling "visibility".
+ */
 class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {
 
 	get text() {

package/components/switch/switch.js

@@ -4,6 +4,9 @@ import '../icons/icon-custom.js';
 import { html, LitElement } from 'lit-element/lit-element.js';
 import { SwitchMixin } from './switch-mixin.js';
 
+/**
+ * A generic switch with on/off semantics.
+ */
 class Switch extends SwitchMixin(LitElement) {
 
 	get offIcon() {

package/components/table/table-col-sort-button.js

@@ -2,9 +2,7 @@ import '../icons/icon.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 
 /**
- *
  * Button for sorting a table column in ascending/descending order.
- *
  * @slot - Text of the sort button
  */
 export class TableColSortButton extends LitElement {

package/components/table/table-wrapper.js

@@ -164,9 +164,7 @@ export const tableStyles = css`
 `;
 
 /**
- *
  * Wraps a native <table> element, providing styling and scroll buttons for overflow.
- *
  * @slot - Content to wrap
  */
 export class TableWrapper extends RtlMixin(LitElement) {

package/components/tabs/tab-panel-mixin.js

@@ -55,6 +55,7 @@ export const TabPanelMixin = superclass => class extends superclass {
 		super.attributeChangedCallback(name, oldval, newval);
 		if (name === 'text') {
 			this.setAttribute('aria-label', this.text);
+			/** Dispatched when the text attribute is changed */
 			this.dispatchEvent(new CustomEvent(
 				'd2l-tab-panel-text-changed', { bubbles: true, composed: true, detail: { text: this.text } }
 			));
@@ -73,6 +74,7 @@ export const TabPanelMixin = superclass => class extends superclass {
 			if (prop === 'selected') {
 				if (this.selected) {
 					requestAnimationFrame(() => {
+						/** Dispatched when a tab is selected */
 						this.dispatchEvent(new CustomEvent(
 							'd2l-tab-panel-selected', { bubbles: true, composed: true }
 						));

package/components/tabs/tab-panel.js

@@ -4,8 +4,6 @@ import { TabPanelMixin } from './tab-panel-mixin.js';
 /**
  * A component for tab panel content.
  * @slot - Default content in tab panel
- * @fires d2l-tab-panel-text-changed - Dispatched when the text attribute is changed
- * @fires d2l-tab-panel-selected - Dispatched when a tab is selected
  */
 class TabPanel extends TabPanelMixin(LitElement) {