@momentum-design/components 0.28.5 → 0.28.7

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

@@ -89,6 +89,7 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      */
     handleChange(event: Event): void;
     update(changedProperties: PropertyValues): void;
+    private renderLabelAndHelperText;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/checkbox/checkbox.component.js

@@ -68,6 +68,14 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
          * @default false
          */
         this.autofocus = false;
+        this.renderLabelAndHelperText = () => {
+            if (!this.label)
+                return nothing;
+            return html `<div class="text-container">
+      ${this.renderLabel()}
+      ${this.renderHelperText()}
+    </div>`;
+        };
         // Checkbox does not contain helpTextType property.
         this.helpTextType = undefined;
     }
@@ -166,7 +174,6 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         length-unit="rem"
       ></mdc-icon>
     ` : nothing;
-        const helpTextContent = this.helpText ? this.renderHelperText() : nothing;
         return html `
       <div class="container mdc-focus-ring">
         <input
@@ -189,10 +196,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         />
         <div class="icon-container">${checkboxIconContent}</div>
       </div>
-      <div class="text-container">
-        ${this.renderLabel()}
-        ${helpTextContent}
-      </div>
+      ${this.renderLabelAndHelperText()}
     `;
     }
 }

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

@@ -61,7 +61,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * renders the mdc-label-text container that contains the label and labelInfoToggleTip.
      * @returns void
      */
-    protected renderLabel(): import("lit-html").TemplateResult<1>;
+    protected renderLabel(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
      * renders the mdc-help-text container that contains the helpertext icon and helpertext.
      * @returns void

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -108,6 +108,8 @@ class FormfieldWrapper extends DisabledMixin(Component) {
      * @returns void
      */
     renderLabel() {
+        if (!this.label)
+            return nothing;
         return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       <slot name="required-label">${this.renderRequiredLabel()}</slot>

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

@@ -109,6 +109,7 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
    */
     private updateTabIndex;
     update(changedProperties: PropertyValues): void;
+    private renderLabelAndHelperText;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/radio/radio.component.js

@@ -67,6 +67,14 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
        * @default false
        */
         this.autofocus = false;
+        this.renderLabelAndHelperText = () => {
+            if (!this.label)
+                return nothing;
+            return html `<div class="mdc-radio__label-container">
+      ${this.renderLabel()}
+      ${this.renderHelperText()}
+    </div>`;
+        };
         // Radio does not contain helpTextType property.
         this.helpTextType = undefined;
     }
@@ -267,7 +275,6 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     }
     render() {
         var _a;
-        const helpTextContent = this.helpText ? this.renderHelperText() : nothing;
         return html `
       <div class="mdc-radio__container">
         <div class="mdc-radio__icon-container mdc-focus-ring">
@@ -291,10 +298,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           />
           <span class="mdc-radio__icon"></span>
         </div>
-        <div class="mdc-radio__label-container">
-          ${this.renderLabel()}
-          ${helpTextContent}
-        </div>
+        ${this.renderLabelAndHelperText()}
       </div>
     `;
     }

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

@@ -29,7 +29,9 @@ const styles = [hostFitContentStyles, css `
     --mdc-toggle-icon-color-disabled: var(--mds-color-theme-common-inverted-text-primary-disabled);
     --mdc-toggle-icon-background-color-normal: var(--mds-color-theme-common-text-primary-normal);
     --mdc-toggle-icon-background-color-disabled: var(--mds-color-theme-common-text-primary-disabled);
+  }
 
