@brightspace-ui/core 1.196.1 → 1.197.1

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.
Files changed (54) hide show
  1. package/components/backdrop/README.md +5 -6
  2. package/components/backdrop/backdrop.js +3 -0
  3. package/components/breadcrumbs/breadcrumbs.js +2 -1
  4. package/components/button/button-icon.js +1 -0
  5. package/components/button/button-mixin.js +2 -0
  6. package/components/button/button-subtle.js +1 -0
  7. package/components/button/button.js +1 -0
  8. package/components/button/floating-buttons.js +1 -0
  9. package/components/calendar/calendar.js +1 -1
  10. package/components/card/card-footer-link.js +12 -2
  11. package/components/card/card-loading-shimmer.js +1 -0
  12. package/components/card/card.js +9 -0
  13. package/components/dialog/dialog-confirm.js +1 -2
  14. package/components/dialog/dialog-fullscreen.js +4 -5
  15. package/components/dialog/dialog-mixin.js +2 -0
  16. package/components/dialog/dialog.js +0 -2
  17. package/components/dropdown/dropdown-button-subtle.js +3 -3
  18. package/components/dropdown/dropdown-button.js +2 -0
  19. package/components/dropdown/dropdown-content-mixin.js +19 -0
  20. package/components/dropdown/dropdown-content.js +0 -3
  21. package/components/dropdown/dropdown-context-menu.js +2 -0
  22. package/components/dropdown/dropdown-menu.js +0 -3
  23. package/components/dropdown/dropdown-more.js +2 -0
  24. package/components/dropdown/dropdown-opener-mixin.js +2 -0
  25. package/components/dropdown/dropdown-tabs.js +0 -3
  26. package/components/filter/filter-dimension-set-value.js +3 -0
  27. package/components/filter/filter-dimension-set.js +5 -1
  28. package/components/form/form-mixin.js +1 -0
  29. package/components/form/form-native.js +0 -1
  30. package/components/form/form.js +0 -1
  31. package/components/icons/images/tier3/rubric-graded.svg +2 -2
  32. package/components/inputs/input-date-range.js +9 -1
  33. package/components/inputs/input-date-time-range-to.js +3 -0
  34. package/components/inputs/input-date-time-range.js +10 -1
  35. package/components/inputs/input-date-time.js +7 -1
  36. package/components/inputs/input-date.js +7 -1
  37. package/components/inputs/input-fieldset.js +3 -0
  38. package/components/inputs/input-radio-styles.js +2 -1
  39. package/components/inputs/input-time-range.js +10 -1
  40. package/components/inputs/input-time.js +6 -1
  41. package/components/link/README.md +1 -1
  42. package/components/list/README.md +11 -10
  43. package/components/list/demo/list-item-custom.js +7 -3
  44. package/components/list/demo/list-nested.html +6 -62
  45. package/components/list/list-item-generic-layout.js +85 -14
  46. package/components/list/list.js +27 -2
  47. package/components/selection/selection-input.js +4 -2
  48. package/components/selection/selection-mixin.js +1 -0
  49. package/components/switch/switch-mixin.js +1 -0
  50. package/custom-elements.json +47 -90
  51. package/generated/icons/tier3/rubric-graded.js +3 -2
  52. package/helpers/focus.js +4 -2
  53. package/mixins/labelled-mixin.js +1 -0
  54. package/package.json +1 -1
@@ -8,6 +8,11 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
8
8
  import '@brightspace-ui/core/components/button/button.js';
9
9
  import '@brightspace-ui/core/components/backdrop/backdrop.js';
10
10
  import '@brightspace-ui/core/components/switch/switch.js';
11
+
12
+ const backdrop = document.querySelector('d2l-backdrop');
13
+ document.querySelector('#target > d2l-button').addEventListener('click', () => {
14
+ backdrop.shown = !backdrop.shown;
15
+ });
11
16
  </script>
12
17
  <style>
13
18
  #target { position: relative; z-index: 1000; margin: 40px; }
@@ -17,12 +22,6 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
17
22
  <d2l-backdrop for-target="target"></d2l-backdrop>
18
23
  </div>
19
24
  <span>Background content</span>
