BrightspaceUI · awikkerink · Nov 10, 2024 · Nov 15, 2024 · Nov 18, 2024 · Nov 20, 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)) {
 

@@ -14,6 +14,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 '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))))) {
 

@@ -1,5 +1,9 @@
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 
+/**
+ * @template {ReactiveElementClassType} S
+ * @param {S} superclass
+ */
 export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 
 	static get properties() {
@@ -66,8 +70,8 @@ export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.disabled = false;
 
 		/** @ignore */

@@ -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() {

@@ -11,6 +11,10 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 const maxBadgeDigits = 5;
 
+/**
+ * @template {LitElementClassType} S
+ * @param {S} superclass
+ */
 export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(RtlMixin(superclass))) {
 
 	static get properties() {
@@ -143,8 +147,8 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 		`];
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.announceChanges = false;
 		this.forceFocusRing = false;
 		this.hasTooltip = false;

@@ -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() {

@@ -3,8 +3,9 @@ import { LitElement } from 'lit';
 /**
  * Creates a Lit component that mirrors properties of another, and passes its properties through to
  * a specific rendered element.
+ * @template {LitElementClassType} S
  *
- * @param superclass The Lit class to mirror (will copy all its properties).
+ * @param {S} superclass The Lit class to mirror (will copy all its properties).
  * @param { String } target The element name or other selector string of the element to pass properties to.
  */
 export const DemoPassthroughMixin = (superclass, target) => class extends LitElement {

@@ -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)))) {
 

@@ -28,6 +28,10 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const abortAction = 'abort';
 const defaultMargin = { top: 75, right: 30, bottom: 30, left: 30 };
 
+/**
+ * @template {LitElementClassType} S
+ * @param {S} superclass
+ */
 export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	static get properties() {
@@ -65,8 +69,8 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 		this.focusableContentElemPresent = false;
 		this.opened = false;
 		this._autoSize = true;

@@ -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)) {
 

@@ -21,6 +21,10 @@ const defaultVerticalOffset = 16;
 const pointerLength = 16;
 const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
 
+/**
+ * @template {LitElementClassType} S
+ * @param {S} superclass
+ */
 export const DropdownContentMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
 
 	static get properties() {
@@ -262,8 +266,8 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		};
 	}
 
-	constructor() {
-		super();
+	constructor(...args) {
+		super(...args);
 
 		this.noAutoClose = false;
 		this.noAutoFit = false;

@@ -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)) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,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 'aria-hidden="true"'.
+     * @typedef {Backdrop} BackdropExported
      */
     class Backdrop extends LitElement {
@@ Expand Down @@