@momentum-design/components 0.28.1 → 0.28.3

package/dist/components/input/input.component.js

@@ -8,16 +8,14 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { v4 as uuidv4 } from 'uuid';
 import styles from './input.styles';
 import FormfieldWrapper from '../formfieldwrapper';
-import { NameMixin } from '../../utils/mixins/NameMixin';
 import { AUTO_CAPITALIZE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
-import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 /**
  * mdc-input is a component that allows users to input text.
  *  It contains:
@@ -59,21 +57,9 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
  * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
  *
  */
-class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper))) {
-    checkValidity() {
-        this.setValidityFromInput();
-        return this.internals.checkValidity();
-    }
-    reportValidity() {
-        this.setValidityFromInput();
-        return this.internals.reportValidity();
-    }
-    /** @internal */
-    get form() {
-        return this.internals.form;
-    }
+class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The placeholder text that is displayed when the input field is empty.
          */
@@ -107,16 +93,13 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
          * @default ''
          */
         this.clearAriaLabel = '';
-        /** @internal */
-        this.internals = this.attachInternals();
-        this.id = `mdc-input-${uuidv4()}`;
     }
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(() => {
             if (this.inputElement) {
                 this.inputElement.checkValidity();
-                this.setValidityFromInput();
+                this.setInputValidity();
                 this.internals.setFormValue(this.inputElement.value);
             }
         }).catch((error) => {
@@ -125,35 +108,52 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
             }
         });
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('value')) {
-            this.handleValueChange();
-        }
+    /** @internal */
+    formResetCallback() {
+        this.value = '';
+        this.requestUpdate();
+    }
+    /** @internal */
+    formStateRestoreCallback(state) {
+        this.value = state;
     }
     /**
-   * Handles the value change of the input field.
-   * Sets the form value and updates the validity of the input field.
-   * @returns void
-   */
+     * Handles the value change of the input field.
+     * Sets the form value and updates the validity of the input field.
+     * @returns void
+     */
     handleValueChange() {
-        this.internals.setFormValue(this.value);
         this.updateComplete.then(() => {
-            this.setValidityFromInput();
+            this.setInputValidity();
         }).catch((error) => {
             if (this.onerror) {
                 this.onerror(error);
             }
         });
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.handleValueChange();
+        }
+    }
+    setInputValidity() {
+        if (this.validationMessage && this.value === '') {
+            this.inputElement.setCustomValidity(this.validationMessage);
+        }
+        else {
+            this.inputElement.setCustomValidity('');
+        }
+        this.setValidity();
+    }
     /**
-   * This function is called when the attribute changes.
-   * It updates the validity of the input field based on the input field's validity.
-   *
-   * @param name - attribute name
-   * @param old - old value
-   * @param value - new value
-   */
+     * This function is called when the attribute changes.
+     * It updates the validity of the input field based on the input field's validity.
+     *
+     * @param name - attribute name
+     * @param old - old value
+     * @param value - new value
+     */
     attributeChangedCallback(name, old, value) {
         super.attributeChangedCallback(name, old, value);
         const validationRelatedAttributes = [
@@ -164,7 +164,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
         ];
         if (validationRelatedAttributes.includes(name)) {
             this.updateComplete.then(() => {
-                this.setValidityFromInput();
+                this.setInputValidity();
             }).catch((error) => {
                 if (this.onerror) {
                     this.onerror(error);
@@ -173,65 +173,56 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
         }
     }
     /**
-   * Sets the validity of the input field based on the input field's validity.
-   * @returns void
-   */
-    setValidityFromInput() {
-        if (this.inputElement) {
-            this.internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage, this.inputElement);
-        }
-    }
-    /**
-   * Updates the value of the input field.
-   * Sets the form value.
-   * @returns void
-   */
+     * Updates the value of the input field.
+     * Sets the form value.
+     * @returns void
+     */
     updateValue() {
         this.value = this.inputElement.value;
         this.internals.setFormValue(this.inputElement.value);
     }
     /**
-   * Handles the input event of the input field.
-   * Updates the value and sets the validity of the input field.
-   *
-   */
+     * Handles the input event of the input field.
+     * Updates the value and sets the validity of the input field.
+     *
+     */
     onInput() {
         this.updateValue();
-        this.setValidityFromInput();
+        this.setInputValidity();
     }
     /**
-   * Handles the change event of the input field.
-   * Updates the value and sets the validity of the input field.
-   *
-   * The 'change' event does not bubble up through the shadow DOM as it was not composed.
-   * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
-   * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
-   *
-   * @param event - Event which contains information about the value change.
-   */
+     * Handles the change event of the input field.
+     * Updates the value and sets the validity of the input field.
+     *
+     * The 'change' event does not bubble up through the shadow DOM as it was not composed.
+     * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
+     * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
+     *
+     * @param event - Event which contains information about the value change.
+     */
     onChange(event) {
         this.updateValue();
-        this.setValidityFromInput();
+        this.setInputValidity();
         const EventConstructor = event.constructor;
         this.dispatchEvent(new EventConstructor(event.type, event));
     }
     /**
-     * Handles the keydown event of the input field.
-     * If the key pressed is 'Enter', it submits the form.
-     * @param event - Keyboard event
-     */
+       * Handles the keydown event of the input field.
+       * If the key pressed is 'Enter', it submits the form.
+       * @param event - Keyboard event
+       */
     handleKeyDown(event) {
         var _a;
         if (event.key === 'Enter') {
-            (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }
     /**
-   * Renders the leading icon before the input field.
-   * If the leading icon is not set, it will not be displayed.
-   *
-   * @returns void
-   */
+     * Renders the leading icon before the input field.
+     * If the leading icon is not set, it will not be displayed.
+     *
+     * @returns void
+     */
     renderLeadingIcon() {
         if (!this.leadingIcon) {
             return nothing;
@@ -247,15 +238,15 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
     `;
     }
     /**
-   * Renders the prefix text before the input field.
-   * If the prefix text is more than 10 characters,
-   * - it will not be displayed.
-   * - the validation messsage will be displayed.
-   *
-   *  Note: We are setting aria-hidden so that the screen reader does not read the prefix text.
-   *  The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.
-   * @returns void
-   */
+     * Renders the prefix text before the input field.
+     * If the prefix text is more than 10 characters,
+     * - it will not be displayed.
+     * - the validation messsage will be displayed.
+     *
+     *  Note: We are setting aria-hidden so that the screen reader does not read the prefix text.
+     *  The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.
+     * @returns void
+     */
     renderPrefixText() {
         if (!this.prefixText) {
             return nothing;
@@ -272,8 +263,8 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
     `;
     }
     /**
-   * Clears the input field.
-   */
+     * Clears the input field.
+     */
     clearInputText() {
         var _a;
         this.value = '';
@@ -281,9 +272,9 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
-   * Renders the trailing button to clear the input field if the trailingButton is set to true.
-   * @returns void
-   */
+     * Renders the trailing button to clear the input field if the trailingButton is set to true.
+     * @returns void
+     */
     renderTrailingButton() {
         if (!this.trailingButton) {
             return nothing;
@@ -321,7 +312,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
             ?readonly="${this.readonly}"
             ?required="${!!this.requiredLabel}"
             type="text"
-            aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
+            aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
             placeholder=${ifDefined(this.placeholder)}
             minlength=${ifDefined(this.minlength)}
             maxlength=${ifDefined(this.maxlength)}
@@ -344,8 +335,6 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
     `;
     }
 }
-/** @internal */
-Input.formAssociated = true;
 Input.styles = [...FormfieldWrapper.styles, ...styles];
 __decorate([
     property({ type: String }),
@@ -407,8 +396,4 @@ __decorate([
     property({ type: String, attribute: 'clear-aria-label' }),
     __metadata("design:type", Object)
 ], Input.prototype, "clearAriaLabel", void 0);
-__decorate([
-    query('input'),
-    __metadata("design:type", HTMLInputElement)
-], Input.prototype, "inputElement", void 0);
 export default Input;

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

@@ -1,6 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-declare const Radio_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;
+import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
+declare const Radio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selection in lists.
@@ -31,7 +32,7 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  *  when active and disabled
  *
  */
-declare class Radio extends Radio_base {
+declare class Radio extends Radio_base implements AssociatedFormControl {
     /**
     * Determines whether the radio is selected or unselected.
     *
@@ -44,54 +45,68 @@ declare class Radio extends Radio_base {
     * @default false
     */
     readonly: boolean;
-    /** @internal */
-    private internals;
-    /** @internal */
-    static formAssociated: boolean;
-    /** @internal */
-    get form(): HTMLFormElement | null;
-    constructor();
     /**
-     * Updates the form value to reflect the current state of the radio.
-     * If checked, the value is set to the user-provided value.
-     * If unchecked, the value is set to null.
-     */
-    private setFormValue;
+   * 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
+   */
+    autofocus: boolean;
+    constructor();
     firstUpdated(): void;
     /**
-     * Returns all radios within the same group (name).
-     */
+   * Returns all radios within the same group (name).
+   */
     private getAllRadiosWithinSameGroup;
     /**
-     * The 'change' event does not bubble up through the shadow DOM as it was not composed.
-     * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
-     * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
-     */
+   * The 'change' event does not bubble up through the shadow DOM as it was not composed.
+   * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
+   * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
+   */
     private dispatchChangeEvent;
+    /** @internal */
+    formResetCallback(): void;
+    /** @internal */
+    formStateRestoreCallback(state: string): void;
     /**
-     * Handles the change event on the radio element.
-     * This will toggle the state of the radio element.
-     * Dispatches the change event.
+   * @internal
+   */
+    setComponentValidity(isValid: boolean): void;
+    /**
+     * Sets the validity of the group of radios.
+     * @param radios - Array of radios of the same group
+     * @param isValid - Boolean value to set the validity of the group
      */
+    private setGroupValidity;
+    /**
+   * Updates the form value to reflect the current state of the radio.
+   * If checked, the value is set to the user-provided value.
+   * If unchecked, the value is set to null.
+   */
+    private setActualFormValue;
+    /**
+   * Handles the change event on the radio element.
+   * This will toggle the state of the radio element.
+   * Dispatches the change event.
+   */
     private handleChange;
     /**
-     * Updates the state of the radio button at the specified index within the enabled radios.
-     * Focuses the radio button and triggers the change event if the radio button is not read-only.
-     *
-     * @param enabledRadios - An array of enabled radio buttons within the same group.
-     * @param index - The index of the radio button to be updated within the enabled radios array.
-     * @param event - The event that triggered the update.
-     */
+   * Updates the state of the radio button at the specified index within the enabled radios.
+   * Focuses the radio button and triggers the change event if the radio button is not read-only.
+   *
+   * @param enabledRadios - An array of enabled radio buttons within the same group.
+   * @param index - The index of the radio button to be updated within the enabled radios array.
+   * @param event - The event that triggered the update.
+   */
     private updateRadio;
     /**
-     * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
-     */
+   * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
+   */
     private handleKeyDown;
     /**
-     * Update tab index for all radios in the same group (name)
-     * If any radio group is checked, it will have a tab index of 0
-     * If no radio group is checked, the first enabled radio will have a tab index of 0
-     */
+   * Update tab index for all radios in the same group (name)
+   * If any radio group is checked, it will have a tab index of 0
+   * If no radio group is checked, the first enabled radio will have a tab index of 0
+   */
     private updateTabIndex;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;