@brightspace-ui/core 1.229.0 → 1.230.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -264,14 +264,13 @@ class InputNumber extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeC
264
264
  countDecimalDigits(this._valueTrailingZeroes, false),
265
265
  this.maxFractionDigits
266
266
  );
267
- let valueTrailingZeroes = this.value.toString();
268
- const decimalDiff = (numDecimals - countDecimalDigits(valueTrailingZeroes, false));
269
- if (decimalDiff > 0) {
270
- if (decimalDiff === numDecimals) {
271
- valueTrailingZeroes += '.';
267
+ const valueTrailingZeroes = new Intl.NumberFormat(
268
+ 'en-US',
269
+ {
270
+ minimumFractionDigits: numDecimals,
271
+ useGrouping: false
272
272
  }
273
- valueTrailingZeroes = valueTrailingZeroes.padEnd(valueTrailingZeroes.length + decimalDiff, '0');
274
- }
273
+ ).format(this.value);
275
274
  return valueTrailingZeroes;
276
275
  }
277
276
  set valueTrailingZeroes(val) {
@@ -7,11 +7,13 @@
7
7
  <script type="module">
8
8
  import '../../button/button-icon.js';
9
9
  import '../../demo/demo-page.js';
10
+ import '../../dropdown/dropdown-button-subtle.js';
10
11
  import '../../dropdown/dropdown-menu.js';
11
12
  import '../../dropdown/dropdown-more.js';
12
13
  import '../../menu/menu.js';
13
14
  import '../../menu/menu-item.js';
14
15
  import '../../selection/selection-action.js';
16
+ import '../../selection/selection-action-menu-item.js';
15
17
  import '../../tooltip/tooltip.js';
16
18
  import '../list-header.js';
17
19
  import '../list-item-button.js';
@@ -67,8 +69,15 @@
67
69
  <d2l-list id="allFeatures" item-count="50">
68
70
  <d2l-list-header slot="header" select-all-pages-allowed>
69
71
  <d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
70
- <d2l-selection-action icon="tier1:share" text="Share" requires-selection></d2l-selection-action>
71
72
  <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
73
+ <d2l-dropdown-button-subtle text="Actions">
74
+ <d2l-dropdown-menu>
75
+ <d2l-menu label="Actions">
76
+ <d2l-selection-action-menu-item text="Bookmark (requires selection)" requires-selection></d2l-selection-action-menu-item>
77
+ <d2l-selection-action-menu-item text="Advanced"></d2l-selection-action-menu-item>
78
+ </d2l-menu>
79
+ </d2l-dropdown-menu>
80
+ </d2l-dropdown-button-subtle>
72
81
  <d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
73
82
  </d2l-list-header>
74
83
  <d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
@@ -105,15 +105,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
105
105
  filter: grayscale(75%);
106
106
  opacity: 0.4;
107
107
  }
108
- :host([draggable]) .d2l-list-item-drag-image {
109
- transform: rotate(-1deg);
110
- }
111
108
  :host([dragging]) .d2l-list-item-drag-image {
112
109
  background: white;
113
110
  }
114
- :host([draggable]) d2l-list-item-generic-layout {
115
- transform: rotate(1deg);
116
- }
117
111
  d2l-list-item-generic-layout {
118
112
  border-bottom: 1px solid var(--d2l-color-mica);
119
113
  border-top: 1px solid var(--d2l-color-mica);
@@ -281,10 +275,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
281
275
  width: 100%;
282
276
  z-index: 5;
283
277
  }
