@momentum-design/components 0.18.6 → 0.19.0

package/dist/components/iconprovider/iconprovider.constants.js

@@ -1,11 +1,12 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('iconprovider');
 const ALLOWED_FILE_EXTENSIONS = ['svg'];
-const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
+const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px', '%'];
 const LENGTH_UNIT_SIZE = {
     px: 16,
     em: 1,
     rem: 1,
+    '%': 100,
 };
 const DEFAULTS = {
     FILE_EXTENSION: 'svg',

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

@@ -0,0 +1,8 @@
+import Toggle from './toggle.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-toggle']: Toggle;
+    }
+}
+export default Toggle;

package/dist/components/toggle/index.js

@@ -0,0 +1,5 @@
+import Toggle from './toggle.component';
+import { TAG_NAME } from './toggle.constants';
+import '../icon';
+Toggle.register(TAG_NAME);
+export default Toggle;

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

@@ -0,0 +1,84 @@
+import { CSSResult, PropertyValueMap } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper';
+import { ToggleSize } from './toggle.types';
+declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ValueMixin").ValueMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+/**
+ * Toggle Component is an interactive control used to switch between two mutually exclusive options,
+ * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
+ * where users need to enable or disable a feature.
+ * It contains an optional label and an optional helper text.
+ *
+ * Note: It internally renders a checkbox styled as a toggle switch.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-toggle
+ *
+ * @cssproperty --mdc-toggle-width - width of the toggle
+ * @cssproperty --mdc-toggle-height - height of the toggle
+ * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-border-radius - border radius of the toggle
+ * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-border - border of the toggle
+ * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state
+ * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state
+ * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state
+ * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
+ * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state
+ * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state
+ * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state
+ * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
+ * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
+ *
+ */
+declare class Toggle extends Toggle_base {
+    /**
+    * Determines whether the toggle is active or inactive.
+    * @default false
+    */
+    checked: boolean;
+    /**
+     * Determines toggle size in rem (height is specified here).
+     * - **Default**: 1.5
+     * - **Compact**: 1
+     * @default default
+     */
+    size: ToggleSize;
+    /** @internal */
+    private internals;
+    /** @internal */
+    static formAssociated: boolean;
+    /** @internal */
+    get form(): HTMLFormElement | null;
+    constructor();
+    /**
+     * 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.
+     */
+    private setFormValue;
+    /**
+     * Toggles the state of the toggle element.
+     * If the element is not disabled, then the checked property is toggled.
+     */
+    private toggleState;
+    /**
+     * Toggles the state of the toggle element.
+     * and dispatch the new change event.
+     */
+    private handleChange;
+    /**
+     * 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.
+     */
+    private setToggleSize;
+    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Toggle;

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

@@ -0,0 +1,166 @@
+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 { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './toggle.styles';
+import FormfieldWrapper from '../formfieldwrapper';
+import { ValueMixin } from '../../utils/mixins/ValueMixin';
+import { NameMixin } from '../../utils/mixins/NameMixin';
+import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM, TOGGLE_SIZE } from './toggle.constants';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+/**
+ * Toggle Component is an interactive control used to switch between two mutually exclusive options,
+ * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
+ * where users need to enable or disable a feature.
+ * It contains an optional label and an optional helper text.
+ *
+ * Note: It internally renders a checkbox styled as a toggle switch.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-toggle
+ *
+ * @cssproperty --mdc-toggle-width - width of the toggle
+ * @cssproperty --mdc-toggle-height - height of the toggle
+ * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-border-radius - border radius of the toggle
+ * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-border - border of the toggle
+ * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state
+ * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state
+ * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state
+ * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
+ * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state
+ * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state
+ * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state
+ * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
+ * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
+ *
+ */
+class Toggle extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+    /** @internal */
+    get form() {
+        return this.internals.form;
+    }
+    constructor() {
+        super();
+        /**
+        * Determines whether the toggle is active or inactive.
+        * @default false
+        */
+        this.checked = false;
+        /**
+         * Determines toggle size in rem (height is specified here).
+         * - **Default**: 1.5
+         * - **Compact**: 1
+         * @default default
+         */
+        this.size = DEFAULTS.SIZE;
+        /** @internal */
+        this.internals = this.attachInternals();
+        // Toggle does not contain helpTextType property.
+        this.helpTextType = undefined;
+    }
+    /**
+     * 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) {
+            actualValue = !this.value ? 'isActive' : this.value;
+        }
+        this.internals.setFormValue(actualValue);
+    }
+    /**
+     * 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;
+        }
+    }
+    /**
+     * Toggles the state of the toggle element.
+     * and dispatch the new change event.
+     */
+    handleChange(event) {
+        this.toggleState();
+        // Re-dispatch the existing event instead of creating a new one since change event doesn't bubble out of shadow dom
+        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.
+     */
+    setToggleSize(size) {
+        this.setAttribute('size', Object.values(TOGGLE_SIZE).includes(size) ? size : DEFAULTS.SIZE);
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checked')) {
+            this.setFormValue();
+        }
+        if (changedProperties.has('size')) {
+            this.setToggleSize(this.size);
+        }
+    }
+    render() {
+        var _a;
+        return html `
+        <div class="mdc-toggle__container mdc-focus-ring">
+          <input
+            id="${this.id}"
+            type="checkbox"
+            class="mdc-toggle__input"
+            role="switch"
+            name="${ifDefined(this.name)}"
+            value="${ifDefined(this.value)}"
+            .checked="${this.checked}"
+            .disabled="${this.disabled}"
+            aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+            tabindex="${this.disabled ? -1 : 0}"
+            @change="${this.handleChange}"
+          />
+          <div class="mdc-toggle__slider">
+            <mdc-icon
+              name="${this.checked ? ICON_NAME.CHECKED : ICON_NAME.UNCHECKED}"
+              class="mdc-toggle__icon"
+              length-unit="rem"
+              size="${ICON_SIZE_IN_REM[this.size]}"
+            ></mdc-icon>
+          </div>
+        </div>
+        ${this.renderLabel()}
+        ${this.renderHelperText()}
+    `;
+    }
+}
+/** @internal */
+Toggle.formAssociated = true;
+Toggle.styles = [...FormfieldWrapper.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Toggle.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Toggle.prototype, "size", void 0);
+export default Toggle;

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

