@momentum-design/components 0.39.5 → 0.40.0

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;

package/dist/components/progressbar/progressbar.styles.js

@@ -0,0 +1,86 @@
+import { css } from 'lit';
+const styles = [css `
+:host {
+  --mdc-progressbar-background-color: var(--mds-color-theme-control-indicator-inactive-normal);
+  --mdc-progressbar-active-background-color: var(--mds-color-theme-control-active-normal);
+  --mdc-progressbar-success-color: var(--mds-color-theme-indicator-stable);
+  --mdc-progressbar-error-color: var(--mds-color-theme-indicator-attention);
+  --mdc-progressbar-height: 0.25rem;
+  --mdc-progressbar-border: 0.5px solid transparent;
+  --mdc-progressbar-border-radius: var(--mdc-progressbar-height);
+
+  --mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
+  --mdc-progressbar-label-line-height: var(--mds-font-lineheight-body-midsize);
+  --mdc-progressbar-label-font-size: var(--mds-font-size-body-midsize);
+  --mdc-progressbar-label-font-weight: var(--mds-font-weight-regular);
+  --mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
+
+  display: block;
+  width: 100%;
+}
+
+:host::part(label-container) {
+  display: flex;
+  justify-content: space-between;
+}
+
+:host::part(inline-label-container) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+:host::part(progress-container) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--mdc-progressbar-height);
+  margin: 0.5rem 0;
+}
+
+:host::part(gap) {
+  gap: 0.25rem;
+}
+
+:host([variant="inline"])::part(label) {
+  overflow: unset;
+}
+
+:host::part(progress-bar) {
+  height: 100%;
+  background-color: var(--mdc-progressbar-active-background-color);
+  border-radius: var(--mdc-progressbar-border-radius);
+  transition: width 0.3s ease-in-out;
+}
+
+:host::part(success) {
+  background-color: var(--mdc-progressbar-success-color);
+}
+
+:host::part(error) {
+  background-color: var(--mdc-progressbar-error-color);
+}
+
+:host::part(remaining) {
+  height: 100%;
+  flex-grow: 1;
+  background-color: var(--mdc-progressbar-background-color);
+  border-radius: var(--mdc-progressbar-border-radius);
+}
+
+:host::part(label-text), :host::part(help-text), :host::part(percentage) {
+  font-size: var(--mdc-progressbar-label-font-size);
+  font-weight: var(--mdc-progressbar-label-font-weight);
+  line-height: var(--mdc-progressbar-label-line-height);
+}
+
+:host([help-text-type="default"])::part(help-text) {
+  color: var(--mdc-progressbar-help-text-color);
+}
+
+@media (forced-colors: active) {
+  :host::part(progress-container), :host::part(progress-bar) {
+    border: var(--mdc-progressbar-border);
+  }
+`];
+export default styles;

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

@@ -0,0 +1,3 @@
+import type { ValueOf } from '../../utils/types';
+import { VARIANT } from './progressbar.constants';
+export type Variant = ValueOf<typeof VARIANT>;

package/dist/components/progressbar/progressbar.types.js

@@ -0,0 +1 @@
+export {};