284
- :host([draggable][selected]:not([disabled])) .d2l-list-item-active-border,
285
- :host([draggable][selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
286
- transform: rotate(1deg);
287
- }
288
278
  d2l-tooltip > div {
289
279
  font-weight: 700;
290
280
  }
@@ -466,52 +456,54 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
466
456
  const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
467
457
  const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
468
458
 
459
+ const innerView = html`
460
+ <d2l-list-item-generic-layout
461
+ @focusin="${this._onFocusIn}"
462
+ @focusout="${this._onFocusOut}"
463
+ class="${classMap(classes)}"
464
+ data-breakpoint="${this._breakpoint}"
465
+ data-separators="${ifDefined(this._separators)}"
466
+ ?grid-active="${this.role === 'rowgroup'}">
467
+ ${this._renderDropTarget()}
468
+ ${this._renderDragHandle(this._renderOutsideControl)}
469
+ ${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
470
+ ${this.selectable ? html`
471
+ <div slot="control">${this._renderCheckbox()}</div>
472
+ <div slot="control-action"
473
+ @mouseenter="${this._onMouseEnter}"
474
+ @mouseleave="${this._onMouseLeave}">
475
+ ${this._renderCheckboxAction('')}
476
+ </div>` : nothing }
477
+ ${primaryAction ? html`
478
+ <div slot="content-action"
479
+ @focusin="${this._onFocusInPrimaryAction}"
480
+ @focusout="${this._onFocusOutPrimaryAction}"
481
+ @mouseenter="${this._onMouseEnterPrimaryAction}"
482
+ @mouseleave="${this._onMouseLeavePrimaryAction}">
483
+ ${primaryAction}
484
+ </div>` : nothing}
485
+ <div slot="content"
486
+ class="${classMap(contentClasses)}"
487
+ id="${this._contentId}">
488
+ <slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
489
+ <slot>${content}</slot>
490
+ </div>
491
+ <div slot="actions"
492
+ @mouseenter="${this._onMouseEnter}"
493
+ @mouseleave="${this._onMouseLeave}"
494
+ class="d2l-list-item-actions-container">
495
+ <slot name="actions" class="d2l-list-item-actions">${actions}</slot>
496
+ </div>
497
+ <div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
498
+ <slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
499
+ </div>
500
+ </d2l-list-item-generic-layout>
501
+ <div class="d2l-list-item-active-border"></div>
502
+ `;
503
+
469
504
  return html`
470
505
  ${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
471
- <div class="d2l-list-item-drag-image">
472
- <d2l-list-item-generic-layout
473
- @focusin="${this._onFocusIn}"
474
- @focusout="${this._onFocusOut}"
475
- class="${classMap(classes)}"
476
- data-breakpoint="${this._breakpoint}"
477
- data-separators="${ifDefined(this._separators)}"
478
- ?grid-active="${this.role === 'rowgroup'}">
479
- ${this._renderDropTarget()}
480
- ${this._renderDragHandle(this._renderOutsideControl)}
481
- ${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
482
- ${this.selectable ? html`
483
- <div slot="control">${this._renderCheckbox()}</div>
484
- <div slot="control-action"
485
- @mouseenter="${this._onMouseEnter}"
486
- @mouseleave="${this._onMouseLeave}">
487
- ${this._renderCheckboxAction('')}
488
- </div>` : nothing }
489
- ${primaryAction ? html`
490
- <div slot="content-action"
491
- @focusin="${this._onFocusInPrimaryAction}"
492
- @focusout="${this._onFocusOutPrimaryAction}"
493
- @mouseenter="${this._onMouseEnterPrimaryAction}"
494
- @mouseleave="${this._onMouseLeavePrimaryAction}">
495
- ${primaryAction}
496
- </div>` : nothing}
497
- <div slot="content"
498
- class="${classMap(contentClasses)}"
499
- id="${this._contentId}">
500
- <slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
501
- <slot>${content}</slot>
502
- </div>
503
- <div slot="actions"
504
- @mouseenter="${this._onMouseEnter}"
505
- @mouseleave="${this._onMouseLeave}"
506
- class="d2l-list-item-actions-container">
507
- <slot name="actions" class="d2l-list-item-actions">${actions}</slot>
508
- </div>
509
- <div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
510
- <slot name="nested" @slotchange="${this._onNestedSlotChange}">${nested}</slot>
511
- </div>
512
- </d2l-list-item-generic-layout>
513
- <div class="d2l-list-item-active-border"></div>
514
- </div>
506
+ ${this.draggable ? html`<div class="d2l-list-item-drag-image">${innerView}</div>` : innerView}
515
507
  ${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
516
508
  ${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
517
509
  `;
@@ -1,6 +1,4 @@
1
-
2
- import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
3
- export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMixin(superclass) {
1
+ export const MenuItemMixin = superclass => class extends superclass {
4
2
 
5
3
  static get properties() {
6
4
  return {
@@ -17,8 +17,8 @@ export const menuItemStyles = css`
17
17
  }
18
18
 
19
19
  :host(:hover),
20
- :host(.focus-visible),
21
- :host(.focus-visible[first]),
20
+ :host(:focus-visible),
21
+ :host(:focus-visible[first]),
22
22
  :host([first]:hover) {
23
23
  background-color: var(--d2l-menu-background-color-hover);
24
24
  border-bottom: 1px solid var(--d2l-menu-border-color-hover);
@@ -27,7 +27,7 @@ export const menuItemStyles = css`
27
27
  z-index: 2;
28
28
  }
29
29
 
30
- :host([disabled]), :host([disabled]:hover), :host([disabled].focus-visible) {
30
+ :host([disabled]), :host([disabled]:hover), :host([disabled]:focus-visible) {
31
31
  cursor: default;
32
32
  opacity: 0.75;
33
33
  }
@@ -40,7 +40,7 @@ export const menuItemStyles = css`
40
40
  border-top-color: transparent;
41
41
  }
42
42
 
43
- :host([last].focus-visible),
43
+ :host([last]:focus-visible),
44
44
  :host([last]:hover) {
45
45
  border-bottom-color: var(--d2l-menu-border-color-hover);
46
46
  }
@@ -2,7 +2,6 @@ import '../colors/colors.js';
2
2
  import '../icons/icon.js';
3
3
  import './menu-item-return.js';
4
4
  import { css, html, LitElement } from 'lit-element/lit-element.js';
5
- import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
6
5
  import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
7
6
  import { ThemeMixin } from '../../mixins/theme-mixin.js';
8
7
 
@@ -21,7 +20,7 @@ const keyCodes = {
21
20
  * @slot - Menu items
22
21
  * @fires d2l-menu-resize - Dispatched when size of menu changes (e.g., when nested menu of a different size is opened)
23
22
  */
24
- class Menu extends ThemeMixin(HierarchicalViewMixin(FocusVisiblePolyfillMixin(LitElement))) {
23
+ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
25
24
 
26
25
  static get properties() {
27
26
  return {
@@ -98,6 +98,7 @@ function convertToDropdownItem(node) {
98
98
  case 'd2l-dropdown-more':
99
99
  return createMenuItemMenu(node);
100
100
  case 'd2l-menu-item':
101
+ case 'd2l-selection-action-menu-item':
101
102
  // if the menu item has children treat it as a menu item menu
102
103
  if (node.children.length > 0) {
103
104
  return createMenuItemMenu(node);
@@ -148,6 +148,44 @@ The `d2l-selection-action` is an optional component that provides a button for a
148
148
  | `d2l-selection-action-click` | Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected. |
149
149
  <!-- docs: end hidden content -->
150
150
 
151
+ ## Selection Action Menu Item [d2l-selection-action-menu-item]
152
+
153
+ The `d2l-selection-action-menu-item` is an optional component that is a menu item for actions associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the button should be non-interactive if nothing is selected.
154
+
155
+ <!-- docs: demo live name:d2l-selection-action-menu-item -->
156
+ ```html
157
+ <script type="module">
158
+ import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
159
+ import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
160
+ import '@brightspace-ui/core/components/menu/menu.js';
161
+ import '@brightspace-ui/core/components/selection/selection-action-menu-item.js';
162
+ </script>
163
+ <d2l-dropdown-button-subtle text="Actions">
164
+ <d2l-dropdown-menu>
165
+ <d2l-menu label="Actions">
166
+ <d2l-selection-action-menu-item text="Action 1" requires-selection></d2l-selection-action-menu-item>
167
+ <d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
168
+ </d2l-menu>
169
+ </d2l-dropdown-menu>
170
+ </d2l-dropdown-button-subtle>
171
+ ```
172
+
173
+ <!-- docs: start hidden content -->
174
+ ### Properties
175
+
176
+ | Property | Type | Description |
177
+ |---|---|---|
178
+ | `requires-selection` | Boolean | Whether the action menu-item requires one or more selected items. |
179
+ | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
180
+ | `text` | String, required | Text to be shown for the action menu-item. |
181
+
182
+ ### Events
183
+
184
+ | Event | Description |
185
+ |---|---|
186
+ | `d2l-selection-action-click` | Dispatched when the user clicks the action menu-item. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected. |
187
+ <!-- docs: end hidden content -->
188
+
151
189
  ## Selection Input [d2l-selection-input]
152
190
 
153
191
  The `d2l-selection-input` is a required component in selection controls - without it, there wouldn't be anything for the user to select! Note: `d2l-list-item` already provides a selection input for selectable list items. If `d2l-selection-input` is placed within a selection control that specifies `selection-single`, then radios will be rendered instead of checkboxes.
@@ -6,7 +6,11 @@
6
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
7
  <script type="module">
8
8
  import '../../demo/demo-page.js';
9
+ import '../../dropdown/dropdown-button-subtle.js';
10
+ import '../../dropdown/dropdown-menu.js';
11
+ import '../../menu/menu.js';
9
12
  import '../selection-action.js';
13
+ import '../selection-action-menu-item.js';
10
14
  import '../selection-input.js';
11
15
  import '../selection-select-all.js';
12
16
  import '../selection-summary.js';
@@ -57,6 +61,14 @@
57
61
  <d2l-selection-select-all></d2l-selection-select-all>
58
62
  <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
59
63
  <d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
64
+ <d2l-dropdown-button-subtle text="Actions">
65
+ <d2l-dropdown-menu>
66
+ <d2l-menu label="Actions">
67
+ <d2l-selection-action-menu-item text="Action 1 (requires selection)" requires-selection></d2l-selection-action-menu-item>
68
+ <d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
69
+ </d2l-menu>
70
+ </d2l-dropdown-menu>
71
+ </d2l-dropdown-button-subtle>
60
72
  </div>
61
73
  <d2l-selection-summary style="flex: none;"></d2l-selection-summary>
62
74
  </div>
@@ -0,0 +1,61 @@
1
+ import { css, html, LitElement } from 'lit-element/lit-element.js';
2
+ import { MenuItemMixin } from '../menu/menu-item-mixin.js';
3
+ import { menuItemStyles } from '../menu/menu-item-styles.js';
4
+ import { SelectionActionMixin } from './selection-action-mixin.js';
5
+ import { SelectionInfo } from './selection-mixin.js';
6
+
7
+ /**
8
+ * An action menu-item component used within selection controls such as d2l-list and d2l-list-header.
9
+ * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
10
+ * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
11
+ * @fires d2l-selection-observer-subscribe - Internal event
12
+ */
13
+ class MenuItem extends SelectionActionMixin(MenuItemMixin(LitElement)) {
14
+
15
+ static get styles() {
16
+ return [ menuItemStyles,
17
+ css`
18
+ :host {
19
+ align-items: center;
20
+ display: flex;
21
+ padding: 0.75rem 1rem;
22
+ }
23
+ :host([dir="rtl"]) d2l-icon {
24
+ margin-left: 0;
25
+ margin-right: 6px;
26
+ }
27
+ `
28
+ ];
29
+ }
30
+
31
+ connectedCallback() {
32
+ super.connectedCallback();
33
+ this.addEventListener('d2l-menu-item-select', this._handleMenuItemSelect);
34
+ }
35
+
36
+ disconnectedCallback() {
37
+ super.disconnectedCallback();
38
+ this.removeEventListener('d2l-menu-item-select', this._handleMenuItemSelect);
39
+ }
40
+
41
+ render() {
42
+ return html`
43
+ <div class="d2l-menu-item-text">${this.text}</div>
44
+ <div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
45
+ `;
46
+ }
47
+
48
+ _handleMenuItemSelect(e) {
49
+ e.stopPropagation();
50
+
51
+ if (this.requiresSelection && this.selectionInfo.state === SelectionInfo.states.none) return;
52
+
53
+ this.dispatchEvent(new CustomEvent('d2l-selection-action-click', {
54
+ bubbles: true,
55
+ detail: this.selectionInfo
56
+ }));
57
+ }
58
+
59
+ }
60
+
61
+ customElements.define('d2l-selection-action-menu-item', MenuItem);
@@ -0,0 +1,30 @@
1
+ import { SelectionInfo } from './selection-mixin.js';
2
+ import { SelectionObserverMixin } from './selection-observer-mixin.js';
3
+
4
+ export const SelectionActionMixin = superclass => class extends SelectionObserverMixin(superclass) {
5
+
6
+ static get properties() {
7
+ return {
8
+ /**
9
+ * Whether the action requires one or more selected items
10
+ * @type {boolean}
11
+ */
12
+ requiresSelection: { type: Boolean, attribute: 'requires-selection', reflect: true }
13
+ };
14
+ }
15
+
16
+ constructor() {
17
+ super();
18
+ this.requiresSelection = false;
19
+ }
20
+
21
+ get selectionInfo() {
22
+ return super.selectionInfo;
23
+ }
24
+
25
+ set selectionInfo(value) {
26
+ super.selectionInfo = value;
27
+ this.disabled = (this.requiresSelection && this.selectionInfo.state === SelectionInfo.states.none);
28
+ }
29
+
30
+ };
@@ -6,15 +6,15 @@ import { ButtonMixin } from '../button/button-mixin.js';
6
6
  import { ifDefined } from 'lit-html/directives/if-defined.js';
7
7
  import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
8
8
  import { RtlMixin } from '../../mixins/rtl-mixin.js';
9
+ import { SelectionActionMixin } from './selection-action-mixin.js';
9
10
  import { SelectionInfo } from './selection-mixin.js';
10
- import { SelectionObserverMixin } from './selection-observer-mixin.js';
11
11
 
12
12
  /**
13
13
  * An action associated with a selection component.
14
14
  * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
15
15
  * @fires d2l-selection-observer-subscribe - Internal event
16
16
  */
17
- class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlMixin(LitElement)))) {
17
+ class Action extends LocalizeCoreElement(SelectionActionMixin(ButtonMixin(RtlMixin(LitElement)))) {
18
18
 
19
19
  static get properties() {
20
20
  return {
@@ -23,11 +23,6 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
23
23
  * @type {string}
24
24
  */
25
25
  icon: { type: String, reflect: true },
26
- /**
27
- * Whether the action requires one or more selected items
28
- * @type {boolean}
29
- */
30
- requiresSelection: { type: Boolean, attribute: 'requires-selection', reflect: true },
31
26
  /**
32
27
  * REQUIRED: The text for the action
33
28
  * @type {string}
@@ -47,15 +42,6 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
47
42
  `;
48
43
  }
49
44
 
50
- get selectionInfo() {
51
- return super.selectionInfo;
52
- }
53
-
54
- set selectionInfo(value) {
55
- super.selectionInfo = value;
56
- this.disabled = (this.requiresSelection && this.selectionInfo.state === SelectionInfo.states.none);
57
- }
58
-
59
45
  connectedCallback() {
60
46
  super.connectedCallback();
61
47
  this.addEventListener('d2l-button-ghost-click', this._handleActionClick);
@@ -8445,6 +8445,102 @@
8445
8445
  }
8446
8446
  ]
8447
8447
  },
8448
+ {
8449
+ "name": "d2l-selection-action-menu-item",
8450
+ "path": "./components/selection/selection-action-menu-item.js",
8451
+ "description": "An action menu-item component used within selection controls such as d2l-list and d2l-list-header.",
8452
+ "attributes": [
8453
+ {
8454
+ "name": "requires-selection",
8455
+ "description": "Whether the action requires one or more selected items",
8456
+ "type": "boolean",
8457
+ "default": "false"
8458
+ },
8459
+ {
8460
+ "name": "selection-for",
8461
+ "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
8462
+ "type": "string"
8463
+ },
8464
+ {
8465
+ "name": "text",
8466
+ "description": "REQUIRED: Text displayed by the menu item",
8467
+ "type": "string"
8468
+ },
8469
+ {
8470
+ "name": "description",
8471
+ "description": "Provide a description for the menu item that will be used by screen readers",
8472
+ "type": "string"
8473
+ },
8474
+ {
8475
+ "name": "disabled",
8476
+ "description": "Disables the menu item",
8477
+ "type": "boolean",
8478
+ "default": "false"
8479
+ }
8480
+ ],
8481
+ "properties": [
8482
+ {
8483
+ "name": "requiresSelection",
8484
+ "attribute": "requires-selection",
8485
+ "description": "Whether the action requires one or more selected items",
8486
+ "type": "boolean",
8487
+ "default": "false"
8488
+ },
8489
+ {
8490
+ "name": "selectionFor",
8491
+ "attribute": "selection-for",
8492
+ "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
8493
+ "type": "string"
8494
+ },
8495
+ {
8496
+ "name": "selectionInfo",
8497
+ "type": "SelectionInfo"
8498
+ },
8499
+ {
8500
+ "name": "text",
8501
+ "attribute": "text",
8502
+ "description": "REQUIRED: Text displayed by the menu item",
8503
+ "type": "string"
8504
+ },
8505
+ {
8506
+ "name": "description",
8507
+ "attribute": "description",
8508
+ "description": "Provide a description for the menu item that will be used by screen readers",
8509
+ "type": "string"
8510
+ },
8511
+ {
8512
+ "name": "disabled",
8513
+ "attribute": "disabled",
8514
+ "description": "Disables the menu item",
8515
+ "type": "boolean",
8516
+ "default": "false"
8517
+ }
8518
+ ],
8519
+ "events": [
8520
+ {
8521
+ "name": "d2l-selection-action-click",
8522
+ "description": "Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected."
8523
+ },
8524
+ {
8525
+ "name": "d2l-selection-observer-subscribe",
8526
+ "description": "Internal event"
8527
+ },
8528
+ {
8529
+ "name": "d2l-menu-item-select",
8530
+ "description": "Dispatched when the menu item is selected"
8531
+ },
8532
+ {
8533
+ "name": "d2l-menu-item-visibility-change",
8534
+ "description": "Dispatched when the visibility of the menu item changes"
8535
+ }
8536
+ ],
8537
+ "slots": [
8538
+ {
8539
+ "name": "supporting",
8540
+ "description": "Allows supporting information to be displayed on the right-most side of the menu item"
8541
+ }
8542
+ ]
8543
+ },
8448
8544
  {
8449
8545
  "name": "d2l-selection-action",
8450
8546
  "path": "./components/selection/selection-action.js",
@@ -8455,16 +8551,17 @@
8455
8551
  "description": "Preset icon key (e.g. `tier1:gear`)",
8456
8552
  "type": "string"
8457
8553
  },
8458
- {
8459
- "name": "requires-selection",
8460
- "description": "Whether the action requires one or more selected items",
8461
- "type": "boolean"
8462
- },
8463
8554
  {
8464
8555
  "name": "text",
8465
8556
  "description": "REQUIRED: The text for the action",
8466
8557
  "type": "string"
8467
8558
  },
8559
+ {
8560
+ "name": "requires-selection",
8561
+ "description": "Whether the action requires one or more selected items",
8562
+ "type": "boolean",
8563
+ "default": "false"
8564
+ },
8468
8565
  {
8469
8566
  "name": "selection-for",
8470
8567
  "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
@@ -8489,18 +8586,19 @@
8489
8586
  "description": "Preset icon key (e.g. `tier1:gear`)",
8490
8587
  "type": "string"
8491
8588
  },
8492
- {
8493
- "name": "requiresSelection",
8494
- "attribute": "requires-selection",
8495
- "description": "Whether the action requires one or more selected items",
8496
- "type": "boolean"
8497
- },
8498
8589
  {
8499
8590
  "name": "text",
8500
8591
  "attribute": "text",
8501
8592
  "description": "REQUIRED: The text for the action",
8502
8593
  "type": "string"
8503
8594
  },
8595
+ {
8596
+ "name": "requiresSelection",
8597
+ "attribute": "requires-selection",
8598
+ "description": "Whether the action requires one or more selected items",
8599
+ "type": "boolean",
8600
+ "default": "false"
8601
+ },
8504
8602
  {
8505
8603
  "name": "selectionFor",
8506
8604
  "attribute": "selection-for",
@@ -8508,7 +8606,8 @@
8508
8606
  "type": "string"
8509
8607
  },
8510
8608
  {
8511
- "name": "selectionInfo"
8609
+ "name": "selectionInfo",
8610
+ "type": "SelectionInfo"
8512
8611
  },
8513
8612
  {
8514
8613
  "name": "disabledTooltip",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "1.229.0",
3
+ "version": "1.230.3",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",