@@ -0,0 +1,17 @@
+declare const TAG_NAME: "mdc-toggle";
+declare const TOGGLE_SIZE: {
+    readonly DEFAULT: "default";
+    readonly COMPACT: "compact";
+};
+declare const ICON_NAME: {
+    readonly CHECKED: "check-bold";
+    readonly UNCHECKED: "cancel-bold";
+};
+declare const ICON_SIZE_IN_REM: {
+    compact: number;
+    default: number;
+};
+declare const DEFAULTS: {
+    readonly SIZE: "default";
+};
+export { TAG_NAME, DEFAULTS, TOGGLE_SIZE, ICON_NAME, ICON_SIZE_IN_REM };

package/dist/components/toggle/toggle.constants.js

@@ -0,0 +1,18 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('toggle');
+const TOGGLE_SIZE = {
+    DEFAULT: 'default',
+    COMPACT: 'compact',
+};
+const ICON_NAME = {
+    CHECKED: 'check-bold',
+    UNCHECKED: 'cancel-bold',
+};
+const ICON_SIZE_IN_REM = {
+    compact: 0.75,
+    default: 1.25,
+};
+const DEFAULTS = {
+    SIZE: TOGGLE_SIZE.DEFAULT,
+};
+export { TAG_NAME, DEFAULTS, TOGGLE_SIZE, ICON_NAME, ICON_SIZE_IN_REM };

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

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

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

