@momentum-design/components 0.85.10 → 0.87.0

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

@@ -1,4 +1,4 @@
-import { CSSResult, nothing, PropertyValueMap } from 'lit';
+import { CSSResult, nothing } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
@@ -123,14 +123,6 @@ declare class Input extends Input_base implements AssociatedFormControl {
     formResetCallback(): void;
     /** @internal */
     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
-     */
-    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.
@@ -140,6 +132,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * @param value - new value
      */
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    private setInputValidity;
     /**
      * Updates the value of the input field.
      * Sets the form value.

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

@@ -10,6 +10,7 @@ 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 { live } from 'lit/directives/live.js';
 import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
@@ -100,7 +101,6 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.updateComplete
             .then(() => {
             if (this.inputElement) {
-                this.inputElement.checkValidity();
                 this.setInputValidity();
                 this.internals.setFormValue(this.inputElement.value);
             }
@@ -114,43 +114,14 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     /** @internal */
     formResetCallback() {
         this.value = '';
+        this.inputElement.value = '';
+        this.setInputValidity();
         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
-     */
-    handleValueChange() {
-        this.updateComplete
-            .then(() => {
-            this.setInputValidity();
-        })
-            .catch(error => {
-            if (this.onerror) {
-                this.onerror(error);
-            }
-        });
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('value')) {
-            this.handleValueChange();
-        }
-    }
-    setInputValidity() {
-        if (this.required && 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.
@@ -161,8 +132,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      */
     attributeChangedCallback(name, old, value) {
         super.attributeChangedCallback(name, old, value);
-        const validationRelatedAttributes = ['maxlength', 'minlength', 'pattern', 'required'];
-        if (validationRelatedAttributes.includes(name)) {
+        if (name === 'validation-message') {
             this.updateComplete
                 .then(() => {
                 this.setInputValidity();
@@ -174,6 +144,13 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             });
         }
     }
+    setInputValidity() {
+        this.inputElement.setCustomValidity('');
+        if (!this.inputElement.validity.valid && this.validationMessage) {
+            this.inputElement.setCustomValidity(this.validationMessage);
+        }
+        this.setValidity();
+    }
     /**
      * Updates the value of the input field.
      * Sets the form value.
@@ -191,6 +168,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     onInput() {
         this.updateValue();
         this.setInputValidity();
+        this.checkValidity();
     }
     /**
      * Handles the change event of the input field.
@@ -302,10 +280,10 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         return html `<input
       aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
       class="input"
-      part="input"
+      part="mdc-input"
       id="${this.id}"
       name="${this.name}"
-      .value="${this.value}"
+      .value="${live(this.value)}"
       ?disabled="${this.disabled}"
       ?readonly="${this.readonly}"
       ?required="${this.required}"

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

@@ -12,6 +12,7 @@ declare const AUTO_COMPLETE: {
     readonly ON: "on";
 };
 declare const INPUT_TYPE: {
+    readonly PASSWORD: "password";
     readonly TEXT: "text";
     readonly SEARCH: "search";
 };

package/dist/components/input/input.constants.js

@@ -16,6 +16,7 @@ const AUTO_COMPLETE = {
     ON: 'on',
 };
 const INPUT_TYPE = {
+    PASSWORD: 'password',
     TEXT: 'text',
     SEARCH: 'search',
 };

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

@@ -62,7 +62,7 @@ declare class MenuItemCheckbox extends MenuItem {
      * If the menuitemcheckbox is disabled, it does nothing.
      * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
      */
-    private menuitemcheckboxHandleClick;
+    private handleMouseClick;
     update(changedProperties: PropertyValues): void;
     /**
      * Returns a static checkbox element if the indicator is set to checkbox.

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -76,14 +76,14 @@ class MenuItemCheckbox extends MenuItem {
          * If the menuitemcheckbox is disabled, it does nothing.
          * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
          */
-        this.menuitemcheckboxHandleClick = (event) => {
+        this.handleMouseClick = (event) => {
             event.stopPropagation();
             if (this.disabled)
                 return;
             this.checked = !this.checked;
             this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         };
-        this.addEventListener('click', this.menuitemcheckboxHandleClick);
+        this.addEventListener('click', this.handleMouseClick);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -101,16 +101,16 @@ class MenuItemCheckbox extends MenuItem {
      * @returns TemplateResult | typeof nothing
      */
     staticCheckbox() {
-        if (this.indicator !== INDICATOR.CHECKBOX) {
-            return nothing;
+        if (this.indicator === INDICATOR.CHECKBOX) {
+            return html `
+        <mdc-staticcheckbox
+          slot="leading-controls"
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+        ></mdc-staticcheckbox>
+      `;
         }
-        return html `
-      <mdc-staticcheckbox
-        slot="leading-controls"
-        ?checked="${this.checked}"
-        ?disabled="${this.disabled}"
-      ></mdc-staticcheckbox>
-    `;
+        return nothing;
     }
     /**
      * Returns a static toggle element if the indicator is set to toggle.
@@ -120,17 +120,17 @@ class MenuItemCheckbox extends MenuItem {
      * @returns TemplateResult | typeof nothing
      */
     staticToggle() {
-        if (this.indicator !== INDICATOR.TOGGLE) {
-            return nothing;
+        if (this.indicator === INDICATOR.TOGGLE) {
+            return html `
+        <mdc-statictoggle
+          slot="trailing-controls"
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          size="${TOGGLE_SIZE.COMPACT}"
+        ></mdc-statictoggle>
+      `;
         }
-        return html `
-      <mdc-statictoggle
-        slot="trailing-controls"
-        ?checked="${this.checked}"
-        ?disabled="${this.disabled}"
-        size="${TOGGLE_SIZE.COMPACT}"
-      ></mdc-statictoggle>
-    `;
+        return nothing;
     }
     /**
      * Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.

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

@@ -1,3 +1,4 @@
+import '../icon';
 import '../staticradio';
 import '../text';
 import '../tooltip';

package/dist/components/menuitemradio/index.js

@@ -1,3 +1,4 @@
+import '../icon';
 import '../staticradio';
 import '../text';
 import '../tooltip';

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

@@ -27,8 +27,10 @@ import { Indicator } from './menuitemradio.types';
  * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
  * Make sure the new indicator is accessible.
  *
+ * @dependency mdc-icon
  * @dependency mdc-staticradio
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitemradio
  *
@@ -72,7 +74,7 @@ declare class MenuItemRadio extends MenuItem {
      * If the menuitemradio is not checked, it sets its checked state to `true`
      * and sets all other menuitemradio elements of the same group with checked state to `false`.
      */
-    private radioHandleClick;
+    private handleMouseClick;
     update(changedProperties: PropertyValues): void;
     /**
      * Returns a static checkbox element if the indicator is set to checkbox.

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -42,8 +42,10 @@ import styles from './menuitemradio.styles';
  * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
  * Make sure the new indicator is accessible.
  *
+ * @dependency mdc-icon
  * @dependency mdc-staticradio
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitemradio
  *
@@ -77,7 +79,7 @@ class MenuItemRadio extends MenuItem {
          * If the menuitemradio is not checked, it sets its checked state to `true`
          * and sets all other menuitemradio elements of the same group with checked state to `false`.
          */
-        this.radioHandleClick = (event) => {
+        this.handleMouseClick = (event) => {
             event.stopPropagation();
             if (this.disabled || this.checked)
                 return;
@@ -85,7 +87,7 @@ class MenuItemRadio extends MenuItem {
             this.checked = true;
             this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         };
-        this.addEventListener('click', this.radioHandleClick);
+        this.addEventListener('click', this.handleMouseClick);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -108,9 +110,9 @@ class MenuItemRadio extends MenuItem {
     updateOtherRadiosCheckedState() {
         const radios = this.getAllRadiosWithinSameGroup();
         radios.forEach(radio => {
-            // eslint-disable-next-line no-param-reassign
-            if (radio !== this)
-                radio.checked = false;
+            if (radio !== this) {
+                radio.removeAttribute('checked');
+            }
         });
     }
     update(changedProperties) {
@@ -128,16 +130,16 @@ class MenuItemRadio extends MenuItem {
      * @returns TemplateResult | typeof nothing
      */
     renderStaticRadio() {
-        if (this.indicator !== INDICATOR.RADIO) {
-            return nothing;
+        if (this.indicator === INDICATOR.RADIO) {
+            return html `
+        <mdc-staticradio
+          slot="leading-controls"
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+        ></mdc-staticradio>
+      `;
         }
-        return html `
-      <mdc-staticradio
-        slot="leading-controls"
-        ?checked="${this.checked}"
-        ?disabled="${this.disabled}"
-      ></mdc-staticradio>
-    `;
+        return nothing;
     }
     /**
      * Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.

package/dist/components/menusection/menusection.component.js

@@ -75,7 +75,7 @@ __decorate([
     __metadata("design:type", Object)
 ], MenuSection.prototype, "ariaLabel", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
+    property({ type: String, reflect: true, attribute: 'header-text' }),
     __metadata("design:type", Object)
 ], MenuSection.prototype, "headerText", void 0);
 export default MenuSection;

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

@@ -0,0 +1,11 @@
+import '../button';
+import '../icon';
+import '../text';
+import '../toggletip';
+import Password from './password.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-password']: Password;
+    }
+}
+export default Password;

package/dist/components/password/index.js

@@ -0,0 +1,8 @@
+import '../button';
+import '../icon';
+import '../text';
+import '../toggletip';
+import Password from './password.component';
+import { TAG_NAME } from './password.constants';
+Password.register(TAG_NAME);
+export default Password;

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

@@ -0,0 +1,75 @@
+import { CSSResult, nothing } from 'lit';
+import Input from '../input/input.component';
+import type { InputType } from '../input/input.types';
+import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types';
+/**
+ * `mdc-password` is a component that allows users to input their password.
+ *  It extends the `mdc-input` component and provides additional features specific to password fields.
+ *  It contains:
+ * - `label` field - describe the password field.
+ * - `password` field - contains the value
+ * - `help-text` or `validation-message` - displayed below the password field.
+ * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
+ * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.
+ * - all the attributes of the native password field.
+ *
+ * @tagname mdc-password
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the password receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the password loses focus.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the password container
+ * @cssproperty --mdc-input-text-color - Text color for the password field
+ * @cssproperty --mdc-input-background-color - Background color for the password field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the password container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
+ *
+ */
+declare class Password extends Input {
+    /**
+     * Aria label for the show or hide password icon button.
+     */
+    showHideButtonAriaLabel: string;
+    /**
+     * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
+     * @override
+     */
+    helpTextType: ValidationType;
+    connectedCallback(): void;
+    /**
+     * Internal state to track whether the password is visible (shown as text) or hidden (shown as password).
+     */
+    private showPassword;
+    /**
+     * Toggles the visibility of the password.
+     */
+    private toggleShowPassword;
+    /**
+     * Renders the trailing button for showing or hiding the password.
+     */
+    protected renderTrailingButton(show?: boolean): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+     * Renders the input element for the password field.
+     */
+    protected renderInputElement(_: InputType, hidePlaceholder?: boolean): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Password;

package/dist/components/password/password.component.js

@@ -0,0 +1,128 @@
+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, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import Input from '../input/input.component';
+import { INPUT_TYPE } from '../input/input.constants';
+import { BUTTON_VARIANTS } from '../button/button.constants';
+import { DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { PASSWORD_VISIBILITY_ICONS } from './password.constants';
+/**
+ * `mdc-password` is a component that allows users to input their password.
+ *  It extends the `mdc-input` component and provides additional features specific to password fields.
+ *  It contains:
+ * - `label` field - describe the password field.
+ * - `password` field - contains the value
+ * - `help-text` or `validation-message` - displayed below the password field.
+ * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
+ * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.
+ * - all the attributes of the native password field.
+ *
+ * @tagname mdc-password
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the password receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the password loses focus.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the password container
+ * @cssproperty --mdc-input-text-color - Text color for the password field
+ * @cssproperty --mdc-input-background-color - Background color for the password field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the password container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
+ *
+ */
+class Password extends Input {
+    constructor() {
+        super(...arguments);
+        /**
+         * Aria label for the show or hide password icon button.
+         */
+        this.showHideButtonAriaLabel = '';
+        /**
+         * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
+         * @override
+         */
+        this.helpTextType = DEFAULTS.VALIDATION;
+        /**
+         * Internal state to track whether the password is visible (shown as text) or hidden (shown as password).
+         */
+        this.showPassword = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Ensure the trailing button is always true for password inputs
+        this.trailingButton = true;
+    }
+    /**
+     * Toggles the visibility of the password.
+     */
+    toggleShowPassword() {
+        this.showPassword = !this.showPassword;
+    }
+    /**
+     * Renders the trailing button for showing or hiding the password.
+     */
+    renderTrailingButton(show = false) {
+        const showBtn = show || this.value;
+        if (!showBtn) {
+            return nothing;
+        }
+        return html `
+      <mdc-button
+        part="trailing-button"
+        class="own-focus-ring ${!showBtn ? 'hidden' : ''}"
+        variant=${BUTTON_VARIANTS.TERTIARY}
+        ?disabled=${this.disabled || this.readonly || !showBtn}
+        size="${DEFAULTS.ICON_SIZE}"
+        @click=${this.toggleShowPassword}
+        aria-label=${this.showHideButtonAriaLabel}
+        prefix-icon=${this.showPassword ? PASSWORD_VISIBILITY_ICONS.HIDE_BOLD : PASSWORD_VISIBILITY_ICONS.SHOW_BOLD}
+      ></mdc-button>
+    `;
+    }
+    /**
+     * Renders the input element for the password field.
+     */
+    renderInputElement(_, hidePlaceholder) {
+        const inputType = this.showPassword ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;
+        return super.renderInputElement(inputType, hidePlaceholder);
+    }
+}
+Password.styles = [...Input.styles];
+__decorate([
+    property({ type: String, attribute: 'show-hide-button-aria-label' }),
+    __metadata("design:type", Object)
+], Password.prototype, "showHideButtonAriaLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'help-text-type' }),
+    __metadata("design:type", String)
+], Password.prototype, "helpTextType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Password.prototype, "showPassword", void 0);
+export default Password;

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

@@ -0,0 +1,5 @@
+export declare const PASSWORD_VISIBILITY_ICONS: {
+    readonly HIDE_BOLD: "hide-bold";
+    readonly SHOW_BOLD: "show-bold";
+};
+export declare const TAG_NAME: "mdc-password";

package/dist/components/password/password.constants.js

@@ -0,0 +1,6 @@
+import utils from '../../utils/tag-name';
+export const PASSWORD_VISIBILITY_ICONS = {
+    HIDE_BOLD: 'hide-bold',
+    SHOW_BOLD: 'show-bold',
+};
+export const TAG_NAME = utils.constructTagName('password');

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

@@ -0,0 +1,7 @@
+interface Events {
+    onInputEvent: InputEvent;
+    onChangeEvent: Event;
+    onFocusEvent: FocusEvent;
+    onBlurEvent: FocusEvent;
+}
+export type { Events };

package/dist/components/password/password.types.js

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