@momentum-design/components 0.86.0 → 0.87.1

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/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 {};

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

@@ -10,6 +10,8 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
@@ -22,6 +24,7 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
+ * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  */
@@ -60,7 +63,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * The native select element
      */
     inputElement: HTMLInputElement;
-    connectedCallback(): void;
     /**
      * A helper function which returns a flattened array of all valid options from the assigned slot.
      * It takes care of the edge cases where the option is either a direct child or a
@@ -106,6 +108,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /** @internal */
     formStateRestoreCallback(state: string): void;
     private dispatchChange;
+    private dispatchInput;
     /**
      * Handles the keydown event on the select element when the popover is open.
      * The options are as follows:

package/dist/components/select/select.component.js

@@ -28,6 +28,8 @@ import styles from './select.styles';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
@@ -40,6 +42,7 @@ import styles from './select.styles';
  *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
+ * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  */
@@ -66,11 +69,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         /** @internal */
         this.activeDescendant = '';
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // select will only contain name and value will be defined in the options.
-        this.value = undefined;
-    }
     /**
      * A helper function which returns a flattened array of all valid options from the assigned slot.
      * It takes care of the edge cases where the option is either a direct child or a
@@ -142,10 +140,12 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.selectedValueText = (_b = (_a = option === null || option === void 0 ? void 0 : option.getAttribute('label')) !== null && _a !== void 0 ? _a : option === null || option === void 0 ? void 0 : option.textContent) !== null && _b !== void 0 ? _b : '';
         this.selectedIcon = option === null || option === void 0 ? void 0 : option.getAttribute('prefix-icon');
         this.selectedValue = (_d = (_c = option === null || option === void 0 ? void 0 : option.getAttribute('value')) !== null && _c !== void 0 ? _c : option === null || option === void 0 ? void 0 : option.textContent) !== null && _d !== void 0 ? _d : '';
+        this.value = this.selectedValue;
         // Set form value
         this.internals.setFormValue(this.selectedValue);
         this.manageRequired();
         // dispatch a change event when a value is selected
+        this.dispatchInput(this.selectedValue);
         this.dispatchChange(this.selectedValue);
     }
     /**
@@ -196,6 +196,16 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             bubbles: true,
         }));
     }
+    dispatchInput(value) {
+        if (!value) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('input', {
+            detail: { value },
+            composed: true,
+            bubbles: true,
+        }));
+    }
     /**
      * Handles the keydown event on the select element when the popover is open.
      * The options are as follows:
@@ -215,12 +225,10 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 break;
             }
             case KEYS.SPACE:
-                this.updateTabIndexForAllOptions(event.target);
                 this.closePopover();
                 event.preventDefault();
                 break;
             case KEYS.ENTER:
-                this.updateTabIndexForAllOptions(event.target);
                 this.closePopover();
                 event.preventDefault();
                 // if the popover is closed, then we submit the form.

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

@@ -3,6 +3,7 @@ import { ARROW_ICON } from './select.constants';
 interface Events {
     onClickEvent: MouseEvent;
     onChangeEvent: Event;
+    onInputEvent: Event;
     onKeyDownEvent: KeyboardEvent;
     onFocusEvent: FocusEvent;
 }