@momentum-design/components 0.28.1 → 0.28.3

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

@@ -2,7 +2,7 @@ import type { PropertyValues } from 'lit';
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { ButtonSize, ButtonType } from './buttonsimple.types';
-declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
  * It is used as an internal component and is not intended to be used directly by consumers.
@@ -60,12 +60,6 @@ declare class Buttonsimple extends Buttonsimple_base {
      * @internal
      */
     private prevTabindex;
-    /** @internal */
-    static formAssociated: boolean;
-    /** @internal */
-    private internals;
-    /** @internal */
-    get form(): HTMLFormElement | null;
     constructor();
     update(changedProperties: PropertyValues): void;
     protected executeAction(): void;

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -11,6 +11,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
 import styles from './buttonsimple.styles';
@@ -26,11 +27,7 @@ import styles from './buttonsimple.styles';
  *
  * @tagname mdc-buttonsimple
  */
-class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
-    /** @internal */
-    get form() {
-        return this.internals.form;
-    }
+class Buttonsimple extends FormInternalsMixin(TabIndexMixin(DisabledMixin(Component))) {
     constructor() {
         super();
         /**
@@ -81,8 +78,6 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
         this.addEventListener('keydown', this.handleKeyDown.bind(this));
         this.addEventListener('keyup', this.handleKeyUp.bind(this));
         this.addEventListener('blur', this.handleBlur.bind(this));
-        /** @internal */
-        this.internals = this.attachInternals();
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -97,11 +92,11 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
         }
     }
     executeAction() {
-        if (this.type === BUTTON_TYPE.SUBMIT && this.internals.form) {
-            this.internals.form.requestSubmit();
+        if (this.type === BUTTON_TYPE.SUBMIT && this.form) {
+            this.form.requestSubmit();
         }
-        if (this.type === BUTTON_TYPE.RESET && this.internals.form) {
-            this.internals.form.reset();
+        if (this.type === BUTTON_TYPE.RESET && this.form) {
+            this.form.reset();
         }
     }
     /**
@@ -208,8 +203,6 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
     `;
     }
 }
-/** @internal */
-Buttonsimple.formAssociated = true;
 Buttonsimple.styles = [...Component.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),

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

@@ -1,6 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
+import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-declare const Checkbox_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;
+declare const Checkbox_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;
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selections in lists.
@@ -30,7 +31,7 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
  */
-declare class Checkbox extends Checkbox_base {
+declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**
      * Determines whether the checkbox is selected or unselected.
      *
@@ -45,12 +46,12 @@ declare class Checkbox extends Checkbox_base {
      * @default false
      */
     indeterminate: boolean;
-    /** @internal */
-    private internals;
-    /** @internal */
-    static formAssociated: boolean;
-    /** @internal */
-    get form(): HTMLFormElement | null;
+    /**
+     * 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();
     /**
      * Updates the form value to reflect the current state of the checkbox.
@@ -58,23 +59,35 @@ declare class Checkbox extends Checkbox_base {
      * If unchecked, the value is set to null.
      */
     private setFormValue;
+    /**
+     * Manages the required state of the checkbox.
+     * If the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid.
+     */
+    private manageRequired;
+    /** @internal
+     * Resets the checkbox to its initial state.
+     * The checked property is set to false.
+     */
+    formResetCallback(): void;
+    /** @internal */
+    formStateRestoreCallback(state: string): void;
     /**
      * Toggles the state of the checkbox element.
      * If the element is not disabled, then
      * the checked property is toggled and the indeterminate property is set to false.
      */
     private toggleState;
-    /**
-     * Toggles the state of the checkbox element.
-     * and dispatch the new change event.
-     */
-    handleChange(event: Event): void;
     /**
      * Handles the keydown event on the checkbox.
      * When the user presses Enter, the form is submitted.
      * @param event - The keyboard event.
      */
     private handleKeyDown;
+    /**
+     * Toggles the state of the checkbox element.
+     * and dispatch the new change event.
+     */
+    handleChange(event: Event): void;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

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

@@ -10,10 +10,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { v4 as uuidv4 } from 'uuid';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
-import { NameMixin } from '../../utils/mixins/NameMixin';
-import { ValueMixin } from '../../utils/mixins/ValueMixin';
+import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ICON_NAME } from './checkbox.constants';
@@ -47,11 +45,7 @@ import styles from './checkbox.styles';
  * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
  */
-class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper))) {
-    /** @internal */
-    get form() {
-        return this.internals.form;
-    }
+class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
         super();
         /**
@@ -68,10 +62,14 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
          * @default false
          */
         this.indeterminate = false;
-        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;
         // Checkbox does not contain helpTextType property.
         this.helpTextType = undefined;
-        this.id = `mdc-input-${uuidv4()}`;
     }
     /**
      * Updates the form value to reflect the current state of the checkbox.
@@ -83,8 +81,44 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
         if (this.checked) {
             actualValue = !this.value ? 'on' : this.value;
         }
+        else {
+            actualValue = null;
+        }
+        this.manageRequired();
         this.internals.setFormValue(actualValue);
     }
+    /**
+     * 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({});
+        }
+    }
+    /** @internal
+     * Resets the checkbox to its initial state.
+     * The checked property is set to false.
+     */
+    formResetCallback() {
+        this.checked = false;
+        this.indeterminate = false;
+    }
+    /** @internal */
+    formStateRestoreCallback(state) {
+        if (state) {
+            this.checked = true;
+        }
+    }
     /**
      * Toggles the state of the checkbox element.
      * If the element is not disabled, then
@@ -96,15 +130,6 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
             this.indeterminate = false;
         }
     }
-    /**
-     * Toggles the state of the checkbox element.
-     * and dispatch the new change event.
-     */
-    handleChange(event) {
-        this.toggleState();
-        const EventConstructor = event.constructor;
-        this.dispatchEvent(new EventConstructor(event.type, event));
-    }
     /**
      * Handles the keydown event on the checkbox.
      * When the user presses Enter, the form is submitted.
@@ -116,6 +141,15 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }
+    /**
+     * Toggles the state of the checkbox element.
+     * and dispatch the new change event.
+     */
+    handleChange(event) {
+        this.toggleState();
+        const EventConstructor = event.constructor;
+        this.dispatchEvent(new EventConstructor(event.type, event));
+    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('checked')) {
@@ -139,13 +173,17 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
           id="${this.id}"
           type="checkbox"
           class="input"
+          ?autofocus="${this.autofocus}"
           name="${ifDefined(this.name)}"
           value="${ifDefined(this.value)}"
+          ?required="${!!this.requiredLabel}"
           .checked="${this.checked}"
+          aria-checked="${this.indeterminate ? 'mixed' : this.checked}"
           .indeterminate="${this.indeterminate}"
           .disabled="${this.disabled}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-          aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
+          tabindex="${this.disabled ? -1 : 0}"
+          aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
           @change=${this.handleChange}
           @keydown=${this.handleKeyDown}
         />
@@ -158,8 +196,6 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
     `;
     }
 }
-/** @internal */
-Checkbox.formAssociated = true;
 Checkbox.styles = [...FormfieldWrapper.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),
@@ -169,4 +205,8 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "autofocus", void 0);
 export default Checkbox;

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

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { ROLE } from './formfieldgroup.constants';
@@ -45,7 +46,7 @@ class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
         part="container"
         role="${this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP}"
         aria-labelledby="${FORMFIELD_DEFAULTS.HEADING_ID}"
-        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 : ''}"
       >
         <div part="group-header">

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

@@ -2,7 +2,8 @@ import { CSSResult, nothing, PropertyValueMap } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
 import type { AutoCapitalizeType } from './input.types';
-declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ValueMixin").ValueMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & typeof FormfieldWrapper;
+import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
+declare const Input_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;
 /**
  * mdc-input is a component that allows users to input text.
  *  It contains:
@@ -44,7 +45,7 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
  *
  */
-declare class Input extends Input_base {
+declare class Input extends Input_base implements AssociatedFormControl {
     /**
      * The placeholder text that is displayed when the input field is empty.
      */
@@ -116,97 +117,83 @@ declare class Input extends Input_base {
      * @default ''
      */
     clearAriaLabel: string;
-    checkValidity(): boolean;
-    reportValidity(): boolean;
-    /** @internal */
-    private internals;
+    connectedCallback(): void;
     /** @internal */
-    static formAssociated: boolean;
+    formResetCallback(): void;
     /** @internal */
-    get form(): HTMLFormElement | null;
-    constructor();
-    /**
-   * @internal
-   * The input element
-   */
-    private inputElement;
-    connectedCallback(): void;
-    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    formStateRestoreCallback(state: string): void;
     /**
-   * 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(): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private setInputValidity;
     /**
-   * 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: string, old: string | null, value: string | null): void;
     /**
-   * Sets the validity of the input field based on the input field's validity.
-   * @returns void
-   */
-    private setValidityFromInput;
-    /**
-   * 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
+     */
     private updateValue;
     /**
-   * 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.
+     *
+     */
     private onInput;
     /**
-   * 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.
+     */
     private onChange;
     /**
-     * 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
+       */
     private handleKeyDown;
     /**
-   * 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
+     */
     protected renderLeadingIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
-   * 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
+     */
     protected renderPrefixText(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
-   * Clears the input field.
-   */
+     * Clears the input field.
+     */
     private clearInputText;
     /**
-   * 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
+     */
     protected renderTrailingButton(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;