BrightspaceUI · awikkerink · Nov 10, 2024 · Nov 15, 2024
@@ -36,6 +36,7 @@ let ALERT_HAS_HOVER = false; // if this alert or sibling alert is hovered on
  * @slot - Default content placed inside of the component
  * @fires d2l-alert-toast-button-press - Dispatched when the toast's action button is clicked
  * @fires d2l-alert-toast-close - Dispatched when the toast is closed
+ * @typedef {AlertToast} AlertToastExported
  */
 class AlertToast extends LitElement {
 

@@ -12,6 +12,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
  * @slot - Default content placed inside of the component
  * @fires d2l-alert-close - Dispatched when the alert's close button is clicked
  * @fires d2l-alert-button-press - Dispatched when the alert's action button is clicked
+ * @typedef {Alert} AlertExported
  */
 class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
 

@@ -13,6 +13,7 @@ let scrollOverflow = null;
 
 /**
  * A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'role="presentation"' and 'aria-hidden="true"'.
+ * @typedef {Backdrop} BackdropExported
  */
 class Backdrop extends LitElement {
 

@@ -2,6 +2,7 @@ import { css, html, LitElement } from 'lit';
 
 /**
  * An entry within a <d2l-breadcrumbs> parent representing the current page.
+ * @typedef {BreadcrumbCurrentPage} BreadcrumbCurrentPageExported
  */
 class BreadcrumbCurrentPage extends LitElement {
 

@@ -8,6 +8,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * An entry within a <d2l-breadcrumbs> parent.
+ * @typedef {Breadcrumb} BreadcrumbExported
  */
 class Breadcrumb extends RtlMixin(FocusMixin(LitElement)) {
 

@@ -6,6 +6,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 /**
  * 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.
  * @slot - Breadcrumb items
+ * @typedef {Breadcrumbs} BreadcrumbsExported
  */
 class Breadcrumbs extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	static get properties() {

@@ -18,6 +18,7 @@ const MODE = {
 
 /**
  * A component for quickly adding items to a specific locaiton.
+ * @typedef {ButtonAdd} ButtonAddExported
  */
 class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(LitElement)))) {
 	static get properties() {
@@ -193,6 +194,7 @@ customElements.define('d2l-button-add', ButtonAdd);
 
 /**
  * @ignore
+ * @typedef {ButtonAddIconText} ButtonAddIconTextExported
  */
 class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
 	static get properties() {

@@ -15,6 +15,7 @@ import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 /**
  * A button component that can be used just like the native button for instances where only an icon is displayed.
  * @slot icon - Optional slot for a custom icon
+ * @typedef {ButtonIcon} ButtonIconExported
  */
 class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(LitElement))))) {
 

@@ -33,6 +33,7 @@ export const moveActions = Object.freeze({
 /**
  * A button component that provides a move action via a single button.
  * @fires d2l-button-move-action - Dispatched when move action occurs
+ * @typedef {ButtonMove} ButtonMoveExported
  */
 class ButtonMove extends ThemeMixin(FocusMixin(RtlMixin(LitElement))) {
 

@@ -12,6 +12,7 @@ import { labelStyles } from '../typography/styles.js';
  * A button component that can be used just like the native button, but for advanced or de-emphasized actions.
  * @slot - Default content placed inside of the button
  * @slot icon - Optional slot for a custom icon
+ * @typedef {ButtonSubtle} ButtonSubtleExported
  */
 class ButtonSubtle extends ButtonMixin(LitElement) {
 

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 /**
  * A button container component for button toggles.
  * @fires d2l-button-toggle-before-change - Dispatched before pressed state is updated. Can be canceled to allow the consumer to handle toggling pressed state. This is useful if something needs to happen prior to the pressed state being toggled.
+ * @typedef {ButtonToggle} ButtonToggleExported
  */
 class ButtonToggle extends LitElement {
 

@@ -10,6 +10,7 @@ import { labelStyles } from '../typography/styles.js';
 /**
  * A button component that can be used just like the native button element.
  * @slot - Default content placed inside of the button
+ * @typedef {Button} ButtonExported
  */
 class Button extends ButtonMixin(LitElement) {
 

@@ -13,6 +13,7 @@ const MINIMUM_TARGET_SIZE = 24;
 /**
  * A wrapper component to display floating workflow buttons. When the normal position of the workflow buttons is below the bottom edge of the viewport, they will dock at the bottom edge. When the normal position becomes visible, they will undock.
  * @slot - Content to be displayed in the floating container
+ * @typedef {FloatingButtons} FloatingButtonsExported
  */
 class FloatingButtons extends RtlMixin(LitElement) {
 

@@ -146,6 +146,7 @@ export function getPrevMonth(month) {
 /**
  * A component can be used to display a responsively sized calendar that allows for date selection.
  * @slot - Content displayed under the calendar (e.g., buttons)
+ * @typedef {Calendar} CalendarExported
  */
 class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 

@@ -4,6 +4,7 @@ import { css, html, LitElement } from 'lit';
 /**
  * A helper for providing layout/style for meta data within the `content` slot.
  * @slot - Slot for meta data text
+ * @typedef {CardContentMeta} CardContentMetaExported
  */
 class CardContentMeta extends LitElement {
 

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 /**
  * A helper for providing layout/style for a title within the `content` slot.
  * @slot - Slot for title text
+ * @typedef {CardContentTitle} CardContentTitleExported
  */
 class CardContentTitle extends LitElement {
 

@@ -10,6 +10,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 /**
  * An icon link that can be placed in the `footer` slot.
  * @slot tooltip - slot for the link tooltip
+ * @typedef {CardFooterLink} CardFooterLinkExported
  */
 class CardFooterLink extends FocusMixin(RtlMixin(LitElement)) {
 

@@ -4,6 +4,7 @@ import { css, html, LitElement } from 'lit';
 /**
  * A card layout component for when the card header is loading.
  * @slot - Slot for header content being loaded
+ * @typedef {CardLoadingShimmer} CardLoadingShimmerExported
  */
 class CardLoadingShimmer extends LitElement {
 

@@ -15,6 +15,7 @@ import { styleMap } from 'lit/directives/style-map.js';
  * @slot badge - Slot for badge content, such as a profile image or status indicator
  * @slot footer - Slot for footer content, such secondary actions
  * @slot header - Slot for header content, such as course image (no actionable elements)
+ * @typedef {Card} CardExported
  */
 class Card extends FocusMixin(RtlMixin(LitElement)) {
 

@@ -5,6 +5,7 @@ import { SkeletonGroupMixin } from '../skeleton/skeleton-group-mixin.js';
 /**
  * A component that renders a container and layout for collapsible panels
  * @slot default - Slot for panels. Only accepts `d2l-collapsible-panel`
+ * @typedef {CollapsiblePanelGroup} CollapsiblePanelGroupExported
  */
 class CollapsiblePanelGroup extends SkeletonGroupMixin(LitElement) {
 

@@ -7,6 +7,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 /**
  * A component for a "summary item" child component that describes the content in a collapsible panel.
+ * @typedef {CollapsiblePanelSummaryItem} CollapsiblePanelSummaryItemExported
  */
 class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 

@@ -34,6 +34,7 @@ const defaultHeading = 3;
  * @slot actions - Slot for buttons and dropdown openers to be placed in top right corner of header
  * @fires d2l-collapsible-panel-expand - Dispatched when the panel is expanded
  * @fires d2l-collapsible-panel-collapse - Dispatched when the panel is collapsed
+ * @typedef {CollapsiblePanel} CollapsiblePanelExported
  */
 class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 

@@ -7,6 +7,7 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
+/** @typedef {CountBadgeIcon} CountBadgeIconExported */
 class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	static get properties() {

@@ -6,6 +6,7 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
+/** @typedef {CountBadge} CountBadgeExported */
 class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	static get styles() {

@@ -4,6 +4,7 @@ import { styles } from './code-view-styles.js';
 import { themeStyles } from './code-dark-plus-styles.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
+/** @typedef {CodeView} CodeViewExported */
 class CodeView extends LitElement {
 
 	static get properties() {

@@ -22,6 +22,7 @@ window.isD2LDemoPage = true;
 	document.body.removeAttribute('unresolved');
 })();
 
+/** @typedef {DemoPage} DemoPageExported */
 class DemoPage extends LitElement {
 
 	static get properties() {

@@ -5,6 +5,7 @@ import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-content.js';
 import { css, html, LitElement } from 'lit';
 
+/** @typedef {DemoSnippet} DemoSnippetExported */
 class DemoSnippet extends LitElement {
 
 	static get properties() {

@@ -32,6 +32,7 @@ export const descriptionListStyles = [
 /**
  * Wraps a native <dl> element, providing styling and resize behavior.
  * @slot - Content to wrap
+ * @typedef {DescriptionListWrapper} DescriptionListWrapperExported
  */
 class DescriptionListWrapper extends LitElement {
 	static get properties() {

@@ -10,6 +10,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  * 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.
  * @fires d2l-dialog-before-close - Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing
  * @slot footer - Slot for footer content such as workflow buttons
+ * @typedef {DialogConfirm} DialogConfirmExported
  */
 class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 

@@ -19,6 +19,7 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
  * @fires d2l-dialog-before-close - Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing
  * @slot - Default slot for content inside dialog
  * @slot footer - Slot for footer content such as workflow buttons
+ * @typedef {DialogFullscreen} DialogFullscreenExported
  */
 class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement)))) {
 

@@ -19,6 +19,7 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
  * @fires d2l-dialog-before-close - Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing
  * @slot - Default slot for content inside dialog
  * @slot footer - Slot for footer content such as workflow buttons
+ * @typedef {Dialog} DialogExported
  */
 class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement)))) {
 

@@ -7,6 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /**
  * A "d2l-button-subtle" opener for dropdown content.
  * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
+ * @typedef {DropdownButtonSubtle} DropdownButtonSubtleExported
  */
 class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 

@@ -8,6 +8,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 /**
  * A "d2l-button" opener for dropdown content.
  * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
+ * @typedef {DropdownButton} DropdownButtonExported
  */
 class DropdownButton extends DropdownOpenerMixin(RtlMixin(LitElement)) {
 

@@ -8,6 +8,7 @@ import { LitElement } from 'lit';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
+ * @typedef {DropdownContent} DropdownContentExported
  */
 class DropdownContent extends DropdownContentMixin(LitElement) {
 

@@ -7,6 +7,7 @@ import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
 /**
  * A simple/minimal opener for dropdown content.
  * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
+ * @typedef {DropdownContextMenu} DropdownContextMenuExported
  */
 class DropdownContextMenu extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement)) {
 

@@ -11,6 +11,7 @@ const dropdownDelay = 300;
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
+ * @typedef {DropdownMenu} DropdownMenuExported
  */
 class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 

@@ -7,6 +7,7 @@ import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
 /**
  * A simple/minimal opener for dropdown content.
  * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
+ * @typedef {DropdownMore} DropdownMoreExported
  */
 class DropdownMore extends DropdownOpenerMixin(VisibleOnAncestorMixin(LitElement)) {
 

@@ -8,6 +8,7 @@ import { dropdownContentStyles } from './dropdown-content-styles.js';
  * @slot header - Sticky container at the top of the dropdown
  * @slot footer - Sticky container at the bottom of the dropdown
  * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
+ * @typedef {DropdownTabs} DropdownTabsExported
  */
 class DropdownTabs extends DropdownContentMixin(LitElement) {
 

@@ -5,6 +5,7 @@ import { dropdownOpenerStyles } from './dropdown-opener-styles.js';
 /**
  * A generic opener for dropdown content, enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value "d2l-dropdown-opener".  Wire-up is automatic.
  * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
+ * @typedef {Dropdown} DropdownExported
  */
 class Dropdown extends DropdownOpenerMixin(LitElement) {
 

@@ -8,6 +8,7 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  * `d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component.
  * @fires d2l-empty-state-action - Dispatched when the action button is clicked
  * @fires d2l-empty-state-illustrated-check - Internal event
+ * @typedef {EmptyStateActionButton} EmptyStateActionButtonExported
  */
 class EmptyStateActionButton extends PropertyRequiredMixin(LitElement) {
 

@@ -5,6 +5,7 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
 
 /**
  * `d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.
+ * @typedef {EmptyStateActionLink} EmptyStateActionLinkExported
  */
 class EmptyStateActionLink extends PropertyRequiredMixin(LitElement) {
 

@@ -15,6 +15,7 @@ const illustrationAspectRatio = 500 / 330;
  * The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An empty state action component can be placed inside of the default slot to add an optional action.
  * @slot - Slot for empty state actions
  * @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
+ * @typedef {EmptyStateIllustrated} EmptyStateIllustratedExported
  */
 class EmptyStateIllustrated extends PropertyRequiredMixin(LitElement) {
 

@@ -8,6 +8,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 /**
  * The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.
  * @slot - Slot for empty state actions
+ * @typedef {EmptyStateSimple} EmptyStateSimpleExported
  */
 class EmptyStateSimple extends PropertyRequiredMixin(RtlMixin(LitElement)) {
 

@@ -17,6 +17,7 @@ const states = {
  * @slot - Default content placed inside of the component
  * @fires d2l-expand-collapse-content-expand - Dispatched when the content starts to expand. The `detail` contains an `expandComplete` promise that can be waited on to determine when the content has finished expanding.
  * @fires d2l-expand-collapse-content-collapse - Dispatched when the content starts to collapse. The `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing.
+ * @typedef {ExpandCollapseContent} ExpandCollapseContentExported
  */
 class ExpandCollapseContent extends LitElement {
 

@@ -6,6 +6,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  * A component to represent a possible date value that can be selected for a dimension set (the main filter dimension type) for predefined date ranges.
  * A range property is used to define the preset text shown, as well as the start and end date values formatted as UTC strings.
  * This component does not render anything, but instead gathers data needed for the d2l-filter.
+ * @typedef {FilterDimensionSetDateTextValue} FilterDimensionSetDateTextValueExported
  */
 class FilterDimensionSetDateTextValue extends LocalizeCoreElement(LitElement) {
 

@@ -10,6 +10,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  * A component to represent a possible custom date range or date-time range value that can be selected for a dimension set (the main filter dimension type).
  * The start-value and end-value will be included in the d2l-filter-change event and formatted as an ISO string in UTC time.
  * This component does not render anything, but instead gathers data needed for the d2l-filter.
+ * @typedef {FilterDimensionSetDateTimeRangeValue} FilterDimensionSetDateTimeRangeValueExported
  */
 class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElement) {
 

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
 /**
  * A component to customize the empty state parameters for a particular filter-dimension-set.
  * This component does not render anything, but instead gathers data needed for the d2l-filter.
+ * @typedef {FilterDimensionSetEmptyState} FilterDimensionSetEmptyStateExported
  */
 class FilterDimensionSetEmptyState extends LitElement {
 

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
 /**
  * A component to represent a possible value that can be selected for a dimension set (the main filter dimension type).
  * This component does not render anything, but instead gathers data needed for the d2l-filter.
+ * @typedef {FilterDimensionSetValue} FilterDimensionSetValueExported
  */
 class FilterDimensionSetValue extends LitElement {
 

@@ -6,6 +6,7 @@ import { html, LitElement } from 'lit';
  * @slot - For d2l-filter-dimension-set-value components
  * @slot search-empty-state - The empty state that is displayed when the search returns no results
  * @slot set-empty-state - The empty state that is displayed when the dimension-set has no values
+ * @typedef {FilterDimensionSet} FilterDimensionSetExported
  */
 class FilterDimensionSet extends LitElement {