@momentum-design/components 0.84.3 → 0.84.5

package/dist/components/toggle/toggle.component.js

@@ -56,9 +56,9 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
         super(...arguments);
         /**
-        * Determines whether the toggle is active or inactive.
-        * @default false
-        */
+         * Determines whether the toggle is active or inactive.
+         * @default false
+         */
         this.checked = false;
         /**
          * Determines toggle size in rem (height is specified here).
@@ -68,10 +68,10 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          */
         this.size = DEFAULTS.SIZE;
         /**
-       * Automatically focus on the element when the page loads.
-       * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-       * @default false
-       */
+         * Automatically focus on the element when the page loads.
+         * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+         * @default false
+         */
         this.autofocus = false;
     }
     connectedCallback() {
@@ -80,9 +80,9 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.helpTextType = undefined;
     }
     /** @internal
-   * Resets the checkbox to its initial state.
-   * The checked property is set to false.
-   */
+     * Resets the checkbox to its initial state.
+     * The checked property is set to false.
+     */
     formResetCallback() {
         this.checked = false;
     }
@@ -93,11 +93,11 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
     }
     /**
-   * Manages the required state of the checkbox.
-   * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
-   * If the validationMessage is set, it will be used as the custom validity message.
-   * If the validationMessage is not set, it will clear the custom validity message.
-   */
+     * Manages the required state of the checkbox.
+     * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
+     * If the validationMessage is set, it will be used as the custom validity message.
+     * If the validationMessage is not set, it will clear the custom validity message.
+     */
     manageRequired() {
         if (!this.checked && this.required) {
             if (this.validationMessage) {
@@ -113,10 +113,10 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
     }
     /**
-   * Updates the form value to reflect the current state of the toggle.
-   * If toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.
-   * If toggle is switched off, the value is set to null.
-   */
+     * Updates the form value to reflect the current state of the toggle.
+     * If toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.
+     * If toggle is switched off, the value is set to null.
+     */
     setFormValue() {
         let actualValue = null;
         if (this.checked) {
@@ -129,19 +129,19 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.internals.setFormValue(actualValue);
     }
     /**
-   * Toggles the state of the toggle element.
-   * If the element is not disabled, then the checked property is toggled.
-   */
+     * Toggles the state of the toggle element.
+     * If the element is not disabled, then the checked property is toggled.
+     */
     toggleState() {
         if (!this.disabled) {
             this.checked = !this.checked;
         }
     }
     /**
-   * Handles the keydown event on the toggle element.
-   * When the user presses Enter, the form is submitted.
-   * @param event - The keyboard event.
-   */
+     * Handles the keydown event on the toggle element.
+     * When the user presses Enter, the form is submitted.
+     * @param event - The keyboard event.
+     */
     handleKeyDown(event) {
         var _a;
         if (event.key === 'Enter') {
@@ -149,21 +149,21 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
     }
     /**
-   * Toggles the state of the toggle element.
-   * and dispatch the new change event.
-   */
+     * Toggles the state of the toggle element.
+     * and dispatch the new change event.
+     */
     handleChange(event) {
         this.toggleState();
         const EventConstructor = event.constructor;
         this.dispatchEvent(new EventConstructor(event.type, event));
     }
     /**
-   * Sets the size attribute for the toggle component.
-   * If the provided size is not included in the TOGGLE_SIZE,
-   * it defaults to the value specified in DEFAULTS.SIZE.
-   *
-   * @param size - The size to set.
-   */
+     * Sets the size attribute for the toggle component.
+     * If the provided size is not included in the TOGGLE_SIZE,
+     * it defaults to the value specified in DEFAULTS.SIZE.
+     *
+     * @param size - The size to set.
+     */
     setToggleSize(size) {
         this.setAttribute('size', Object.values(TOGGLE_SIZE).includes(size) ? size : DEFAULTS.SIZE);
     }
@@ -179,34 +179,33 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     render() {
         var _a;
         return html `
-        <mdc-statictoggle
-          ?checked="${this.checked}"
-          ?disabled="${this.disabled}"
-          size="${this.size}"
-          class="mdc-focus-ring"
-          part="container"
-        >
-          <input
-            id="${this.id}"
-            type="checkbox"
-            part="toggle-input"
-            role="${ROLE.CHECKBOX}"
-            ?autofocus="${this.autofocus}"
-            ?required="${this.required}"
-            name="${ifDefined(this.name)}"
-            value="${ifDefined(this.value)}"
-            .checked="${this.checked}"
-            aria-checked="${this.checked}"
-            .disabled="${this.disabled}"
-            aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
-            aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-            tabindex="${this.disabled ? -1 : 0}"
-            @change="${this.handleChange}"
-            @keydown="${this.handleKeyDown}"
-          />
-        </mdc-statictoggle>
-        ${this.renderLabel()}
-        ${this.renderHelperText()}
+      <mdc-statictoggle
+        ?checked="${this.checked}"
+        ?disabled="${this.disabled}"
+        size="${this.size}"
+        class="mdc-focus-ring"
+        part="container"
+      >
+        <input
+          id="${this.id}"
+          type="checkbox"
+          part="toggle-input"
+          role="${ROLE.CHECKBOX}"
+          ?autofocus="${this.autofocus}"
+          ?required="${this.required}"
+          name="${ifDefined(this.name)}"
+          value="${ifDefined(this.value)}"
+          .checked="${this.checked}"
+          aria-checked="${this.checked}"
+          .disabled="${this.disabled}"
+          aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
+          aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @change="${this.handleChange}"
+          @keydown="${this.handleKeyDown}"
+        />
+      </mdc-statictoggle>
+      ${this.renderLabel()} ${this.renderHelperText()}
     `;
     }
 }

package/dist/components/toggle/toggle.styles.js

@@ -1,86 +1,94 @@
 import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host {
-    --mdc-toggle-width: 3rem;
-    --mdc-toggle-height: 1.5rem;
-    --mdc-toggle-width-compact: 2rem;
-    --mdc-toggle-height-compact: 1rem;
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-toggle-width: 3rem;
+      --mdc-toggle-height: 1.5rem;
+      --mdc-toggle-width-compact: 2rem;
+      --mdc-toggle-height-compact: 1rem;
 
-    --mdc-toggle-label-lineheight: var(--mds-font-lineheight-body-midsize);
-    --mdc-toggle-label-fontsize: var(--mds-font-size-body-midsize);
-    --mdc-toggle-label-fontweight: 400;
-    --mdc-toggle-label-color-disabled: var(--mds-color-theme-text-primary-disabled);
-    --mdc-toggle-help-text-color: var(--mds-color-theme-text-secondary-normal);
+      --mdc-toggle-label-lineheight: var(--mds-font-lineheight-body-midsize);
+      --mdc-toggle-label-fontsize: var(--mds-font-size-body-midsize);
+      --mdc-toggle-label-fontweight: 400;
+      --mdc-toggle-label-color-disabled: var(--mds-color-theme-text-primary-disabled);
+      --mdc-toggle-help-text-color: var(--mds-color-theme-text-secondary-normal);
 
-    --mdc-toggle-active-hover-color: var(--mds-color-theme-control-active-hover);
-    --mdc-toggle-active-pressed-color: var(--mds-color-theme-control-active-pressed);
-    --mdc-toggle-inactive-hover-color: var(--mds-color-theme-control-inactive-hover);
-    --mdc-toggle-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
-  }
+      --mdc-toggle-active-hover-color: var(--mds-color-theme-control-active-hover);
+      --mdc-toggle-active-pressed-color: var(--mds-color-theme-control-active-pressed);
+      --mdc-toggle-inactive-hover-color: var(--mds-color-theme-control-inactive-hover);
+      --mdc-toggle-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
+    }
 
-  :host([label]), :host([help-text]){
-    display: grid;
-    grid-template-rows: auto auto;
-    grid-template-columns: auto auto;
-    column-gap: 0.75rem;
-    row-gap: 0.25rem;
-  }
+    :host([label]),
+    :host([help-text]) {
+      display: grid;
+      grid-template-rows: auto auto;
+      grid-template-columns: auto auto;
+      column-gap: 0.75rem;
+      row-gap: 0.25rem;
+    }
 
-  :host([help-text='']) {
-    grid-template-rows: auto;
-    row-gap: 0rem;
-  }
+    :host([help-text='']) {
+      grid-template-rows: auto;
+      row-gap: 0rem;
+    }
 
-  :host::part(toggle-input) {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    opacity: 0.1%;
-    overflow: visible;
-    z-index: 1;
-    width: var(--mdc-toggle-width);
-    height: var(--mdc-toggle-height);
-  }
+    :host::part(toggle-input) {
+      margin: 0;
+      padding: 0;
+      position: absolute;
+      opacity: 0.1%;
+      overflow: visible;
+      z-index: 1;
+      width: var(--mdc-toggle-width);
+      height: var(--mdc-toggle-height);
+    }
 
-  .mdc-label-text, .mdc-help-text {
-    font-size: var(--mdc-toggle-label-fontsize);
-    font-weight: var(--mdc-toggle-label-fontweight);
-    line-height: var(--mdc-toggle-label-lineheight);
-    grid-column: 2;
-  }
+    .mdc-label-text,
+    .mdc-help-text {
+      font-size: var(--mdc-toggle-label-fontsize);
+      font-weight: var(--mdc-toggle-label-fontweight);
+      line-height: var(--mdc-toggle-label-lineheight);
+      grid-column: 2;
+    }
 
-  .mdc-label, :host::part(toggle-input) {
-    cursor: pointer;
-  }
+    .mdc-label,
+    :host::part(toggle-input) {
+      cursor: pointer;
+    }
 
-  :host([disabled]) .mdc-label,
-  :host([disabled])::part(toggle-input) {
-    cursor: default;
-  }
+    :host([disabled]) .mdc-label,
+    :host([disabled])::part(toggle-input) {
+      cursor: default;
+    }
 
-  .mdc-help-text {
-    color: var(--mdc-toggle-help-text-color);
-  }
+    .mdc-help-text {
+      color: var(--mdc-toggle-help-text-color);
+    }
 
-  :host(:hover:not([disabled]))::part(container) {
-    background-color: var(--mdc-toggle-inactive-hover-color);
-  }
+    :host(:hover:not([disabled]))::part(container) {
+      background-color: var(--mdc-toggle-inactive-hover-color);
+    }
 
-  :host(:active:not([disabled]))::part(container) {
-    background-color: var(--mdc-toggle-inactive-pressed-color);
-  }
+    :host(:active:not([disabled]))::part(container) {
+      background-color: var(--mdc-toggle-inactive-pressed-color);
+    }
 
-  :host(:hover:not([disabled])[checked])::part(container) {
-    background-color: var(--mdc-toggle-active-hover-color);
-  }
+    :host(:hover:not([disabled])[checked])::part(container) {
+      background-color: var(--mdc-toggle-active-hover-color);
+    }
 
-  :host(:active:not([disabled])[checked])::part(container) {
-    background-color: var(--mdc-toggle-active-pressed-color);
-  }
+    :host(:active:not([disabled])[checked])::part(container) {
+      background-color: var(--mdc-toggle-active-pressed-color);
+    }
 
-  :host([disabled]) .mdc-label-text, :host([disabled]) .mdc-help-text {
-    color: var(--mdc-toggle-label-color-disabled);
-  }
-`, ...hostFocusRingStyles(true)];
+    :host([disabled]) .mdc-label-text,
+    :host([disabled]) .mdc-help-text {
+      color: var(--mdc-toggle-label-color-disabled);
+    }
+  `,
+    ...hostFocusRingStyles(true),
+];
 export default styles;

package/dist/components/toggletip/toggletip.component.d.ts

@@ -41,13 +41,13 @@ declare class ToggleTip extends Popover {
     /** @internal */
     currentAnnouncement: string;
     /**
-      * Set this attribute with the id of the element in the DOM, to which announcement
-      * elements will be appended.
-      * If an id is provided, the announcement elements will be appended to this element.
-      * If id is not provided, a visually hidden div element will be created in the DOM.
-      *
-      * Please refer to the `mdc-screenreaderannouncer` component for more details.
-    */
+     * Set this attribute with the id of the element in the DOM, to which announcement
+     * elements will be appended.
+     * If an id is provided, the announcement elements will be appended to this element.
+     * If id is not provided, a visually hidden div element will be created in the DOM.
+     *
+     * Please refer to the `mdc-screenreaderannouncer` component for more details.
+     */
     screenreaderAnnouncerIdentity?: string;
     /**
      * The placement of the popover.

package/dist/components/toggletip/toggletip.component.js

@@ -94,7 +94,7 @@ class ToggleTip extends Popover {
      */
     getToggleTipText() {
         var _a, _b;
-        return ((_b = (_a = this.defaultSlotNodes) === null || _a === void 0 ? void 0 : _a.map((node) => node.textContent).join(' ')) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+        return (((_b = (_a = this.defaultSlotNodes) === null || _a === void 0 ? void 0 : _a.map((node) => node.textContent).join(' ')) === null || _b === void 0 ? void 0 : _b.trim()) || '');
     }
     /**
      * Updates the placement attribute if it is not a valid placement.
@@ -120,7 +120,8 @@ class ToggleTip extends Popover {
       <mdc-screenreaderannouncer
         identity="${ifDefined(this.screenreaderAnnouncerIdentity)}"
         announcement="${this.currentAnnouncement}"
-        delay="300">
+        delay="300"
+      >
       </mdc-screenreaderannouncer>
     `;
     }

package/dist/components/tooltip/tooltip.component.js

@@ -71,7 +71,7 @@ class Tooltip extends Popover {
      */
     getTooltipText() {
         var _a, _b;
-        return (((_b = (_a = this.defaultSlotNodes) === null || _a === void 0 ? void 0 : _a.map((node) => node.textContent).join(' ')) === null || _b === void 0 ? void 0 : _b.trim()) || '');
+        return (((_b = (_a = this.defaultSlotNodes) === null || _a === void 0 ? void 0 : _a.map(node => node.textContent).join(' ')) === null || _b === void 0 ? void 0 : _b.trim()) || '');
     }
     /**
      * Sets the type attribute for the tooltip component.

package/dist/components/tooltip/tooltip.styles.js

@@ -1,6 +1,5 @@
 import { css } from 'lit';
 const styles = css `
-
   :host {
     --mdc-tooltip-max-width: 400px;
     --mdc-tooltip-padding: 0.75rem;

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -11,8 +11,8 @@ import { html } from 'lit';
 import { VirtualizerController } from '@tanstack/lit-virtual';
 import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import styles from './virtualizedlist.styles';
 import { Component } from '../../models';
+import styles from './virtualizedlist.styles';
 import { DEFAULTS } from './virtualizedlist.constants';
 /**
  * `mdc-virtualizedlist` component for creating custom virtualized lists.
@@ -121,22 +121,14 @@ class VirtualizedList extends Component {
                 this.setlistdata({ virtualItems, measureElement, listStyle });
             }
         }
-        return html `<div
-          part="container"
-          style="height: ${getTotalSize()}px;"
-        >
-          <slot></slot>
-        </div>`;
+        return html `<div part="container" style="height: ${getTotalSize()}px;">
+      <slot></slot>
+    </div>`;
     }
     render() {
-        return html `<div
-      ${ref(this.scrollElementRef)}
-      part="scroll"
-      @scroll=${this.onscroll && this.onscroll}
-    >
+        return html `<div ${ref(this.scrollElementRef)} part="scroll" @scroll=${this.onscroll && this.onscroll}>
       ${this.virtualizerController ? this.getVirtualizedListWrapper(this.virtualizerController) : html ``}
-    </div>
-  `;
+    </div> `;
     }
 }
 VirtualizedList.styles = [...Component.styles, ...styles];

package/dist/components/virtualizedlist/virtualizedlist.helper.test.d.ts

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues, TemplateResult } from 'lit';
-import { VirtualizerProps } from './virtualizedlist.types';
 import { Component } from '../../models';
+import { VirtualizerProps } from './virtualizedlist.types';
 declare class VirtualizedWrapper extends Component {
     onscroll: ((this: GlobalEventHandlers, ev: Event) => void) | null;
     virtualizerProps: VirtualizerProps;

package/dist/components/virtualizedlist/virtualizedlist.helper.test.js

@@ -17,9 +17,7 @@ class VirtualizedWrapper extends Component {
         super();
         this.virtualizerProps = { count: 100, estimateSize: () => 100, overscan: 60 };
         this.list = html ``;
-        this.listItemTexts = new Array(this.virtualizerProps.count)
-            .fill(true)
-            .map((_, index) => `list item number ${index}`);
+        this.listItemTexts = new Array(this.virtualizerProps.count).fill(true).map((_, index) => `list item number ${index}`);
         this.onscroll = null;
         this.setListData = this.setListData.bind(this);
     }
@@ -44,18 +42,23 @@ class VirtualizedWrapper extends Component {
     }
     setListData({ virtualItems, measureElement, listStyle }) {
         if (virtualItems) {
-            this.list = html `<ul style="margin: 0;${styleMap(listStyle)}">${virtualItems.map((virtualItem) => html `<li role="listitem" key=${virtualItem.key} data-index=${virtualItem.index} ref=${ref(measureElement)}>
-          ${this.listItemTexts[virtualItem.index]}</li>`)}</ul>`;
+            this.list = html `<ul style="margin: 0;${styleMap(listStyle)}">
+        ${virtualItems.map((virtualItem) => html `<li role="listitem" key=${virtualItem.key} data-index=${virtualItem.index} ref=${ref(measureElement)}>
+              ${this.listItemTexts[virtualItem.index]}
+            </li>`)}
+      </ul>`;
         }
     }
     render() {
         return html `
-    <div style="height: 500px; width: 500px;">
-      <mdc-virtualizedlist
-        .onscroll=${this.onscroll}
-        .virtualizerProps=${this.virtualizerProps}
-        .setlistdata=${this.setListData}
-      >${this.list}</mdc-virtualizedlist></div>
+      <div style="height: 500px; width: 500px;">
+        <mdc-virtualizedlist
+          .onscroll=${this.onscroll}
+          .virtualizerProps=${this.virtualizerProps}
+          .setlistdata=${this.setListData}
+          >${this.list}</mdc-virtualizedlist
+        >
+      </div>
     `;
     }
 }

package/dist/components/virtualizedlist/virtualizedlist.styles.js

@@ -1,15 +1,15 @@
 import { css } from 'lit';
 const styles = [
     css `
-  :host::part(scroll) {
+    :host::part(scroll) {
       height: 100%;
       width: 100%;
       overflow-y: auto;
-  }
-  :host::part(container) {
+    }
+    :host::part(container) {
       position: relative;
       width: 100%;
-  }
+    }
   `,
 ];
 export default styles;