20
- <script>
21
- const backdrop = document.querySelector('d2l-backdrop');
22
- document.querySelector('#target > d2l-button').addEventListener('click', () => {
23
- backdrop.shown = !backdrop.shown;
24
- });
25
- </script>
26
25
  ```
27
26
 
28
27
  <!-- docs: start hidden content -->
@@ -17,16 +17,19 @@ class Backdrop extends LitElement {
17
17
  return {
18
18
  /**
19
19
  * REQUIRED: id of the target element to display backdrop behind
20
+ * @type {string}
20
21
  */
21
22
  forTarget: { type: String, attribute: 'for-target' },
22
23
 
23
24
  /**
24
25
  * Disables the fade-out transition while the backdrop is being hidden
26
+ * @type {boolean}
25
27
  */
26
28
  noAnimateHide: { type: Boolean, attribute: 'no-animate-hide' },
27
29
 
28
30
  /**
29
31
  * Used to control whether the backdrop is shown
32
+ * @type {boolean}
30
33
  */
31
34
  shown: { type: Boolean },
32
35
  _state: { type: String, reflect: true }
@@ -5,13 +5,14 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
5
5
 
6
6
  /**
7
7
  * Help users understand where they are within the application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.
8
- * @slot - breadcrumb items
8
+ * @slot - Breadcrumb items
9
9
  */
10
10
  class Breadcrumbs extends LocalizeCoreElement(RtlMixin(LitElement)) {
11
11
  static get properties() {
12
12
  return {
13
13
  /**
14
14
  * Renders in compact mode, displaying only the last item
15
+ * @type {boolean}
15
16
  */
16
17
  compact: { type: Boolean, reflect: true }
17
18
  };
@@ -37,6 +37,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
37
37
 
38
38
  /**
39
39
  * Indicates to display translucent (e.g., on rich backgrounds)
40
+ * @type {boolean}
40
41
  */
41
42
  translucent: { type: Boolean, reflect: true }
42
43
  };
@@ -22,10 +22,12 @@ export const ButtonMixin = superclass => class extends FocusVisiblePolyfillMixin
22
22
  autofocus: { type: Boolean, reflect: true },
23
23
  /**
24
24
  * Disables the button
25
+ * @type {boolean}
25
26
  */
26
27
  disabled: { type: Boolean, reflect: true },
27
28
  /**
28
29
  * Tooltip text when disabled
30
+ * @type {string}
29
31
  */
30
32
  disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
31
33
  /**
@@ -36,6 +36,7 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
36
36
 
37
37
  /**
38
38
  * Indicates that the icon should be rendered on right
39
+ * @type {boolean}
39
40
  */
40
41
  iconRight: { type: Boolean, reflect: true, attribute: 'icon-right' },
41
42
 
@@ -23,6 +23,7 @@ class Button extends ButtonMixin(LitElement) {
23
23
 
24
24
  /**
25
25
  * Styles the button as a primary button
26
+ * @type {boolean}
26
27
  */
27
28
  primary: { type: Boolean, reflect: true }
28
29
  };
@@ -17,6 +17,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
17
17
  return {
18
18
  /**
19
19
  * Indicates to display buttons as always floating
20
+ * @type {boolean}
20
21
  */
21
22
  alwaysFloat: { type: Boolean, attribute: 'always-float', reflect: true },
22
23
  _containerMarginLeft: { attribute: false, type: String },
@@ -132,7 +132,6 @@ export function getPrevMonth(month) {
132
132
  /**
133
133
  * A component can be used to display a responsively sized calendar that allows for date selection.
134
134
  * @slot - Content displayed under the calendar (e.g., buttons)
135
- * @fires d2l-calendar-selected - Dispatched when a date is selected through click, space, or enter. "e.detail.date" is in ISO 8601 calendar date format ("YYYY-MM-DD").
136
135
  */
137
136
  class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
138
137
 
@@ -620,6 +619,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
620
619
  composed: true,
621
620
  detail: { date: this.selectedValue }
622
621
  };
622
+ /** Dispatched when a date is selected through click, space, or enter. "e.detail.date" is in ISO 8601 calendar date format ("YYYY-MM-DD"). */
623
623
  this.dispatchEvent(new CustomEvent('d2l-calendar-selected', eventDetails));
624
624
  }
625
625
 
@@ -16,30 +16,37 @@ class CardFooterLink extends RtlMixin(LitElement) {
16
16
  return {
17
17
  /**
18
18
  * Download a URL instead of navigating to it
19
+ * @type {boolean}
19
20
  */
20
21
  download: { type: Boolean, reflect: true },
21
22
  /**
22
23
  * URL or URL fragment of the link
24
+ * @type {string}
23
25
  */
24
26
  href: { type: String, reflect: true },
25
27
  /**
26
28
  * Indicates the human language of the linked resource; purely advisory, with no built-in functionality
29
+ * @type {string}
27
30
  */
28
31
  hreflang: { type: String, reflect: true },
29
32
  /**
30
33
  * REQUIRED: Preset icon key (e.g. "tier1:gear"). Must be a tier 1 icon.
34
+ * @type {string}
31
35
  */
32
36
  icon: { type: String, reflect: true },
33
37
  /**
34
38
  * Specifies the relationship of the target object to the link object
39
+ * @type {string}
35
40
  */
36
41
  rel: { type: String, reflect: true },
37
42
  /**
38
43
  * Secondary count to display as a count bubble on the icon
44
+ * @type {number}
39
45
  */
40
46
  secondaryCount: { type: Number, attribute: 'secondary-count', reflect: true },
41
47
  /**
42
48
  * Maximum digits to display in the secondary count. Defaults to no limit
49
+ * @type {string}
43
50
  */
44
51
  secondaryCountMaxDigits: { type: String, attribute: 'secondary-count-max-digits' },
45
52
  /**
@@ -49,14 +56,17 @@ class CardFooterLink extends RtlMixin(LitElement) {
49
56
  secondaryCountType: { type: String, attribute: 'secondary-count-type', reflect: true },
50
57
  /**
51
58
  * Where to display the linked URL
59
+ * @type {string}
52
60
  */
53
61
  target: { type: String, reflect: true },
54
62
  /**
55
63
  * REQUIRED: Accessible text for the link (not visible, gets announced when user focuses)
64
+ * @type {string}
56
65
  */
57
66
  text: { type: String, reflect: true },
58
67
  /**
59
68
  * Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality
69
+ * @type {string}
60
70
  */
61
71
  type: { type: String, reflect: true }
62
72
  };
@@ -108,7 +118,7 @@ class CardFooterLink extends RtlMixin(LitElement) {
108
118
  render() {
109
119
  const noNumber = this.secondaryCount === undefined;
110
120
  return html`