@@ -0,0 +1,148 @@
+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;
+    --mdc-toggle-border-radius: 0.75rem;
+    --mdc-toggle-border-radius-compact: 0.5rem;
+    --mdc-toggle-border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);
+
+    --mdc-toggle-inactive-rest-color: var(--mds-color-theme-control-inactive-normal);
+    --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-inactive-disabled-color: var(--mds-color-theme-control-inactive-disabled);
+    --mdc-toggle-active-rest-color: var(--mds-color-theme-control-active-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-active-disabled-color: var(--mds-color-theme-control-active-disabled);
+
+    --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-icon-color-normal: var(--mds-color-theme-common-inverted-text-primary-normal);
+    --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);
+
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto auto;
+    column-gap: 0.75rem;
+    row-gap: 0.25rem;
+  }
+
+  :host([help-text='']) {
+    row-gap: 0rem;
+  }
+
+  .mdc-toggle__container {
+    position: relative;
+    border-radius: var(--mdc-toggle-border-radius);
+  }
+
+  .mdc-toggle__input {
+    opacity: 0;
+    position: absolute;
+    width: var(--mdc-toggle-width);
+    height: var(--mdc-toggle-height);
+    cursor: pointer;
+  }
+
+  .mdc-toggle__slider {
+    width: var(--mdc-toggle-width);
+    height: var(--mdc-toggle-height);
+    background: var(--mdc-toggle-inactive-rest-color);
+    border-radius: var(--mdc-toggle-border-radius);
+    border: var(--mdc-toggle-border);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    transition: background-color 0.3s ease;
+    outline: none;
+    padding: 0.0625rem;
+  }
+
+  :host([checked]) .mdc-toggle__slider {
+    background-color: var(--mdc-toggle-active-rest-color);
+    justify-content: flex-end;
+    border-color: transparent;
+  }
+
+  :host([size='compact']) .mdc-toggle__slider {
+    width: var(--mdc-toggle-width-compact);
+    height: var(--mdc-toggle-height-compact);
+    border-radius: var(--mdc-toggle-border-radius-compact);
+  }
+  
+  .mdc-toggle__icon {
+    padding: 0.25rem;
+   --mdc-icon-fill-color: var(--mdc-toggle-icon-color-normal);
+   background-color: var(--mdc-toggle-icon-background-color-normal);
+   border-radius: 50%;
+  }
+
+  :host([disabled]) .mdc-toggle__icon {
+    --mdc-icon-fill-color: var(--mdc-toggle-icon-color-disabled);
+  }
+
+  :host([size='compact']) .mdc-toggle__icon {
+    padding: 0.125rem;
+  }
+
+  :host(:not([disabled])) .mdc-toggle__container:hover .mdc-toggle__slider {
+    background-color: var(--mdc-toggle-inactive-hover-color);
+  }
+
+  :host(:not([disabled])) .mdc-toggle__container:active .mdc-toggle__slider {
+    background-color: var(--mdc-toggle-inactive-pressed-color);
+  }
+
+  :host(:not([disabled])[checked]) .mdc-toggle__container:hover .mdc-toggle__slider {
+    background-color: var(--mdc-toggle-active-hover-color);
+  }
+
+  :host(:not([disabled])[checked]) .mdc-toggle__container:active .mdc-toggle__slider {
+    background-color: var(--mdc-toggle-active-pressed-color);
+  }
+
+  :host([disabled]) .mdc-toggle__slider {
+    background-color: var(--mdc-toggle-inactive-disabled-color);
+  }
+
+  :host([disabled][checked]) .mdc-toggle__slider {
+    background-color: var(--mdc-toggle-active-disabled-color);
+  }
+
+  :host([disabled]) .mdc-toggle__icon {
+    background-color: var(--mdc-toggle-icon-background-color-disabled);
+  }
+
+  .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-help-text {
+    color: var(--mdc-toggle-help-text-color);
+  }
+
+  :host([disabled]) .mdc-label-text, :host([disabled]) .mdc-help-text {
+    color: var(--mdc-toggle-label-color-disabled);
+  }
+
+   /* High Contrast Mode */
+   @media (forced-colors: active) {
+    :host([checked]) .mdc-toggle__slider, .mdc-toggle__icon {
+      border: var(--mdc-toggle-border);
+    }
+  }
+`, ...hostFocusRingStyles(true)];
+export default styles;

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

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { TOGGLE_SIZE } from './toggle.constants';
+type ToggleSize = ValueOf<typeof TOGGLE_SIZE>;
+export { ToggleSize };

package/dist/components/toggle/toggle.types.js

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