+  :host([label]), :host([help-text]){
     display: grid;
     grid-template-rows: auto auto;
     grid-template-columns: auto auto;
@@ -38,6 +40,7 @@ const styles = [hostFitContentStyles, css `
   }
 
   :host([help-text='']) {
+    grid-template-rows: auto;
     row-gap: 0rem;
   }
 
@@ -49,9 +52,10 @@ const styles = [hostFitContentStyles, css `
   .mdc-toggle__input {
     opacity: 0;
     position: absolute;
+    cursor: pointer;
+    margin: 0;
     width: var(--mdc-toggle-width);
     height: var(--mdc-toggle-height);
-    cursor: pointer;
   }
 
   .mdc-toggle__slider {
@@ -79,7 +83,11 @@ const styles = [hostFitContentStyles, css `
     height: var(--mdc-toggle-height-compact);
     border-radius: var(--mdc-toggle-border-radius-compact);
   }
-  
+  :host([size='compact']) .mdc-toggle__input {
+    width: var(--mdc-toggle-width-compact);
+    height: var(--mdc-toggle-height-compact);
+  }
+
   .mdc-toggle__icon {
     padding: 0.25rem;
    --mdc-icon-fill-color: var(--mdc-toggle-icon-color-normal);

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

@@ -1,5 +1,5 @@
 import { CSSResult, PropertyValues, TemplateResult } from 'lit';
-import { Virtualizer } from '@tanstack/virtual-core';
+import { Virtualizer, VirtualItem } from '@tanstack/virtual-core';
 import { Ref } from 'lit/directives/ref.js';
 import { Component } from '../../models';
 import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
@@ -24,7 +24,7 @@ declare class VirtualizedList extends Component {
      * handling logic related when the user scrolls to the top or bottom of a list.
      * @default undefined
      */
-    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => void) | null;
     /**
      * Object that sets and updates the virtualizer with any relevant props.
      * There are two required object props in order to get virtualization to work properly.
@@ -39,7 +39,7 @@ declare class VirtualizedList extends Component {
      * [Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)
      *
      */
-    virtualizerprops: VirtualizerProps;
+    virtualizerProps: VirtualizerProps;
     /**
      * Callback that gets envoked when updates to the virtualizer interally occur.
      * This must be implemented in such a way that this function will trigger update to parent.
@@ -57,6 +57,7 @@ declare class VirtualizedList extends Component {
     private virtualizerController;
     scrollElementRef: Ref<HTMLDivElement>;
     virtualizer: Virtualizer<Element, Element> | null;
+    virtualItems: Array<VirtualItem>;
     constructor();
     /**
      * This override is necessary to update the virtualizer with relevant props
@@ -64,6 +65,15 @@ declare class VirtualizedList extends Component {
      * this way ensures we don't initialize a new virtualizer upon very prop change.
      */
     update(changedProperties: PropertyValues): void;
+    /**
+     * This is needed in order to ensure the initial render happens
+     */
+    firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * @internal
+     * Update virtuailzer with the union of the two virtualizer options (current, passed in).
+     */
+    private setVirtualizerOptions;
     connectedCallback(): void;
     /**
      * @internal

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

@@ -45,8 +45,9 @@ class VirtualizedList extends Component {
          * [Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)
          *
          */
-        this.virtualizerprops = DEFAULTS.VIRTUALIZER_PROPS;
+        this.virtualizerProps = DEFAULTS.VIRTUALIZER_PROPS;
         this.scrollElementRef = createRef();
+        this.virtualItems = [];
         this.virtualizerController = null;
         this.virtualizer = null;
         this.setlistdata = null;
@@ -58,22 +59,34 @@ class VirtualizedList extends Component {
      * this way ensures we don't initialize a new virtualizer upon very prop change.
      */
     update(changedProperties) {
-        var _a;
         super.update(changedProperties);
-        // if the virtuailzer props change at all,
-        // update virtuailzer with the union of the two virtualizer options (current, passed in).
-        if (changedProperties.get('virtualizerprops')) {
-            (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.setOptions({ ...this.virtualizer.options, ...this.virtualizerprops });
-            this.requestUpdate();
+        if (changedProperties.get('virtualizerProps')) {
+            this.setVirtualizerOptions();
         }
     }
+    /**
+     * This is needed in order to ensure the initial render happens
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.setVirtualizerOptions();
+    }
+    /**
+     * @internal
+     * Update virtuailzer with the union of the two virtualizer options (current, passed in).
+     */
+    setVirtualizerOptions() {
+        var _a;
+        (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.setOptions({ ...this.virtualizer.options, ...this.virtualizerProps });
+        this.requestUpdate();
+    }
     connectedCallback() {
         var _a;
         this.virtualizerController = new VirtualizerController(this, {
-            count: this.virtualizerprops.count,
-            estimateSize: (_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.estimateSize,
+            count: this.virtualizerProps.count,
+            estimateSize: (_a = this.virtualizerProps) === null || _a === void 0 ? void 0 : _a.estimateSize,
             getScrollElement: () => this.scrollElementRef.value || null,
-            ...this.virtualizerprops,
+            ...this.virtualizerProps,
         });
         super.connectedCallback();
     }
@@ -89,19 +102,24 @@ class VirtualizedList extends Component {
     getVirtualizedListWrapper(virtualizerController) {
         var _a, _b;
         this.virtualizer = virtualizerController.getVirtualizer();
-        const { getVirtualItems, measureElement, getTotalSize } = this.virtualizer;
-        const virtualItems = getVirtualItems();
-        // this style is required to be rendered by the client side list in order to handle scrolling properly
-        const listStyle = {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`,
-        };
-        // pass back data to client for rendering
-        if (this.setlistdata) {
-            this.setlistdata({ virtualItems, measureElement, listStyle });
+        const { getTotalSize, getVirtualItems, measureElement } = this.virtualizer;
+        const newVirtualItems = getVirtualItems();
+        // Only update client if there's a difference in virtual items
+        if (newVirtualItems !== this.virtualItems) {
+            this.virtualItems = newVirtualItems;
+            const virtualItems = getVirtualItems();
+            // this style is required to be rendered by the client side list in order to handle scrolling properly
+            const listStyle = {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`,
+            };
+            // pass back data to client for rendering
+            if (this.setlistdata) {
+                this.setlistdata({ virtualItems, measureElement, listStyle });
+            }
         }
         return html `<div
           part="container"
@@ -129,7 +147,7 @@ __decorate([
 __decorate([
     property({ type: Object, attribute: 'virtualizerprops' }),
     __metadata("design:type", Object)
-], VirtualizedList.prototype, "virtualizerprops", void 0);
+], VirtualizedList.prototype, "virtualizerProps", void 0);
 __decorate([
     property({ type: Function, attribute: 'setlistdata' }),
     __metadata("design:type", Object)

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

@@ -2,8 +2,8 @@ import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { VirtualizerProps } from './virtualizedlist.types';
 import { Component } from '../../models';
 declare class VirtualizedWrapper extends Component {
-    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    virtualizerprops: VirtualizerProps;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => void) | null;
+    virtualizerProps: VirtualizerProps;
     list: TemplateResult<1>;
     listItemTexts: string[];
     constructor();

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

@@ -15,9 +15,9 @@ import { Component } from '../../models';
 class VirtualizedWrapper extends Component {
     constructor() {
         super();
-        this.virtualizerprops = { count: 100, estimateSize: () => 100, overscan: 60 };
+        this.virtualizerProps = { count: 100, estimateSize: () => 100, overscan: 60 };
         this.list = html ``;
-        this.listItemTexts = new Array(this.virtualizerprops.count)
+        this.listItemTexts = new Array(this.virtualizerProps.count)
             .fill(true)
             .map((_, index) => `list item number ${index}`);
         this.onscroll = null;
@@ -25,20 +25,20 @@ class VirtualizedWrapper extends Component {
     }
     update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.get('virtualizerprops')) {
+        if (changedProperties.get('virtualizerProps')) {
             this.updateListItemTextArray();
         }
     }
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        if ((_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.count) {
+        if ((_a = this.virtualizerProps) === null || _a === void 0 ? void 0 : _a.count) {
             this.updateListItemTextArray();
         }
     }
     updateListItemTextArray() {
         var _a;
-        this.listItemTexts = new Array((_a = this.virtualizerprops) === null || _a === void 0 ? void 0 : _a.count)
+        this.listItemTexts = new Array((_a = this.virtualizerProps) === null || _a === void 0 ? void 0 : _a.count)
             .fill(true)
             .map((_, index) => `list item number ${index}`);
     }
@@ -53,7 +53,7 @@ class VirtualizedWrapper extends Component {
     <div style="height: 500px; width: 500px;">
       <mdc-virtualizedlist
         .onscroll=${this.onscroll}
-        .virtualizerprops=${this.virtualizerprops}
+        .virtualizerProps=${this.virtualizerProps}
         .setlistdata=${this.setListData}
       >${this.list}</mdc-virtualizedlist></div>
     `;
@@ -67,7 +67,7 @@ __decorate([
 __decorate([
     property({ type: Object, attribute: 'virtualizerprops' }),
     __metadata("design:type", Object)
-], VirtualizedWrapper.prototype, "virtualizerprops", void 0);
+], VirtualizedWrapper.prototype, "virtualizerProps", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)