@momentum-design/components 0.39.4 → 0.39.6

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

@@ -39,7 +39,7 @@ declare class AlertChip extends Buttonsimple {
      * including empty spaces to split words.
      */
     label: string;
-    constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/alertchip/alertchip.component.js

@@ -35,7 +35,7 @@ import Buttonsimple from '../buttonsimple/buttonsimple.component';
  */
 class AlertChip extends Buttonsimple {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The variant of the alertchip. It supports 5 variants
          * - neutral
@@ -54,6 +54,9 @@ class AlertChip extends Buttonsimple {
          * including empty spaces to split words.
          */
         this.label = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.disabled = undefined;
         this.softDisabled = undefined;
         this.active = undefined;

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

@@ -22,7 +22,7 @@ declare class AvatarButton extends AvatarButton_base {
    * Aria-label attribute to be set for accessibility
    */
     ariaLabel: string | null;
-    constructor();
+    connectedCallback(): void;
     update(changedProperties: PropertyValues): void;
     private setSize;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -33,11 +33,14 @@ import styles from './avatarbutton.styles';
  */
 class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
        * Aria-label attribute to be set for accessibility
        */
         this.ariaLabel = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.active = undefined;
         this.disabled = undefined;
         this.softDisabled = undefined;

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

@@ -52,7 +52,7 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      * @default false
      */
     autofocus: boolean;
-    constructor();
+    connectedCallback(): void;
     /**
      * Updates the form value to reflect the current state of the checkbox.
      * If checked, the value is set to either the user-provided value or 'on' if no value is provided.

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

@@ -47,7 +47,7 @@ import styles from './checkbox.styles';
  */
 class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * Determines whether the checkbox is selected or unselected.
          *
@@ -76,6 +76,9 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
       ${this.renderHelperText()}
     </div>`;
         };
+    }
+    connectedCallback() {
+        super.connectedCallback();
         // Checkbox does not contain helpTextType property.
         this.helpTextType = undefined;
     }

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

@@ -45,7 +45,7 @@ declare class Chip extends Chip_base {
      * including empty spaces to split words.
      */
     label: string;
-    constructor();
+    connectedCallback(): void;
     /**
      * Renders the icon element if available.
      * @returns The icon element if available, otherwise nothing.

package/dist/components/chip/chip.component.js

@@ -36,7 +36,7 @@ import Buttonsimple from '../buttonsimple/buttonsimple.component';
  */
 class Chip extends IconNameMixin(Buttonsimple) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The color of the chip. It supports the following colors
          * - default
@@ -59,6 +59,9 @@ class Chip extends IconNameMixin(Buttonsimple) {
          * including empty spaces to split words.
          */
         this.label = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.role = DEFAULTS.ROLE;
         this.size = DEFAULTS.SIZE;
         this.active = undefined;

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

@@ -53,6 +53,6 @@ declare class Coachmark extends Popover {
      * @default true
      */
     disableAriaExpanded: boolean;
-    constructor();
+    connectedCallback(): void;
 }
 export default Coachmark;

package/dist/components/coachmark/coachmark.component.js

@@ -38,7 +38,7 @@ import { DEFAULTS } from './coachmark.constants';
  */
 class Coachmark extends Popover {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * Determines the events that cause the Coachmark to show.
          * Multiple event names should be separated by spaces.
@@ -65,6 +65,9 @@ class Coachmark extends Popover {
          * @default true
          */
         this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.color = DEFAULTS.COLOR;
         this.showArrow = DEFAULTS.ARROW;
     }

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

@@ -130,7 +130,7 @@ declare class Divider extends Component {
      * @param slot - default slot of divider
      */
     private inferDividerType;
-    constructor();
+    connectedCallback(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/divider/divider.component.js

@@ -60,6 +60,43 @@ import styles from './divider.styles';
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 class Divider extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Two orientations of divider
+         * - **horizontal**: A thin, horizontal line with 0.0625rem width.
+         * - **vertical**: A thin, vertical line with 0.0625rem width.
+         *
+         * Note: We do not support "Vertical Text Divider" as of now.
+         * @default horizontal
+         */
+        this.orientation = DEFAULTS.ORIENTATION;
+        /**
+         * Two variants of divider
+         * - **solid**: Solid line.
+         * - **gradient**: Gradient Line that fades on either sides of the divider.
+         * @default solid
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * Direction of the arrow icon, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         */
+        this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
+        /**
+         * Position of the button, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         */
+        this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
+    }
     /**
      * Sets the variant attribute for the divider component.
      * If the provided variant is not included in the DIVIDER_VARIANT,
@@ -163,42 +200,8 @@ class Divider extends Component {
             this.setGrabberButton();
         }
     }
-    constructor() {
-        super();
-        /**
-         * Two orientations of divider
-         * - **horizontal**: A thin, horizontal line with 0.0625rem width.
-         * - **vertical**: A thin, vertical line with 0.0625rem width.
-         *
-         * Note: We do not support "Vertical Text Divider" as of now.
-         * @default horizontal
-         */
-        this.orientation = DEFAULTS.ORIENTATION;
-        /**
-         * Two variants of divider
-         * - **solid**: Solid line.
-         * - **gradient**: Gradient Line that fades on either sides of the divider.
-         * @default solid
-         */
-        this.variant = DEFAULTS.VARIANT;
-        /**
-         * Direction of the arrow icon, if applicable.
-         * - **positive**
-         * - **negative**
-         *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
-         */
-        this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
-        /**
-         * Position of the button, if applicable.
-         * - **positive**
-         * - **negative**
-         *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
-         */
-        this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
+    connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('data-type', 'mdc-primary-divider');
     }
     render() {

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

@@ -16,7 +16,7 @@ declare class FilterChip extends Chip {
      * @default false
      */
     selected: boolean;
-    constructor();
+    connectedCallback(): void;
     /**
      * Sets the selected state of the filterchip along with the icon.
      * aria-pressed attribute is also set to true or false.

package/dist/components/filterchip/filterchip.component.js

@@ -22,13 +22,16 @@ import { DEFAULTS } from './filterchip.constants';
  */
 class FilterChip extends Chip {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The selected state of the filterchip.
          *
          * @default false
          */
         this.selected = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.color = DEFAULTS.COLOR;
     }
     /**

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

@@ -27,7 +27,7 @@ declare class FormfieldGroup extends FormfieldGroup_base {
      * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
      */
     protected isRadio: boolean;
-    constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -27,12 +27,15 @@ import styles from './formfieldgroup.styles';
  */
 class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * @internal
          * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
          */
         this.isRadio = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         /** @internal */
         this.shouldRenderLabel = false;
         this.id = '';

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

@@ -76,7 +76,7 @@ declare class ListItem extends ListItem_base {
      * This appears on the trailing side of the list item.
      */
     sublineText?: string;
-    constructor();
+    connectedCallback(): void;
     /**
      * Generates a template for a text slot with the specified content.
      *

package/dist/components/listitem/listitem.component.js

@@ -55,12 +55,15 @@ import styles from './listitem.styles';
  */
 class ListItem extends DataAriaLabelMixin(DisabledMixin(TabIndexMixin(Component))) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The variant of the list item. It can be a pill, rectangle or a full-width.
          * @default 'full-width'
          */
         this.variant = DEFAULTS.VARIANT;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.role = this.role || 'listitem';
     }
     /**

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

@@ -28,7 +28,7 @@ declare class Option extends Option_base {
      * Any additional description can be provided here for screen readers.
      */
     ariaLabel: string | null;
-    constructor();
+    connectedCallback(): void;
     /**
      * Listens to changes in the default slot and updates the label of the option accordingly.
      * This is used to set the label of the option when it is not explicitly set.

package/dist/components/option/option.component.js

@@ -31,7 +31,7 @@ import styles from './option.styles';
  */
 class Option extends FormInternalsMixin(ListItem) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The selected attribute is used to indicate that the option is selected.
          */
@@ -40,6 +40,9 @@ class Option extends FormInternalsMixin(ListItem) {
          * Any additional description can be provided here for screen readers.
          */
         this.ariaLabel = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.role = 'option';
         this.variant = LISTITEM_VARIANTS.INSET_RECTANGLE;
         this.updateAttribute('aria-selected', `${this.selected}`);

package/dist/components/progressbar/index.d.ts

@@ -0,0 +1,9 @@
+import Progressbar from './progressbar.component';
+import '../icon';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-progressbar']: Progressbar;
+    }
+}
+export default Progressbar;

package/dist/components/progressbar/index.js

@@ -0,0 +1,6 @@
+import Progressbar from './progressbar.component';
+import { TAG_NAME } from './progressbar.constants';
+import '../icon';
+import '../text';
+Progressbar.register(TAG_NAME);
+export default Progressbar;

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

@@ -0,0 +1,79 @@
+import { CSSResult } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper';
+import type { Variant } from './progressbar.types';
+declare const Progressbar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+/**
+ * mdc-progressbar component visually represents a progress indicator, typically used to show
+ * the completion state of an ongoing process (e.g., loading, file upload, etc.).
+ * It contains an optional label and an optional helper text.
+ *
+ * - It supports mainly two types: Default and Inline
+ * - It supports three validation variants: Default, Success and Error.
+ *
+ * This component is created by extending FormfieldWrapper.
+ *
+ * @tagname mdc-progressbar
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.
+ * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.
+ * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.
+ * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.
+ * @cssproperty --mdc-progressbar-height - The height of the progressbar.
+ * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
+ * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
+ * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.
+ * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.
+ * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.
+ * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
+ */
+declare class Progressbar extends Progressbar_base {
+    /**
+     * Types of the progressbar
+     * - **Default**
+     * - **Inline**
+     *
+     * @default default
+     */
+    variant: Variant;
+    /**
+     * The current progress as a percentage, 0 to 100.
+     * The value will be clamped between 0 and 100.
+     * @default 0
+     */
+    value: string;
+    /**
+     * Define error state of the progressbar
+     * - **true**
+     * - **false**
+     * @default false
+     */
+    error: boolean;
+    connectedCallback(): void;
+    /**
+     * Ensures that the value is clamped between 0 and 100
+     * @returns The clamped value
+     * @internal
+     */
+    private get clampedValue();
+    /**
+     * Determines the validation state (success, error, or default) based on progress value and error state.
+     * @returns The appropriate validation state for the progressbar.
+     */
+    private getValidationVariant;
+    /**
+     * Renders the progress bar with dynamic width and variant styles.
+     * @returns The rendered HTML for the progress bar.
+     * @internal
+     */
+    private renderProgressbar;
+    /**
+     * Renders the component based on the variant (inline or default).
+     * @returns The rendered HTML for the component.
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Progressbar;

package/dist/components/progressbar/progressbar.component.js

@@ -0,0 +1,160 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { v4 as uuidv4 } from 'uuid';
+import styles from './progressbar.styles';
+import FormfieldWrapper from '../formfieldwrapper';
+import { DEFAULTS, VARIANT } from './progressbar.constants';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
+/**
+ * mdc-progressbar component visually represents a progress indicator, typically used to show
+ * the completion state of an ongoing process (e.g., loading, file upload, etc.).
+ * It contains an optional label and an optional helper text.
+ *
+ * - It supports mainly two types: Default and Inline
+ * - It supports three validation variants: Default, Success and Error.
+ *
+ * This component is created by extending FormfieldWrapper.
+ *
+ * @tagname mdc-progressbar
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.
+ * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.
+ * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.
+ * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.
+ * @cssproperty --mdc-progressbar-height - The height of the progressbar.
+ * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
+ * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
+ * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.
+ * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.
+ * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.
+ * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
+ */
+class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Types of the progressbar
+         * - **Default**
+         * - **Inline**
+         *
+         * @default default
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * The current progress as a percentage, 0 to 100.
+         * The value will be clamped between 0 and 100.
+         * @default 0
+         */
+        this.value = '0';
+        /**
+         * Define error state of the progressbar
+         * - **true**
+         * - **false**
+         * @default false
+         */
+        this.error = false;
+        /**
+         * Renders the progress bar with dynamic width and variant styles.
+         * @returns The rendered HTML for the progress bar.
+         * @internal
+         */
+        this.renderProgressbar = () => {
+            var _a;
+            const variant = this.getValidationVariant();
+            const isGap = this.clampedValue > 0 && this.clampedValue < 100;
+            const progressWidth = this.error ? '100' : `${this.clampedValue}`;
+            return html `
+      <div
+        part="progress-container ${isGap ? 'gap' : ''}"
+        role="progressbar"
+        aria-valuenow="${this.clampedValue}"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+      >
+        <div part="progress-bar ${variant}" style="width: ${progressWidth}%"></div>
+        <div part="remaining"></div>
+      </div>
+    `;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id = `mdc-progressbar-${uuidv4()}`;
+        this.disabled = undefined;
+    }
+    /**
+     * Ensures that the value is clamped between 0 and 100
+     * @returns The clamped value
+     * @internal
+     */
+    get clampedValue() {
+        const value = Number(this.value);
+        const clampedValue = Number.isNaN(value) ? 0 : Math.max(0, Math.min(100, value));
+        return clampedValue;
+    }
+    /**
+     * Determines the validation state (success, error, or default) based on progress value and error state.
+     * @returns The appropriate validation state for the progressbar.
+     */
+    getValidationVariant() {
+        if (this.error) {
+            this.helpTextType = VALIDATION.ERROR;
+        }
+        else if (this.clampedValue === 100) {
+            this.helpTextType = VALIDATION.SUCCESS;
+        }
+        else {
+            this.helpTextType = VALIDATION.DEFAULT;
+        }
+        return this.helpTextType;
+    }
+    /**
+     * Renders the component based on the variant (inline or default).
+     * @returns The rendered HTML for the component.
+     */
+    render() {
+        const isInline = this.variant === VARIANT.INLINE;
+        return html `
+      ${isInline
+            ? html `<div part="inline-label-container">${this.renderLabelElement()} ${this.renderProgressbar()}</div>`
+            : html `
+            <div part="label-container">
+              ${this.renderLabelElement()}
+              ${this.variant === VARIANT.DEFAULT && this.label
+                ? html `<span part="percentage">${this.clampedValue}%</span>`
+                : ''}
+            </div>
+            ${this.renderProgressbar()}
+            ${this.renderHelperText()}
+          `}
+    `;
+    }
+}
+Progressbar.styles = [...FormfieldWrapper.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Progressbar.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Progressbar.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'error' }),
+    __metadata("design:type", Object)
+], Progressbar.prototype, "error", void 0);
+export default Progressbar;

package/dist/components/progressbar/progressbar.constants.d.ts

@@ -0,0 +1,11 @@
+import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
+declare const TAG_NAME: "mdc-progressbar";
+declare const VARIANT: {
+    readonly DEFAULT: "default";
+    readonly INLINE: "inline";
+};
+declare const DEFAULTS: {
+    readonly VARIANT: "default";
+    readonly VALIDATION: "default";
+};
+export { TAG_NAME, VARIANT, VALIDATION, DEFAULTS };

package/dist/components/progressbar/progressbar.constants.js

@@ -0,0 +1,12 @@
+import utils from '../../utils/tag-name';
+import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
+const TAG_NAME = utils.constructTagName('progressbar');
+const VARIANT = {
+    DEFAULT: 'default',
+    INLINE: 'inline',
+};
+const DEFAULTS = {
+    VARIANT: VARIANT.DEFAULT,
+    VALIDATION: VALIDATION.DEFAULT,
+};
+export { TAG_NAME, VARIANT, VALIDATION, DEFAULTS };

package/dist/components/progressbar/progressbar.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;