@momentum-design/components 0.28.1 → 0.28.3

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

@@ -10,14 +10,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { v4 as uuidv4 } from 'uuid';
 import styles from './toggle.styles';
 import FormfieldWrapper from '../formfieldwrapper';
-import { ValueMixin } from '../../utils/mixins/ValueMixin';
-import { NameMixin } from '../../utils/mixins/NameMixin';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM, TOGGLE_SIZE } from './toggle.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 /**
  * 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
@@ -54,11 +52,7 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
  * @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;
-    }
+class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
         super();
         /**
@@ -73,50 +67,98 @@ class Toggle extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
          * @default default
          */
         this.size = DEFAULTS.SIZE;
-        /** @internal */
-        this.internals = this.attachInternals();
+        /**
+       * 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;
         // Toggle does not contain helpTextType property.
         this.helpTextType = undefined;
-        this.id = `mdc-input-${uuidv4()}`;
+    }
+    /** @internal
+   * Resets the checkbox to its initial state.
+   * The checked property is set to false.
+   */
+    formResetCallback() {
+        this.checked = false;
+    }
+    /** @internal */
+    formStateRestoreCallback(state) {
+        if (state) {
+            this.checked = true;
+        }
+    }
+    /**
+   * Manages the required state of the checkbox.
+   * If the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid.
+   */
+    manageRequired() {
+        if (!this.checked && this.requiredLabel) {
+            if (this.validationMessage) {
+                this.inputElement.setCustomValidity(this.validationMessage);
+            }
+            else {
+                this.inputElement.setCustomValidity('');
+            }
+            this.setValidity();
+        }
+        else {
+            this.internals.setValidity({});
+        }
     }
     /**
-     * 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) {
             actualValue = !this.value ? 'isActive' : this.value;
         }
+        else {
+            actualValue = null;
+        }
+        this.manageRequired();
         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;
         }
     }
     /**
-     * Toggles the state of the toggle element.
-     * and dispatch the new change 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') {
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+        }
+    }
+    /**
+   * 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.
-     */
+   * 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);
     }
@@ -138,14 +180,18 @@ class Toggle extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
             type="checkbox"
             class="mdc-toggle__input"
             role="switch"
+            ?autofocus="${this.autofocus}"
+            ?required="${!!this.requiredLabel}"
             name="${ifDefined(this.name)}"
             value="${ifDefined(this.value)}"
             .checked="${this.checked}"
+            aria-checked="${this.checked}"
             .disabled="${this.disabled}"
-            aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
+            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}"
           />
           <div class="mdc-toggle__slider">
             <mdc-icon
@@ -161,8 +207,6 @@ class Toggle extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
     `;
     }
 }
-/** @internal */
-Toggle.formAssociated = true;
 Toggle.styles = [...FormfieldWrapper.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),
@@ -172,4 +216,8 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Toggle.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Toggle.prototype, "autofocus", void 0);
 export default Toggle;

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

@@ -13,5 +13,6 @@ declare const ICON_SIZE_IN_REM: {
 };
 declare const DEFAULTS: {
     readonly SIZE: "default";
+    readonly VALIDATION_MESSAGE: "Please toggle this switch if you want to proceed.";
 };
 export { TAG_NAME, DEFAULTS, TOGGLE_SIZE, ICON_NAME, ICON_SIZE_IN_REM };

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

@@ -14,5 +14,6 @@ const ICON_SIZE_IN_REM = {
 };
 const DEFAULTS = {
     SIZE: TOGGLE_SIZE.DEFAULT,
+    VALIDATION_MESSAGE: 'Please toggle this switch if you want to proceed.',
 };
 export { TAG_NAME, DEFAULTS, TOGGLE_SIZE, ICON_NAME, ICON_SIZE_IN_REM };