111
- <a @focus="${this._onFocus}"
121
+ <a @focus="${this._onFocus}"
112
122
  @blur="${this._onBlur}"
113
123
  ?download="${this.download}"
114
124
  href="${ifDefined(this.href)}"
@@ -121,7 +131,7 @@ class CardFooterLink extends RtlMixin(LitElement) {
121
131
  aria-hidden="true"
122
132
  icon="${this.icon}"
123
133
  max-digits="${ifDefined(this.secondaryCountMaxDigits ? this.secondaryCountMaxDigits : undefined)}"
124
- number="${noNumber ? 0 : this.secondaryCount}"
134
+ number="${noNumber ? 0 : this.secondaryCount}"
125
135
  ?hide-zero="${noNumber}"
126
136
  text="${this.text}"
127
137
  type="${this._getType()}">
@@ -11,6 +11,7 @@ class CardLoadingShimmer extends LitElement {
11
11
  return {
12
12
  /**
13
13
  * Whether the header content is being loaded
14
+ * @type {boolean}
14
15
  */
15
16
  loading: { type: Boolean }
16
17
  };
@@ -21,38 +21,47 @@ class Card extends RtlMixin(LitElement) {
21
21
  return {
22
22
  /**
23
23
  * Style the card's content and footer as centered horizontally
24
+ * @type {boolean}
24
25
  */
25
26
  alignCenter: { type: Boolean, attribute: 'align-center', reflect: true },
26
27
  /**
27
28
  * Download a URL instead of navigating to it
29
+ * @type {boolean}
28
30
  */
29
31
  download: { type: Boolean, reflect: true },
30
32
  /**
31
33
  * Location for the primary action/navigation
34
+ * @type {string}
32
35
  */
33
36
  href: { type: String, reflect: true },
34
37
  /**
35
38
  * Indicates the human language of the linked resource; purely advisory, with no built-in functionality
39
+ * @type {string}
36
40
  */
37
41
  hreflang: { type: String, reflect: true },
38
42
  /**
39
43
  * Specifies the relationship of the target object to the link object
44
+ * @type {string}
40
45
  */
41
46
  rel: { type: String, reflect: true },
42
47
  /**
43
48
  * Subtle aesthetic on non-white backgrounds
49
+ * @type {boolean}
44
50
  */
45
51
  subtle: { type: Boolean, reflect: true },
46
52
  /**
47
53
  * Where to display the linked URL
54
+ * @type {string}
48
55
  */
49
56
  target: { type: String, reflect: true },
50
57
  /**
51
58
  * Accessible text for the card (will be announced when AT user focuses)
59
+ * @type {string}
52
60
  */
53
61
  text: { type: String, reflect: true },
54
62
  /**
55
63
  * Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality
64
+ * @type {string}
56
65
  */
57
66
  type: { type: String, reflect: true },
58
67
  _active: { type: Boolean, reflect: true },
@@ -8,8 +8,6 @@ import { heading3Styles } from '../typography/styles.js';
8
8
  /**
9
9
  * A simple confirmation dialog for prompting the user. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the confirm dialog with the action value.
10
10
  * @slot footer - Slot for footer content such as workflow buttons
11
- * @fires d2l-dialog-open - Dispatched when the dialog is opened
12
- * @fires d2l-dialog-close - Dispatched with the action value when the dialog is closed for any reason
13
11
  */
14
12
  class DialogConfirm extends DialogMixin(LitElement) {
15
13
 
@@ -17,6 +15,7 @@ class DialogConfirm extends DialogMixin(LitElement) {
17
15
  return {
18
16
  /**
19
17
  * REQUIRED: The text content for the confirmation dialog
18
+ * @type {string}
20
19
  */
21
20
  text: { type: String }
22
21
  };
@@ -16,8 +16,6 @@ const mediaQueryList = window.matchMedia('(max-width: 615px)');
16
16
  * A generic fullscreen dialog that provides a slot for arbitrary content and a "footer" slot for workflow buttons. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the dialog with the action value.
17
17
  * @slot - Default slot for content inside dialog
18
18
  * @slot footer - Slot for footer content such as workflow buttons
19
- * @fires d2l-dialog-open - Dispatched when the dialog is opened
20
- * @fires d2l-dialog-close - Dispatched with the action value when the dialog is closed for any reason
21
19
  */
22
20
  class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement))) {
23
21
 
@@ -25,6 +23,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
25
23
  return {
26
24
  /**
27
25
  * Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin
26
+ * @type {boolean}
28
27
  */
29
28
  async: { type: Boolean },
30
29
  _hasFooterContent: { type: Boolean, attribute: false },
@@ -45,7 +44,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
45
44
  }
46
45
 
47
46
  @media (min-width: 616px) {
48
-
47
+
49
48
  .d2l-dialog-header {
50
49
  border-bottom: 1px solid var(--d2l-color-gypsum);
51
50
  padding-bottom: 0.9rem;
@@ -72,7 +71,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
72
71
  :host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
73
72
  margin: -2px 0 0 -12px;
74
73
  }
75
-
74
+
76
75
  dialog.d2l-dialog-outer,
77
76
  div.d2l-dialog-outer {
78
77
  border-radius: 8px;
@@ -164,7 +163,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
164
163
  margin-left: -13px;
165
164
  margin-right: 15px;
166
165
  }
167
-
166
+
168
167
  dialog.d2l-dialog-outer,
169
168
  div.d2l-dialog-outer {
170
169
  margin: 0 !important;
@@ -244,6 +244,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
244
244
  allowBodyScroll(this._bodyScrollKey);
245
245
  this._bodyScrollKey = null;
246
246
  if (this._action === undefined) this._action = abortAction;
247
+ /** Dispatched with the action value when the dialog is closed for any reason */
247
248
  this.dispatchEvent(new CustomEvent(
248
249
  'd2l-dialog-close', {
249
250
  bubbles: true,
@@ -346,6 +347,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
346
347
  }
347
348
 
348
349
  if (!reduceMotion) await animPromise;
350
+ /** Dispatched when the dialog is opened */
349
351
  this.dispatchEvent(new CustomEvent(
350
352
  'd2l-dialog-open', { bubbles: true, composed: true }
351
353
  ));
@@ -17,8 +17,6 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
17
17
  * A generic dialog that provides a slot for arbitrary content and a "footer" slot for workflow buttons. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the dialog with the action value.
18
18
  * @slot - Default slot for content inside dialog
19
19
  * @slot footer - Slot for footer content such as workflow buttons
20
- * @fires d2l-dialog-open - Dispatched when the dialog is opened
21
- * @fires d2l-dialog-close - Dispatched with the action value when the dialog is closed for any reason
22
20
  */
23
21
  class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement))) {
24
22
 
@@ -14,14 +14,14 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
14
14
  return {
15
15
  /**
16
16
  * A description to be added to the opener button for accessibility when text on button does not provide enough context
17
+ * @type {string}
17
18
  */
18
19
  description: { type: String },
19
20
  /**
20
21
  * REQUIRED: Text for the button
22
+ * @type {string}
21
23
  */
22
- text: {
23
- type: String
24
- }
24
+ text: { type: String }
25
25
  };
26
26
  }
27
27
 
@@ -15,6 +15,7 @@ class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
15
15
  return {
16
16
  /**
17
17
  * Optionally render button as primary button
18
+ * @type {boolean}
18
19
  */
19
20
  primary: {
20
21
  type: Boolean,
@@ -23,6 +24,7 @@ class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
23
24
 
24
25
  /**
25
26
  * REQUIRED: Text for the button
27
+ * @type {string}
26
28
  */
27
29
  text: {
28
30
  type: String
@@ -29,12 +29,14 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
29
29
  },
30
30
  /**
31
31
  * Optionally provide boundaries to where the dropdown will appear. Valid properties are "above", "below", "left", and "right".
32
+ * @type {object}
32
33
  */
33
34
  boundary: {
34
35
  type: Object,
35
36
  },
36
37
  /**
37
38
  * Override default max-width (undefined). Specify a number that would be the px value.
39
+ * @type {number}
38
40
  */
39
41
  maxWidth: {
40
42
  type: Number,
@@ -43,6 +45,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
43
45
  },
44
46
  /**
45
47
  * Override default min-width (undefined). Specify a number that would be the px value.
48
+ * @type {number}
46
49
  */
47
50
  minWidth: {
48
51
  type: Number,
@@ -51,6 +54,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
51
54
  },
52
55
  /**
53
56
  * Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.
57
+ * @type {number}
54
58
  */
55
59
  maxHeight: {
56
60
  type: Number,
@@ -58,6 +62,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
58
62
  },
59
63
  /**
60
64
  * Override the breakpoint at which mobile styling is used. Defaults to 616px.
65
+ * @type {number}
61
66
  */
62
67
  mobileBreakpointOverride: {
63
68
  type: Number,
@@ -65,6 +70,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
65
70
  },
66
71
  /**
67
72
  * Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.
73
+ * @type {number}
68
74
  */
69
75
  minHeight: {
70
76
  type: Number,
@@ -73,6 +79,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
73
79
  },
74
80
  /**
75
81
  * Opt-out of showing a close button in the footer of tray-style mobile dropdowns.
82
+ * @type {boolean}
76
83
  */
77
84
  noMobileCloseButton: {
78
85
  type: Boolean,
@@ -90,6 +97,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
90
97
  },
91
98
  /**
92
99
  * Opt out of automatically closing on focus or click outside of the dropdown content
100
+ * @type {boolean}
93
101
  */
94
102
  noAutoClose: {
95
103
  type: Boolean,
@@ -98,6 +106,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
98
106
  },
99
107
  /**
100
108
  * Opt out of auto-sizing
109
+ * @type {boolean}
101
110
  */
102
111
  noAutoFit: {
103
112
  type: Boolean,
@@ -106,6 +115,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
106
115
  },
107
116
  /**
108
117
  * Opt out of focus being automatically moved to the first focusable element in the dropdown when opened
118
+ * @type {boolean}
109
119
  */
110
120
  noAutoFocus: {
111
121
  type: Boolean,
@@ -114,6 +124,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
114
124
  },
115
125
  /**
116
126
  * Render with no padding
127
+ * @type {boolean}
117
128
  */
118
129
  noPadding: {
119
130
  type: Boolean,
@@ -122,6 +133,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
122
133
  },
123
134
  /**
124
135
  * Render the footer with no padding (if it has content)
136
+ * @type {boolean}
125
137
  */
126
138
  noPaddingFooter: {
127
139
  type: Boolean,
@@ -130,6 +142,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
130
142
  },
131
143
  /**
132
144
  * Render the header with no padding (if it has content)
145
+ * @type {boolean}
133
146
  */
134
147
  noPaddingHeader: {
135
148
  type: Boolean,
@@ -138,6 +151,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
138
151
  },
139
152
  /**
140
153
  * Render without a pointer
154
+ * @type {boolean}
141
155
  */
142
156
  noPointer: {
143
157
  type: Boolean,
@@ -162,6 +176,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
162
176
  },
163
177
  /**
164
178
  * Optionally render a d2l-focus-trap around the dropdown content
179
+ * @type {boolean}
165
180
  */
166
181
  trapFocus: {
167
182
  type: Boolean,
@@ -170,6 +185,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
170
185
  },
171
186
  /**
172
187
  * Provide custom offset, positive or negative
188
+ * @type {string}
173
189
  */
174
190
  verticalOffset: {
175
191
  type: String,
@@ -549,6 +565,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
549
565
  this._showBackdrop = false;
550
566
  await this.updateComplete;
551
567
 
568
+ /** Dispatched when the dropdown is closed */
552
569
  this.dispatchEvent(new CustomEvent('d2l-dropdown-close', { bubbles: true, composed: true }));
553
570
 
554
571
  }
@@ -656,6 +673,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
656
673
  await this.updateComplete;
657
674
  }
658
675
 
676
+ /** Dispatched when the dropdown position finishes adjusting */
659
677
  this.dispatchEvent(new CustomEvent('d2l-dropdown-position', { bubbles: true, composed: true }));
660
678
  };
661
679
 
@@ -1006,6 +1024,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
1006
1024
  content.focus();
1007
1025
  }
1008
1026
  }
1027
+ /** Dispatched when user focus enters the dropdown content (trap-focus option only) */
1009
1028
  this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter'));
1010
1029
  }
1011
1030
 
@@ -8,9 +8,6 @@ import { dropdownContentStyles } from './dropdown-content-styles.js';
8
8
  * @slot header - Sticky container at the top of the dropdown
9
9
  * @slot footer - Sticky container at the bottom of the dropdown
10
10
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
11
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
12
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
13
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
14
11
  */
15
12
  class DropdownContent extends DropdownContentMixin(LitElement) {
16
13
 
@@ -14,6 +14,7 @@ class DropdownContextMenu extends DropdownOpenerMixin(VisibleOnAncestorMixin(Lit
14
14
  return {
15
15
  /**
16
16
  * REQUIRED: Label for the context-menu button
17
+ * @type {string}
17
18
  */
18
19
  text: {
19
20
  type: String
@@ -21,6 +22,7 @@ class DropdownContextMenu extends DropdownOpenerMixin(VisibleOnAncestorMixin(Lit
21
22
 
22
23
  /**
23
24
  * Attribute for busy/rich backgrounds
25
+ * @type {boolean}
24
26
  */
25
27
  translucent: {
26
28
  type: Boolean
@@ -9,9 +9,6 @@ import { ThemeMixin } from '../../mixins/theme-mixin.js';
9
9
  * @slot header - Sticky container at the top of the dropdown
10
10
  * @slot footer - Sticky container at the bottom of the dropdown
11
11
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
12
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
13
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
14
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
15
12
  */
16
13
  class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
17
14
 
@@ -14,6 +14,7 @@ class DropdownMore extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement
14
14
  return {
15
15
  /**
16
16
  * REQUIRED: Label for the more button
17
+ * @type {string}
17
18
  */
18
19
  text: {
19
20
  type: String
@@ -21,6 +22,7 @@ class DropdownMore extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement
21
22
 
22
23
  /**
23
24
  * Attribute for busy/rich backgrounds
25
+ * @type {boolean}
24
26
  */
25
27
  translucent: {
26
28
  type: Boolean
@@ -4,6 +4,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
4
4
  return {
5
5
  /**
6
6
  * Disables the dropdown opener
7
+ * @type {boolean}
7
8
  */
8
9
  disabled: {
9
10
  type: Boolean,
@@ -19,6 +20,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
19
20
 
20
21
  /**
21
22
  * Prevents the dropdown from opening automatically on or on key press
23
+ * @type {boolean}
22
24
  */
23
25
  noAutoOpen: {
24
26
  type: Boolean,
@@ -8,9 +8,6 @@ import { dropdownContentStyles } from './dropdown-content-styles.js';
8
8
  * @slot header - Sticky container at the top of the dropdown
9
9
  * @slot footer - Sticky container at the bottom of the dropdown
10
10
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
11
- * @fires d2l-dropdown-close - Dispatched when the dropdown is closed
12
- * @fires d2l-dropdown-focus-enter - Dispatched when user focus enters the dropdown content (trap-focus option only)
13
- * @fires d2l-dropdown-position - Dispatched when the dropdown position finishes adjusting
14
11
  */
15
12
  class DropdownTabs extends DropdownContentMixin(LitElement) {
16
13
 
@@ -10,14 +10,17 @@ class FilterDimensionSetValue extends LitElement {
10
10
  return {
11
11
  /**
12
12
  * REQUIRED: Unique key to represent this value in the dimension
13
+ * @type {string}
13
14
  */
14
15
  key: { type: String },
15
16
  /**
16
17
  * Whether this value in the filter is selected or not
18
+ * @type {boolean}
17
19
  */
18
20
  selected: { type: Boolean, reflect: true },
19
21
  /**
20
22
  * REQUIRED: The text that is displayed for the value
23
+ * @type {string}
21
24
  */
22
25
  text: { type: String }
23
26
  };
@@ -4,7 +4,6 @@ import { html, LitElement } from 'lit-element/lit-element.js';
4
4
  * A component to represent the main filter dimension type - a set of possible values that can be selected.
5
5
  * This component does not render anything, but instead gathers data needed for the d2l-filter.
6
6
  * @slot - For d2l-filter-dimension-set-value components
7
- * @fires d2l-filter-dimension-data-change - @ignore
8
7
  */
9
8
  class FilterDimensionSet extends LitElement {
10
9
 
@@ -12,10 +11,12 @@ class FilterDimensionSet extends LitElement {
12
11
  return {
13
12
  /**
14
13
  * REQUIRED: Unique key to represent this dimension in the filter
14
+ * @type {string}
15
15
  */
16
16
  key: { type: String },
17
17
  /**
18
18
  * Whether the values for this dimension are still loading and a loading spinner should be displayed
19
+ * @type {boolean}
19
20
  */
20
21
  loading: { type: Boolean },
21
22
  /**
@@ -25,14 +26,17 @@ class FilterDimensionSet extends LitElement {
25
26
  searchType: { type: String, attribute: 'search-type' },
26
27
  /**
27
28
  * Adds a select all checkbox and summary for this dimension
29
+ * @type {boolean}
28
30
  */
29
31
  selectAll: { type: Boolean, attribute: 'select-all' },
30
32
  /**
31
33
  * Whether only one value can be selected at a time for this dimension
34
+ * @type {boolean}
32
35
  */
33
36
  selectionSingle: { type: Boolean, attribute: 'selection-single' },
34
37
  /**
35
38
  * REQUIRED: The text that is displayed for the dimension title
39
+ * @type {string}
36
40
  */
37
41
  text: { type: String }
38
42
  };